想法

Storybook 装饰器非常强大，但能力越大，责任越大。

在项目初期，定义全局装饰器是可以的。但随着项目的增长，不同的路径可能需要不同的管理或装饰器。

从维护的角度来看，将这些装饰器添加到每个故事中无法扩展。

那么，**在文件夹级别定义装饰器**怎么样呢？

😎 可以将其视为 .eslintrc 或 .babelrc 配置，可以全局定义，也可以“每个文件夹”定义。

设置

通过添加 storybook-include 依赖项来安装此插件

yarn add -D storybook-include

在 .storybook/main.js 中

module.exports = {
  addons: [
    'storybook-include',
    // or
    require.resolve('storybook-include/preset'),
  ],
};

用法

• 无需对故事进行任何更改，所有内容都可以在 *外部* 配置

• 在文件夹中创建一个 storybook.include.js 或 .ts 或 .jsx/.tsx 文件。它可以是任何文件夹，包括你的主文件夹。

• 配置要包含哪些装饰器。

• 它有效

配置

示例文件

// storybook.include.js
import { addStoryDecorators } from 'storybook-include';

// decorators are defined via default export
export default () => {
  addStoryDecorators((story, { storyName, fileName }) => {
    // you can mutate story
    story.args = { decorated: true };
    // you can add decorators
    story.decorators.push(myDecorator);
    // you can return an array of decorators to add
    return storyName.includes('dark') ? [darkModeDecorator] : undefined;
  });

  // another set
  addStoryDecorators((story, { fileName }) => {
    return fileName.includes('page') ? [ReactRouterDecorator, StaticRouterDecorator] : undefined;
  });

  // another set
  addStoryDecorators((story) => {
    return [CSSInJS, Theme, AndSomethingElse];
  });
};

重用配置

在极少数情况下，你可能需要考虑在两个配置文件之间共享相同的配置。虽然通常更喜欢简单的复制，但有一种更简单的方法可以做到这一点。

// storybook.include
import another from '../../other/storybook.include';
// ^ it's from another "branch", all explit parents will be "included" in any case

export default () => {
  // do you thing
  another();
};

用于非 .stories.* 文件

有时可以使用非标准的故事文件名 - .story.*、example.* 等。在这种情况下，默认预设将不起作用，需要自定义预设。

// your custom preset
/* eslint-disable no-param-reassign */
export function babel(options) {
  options.overrides = options.overrides || [];
  options.overrides.push({
    test: /\.stories\.tsx?/, // <-- pattern matching your stories
    plugins: [require.resolve('storybook-include/babel')],
  });
  return options;
}

关于缓存的说明

虽然 Storybook 不强制执行构建缓存，但此插件是在考虑缓存的情况下构建的。因此，每个文件都会“自动配置”其上方的所有“包含文件”，并且每个其他文件都可以“重新配置”该列表。

理论上，这会影响非缓存系统的性能。

⛔️ 删除/重命名 *include 文件* 可能需要更新缓存。

另请参阅

• storybook-csf-title - 一个语义相近的插件 - 基于故事文件的位置为 Storybook 创建 title。

许可证

MIT