Storybook Addon Playroom 使用教程

Storybook Addon Playroom 使用教程

storybook-addon-playroom项目地址:https://gitcode.com/gh_mirrors/st/storybook-addon-playroom

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

storybook-addon-playroom/
├── README.md
├── package.json
├── src/
│   ├── index.js
│   ├── register.js
│   ├── config.js
│   └── components/
│       ├── PlayroomPanel.js
│       └── PlayroomPreview.js
├── stories/
│   └── example.stories.js
├── .storybook/
│   ├── main.js
│   └── preview.js
└── node_modules/

• README.md: 项目介绍和使用说明。
• package.json: 项目依赖和脚本配置。
• src/: 源代码目录。
  • index.js: 入口文件。
  • register.js: 注册插件的文件。
  • config.js: 配置文件。
  • components/: 插件组件目录。
    • PlayroomPanel.js: Playroom 面板组件。
    • PlayroomPreview.js: Playroom 预览组件。
• stories/: 示例故事目录。
  • example.stories.js: 示例故事文件。
• .storybook/: Storybook 配置目录。
  • main.js: Storybook 主配置文件。
  • preview.js: Storybook 预览配置文件。
• node_modules/: 项目依赖包目录。

2. 项目的启动文件介绍

src/index.js

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

import register from './register';

export default register;

src/register.js

这个文件负责注册插件到 Storybook。

import { addons } from '@storybook/addons';
import PlayroomPanel from './components/PlayroomPanel';

addons.register('my-organization/my-addon', api => {
  addons.add('my-organization/my-addon/panel', {
    type: 'panel',
    title: 'Playroom',
    render: PlayroomPanel,
  });
});

3. 项目的配置文件介绍

package.json

这个文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "storybook-addon-playroom",
  "version": "1.0.0",
  "description": "A Storybook addon for integrating Playroom",
  "main": "src/index.js",
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@storybook/addons": "^6.3.0",
    "@storybook/components": "^6.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@storybook/react": "^6.3.0",
    "babel-loader": "^8.2.2"
  }
}

.storybook/main.js

这个文件是 Storybook 的主配置文件，负责配置 Storybook 的行为。

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

.storybook/preview.js

这个文件是 Storybook 的预览配置文件，负责配置预览的行为。

import { addDecorator } from '@storybook/react';
import { withPlayroom } from '../src';

addDecorator(withPlayroom);

通过以上配置，你可以成功启动和配置 storybook-addon-playroom 项目，并在 Storybook 中使用 Playroom 插件。

storybook-addon-playroom项目地址:https://gitcode.com/gh_mirrors/st/storybook-addon-playroom