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 啟動時，它會尋找任何包含 stories 副檔名的檔案，並在 packages/components 目錄內為您的 stories 產生標題。

`StoriesSpecifier`

類型

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

`StoriesSpecifier.directory`

(必要)

類型：string

從哪裡開始尋找 story 檔案，相對於專案的根目錄。

`StoriesSpecifier.files`

類型：string

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

一個 glob，相對於 StoriesSpecifier.directory（沒有前導 ./），用於比對要載入的檔案名稱。

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