• 
      

    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:
    Completed
    Change Summary:
    Pushed to release-7.x (14bf161)