Building a Maintainable UI with Storybook
summary
Storybook claims to make UI components maintainable by turning each component into a documented, testable workbench and by supporting add-ons like accessibility checkers and snapshotters. A single project grows from 0 to 50+ maintainers while staying organized. The talk shows a switcher component in three lines that generalizes accordions/tabs, and demonstrates Chromatic screenshot testing that captures visual diffs on commit. Examples run in Storybook, are documented, and the visual-review workflow proves effective.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:52Norberts background
- 9:30Accordion component
- 13:28Switcher component
- 17:08Switcher implementation
- 17:52Layout component
- 18:42Abstracting components
- 19:28What is Storybook
- 20:59Presentation
- 21:16Why Storybook
- 21:28Documentation
- 21:38Style Guide
- 21:54Addons
- 22:17Testing accessibility
- 23:25Storybook addons
- 23:53Chroma
related talks
16mStorybook, a Really Good Idea?
31mA Beginner’s Guide To Storybook
37mBridging the gap between UX and development – A Storybook
15mOnce Upon a Time Storybook
07mReact components, atomic design and storybook
14mBuilding a component library with React, Vue, Angular or WebComponents
52mStorybook: New and upcoming features
24mA Short Synopsis of Vue Storybook