frontend-svelte/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte

<script module>
import Providers from '$shared/lib/storybook/Providers.svelte';
import { defineMeta } from '@storybook/addon-svelte-csf';
import FontSampler from './FontSampler.svelte';

const { Story } = defineMeta({
    title: 'Features/FontSampler',
    component: FontSampler,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Displays a sample text with a given font in a contenteditable element. Visual design matches FontCard: sharp corners, brand hover accent, header stats showing font properties (size, weight, line height, letter spacing). Staggered entrance animation based on index.',
            },
            story: { inline: false },
        },
    },
    argTypes: {
        font: {
            control: 'object',
            description: 'Font information object',
        },
        status: {
            control: 'select',
            options: ['loading', 'loaded', 'error'],
            description: 'Font-load status, supplied by the composing widget and forwarded to FontApplicator',
        },
        text: {
            control: 'text',
            description: 'Editable sample text (two-way bindable)',
        },
        index: {
            control: { type: 'number', min: 0 },
            description: 'Position index — drives the staggered entrance delay',
        },
    },
});
</script>

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

// Mock fonts for testing
const mockArial: UnifiedFont = {
    id: 'arial',
    name: 'Arial',
    provider: 'google',
    category: 'sans-serif',
    subsets: ['latin'],
    variants: ['400', '700'],
    styles: {
        regular: '',
        bold: '',
    },
    metadata: {
        cachedAt: Date.now(),
        version: '1.0',
        popularity: 1,
    },
    features: {
        isVariable: false,
    },
};

const mockGeorgia: UnifiedFont = {
    id: 'georgia',
    name: 'Georgia',
    provider: 'google',
    category: 'serif',
    subsets: ['latin'],
    variants: ['400', '700'],
    styles: {
        regular: '',
        bold: '',
    },
    metadata: {
        cachedAt: Date.now(),
        version: '1.0',
        popularity: 2,
    },
    features: {
        isVariable: false,
    },
};
</script>

<Story
    name="Default"
    args={{
        font: mockArial,
        status: 'loaded',
        text: 'The quick brown fox jumps over the lazy dog',
        index: 0,
    }}
>
    {#snippet template(args: ComponentProps<typeof FontSampler>)}
        <Providers>
            <div class="max-w-2xl mx-auto">
                <FontSampler {...args} />
            </div>
        </Providers>
    {/snippet}
</Story>
<Story
    name="Long Text"
    args={{
        font: mockGeorgia,
        status: 'loaded',
        text:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
        index: 1,
    }}
>
    {#snippet template(args: ComponentProps<typeof FontSampler>)}
        <Providers>
            <div class="max-w-2xl mx-auto">
                <FontSampler {...args} />
            </div>
        </Providers>
    {/snippet}
</Story>