diff --git a/web/src/components/ui/combobox.stories.tsx b/web/src/components/ui/combobox.stories.tsx new file mode 100644 index 0000000..b90a6c4 --- /dev/null +++ b/web/src/components/ui/combobox.stories.tsx @@ -0,0 +1,63 @@ +import type { Meta, StoryObj } from '@storybook/react-vite' +import { useState } from 'react' +import { expect } from 'storybook/test' + +import { + ComboboxRoot, + ComboboxInputGroup, + ComboboxInput, + ComboboxClear, + ComboboxTrigger, + ComboboxPopup, + ComboboxList, + ComboboxItem, + ComboboxItemIndicator, + ComboboxEmpty, +} from './combobox' + +const fruits = ['Apple', 'Apricot', 'Banana', 'Cherry'] + +function ComboboxDemo() { + const [value, setValue] = useState(null) + + return ( + + items={fruits} + value={value} + onValueChange={setValue} + itemToStringLabel={(item) => item ?? ''} + isItemEqualToValue={(a, b) => a === b} + > + + + + + + + No matches + + {(item: string) => ( + + + {item} + + )} + + + + ) +} + +const meta = { + component: ComboboxDemo, + tags: ['ai-generated'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + play: async ({ canvas }) => { + await expect(canvas.getByPlaceholderText('Pick a fruit')).toBeInTheDocument() + }, +}