# BasicTo Storybook

Storybook 是什么？
Storybook 解决了什么问题？
Storybook 特点
如何使用 Storybook(React)
输出为静态文件

# Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Storybook是一个开源工具，用于为React，Vue和Angular隔离开发UI组件。它使构建令人惊叹的UI变得井井有条，高效。

Storybook 是用户界面开发环境和 UI 组件的工具。该工具使开发人员能够独立创建组件，并在隔离的开发环境中以交互方式展示组件。Storybook 在主应用程序外部运行，因此用户可以独立开发 UI 组件，而不必担心应用程序特定的依赖关系和要求。

Storybook 支持很多的addons (opens new window)

# 特点

# 提供强大的用户界面 Deliver robust UIs

Storybook提供了用于独立构建UI组件的沙盒，因此您可以开发难以到达的状态和边缘情况
Storybook provides a sandbox to build UI components in isolation so you can develop hard-to-reach states and edge cases.

构建隔离的组件
Mock 一些边界的情况
像故事一样使用文档
使用addons来改变你的工作方式

# 有信心的开发组件 Ship components with confidence

使用 Storybook 可以轻松跟踪极端情况，同时也可以免费的测试(通过可视化测试和单元测试，冒烟测试等等)

保持一致性的体验
自动检测代码回归
单元测试组件
像素级别的 UI 更改捕获

快速查找组件
及时得到反馈
跨屏幕和应用共享组件
自动生成样式指南

# Story 开发

# 初始化

使用命令行工具初始化一个 React 项目

自动

npx -p @storybook/cli sb init

npx -p @storybook/cli sb init --type react

手动

添加@storybook/react 及其相关依赖

npm install @storybook/react --save-dev
npm install react react-dom --save
npm install babel-loader @babel/core --save-dev

添加 npm 命令

{
  "scripts": {
    "storybook": "start-storybook"
  }
}

创建一个 main 文件

module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
};

写 story

一个基础的 Story 的示例

import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './Button';

export default {
  component: Button,
  title: 'Button',
};

export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;

export const emoji = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

预览结果: storybook/storybook-01

运行

npm run storybook

书写方式三种

加载方式两种

如何加载一个 story，在.storybook/main.js 和 .storybook/preview.js

方式一

// .storybook/main.js
module.exports = {
  stories: ['../src/components/**/*.stories.js'],
};

方式二

import { configure } from '@storybook/react';

configure(require.context('../src/components', true, /\.stories\.js$/), module);

# Storybook 构建

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

← HowTo Lerna BasicTo Varnish →