Storybook is a javascript library that allows you to test “visual components” by splitting the business logic from the context of the application.

Storybook currently supports several frameworks and libraries such as:

• React,
• Vue,
• Angular,
• Mithril,
• Marko,
• HTML,
• Svelte,
• Meteor,
• and Ember.

In Swapps we use React and React Native, so in this article, we are going to show some examples using React.

Creating a React app

To begin, let’s set up a project with create-react-app:

# Creates our application:
npx create-react-app storybook-example

NPX command allows us to execute any NPM package without having it installed globally; introduced by NPM in version 5.2.0.
For more information go to: Introducing-npx-an-npm-package-runner

Adding Storybook

If you already have configured your React project, start from here. You can add storybook to almost any project by executing the command from the project folder:

# Add Storybook:
npx -p @ storybook / cli sb init

When executed correctly, the console shows the command to run the storybook.

After adding the storybook to our project we will have available the following commands:

• start
• test
• storybook

Please note that in order to run any of these commands on the command line we need to use npm or yarn. For example:

npm run test = yarn test

Yarn start:

This command helps us to run our application. it is used for development since hotreload, linters and the vast majority of tools that are used in a development instance are already integrated.

Yarn test:

With this “command we can run JEST tests.

These tests are automated tests that help us verify that our application works correctly every time a developer makes a change in the code.

Ideally, this command should be used in continuous deployment to verify that our application works as expected before sending it to production.

Yarn storybook:

This command allows us to run the storybook. When executed, it will show that the project has been initiated and it also will show the urls to access the storybook dashboard.

Running storybook

As I mentioned before, the command to run storybook is yarn storybook.

After doing this, the console will show the following message:

If we access the previous url we should get Storybook running with a welcome message and more documentation about how to use it.

Storybook interface has 3 sections: a sidebar, a preview area and, an “action” area.

In the sidebar there’s a list of all the stories we have added, the preview area helps us to view the story and interact with it, and inside the action area we can view the results of executing actions in each component.

Add stories

Please be aware that to add stories we need a “component”. This will not be explained in this short tutorial, instead, we are going to use a component of an external library called react-icons.

For more information, go to the repository: https://github.com/react-icons/react-icons

To add this library we must run the command: yarn add react-icons

This should be the structure of your project at this moment:

In the folder src / stories; you should find index.js. We are going to use this file to add our story.

To write our first story we must open the index.js file and add the following lines:

# We import the component
import {FaBeer} from 'react-icons / fa';
# We add a set of stories.
storiesOf ('Icons', module)
  .add ('default', () => (
   # We return the component as we want to see it
    <h3> Lets go for a <FaBeer />? </ h3>
  ))

As a result, we can see the component working in our preview area; which allows us to test several “cases of use” with our component.

Storybook is a very useful tool for testing components. It allows us to examine how the components will work and have a list of them to coordinate with the other developers of the team.

For more information and use please go to: https://storybook.js.org/basics/quick-start-guide/

Translated by @czapata