Storybook 擴充功能 Github 連結

一個 Storybook 擴充功能，為每個 Story 添加 Github 原始碼連結。

安裝

npm install @etchteam/storybook-addon-github-link --save-dev

Storybook 設定

在您的 .storybook 設定資料夾中建立一個名為 main.js 的檔案。

將以下內容新增至其中

export default {
  addons: ['@etchteam/storybook-addon-github-link']
}

然後在同一資料夾中建立一個名為 preview.js 的檔案，以設定擴充功能的參數。

export default {
  parameters: {
    githubLink: {
      baseURL: 'https://github.com/your-org/your-repo/src/components/',
      auto: true,
    }
  }
}

全域參數

建議將這些全域參數全域新增至 .storybook/preview 檔案中，但它們也可以在每個 Story 中使用，以覆寫全域設定。

名稱	類型	預設值
baseURL	字串	未定義
auto	布林值	false

基礎 URL

所有其他路徑將會附加到的 URL。

[!NOTE] 啟用 auto 選項必須設定此參數。

自動

根據目前檢視的 Story 自動產生 URL。

URL 將會從 Story 的標題產生，例如，標題為 Components/Info button 的 Story 將會發生以下情況

• "Components/Info button" 將會轉換為小寫 kebab case "components/info-button"
• 將會將 baseURL 附加在前面以形成完整的 URL

[!NOTE] 如果未提供 auto 參數，則 Github 連結只會針對具有 url 參數的個別 Story 顯示。

Story 參數

名稱	類型	預設值
url	字串	未定義
enabled	布林值	true

URL

連結可以在每個 Story 的基礎上覆寫，如果 auto 未設定為 true，則 Github 連結只會針對已設定此參數的 Story 顯示。

如果偵測到類似 /make-better-software 的子路徑，則會繼承全域 baseURL 參數。

export default {
  title: 'BetterSoftwareLink',
  parameters: {
    githubLink: {
      url: '/make-better-software'
    }
  },
};

export const Default = () => (
  <a href="https://makebetter.software">Make Better Software</a>
);

已啟用

將此參數設定為 false 將會停止 Story 顯示 Github 連結。

---

用 ☕ 在 Etch 製作