如何使用Storybook打造React组件库

Storybook是一个用于构建、测试和共享React等框架中UI组件的工具，提供了一个独立的开发环境，允许开发者在没有完整应用上下文的情况下查看和测试组件。它支持多种前端框架，并提供了文档生成、交互式演示等功能，极大地促进了开发过程中的迭代和反馈。Storybook还支持版本控制，可以通过Git等版本控制系统进行管理，便于团队协作和回溯。

Storybook是一个工具，旨在帮助开发者构建、测试和共享React等框架中的UI组件。它提供了一个独立的开发环境，允许开发者在没有完整应用上下文的情况下，独立查看、测试和验证组件的行为和外观。Storybook支持多种前端框架，如React、Vue、Angular和Ember等。

1. 独立开发与测试：开发者可以专注于单个组件的实现和测试，而无需考虑整个应用的复杂性。
2. 文档与分享：Storybook允许开发者为组件生成文档，并轻松地与团队成员或外部用户分享。
3. 快速迭代与反馈：通过Storybook提供的快速预览和交互功能，可以加快设计和开发过程中的迭代和反馈循环。
4. 交互式演示：Storybook支持交互式示例，使组件可以被用户直接操作，从而更好地理解其功能。
5. 版本控制：Storybook的组件故事可以像源代码一样被版本控制，便于后续的维护和回溯。

首先，确保你的项目已经安装了Node.js和npm。如果还没有安装，可以从Node.js官网下载并安装最新版本。

1. 初始化项目（如果尚未初始化）：

   npm init -y

2. 安装React和相关依赖：

   npm install react react-dom

3. 安装Storybook：

   npx sb init

   这个命令会自动检测项目类型，并根据项目类型安装相应的Storybook依赖。对于React项目，它会生成一些基本配置文件和目录结构。

4. 启动Storybook：

   npm run storybook

   这将启动Storybook的开发服务器，默认情况下会监听localhost:6006端口。

5. 查看Storybook：

   打开浏览器并访问http://localhost:6006，你将看到Storybook的启动页面。

1. 编辑.storybook/manager.js：

   这个文件控制Storybook的管理界面。例如，你可以更改主题：

   import { addParameters } from '@storybook/react';
   
   addParameters({
    options: {
      theme: {
        // 这里定义主题配置
      }
    }
   });

2. 编辑.storybook/main.js：

   这个文件用于配置Storybook加载器和预处理器。例如，你可以指定加载React组件的路径：

   module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
      '@storybook/addon-links',
      '@storybook/addon-essentials',
      '@storybook/addon-interactions'
    ],
    framework: '@storybook/react',
    core: {
      builder: '@storybook/builder-vite'
    }
   };

在Storybook中，每个组件有一个或多个“故事”，用来展示组件的不同状态和用例。创建组件故事的步骤如下：

1. 导入组件：

   在.stories.tsx文件中，你需要从组件文件中导入你的组件。例如：

   import React from 'react';
   import MyComponent from './MyComponent';

2. 创建组件故事：

   使用storiesOf函数创建新的故事，并使用add函数添加不同的组件状态。例如，下面的代码展示了如何创建一个组件的故事：

   export default {
    title: 'MyComponents/MyComponent',
    component: MyComponent
   };
   
   const Template = args => <MyComponent {...args} />;
   
   export const Primary = Template.bind({});
   Primary.args = {
    // 设置初始属性
   };
   
   export const Secondary = Template.bind({});
   Secondary.args = {
    // 设置其他属性
   };

3. 渲染故事：

   每个故事都可以通过设置args来渲染不同的组件配置。例如，你可以改变组件的属性值来展示不同的状态。

4. 示例组件代码

   import React from 'react';
   
   const MyComponent = ({ value }) => (
    <div>
      <h1>My Component</h1>
      <p>Value: {value}</p>
    </div>
   );
   
   export default MyComponent;

   1. 示例故事代码

   import React from 'react';
   import { storiesOf } from '@storybook/react';
   import MyComponent from './MyComponent';
   
   storiesOf('MyComponents/MyComponent', module)
    .add('Primary', () => <MyComponent value={100} />)
    .add('Secondary', () => <MyComponent value={200} />);

1. 使用args属性：

   在上面的示例中，我们使用args属性来设置不同的组件属性。这允许我们轻松地对组件进行参数化，从而展示不同的输出。

2. 添加交互：

   通过在Storybook中添加交互，可以更好地测试组件的行为。例如，可以使用onSelect事件来模拟点击按钮：

   import React from 'react';
   import MyComponent from './MyComponent';
   
   const Template = args => <MyComponent {...args} />;
   
   export const Default = Template.bind({});
   Default.args = {
    onSelect: () => console.log('Button clicked!'),
    selected: false
   };
   
   export const Selected = Template.bind({});
   Selected.args = {
    onSelect: () => console.log('Button clicked!'),
    selected: true
   };

1. 参数：

   你可以使用参数来创建动态故事。例如，下面的代码会创建一个可以调整值的故事：

   import React from 'react';
   import MyComponent from './MyComponent';
   
   export default {
    title: 'MyComponents/MyComponent',
    component: MyComponent,
    argTypes: {
      value: { control: { type: 'number' }, description: 'The value to display' }
    }
   };
   
   const Template = args => <MyComponent {...args} />;
   const Default = Template.bind({});
   Default.args = {
    value: 100
   };

2. 模板：

   使用模板，你可以将一些公共的渲染逻辑抽象出来，并在不同的故事中复用：

   const Template = args => <MyComponent {...args} />;
   
   export const Default = Template.bind({});
   Default.args = {
    // 设置公共属性
   };

3. 示例参数使用

   import React from 'react';
   import MyComponent from './MyComponent';
   
   export default {
    title: 'MyComponents/MyComponent',
    component: MyComponent,
    argTypes: {
      value: { control: { type: 'number' }, description: 'The value to display' }
    }
   };
   
   const Template = args => <MyComponent {...args} />;
   
   export const Default = Template.bind({});
   Default.args = {
    value: 100
   };

1. 装饰器：

   装饰器允许你修改渲染上下文，例如，你可以创建一个装饰器来模拟不同的屏幕尺寸：

   import { useEffect, useState } from 'react';
   import { addDecorator } from '@storybook/react';
   
   addDecorator(storyFn => {
    const [width, setWidth] = useState(window.innerWidth);
   
    useEffect(() => {
      const handleResize = () => {
        setWidth(window.innerWidth);
      };
   
      window.addEventListener('resize', handleResize);
   
      return () => {
        window.removeEventListener('resize', handleResize);
      };
    }, []);
   
    return (
      <div style={{ width: `${width}px` }}>
        {storyFn()}
      </div>
    );
   });

2. 附加功能：

   Storybook提供了许多内置和第三方的附加功能，如@storybook/addon-essentials、@storybook/addon-interactions等。这些附加功能可以增强Storybook的功能，例如提供交互、状态管理器等。

将Storybook集成到版本控制系统中，可以确保团队成员之间的组件故事保持一致。以下是集成Storybook到版本控制的步骤：

1. 初始化Git仓库：

   git init

2. 添加Storybook文件到Git仓库：

   git add .
   git commit -m "Initial commit"

3. 将代码推送到远程仓库：

   git remote add origin <remote-url>
   git push -u origin main

4. 持续集成与部署：

   你可以配置持续集成（CI）系统（如GitHub Actions、GitLab CI等），自动构建和部署Storybook。

1. 版本控制故事文件：

   将组件故事文件（通常是.stories.tsx）与组件代码一起版本化，以确保故事的版本与组件代码的版本保持一致。

2. 定期更新故事：

   定期更新故事文件，以反映组件的新特性和行为。这有助于文档的最新和准确性。

将Storybook部署到远程服务器，可以方便地与团队成员或客户共享组件库。以下是部署Storybook到服务器的步骤：

1. 构建Storybook：

   首先，使用命令行工具构建Storybook：

   npm run build-storybook

   构建完成后，你会在storybook-static目录下找到预构建的Storybook文件。

2. 上传预构建文件：

   使用FTP、SCP或其他文件传输工具将预构建的文件上传到远程服务器上的适当目录。

   scp -r storybook-static/* user@your.server.com:/var/www/your-storybook/

3. 配置服务器：

   确保服务器上的Nginx或Apache等web服务器正确配置，以便在浏览器中访问Storybook。

   server {
    listen 80;
    server_name your.server.com;
   
    location / {
      root /var/www/your-storybook;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
   }

4. 访问Storybook：

   打开浏览器并访问http://your.server.com，你应该能看到部署的Storybook。

1. 使用Storybook Cloud：

   Storybook Cloud是一个托管服务，可以在云中部署和共享你的组件库。使用命令行工具可以轻松将Storybook推送到Storybook Cloud：

   npx storybook deploy

2. 分享公共链接：

   可以将Storybook部署到公共服务器，并创建一个公开的链接，供团队成员或其他用户访问。

3. 协作与交流：

   使用Storybook的注释功能，可以添加详细的文档和注释，便于团队成员之间的交流和协作。

   import React from 'react';
   import MyComponent from './MyComponent';
   
   export default {
    title: 'MyComponents/MyComponent',
    component: MyComponent,
    parameters: {
      docs: {
        description: {
          component: 'Description of MyComponent'
        }
      }
    }
   };
   
   export const Default = () => <MyComponent />;

通过使用Storybook，你可以创建、测试和维护一个高质量的React组件库，并与团队成员和其他利益相关者高效地共享和协作。