Storybook

https://storybook.js.org/

https://app.pluralsight.com/library/courses/storybook-getting-started

Installation

npm i -s react react-dom 

npm i @storybook/react -D

npm i babel-loader @babel/core -D

in package.json -> scripts section

"storybook": "start-storybook"

Config

In the root create a folder .storybook and create a file config.js in it

import {configure} from "@storybook/react"

function loadStories(){
  const req = require.context('../stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module)

Stories

in the root create a folder stories

Run

npm run stroybook

Adding storybook to an existing project

npx -p @storybook/cli sb init

Run as above

it creates the necessary folders

Creating Stories

To create a story about a button first create a file under stories folder named button.stories.js

import React from 'react';
import {storiesOf} from '@storybook/react';
import {CallToAction} from '../components/form/cta-button';

storiesOf("Button", module)
  .add('Call to Action', () => (
    <CallToAction label="Submit" />
  ));

Run it and it's there but without styles. To add the styles go to config.js under .storybook folder and import all the css files in the project

 ....
  import "../bootstrap.css"
  import "../main.css" 
 ....

run it again and styles but to see the actions go back to story definition and add this

  ...
  import {action} from '@storybook/addon-actions';
  ...
  <CallToAction label="Submit" 
     onClick={action("button-click")}/>
  ...

Using Assets in Stories

in package.json -> scripts -> storybook script add -s option (static folder)

"storybook": "build-storybook -p 6006 -s ./Images" 

and in component in story you can use it like

<SomeComponent image="flower.jpg"/> 

it goes to /Images/flower.jpg

application must be restarted to see the impact of package.json changes

Grouping Stories

Add "Buttons/" in the beginning of story title

storiesOf("Buttons/Button", module)

If it's more then one level

storiesOf("Buttons/Advertising/Button", module)

Top level grouping use pipe surronded with spaces

storiesOf("Building Blocks | Button", module)

Theming

under .storybook folder create a file crfTheme.js

import {create} from '@storybook/theming';

export default create({
  base: 'dark',
  brandTitle: "Logicmade",
  brandImage: "Logos/logicmade.png",
  colorSecondary: "#faa"
});

color secondary is highlighted text highlight color

in .storybook -> config.js file

import {addParameters, configure} from '@storybook/react';
import crfTheme from './crfTheme';
....
addParameters({
  options:{
    theme: crfTheme
  }
});

Add-ons

npm i @storybook/addon-info

 ....
 import {withInfo} from '@storybook/addon-info';
 ....
  storiesOf('Button', module)
    .addDecorator(withInfo)
    .add(.....
or
  .addDecorator(withInfo({
      inline:true,
  }))

Apply info to all components

in config.js

  import {addParameters, configure, addDecorator} from '@storybook/react';
  import {withInfo} from '@storybook/addon-info';
  ....
  // after addParameters block
  addDecorator(withInfo({
    inline = true
  }));

knobs

npm i @storybook/addon-knobs

in config.js

  import {withKnobs} from '@storybook/addon-info'
  ...
  // after info decorator !
  addDecorator(withKnobs);

in story we define some variables

   ...
   import {text} from '@storybook/addon-knobs';
   ...
  .add('Call to Action', () => {
    const title = text("Title", "Button Title");
    return (
    <CallToAction label="Submit" title= {title}/>
  )});

Knobs addon must be registered to storybook

Under .storybook go to file addons.js

 ...
 import '@storybook/addon-knobs/register';

restart storybook

Knob Types

• Boolean
• Number
• Object
• Select
• Date
• Files

Override Config

  storiesOf('Button', module)
    .addParameters({
      info:{
        inline:false
      }
     })

in config.js it may set to true but it's been overridden if the code above is in story

Writing definitions

write markdown in text field.

   storiesOf('Button', module)
    .addParameters({
      info:{
        text: `
         ### When to use
         This banner should be used, at most once per page .... 
          ---
         ** Location : ** 1st element below navigation
       `
      }
     })

other info addon options

• Header and Source
• Prop Tables
• Styles
• Max Props

Creating an Add-On

create a root folder like seeAlso and create file register.js

import React from 'react';
import addons from '@storybook/addons';

class SeeAlsoPanel extends React.Component{
  state = {seeAlsoL{}}

  setData = (seeAlso) => {
    this.setState({seeAlso});
  }

  componentDidMount(){
    const {api} = this.props;
    api.on("unique-name/storySelected", this.setData);
  }

  componentWillUnmount(){
    const (api) = this.props;
    api.off("unique-name/storySelected", this.setData);
  }

  render(){
    const {seeAlso} = this.state;
    return <div>{seeAlso.label}</div>
  }
}

addons.register('uniqe-name', (api) => {
  addons.addPanel('uniqu-name/panel', { 
    title:'See also',
    render: ({key}) => <SeeAlsoPanel key={key} api={api} />
  })
})

Check pluralsight for details It's section 6

Register like before Under .storybook go to file addons.js

 ...
 import '../seeAlso/register';