Storybook —— React 开发伴侣

React 组件 UI 开发环境，其作用在于让前端工程师专注在样式，组件功能开发过程中。

安装初始化请按照 官方文档 指引进行，以下为我们开发中的一个片段

配置

// [Pro]/.storybook/config.js
import React from 'react';
import { configure } from '@kadira/storybook';
import 'normalize.css/normalize.css';

// 使用 material-ui 需配置
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
addDecorator((getStory) => (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
        {getStory()}
    </MuiThemeProvider>
))
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();


// 加载 *.css 文件
const cssReq = require.context('../client/stylesheet', true, /.css$/);
// 加载 *.story.js 文件
const viewReq = require.context('../imports/ui/pages/live', true, /.story.js$/);

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

configure(loadStories, module);

有时候，我们在开发时，还需要加载字体或者脚本，那么在上述文件同级的目录下增加如下文件即可：

// [Pro]/.storybook/config.html
<script src="xxxx"></script>

编写组件 story

配置完毕后，开始为每一个 component 编写 story 。我们推荐 story 文件以[componentName].story.js 的文件命名，同时将 story 文件放在 component 的同级目录下。

以下为某一 story 文件：

//[Pro]/ui/component/bidOperator.story.js
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import BidOperator from './bidOperator.jsx';

storiesOf('view.LiveCar.comp.BidOperator', module)
    .add('可出价', () => (
        <BidOperator
            start={start}
            incRange={incRange}
            userCanBid={true}
            subBid={subBid}
        />
    ))
    .add('不可出价', () => (
        <BidOperator
            start={start}
            incRange={incRange}
            userCanBid={false}
            subBid={subBid}
        />
    ))
    ;
import Chance from 'chance';
const chance = new Chance();

const start = chance.floating({min: 2, max: 10, fixed: 0});
const incRange = chance.floating({min: 0, max: 1, fixed: 1});

const subBid = function(){
    console.log('subBid ');
}

启动

// 常用启动指令
start-storybook -p 9001 -c .storybook -s ./public

//-p 端口， -c 配置目录，-s 静态文件目录
//启动后 通过 localhost:9001 访问

如下是某组件的两种状态，通过属性(userCanBid)传递即可快速的测试出不同状态下的 comp ，下面看下效果图：

(请注意中间有 loading 状态，其受组件内部 state 控制)

至此，我们完成了 storybook 基本工作，剩下的内容就是将开发重心放在 component 样式，组件功能中去。

以上仅为我们项目开发中的一个环节，除了上述内容外，实际中我们还需要编写接口文档，客户端渲染检测，浏览器兼容测试，这一系列的工作都需要有一套完整的开发环境，恰巧 storybook 满足了我们这个开发环节中的需求。这个工具非常有用！

使用 storybook 进行 ui 的开发，还存在一个重点问题，组件嵌套，关于这个一内容，将在下一节中重点讲述

更多资料

官方文档

时间选择器 demo，源码