DEV Community

Cover image for Streamline your Front-End Development with Storybook
K
K

Posted on

Streamline your Front-End Development with Storybook

Cover image by Victor R. Ruiz on Flickr

Often I change things or update the libraries I use and things work, but they don't look nice anymore.

For example, I updated react-native-svg and they renamed the rotate prop to rotation and suddendly a slider wasn't rotated 90° anymore. It still worked, but looked strange.

So I figured, I need a way to find these problems quickly. Automatically would be nice too, but the first step should allow me to see these problems without the need to click through the whole app.

Enter Storybook

Storybook sells itself as a development environment for UI components.

What

Storybook lets you render your components in different states in its own UI, a component catalog. This allows your to browse all the components quickly, for example when you think about writing a new one to see if you already have something that would do the job, or if you want to check if some broke after an update.

Since the components are rendered outside of your app it should also lead to a better component architecture, because they have to be truly stand-alone.

How

First you add it to your project. For this, you install the CLI that sets up all the dependencies and creates some files you use later:

$ npm i -g @storybook/cli
$ cd your-project
$ getstorybook
Enter fullscreen mode Exit fullscreen mode

The getstorybook command figures out what kind of project you have and tries to install Storybook pre-configured for it. I created a React app with create-react-app.

After this, you have new scripts in your package.json

  • storybook is used for development
  • build-storybook is used to create a static build of the catalog

You also have a new directory called stories, in my create-react-app case it was created inside of your-project/src

You now can write stories for your components, which are kinda like tests you know from unit-testing.

Lets try a simple example, I want a <Text> component, that lets me set its text-decoration to underline via a boolean prop.

// src/Text.js

import React from "react";

export default ({ children, underline }) => (
  <span style={{ textDecoration: underline ? "underline" : "none" }}>
    {children}
  </span>
);

Enter fullscreen mode Exit fullscreen mode

Now I try to render this component in Storybook with its two props states. For this I import the Text component into src/stories/index.js and use Storybooks storiesOf() function.

// src/stories/index.js

import React from "react";
import { storiesOf } from "@storybook/react";
import Text from "../Text";

storiesOf("Text", module)
  .add("without underline", () => <Text>Hello, world!</Text>)
  .add("with underline", () => <Text underline>Hello, world!</Text>);

Enter fullscreen mode Exit fullscreen mode

Now I can check if everything worked by running the storybook script and opening the browser at http://localhost:9009

$ yarn run storybook
Enter fullscreen mode Exit fullscreen mode

On the left side you can see a tree-navigation. Every call to the storiesOf() function created a drop-down with links to the stories added via the add() method.

I can now click around this catalog to look at the different states of my Text component.

Conclusion

Storybook is an interesting apporach to front-end development. It lets you create and test your components in isolation, so you can focus on one problem at a time. The catalog UI allows you to browse components quickly and check if they still work after you changed something in your app.

Top comments (4)

Collapse
 
d0ruk profile image
Doruk Kutlu

I used the 3.x release for a css-in-js/jsx/shiny-things lib I was working on.

At the time, it felt clunky (and outdated deps) so I switched to component-playground.

storybook 4.x seems to be coming out soon; worth having another go at it.

Collapse
 
yusufcodes profile image
yusufcodes

Thanks for this, this is my first encounter with Storybook and it was interesting to see how it works on a basic level

Collapse
 
nickytonline profile image
Nick Taylor

Yeah, it's great. And it was really cool the maintainers popped by for an AMA

Collapse
 
kayis profile image
K

Haha, yes. I just found out about Storybook and suddendly AMA :D