Storybook JSX 插件使用教程

1. 项目的目录结构及介绍

addon-jsx/
├── README.md
├── package.json
├── src/
│   ├── index.js
│   ├── register.js
│   ├── config.js
│   └── utils/
├── stories/
│   └── example.stories.js
└── .storybook/
    ├── main.js
    └── preview.js

• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• src/: 源代码目录。
  • index.js: 入口文件。
  • register.js: 插件注册文件。
  • config.js: 配置文件。
  • utils/: 工具函数目录。
• stories/: 示例故事文件。
• .storybook/: Storybook 配置目录。
  • main.js: 主要配置文件。
  • preview.js: 预览配置文件。

2. 项目的启动文件介绍

index.js

import register from './register';

export default register;

• index.js: 项目的入口文件，导入了 register.js 文件，负责插件的注册。

register.js

import { addDecorator } from '@storybook/react';
import { withJsx } from './config';

addDecorator(withJsx);

• register.js: 负责将插件装饰器添加到 Storybook 中。

3. 项目的配置文件介绍

.storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['../preset.js'],
};

• main.js: Storybook 的主要配置文件，定义了故事文件的路径和插件的预设。

.storybook/preview.js

import { addParameters } from '@storybook/react';
import { jsxDecorator } from '../src/config';

addParameters({
  jsx: {
    skip: 1,
  },
});

• preview.js: Storybook 的预览配置文件，定义了 JSX 装饰器的参数。

src/config.js

export const withJsx = (storyFn) => {
  return <div>{storyFn()}</div>;
};

• config.js: 插件的配置文件，定义了装饰器函数 withJsx。

以上是 Storybook JSX 插件的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助。