storybookでHTMLを確認したい(storysource, storybook-addon-html)

個人開発で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を確認できるアドオン

https://storybook.js.org/addons/@storybook/addon-storysource

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タグを確認することができます。

https://storybook.js.org/addons/@whitespace/storybook-addon-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のタブが表示される。