feat(web): set up Storybook (preview + MSW + stories for real components)

web/src/components/label-editor.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { expect } from 'storybook/test'
+
+import type { components } from '../api/schema'
+import { LabelEditor } from './label-editor'
+
+type LabelInput = components['schemas']['LabelInput']
+
+// LabelEditor is controlled — drive it from local state so typing is reflected.
+function ControlledLabelEditor({ value: initial }: { value: LabelInput[] }) {
+  const [value, setValue] = useState<LabelInput[]>(initial)
+
+  return <LabelEditor value={value} onChange={setValue} />
+}
+
+const meta = {
+  component: LabelEditor,
+  render: (args) => <ControlledLabelEditor value={args.value} />,
+  args: { value: [], onChange: () => {} },
+  tags: ['ai-generated'],
+} satisfies Meta<typeof LabelEditor>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Empty: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByLabelText('Label')).toHaveValue('')
+  },
+}
+
+export const Prefilled: Story = {
+  args: { value: [{ lang: 'en', label: 'Bronze' }] },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByLabelText('Label')).toHaveValue('Bronze')
+  },
+}
+
+export const Editing: Story = {
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByLabelText('Label')
+    await userEvent.type(input, 'Ceramic')
+    await expect(input).toHaveValue('Ceramic')
+  },
+}

web/src/components/ui/badge.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { Badge } from './badge'
+
+const meta = {
+  component: Badge,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof Badge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { children: 'Public' },
+  play: async ({ canvas }) => {
+    const badge = canvas.getByText('Public')
+    await expect(badge).toHaveAttribute('data-slot', 'badge')
+  },
+}
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', children: 'Internal' },
+}
+
+export const Destructive: Story = {
+  args: { variant: 'destructive', children: 'Error' },
+}
+
+export const Outline: Story = {
+  args: { variant: 'outline', children: 'Draft' },
+}

web/src/components/ui/button.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { Button } from './button'
+
+const meta = {
+  component: Button,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { children: 'Save' },
+  play: async ({ canvas }) => {
+    const button = canvas.getByRole('button', { name: /save/i })
+    await expect(button).toHaveAttribute('data-slot', 'button')
+  },
+}
+
+export const Outline: Story = {
+  args: { variant: 'outline', children: 'Cancel' },
+}
+
+export const Destructive: Story = {
+  args: { variant: 'destructive', children: 'Delete' },
+}
+
+export const Disabled: Story = {
+  args: { children: 'Save', disabled: true },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole('button', { name: /save/i })).toBeDisabled()
+  },
+}

web/src/components/ui/checkbox.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { Checkbox } from './checkbox'
+
+const meta = {
+  component: Checkbox,
+  args: { 'aria-label': 'required' },
+  tags: ['ai-generated'],
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Unchecked: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole('checkbox')).toHaveAttribute('aria-checked', 'false')
+  },
+}
+
+export const Checked: Story = {
+  args: { defaultChecked: true },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole('checkbox')).toHaveAttribute('aria-checked', 'true')
+  },
+}
+
+export const Toggle: Story = {
+  play: async ({ canvas, userEvent }) => {
+    const checkbox = canvas.getByRole('checkbox')
+    await expect(checkbox).toHaveAttribute('aria-checked', 'false')
+    await userEvent.click(checkbox)
+    await expect(checkbox).toHaveAttribute('aria-checked', 'true')
+  },
+}

web/src/components/ui/input.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { Input } from './input'
+
+const meta = {
+  component: Input,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { placeholder: 'Object name', 'aria-label': 'name' },
+}
+
+export const Disabled: Story = {
+  args: { 'aria-label': 'name', disabled: true, defaultValue: 'Amphora' },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByLabelText('name')).toBeDisabled()
+  },
+}
+
+export const Typing: Story = {
+  args: { 'aria-label': 'name' },
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByLabelText('name')
+    await userEvent.type(input, 'Bronze fibula')
+    await expect(input).toHaveValue('Bronze fibula')
+  },
+}