Komponentenwerkstätten und Storybook

Storybook & Component Workbenches

An isolated component workbench (Storybook, Histoire, Ladle or the project's built-in UI preview harness) lets developers and designers develop, inspect and test every component state without having to reproduce complex backend states inside the full application.

1. Adapt to the Project's Existing Workbench First

• Check package.json and the repository structure to see what component workbench or preview route already exists.
• Do not install Storybook or a new workbench framework unprompted on a project that does not use one; introduce a new tool only when explicitly requested or agreed with the architect.
• When a workbench is present, ensure its global decorators load the exact same CSS reset, design tokens, font faces, icon sets and i18n provider as the production application so stories never render differently from real screens.

2. Writing High-Value Stories (State Coverage Over Boilerplate)

Organize stories around the states and edge cases that matter to consumers and reviewers:

• Default / Playground: interactive controls (args / argTypes) for exploring primary variants and sizes.
• All Variants & Sizes Grid: a single story rendering the matrix of variant x size side-by-side in both light and dark themes so visual consistency and alignment can be scanned at a glance.
• Interactive States: explicit stories for Loading, Disabled, ReadOnly, InvalidWithError, EmptyState and Selected.
• Content Stress Tests:
  • LongTextAndOverflow: 120-character titles, unbroken URLs, German/Hungarian translations and multi-line wrapping.
  • NarrowViewport: configured with a 320px–375px viewport parameter to verify responsive reflow.
• Composition Stories: realistic combinations (DialogWithFormValidation, DataTableWithEmptyFilter, CardGridWithSkeletons) that verify how primitives work together.

3. Interactive play Functions & Automated Checks

Turn static stories into executable behavioral and accessibility tests:

• Interaction tests (play function):
  • Use @storybook/test (within(canvasElement), userEvent, expect) to simulate keyboard navigation (userEvent.tab(), userEvent.keyboard('{Enter}')), open popovers/dialogs, trigger form validation errors, and assert DOM states.
• Accessibility addon (@storybook/addon-a11y):
  • Run axe-core automatically against every rendered story (including after the play function opens an overlay or triggers an error state).
• Remember the boundary of isolated stories: a story passing in isolation does not prove that the component integrates cleanly with real application routing, server data or parent layout constraints — always verify on representative application screens as well.