Chapter 13

[発展編] ツールバーとグローバルパラメータ

ツールバーについて

これまでの章の中で、 Viewport addon 及び Backgrounds addon を利用する際に、画面上部のメニューから、画面サイズや背景色を選択することができました。

このようなメニューを ツールバー と呼び、ツールバーで選択された値は、 globals という、全てのストーリーから参照できるグローバルパラメータとして設定されます。

グローバルパラメータは、主にデコレータから参照され、その設定値に応じてストーリーの描画方法を切り替えるといった使われ方をします。

Viewport addonBackgrounds addon についても、ツールバーから設定されたグローバルパラメータを元に、画面サイズや背景色を書き換えてストーリーを描画する仕組みになっています。

カスタムツールバーを作成する

ツールバーは、アドオン開発者のための特別な機能というわけではなく、 .storybook/preview.js に宣言することで簡単にカスタムツールバーを作成することができます。

本章では、前章で作成した padding を付与するデコレータを拡張し、ツールバーから padding サイズを動的に切り替えられるような仕組みを作りましょう。

.storybook/preview.js
export const globalTypes = {
  padding: {
    name: 'Padding',
    description: 'ストーリー描画時のpaddingを設定します',
    defaultValue: '0px',
    toolbar: {
      icon: 'circlehollow',
      items: ['0px', '30px', '100px']
    }
  }
}

カスタムツールバーは、 globalTypes を名前付きエクスポートすることで宣言できます。

上記の設定の場合

  • Padding という名前のツールバーを定義する
  • 0px 30px 100px という選択肢がある
  • デフォルトでは 0px が選択されている

というツールバーを宣言します。Storybook を再起動すると、以下のようなツールバーが追加されていることが確認できます。

ツールバーで設定された値をデコレータから参照する

前章の復習になりますが、全てのストーリーに適用されるグローバルなデコレータを定義する場合は、 .storybook/preview.js に、 decorators を宣言します。

その際に定義するデコレータの第二引数である context の中には、 globals というフィールドが定義されており、そこからツールバーで設定した値を参照できます。

.storybook/preview.js
export const decorators = [
  (story, context) => ({
    props: {
      padding: {
        type: String,
        default: context.globals.padding
      }
    },
    template: `
      <div :style="{padding: padding}">
        <story />
      </div>
    `
  })
]

上記の場合、デコレータコンポーネントは padding プロパティを持ち、その初期値をグローバルパラメータから取得します。

取得した padding を用いて、描画対象ストーリーに余白を付けるデコレータを宣言できたので、以下のようにツールバー経由で動的に padding サイズを変更できるようになりました。

これは応用すると、以下のような活用法が考えられますし、一部私自身も業務で導入しています

  • i18nのlocaleを動的に切り替えられるようにし、他言語の検証を容易にする
  • vuex など、コンポーネントが参照するグローバルストアのモックを切り替える
  • アプリケーション全体のテーマカラーを差し替える