前端工具Storybook简介

认识Storybook

Storybook （https://storybook.js.org/） 是一个很不错的开源工具，用于帮助前端组件开发，可以支持React, Vue和Angular等框架。
正如它的名字所预示的一样，使用它可以写出组件库的活的用户故事（user story）。
它的网站首页这样说道：storybook 为UI组件提供一个独立的沙箱环境，在这里无论是edge case还是难于遇到的状态都可以造出来。可以把use case 像故事一样展现出来。
想象一下过去我们如果希望单独测试一个组件的行为和表现该怎么做？我不知道各位大佬如何，反正我就老老实实地写个页面（甚至专门建个测试用的project）把组件扔进去，再启动测试服务器，打开浏览器和调试窗口…
有了Storybook, 终于可以鸟枪换炮了，而且这些story不是写写测试一下就没有用了，它们不仅可以供以后测试用比如UT，也可以用于生成文档。这样的话原来老土的手工活在工具话流程化后突然变得高大上了…

storybook 的界面如上图所示，左面边栏是story 列表，右面主要部分就是要展示的目标组件。右下的面板可以做一些控制比如改变状态。

如何写Story

文件扩展名

Story文件需要以.stories.js结尾，它并不会被编译到最终打包的程序中。

组件故事格式

Storybook 官网文档给出了一个专用的“组件故事格式”（CSF）用来写Story。
基本要求大概有以下几点：

1. 默认的export的对象是指定的meta data, 包括标题（其实是故事路径），组件，装饰起和参数
2. 有名字的export对象会被当成一个story function, 系统会自动把驼峰表示法的名字拆成空格分隔的名字。
3. Story function 的参数会被作为args输入
4. Storybook 其实也支持直接指定story 的名字，比如xxx.storyName = “xxxx”
5. 在meta data 里面可以指定includeStories 和excludeStories，并支持正则表达式，这样我们就可以export 不是story function的对象了。

Story的参数

我们可以在metadata 里面定义一些参数（parameters）这样可以提供一些配置上的灵活性。官方文档给出的例子是背景颜色的。注意这些参数是和一定的插件（addons）一起工作的。

export default {
  title: 'Button',
  component: Button,
  //👇 Creates specific parameters for the story
  parameters: {
    backgrounds: {
      values: [
        { name: 'red', value: '#f00' },
        { name: 'green', value: '#0f0' },
        { name: 'blue', value: '#00f' },
      ],
    },
  },
};

然后界面上就会出现三种可选的背景色

装饰器

装饰器（decorators）有点像装饰模式，就是说在渲染组件时用装饰器把组件包起来。

多个组件的故事

有时候我们会设计一些需要一起使用的组件，Storybook 也支持把它们放在一起写story。