Storybook is a development environment for browsing, exercising, and documenting UI components in isolation. It exposes components with different property and input combinations, shows the implementation behind each visualization, and can provide live controls for interaction. section 13.1.1
A practical Storybook workflow includes:
- Run the existing setup with npm run storybook -w ch13/base; the default browser address is localhost:6006, with the port configurable in package.json. section 13.1.1
- Create a correctly formatted Button.stories.js, .jsx, .ts, or .tsx file; Storybook does not discover components automatically. section 13.1.1
Button variants as a component contract
A Button story can expose its label through a text control, its variant through a select containing regular, outline, and ghost, and disabled and icon placement through boolean controls. Exported variants then become both visual reference points and reusable test fixtures. A test can compose Default, render it with an onClick mock, click the accessible button named Regular button, and verify one call.
Storybook also scales beyond isolated buttons: a Wordle implementation uses it to expose base components and variants, while XState handles the game's main logic separately. section 14.4
