How to use useFlag in Storybook components?

[JE4GLE]

I'm creating UI components using Storybook.js. In one component, I have to check the state of a flag using import {useFlag} from '@unleash/proxy-client-svelte'; and const resetEnabled = useFlag('auth.password-reset');. However, when testing the component in Storybook, I get the following error

// TypeError: Right side of assignment cannot be destructured — @unleash_proxy-client-svelte.js:713
// from useFlag.js:5

const { isEnabled, client } = getContext(ContextStateSymbol);

I just want to find a solution to simulate an enabled (or disabled) flag in the Storybook environment. Thank you!

[FredrikOseberg]

Hard to say what is the exact problem here without more information, but the internals of useFlag needs access to a context: https://github.com/Unleash/proxy-client-svelte/blob/main/src/lib/useFlag.ts

So you might need to wrap your component in something that will allow access to the ContextStateSymbol, such as the FlagProvider.

[JE4GLE]

Thank you! I solved it using a decorator to wrap it with the FlagProvider:

<script lang="ts">
    import type { Snippet } from 'svelte';
    import {FlagProvider} from "@unleash/proxy-client-svelte";

    let { children }: { children: Snippet } = $props();
</script>

<FlagProvider>
    {@render children()}
</FlagProvider>

and

const { Story } = defineMeta({
	title: 'Unleash Test',
        component: UnleashFlagTest,
        decorators: [() => FlagDecorator],
});