Chapter 7. Isolating Components with Storybook

React components are smaller pieces of a larger user interface. Naturally, you want to develop your UI components in tandem with the rest of the application. On the other hand, experimenting with component changes can prove tricky if the only environment you have is inside the larger UI. The focus of this chapter is showing you how the Storybook tool can be leveraged to provide an isolated sandbox for developing React components. You will learn:

• The importance of isolated component development
• Installing Storybook and getting it set up
• Developing components using stories
• Bringing components into the application

The need for isolated component development

Isolating React components during development can be difficult. Often, the only context available to developers and the React components that they're making is the application itself. Rarely do things go exactly as planned while a component is being developed. Part of the debug process for a React component is, well, playing with it.

I often find myself doing weird things in application code to accommodate for temporary changes that we make to components as I troubleshoot problems. For example, I'll change the type of container element to see if this is what's causing the layout issues that I'm seeing; or, I'll change the markup that's internal to the component; or, I'll completely fabricate some state or props that the component uses.

The point is that there are random experiments that you're going to want to perform over the course of developing component. Trying to do this within the application that you're building can be cumbersome. This is...

Installing and configuring Storybook

The first step to using Storybook is installing the global command-line tool. It's installed as a global tool because it can be used with many projects at the same time, and it can be used to bootstrap new projects. Let's start with this first step:

npm install @storybook/cli -g

Once this installation is done, you have the command-line tool that's used to modify your package.json dependencies and generate boilerplate Storybook files. Let's assume that you've used create-react-app to create a new application. Change into your application directory, and use the Storybook command-line tool to add Storybook to your current project:

getstorybook

The getstorybook command does a number of things for you when you run it. Here's what you should see as the output when you run this command:

getstorybook - the simplest way to add a storybook to your project. 
 Detecting project type. 

Adding storybook support to your "Create React App" based project. 

Preparing to install...

Developing components with stories

The value of Storybook is that you don't have to set up an application to start hacking components. Or, if you already have an application under development, you don't have to figure out how to integrate in-progress components into your app. Storybook is a tool that enables experimentation. Through the use of add-ons, you can test almost any aspect of your component before worrying about integrating it into your application.

Experimenting with props

Perhaps, the most straightforward way to get started with developing components in Storybook is to start experimenting with different property values. To do so, you just have to create different stories of your component, each with different property values.

First, let's take a look at the component that you're working on:

import React from 'react'; 
 
const MyComponent = ({ title, content, titleStyle, contentStyle }) => ( 
  <section> 
    <heading> 
      <h2 style={titleStyle}>{title}<...

Building static Storybook apps

If you're building component library that you either want to distribute as an open source project or as something that's shared with various teams within your organization, you can use Storybook as the tool that documents how to work with your components. That said, you might not want to have a Storybook server running or you might just want to host the Storybook documentation.

In either scenario, you need a static build of the stories that you've written for your component library. Storybook provides you with this utility when you run the getstorybook command.

Let's continue with the example from the preceding section where you used Storybook to document the usage scenarios of your two components. To build your static Storybook documentation, all you have to do is run the following command from within your project directory:

npm run build-storybook

You should see output that looks like the following:

info @storybook/react v3.3.13info info => Loading custom addons...

Summary

This chapter was the focus of a tool called Storybook. Storybook provides React developers with a sandboxed environment that makes it easy to develop React components on their own. This can be difficult when the only environment you have is the application that you're working on. Storybook provides a level of development isolation.

First, you learned how to install the global Storybook command-line utility and how to use this utility to get Storybook set up in your create-react-app projects. Next, you learned how to write stories that show different perspectives of a component.

Then, you learned that a good portion of Storybook functionality comes from add-ons. You learned that Actions help with logging and that links provide a mechanism for navigation beyond the default. You also learned how to write documentation for React components using Storybook. We closed the chapter with a look at building static Storybook content.

In the next chapter, you'll explore the React tooling available...