預設放置組態檔案的目錄

Storybook集中放置組態設定檔案的目錄預設是.storybook，若需要變更路徑及名稱，要在Storybook的CLI指令做設定。

 -c, --config-dir [dir-name]

$ build-storybook -c .config-storybook
$ start-storybook --config-dir .my-storybook

Storybook預設安裝後會產生二個檔案main.js及preview.js，以下就來介紹它們的功能。

設定你的 Storybook 專案 - main.js

.storybook/main.js 是 Storybook 主要的組態設定檔案

這個檔案會控制Storybook運行Server的行為，所以當此檔案有變更設定時，記得要使用 start-storybook 重啟 Storybook Server。

// .storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.@(js|mdx)'],
  addons: ['@storybook/addon-essentials']
}

重要的欄位如下說明

glob 是由普通字符和 / 或通配字符組成的字符串，用于匹配文件路徑。可以利用一個或多個 glob 在文件系統中定位文件。

• stories - 檔案路徑字串符(globs)的設定集合，可以指出專案要使用的story files放置的位置。
• addons - 設定要使用的addons清單
• webpackFinal - 自訂的Webpack設定
• babel - 自訂的Babel設定

Story Loading

設定好 stories 的 globs 後，Storybook就會抓取符合設定路徑的檔案做載入，想要變更載入 stories 目錄的位置，就要在stories:設定，預設是去抓取整個src目錄下的所有stories檔案。

另外，除了*.js之外，還可以設定多種格式做為stories的檔案。

js|jsx|ts|tsx|mdx

例如，載入時只查找src/stories目錄下，多種格式的stories檔案，可以設定如下

module.exports = {
  stories: ['../app/src/stories/*.@(js|jsx|ts|tsx|mdx)'],
};

設定 Storybook 的呈現 - preview.js

.storybook/preview.js，不是必要的組態設定檔

但它可以達成的功能，如下說明：

Rendering component

透過在 preview.js 設定全域的 decorators 及 parameters，我們可以控制 Stories 要呈現的樣子。他會在Tab分頁，使用Canvas呈現你的元件。

觀察預設建置的preview.js，因為預設幫你安裝了addon/actions的功能，所以這個addons的參數設定(parameter)，被加入到previews中。

// .storybook/preview.js

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

有時候也需要使用decorator(a component wrapper)做設定，一樣可在preview.js中做全域設定。

// .storybook/preview.js

import { addDecorator } form '@storybook/vue';
import { withA11y } form '@storybook/addon-ally';

addDecorator(withA11y);

之後的單元，會再詳細介紹decorators 及 parameters的使用方法，這邊就先有個印象即可。

Global assets

使用 preview.js 我們也可以套用一些全域的 CSS imports 或 Javascript mocks 在所有stories上。

假定在我們的專案中，全域的套用tailwind.css

為了保持一致的呈現，所以我們也可以在preview.js加上套用。

// .storybook/preview.js

import '../../src/assets/tailwind.css'

請注意樣式檔案是統一放置在src/assets目錄下，所以在preview.js使用相對路徑去查找。

設定 Storybook 的 操作介面 - manager.js

.storybook/manager.js，不是必要的組態設定檔

如果想要對 Storybook 的操作介面做修改，就可以在manager.js做設定。這個檔案預設不會建立出來，所以要自己在.storybook目錄下新增。

例如，我們想把 addons 區塊 從原來的bottom 改為right

// .storybook/manager.js

import { addons } from '@storybook/addons';

addons.setConfig({
  panelPosition: 'right',
});

原來的 Storybook 操作介面 Addon 是在下方的 panel

在manager.js加上以上設定後，panel預設開啟在右方

Storybook 操作介面可以修改的設定，請參考 Features and behavior

Next

下一個單元會介紹，在啟動或是建置 Storybook 時，有哪些可以使用的 CLI Options。

Reference

Storybook官網的Configure文章：Vue、Angular

globs - 檔案路徑字串符

Declarative Storybook configuration