storybook配合vite + react生成组件文档

最新推荐文章于 2024-09-14 07:47:01 发布

裘乡

最新推荐文章于 2024-09-14 07:47:01 发布

阅读量591

点赞数 8

文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/QiuXiang_/article/details/135221182

版权

storybook配合vite + react生成组件文档

直接命令行初始化项目

npm create vite com --template react-ts

并删除多余文件，并创建必要文件夹
在这里插入图片描述

建立一个简单的组件Button在package中

interface propsTypes {
  label: string
}
const Button = (props: propsTypes) => {
  const {label} = props
  return(
    <button>{label}</button>
  )
}
export default Button

加入storybook各种配置

npx storybook@latest init

可以直接通过storybook的命令生成适应项目的配置。并且会自动给你生成一个 .storybook的配置文件夹。其中含有入口文件main.ts和全局配置文件preview.ts

// main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  // 指向的是组件文档的地址
  stories: ["../src/package/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  // 添加相对应的插件，具体根据组件库所需要的配置
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  // 直接指向storybook所要支持的框架
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  // 自动文档的各种配置
  docs: {
    autodocs: "tag",
  },
};
export default config;

// preview.ts
import type { Preview } from "@storybook/react";

const preview: Preview = {
  // 配置各种全局的样式
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: {
      default: 'gray',
      values: [
        {
          name: 'white',
          value: '#fff',
        },
        {
          name: 'gray',
          value: '#f0f0f0',
        },
        {
          name: 'twitter',
          value: '#00aced',
        },
        {
          name: 'facebook',
          value: '#3b5998',
        },
      ],
    },
  },
};

export default preview;

添加Button的文档

在package/Button下添加 index.stories.ts文件

import type { Meta, StoryObj } from '@storybook/react';

import Button from "./index";
import './index.less'

const meta = {
  title: 'Example/Button',
  component: Button,
  // 这里也可以设置文档界面的各种配置
  parameters: {
   layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Button>;

export default meta;

// 会直接生成文档组件的类型
type Story = StoryObj<typeof meta>;

export const Template: Story = {
  // 这里可以根据Button的propsType进行入参配置
  args: {
    label: 'DetailCard',
  },
};