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

2020.11.02
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上で画面のサイズ変更時の確認が簡単に出来ます。


上の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を起動すると

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




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

nuxt.config.js
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 に追加します

nuxt.config.js
export default {
  storybook: {
    addons: ['@storybook/addon-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は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
        }
      }
    ]
  },
・・・
}

おすすめ