[DS-5] Set up Storybook for the design system #3

Merged

chris merged 8 commits from feature/DS-5 into main

2026-09-02 07:31:38 -06:00

chris commented

2026-09-01 23:20:29 -06:00

Owner

Ticket

DS-5 Set up Storybook for the design system

Summary

Adds Storybook via @storybook/react-vite + react-native-web — not @storybook/react-native,
since there's no RN/Expo scaffold (no Metro, no simulator/device) in this repo's headless dev
container. This renders through the same web path any web consumer of this package already
takes.
Implements DS-7's documented draft default theme tokens (src/tokens.ts) and derives the
Tailwind preset's theme.extend from them, so the theme switcher has real values to switch.
DS-7 itself is still open/undecided in Plane; these are adopted here as draft values to unblock
this ticket.
Adds a Storybook-only runtime theme switcher (toolbar dropdown + ThemeProvider decorator,
.storybook/) — explicitly dev-tooling only, not exported from src/index.ts. Production
theming for consumers stays compile-time-only via the Tailwind preset, per DS-3 option 1.
Adds a placeholder ExampleCard story (stories/) since no real design-system components exist
yet — demonstrates the story-wiring pattern (Meta/StoryObj, args) for future components to
copy. Its own useTheme() + inline-style approach is explicitly scaffolding only; real
components must style via NativeWind classNames from the Tailwind preset, not this context.
Un-gates the docker-compose.yml storybook service — it's no longer profile-gated and now
runs permanently (restart: unless-stopped), same as dev.
Updates README.md/CLAUDE.md documentation for running Storybook, adding a new component's story,
and adding a new theme.

## Ticket [DS-5](http://192.168.2.100:7123/home/browse/DS-5/) Set up Storybook for the design system ## Summary - Adds Storybook via `@storybook/react-vite` + `react-native-web` — not `@storybook/react-native`, since there's no RN/Expo scaffold (no Metro, no simulator/device) in this repo's headless dev container. This renders through the same web path any web consumer of this package already takes. - Implements DS-7's documented draft default theme tokens (`src/tokens.ts`) and derives the Tailwind preset's `theme.extend` from them, so the theme switcher has real values to switch. DS-7 itself is still open/undecided in Plane; these are adopted here as draft values to unblock this ticket. - Adds a Storybook-only runtime theme switcher (toolbar dropdown + `ThemeProvider` decorator, `.storybook/`) — explicitly dev-tooling only, not exported from `src/index.ts`. Production theming for consumers stays compile-time-only via the Tailwind preset, per DS-3 option 1. - Adds a placeholder `ExampleCard` story (`stories/`) since no real design-system components exist yet — demonstrates the story-wiring pattern (`Meta`/`StoryObj`, args) for future components to copy. Its own `useTheme()` + inline-style approach is explicitly scaffolding only; real components must style via NativeWind classNames from the Tailwind preset, not this context. - Un-gates the `docker-compose.yml` `storybook` service — it's no longer profile-gated and now runs permanently (`restart: unless-stopped`), same as `dev`. - Updates README.md/CLAUDE.md documentation for running Storybook, adding a new component's story, and adding a new theme.

chris added 8 commits

2026-09-01 23:20:29 -06:00

[DS-5] Add DS-7 draft default theme tokens and derive the Tailwind preset from them. af3ef9ba58

[DS-5] Add Storybook (react-vite + react-native-web) toolchain. 168c2d016b

[DS-5] Add Storybook-only theme switcher (context, registry, toolbar decorator). d2dfb98163

[DS-5] Add placeholder ExampleCard story demonstrating the story + theme pattern. d6d2bd1d53

[DS-5] Un-gate the docker-compose storybook service now that Storybook is configured. 3d01bff7cf

[DS-5] Document Storybook usage, story authoring, and the theme switcher. ceb6fec32c

[DS-5] Fix the react-native alias so Storybook's dep optimizer doesn't choke on RN's Flow syntax. b98e414e76

Found during manual Storybook verification: an exact-match ("react-native$")
alias key left Vite's dependency optimizer pre-bundling the real
react-native package (Flow syntax it can't parse) instead of resolving to
react-native-web. A plain "react-native" key, plus handling both the
array and object forms Storybook's own Vite config may already use for
resolve.alias, fixes it.

[DS-5] Address pre-PR review findings.

plane-sync / sync (pull_request) Successful in 1s

Details

03923f5d82

- docker-compose.yml: fix the storybook service comment now that it's un-gated (starts with a bare `up -d`, stays up).
- README/ExampleCard.tsx: clarify only the story-wiring shape is a reusable template — useTheme() + inline styles is Storybook-only scaffolding, not how real components should be styled.
- src/tokens.test.ts, src/tailwind-preset.test.ts: close regression-guard gaps with full-object equality on colors/fontSize and a full kebab-case key-set assertion.
- .storybook/themes.ts, preview.tsx: extract resolveTheme() and cover its fallback branches in stories/theme-resolution.test.ts (kept out of .storybook/ since bun test doesn't discover tests in hidden dirs).
- .storybook/main.ts: collapse the stories glob to stop a spurious "no story files" warning, and set core.allowedHosts so the permanently-running service isn't 403'd by hostname access.
- src/tailwind-preset.ts: drop the redundant fontWeightAsStrings helper in favor of toKebabCaseRecord, typed via Record<keyof T, string | number> to avoid an any-widening object param without requiring an index signature on the Theme* interfaces.
- package.json: declare react/react-dom as devDependencies (previously only peerDependencies) since Storybook needs them present at dev time.

chris merged commit fb7e19f1b2 into main

2026-09-02 07:31:38 -06:00

chris deleted branch feature/DS-5

2026-09-02 07:31:38 -06:00

chris referenced this pull request from a commit

2026-09-02 07:31:39 -06:00

[DS-5] Set up Storybook for the design system (#3)