Storybook for HTMLをインストール後に追加するべきアドオン一覧

Storybookにはアドオンが必要不可欠

Storybookはアドオンを追加することで機能を拡張できる。

例えばソースコードを表示・コピーするアドオンなどだ。
Storybook ソースコードを表示・コピーするアドオン

アドオンを追加していないStorybookはエディタで拡張機能が追加されていないくらい使い勝手が悪いので必ず追加したほうが良い。
https://storybook.js.org/addons/

StorybookのAddon Galleryにもアドオンの一覧がまとめられている。
https://storybook.js.org/docs/addons/addon-gallery/

以下にStorybookのおすすめアドオンを記載した。

StorybookのアドオンのGitHubページには「add following content to .storybook/addons.js」などと記載されている場合があるが、以下のサンプルでは.storybook/main.jsのaddons: [] にまとめています。

また、まとめてビルドしたものを以下のURLに保存した。
https://iwb.jp/s/storybook-addons/?path=/story/demo--knobs

@storybook/addon-storysource

ストーリーのソースを表示する。
@storybook/addon-storysource

インストール & 設定

npm i -D @storybook/addon-storysource
module.exports = {
  addons: ['@storybook/addon-storysource'],
  // 以下略
}

@storybook/addon-knobs

テンプレートのテキストや画像などの状態を動的に変更。
@storybook/addon-knobs

インストール & 設定

npm i -D @storybook/addon-knobs
module.exports = {
  addons: ['@storybook/addon-knobs'],
  // 以下略
}

@storybook/addon-a11y

テンプレートのアクセシビリティをチェック。
@storybook/addon-a11y

インストール & 設定

npm i -D @storybook/addon-a11y
module.exports = {
  addons: ['@storybook/addon-a11y'],
  // 以下略
}
// index.stories.js
import { withA11y } from '@storybook/addon-a11y';

export default {
  title: 'Demo',
  decorators: [withA11y],
};

@storybook/addon-docs

テンプレートをドキュメント形式で表示。
@storybook/addon-docs

インストール & 設定

npm i -D @storybook/addon-docs
module.exports = {
  addons: ['@storybook/addon-docs'],
  // 以下略
}

@storybook/addon-backgrounds

テンプレートに背景色を指定できるようにする。
@storybook/addon-backgrounds

インストール & 設定

npm i -D @storybook/addon-backgrounds
module.exports = {
  addons: ['@storybook/addon-backgrounds/register'],
  // 以下略
}
// config.js
import { addParameters } from '@storybook/html'

addParameters({
  backgrounds: [
    { name: 'default', value: '#ffffff', default: true },
    { name: 'twitter', value: '#00aced' },
    { name: 'facebook', value: '#3b5998' },
  ],
})

@storybook/addon-actions

アクションのログを表示。
@storybook/addon-actions

インストール & 設定

npm i -D @storybook/addon-actions
module.exports = {
  addons: ['@storybook/addon-actions/register'],
  // 以下略
}
// index.stories.js
import { action } from '@storybook/addon-actions';

action('button-click');

@pickra/copy-code-block

コードをクリップボードにコピーできるボタンを返す。
Storybook ソースコードを表示・コピーするアドオン

インストール & 使い方

npm i -D @pickra/copy-code-block
import copyCodeBlock from '@pickra/copy-code-block';
import redButton from './redButton.html';
export const RedButton = () => redButton + '<hr>' + copyCodeBlock(redButton)

@storybook/addon-viewport

スマートフォンのViewportで表示する。
@storybook/addon-viewport

インストール & 設定

npm i -D @storybook/addon-viewport
module.exports = {
  addons: ['@storybook/addon-viewport/register'],
  // 以下略
}
/* config.js */
import { addParameters } from '@storybook/html'

const customViewports = {
  iPhone5: {
    name: 'iPhone 5',
    styles: {
      width: '320px',
      height: '568px',
    },
  },
  iPhone678: {
    name: 'iPhone 6,7,8',
    styles: {
      width: '375px',
      height: '667px',
    },
  },
  iPhoneX: {
    name: 'iPhone X',
    styles: {
      width: '375px',
      height: '812px',
    },
  },
  iPhoneXsMax: {
    name: 'iPhone Xs Max',
    styles: {
      width: '414px',
      height: '896px',
    },
  },
  iPad: {
    name: 'iPad',
    styles: {
      width: '768px',
      height: '1024px',
    },
  },
}

addParameters({
  viewport: { viewports: customViewports }
})

@storybook/addon-google-analytics

StorybookでGoogleアナリティクスを使用するためのものだが、使用用途が謎。

インストール & 使い方

npm i -D @storybook/addon-google-analytics
module.exports = {
  addons: ['@storybook/addon-google-analytics/register'],
  // 以下略
}

window.STORYBOOK_GA_ID = UA-000000-01
window.STORYBOOK_REACT_GA_OPTIONS = {}