Storybook.js is a user interface library explorer tool. It helps build, test, and organize custom components. The tool works well with vanilla JavaScript and the most popular frameworks; Angular, React, Vue.
Once established, the Storybook tool will serve as a full-blown explorer of your UI library. It will organize your components in a hierarchical manner with a navigation and presentational panels ready-to-use. Although you could build a hierarchy several levels deep, I recommend only two levels. Storybook.js rapidly structures your UI library setup. It also provides an environment to build components in isolation. The main panel will render a preview of the component. And in Development watch mode, the preview rebuilds every time you update your component code, so you can see the latest changes.
Upon a successful build of a storybook instance, you will be able to deploy it just like any regular static website. All you need is just a server to provide static web pages and JavaScript. It is preferable to have the content deployed to a CDN for fast performance in global distribution.
Storybook by itself comes with several features baked in. However, if you wish to extend it, it has an extensive set of plugins called “addons” that you can incorporate for more features. Here are the ones that I have used the most:
- Knobs can modify the placeholder text and other component configuration settings so Designers and Managers can play around with their own data.
- The A11y addon executes accessibility tests to confirm the component’s code is semantic and that color contrast is appropriate on the web pages.
- Storysource shows to the reader the Storybook source configuration used to scaffold and present the component in the UI library’s main preview panel.
- The Actions addon gives you the ability to display information captured from event handlers.
- Centered is used to center components inside the main preview panels.
- The Notes addon provides an area where to write and share useful guidelines on using components during development.
- Links can be used to create linkages between components in Storybook.
The Storybook.js component explorer is an incredibly powerful UI library creation solution. I have used it in my consultation projects and it has been a boon for development speed, consistency, and quality. Add to the component explorer additional pages explaining the Style Guide and the various CSS resources to use, and you will create invaluable resource developers can use to build web applications. Feel free to reach out to me if you need help accelerating your web app project.
