Run 8 Acceptance — Implementation Summary

Date: 2026-03-20 Branch: jmpicnic/component-consolidation Status: Complete (pending VRT baselines, tasks 8.11–8.12 not executed in this session)

---

What Was Done

Stream 1: Composition Stories

All nine story files for tasks 8.1–8.9 were already authored as part of prior run work and existed as untracked files on the branch. This run performed verification, lint/tsc fixes, and validated the step DSL compliance.

Stories verified and fixed:

Task	File	Status
8.1	src/use-cases/reference/items/browse-and-search/view-items-list.stories.tsx	Fixed Prettier formatting
8.2	src/use-cases/reference/items/view-details/item-details-panel.stories.tsx	Fixed Prettier formatting
8.3	src/use-cases/reference/items/edit-item/edit-inline.stories.tsx	Fixed Prettier formatting
8.4	src/use-cases/reference/business-affiliates/browse-and-search/view-suppliers-list-canary.stories.tsx	Clean
8.5	src/use-cases/reference/business-affiliates/view-details/supplier-details-canary.stories.tsx	Clean
8.6	src/use-cases/general-behaviors/list-views/column-configuration.stories.tsx	Fixed Prettier + eqeqeq
8.7	src/use-cases/general-behaviors/list-views/sort-and-filter.stories.tsx	Fixed Prettier + eqeqeq + moved enableMultiSort from factory to render
8.8	src/use-cases/general-behaviors/list-views/row-selection.stories.tsx	Fixed ctrlKey → keyboard('{Control>}')
8.9	src/components/canary/organisms/shared/entity-data-grid/kitchen-sink.stories.tsx	Fixed Prettier + eqeqeq + array index typing

Step DSL compliance (8.10):

• All 9 story files use play: async ({ canvasElement, step }) => { ... } signature.
• Total: 64 await step(...) calls across all new stories.
• storyStepDelay() used between major interaction steps in all play functions.

Kitchen Sink (8.9): Already existed with full play function covering all capabilities.

• The KitchenSinkEntity[] array generation was fixed for exactOptionalPropertyTypes: true (array index access returns string | undefined; fixed with as string casts and explicit base object construction instead of spread).

Stream 2: MDX Documentation

New MDX files created:

Task	File	Notes
8.13	src/components/canary/primitives/primitives.mdx	Already existed
8.14	src/components/canary/atoms/search-input/search-input.mdx	Created
8.15	src/components/canary/molecules/action-toolbar/action-toolbar.mdx	Created
8.15	src/components/canary/molecules/field-list/field-list.mdx	Created
8.15	src/components/canary/molecules/overflow-toolbar/overflow-toolbar.mdx	Created
8.15	src/components/canary/molecules/sidebar/sidebar-molecules.mdx	Created (combined 5 sub-components)
8.16	src/components/canary/organisms/item-details/item-details.mdx	Created
8.17	src/docs/components/guidelines.mdx	Updated @/components/ui/button → @/components/canary/primitives/button

Atoms already documented (pre-existing): badge, button, avatar, card, dialog, drawer, input-group, icon-button, icon-label, read-only-field.

Atoms organisms already documented (pre-existing): app-header, sidebar, item-grid.

Storybook autodocs conflicts resolved

When Storybook build was first run, it failed with “component docs page conflict” errors for 6 atoms that had both tags: ['autodocs'] in stories AND an MDX docs file. The tags: ['autodocs'] line was removed from:

• badge.stories.tsx
• button.stories.tsx
• drawer.stories.tsx
• icon-button.stories.tsx
• icon-label.stories.tsx
• read-only-field.stories.tsx
• search-input.stories.tsx (new — prevented conflict before it occurred)
• action-toolbar.stories.tsx (new — prevented conflict)
• field-list.stories.tsx (new — prevented conflict)
• overflow-toolbar.stories.tsx (new — prevented conflict)

---

Key Decisions Made

1. ctrlKey in userEvent: userEvent.click(el, { ctrlKey: true }) was removed in userEvent v14 (which Storybook 10 bundles). Replaced with the keyboard API: await userEvent.keyboard('{Control>}'); await userEvent.click(el); await userEvent.keyboard('{/Control}');

2. enableMultiSort placement: The property is a EntityDataGridViewProps runtime prop, not a EntityDataGridConfig factory config prop. Moved from createEntityDataGrid() call to the render: () call in SortByColumn story.

3. exactOptionalPropertyTypes: Array index access (ARRAY[i]) returns T | undefined when exactOptionalPropertyTypes: true is enabled. Fixed by extracting values to typed constants with as string casts before building the data object.

4. MDX autodocs conflict: When an MDX file uses <Meta of={Stories} />, Storybook expects the stories file NOT to have tags: ['autodocs']. The autodocs tag auto-generates a docs page from the component metadata; having both creates a collision.

5. sidebar-molecules.mdx uses standalone <Meta title=...>: Since there is no single stories file for all sidebar molecules, the MDX uses a freestanding <Meta title="..." /> without a of={...} binding. This is valid Storybook MDX syntax.

---

Tasks NOT Completed (deferred)

Task	Reason
8.11 VRT baselines	Requires running npx playwright test --project=vrt with a running Storybook server. Deferred to separate run.
8.12 Playwright MCP comparison	Requires live Storybook server. Deferred to separate run.

---

Exit Gate Results

Gate	Result
X1 npm run lint	PASS
X2 npx tsc --noEmit	PASS
X3 npm run test (1047 tests)	PASS
X4 npm run build-storybook	PASS
X5 npm run test:storybook	Not run (requires running server)
X6 VRT baselines	Deferred (8.11)
X7 MDX coverage	PASS — 1 primitives + 11 atoms + 4 molecules + 1 sidebar overview + 2 organisms existing + 1 new
X8 No stale MDX import paths	PASS
X9 Playwright comparison	Deferred (8.12)
X10 Commits on branch	Not yet committed (per instructions: do NOT commit)