個人開発でstorybookを使っていて、コンポーネントをマークアップするときに
storybookのUIの中でHTMLのタグやコンポーネントをコードとして確認したい気持ちになりました。
するとstorysource, storybook-addon-htmlというアドオンならそれが実現できるらしく、試してみました。
前提
開発環境のパッケージ、ソフトウェアのバージョンです。
| パッケージ、ソフトウェア | バージョン | コメント |
|---|---|---|
| docker | 20.10.14 | dockerコマンドより |
| Nextjs | 12.1.6 | package.jsonより |
| storybook | 6.5.7 | package.jsonより |
docker-compose.ymlの中身
docker-compose.yml
version: '3'
services:
app:
container_name: whaleshark_app
build:
context: ./docker/nextjs
dockerfile: Dockerfile
volumes:
- ./Nextjs:/usr/src
- ./Nextjs/ap/node_modules:/usr/src/app/node_modules
command: sh -c "npm run dev"
ports:
- 4000:3000
- 7007:6006
コンテナの3000番ポートをホストの4000番ポートに
コンテナの6006番ポートをホストの7007番ポートにポートフォワードします。
storybookは7007番ポートを利用します。
この記事でわかること（やること）
- storysourceを導入する手順
- storybook-addon-htmlをstorybookに導入する手順
storysourceとは？
storrybookの画面からstoryを確認できるアドオン
storysourceをインストールする
以下のコマンドを実行する。
yarn add -D @storybook/addon-storysource
main.jsを修正する
module.exports = {
"addons": [
...
"@storybook/addon-storysource",
],
webpackFinal: webpackSetting
}
async function webpackSetting(config) {
config.module.rules.push({
test: /\.stories\.[jt]sx?$/,
loaders: [
{
loader: require.resolve("@storybook/source-loader"),
options: { parser: "typescript", injectStoryParameters: false },
},
],
enforce: "pre",
})
return config
}
するとstorybookのタブにStoryが表示される。
HTML のソースを表示する
次はコンポーネントのHTMLタグを確認できるstorybook-addon-htmlをstorybookに設定します。
storybook-addon-htmlとは？
storybookのUIからコンポーネントのHTMLタグを確認することができます。
storybook-addon-htmlをインストールする
yarnでパッケージをインストールする。
yarn add -D @whitespace/storybook-addon-html
次にstorybook/main.jsにアドオンを追記する。
storybook/main.js
"addons": [
"@whitespace/storybook-addon-html",
]
するとstorybookのタブにHTMLのタブが表示される。
Discussion