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:
                    'Loads a font and applies it to children. Shows blur/scale loading state until font is ready, then reveals with a smooth transition.',
            },
            story: { inline: false },
        },
        layout: 'centered',
    },
    argTypes: {
        weight: { control: 'number' },
    },
});
</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:
                    'Font that has never been loaded by fontLifecycleManager. The component renders in its pending state: blurred, scaled down, and semi-transparent.',
            },
        },
    }}
    args={{ font: fontUnknown, weight: 400 }}
>
    {#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:
                    'Uses Arial, a system font available in all browsers. Because fontLifecycleManager has not loaded it via FontFace, the manager status may remain pending — meaning the blur/scale state may still show. In a real app the manager would load the font and transition to the revealed state.',
            },
        },
    }}
    args={{ font: fontArial, weight: 400 }}
>
    {#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="Custom Weight"
    parameters={{
        docs: {
            description: {
                story:
                    'Demonstrates passing a custom weight (700). The weight is forwarded to fontLifecycleManager for font resolution; visually identical to the loaded state story until the manager confirms the font.',
            },
        },
    }}
    args={{ font: fontArialBold, weight: 700 }}
>
    {#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>