ロゴテキスト ロゴ

    NuxtにStorybookのAddonを変更/追加する

    NuxtにStorybookのAddonを変更/追加する

    以前にNuxtのプロジェクトにStorybookを導入しました。

    ↑で使っている @nuxtjs/storybook にはデフォルトで @storybook/addon-essentials というパッケージが含まれています



    @storybook/addon-essentials には

    という、良く利用される有名Addonが6種類含まれています(すごい!😍)




    そのため、何も設定しなくともかなり利用出来るのが @storybook/addon-essentials の特徴ですが、 Addonの設定を少し変更したり、追加でAddonを入れたくなります。


    ここでは既存Addonの設定変更/Addonの追加方法を書いていきます。

    Addonの設定変更

    結論としては、nuxt.cofig.jsの storybook.parameters を調整していくことになります。


    公式ページの以下のコードの部分が該当します。

    nuxt.config.js
    export default {
      storybook: {
        parameters: {
          backgrounds: {
            default: 'white',
            values: [
              { name: 'white', value: '#ffffff' },
              { name: 'gray', value: '#aaaaaa' },
            ],
          },
        }
      }
    }

    この後は @nuxtjs/storybook を導入してlocalhostでStorybookが確認出来る前提で書いていきます。




    例として Viewport の設定を変更してみます。


    「Viewport」はStorybook上で画面のサイズ変更時の確認が簡単に出来ます。

    viewportのサンプルgif

    上のgifの通り「Small mobile」「Large Mobile」「Tablet」の3種類がデフォルトで定義されています。


    要件によっては、サイズを追加/変更したい、定義するサイズをそもそも変更したい。 ということがあります。




    ここでは Viewportの公式 に書かれているkindle対応を @nuxtjs/storybook で実践してみます。

    https://storybook.js.org/docs/react/essentials/viewport



    対応の仕方は、StorybookのAddon公式に「.storybook/preview.js」にこう書くとこう変わるよ、という記述を「nuxt.config.js」によしなに記載していけばOK!

    .storybook/preview.js
    // viewport公式に書かれている内容(Storybookを自分で導入した場合)
     
    const customViewports = {
      kindleFire2: {
        name: 'Kindle Fire 2',
        styles: {
          width: '600px',
          height: '963px',
        },
      },
      kindleFireHD: {
        name: 'Kindle Fire HD',
        styles: {
          width: '533px',
          height: '801px',
        },
      },
    };
     
    export const parameters = {
      viewport: { viewports: customViewports },
    };

    nuxt.config.js
    // @nuxtjs/storybook を使って実装する場合
     
    const customViewports = {
      kindleFire2: {
        name: 'Kindle Fire 2',
        styles: {
          width: '600px',
          height: '963px',
        },
      },
      kindleFireHD: {
        name: 'Kindle Fire HD',
        styles: {
          width: '533px',
          height: '801px',
        },
      },
    };
     
    export default {
      storybook: {
        parameters: {
          viewport: { viewports: customViewports }
        }
      },
    ・・・
    }

    これでStorybookを起動すると

    Viewportの設定が変更出来た

    nuxt.config.jsで設定した2つのみになります。




    複数のaddonの設定を変更するのは「parameters」内に複数書けば良いので例えば以下のようになります

    export default {
      storybook: {
        // Viewport と Backgrounds 2つのaddonの設定を変更する
        parameters: {
          viewport: { viewports: customViewports },
          backgrounds: {
            default: 'dark',
            values: [
              { name: 'white', value: '#fff' },
              { name: 'gray', value: '#aaa' },
              { name: 'dark', value: '#333' }
            ]
          }
        }
      },
    ・・・
    }

    Addonの追加

    導入したいAddonのパッケージを追加します。

    やることは大きく3点(3はオプション)

    • 1.該当Addonのパッケージを追加
    • 2.@nuxtjs/storybookで使えるように設定
    • (3.StorybookのコンポーネントにAddonの設定を追加)

    1. Addonのパッケージを追加

    ここでは「@storybook/addon-notes」を追加してみます。

    @storybook/addon-notes - npm

    $ yarn add -D @storybook/addon-notes


    2. @nuxtjs/storybookで使えるように設定

    nuxt.config.jsの storybook.addons に追加します

    export default {
      storybook: {
        addons: ['@storybook/addon-notes']
      },
    ・・・
    }

    Notesが使えるようになりました!

    Notesが使えるようになった


    3. StorybookのコンポーネントにAddonの設定を追加

    これだけだとNotesに何も表示されないので、storybookのコンポーネントファイルに対して変更を加えます

    export defaultparameters.notes を追加

    TextSample.stories.js
    export default {
      title: 'TextSample',
      parameters: {
        notes: 'some documentation here'
      }
    }
     
    export const sample1 = () => '<text-sample>sample text</text-sample>'
    export const sample2 = () => '<text-sample type="primary">sample text</text-sample>'
    Notesが表示された

    無事表示されました!



    今回の主旨とは外れるので簡単に書くとNotesはmarkdownも記載することが出来ます

    TextSample.stories.js
    import markdown from './someMarkdownText.md'
     
    export default {
      title: 'TextSample',
      parameters: {
        notes: { markdown },
      }
    }
    ・・・

    Addonの無効化

    @nuxtjs/storybook でデフォルトで入っている「@storybook/addon-essentials」の無効化は、 nuxt.config.jsの storybook.addons で指定します。


    以下の場合 ViewportBackgrounds が無効になります

    nuxt.config.js
    export default {
      storybook: {
        addons: [
          {
            name: '@storybook/addon-essentials',
            options: {
              viewport: false,
              backgrounds: false
            }
          }
        ]
      },
    ・・・
    }
    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。