feat(web): ui/select Base UI Select wrapper matching Input + story (#51)

2026-06-08 05:54:46 +02:00
parent e54ea89b1e
commit 09e9b3f4d4
2 changed files with 170 additions and 0 deletions
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { expect, within } from 'storybook/test'
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select'
+
+function Controlled() {
+  const [value, setValue] = useState('')
+  return (
+    <Select value={value} onValueChange={(next) => setValue(next ?? '')}>
+      <SelectTrigger aria-label="Fruit">
+        <SelectValue placeholder="Pick one" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="pear">Pear</SelectItem>
+        <SelectItem value="plum">Plum</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
+
+const meta = {
+  component: Select,
+  tags: ['ai-generated'],
+  render: () => <Controlled />,
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole('combobox', { name: 'Fruit' }))
+    await userEvent.click(await within(document.body).findByRole('option', { name: 'Pear' }))
+    await expect(canvas.getByRole('combobox', { name: 'Fruit' })).toHaveTextContent('Pear')
+  },
+}