bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add Storybook 10 setup with PrimeVue + Tailwind integration #25

Merged
bert.hausmans merged 3 commits from claude/reverent-driscoll-a37dce into main 2026-05-14 13:32:12 +02:00
Conversation 0 Commits 3 Files Changed 11 +1522 -10
bert.hausmans commented 2026-05-14 13:31:39 +02:00
Owner
Copy Link

Summary

Installs Storybook 10.4 in apps/app/ as a component-development and autodoc tool, wired to the existing PrimeVue + Tailwind v4 stack.

Three commits:

  • ebb8e3bc chore: add Storybook 10 setup with PrimeVue + Tailwind integration
  • 999e30f0 docs: add Storybook section to FRONTEND-TOOLING.md
  • 3c6bd052 docs: fix stale Vitest note in FRONTEND-TOOLING + update RFC-WS-FRONTEND-PRIMEVUE §13 Storybook entry

What changed

Setup (apps/app/):

  • .storybook/main.ts — framework + 2 addons (addon-docs, addon-a11y), viteFinal mirrors all 7 SPA aliases so stories resolve imports identically to dev/build
  • .storybook/preview.ts — reuses @/plugins/primevue's installPrimeVue() instead of duplicating registration, so Storybook stays in lock-step with main.ts whenever PrimeVue config changes; imports tailwind.css
  • Three seed stories:
    • src/stories/PrimeVueSmoke.stories.ts — Button (Primary / Secondary / Danger)
    • src/stories/TailwindSmoke.stories.ts — utility-class box
    • src/components/forms/FormField.stories.ts — Default / WithError / Disabled, wrapped in <Form> + Zod resolver

Make target:

  • make storybook alongside make app / make docs (port 6006)

Docs:

  • dev-docs/FRONTEND-TOOLING.md § Storybook added; § Vitest corrected (apps/app has 402 tests, not "no test suite")
  • dev-docs/RFC-WS-FRONTEND-PRIMEVUE.md §13 — Storybook bullet now strikethrough with "Landed post-RFC" note

Out of scope (intentional)

  • @storybook/addon-interactions — interaction testing stays in Playwright CT per testing architecture
  • @storybook/addon-essentials — composed addons explicitly (only docs + a11y)
  • @storybook/addon-vitest — would have added a third Vitest project with browser-mode Playwright; not needed

Test plan

  • pnpm test — 57 files / 402 tests passed (5.98s)
  • pnpm typecheck — clean (vue-tsc 3.1.2)
  • pnpm build-storybook — succeeded (3.46s), output in storybook-static/
  • pnpm storybook / make storybook — dev server boots on http://localhost:6006/ within ~10s, all 3 stories render
  • Reviewer: open the dev server and click through the 3 stories, confirm PrimeVue Aura theme + Tailwind utilities both render

Known cosmetic warning (non-blocking)

Storybook startup logs three unable to find package.json for @primeuix/themes / @primevue/forms / primevue warnings. These are caused by PrimeVue v4's exports map missing an entry Storybook's package-meta-resolver expects. No runtime impact — all stories render correctly. Worth tracking upstream if it persists past PrimeVue v5.

## Summary Installs Storybook 10.4 in `apps/app/` as a component-development and autodoc tool, wired to the existing PrimeVue + Tailwind v4 stack. **Three commits:** - `ebb8e3bc` chore: add Storybook 10 setup with PrimeVue + Tailwind integration - `999e30f0` docs: add Storybook section to FRONTEND-TOOLING.md - `3c6bd052` docs: fix stale Vitest note in FRONTEND-TOOLING + update RFC-WS-FRONTEND-PRIMEVUE §13 Storybook entry ## What changed **Setup (`apps/app/`):** - `.storybook/main.ts` — framework + 2 addons (`addon-docs`, `addon-a11y`), `viteFinal` mirrors all 7 SPA aliases so stories resolve imports identically to dev/build - `.storybook/preview.ts` — reuses `@/plugins/primevue`'s `installPrimeVue()` instead of duplicating registration, so Storybook stays in lock-step with `main.ts` whenever PrimeVue config changes; imports `tailwind.css` - Three seed stories: - `src/stories/PrimeVueSmoke.stories.ts` — Button (Primary / Secondary / Danger) - `src/stories/TailwindSmoke.stories.ts` — utility-class box - `src/components/forms/FormField.stories.ts` — Default / WithError / Disabled, wrapped in `<Form>` + Zod resolver **Make target:** - `make storybook` alongside `make app` / `make docs` (port 6006) **Docs:** - `dev-docs/FRONTEND-TOOLING.md` § Storybook added; § Vitest corrected (apps/app has 402 tests, not "no test suite") - `dev-docs/RFC-WS-FRONTEND-PRIMEVUE.md` §13 — Storybook bullet now strikethrough with "Landed post-RFC" note ## Out of scope (intentional) - `@storybook/addon-interactions` — interaction testing stays in Playwright CT per testing architecture - `@storybook/addon-essentials` — composed addons explicitly (only docs + a11y) - `@storybook/addon-vitest` — would have added a third Vitest project with browser-mode Playwright; not needed ## Test plan - [x] `pnpm test` — 57 files / 402 tests passed (5.98s) - [x] `pnpm typecheck` — clean (vue-tsc 3.1.2) - [x] `pnpm build-storybook` — succeeded (3.46s), output in `storybook-static/` - [x] `pnpm storybook` / `make storybook` — dev server boots on http://localhost:6006/ within ~10s, all 3 stories render - [ ] Reviewer: open the dev server and click through the 3 stories, confirm PrimeVue Aura theme + Tailwind utilities both render ## Known cosmetic warning (non-blocking) Storybook startup logs three `unable to find package.json for @primeuix/themes / @primevue/forms / primevue` warnings. These are caused by PrimeVue v4's `exports` map missing an entry Storybook's package-meta-resolver expects. No runtime impact — all stories render correctly. Worth tracking upstream if it persists past PrimeVue v5.
bert.hausmans added 3 commits 2026-05-14 13:31:40 +02:00
chore: add Storybook 10 setup with PrimeVue + Tailwind integration ebb8e3bcf6 
Installs Storybook 10.4 in apps/app/ as a component-development and
autodoc tool. Configures viteFinal with all seven SPA aliases so
stories resolve imports identically to the dev/build pipeline.
preview.ts reuses @/plugins/primevue's installPrimeVue() so Storybook
stays in lock-step with main.ts whenever the PrimeVue config changes.

Only the addons we need are wired: addon-docs (autodocs) and
addon-a11y (axe-core checks). addon-interactions is intentionally
omitted — interaction testing stays in Playwright CT per the testing
architecture.

Seed stories: PrimeVue Button (Primary/Secondary/Danger), Tailwind
utility box, and FormField (Default/WithError/Disabled) wrapped in
@primevue/forms Form + Zod resolver.

Adds make storybook target alongside make app / make docs.
docs: add Storybook section to FRONTEND-TOOLING.md 999e30f0fc
docs: fix stale Vitest note in FRONTEND-TOOLING + update RFC-WS-FRONTEND-PRIMEVUE §13 Storybook entry 3c6bd05289
bert.hausmans merged commit a17dbb7dfd into main 2026-05-14 13:32:12 +02:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
bert.hausmans
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: bert.hausmans/crewli#25
Delete Branch "claude/reverent-driscoll-a37dce"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?