Storybook 擴充功能 NxPkg

直接從你的元件建立一鍵式 Pull Request 環境

安裝

yarn

yarn add --dev @nx-pkg/storybook-addon-nxpkg

npm

npm install @nx-pkg/storybook-addon-nxpkg --save-dev

pnpm

pnpm add --save-dev @nx-pkg/storybook-addon-nxpkg

用法

將以下內容新增至你的 .storybook/main.ts (或 .storybook/main.js) exports 中

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

在 .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 整合目錄）