Add Storybook, for helping test UI components.

Review Request #13737 — Created April 16, 2024 and submitted

Information

Review Board
release-7.x

Reviewers

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 within docs/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 the staticbundles.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.

Summary ID
Add Storybook, for helping test UI components.
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 within `docs/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 the `staticbundles.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.
ea8bc46418683c0c1666ddfe7cb9dd74793f4fc8

david
  1. Yay! I'm excited to play with this.

  2. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-7.x (14bf161)
Loading...