Run 8 Acceptance — Byproducts Log

---

Discovered Issues

1. userEvent.click no longer accepts ctrlKey option

@testing-library/user-event v14 (bundled with Storybook 10) removed keyboard modifier options from userEvent.click(). The row-selection.stories.tsx used { ctrlKey: true } which was a TypeScript error ('ctrlKey' does not exist in type 'DirectOptions'). Fixed by switching to userEvent.keyboard('{Control>}') / userEvent.keyboard('{/Control}').

Impact: Any existing play functions using { ctrlKey: true } or { shiftKey: true } in userEvent.click() calls need similar treatment. Worth grepping across the codebase:

grep -rn "ctrlKey\|shiftKey\|altKey\|metaKey" src --include="*.stories.tsx"

2. enableMultiSort is not a factory config property

enableMultiSort was mistakenly placed inside createEntityDataGrid({ ... }) factory config in sort-and-filter.stories.tsx. It is a runtime view prop on the component instance. If this pattern recurs in dev-witness or canary-refactor stories, the same fix applies: move to the JSX render call, not the factory.

3. exactOptionalPropertyTypes breaks array index access

With exactOptionalPropertyTypes: true, TypeScript infers array element access arr[i] as T | undefined even when the modulo guarantees a valid index. The pattern ARRAY[i % ARRAY.length] requires as string (or equivalent) to satisfy the type checker. The kitchen-sink.stories.tsx and any future mock data generators using this pattern need explicit type assertions.

4. tags: ['autodocs'] + MDX file = Storybook build failure

When a stories file has tags: ['autodocs'] AND a co-located .mdx file exists with a <Meta of={...} /> reference to the same stories, Storybook 10 refuses to index the files and fails the build. The rule is: choose one or the other. MDX docs take precedence over auto-generated docs when you want custom content.

This was resolved for 10 stories files but may appear again if new atoms are added with autodocs before MDX docs are written.

5. Storybook build warnings (non-blocking)

Several non-blocking warnings appeared:

• "Default" is not exported by "button.stories.tsx" (Vite MDX import analysis warning — the export does exist at runtime, Vite static analysis can’t resolve it through the * re-import in MDX)
• Circular dependency warning in vendored/arda-frontend/components/table/index.ts — pre-existing, not introduced by this run
• Chunk size warnings — pre-existing

---

TODOs for Later Runs

Run 9 (canary-refactor adaptation)

1. Grep for ctrlKey/shiftKey in stories: Before writing canary-refactor stories, audit existing stories for the removed userEvent modifier syntax.

2. Kitchen Sink play function — AG Grid cell editing in jsdom: The dblClick + click different row pattern for triggering onRowPublish works in the Storybook interaction runner but may not work identically in jsdom unit tests. If unit tests for auto-publish lifecycle are added, use the useRowAutoPublish hook directly rather than simulating grid events.

3. VRT baselines need generation (tasks 8.11–8.12): Run:

   npx playwright test --project=vrt --update-snapshots

   After starting Storybook (npm run storybook). The following new pages need baselines:

   • Use Cases/Reference/Items/ITM-0001 Browse and Search
   • Use Cases/Reference/Items/ITM-0002 View Details
   • Use Cases/Reference/Items/ITM-0004 Edit Item
   • Use Cases/Reference/Business Affiliates/BA-0001 Browse and Search (Canary)
   • Use Cases/Reference/Business Affiliates/BA-0002 View Details (Canary)
   • Use Cases/General Behaviors/List Views/GEN-LST-0002 Column Configuration
   • Use Cases/General Behaviors/List Views/GEN-LST-0003-0004 Sort and Filter
   • Use Cases/General Behaviors/List Views/GEN-LST-0006 Row Selection
   • Components/Canary/Organisms/Shared/Entity Data Grid/Kitchen Sink

4. Playwright MCP visual comparison (task 8.12): Navigate to each composition story and the corresponding dev-witness story, screenshot both, and document layout equivalence.

---

Observations

Story quality

The composition stories are production-quality. They demonstrate correct patterns for:

• Full-page layout (Sidebar + AppHeader + grid)
• Item detail drawer lifecycle (click row → open drawer → close)
• Inline editing + auto-publish lifecycle
• Generic entity grid (supplier factory proving non-item use)
• Framework-level behaviors (column config, sort/filter, row selection)

MDX coverage assessment

The plan called for “12 atoms” having MDX. Current count: 11 atoms (badge, button, avatar, card, dialog, drawer, input-group, icon-button, icon-label, read-only-field, search-input). The plan included SelectCellEditor as an atom requiring MDX. The SelectCellEditor atom is at src/components/canary/atoms/grid/select/ and currently lacks an MDX doc. This was not added in this run as it was not listed in task 8.14’s explicit list. Consider adding it in Run 9 alongside its stories.

Storybook build time

Build time: ~28 seconds (2965 modules transformed). This is within acceptable range for the project size.