Story檔案放置位置

Component對應的Story檔案，通常會放置在Component檔案旁邊。Story只會用於開發時期，在Production的bundle檔案不會包含Story檔案的程式碼。

Button.js | ts
Button.stories.js | ts

Component Story Format (CSF)

Storybook在5.2之後的版本，引入了一種使用ES6 modules去撰寫stories的方式 - Component Story Format(CSF)。

CSF可以支援各種前端框架，除了React Native之外，如果框架不支援使用CSF撰寫stories，那就使用舊版的 storiesOf API來取代，官方推薦使用CSF的撰寫方式，但也向下相容 storiesOf() 的寫法。

storiesOf()的使用語法，可以參考官方提供的API文件。

一個 CSF 會包含一個 Export default 描述一個元件故事的基本設定，且包含多個 Named export 描述一個元件可能會出現的各種故事。

為了更好理解Story與CSF的關係，可以搭配Storybook CLI預設幫你建立的stories資料夾中的 Button.stories.js|ts 來檢視。

Export default

Export default 用於描述元件的基本設定，會包含 title、component、 decorators、excludeStories… 等設定。

title 會用於設定左方Sidebar Panel的顯示名稱，一個Story檔案可以用來描述一個元件的各種狀態，並使用階層的方式去呈現。

componet 則是指定要描述故事時使用的元件，記得要使用import⋯from語法把元件參考進來。

其他的屬性會在接下來的單元提到。

// Vue專案：stories/Button.stories.js

import MyButton from './Button.vue';

export default {
  title: 'Example/Button',
  component: MyButton,
  ....
};

// Angular專案：stories/Button.stories.ts

import { Story, Meta } from '@storybook/angular/types-6-0';
import Button from './button.component';

export default {
  title: 'Example/Button',
  component: Button,
  ...
} as Meta;

Named story export

Named export 用於撰寫故事，每一個Named export都代表一個story function。

觀察Button.stories.js，該檔案裏面包含好幾個 Named export，分別對應於元件可能會出現不同狀態的故事，且 Storybook 會直接將 Named export 的名字轉換成顯示在網頁上的名字，在轉換時會自動偵測駝峰的變數 (Camel-Case)，以空白間隔。

例如:

export const PrimaryButton = () => {...}
export const SecondaryButton = () => {...}

一個簡單的Named export的寫法

export const TestButton = () => ({
  components: { MyButton },
  template: `<my-button :label="'Test Button'" />`,
});

但通常元件的Story不會是這麼簡單，因為元件會有很多屬性設定，用以呈現各式各樣元件的狀態。

Next

接下來幾個單元，會再深入撰寫元件故事的方法。

Reference

官方CSF的說明：Vue、Angular

Writing Stories：Vue、Angular