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')
+  },
+}

web/src/objects/visibility-badge.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { VisibilityBadge } from './visibility-badge'
+
+const meta = {
+  component: VisibilityBadge,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof VisibilityBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Public: Story = {
+  args: { visibility: 'public' },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('Public')).toBeVisible()
+  },
+}
+
+export const Internal: Story = {
+  args: { visibility: 'internal' },
+}
+
+export const Draft: Story = {
+  args: { visibility: 'draft' },
+}
+
+// The single project-wide CssCheck. VisibilityBadge applies `bg-green-100` for
+// the `public` visibility (see STYLES in visibility-badge.tsx). A concrete
+// resolved background colour proves the shared preview actually loaded the app's
+// Tailwind stylesheet — an unstyled badge would report a transparent background.
+export const CssCheck: Story = {
+  args: { visibility: 'public' },
+  play: async ({ canvas }) => {
+    const badge = canvas.getByText('Public')
+    await expect(getComputedStyle(badge).backgroundColor).toBe(
+      'oklch(0.962 0.044 156.743)',
+    )
+  },
+}

web/src/search/highlight.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { Highlight } from './highlight'
+
+const PRE = '\x02'
+const POST = '\x03'
+
+const meta = {
+  component: Highlight,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof Highlight>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const PlainText: Story = {
+  args: { text: 'cast bronze with green patina' },
+}
+
+export const Marked: Story = {
+  args: { text: `cast ${PRE}bronze${POST} with green patina` },
+  play: async ({ canvas }) => {
+    const mark = canvas.getByText('bronze')
+    await expect(mark.tagName).toBe('MARK')
+  },
+}
+
+export const MultipleMarks: Story = {
+  args: { text: `${PRE}cast${POST} bronze with ${PRE}green${POST} patina` },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('cast').tagName).toBe('MARK')
+    await expect(canvas.getByText('green').tagName).toBe('MARK')
+  },
+}

web/src/search/search-result-row.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import type { components } from '../api/schema'
+import { SearchResultRow } from './search-result-row'
+
+type SearchHitView = components['schemas']['SearchHitView']
+
+const hit: SearchHitView = {
+  id: '11111111-1111-1111-1111-111111111111',
+  object_number: '2019.4.12',
+  object_name: 'Bronze figurine',
+  brief_description: 'A small cast figure.',
+  visibility: 'public',
+  snippet: 'cast \x02bronze\x03 with green patina',
+}
+
+const meta = {
+  component: SearchResultRow,
+  render: (args) => (
+    <ul>
+      <SearchResultRow {...args} />
+    </ul>
+  ),
+  tags: ['ai-generated'],
+} satisfies Meta<typeof SearchResultRow>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { hit },
+  play: async ({ canvas }) => {
+    const link = canvas.getByRole('link', { name: /bronze figurine/i })
+    await expect(link).toHaveAttribute('href', `/search/${hit.id}`)
+    // The snippet's marked term renders through Highlight.
+    await expect(canvas.getByText('bronze').tagName).toBe('MARK')
+  },
+}
+
+export const NoSnippet: Story = {
+  args: { hit: { ...hit, snippet: null } },
+}
+
+export const Internal: Story = {
+  args: { hit: { ...hit, visibility: 'internal' } },
+}