Skip to content
Casaconomy Book

Storybook coverage extended to page-level and feature components

Storybook coverage extended to page-level and feature components

Status: Delivered
CAS: CAS-2741
Delivered: 2026-05-14
PRs: #728

What’s new

Storybook now covers the seven components that generated the most regent-filed UI bugs, including all major page-level surfaces and the feature components that compose them. Before this, Storybook only covered the src/components/ui/* design-system layer — primitives like buttons and inputs. Page composition and feature components were invisible to visual regression tooling, so bugs at that layer reached the regent on TestFlight before anyone else saw them. With these stories in place, Loki (visual diff) and the Storybook test-runner can catch regressions at the page level on every PR.

How to use it

The stories are co-located with each component source file. To view them:

  1. npm run storybook — opens the Storybook dev server
  2. Navigate to any of the seven components in the sidebar

Each component now has at minimum five story variants:

  • Default — happy path with representative data
  • Empty — first-use / no-data state
  • Error — API failure or validation error state
  • iPhone14Pro — notched viewport with correct safe-area insets (375×812)
  • DarkMode — dark colour scheme

For Loki (visual regression): Baselines are generated on first run. Subsequent PRs that change any of these components will show a Loki diff in CI. A changed story that matches the PR intent is expected; an unexpected change is a regression.

What changed under the hood

Seven .stories.tsx files added, one per component:

  • src/components/navbar/MobileNavbar.stories.tsx — covers dead-band state (CAS-2658)
  • src/pages/OnboardingPage.stories.tsx — covers stacked FAB (CAS-2634), step-list leftover (CAS-2678), overwhelming flow (CAS-2635)
  • src/components/ReportSheet.stories.tsx — covers low-contrast and image-attach states (CAS-2636, CAS-2675)
  • src/components/report/ChatMessage.stories.tsx — covers error contrast (CAS-2636)
  • src/pages/LicenseSettingsPage.stories.tsx — covers error UX and persistence states (CAS-2681, CAS-2726)
  • src/components/sync/PairingModal.stories.tsx — covers QR code and drop-phrase views (CAS-2638)
  • src/components/FloatingReportButton.stories.tsx — covers stacked FAB scenario (CAS-2634)

Page-level stories use decorators to mock required providers (router, store, API) at the story level — no component source changes were required.

Why we built it

The regent spent two days filing UI bugs against iOS TestFlight builds during the mobile polish arc. Every bug lived at the page-composition layer, not the design-system layer — exactly the layer that had no Storybook coverage. The bug variants added to each story (named by CAS number) mean the specific failure mode that cost two days of dogfooding is now a regression test. Any future PR that re-introduces one of these bugs will produce a Loki diff before the build reaches TestFlight.

Known limitations / follow-on work

  • Stories exist; Loki baseline generation runs on first CI pass with the Loki runner present.
  • The PairingModal QR story is a placeholder (static image); live QR generation is not mocked.
  • New page-level components added in future epics need stories filed alongside them — the existing stories are not a substitute for keeping coverage current.