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

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

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

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

export const Default: Story = {
    render: (args) => {
        const [{ value }, updateArgs] = useArgs();
        return <ViewToggle {...args} value={value} onChange={(newValue) => updateArgs({ value: newValue })} />;
    },
    args: {
        value: 'list' as const,
        showLabels: true,
        onChange: () => { },
    }
};

export const IconOnly: Story = {
    render: (args) => {
        const [{ value }, updateArgs] = useArgs();
        return <ViewToggle {...args} value={value} onChange={(newValue) => updateArgs({ value: newValue })} />;
    },
    args: {
        value: 'grid' as const,
        showLabels: false,
        onChange: () => { },
    }
};

/** Both states to validate tokens and hover/active. */
export const VisualStressTest: Story = {
    render: (args) => {
        const [{ value }, updateArgs] = useArgs();
        return <ViewToggle {...args} value={value} onChange={(newValue) => updateArgs({ value: newValue })} />;
    },
    args: {
        value: 'list' as const,
        showLabels: true,
        onChange: () => { },
    }
};