frontend-svelte/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte

<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import FontApplicator from './FontApplicator.svelte';

const { Story } = defineMeta({
    title: 'Entities/FontApplicator',
    component: FontApplicator,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Applies a font to its children based on the supplied load `status`. Renders the skeleton (or system font) until status is `loaded`/`error`, then reveals the font. The status is provided by the composing widget — the component does not read the lifecycle store itself.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        status: { control: 'select', options: ['loading', 'loaded', 'error'] },
    },
});
</script>

<script lang="ts">
import { mockUnifiedFont } from '$entities/Font/testing';
import type { ComponentProps } from 'svelte';

const fontUnknown = mockUnifiedFont({ id: 'nonexistent-font-xk92z', name: 'Nonexistent Font Xk92z' });

const fontArial = mockUnifiedFont({ id: 'arial', name: 'Arial' });

const fontArialBold = mockUnifiedFont({ id: 'arial-bold', name: 'Arial' });
</script>

<Story
    name="Loading State"
    parameters={{
        docs: {
            description: {
                story:
                    'Status is `loading`: the font file has not resolved yet, so children render in the skeleton (or system font) fallback rather than the target font.',
            },
        },
    }}
    args={{ font: fontUnknown, status: 'loading' }}
>
    {#snippet template(args: ComponentProps<typeof FontApplicator>)}
        <FontApplicator {...args}>
            <p class="text-xl">The quick brown fox jumps over the lazy dog</p>
        </FontApplicator>
    {/snippet}
</Story>

<Story
    name="Loaded State"
    parameters={{
        docs: {
            description: {
                story:
                    'Status is `loaded`: the component reveals the font, applying it to its children (Arial here, available in all browsers).',
            },
        },
    }}
    args={{ font: fontArial, status: 'loaded' }}
>
    {#snippet template(args: ComponentProps<typeof FontApplicator>)}
        <FontApplicator {...args}>
            <p class="text-xl">The quick brown fox jumps over the lazy dog</p>
        </FontApplicator>
    {/snippet}
</Story>

<Story
    name="Error State"
    parameters={{
        docs: {
            description: {
                story:
                    'Status is `error`: the font failed to load. The component still reveals (it treats `error` like `loaded` for reveal purposes) so children are not stuck behind the skeleton — they fall back to the system font.',
            },
        },
    }}
    args={{ font: fontArialBold, status: 'error' }}
>
    {#snippet template(args: ComponentProps<typeof FontApplicator>)}
        <FontApplicator {...args}>
            <p class="text-xl">The quick brown fox jumps over the lazy dog</p>
        </FontApplicator>
    {/snippet}
</Story>