StoryBook 使用指南

Storybook是一个开源工具，用于独立开发React、Vue和Angular的UI组件。它能有组织和高效地构建UI组件。本文以构建 React 组件库为例说明如何使用。

1、基本用法

• 初始化项目

mkdir story
cd story
npm init

• 安装依赖

npm i --save-dev @storybook/react
npm i --save react react-dom
npm i --save-dev @babel/core
npm i --save-dev babel-loader

• 添加 脚本 命令

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook" // 指定配置文件目录为 .storybook
  }
}

• 新建 .storybook/config.js 文件

import { configure } from '@storybook/react';

function loadStories() {
  require('../stories/index.js'); // 指定 story 的位置
  // 可以是任意目录，根据自己需要写路径
}

configure(loadStories, module);

• 在 stories/index.js 写 story

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo'; // 这里引入你想展示的组件

storiesOf('Button', module)
  .add('with text', () => (  // 一个 add 表示添加一个 story
    <Button>Hello Button</Button>
  ))
  .add('with some emoji', () => (  // 这里是另一个 story
    <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
  ));   

• 运行看效果(组件更改可实时刷新)

npm run storybook

大致长这样：

• 打包成静态网站资源

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

2、进阶用法

• story 位置放哪儿
  为了维护方便，一般与component平级，如组件目录为：'./src/components'；则 story 目录最好为：'./src/stories'
• 添加 story
  使用 add 添加

// param1 表示 story 名称，会显示在侧边栏；
// func 是一个返回待测试组件的函数
add(param1,func) 

• 动态加载 story，借用了 webpack 的 context API

// .storybook/config.js
import { configure } from '@storybook/react';

const req = require.context('../src/stories', true, /\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

• 使用装饰器
  同一个组件可对应多个story，装饰器的作用是把这些 story 包起来，形成一个父级元素，然后可以对这个父级元素做些修饰，比如让所有子元素居中对齐。

import React from 'react';
import { storiesOf } from '@storybook/react';
import MyComponent from '../my_component';

storiesOf('MyComponent', module)
  .addDecorator(storyFn => <div style={{ textAlign: 'center' }}>{storyFn()}</div>)
  .add('without props', () => <MyComponent />)
  .add('with some props', () => <MyComponent text="The Comp" />);

也可全局配置：

// config.js
import { configure ,addDecorator} from '@storybook/react';
import React from 'react';
const req = require.context('../src/stories', true, /\.js$/);

addDecorator(storyFn => <div style={{ textAlign: 'center' }}>{storyFn()}</div>);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

• 使用 storybook 常用插件
  1、安装插件

npm add -D @storybook/addons @storybook/addon-actions @storybook/addon-links @storybook/addon-notes storybook-readme

2、建立配置文件 .storybook/addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';
import 'storybook-readme/register';

3、使用

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
import markdown from './test.md';

storiesOf('Buttons', module)
  .addDecorator(storyFn => <div style={{ textAlign: 'center' }}>{storyFn()}</div>)
  .add('with text', () => (
    <Button onClick={action('clicked')}>Hello Button111</Button>
  ),{
    notes:{markdown}   // 将会渲染 markdown 内容
  }) 

• 嵌套 story

import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../components/Button';

storiesOf('Buttons|Simple', module).add('with text', () => (
  <Button onClick={action('clicked')}>Hello Button</Button>
));

storiesOf('Buttons|Emoji', module).add('with some emoji', () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
));