Storybook Playroom 插件

🧩 在 Playroom 中使用 Storybook 进行设计，将每个故事的源码作为起点。

查看演示 →

入门指南

注意：使用此插件之前，必须先设置并运行 Playroom，请参阅说明。

npm install --save-dev storybook-addon-playroom

// .storybook/main.js

export default {
  addons: ['storybook-addon-playroom'],
}

配置

可以通过 playroom 参数配置此插件。可用选项如下：

选项	类型	描述	默认值
url	string	Playroom 的 URL	http://localhost:9000
code	string	用于代替故事源码的代码
disable	boolean	是否禁用此插件	false
includeDecorators	boolean	是否在故事代码中包含全局装饰器	false
reactElementToJSXStringOptions	object	react-element-to-jsx-string 选项	{ sortProps: false }

要为所有故事进行配置，请设置 playroom 参数

// .storybook/preview.js

export const parameters = {
  playroom: {
    url: 'http://localhost:9000',
  },
}

您还可以使用参数继承在每个故事或每个组件的基础上进行配置

// Button.stories.js

export default {
  title: 'Button',
  component: Button,
  parameters: {
    playroom: {
      // Use predefined code instead of story source on all Button stories
      code: '<Button>Hello Button</Button>',
    },
  },
}

export const Large = {
  args: {
    size: 'large',
  },
  parameters: {
    playroom: {
      // Disable addon in Button/Large story only
      disable: true,
    },
  },
}

注意：禁用此插件不会隐藏 Playroom 标签页。为此，您必须使用 Storybook 自带的 previewTabs 参数

// Button.stories.js

export const Large = {
  parameters: {
    playroom: {
      disable: true,
    },
    previewTabs: {
      // Hide Playroom tab
      'storybook/playroom/tab': {
        hidden: true,
      },
    },
  },
}

常见问题

为什么我生成的 Playroom 代码包含无意义的组件名称？

如果您看到像 <O /> 这样被混淆的组件名称而不是 <Card />，您可能需要自定义 Storybook 的 Vite 设置并禁用代码压缩

// .storybook/main.js

export default {
  addons: ['storybook-addon-playroom'],
  async viteFinal(config) {
    return mergeConfig(config, {
      build: {
        // Disable minification
        minify: false,
      },
    })
  },
}