Signal-Desktop/ts/axo/AxoSelect.stories.tsx

// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useState } from 'react';
import type { Meta } from '@storybook/react';
import { AxoSelect } from './AxoSelect';

export default {
  title: 'Axo/AxoSelect',
} satisfies Meta;

function Template(props: {
  disabled?: boolean;
  triggerWidth?: AxoSelect.TriggerWidth;
  triggerVariant: AxoSelect.TriggerVariant;
}) {
  const [value, setValue] = useState<string | null>(null);
  return (
    <AxoSelect.Root
      value={value}
      onValueChange={setValue}
      disabled={props.disabled}
    >
      <AxoSelect.Trigger
        variant={props.triggerVariant}
        width={props.triggerWidth}
        placeholder="Select an item..."
      />
      <AxoSelect.Content>
        <AxoSelect.Group>
          <AxoSelect.Label>Fruits</AxoSelect.Label>
          <AxoSelect.Item value="apple">Apple</AxoSelect.Item>
          <AxoSelect.Item value="banana">Banana</AxoSelect.Item>
          <AxoSelect.Item value="blueberry">Blueberry</AxoSelect.Item>
          <AxoSelect.Item value="grapes">Grapes</AxoSelect.Item>
          <AxoSelect.Item value="pineapple">Pineapple</AxoSelect.Item>
        </AxoSelect.Group>
        <AxoSelect.Separator />
        <AxoSelect.Group>
          <AxoSelect.Label>Vegetables</AxoSelect.Label>
          <AxoSelect.Item value="aubergine">Aubergine</AxoSelect.Item>
          <AxoSelect.Item value="broccoli">Broccoli</AxoSelect.Item>
          <AxoSelect.Item value="carrot" disabled>
            Carrot
          </AxoSelect.Item>
          <AxoSelect.Item value="leek">Leek</AxoSelect.Item>
        </AxoSelect.Group>
        <AxoSelect.Separator />
        <AxoSelect.Group>
          <AxoSelect.Label>Meat</AxoSelect.Label>
          <AxoSelect.Item value="beef">Beef</AxoSelect.Item>
          <AxoSelect.Item value="chicken">Chicken</AxoSelect.Item>
          <AxoSelect.Item value="lamb">Lamb</AxoSelect.Item>
          <AxoSelect.Item value="pork">Pork</AxoSelect.Item>
        </AxoSelect.Group>
      </AxoSelect.Content>
    </AxoSelect.Root>
  );
}

export function Basic(): JSX.Element {
  return (
    <div className="flex h-96 w-full flex-col items-center justify-center gap-2">
      <div className="flex gap-2">
        <Template triggerVariant="default" />
        <Template triggerVariant="default" disabled />
      </div>
      <div className="flex gap-2">
        <Template triggerVariant="floating" />
        <Template triggerVariant="floating" disabled />
      </div>
      <div className="flex gap-2">
        <Template triggerVariant="borderless" />
        <Template triggerVariant="borderless" disabled />
      </div>

      <div className="flex gap-2">
        <Template triggerWidth="fixed" triggerVariant="default" />
        <Template triggerWidth="fixed" triggerVariant="default" disabled />
      </div>
      <div className="flex gap-2">
        <Template triggerWidth="fixed" triggerVariant="floating" />
        <Template triggerWidth="fixed" triggerVariant="floating" disabled />
      </div>
      <div className="flex gap-2">
        <Template triggerWidth="fixed" triggerVariant="borderless" />
        <Template triggerWidth="fixed" triggerVariant="borderless" disabled />
      </div>
    </div>
  );
}