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 中，但理论上它应该在所有框架中都能正常工作

装饰器中的示例使用