Storybook项目实战：新手入门指南

本文介绍了如何从零开始搭建并使用Storybook进行前端组件的开发与测试。从Storybook的基础概念到项目初始化，再到组件的创建与调试，详细讲解了整个流程。文章还涵盖了如何使用Storybook的插件进行组件属性的动态修改，以及如何生成和发布静态站点以分享组件库。通过这些步骤，读者可以掌握storybook项目实战的完整方法。

1.1 什么是Storybook

Storybook是一个工具，用于创建和展示应用中的UI组件。它可以帮助开发者在独立环境中开发、测试和预览组件，而无需启动整个应用程序。Storybook支持React、Angular、Vue等主流前端框架。

1.2 Storybook的作用和优势

Storybook的主要作用包括：

• 隔离开发：使得组件独立于应用状态，可以单独开发和测试。
• 预览组件：提供丰富的预览界面，可以快速查看组件的外观和行为。
• 文档生成：自动生成组件文档，减少编写文档的时间。
• 代码复用：便于代码复用，提升开发效率。
• 团队协作：便于团队成员之间的组件共享和协作。

1.3 Storybook适用场景

• 前端开发：开发、测试和预览前端组件，支持React、Angular、Vue等框架。
• 组件库：构建和分享组件库，提供给团队成员使用。
• 设计和交互：与设计人员协作，实现设计图到组件的转换。

2.1 安装Node.js和npm

安装Node.js和npm是使用Storybook的前提。可以从Node.js官网下载安装包进行安装，或者使用nvm（Node Version Manager）安装：

# 安装Node.js和npm
$ nvm install --lts

2.2 初始化新项目

使用npm命令初始化一个新的React项目：

# 创建一个新的React项目
$ npx create-react-app my-storybook-app

# 进入项目目录
$ cd my-storybook-app

2.3 安装Storybook依赖

安装Storybook依赖，使项目能够使用Storybook功能：

# 安装Storybook依赖
$ npx sb init

安装过程中，会提示选择框架和配置文件。选择React框架，然后按照提示完成安装。

3.1 创建一个简单的组件

创建一个新的组件文件Button.js，编写一个简单的按钮组件：

// src/components/Button.js
import React from 'react';

function Button(props) {
  return (
    <button style={{ backgroundColor: props.color, padding: '10px', borderRadius: '5px' }}>
      {props.children}
    </button>
  );
}

export default Button;

3.2 将组件添加到Storybook

在Button.js文件中添加Storybook的示例代码，以便在Storybook中显示：

// src/components/Button.js
import React from 'react';
import { storiesOf, action } from '@storybook/react';

import Button from './Button';

storiesOf('Button', module)
  .add('Default', () => <Button />)
  .add('With Props', () => <Button color="blue" />);

3.3 配置组件的渲染

运行Storybook，确认组件是否成功渲染：

# 启动Storybook
$ npx sb start

打开浏览器，访问http://localhost:6006，可以看到刚刚创建的按钮组件。

4.1 使用Storybook传递组件属性

修改Button.js文件，传递不同的属性给组件：

// src/components/Button.js
import React from 'react';
import { storiesOf, action } from '@storybook/react';

import Button from './Button';

storiesOf('Button', module)
  .add('Default', () => <Button />)
  .add('With Props', () => <Button color="red" />)
  .add('With Text', () => <Button color="green">Click me</Button>);

4.2 使用Knobs插件动态修改组件

安装Knobs插件，以便在Storybook中动态修改组件属性：

# 安装Knobs插件
$ npm install @storybook/addon-knobs

修改Button.js文件，使用Knobs插件：

// src/components/Button.js
import React from 'react';
import { storiesOf, withKnobs, text, color } from '@storybook/react';

import Button from './Button';

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add('With Knobs', () => (
    <Button color={color('Color', 'blue')}>
      {text('Text', 'Click me')}
    </Button>
  ));

运行Storybook，可以看到使用Knobs插件的组件。

4.3 添加交互和事件

为按钮组件添加点击事件：

// src/components/Button.js
import React from 'react';
import { storiesOf, action } from '@storybook/react';

import Button from './Button';

storiesOf('Button', module)
  .add('With Event', () => (
    <Button color="blue" onClick={action('button clicked')}>
      Click me
    </Button>
  ));

5.1 Storybook中的测试工具

Storybook支持使用Jest和React Testing Library进行组件测试。首先安装测试依赖：

# 安装测试工具
$ npm install --save-dev jest @testing-library/react @testing-library/jest-dom

编写测试文件Button.test.js，测试按钮组件：

// src/components/Button.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('Button should render correctly', () => {
  const { getByText } = render(<Button />);
  const buttonElement = getByText(/Click me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('Button should handle click event', () => {
  const onClick = jest.fn();
  const { getByText } = render(<Button onClick={onClick} />);
  fireEvent.click(getByText(/Click me/i));
  expect(onClick).toHaveBeenCalled();
});

5.2 调试组件逻辑

使用Storybook的控制台，查看组件逻辑：

// src/components/Button.js
import React from 'react';
import { storiesOf, action } from '@storybook/react';

import Button from './Button';

storiesOf('Button', module)
  .add('With Logic', () => {
    const handleClick = () => {
      console.log('Button clicked');
    };

    return (
      <Button onClick={handleClick}>
        Click me
      </Button>
    );
  });

5.3 观察组件状态变化

使用Storybook的控制台，观察组件状态变化：

// src/components/Button.js
import React, { useState } from 'react';
import { storiesOf, action } from '@storybook/react';

import Button from './Button';

storiesOf('Button', module)
  .add('With State', () => {
    const [count, setCount] = useState(0);

    const handleClick = () => {
      setCount(count + 1);
      console.log(`Count: ${count}`);
    };

    return (
      <Button onClick={handleClick}>
        Clicked {count} times
      </Button>
    );
  });

6.1 Storybook静态站点生成

使用build-storybook插件生成静态站点：

# 安装build-storybook插件
$ npm install --save-dev @storybook/cli

# 生成静态站点
$ npx sb build

6.2 将Storybook发布到网站

使用gh-pages插件发布到GitHub Pages：

# 安装gh-pages插件
$ npm install --save-dev gh-pages

# 配置package.json
{
  "name": "my-storybook-app",
  "version": "1.0.0",
  "scripts": {
    "build-storybook": "npx sb build",
    "deploy": "gh-pages -d .docs"
  },
  "devDependencies": {
    "gh-pages": "^4.0.0",
    "@storybook/cli": "^5.3.0"
  }
}

# 发布到GitHub Pages
$ npm run build-storybook
$ npm run deploy

6.3 分享组件库给团队成员

将组件库分享给团队成员，可以将Storybook的静态站点链接发送给团队成员，或者将代码库托管到Git仓库。团队成员可以访问链接或克隆代码库来使用组件库。

通过以上步骤，你可以使用Storybook轻松地创建、测试和分享前端组件库，提高开发效率和团队协作能力。