actual/packages/component-library/src/Select.stories.tsx

import { useState } from 'react';

import type { Meta, StoryObj } from '@storybook/react-vite';

import { Menu } from './Menu';
import { Select } from './Select';
import { View } from './View';

const meta = {
  title: 'Components/Select',
  component: Select,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: ' ', // Remove autogenerated description (generated from JSDoc) to replace with custom description below
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Select>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    options: [
      ['apple', 'Apple'],
      ['banana', 'Banana'],
      ['cherry', 'Cherry'],
    ],
    value: 'apple',
  },
  parameters: {
    docs: {
      description: {
        story: 'A basic select dropdown with simple options.',
      },
    },
  },
};

export const WithDefaultLabel: Story = {
  args: {
    options: [
      ['small', 'Small'],
      ['medium', 'Medium'],
      ['large', 'Large'],
    ],
    value: '',
    defaultLabel: 'Select a size...',
  },
  parameters: {
    docs: {
      description: {
        story:
          'When the selected value is not in the options, the defaultLabel is displayed.',
      },
    },
  },
};

export const WithSeparator: Story = {
  args: {
    options: [
      ['recent-1', 'Budget 2024'],
      ['recent-2', 'Budget 2025'],
      Menu.line,
      ['all', 'View All'],
    ],
    value: 'recent-1',
  },
  parameters: {
    docs: {
      description: {
        story: 'Select options can include separators using Menu.line.',
      },
    },
  },
};

export const WithDisabledKeys: Story = {
  args: {
    options: [
      ['draft', 'Draft'],
      ['pending', 'Pending'],
      ['approved', 'Approved'],
      ['archived', 'Archived'],
    ],
    value: 'draft',
    disabledKeys: ['approved', 'archived'],
  },
  parameters: {
    docs: {
      description: {
        story: 'Certain options can be disabled using the disabledKeys prop.',
      },
    },
  },
};

export const BareVariant: Story = {
  args: {
    bare: true,
    options: [
      ['day', 'Day'],
      ['week', 'Week'],
      ['month', 'Month'],
    ],
    value: 'month',
  },
  parameters: {
    docs: {
      description: {
        story:
          'The bare variant renders the select without a bordered button style.',
      },
    },
  },
};

export const Disabled: Story = {
  args: {
    options: [
      ['opt1', 'Option 1'],
      ['opt2', 'Option 2'],
    ],
    value: 'opt1',
    disabled: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'A disabled select that cannot be interacted with.',
      },
    },
  },
};

export const Controlled: Story = {
  args: {
    options: [
      ['usd', 'USD - US Dollar'],
      ['eur', 'EUR - Euro'],
      ['gbp', 'GBP - British Pound'],
      ['jpy', 'JPY - Japanese Yen'],
    ],
    value: 'usd',
  },
  render: function Render() {
    const [value, setValue] = useState('usd');

    return (
      <View style={{ gap: 10, alignItems: 'flex-start' }}>
        <Select
          options={[
            ['usd', 'USD - US Dollar'],
            ['eur', 'EUR - Euro'],
            ['gbp', 'GBP - British Pound'],
            ['jpy', 'JPY - Japanese Yen'],
          ]}
          value={value}
          onChange={setValue}
        />
        <span>Selected: {value}</span>
      </View>
    );
  },
  parameters: {
    docs: {
      description: {
        story: 'A controlled select with external state management.',
      },
    },
  },
};