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
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
-
storybookis used for development -
build-storybookis 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>
);
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>);
Now I can check if everything worked by running the storybook script and opening the browser at http://localhost:9009
$ yarn run storybook
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)
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.
Thanks for this, this is my first encounter with Storybook and it was interesting to see how it works on a basic level
Yeah, it's great. And it was really cool the maintainers popped by for an AMA
Haha, yes. I just found out about Storybook and suddendly AMA :D