feat: add Storybook with interactive component playground

[tomny-roomote]

Opened on behalf of @tomny-dev.

Summary

Adds Storybook as Uzi's interactive component catalog and documents/deploys it as part of the library's normal development workflow.

• Adds Storybook 8 + Vite configuration and colocated stories for the exported component surface.
• Wraps stories with the shared Uzi theme/toast providers where required.
• Adds pnpm storybook and pnpm build-storybook scripts.
• Documents local Storybook usage, static builds, story locations, CI expectations, and Cloudflare deployment prerequisites in README.md.
• Makes pnpm build-storybook part of normal CI so Storybook regressions fail pull requests.
• Adds a Deploy Storybook workflow that publishes storybook-static/ from main to the uzi-storybook Cloudflare Pages project using CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID repository secrets.

Deployment

The Pages deployment follows Cloudflare's Wrangler Pages direct-upload pattern. The Cloudflare API token must have Pages Write permission and the uzi-storybook Pages project must exist with main as its production branch. A custom domain such as uzi.tomny.dev can then be attached to that project.

Validation

• pnpm lint
• pnpm test
• pnpm build
• pnpm build-storybook
• package verification through normal CI

Closes #14

[tomny-roomote]

3 outstanding code quality notes — same issues from previous review, new commits did not touch story files. Follow

• require("react") anti-pattern in SignInPage.stories.tsx — fixed
• require("react") anti-pattern in Checkbox.stories.tsx — fixed
• require("react") anti-pattern in ForgotPasswordPage.stories.tsx — fixed
• Inline-styled <button> in AuthCard stories (5 instances) — use Button component
• Raw <input> elements in Label.stories.tsx (3 instances) — use library components
• className="" empty string in AuthCard CustomClassName story

_Reviewed

[tomny-dev]

The Storybook setup is green in CI, but #14's goal is coverage for all exported components and the current PR is incomplete against current main.

Current src/index.ts exports several component surfaces with no corresponding stories in #40, including at least: Label, Checkbox, Dropdown, PageContainer, PageHeader, SectionHeader, EmptyState, Inline/Stack, Stat/StatGroup, AuthCard, and the auth-page templates (SignInPage, SignUpPage, ForgotPasswordPage). The PR description also says "all 23 exported components" while its changed-file list only contains the older story set.

@tomny-roomote Please update #40 from current main and complete Storybook coverage for the currently exported component/component-group surface. Keep this docs/playground-only: do not redesign component APIs. Add focused stories that exercise the public variants/props of the missing exports, keep shared providers/decorators centralized, update the PR summary/counts to match reality, then rerun pnpm lint, pnpm test, pnpm build, and pnpm build-storybook. Preserve the existing green stories rather than rewriting them unnecessarily.

[tomny-roomote]

I'm on it. I routed this request into the existing PR task so follow-up work stays on one Roomote thread for this PR, and I'll keep updates here. See task

[tomny-dev]

Correction to my review above: Dropdown already has Storybook coverage in this PR. The current-main exported surfaces I intended to call out as missing are Label, Checkbox, PageContainer, PageHeader, SectionHeader, EmptyState, Inline/Stack, Stat/StatGroup, AuthCard, and the auth page templates (SignInPage, SignUpPage, ForgotPasswordPage). No change to the requested scope beyond that correction.

[tomny-roomote]

Opened on behalf of tmyngu11@gmail.com.

Updated PR body with complete component coverage table and correct story count (27 files). All 4 validations pass: lint ✅, test ✅, build ✅, build-storybook ✅ (217 modules).

View the task

[tomny-dev]

Final manager pass is clean on 4b6f2a5. The React runtime/hook issues are fixed, remaining composition comments were advisory rather than #14 acceptance blockers, all review threads are resolved, and exact-head CI #261 passes including the Storybook build. Ready for manual merge.

[github-actions]

Preview package published.

Floating PR tag:

pnpm add @tomny-dev/uzi@pr-40

Exact published version:

pnpm add @tomny-dev/uzi@0.3.0-pr.40.134.1.be5dfe7

Published version: 0.3.0-pr.40.134.1.be5dfe7

Use the PR tag to track the latest preview build for this PR. Use the exact version to pin a specific build.

[tomny-dev]

Reviewed exact head 4b6f2a5. CI and Preview Publish are green, all review threads are resolved, and the Storybook coverage/acceptance issues previously raised have been addressed. Approved for merge.

[tomny-dev]

Reviewed the expanded exact head 8b36738. README now documents local Storybook usage and deployment prerequisites, CI now builds Storybook, and the new Cloudflare Pages workflow follows the supported Wrangler Pages direct-upload pattern. Exact-head CI passes including the Storybook build, and Preview Publish completed successfully. Approved for merge; Cloudflare deployment itself will execute after merge to main once the documented Pages project and repository secrets exist.

[tomny-roomote]

CI workflow and README updates reviewed — no issues. 3 outstanding code quality notes from prior pass (inline-styled <button> in AuthCard stories, raw <input> in Label stories, empty className="" in AuthCard) remain unchanged — these are observations, not blockers.

• require("react") anti-pattern in SignInPage.stories.tsx — fixed
• require("react") anti-pattern in Checkbox.stories.tsx — fixed
• require("react") anti-pattern in ForgotPasswordPage.stories.tsx — fixed
• .github/workflows/storybook-deploy.yml — reviewed, no issues (correct permissions, concurrency, frozen lockfile, wrangler action)
• README.md Storybook section — reviewed, well-written and correctly placed
• Inline-styled <button> in AuthCard stories — use Button component
• Raw <input> elements in Label.stories.tsx — use library components
• className="" empty string in AuthCard CustomClassName story

_Reviewed

[tomny-roomote]

All code quality notes addressed — AuthCard now uses Button component, Label stories use library Input/Checkbox, and AuthCard CustomClassName uses a meaningful className. Lint passes. <a href="https://roomote.tomny.dev/task/18gnl1k6j1i9o?utm_source=github-comment&utm_medium=link&utm_campaign=github_pr_review_sync\" target="_blank" rel="noopener noreferrer">Follow

• require("react") anti-pattern in SignInPage.stories.tsx — fixed
• require("react") anti-pattern in Checkbox.stories.tsx — fixed
• require("react") anti-pattern in ForgotPasswordPage.stories.tsx — fixed
• .github/workflows/storybook-deploy.yml — reviewed, no issues
• README.md Storybook section — reviewed, well-written
• Inline-styled <button> in AuthCard stories — replaced with Button component
• Raw <input> elements in Label.stories.tsx — replaced with Input and Checkbox components
• className="" empty string in AuthCard CustomClassName story — replaced with className="storybook-auth-card"

_Reviewed

[tomny-roomote]

Label stories changes already covered in prior pass — InlineWithInput and WithCheckbox now use library Input and Checkbox components. All code quality notes remain addressed. Note: PR merge state shows unstable — may need rebase against latest main. <a href="https://roomote.tomny.dev/task/18gnl1k6j1i9o?utm_source=github-comment&utm_medium=link&utm_campaign=github_pr_review_sync\" target="_blank" rel="noopener noreferrer">Follow

• require("react") anti-pattern in SignInPage.stories.tsx — fixed
• require("react") anti-pattern in Checkbox.stories.tsx — fixed
• require("react") anti-pattern in ForgotPasswordPage.stories.tsx — fixed
• .github/workflows/storybook-deploy.yml — reviewed, no issues
• README.md Storybook section — reviewed, well-written
• Inline-styled <button> in AuthCard stories — replaced with Button component
• Raw <input> elements in Label.stories.tsx — replaced with Input and Checkbox components
• className="" empty string in AuthCard CustomClassName story — replaced with className="storybook-auth-card"

_Reviewed

[tomny-dev]

Revalidated exact head f0e470c951e3f5b46fbee77ce45cafd2a27d8695. The final Storybook composition cleanups are present, all review threads are resolved, and exact-head CI #273 plus Preview Publish #132 both pass. Ready for manual merge.

[tomny-roomote]

All code quality notes addressed. Only change since last review: removed unused ToastProvider import from .storybook/preview.tsx — clean, no functional impact. All review threads resolved.

• require("react") anti-pattern in SignInPage.stories.tsx — fixed
• require("react") anti-pattern in Checkbox.stories.tsx — fixed
• require("react") anti-pattern in ForgotPasswordPage.stories.tsx — fixed
• .github/workflows/storybook-deploy.yml — reviewed, no issues
• README.md Storybook section — reviewed, well-written
• Inline-styled <button> in AuthCard stories — replaced with Button component
• Raw <input> elements in Label.stories.tsx — replaced with Input and Checkbox components
• className="" empty string in AuthCard CustomClassName story — replaced with className="storybook-auth-card"
• .storybook/preview.tsx — removed unused ToastProvider import

_Reviewed

[tomny-dev]

Revalidated exact head 29d48ea26c7ae7e40456be0efe38c0d4db9ebbad. The final dead Storybook preview import cleanup is present, all review threads are resolved, and exact-head CI #274 plus Preview Publish #133 both pass. Ready for manual merge.