Lesson 7: Storybook — The Visual Source of Truth
To check the `Button` in its `ghost` state with an error, you log into the app, open a form, enter bad data, and wait. All that to see one component. This lesson teaches you `Storybook`: a stories file that renders every variant in isolation, on one page — a visual source of truth that doesn't requi
Storybook is like a tailor's showroom: each variant of a garment on its own mannequin, lined up, so you inspect each one separately — without dressing a whole person and sending them to walk around the store.
- Storybook
- A tool that renders components in isolation outside the app, each with its variants on one page — a visual source of truth for developing, reviewing, and documenting the design system.
- story
- A single state of a component exported from a `*.stories.tsx` file — usually one variant with its args (`export const Ghost = { args: { variant: 'ghost' } }`).
- isolated development
- Building and testing a component apart from the app, without needing to navigate to it through screens, login, and data — it shortens the feedback loop.
- visual regression
- An unintended visual change that slips in by accident (a component that 'broke' visually). Storybook makes it easy to catch because all variants are visible together.
