frontend-svelte/src/shared/ui/ContentEditable/ContentEditable.stories.svelte

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

const { Story } = defineMeta({
    title: 'Shared/ContentEditable',
    component: ContentEditable,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'A contenteditable div with custom font and text properties. Allows inline text editing with support for font size, line height, and letter spacing. The text is two-way bindable for form use cases.',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
    argTypes: {
        text: {
            control: 'text',
            description: 'Visible text content (two-way bindable)',
        },
        fontSize: {
            control: { type: 'number', min: 8, max: 200 },
            description: 'Font size in pixels',
        },
        lineHeight: {
            control: { type: 'number', min: 0.8, max: 3, step: 0.1 },
            description: 'Line height multiplier',
        },
        letterSpacing: {
            control: { type: 'number', min: -0.5, max: 1, step: 0.05 },
            description: 'Letter spacing in em units',
        },
    },
});
</script>

<script lang="ts">
let value = $state('Here we can type and edit the content. Try it!');
let smallValue = $state('Small font size for compact text.');
let largeValue = $state('Large font size for emphasis.');
let spacedValue = $state('Wide letter spacing.');
let longValue = $state(
    '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.',
);
</script>

<Story
    name="Default"
    args={{
        text: value,
        fontSize: 48,
        lineHeight: 1.2,
        letterSpacing: 0,
    }}
>
    <ContentEditable bind:text={value} />
</Story>

<Story
    name="Small Font"
    args={{
        text: smallValue,
        fontSize: 16,
        lineHeight: 1.5,
        letterSpacing: 0,
    }}
>
    <ContentEditable bind:text={smallValue} />
</Story>

<Story
    name="Large Font"
    args={{
        text: largeValue,
        fontSize: 72,
        lineHeight: 1.1,
        letterSpacing: 0,
    }}
>
    <ContentEditable bind:text={largeValue} />
</Story>

<Story
    name="Wide Letter Spacing"
    args={{
        text: spacedValue,
        fontSize: 32,
        lineHeight: 1.3,
        letterSpacing: 0.3,
    }}
>
    <ContentEditable bind:text={spacedValue} />
</Story>

<Story
    name="Long Text"
    args={{
        text: longValue,
        fontSize: 24,
        lineHeight: 1.6,
        letterSpacing: 0,
    }}
>
    <ContentEditable bind:text={longValue} />
</Story>