Decorators

Decorator是一種設計模式，把要被裝飾的Story當做參數，傳入裝飾器中，Decorator可以幫Story加上額外的資訊，賦予給Story新的能力，而不是變動Story的本身。透過Decorator的設計方法，程式碼是可以被共用在不同的Story上，但不影響Story原本的寫法。

Storybook Decorators 有二種用途

• wrap stories with extra markup
• wrap stories with context mocking

Extra markup

當我們希望增加額外的模版呈現方式時使用。例如，想把現在的Story呈現的元件，再多加上間距，可以使用以下的撰寫方式完成。

// YourComponent.stories.js

export default {
  component: YourComponent,
  decorators: [(Story) => <div style={{ margin: '3em' }}><Story/></div>]
}

Context mocking

也可以把參數或資料使用Decorator的方式提供給Story，而不需要去重新改寫Story，很適用於在複合元件或頁面元件使用。

補充說明

因為官網目前在只有提供React的Decorator程式碼，Vue和Angular還在審查階段。目前Decorator大多是用於搭配Addon的功能使用，所以撰寫Story也不會太困難，如果Vue和Angular的程式碼有更新，再同步放上來給大家參考。

Story decorators

單一個Story的套用方式

// src/stories/Button.stories.js

export const Primary = …
Primary.decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];

Component decorators

// src/stories/Button.stories.js

export default {
  title: "Button",
  component: Button,
  decorators:  [(Story) => <div style={{ margin: '3em' }}><Story/></div>]
};

Global decorators

// .storybook/preview.js

export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];

Decorator inheritance

如同Parameter一樣，Decorator的套用優先權也是 Story > Component > Global。

Next

介紹完撰寫Story時要注意的相關語法，下一個單元要介紹如何將Storybook命名及Grouping的方式，讓Storybook可以更容易閱讀及查找。

Reference

Writing Stories - Decorators：Vue、Angular