diff --git a/dev-docs/FRONTEND-TOOLING.md b/dev-docs/FRONTEND-TOOLING.md index 6006595b..3da5980b 100644 --- a/dev-docs/FRONTEND-TOOLING.md +++ b/dev-docs/FRONTEND-TOOLING.md @@ -65,3 +65,32 @@ backstop. Runs against `apps/portal/`. `apps/app/` has no test suite yet — build + typecheck are its only automated gates. Bringing Vitest coverage to `apps/app` is a separate backlog item. + +## Storybook + +Storybook 10.x is installed in apps/app/ as a component development +and documentation tool. + +**Scripts (run from apps/app/):** +- `pnpm storybook` — dev server on http://localhost:6006 +- `pnpm build-storybook` — static build to storybook-static/ + +**Config files:** +- apps/app/.storybook/main.ts — framework, stories glob, addons, viteFinal aliases +- apps/app/.storybook/preview.ts — PrimeVue (via installPrimeVue plugin), Tailwind + +**Stories location:** co-located with components (ComponentName.stories.ts +next to ComponentName.vue). Exception: smoke-test stories live in +src/stories/. + +**Addons (explicit, no addon-essentials):** +- @storybook/addon-docs — autodocs, prop tables +- @storybook/addon-a11y — axe-core accessibility checks per story + +**Scope boundary:** Storybook = isolated render, autodocs, a11y. +Interaction testing (click, form submit, emit) stays in Playwright CT. +Do NOT install @storybook/addon-interactions. + +**Not in Storybook:** page-level views, components with direct +useAuthStore / useOrganisationStore calls (these need to be +decoupled to props first).