【UI】Storybook101

[fayeah]

两年前开始听说storybook，当时看文档觉得很复杂，就没有深入地去研究、去了解，现在项目上有机会做这样的尝试，我个人就基于一个小组件进行了第一次尝试，弄好之后发现，哇塞，太好用了吧，怎么没有早早开始研究呢~~

Prerequisite

• 可运行的React项目
• 有简单的组件

初衷

团队是一个有10人左右规模的团队，不算大团队，但是我们频繁地在自定义新的组件，而其他人做了什么，或者说我们代码目前有哪些组件，是否可以重用，新的业务需求有了UI的设计之后如何快速地沟通我们现有的组件，是否保持设计系统风格的统一。那Storybook是一个非常好的工具，可以做一个简单的试验。

什么是storybook

官方的解释：

Storybook is the most popular UI component development tool for React, Vue, and Angular. It helps you develop and design UI components outside your app in an isolated environment.
意思是什么呢，简单来说它是一个可运行在独立环境里面的UI组件开发工具。有以下几个特点：

• 将组件文档化，使得组件能够更好地复用，我们知道，复用是软件开发永恒的话题。
• 自动地将组件进行视觉测试，从而减少bug。
• 只在用于开发阶段，线上环境是不会将storybook的部分打包进去。

从0到1搭建一个storybook

根据官方文档，设置已有项目的storybook是非常简单的一件事情：

• npx sb init：安装storybook依赖
• npm run storybook：启动storybook，前面我们提到storybook会运行在独立的环境里面，相应地，在我的本地也是单独启动了一个服务

会看到搭建好之后已经有了几个例子，非常典型的Button，会有不同的状态、描述、默认值、Congtrols和Actions等。

我自己也是挑选了一个简单的组件来测试，登陆页面的Input组件，该组件也会有不同的状态：

• 文本的Input
• 密码的Input
• 有错误的Input

根据这三种状态进行了不同的尝试，如下图:point_down:：

按照文档的学习，实际上是非常简单的过程，我来总结一下值得注意的地方：

• Description: 如果只在storybook的文件里面去添加内容，description是空的，看官方的例子发现原来是从prop-types里面来的，比如我们想要给label和onChange一个描述，可以在自定义组件里面这么写：

 InputForSignIn.propTypes = {
  /**
   * sign in  in put label
   */
  label: PropTypes.string.isRequired,
  /**
   * Optional change handler
   */
  onChange: PropTypes.func,
};

• Default: 类似地，如果想要给一个默认值，依然可以是用prop-types这个工具：

InputForSignIn.defaultProps = {
  onChange: () => {},
};

• 插件: 最基本也最常用的是Controls，会结合参数args和defaultProps两个�属性，可传入props：

EmailForSignIn.args = {
  label: 'Email',
};

• 颜色面板/选项：我们可以使用颜色面板来自定义storybook某个组件的颜色和选项（目前我只解锁了这两项技能）:sparkles:：
  

argTypes: {
    color: { control: 'color' },
    variant: {
      control: {
        type: 'select',
        options: ['filled', 'outlined'],
      },
    },
  },

*.stories.js的代码

export default {
  title: 'SignIn/Input Form',
  component: InputForSignIn,
  argTypes: { onChange: { action: 'value changed' } },
  parameters: { actions: { argTypesRegex: '^on.*' } },
};

const Template = (args) => <InputForSignIn {...args}/>;

export const EmailForSignIn = Template.bind({});

EmailForSignIn.args = {
  label: 'Email',
};

EmailForSignIn.storyName = 'Email Input';

export const PasswordForSignIn = Template.bind({});

PasswordForSignIn.args = {
  label: 'Password',
}

export const EmailError = Template.bind({});

EmailError.args = {
  label: 'Email',
  helperText: 'Email address'
};

EmailError.storyName = 'Email Error';

个人的一些思考

前端开发组件化是一个趋势，设计领域的设计系统也都是在以原子化的趋势变化，storybook也是为了是的系统的统一性而衍生出来的一个产品，这是一个无论对于开发或是设计师来说都是极佳的体验。大量的插件也帮助我们更好地描述我们的组件。我认为storybook必将更加广泛地应用到开发领域，占有一片占比比较大的天地，我虽然也只是做了一个小小的试验，也深刻地感受到了storybook强大的威力，将来我也会更加关注设计系统。不论开发还是设计师，最终都是为了产品，好的产品需要多方面的认知。

References:

• https://storybook.js.org/
• https://react.carbondesignsystem.com/?path=/story/accordion--accordion
• https://www.webfx.com/tools/emoji-cheat-sheet/
• 一本关于设计的书《Atomic Design》