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,
    }}
>
    <ComboControl control={defaultControl} />
</Story>

<Story
    name="At Minimum"
    args={{
        control: atMinimumControl,
    }}
>
    <ComboControl control={atMinimumControl} />
</Story>

<Story
    name="At Maximum"
    args={{
        control: atMaximumControl,
    }}
>
    <ComboControl control={atMaximumControl} />
</Story>

<Story
    name="With Float"
    args={{
        control: withFloatControl,
    }}
>
    <ComboControl control={withFloatControl} />
</Story>

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