Use Storybook to help document and develop Ink's component library.

Review Request #13564 — Created Feb. 20, 2024 and submitted — Latest diff uploaded

Information

Ink
master

Reviewers

Storybook is a tool that helps with building isolated components.
Codebases can specify an organized tree of components that are
available, and then specify the properties that go into constructing
each component. These can be modified via the UI, causing the component
to be re-rendered, allowing for rapid testing of states. Pre-built
collections of states can then be registered as "stories," making it
easy to see various ways in which the component can be used.

It also provides a number of plugins to enhance the development
experience. We use one for accessibility testing, and provide some for
light/dark mode theme support that will take advantage of Ink's
capabilities.

Storybook takes advantage of Hot Module Reloading, which essentially
re-renders affected parts of the UI whenever part of the codebase
(whether LessCSS or TypeScript) is changed. This means that, as a
developer, you can make some changes and instantly see it in the UI
without having to rebuild or reload.

This is purely here for internal development. It does not dictate any
part of our built product, and doesn't impact our non-development
dependencies.

We will, however, be able to take what Storybook creates and turn that
into public documentation, so that people can play with Ink without
needing to build their own project. This will be useful for Ink and,
later, for consuming codebases like Djblets and Review Board.

To use Storybook, simply run npm run storybook. It will start a server
and launch a browser window.

Been using Storybook for development of Ink. Right now, though, this
won't do much.

Commits

Files