JavaScript: Implement StoryBook Step By Step in React Component

As per official site, Storybook is a user interface development environment and playground for UI components which enables developers to create components independently and showcase components interactively in an isolated development environment.

As official site of storybook says, Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular, React-Native. It makes building stunning UIs organised and efficient. So, we can implement a story book with any component.

For React, we just need to do or follow some setup kind of things as mentioned below:

a) Setup with React project

You may follow official doc to use quick start guide to setup your project for Storybook. But, here we just go with manual setup for better understanding:

Assuming we already have react, react-dom, @babel/core, and babel-loader in our dependencies i.e. in package.json file. If not then we need this dependencies for storybook as storybook have peer dependencies on this modules.

For adding @storybook/react to react project we need to run following command:

npm install @storybook/react --save-dev

In order to start the storybook we need to add task in our package.json . This will execute as command npm run storybook to start on a random open port in dev-mode.

{
   "scripts": {
       "storybook": "start-storybook"
   }
}

If we want to add any specific port for storybook then we just need to mention in above script of storybook along with ‘start-storybook’.

e,g `start-storybook -p 6006`. This will start storybook on port 6006

b) Configuration of story book with React

Now, lets create a new directory called .storybook in our project root. Then add config file named as ‘config.js’ file inside this directory. This config file will help to tell Storybook where to find stories.

import { configure } from '@storybook/react';
import './addons'; // This file will contain all addon if we need
import { setDefaults } from '@storybook/addon-info';
import { setOptions } from '@storybook/addon-options';
 
// addon-info
setDefaults({ styles: { header: { h1: { color: 'red' } } } });
// addon-info
setOptions({ name: 'My Story Book', addonPanelInRight: true, sortStoriesByKind: true });
//load all stories
function loadStories() { 
    require('../stories/index.js'); 
    // require('../stories/commonComponents/index.js');
    // require('../stories/sampleComponents/index.js');
    // We can add here all stories which we need 
}
configure(loadStories, module);

Or we can also add context module to find and load all files which ending with `.stories.js` in config file:

A context module contains references to all modules in that directory that can be required with a request matching the regular expression. The context module contains a map which translates requests to module ids.

function loadStories() { 
    // Here we find all files in the stories folder and descending folders ending with `.stories.js`
    const req = require.context('../stories', true, /\.stories\.js$/);
    req.keys().forEach(filename => req(filename)); 
}

Its totally depend on us to decide where to place stories, we can co-locate them with source files, or place them in an other directory.

c) Write (sample) story for Button component to execute story book with React

Now lets create a ../stories/index.js file and write our story as mentioned below:

import React from 'react'; 
import { storiesOf } from '@storybook/react'; 
import { action } from '@storybook/addon-actions';
import { Button } from './button'; // button component
 
const props = { className: 'my-default-button', onClick: action('onClick') };
const customProps = { className: 'my-custom-button', onClick: action('onClick') };
const redButtonProps = { className: 'my-red-button', onClick: action('onClick') };
 
storiesOf('Button', module)
   .add('normal text Button', () => ( 
       <Button {...props}> Click Me! </Button>
   )) 
   .add('with custom class', () => ( 
       <Button {...customProps}> (Custom Button)Click Me!</Button> 
   ))
   .add('with custom left icon', () => ( 
       <Button {...{...customProps, leftIcon: 'icon-eye'}}> Click Me or Icon!</Button>
   ))
   .add('with red border class', () => ( 
       <Button {...redButtonProps}> I'm RED, Click Me!</Button> 
   )); 
 
// Each story is a single state of our component. We will see following four buttons in storybook:
 
// Button 
//     ├── normal text Button 
//     ├── with custom class
//     ├── with custom left icon 
//     └── with red border class

d) Run our Storybook

Now we can finally run and test our stories with npm run storybook

we expect to start storybook and see following output on a http:localhost:xxxx --->
  
Button 
 ├── normal text Button 
 ├── with custom class
 ├── with custom left icon 
 └── with red border class

Thanks!