veza/apps/web/src/components/ui/DatePicker.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { DatePicker } from './date-picker';
import { useState } from 'react';

const meta: Meta = {
    title: 'UI/DatePicker',
    component: DatePicker,
    tags: ['autodocs'],
    argTypes: {
        mode: {
            control: 'radio',
            options: ['single', 'range'],
        },
        disabled: { control: 'boolean' },
        placeholder: { control: 'text' },
    },
    args: {
        mode: 'single',
        placeholder: 'Pick a date',
    }
};

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

export const SingleDate: Story = {
    render: (args) => {
        const [date, setDate] = useState<Date>();
        return (
            <DatePicker
                {...args}
                value={date}
                onChange={(newDate) => setDate(newDate as Date)}
                className="w-72"
            />
        );
    },
};

export const DateRange: Story = {
    args: {
        mode: 'range',
        placeholder: 'Select range',
    },
    render: (args) => {
        const [range, setRange] = useState<{ start: Date; end: Date }>();
        return (
            <DatePicker
                {...args}
                value={range}
                onChange={(newRange) => setRange(newRange as { start: Date; end: Date })}
                className="w-80"
            />
        );
    },
};

export const Disabled: Story = {
    args: {
        disabled: true,
    },
    render: (args) => <DatePicker {...args} onChange={() => { }} className="w-72" />,
};