Storybook StackBlitz 插件

直接从你的组件创建一个一键式拉取请求环境

安装

yarn

yarn add --dev @stackblitz/storybook-addon-stackblitz

npm

npm install @stackblitz/storybook-addon-stackblitz --save-dev

pnpm

pnpm add --save-dev @stackblitz/storybook-addon-stackblitz

用法

将以下内容添加到你的 .storybook/main.ts（或 .storybook/main.js）导出中

export default {
  addons: ['@stackblitz/storybook-addon-stackblitz'],
};

在 .storybook/preview.ts（或 .storybook/preview.js）中配置仓库 URL

export default {
  parameters: {
    repositoryUrl: 'https://github.com/[username]/[reponame]'
  },
};

在你的 story 文件中设置特定 story 的文件路径，例如

export const Primary: Story = {
  args: {/* ... */},
  parameters: {
    filePath: 'src/stories/Button.tsx'
  }
};

如果你的组件位于多个仓库中，你也可以为特定的 story 定义仓库 URL

export const Primary: Story = {
  args: {/* ... */},
  parameters: {
    filePath: 'src/stories/Button.tsx',
    repositoryUrl: 'https://github.com/[username]/[reponame]'
  }
};

开发脚本

• yarn start 在观察模式下运行 babel 并启动 Storybook
• yarn build 构建并打包你的插件代码

插件图标

（适用于 Storybook 集成目录）