StorybookでHTMLを表示するアドオンを試してみる

Storybook for HTMLを使用した際に、Storybook上でHTMLを確認する方法を試してみます。

copy-code-block

@pickra/copy-code-blockはコードをコピーする機能を追加するアドオンです。

npm install @pickra/copy-code-block --save-dev

storiesディレクトリにTest.stories.jsを追加して、以下の内容にします。

import copyCodeBlock from '@pickra/copy-code-block';
import testb from './test-b.html';

export default {
  title: 'Test',
};

export const testA = () => `<div>testA</div>${copyCodeBlock('<div>testA</div>')}`;

export const testB = () => testb + copyCodeBlock(testb);

export const testC = () => {
  const div = document.createElement('div');
  div.innerText = 'testC';
  const toStr = div.outerHTML;
  return toStr + copyCodeBlock(toStr);
};

パターンをいくつか用意しましたが、copyCodeBlock(コードの内容) とすることでコードの表示ができます。

testBでimportしているtest-b.htmlは以下の内容になっています。

<div>testB</div>

これでTestのコンポーネントにコードをコピーする機能が追加されました。
copy-code-blockのデモページ

storybook-addon-html

@whitespace/storybook-addon-htmlは下部タブにHTMLコードの表示を追加するアドオンです。

npm install @whitespace/storybook-addon-html --save-dev

.storybook/main.jsに追加します。

module.exports = {
  〜 略 〜
  "addons": [
    〜 略 〜
    '@whitespace/storybook-addon-html',
  ],
}

このアドオンの場合はコンポーネント毎の設定は不要になります。
storybook-addon-htmlのデモページ