How To Build JS Components with Storybook

Introduction

Storybook is an open-source tool for developing UI (user interface) components in isolation.

This means developers can create UI components in an environment separate from the application without worrying about flaky data, unfinished APIs, or business logic. This allows you to ship components with confidence.

Storybook has integrations with most front-end frameworks including React, Vue, and Angular.

In this article, you will be introduced to using Storybook for your projects.

Examining Use Cases for Storybook

There are several use cases for adopting Storybook:

• Component Library: With the way Storybook works, you can maintain a component library by utilizing this process of having all components in your application in one location with the ability to test each state of the component.
• Design Systems: A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. With Storybook, you get a design system out-of-the-box.
• Visual Testing: With Storybook addons, you can integrate visual regression testing in order to test and keep your component library consistent no matter how big it is.
• Share across teams: Storybook can be shared across teams because of the way it can be deployed as a static site functioning solely on its own. It can be shared amongst designers and project managers in a team to give feedback or comments on the current design of the components which improves collaboration within teams.

Several teams rely on Storybook to do the heavy lifting of composing a component library and also as a building block for their design systems. Companies like Salesforce, Artsy, GOV.UK, and GitHub use Storybook to build and distribute UI components that impact millions of people.

Writing Stories with Storybook

A Storybook is a combination of different stories for different components. Stories are functions that return something that can be rendered to the screen. A story can contain a single state of one component or can be seen as a visual representation of a component.

Building UI components with Storybook means you have all the components in your application isolated so that they function regardless of the connection between them, and can be tested as separate UI components.

When building with Storybook there are several ways to structure and organize stories within your application.

Here is an example of a directory origination strategy with stories.js files inside a component directory:

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── button.stories.js

Here is an example of a second directory organization strategy with stories directory outside the src directory:

.
 └── src
  └── components
   └── button.js
 └── stories
  └── button.stories.js

Here is an example of a third directory organization strategy with stories subdirectory in a component directory:

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── stories
     └── button.stories.js

Following any of these methods is a matter of choice. It’s up to you to pick what works best for you and your team.

Integrating Storybook with Other Frameworks

Storybook supports almost all the frontend frameworks available and in order for you to integrate with either of these frameworks a guide has been written by the storybook team that you can follow to setup storybook for individual frameworks and they include:

• React
• Vue
• Angular
• Web Components

Support for other frameworks is made possible with community addons:

• Ember
• HTML
• Mithril
• Marko
• Svelte
• Riot
• Preact
• Rax

Using Storybook Addons

Addons extend the features and behavior of Storybook.

An example is the @storybook/addon-actions addon, this helps with logging the data received by event handlers in Storybook.

There is a suite of essential addons that are pre-installed. And many third-party addons provided by the community.

A list of all addons curated by Storybook team can be found on this addons page.

Deploying Storybook as a Static App

Storybook can be used alongside the project you are developing because it gives a great developer experience with features, like hot-reloading via Webpack HMR. But you can also extend this further by deploying the Storybook as a static site on its own. This will enable you to showcase your components to everyone as a style guide reference.

This will require you to configure your Storybook using this script:

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

Now when you run npm run build-storybook or yarn build-storybook this will build the Storybook configured in the storybook directory into a static web app and place it inside the directory called out. Then, you can deploy that directory using services like GitHub Pages, Netlify, or Now.

Conclusion

In this article, you learned what Storybook is all about and when it is useful to take advantage of when building web applications.

Storybook works for a lot of use cases and integrating it into your workflow will enable you to build comprehensive UI components for your applications in isolation.

Continue your learning with a tutorial on how to build an interactive UI component using React and Storybook.