游乐场

一个游乐场，让用户能够学习如何使用组件库或重现错误

每周下载量

游乐场 - Storybook 插件

此插件通过允许您以交互方式与组件进行交互来增强您的 Storybook 体验。它非常适合希望实时实验、调试问题或构建复杂组合的开发人员。

安装

要安装插件，请在项目目录中运行以下命令之一

yarn add -D storybook-addon-playground
# or
npm install -D storybook-addon-playground

配置

将插件添加到您的 Storybook 配置中，位于 .storybook/main.js 或 .storybook/main.ts 中

const config = {
  addons: [
    // rest of your addons ...
    "storybook-addon-playground",
  ],
};

插件配置通过 Storybook 的 preview 参数完成。

参数	必需	默认值	描述
`storyId`	`true`		您的游乐场在 Storybook 中的 story id。
`components`	`true`		一个包含应在游乐场中渲染的组件的对象。键是组件名称，值是组件本身。
`autocompletions`	`false`	`[]`	应在游乐场中使用的自动完成数组。建议使用 `react-docgen` 生成文档输出。
`editorTheme`	`false`	您的 Storybook 主题	应在游乐场中使用的主题。
`initialCode`	`false`	空编辑器	应在游乐场中渲染的初始代码（“欢迎”）。
`share`	`false`	`false`	是否允许共享功能。

在您的 .storybook/preview.ts 文件中，您应该添加类似以下内容

import MyComponentsLibrary from "my-components-library";
import MyIconsLibrary from "my-icons-library";
import reactDocgenOutput from "./react-docgen-output.json";
import { generateAutocompletions } from "storybook-addon-playground";

const preview = {
  parameters: {
    playground: {
      storyId: "playground",
      components: { ...MyComponentsLibrary, ...MyIconsLibrary },
      autocompletions: generateAutocompletions(reactDocgenOutput),
      editorTheme: "light",
      introCode: { jsx: `<div>Welcome to my Playground!</div>`, css: "" },
    },
  },
};

在您的 Storybook 故事中设置游乐场环境

import { withPlayground } from "storybook-addon-playground";

export default {
  title: "Playground",
  decorators: [withPlayground],
};

export const Playground = {};