浅学一下 storybook

什么是 storybook

storybook是一个组件开发工具，它提供了完整的组件开发的生态环境，包括插件、用例、文档等等。

storybook 支持 react、vue、angular、web component 等主流前端 UI 框架。

怎么用 storybook

storybook 需要安装到已经设置了框架的项目中。

新建 react 应用

npx create-react-app react-app

初始化 storybook 配置

npx storybook init

启动 storybook

npm run storybook

[图片上传失败...(image-ab30a0-1656065341188)]

给组件写 story，一个 story 表示组件的一种状态。

story 的文件名约定为.stories.js。

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Button', // 侧边栏导航名称
  component: Button, // 组件地址
};

export const Primary = () => <Button primary>Button</Button>;

storybook 呈现的用例展示如下

[图片上传失败...(image-813eb1-1656065341188)]

storybook 附带了内置的工具栏：

• canvas：用于缩放组件、设置背景、设置尺寸及方向
• docs：用于查看组件文档，从组件代码自动推断

[图片上传失败...(image-281540-1656065341188)]

storybook 附带了内置的插件：

• controls：支持动态修改组件参数
• actions：验证交互是否通过回调产生正确的输出

参考资料

• storybook 官网
• [Web 翻译]Storybook 6.0
• StoryBook 实战