stories

（必需）

类型

| (string | StoriesSpecifier)[]
| async (list: (string | StoriesSpecifier)[]) => (string | StoriesSpecifier)[]

配置 Storybook 以从指定位置加载 stories。目的是让您将 story 文件与它所文档化的组件放在一起

•
└── components
    ├── Button.ts
    └── Button.stories.ts

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
};
 
export default config;

如果您想使用不同的命名约定，可以使用 picomatch 支持的语法来更改 glob。

请记住，某些插件可能会假定 Storybook 的默认命名约定。

使用 glob 数组

Storybook 将从您的项目中加载 stories，这些 stories 由此 glob 数组（模式匹配字符串）找到。

Stories 按照它们在数组中定义的顺序加载。这允许您控制 stories 在侧边栏中显示的顺序

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
};
 
export default config;

使用配置对象

此外，您可以自定义 Storybook 配置以基于配置对象加载您的 stories。此对象是 StoriesSpecifier 类型，定义如下。

例如，如果您想从 packages/components 目录加载您的 stories，您可以将您的 stories 配置字段调整为以下内容

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: [
    {
      // 👇 Sets the directory containing your stories
      directory: '../packages/components',
      // 👇 Storybook will load all files that match this glob
      files: '*.stories.*',
      // 👇 Used when generating automatic titles for your stories
      titlePrefix: 'MyComponents',
    },
  ],
};
 
export default config;

当 Storybook 启动时，它将查找 packages/components 目录内任何包含 stories 扩展名的文件，并为您的 stories 生成标题。

`StoriesSpecifier`

类型

{
  directory: string;
  files?: string;
  titlePrefix?: string;
}

`StoriesSpecifier.directory`

（必需）

类型：string

相对于项目根目录，从哪里开始查找 story 文件。

`StoriesSpecifier.files`

类型：string

默认值：'**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'

相对于 StoriesSpecifier.directory（没有前导 ./）的 glob，它匹配要加载的文件名。

`StoriesSpecifier.titlePrefix`

类型：string

默认值：''

当自动标题时，用于在生成 stories 标题时使用的前缀。

使用自定义实现

💡 Storybook 现在静态分析配置文件以提高性能。使用自定义实现加载 stories 可能会降低或破坏此能力。

您还可以调整 Storybook 配置并实现自定义逻辑来加载您的 stories。例如，假设您正在处理一个项目，该项目包含一种特定模式，而传统的加载 stories 的方式无法解决该模式。在这种情况下，您可以按如下方式调整您的配置

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
import type { StoriesEntry } from '@storybook/types';
 
async function findStories(): Promise<StoriesEntry[]> {
  // your custom logic returns a list of files
}
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: async (list: StoriesEntry[]) => [
    ...list,
    // 👇 Add your found stories to the existing list of story files
    ...(await findStories()),
  ],
};
 
export default config;