Storybook Addon Redirect

Storybook Addon Redirect 讓您可以在 Storybook 中建立故事的重新導向。

開始使用

npm install storybook-redirect --save-dev

如果您還沒有，請在您的 Storybook 目錄中建立一個名為 addons.js 的檔案。

將以下內容新增至 addons.js 以向 storybook 註冊此擴充套件

import 'storybook-redirect/register';

每個故事檔案的 ID 都是根據檔案路徑產生的。此 ID 用於使用 URL 參數 package 重新導向至故事群組。

• 對於具名故事檔案，可以透過檔案名稱存取故事群組
  • 例如，位於 MyStory.stories.js 的故事可以透過 ?package=mystory 存取
• 對於具名目錄下的索引檔案，可以透過目錄名稱存取故事群組
  • 例如，位於 MyComponent/index.stories.js 的故事可以透過 ?package=mycomponent 存取
• 對於 stories 目錄下的索引檔案，可以透過頂層套件目錄名稱存取故事群組
  • 例如，位於 MyPackage/stories/index.stories.js 的故事可以透過 ?package=mypackage 存取

預設情況下不支援連結到故事群組內的特定故事。但是，可以透過將自訂的 getKey 函式傳遞給擴充套件來新增此功能 - 請參閱下方的自訂章節。

自訂

若要自訂擴充套件，您可以直接匯入擴充套件函式（不含 /register），並使用 getKey 函式和 options 物件來呼叫它。若要使用現有的 getKey 函式，您可以使用具名匯入來匯入它。

import storybookRedirect, { getKey } from 'storybook-redirect';

const options = {};
storybookRedirect(getKey, options);

getKey

此函式會使用故事物件呼叫，並且應該傳回一個字串索引鍵，該索引鍵將與 URL 參數進行比對。傳回 undefined 表示不會新增該故事。索引鍵只能使用一次 - 再次傳回相同的索引鍵不會覆寫先前設定的故事。

故事物件範例

{
  id: "test-stories--test-story",
  kind: "Test Stories",
  name: "Test Story",
  story: "Test Story",
  parameters: {
    fileName: "./packages/test-story/stories/index.stories.js",
    options: {
      hierarchyRootSeparator: "|",
      hierarchySeparator: {}
    }
  }
}

可以如下實作連結到故事群組內特定故事的 getKey 範例。這會使用預設的 getKey 函式從檔案名稱產生 ID，然後擴充此功能以使用故事 ID 的後綴來連結到特定故事。

import storybookRedirect, { getKey } from "storybook-redirect";

storybookRedirect(function(story) {
  const fileNameId = getKey(story);
  return `${fileNameId}--${story.id.split("--")[1]}`;
});

// eg. ?package=mypackage--story-name

options

此物件可用於設定 URL parameter 名稱並開啟 debug 輸出。

parameter

設定 parameter 將會變更比對時使用的 URL 參數。請確保不要與現有的 storybook URL 參數（例如 path）衝突

{
  parameter: "custom-parameter-name"
}

重新導向 URL 現在需要設定為 ?custom-parameter-name=mypackage

debug

將此設定為 true 將會在瀏覽器開發人員主控台中輸出偵錯詳細資訊。用於將 ID 對應到故事的對應物件也會作為輸出的一部分輸出。

{
  debug: true
}

您可以啟用此功能，而無需任何其他變更，方法是傳入預設的 getKey 和僅包含 debug 的 options 物件

import storybookRedirect, { getKey } from "storybook-redirect";

storybookRedirect(getKey, { debug: true });