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

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

const { Story } = defineMeta({
    title: 'Shared/ComboControl',
    component: ComboControl,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'ComboControl with input field and slider. Simplified version without increase/decrease buttons.',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
    argTypes: {
        label: {
            control: 'text',
            description: 'Label for the ComboControl',
        },
        control: {
            control: 'object',
            description: 'TypographyControl instance managing the value and bounds',
        },
    },
});
</script>

<script lang="ts">
import type { ComponentProps } from 'svelte';
const horizontalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
</script>

<Story
    name="Horizontal"
    args={{
        control: horizontalControl,
        label: 'Size',
    }}
>
    {#snippet template(args: ComponentProps<typeof ComboControl>)}
        <ComboControl {...args} />
    {/snippet}
</Story>