Add Storybook, for helping test UI components.
Review Request #13737 — Created April 17, 2024 and submitted — Latest diff uploaded
This introduces Storybook into the Review Board tree. Storybook makes it
easy to test and play with UI components in isolation, providing an
interface for manipulating a component's state and seeing how it reacts.Storybook is fairly self-contained. It has its own configuration files
in.storybook
, and we'll define story files withindocs/storybook
.
We already use it for Ink, and in time we'll be able to publish
comprehensive Ink, Djblets, and Review Board component libraries as part
of our documentation.We do need to tell it about all our JavaScript bundles and CSS that we
care about, somewhat duplicating the work that both the unit test suite
and thestaticbundles.py
have to do. Most of this will be able to go
away as we convert more of the codebase over to ESM-based bundles.As a start, this contains one component for
DiffComplexityIconView
.
This was the inspiration for introducing Storybook, since I lacked a
great way of thoroughly testing this while updating it for dark mode
support.Going forward, we should strive to introduce Story files for our
components as we do work on them, though this will very much be an
incremental process.
Ran storybook (
npm run storybook
), saw the Diff Complexity Icon
story, and played with values.