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

import type { Meta, StoryObj } from '@storybook/react';
import { Select } from './select';
import { useState } from 'react';

const meta = {
    title: 'UI/Select',
    component: Select,
    tags: ['autodocs'],
    argTypes: {
        multiple: { control: 'boolean' },
        searchable: { control: 'boolean' },
        disabled: { control: 'boolean' },
    },
    args: {
        placeholder: 'Select a fruit',
        options: [
            { value: 'apple', label: 'Apple' },
            { value: 'banana', label: 'Banana' },
            { value: 'orange', label: 'Orange' },
            { value: 'grape', label: 'Grape' },
            { value: 'strawberry', label: 'Strawberry' },
        ],
    }
} satisfies Meta<typeof Select>;

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

export const Default: Story = {
    render: (args) => {
        const [value, setValue] = useState<string>('');
        return (
            <Select
                {...args}
                value={value}
                onChange={(v) => setValue(v as string)}
                className="w-[280px]"
            />
        );
    },
};

export const Grouped: Story = {
    args: {
        searchable: true,
        options: [
            { value: 'est', label: 'Eastern Standard Time (EST)', group: 'North America' },
            { value: 'cst', label: 'Central Standard Time (CST)', group: 'North America' },
            { value: 'mst', label: 'Mountain Standard Time (MST)', group: 'North America' },
            { value: 'pst', label: 'Pacific Standard Time (PST)', group: 'North America' },
            { value: 'akst', label: 'Alaska Standard Time (AKST)', group: 'North America' },
            { value: 'hst', label: 'Hawaii Standard Time (HST)', group: 'North America' },
            { value: 'gmt', label: 'Greenwich Mean Time (GMT)', group: 'Europe' },
            { value: 'cet', label: 'Central European Time (CET)', group: 'Europe' },
            { value: 'eet', label: 'Eastern European Time (EET)', group: 'Europe' },
            { value: 'west', label: 'Western European Summer Time (WEST)', group: 'Europe' },
            { value: 'cat', label: 'Central Africa Time (CAT)', group: 'Africa' },
            { value: 'eat', label: 'East Africa Time (EAT)', group: 'Africa' },
        ],
    },
    render: (args) => {
        const [value, setValue] = useState<string>('');
        return (
            <Select
                {...args}
                value={value}
                onChange={(v) => setValue(v as string)}
                className="w-[320px]"
            />
        );
    },
};

export const MultiSelect: Story = {
    args: {
        multiple: true,
        placeholder: 'Select frameworks',
        options: [
            { value: 'react', label: 'React' },
            { value: 'vue', label: 'Vue' },
            { value: 'svelte', label: 'Svelte' },
            { value: 'angular', label: 'Angular' },
            { value: 'next', label: 'Next.js' },
            { value: 'nuxt', label: 'Nuxt.js' },
        ],
    },
    render: (args) => {
        const [value, setValue] = useState<string[]>([]);
        return (
            <Select
                {...args}
                value={value}
                onChange={(v) => setValue(v as string[])}
                className="w-[320px]"
            />
        );
    },
};