Storybook 10: per-component stories + PR preview workflow - #5
Merged
Conversation
Same four fixes as the other in-flight branches; auto-resolves on PR #2 merge.
packages/ui:
- Storybook 10 (react-vite framework) — supports Vite 7 which the
Vitest 3 toolchain already pulls. Storybook 8 capped at Vite 6.
- .storybook/main.ts: react-vite framework; registers @tailwindcss/vite
in viteFinal so stories render with the real design tokens. Storybook 9+
folds the old addon-essentials into core, so no separate addon install.
- .storybook/preview.{tsx,css}: Tailwind v4 + tokens.css imported, three
background swatches (surface/muted/dark)
- Six stories — one per base component — exercising every variant axis:
Button (4 variants x 3 sizes + disabled), Input (invalid/disabled),
Card, Stack (row/col x gap/align/justify), Text (size scale + tones),
Icon (decorative vs labeled a11y paths + sizes)
- build-storybook verified locally: clean static build to storybook-static/
.github/workflows/storybook.yml:
- Triggers on PRs touching packages/ui/**
- pnpm install + events codegen + build-storybook
- Vercel preview deploy + PR comment, both gated on
VERCEL_STORYBOOK_PROJECT_ID existing — until that repo secret is
provisioned the job still passes on the build alone
Closes the last open Week 1-2 foundation task (deliverable 7 — Storybook
half; the @lockin/ui-consumed-by-web half shipped in PR #1).
# Conflicts: # apps/api/app/events/publisher.py # apps/mcp/tests/integration/test_smoke.py # pnpm-lock.yaml
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The last open Week 1–2 foundation task — Task 4, Storybook deploy (docs/superpowers/plans/2026-05-11-week-1-2-foundation.md). Two commits:
fix(ci)— the same four main-rooted duplicates as the other in-flight branches; auto-resolves on PR Auth foundation: NextAuth v5 + Google OAuth + WebAuthn + TimescaleDB #2 merge.feat(ui)— Storybook 10 config, six stories, and the PR preview workflow.Why Storybook 10 (not 8, as the plan said)
The plan specified Storybook 8. Storybook 8 peer-caps at Vite 6, but the Vitest 3 toolchain in
@lockin/uialready pulls Vite 7 —pnpm installfailed the peer check. Storybook 10 supports Vite 7. Storybook 9+ also folded the oldaddon-essentials(controls/actions/viewport/backgrounds/docs) into core, so the addon list is gone and type imports moved from@storybook/reactto@storybook/react-vite. Adjusted accordingly.What's in it
.storybook/main.ts@tailwindcss/viteregistered inviteFinalso stories render with the realtokens.css.storybook/preview.{tsx,css}src/components/*.stories.tsx(×6)Stories: Button (4 variants × 3 sizes + disabled), Input (invalid/disabled), Card, Stack (row/col × gap/align/justify), Text (full size scale + tones), Icon (decorative vs labeled a11y + sizes).
.github/workflows/storybook.ymlpackages/ui/**pnpm install→ events codegen →build-storybookVERCEL_STORYBOOK_PROJECT_IDexisting as a repo secret. Until that's provisioned, the job still passes on the build step alone (no hard failure).Acceptance — Week 1–2 deliverable 7
VERCEL_STORYBOOK_PROJECT_IDapps/webuses@lockin/uicomponentsKnown follow-ups not in this PR
VERCEL_STORYBOOK_PROJECT_IDrepo secret.Verification
pnpm -F @lockin/ui build-storybook— clean static build tostorybook-static/pnpm typecheckgreen (5 turbo tasks)pnpm lintgreen (3 tasks)pnpm testgreen (5 tasks; 18 ui component tests still pass — stories don't interfere)Test plan
js+events-roundtripjobs greenstorybookworkflow builds successfullypnpm -F @lockin/ui storybooklocally and eyeballs all six component stories🤖 Generated with Claude Code