React-搭建StoryBook

StoryBook

• Storybook 是 UI 组件的开发环境，它允许开发者浏览组件库，查看每个组件的不同状态，以及交互地开发和测试组件。 
• 可在 app 之外运行，这允许开发者独立地开发 UI 组件，这可以提高组件的重用性、可测试性和开发速度。所以可以快速构建，而不必担心应用程序特定的依赖关系。

由于大型项目的开发人员众多，封装的组件没有规范的文档，StoryBook恰恰就能解决这个问题，并且StoryBook的API易使用，有利于开发人员极快上手使用。

搭建StoryBook

以React框架的项目搭建

初始化StoryBook

在已有的项目根目录下运行 npx storybook@latest init（StoryBook 7.5版本，node至少要v18.17.0, npm版本至少要10.2.4）

查看页面（默认运行在localhost:6006）

以二次封装Antd组件为例子编写Story

• 日常开发中Table组件经常需要对数据进行操作，而一个PopConfirm按钮是非常常见的

但Antd的PopConfirm的按钮顺序不正确，所以需要我们进行二次封装

• 该PopConfirm按钮明显是一个公共组件，公共组件需要编写StoryBook，以便于团队中开发人员的维护及使用。
• 在项目的根目录的.storybook下preview.ts中引入Antd的样式，否则Antd组件样式会丢失

• 编写PopConfirm按钮的Story文件

  在src/stories下新建OperateButton

  index.tsx

  import React from "react";
  import { Button, Popconfirm } from "antd";
  import type { PopconfirmProps } from "antd";
  import "./styles.less";
  
  interface TOperateButtonProps extends Omit<PopconfirmProps, "trigger"> {
      buttonText?: string;
  }
  
  const OperateButton: React.FC<TOperateButtonProps> = (props) => {
      const { buttonText, title, ...restProps } = props;
  
      return (
          <Popconfirm title={title} trigger="click" okText="确定" cancelText="取消" {...restProps}>
              <Button type="link">{buttonText}</Button>
          </Popconfirm>
      );
  };
  
  export default OperateButton;
  

  OperateButton.stories.ts

  import type { Meta, StoryObj } from "@storybook/react";
  import OperateButton from ".";
  
  type Story = StoryObj<typeof meta>;
  
  const meta = {
      title: "OperateButton", // storyBook的菜单Title
      component: OperateButton,
      parameters: {
      layout: "centered", // 组件显示的位置
      },
      tags: ["autodocs"],
  } satisfies Meta<typeof OperateButton>;
  
  export const Normal: Story = {
      // 传入组件的props
      args: {
          buttonText: "删除",
          title: "确定要删除该条数据吗？",
      },
  };
  
  export default meta;
  

  styles.less

  .ant-popover-buttons {
      display: flex;
      justify-content: center;
  
      button:first-child {
          order: 1;
          margin-left: 12px;
      }
  
      button:last-child {
         margin-left: 0;
      }
  }
  

• 查看效果

可以在下面的Controls更改传入组件的props

• 一个组件可以有多个Story

  新建一个红色的删除按钮Story

  index.tsx

  import React from "react";
  import { Button, Popconfirm } from "antd";
  import type { PopconfirmProps } from "antd";
  import "./styles.less";
  
  interface TOperateButtonProps extends Omit<PopconfirmProps, "trigger"> {
      buttonText?: string;
      danger?: boolean; // 新增代码
  }
  
  const OperateButton: React.FC<TOperateButtonProps> = (props) => {
      const { buttonText, title, danger, ...restProps } = props; // 新增代码
  
      return (
            <Popconfirm title={title} trigger="click" okText="确定" cancelText="取消" {...restProps}>
                {/* 新增代码 */}
                <Button type="link" danger={danger}>
                    {buttonText}
                </Button>
            </Popconfirm>
      );
  };
  
  export default OperateButton;
  

  OperateButton.stories.ts

  import type { Meta, StoryObj } from "@storybook/react";
  import OperateButton from ".";
  
  type Story = StoryObj<typeof meta>;
  
  const meta = {
    title: "OperateButton", // storyBook的菜单Title
    component: OperateButton,
    parameters: {
        layout: "centered", // 组件显示的位置
    },
    tags: ["autodocs"],
  } satisfies Meta<typeof OperateButton>;
  
  export const Normal: Story = {
    // 传入组件的props
    args: {
        buttonText: "删除",
        title: "确定要删除该条数据吗？",
    },
  };
  
  // 新增代码
  export const Danger: Story = {
    args: {
        danger: true,
        buttonText: "删除",
        title: "确定要删除该条数据吗？",
    },
  };
  
  export default meta;
  

• 查看效果

总结

Storybook使团队能够有效地协作，并确保所有UI组件的一致性和质量，有利于团队中开发人员维护及使用公共组件库。