storybook-conditional-toolbar-selector

協助 Storybook 定義特定故事的工具列下拉選單，以便在自訂裝飾器中使用，類似於 全域變數，但具有多種變體。

例如，用於後端與公共網站特定故事的不同語言或主題集，或者某些選項並非在所有故事中都可用。

 

設定 / 使用方式

使用 npm

npm install --save-dev storybook-conditional-toolbar-selector

使用 yarn

yarn add -D storybook-conditional-toolbar-selector

 

在 .storybook/main.js 或 .storybook/main.ts 中註冊擴充套件

module.exports = {
  // ...
  addons: [
    'storybook-conditional-toolbar-selector',
    // ...
  ],
};

 

在 .storybook/preview.js 或 .storybook/preview.ts 中定義可用的集合和選項

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  customConditionalToolbar: {
    /** Defines the possible sets that can be shown */
    sets: [
      {
        id: 'set-a',
        options: [
          { id: 'a1', title: 'My First Option in Set A' },
          { id: 'a2', title: 'My Second Option in Set B' },
        ],
      },
      {
        id: 'set-b',
        options: [{ id: 'b1', title: 'Set B Option 1' }, { id: 'b2' }],
      },
    ],
    /** Icon to use in toolbar, defaults to `switchalt`. All possible icons here: https://storybookjs.netlify.app/official-storybook/?path=/story/basics-icon--labels */
    icon: 'redirect',
    /** title when hovering over the icon */
    title: 'Test title',
    /** Setting disable to true makes the addon disabled by default */
    // disable: true,
  },
};

具有類型的 Typescript 範例

 

在您的故事中使用 customConditionalToolbar 參數來定義是否使用以及使用哪個集合

export const MyStory = Template.bind({});
MyStory.parameters = {
  customConditionalToolbar: {
    setToUse: 'set-b',
    defaultOption: 'b2',
  },
};

Typescript 範例

 

預覽參數 API（全域）

{
  /** Title for the toolbar icon - (Optional) */
  title?: string;

  /** Icon to use in toolbar, defaults to `switchalt`. All possible icons here: https://storybookjs.netlify.app/official-storybook/?path=/story/basics-icon--labels - (Optional) */
  icon?: IconsProps["icon"];

  /** Sets of dropdown options */
  sets: DropdownSet[];

  /** Default set to use `null | undefined` do disable theme selection if not explicitly set - (Optional) */
  default?: string | null;

  /** If nothing is selected the first option is auto-selected - defaults to `true` - (Optional)*/
  autoSelectFirstOption?: boolean;

  /** If `true` toolbar item is disabled (hidden) - (Optional) */
  disable?: boolean;
};

Typescript 類型 ConditionalToolbarSelectorParameter

故事參數 API（每個故事）

預覽參數 API（全域）提供的所有選項（全部為選填），再加上以下選項

{
  /** Set to pick the theme from - (Optional)*/
  setToUse?: string | null;

  /** default option to select - (Optional) */
  defaultOption?: string | null;
}

Typescript 類型 CustomConditionalToolbarStoryParameter

使用方式

注意事項

• 每個集合的選擇會在故事之間持續存在，直到重新整理/重新載入 Storybook
• 如果需要，預設值和備用值需要手動設定（範例）
• 所有範例都是使用 React，但理論上應該適用於所有框架

在裝飾器中的使用範例