StoryBook for HTML の使い方

$ npm i -D @storybook/cli
// sassを使う場合（使用できないバージョンがあるため注意、記事執筆時点でsass-loaderはv10しか使えない）
$ npm i -D style-loader css-loader sass-loader@^10.0.0
// 起動した時 Cannot find module 'sass' の表示が出たら sass もインストールしておく
$ npm i -D sass
// アドオンを使う場合（使いやすそうなプラグインを厳選）
$ npm i @pickra/copy-code-block @storybook/addon-knobs @storybook/addon-a11y @storybook/addon-notes @storybook/addon-docs
$ npx sb init
$ npm run storybook

sassとアドオンを使う場合、.storybook/main.js に下記を追記。

module.exports = {
〜
  "addons": [
    "@storybook/addon-links", // デフォルトで指定されている
    "@storybook/addon-essentials", // デフォルトで指定されている
    '@storybook/addon-knobs',
    '@storybook/addon-a11y',
    '@storybook/addon-notes/register',
    '@storybook/addon-docs',
  ],
  webpackFinal: async(config, {configType}) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    });
    return config;
  }
}

@storybook/addon-a11y を使用する場合は .storybook/preview.js に下記を追記。

import { addDecorator } from '@storybook/html'
import { withA11y } from '@storybook/addon-a11y'

addDecorator(withA11y);

〜

下記のようなテンプレートファイルファイルを作成。

import copyCodeBlock from '@pickra/copy-code-block'
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
import './_heading.scss'
import notes from './heading.md';

export default {
  title: 'Heading',
  decorators: [withKnobs],
  parameters: {
    notes,
  },
}

export const Heading = () =>  {
  const tmpText = text('見出しテキスト', '見出しが入ります');
  const Templete = `
    <h2 class="c-text">${tmpText}</h2>
  `;
  return (Templete + copyCodeBlock(Templete));
}