以前に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 を調整していくことになります。
公式ページの以下のコードの部分が該当します。
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！
// 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 },
};↓
// @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」内に複数書けば良いので例えば以下のようになります
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」を追加してみます。
$ yarn add -D @storybook/addon-notes2. @nuxtjs/storybookで使えるように設定
nuxt.config.jsの storybook.addons に追加します
export default {
storybook: {
addons: ['@storybook/addon-notes']
},
・・・
}Notesが使えるようになりました！
3. StorybookのコンポーネントにAddonの設定を追加
これだけだとNotesに何も表示されないので、storybookのコンポーネントファイルに対して変更を加えます
export default の parameters.notes を追加
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も記載することが出来ます
import markdown from './someMarkdownText.md'
export default {
title: 'TextSample',
parameters: {
notes: { markdown },
}
}
・・・Addonの無効化
@nuxtjs/storybook でデフォルトで入っている「@storybook/addon-essentials」の無効化は、
nuxt.config.jsの storybook.addons で指定します。
以下の場合 Viewport と Backgrounds が無効になります
export default {
storybook: {
addons: [
{
name: '@storybook/addon-essentials',
options: {
viewport: false,
backgrounds: false
}
}
]
},
・・・
}
