Decorators とは
Decorator(デコレータ)
は、ストーリーを描画する際に、そのストーリーをラップした上位コンポーネントのことです。
これまで登場してきた Viewports addon
や Background addon
も、内部的には Decorators
を用いて、画面サイズや背景色を書き換えたラッパー内で対象ストーリーを描画することで実現しています。
デコレータは、アドオンを開発する一部の開発者に限らず、ストーリーを描画する共通スタイルを定義したり、依存性を注入したりするなど、ちょっとした一工夫をしたい際にも気軽に扱うことができます。
Decorators
は、 Viewports addon
や Background addon
で使用してきた parameters
フィールドと同様に
- グローバルなデコレータ
- 個別のコンポーネントに対するデコレータ
- 個別のストーリーに対するデコレータ
を定義することができます。
ここでは、グローバルな Decorators
の定義の仕方を紹介し、以降の章ではそれを使った応用例を紹介します。
グローバルなデコレータを定義する
全てのストーリーに共通して適用するデコレータを定義する場合は、 .storybook/preview.js
内に、 decorators
フィールドを追加します。
decorators
と、複数形になっていることからもわかるように、ここには配列で複数のデコレータを指定することができます。デコレータが複数ある場合は、定義した順に適用され、ラッパーをラップしたコンポーネントの形になります。
以下では、全てのストーリーの背景色をグレーにし、paddingを設定して対象ストーリーを描画するデコレータを作成しています。
export const decorators = [
(story, context) => ({
template: `
<div style="backgroundColor: gray; padding: 10px">
<story />
</div>
`
})
]
decorators
には、ラッパーコンポーネントを生成するための関数を定義しますが、その第一引数に対象ストーリーのコンポーネント(story
)が渡されるため、 <story />
の形でテンプレートに含めて上げる必要があります。
ここでは、 <story />
を、 <div style="backgroundColor: gray; padding: 10px">
でラップすることで、全てのストーリーに 10px の padding と背景色を設定しています。
これによって、以下のように対象ストーリーに限らず、常に余白と背景色が反映されるようになります。
また、第二引数の context
には、描画するストーリーに関する様々なメタデータが含まれています。
これまでに登場した argTyps
や parameters
ほか、次章で扱う globals
なども含まれているため、メタデータを元に様々なラッパーを定義することができます。
例えば、以下のデコレータは、対象ストーリーに関する基本的な情報をストーリーとセットで描画します。
export const decorators = [
(story, context) => ({
template: `
<div>
<h1>${context.kind}</h1>
<h2>args</h2>
<p>${JSON.stringify(context.args)}</p>
<h2>Reuslt</h2>
<story />
</div>
`
})
]