storybook

Storybook catalog for the design-system primitives, including an in-house accessible-patterns (A11y/Patterns) library.

Overview

storybook is the interactive catalog for the monorepo's design-system primitives (@repo/design-system) and shared composition patterns. It doubles as the reference for the in-house A11y/Patterns library, documenting how to write accessible UI across the monorepo. It's aimed at anyone building or consuming shared UI components — check a primitive's states here before reaching for it in an app.

Stack

Storybook (@storybook/react-vite) with Vite 7
@storybook/addon-a11y (WCAG 2.2 AA tags) + @storybook/addon-themes
@chromatic-com/storybook for visual review, chromatic CLI for publishing
@storybook/test-runner + axe-playwright for headless accessibility scans
Tailwind CSS + @repo/design-system, @repo/constants, @repo/next-config
Vitest for the package's own unit tests

Develop

pnpm -F @repo/storybook storybook       # interactive, http://localhost:6006
pnpm -F @repo/storybook dev             # same, non-interactive (--ci)
pnpm -F @repo/storybook build           # static build → storybook-static/
pnpm -F @repo/storybook check-types     # tsc --noEmit

Stories render inside ThemeProvider + TooltipProvider (.storybook/preview.tsx). Use the toolbar theme switcher — addon-a11y re-runs per theme, so a story passing in light may fail in dark.

Test

pnpm -F @repo/storybook test:storybook  # headless axe-playwright run
pnpm -F @repo/storybook test            # vitest
pnpm -F @repo/storybook test:coverage   # vitest --coverage
pnpm -F @repo/storybook chromatic       # visual review publish

Build & deploy

pnpm -F @repo/storybook build produces a static build in storybook-static/. Deployed on Vercel (albertonline-org-storybook) at storybook.albertonline.org; production deploys trigger on push to main via the Vercel Git integration. A manual GitHub Pages workflow also exists (.github/workflows/storybook-deploy.yml) and is gated on test-storybook passing first.

Structure

.storybook/
  main.ts          - addons (a11y, themes, chromatic), story globs, alias map
  preview.tsx       - global decorators (theme, providers), default a11y rules
  test-runner.ts    - axe-playwright postVisit hook for headless CI runs
stories/
  a11y-patterns.stories.tsx  - reference accessible compositions
  *.stories.tsx              - per-primitive stories (Button, Input, ...)

See the apps overview and the monorepo overview.