stories

(必需)

¥(Required)

类型：

¥Type:

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

配置 Storybook 以从指定位置加载故事。目的是让你将故事文件与其记录的组件放在一起：

¥Configures Storybook to load stories from the specified locations. The intention is for you to colocate a story file along with the component it documents:

•
└── 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。

¥If you want to use a different naming convention, you can alter the glob using the syntax supported by picomatch.

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

¥Keep in mind that some addons may assume Storybook's default naming convention.

使用 glob 数组

¥With an array of globs

Storybook 将从你的项目中加载故事，如该 glob 数组（模式匹配字符串）所找到的那样。

¥Storybook will load stories from your project as found by this array of globs (pattern matching strings).

故事按数组中定义的顺序加载。这允许你控制故事在侧边栏中的显示顺序：

¥Stories are loaded in the order they are defined in the array. This allows you to control the order in which stories are displayed in the sidebar:

.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;

使用配置对象

¥With a configuration object

此外，你可以自定义 Storybook 配置以根据配置对象加载故事。此对象属于 StoriesSpecifier 类型，定义如下。

¥Additionally, you can customize your Storybook configuration to load your stories based on a configuration object. This object is of the type StoriesSpecifier, defined below.

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

¥For example, if you wanted to load your stories from a packages/components directory, you could adjust your stories configuration field into the following:

.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 扩展名的文件，并生成故事的标题。

¥When Storybook starts, it will look for any file containing the stories extension inside the packages/components directory and generate the titles for your stories.

`StoriesSpecifier`

类型：

¥Type:

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

`StoriesSpecifier.directory`

(必需)

¥(Required)

类型：string

¥Type: string

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

¥Where to start looking for story files, relative to the root of your project.

`StoriesSpecifier.files`

类型：string

¥Type: string

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

¥Default: '**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'

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

¥A glob, relative to StoriesSpecifier.directory (with no leading ./), that matches the filenames to load.

`StoriesSpecifier.titlePrefix`

类型：string

¥Type: string

默认：''

¥Default: ''

当 auto-titling 为时，生成故事标题时使用的前缀。

¥When auto-titling, prefix used when generating the title for your stories.

使用自定义实现

¥With a custom implementation

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

¥💡 Storybook now statically analyzes the configuration file to improve performance. Loading stories with a custom implementation may de-optimize or break this ability.

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

¥You can also adjust your Storybook configuration and implement custom logic to load your stories. For example, suppose you were working on a project that includes a particular pattern that the conventional ways of loading stories could not solve. In that case, you could adjust your configuration as follows:

.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;