🦧

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

2022/06/11に公開約2,300字

個人開発で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のタブが表示される。

Discussion

ログインするとコメントできます