feat(ui): Storybook 10 + Button/Input primitives (U0.5b)#413
Conversation
Completes U0.5: the shared design system now has a Storybook and the remaining foundational primitives. - Button primitive: the mockup's header-action button (default + primary variants, focus-visible ring, disabled state); Input: the field style with visible focus ring. Both forward rest attributes like Badge/Kbd. - Storybook 10 (@storybook/react-vite) in libs/ui: main.ts + preview with the design tokens and a light/dark toolbar driving the same <html data-theme> mechanism as ThemeProvider. 16 stories across Badge/Button/Input/Kbd and KanbanBoard/BoardView/BoardSkeleton/ TaskDetail (board fixture extracted to __fixtures__/sample-tasks so CSF doesn't treat it as a story). - scripts: npm run storybook / build-storybook in libs/ui. Lockfile safety (the known hoisted-lockfile CI risk): regenerated from develop's baseline; typescript/@types/react placements byte-identical to develop, zero new nesting under apps/* — the Storybook tree is hoisted-only. Validated against a CI-exact environment (clean npm ci --ignore-scripts + the apps/frontend node_modules symlink): frontend typecheck PASS, libs/ui typecheck PASS, storybook build PASS. Full local vitest has a pre-existing tmp-dir race (pristine develop fails 10 random tests locally; flagged separately) — CI is the gate. Verified live: Storybook UI renders all stories, theme toolbar switches data-theme (dark card bg = dark token), BoardView story interactive. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Oleg Miagkov <mrobenner@gmail.com>
|
Warning Review limit reached
Next review available in: 20 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (18)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
1 participant
What
Completes U0.5: the shared design system gets a Storybook and the remaining foundational primitives.
default+primaryvariants,:focus-visiblering, disabled state). Input — the field style with a visible focus ring. Both forward rest attributes like Badge/Kbd (feat(ui): extract shared Badge + Kbd primitives (U0.5) #411 review convention).@storybook/react-vite) inlibs/ui: preview imports the design tokens and adds a light/dark toolbar driving the same<html data-theme>mechanism asThemeProvider. 16 stories across Badge / Button / Input / Kbd and KanbanBoard / BoardView / BoardSkeleton / TaskDetail (the board fixture lives in__fixtures__/sample-tasks.tsso CSF doesn't treat it as a story).npm run storybook/build-storybookinlibs/ui. No CI job added in this PR — deliberately keeping the change dep-only while its lockfile impact is watched.Lockfile safety (the known hoisted-lockfile CI risk)
Regenerated from develop's baseline. Verified against develop's lockfile: typescript/@types/react placements byte-identical, zero new nesting under
apps/*— the Storybook tree is hoisted-only additions. Locally validated against a CI-exact environment (cleannpm ci --ignore-scripts+ theapps/frontend/node_modules → rootsymlink the CI action creates): frontendtypecheckPASS,libs/uitypecheck PASS,storybook buildPASS.Note: the full local vitest run has a pre-existing tmp-dir race (pristine develop fails ~10 random tests locally; each passes in isolation) — flagged as a separate task; CI is the gate here.
Verified live
Storybook UI renders all 16 stories; the theme toolbar switches
data-theme(dark card background = dark token); BoardView story is interactive (search/filter work inside the story).🤖 Generated with Claude Code