veza/apps/web/src/features/tracks/components/TrackGridDensitySelector.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { TrackGridDensitySelector } from './TrackGridDensitySelector';
import { useArgs } from '@storybook/preview-api';

const meta: Meta<typeof TrackGridDensitySelector> = {
    title: 'Components/Features/Tracks/TrackGridDensitySelector',
    component: TrackGridDensitySelector,
    parameters: { layout: 'centered' },
    tags: ['autodocs'],
    decorators: [
        (Story) => (
            <div className="p-4 bg-background border border-border rounded-xl min-h-layout-story">
                <Story />
            </div>
        ),
    ],
    argTypes: {
        onChange: { action: 'onChange' },
    },
};

export default meta;
type Story = StoryObj<typeof TrackGridDensitySelector>;

export const Default: Story = {
    args: {
        value: 'normal',
    },
};

export const Compact: Story = {
    args: {
        value: 'compact',
    },
};

export const Comfortable: Story = {
    args: {
        value: 'comfortable',
    },
};

export const Interactive: Story = {
    render: function InteractiveStory(args) {
        const [{ value }, updateArgs] = useArgs();
        return (
            <TrackGridDensitySelector
                {...args}
                value={value}
                onChange={(v) => updateArgs({ value: v })}
            />
        );
    },
    args: {
        value: 'normal',
    },
};

/** All states for token and transition check. */
export const VisualStressTest: Story = {
    render: function VisualStressTestStory(args) {
        const [{ value }, updateArgs] = useArgs();
        return (
            <TrackGridDensitySelector
                {...args}
                value={value}
                onChange={(v) => updateArgs({ value: v })}
            />
        );
    },
    args: {
        value: 'comfortable',
    },
};