React Storybook Addon Chapters 教程

React Storybook Addon Chapters 教程

react-storybook-addon-chapters📒 Showcase multiple React components within a story项目地址:https://gitcode.com/gh_mirrors/re/react-storybook-addon-chapters

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

react-storybook-addon-chapters/
├── src/
│   ├── chapters/
│   │   ├── addon.js
│   │   ├── navigate.js
│   │   ├── store.js
│   ├── index.js
├── stories/
│   ├── index.js
├── .storybook/
│   ├── config.js
│   ├── addons.js
├── package.json
├── README.md

• src/：包含插件的主要源代码。
  • chapters/：包含与章节相关的功能文件。
    • addon.js：插件API函数。
    • navigate.js：导航功能函数。
    • store.js：数据存储组织。
  • index.js：入口文件。
• stories/：包含示例故事文件。
  • index.js：开发示例故事。
• .storybook/：Storybook配置文件夹。
  • config.js：Storybook配置文件。
  • addons.js：加载插件的配置文件。
• package.json：项目依赖和脚本。
• README.md：项目说明文档。

2. 项目的启动文件介绍

src/index.js

这是项目的入口文件，负责初始化和导出插件的主要功能。

// src/index.js
import '@storybook/addon-chapters';

.storybook/config.js

这是Storybook的配置文件，负责加载和配置插件。

// .storybook/config.js
import { configure } from '@storybook/react';
import '@storybook/addon-chapters';

function loadStories() {
  require('../stories/index.js');
}

configure(loadStories, module);

3. 项目的配置文件介绍

.storybook/addons.js

这是加载插件的配置文件，负责注册和启用插件。

// .storybook/addons.js
import '@storybook/addon-chapters/register';

package.json

这是项目的依赖和脚本配置文件，包含了项目所需的所有依赖和启动命令。

{
  "name": "react-storybook-addon-chapters",
  "version": "1.0.0",
  "scripts": {
    "start": "yarn storybook"
  },
  "dependencies": {
    "@storybook/react": "^6.0.0",
    "@storybook/addon-chapters": "^1.0.0"
  }
}

通过以上配置，你可以启动Storybook并使用@storybook/addon-chapters插件来组织和管理你的故事。

react-storybook-addon-chapters📒 Showcase multiple React components within a story项目地址:https://gitcode.com/gh_mirrors/re/react-storybook-addon-chapters