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:
                    'Provides multiple ways to change a numeric value via decrease/increase buttons, slider, and direct input. All three methods are synchronized, giving users flexibility based on precision needs.',
            },
            story: { inline: false }, // Render stories in iframe for state isolation
        },
    },
    argTypes: {
        control: {
            control: 'object',
            description: 'TypographyControl instance managing the value and bounds',
        },
        decreaseLabel: {
            control: 'text',
            description: 'Accessibility label for the decrease button',
        },
        increaseLabel: {
            control: 'text',
            description: 'Accessibility label for the increase button',
        },
        controlLabel: {
            control: 'text',
            description: 'Accessibility label for the control button (opens popover)',
        },
    },
});
</script>

<script lang="ts">
const defaultControl = createTypographyControl({ value: 77, min: 0, max: 100, step: 1 });
const atMinimumControl = createTypographyControl({ value: 0, min: 0, max: 100, step: 1 });
const atMaximumControl = createTypographyControl({ value: 100, min: 0, max: 100, step: 1 });
const withFloatControl = createTypographyControl({ value: 77.5, min: 0, max: 100, step: 0.1 });
const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 100, step: 1 });
</script>

<Story
    name="Default"
    args={{
        control: defaultControl,
    }}
>
    {#snippet template(args)}
        <ComboControl control={defaultControl} {...args} />
    {/snippet}
</Story>

<Story
    name="At Minimum"
    args={{
        control: atMinimumControl,
    }}
>
    {#snippet template(args)}
        <ComboControl control={atMinimumControl} {...args} />
    {/snippet}
</Story>

<Story
    name="At Maximum"
    args={{
        control: atMaximumControl,
    }}
>
    {#snippet template(args)}
        <ComboControl control={atMaximumControl} {...args} />
    {/snippet}
</Story>

<Story
    name="With Float"
    args={{
        control: withFloatControl,
    }}
>
    {#snippet template(args)}
        <ComboControl control={withFloatControl} {...args} />
    {/snippet}
</Story>

<Story
    name="Custom Labels"
    args={{
        control: customLabelsControl,
        decreaseLabel: 'Decrease font size',
        increaseLabel: 'Increase font size',
        controlLabel: 'Open font size controls',
    }}
>
    {#snippet template(args)}
        <ComboControl
            control={customLabelsControl}
            decreaseLabel="Decrease font size"
            increaseLabel="Increase font size"
            controlLabel="Open font size controls"
            {...args}
        />
    {/snippet}
</Story>