mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-10-14 17:54:42 +00:00
50 lines
1.3 KiB
Plaintext
50 lines
1.3 KiB
Plaintext
import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
|
<Meta title="Docs/Storybook" />
|
|
|
|
# Biergarten Storybook
|
|
|
|
This Storybook is scoped to real app UI only:
|
|
|
|
- `SubmitButton`
|
|
- `FormField`
|
|
- `SectionCard`
|
|
- `Navbar`
|
|
- `Themes` gallery
|
|
|
|
## Theme workflow
|
|
|
|
Use the toolbar theme switcher to preview all Biergarten themes:
|
|
|
|
- `biergarten-lager`
|
|
- `biergarten-stout`
|
|
- `biergarten-cassis`
|
|
- `biergarten-weizen`
|
|
|
|
Stories are rendered inside a decorator that sets `data-theme`, so tokens and components reflect production styling.
|
|
|
|
## Tests
|
|
|
|
Two layers are enabled:
|
|
|
|
1. Story `play` tests (Storybook test runner / Vitest addon)
|
|
2. Browser checks with Playwright against Storybook iframe routes
|
|
|
|
Run:
|
|
|
|
- `npm run build-storybook -- --test`
|
|
- `npm run test:storybook:playwright`
|
|
|
|
### Running with a visible browser
|
|
|
|
Both layers default to headless. To watch the browser while debugging:
|
|
|
|
- Playwright layer: `npx playwright test -c playwright.storybook.config.ts --headed`, or `--ui` for the interactive step-through runner.
|
|
- Vitest/story `play` layer: `npx vitest run --project storybook --browser.headless=false` (drop `run` and add `--ui` for Vitest's own UI). The default is set in `vite.config.ts`.
|
|
|
|
## Rules
|
|
|
|
- Add stories only for reusable app components.
|
|
- Prefer semantic classes (`bg-primary`, `text-base-content`, etc.).
|
|
- Keep stories state-focused and minimal.
|