React - Storybook (Component workbench)

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - About

Storybook is a component workbench where you write story.

A story is a single state of your component. Technically, it is a function that returns something that can be rendered to screen.

UI component dev & test

Advertising

3 - Installation/Configuration/Getting Started

3.1 - Install

  • Add the code
yarn add @storybook/react --dev
#or 
npm install @storybook/react --save-dev

3.2 - Configure

  • Config the start
package.json
"scripts": {
    "storybook": "start-storybook"
  }
  • Create the configuration
.storybook/config.js
import { configure } from '@storybook/react';
 
function loadStories() {
  require('../stories/index.js');
  // You can require as many stories as you need.
  // Loading all story matching a pattern
  // const req = require.context('../stories', true, /\.stories\.js$/);
  // req.keys().forEach(filename => req(filename));
}
 
configure(loadStories, module);

3.3 - Story

  • Develop your stories
./stories/index.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';
 
// There is two stories (.add)
storiesOf('Button', module)
  .add('with text', () => (
    <Button>Hello Button</Button>
  ))
  .add('with emoji', () => (
    <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
  ));  

You may also locate them closer to components.

•
└── src
    └── components
        └── button
            ├── button.js
            └── button.stories.js
Advertising

3.4 - Run the Storybook

  • Run the Storybook
npm run storybook

4 - Add-on

5 - Documentation / Reference

web/javascript/react/storybook.txt · Last modified: 2019/05/24 20:17 by gerardnico