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

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