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

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

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

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

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

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组件的一致性和质量，有利于团队中开发人员维护及使用公共组件库。