StoryBook 插件介绍

插件使用

story 创建中会用到插件 addons, storybook 官方提供一部分插件，其他的是社区提供的

1. 注册插件

首先要在 .storybook/ 下创建 addons.js 插件注册文件，在这里是进行插件注册的，（并不是所有插件都需要注册，具体的要看插件的文档要求）

// .storybook/addons.js import '@storybook/addons' import '@storybook/addon-knobs/register'; import 'storybook-readme/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-storysource/register'; import '@storybook/addon-a11y/register'; import '@storybook/addon-viewport/register'; import '@storybook/addon-links/register'; 

2. 插件配置

大部分插件可以选择是在全局安装还是在某一个 story 中安装

• 全局安装：.storybook/config.js 中通过 addDecorator(addon) 安装
• story安装：在某个 *.stories.js 中 storiesOf(‘XXX’, module).addDecorator(addon) 安装

同理，部分插件还需要进行参数的配置 这就会用到 addParameters() 方法

• 全局安装：.storybook/config.js 中通过 addParameters({[addonKey]: addonParam}) 追加
• story安装：在某个 *.stories.js 中 storiesOf(‘XXX’, module).addParameters({[addonKey]: addonParam}) 追加

重点插件介绍

1. Knobs

提供一套可以用来动态编辑展示组件属性的控件，这样使用者可以在不改动代码的情况下学习组件使用

1. 安装

讯享网npm install --save-dev @storybook/addon-knobs 

2. 注册

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

3. 使用

addon-knobs 内置很多种类型控件，用来操作组件 props 的更改，并且支持分组显示

针对 Immutable 类型的数据并没有对应的 类型控件，但是可以使用 object 来代替

讯享网import * as React from 'react'; import { 
   storiesOf} from '@storybook/react'; import { 
   withKnobs, object, array, text} from '@storybook/addon-knobs'; import { 
   LoadingButton} from 'xxx-ui-components'; storiesOf('Button', module) .addDecorator(withKnobs) .add('LoadingButton', () => { 
    return ( <LoadingButton label={ 
   text('label', 'default value', 'GROUP 1')} obj={ 
   object('obj', { 
   a: 'default obj'})} imt={ 
   Immutable({ 
   object('imt', { 
   a: 'default immutable Type value'})})} > Hello Button </LoadingButton> ); }); 

4. 自动化使用

为了最大化使用体验最好每个组件 prop 都做成控件可控，但是这样写起来很麻烦，社区中有一个插件 storybook-addon-smart-knobs 可以将组件的属性做一个简单的处理，然后针对简单类型的 prop 配合 addon-knobs 生成控件

// npm install --save-dev storybook-addon-smart-knobs 安装 // 支持 propTypes flow typescript import * as React from 'react'; import { 
   storiesOf} from '@storybook/react'; import { 
   withKnobs, object, array, text} from '@storybook/addon-knobs'; import { 
    withSmartKnobs } from 'storybook-addon-smart-knobs' import { 
   LoadingButton} from 'xxx-ui-components'; storiesOf('Button', module) .addDecorator(withSmartKnobs) // 在 withKnobs 前引用 .addDecorator(withKnobs) .add('LoadingButton', () => { 
    return ( <LoadingButton imt={ 
   Immutable({ 
   object('imt', { 
   a: 'default immutable Type value'})})} > Hello Button </LoadingButton> ); }); 

这个插件有个缺点，针对复杂类型不能解析，因此如果发现那一个重要属性没有被生成 控件，可以再使用 Knobs 手动创建一个

另外，如果要显示的 props 包含描述，需要在定义 props 类型的时候加入注释, 如下

讯享网type PropsType = { 
    / 显示文案 */ label: string, / 是否显示加载状态 */ loading: boolean, / 点击回调 */ onClick?: Function, / 按钮的颜色主题 */ type?: string, / 按钮大小 */ size?: string, / 附加类名 */ className?: string, / Test Immutable */ imt: ImmutableMap<string, any> }; 

2. Actions

捕获组件事件，将结果打印出来，用来记录事件日志

讯享网

1. 安装

npm install --save-dev @storybook/addon-actions 

2. 注册

讯享网// .storybook/addons.js import '@storybook/addon-actions/register'; 

3. 使用

作为事件 prop 的值使用，参数是一个字符串用来区分事件，点击操作后可在控件中查看返回值

import * as React from 'react'; import { 
   storiesOf} from '@storybook/react'; import { 
   action} from '@storybook/addon-actions'; import { 
   LoadingButton} from 'xxx-ui-components'; storiesOf('Button', module) .add('LoadingButton', () => { 
    return ( <LoadingButton onClick={ 
   action('button click')}> Hello Button </LoadingButton> ); }); 

3. addon-info

用于 story 信息展示，包含当前展示的组件的代码（实时更新），当前组件 propTypes 说明（详细）

1. 安装

讯享网npm install --save-dev @storybook/addon-info 

2. 不需要注册

3. 使用

可以在全局或者某个 story 下使用，可以处理 markdown 文件，用作说明文档

import { 
    configure, addParameters, addDecorator } from '@storybook/react'; import { 
   withInfo} from '@storybook/addon-info'; function loadStories() { 
    const req = require.context('../src/components', true, /\.stories\.js$/); req.keys().forEach(filename => req(filename)); } addDecorator(withInfo); configure(loadStories, module); 

更多 addon-info 配置查看

4. Story

这个插件的功能就是使你能够看到当前操作的组件对应的 story 代码

1. 安装

讯享网npm install --save-dev @storybook/addon-storysource 

2. 注册

// .storybook/addons.js import '@storybook/addon-storysource/register'; 

3. 使用

注册完即可不需要配置

4. Readme

addon-info 是官方的插件，可以用作文档展示也可以使用markdown, 但是在视觉上比较丑，修改视觉有比较复杂，所以找到了这个插件 storybook-readme ，他可以更加美观的展示代码，并且使用 markdown 的文件

1. 安装

讯享网npm install --save-dev storybook-readme 

2. 注册

// .storybook/addons.js import 'storybook-readme/register'; 

3. 使用

讯享网// .storybook/config.js import { 
    configure, addParameters, addDecorator } from '@storybook/react'; import { 
   withInfo} from '@storybook/addon-info'; import { 
    addReadme, configureReadme } from 'storybook-readme'; import { 
   AreaWrapper, StoryWrapper, DocWrapper, HeaderWrapper, FooterWrapper} from './layout'; function loadStories() { 
    const req = require.context('../src/components', true, /\.stories\.js$/); req.keys().forEach(filename => req(filename)); } // 展示UI上的配置 configureReadme({ 
    StoryPreview: StoryWrapper, DocPreview: DocWrapper, HeaderPreview: HeaderWrapper, FooterPreview: FooterWrapper }); // 配置代码主题 addParameters({ 
    readme: { 
    codeTheme: 'hopscotch', } }); // addReadme 要在 withInfo 下边 addDecorator(withInfo); addDecorator(addReadme); configure(loadStories, module); 

configureReadme 方法用来做一些全局展示上的配置 更详细的介绍查看

// 例子 configureReadme({ 
    StoryPreview: ({ 
    children }) => ( <div style={ 
   { 
    background: '#000' }}> { 
   children}</div> ) }); 

讯享网// story 中使用 import * as React from 'react'; import { 
   storiesOf} from '@storybook/react'; import { 
   LoadingButton} from 'xxx-ui-components'; import ButtonReadme from 'xxx-ui-components/src/components/LoadingButton/README.md'; import ButtonUSAGE from 'xxx-ui-components/src/components/LoadingButton/USAGE.md'; storiesOf('Button', module) .addParameters({ 
    readme: { 
    content: ButtonReadme, // 这个 Readme 显示在正中间展示区 sidebar: ButtonUSAGE // 显示在侧边栏的 Readme tag下 }, }) .add('LoadingButton', () => { 
    return ( <LoadingButton onClick={ 
   action('button click')}> Hello Button </LoadingButton> ); }); 

Markdown 编写规范

1. 除了一般的 markdown 规范，在这里 storybook-readme 提供了一些定制化得标识符，这些标识符会被替换为对应控件
2. <!-- STORY --> 会被替换为组件展示的部分
3. <!-- PROPS --> 会被替换为组件展示的表格
4. 代码部分会被加上主题后输出

# Button :star: Application button. <!-- Brief summary of what the component is, and what it's for. --> <!-- STORY --> <!-- PROPS --> 

其他插件

查看