Nuxt.jsのstorybookを見やすくカスタマイズする

storybookにaddons.jsを追加する

touch .storybook/addons.js

この時点ではまだ何も記載していません。

storybook上でコードを確認できるようにする

@storybook/addon-storysourceをインストール。

$ npm i -D @storybook/addon-storysource

先ほど作った.storybook/addons.jsに以下を記載する

.storybook/addons.js

import '@storybook/addon-storysource/register';

そして、.storybook/webpack.config.jsに以下を記載する

.storybook/webpack.config.js

module.exports = (baseConfig, env, defaultConfig) => {
  //nuxt.jsの'@'や'~'の読み込み
  defaultConfig.resolve.alias['@'] = rootPath;
  defaultConfig.resolve.alias['~'] = rootPath;
  // addon-storysourceの設定はここから
  defaultConfig.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    enforce: 'pre',
  })
  return defaultConfig;
}

結果

storybook上でノートを記載する

@storybook/addon-notesをインストール。

$ npm i -D @storybook/addon-notes

.storybook/addons.jsに以下を記載する

.storybook/addons.js

import '@storybook/addon-notes/register';

ノートを導入したいコンポーネントに対して以下を記載する

index.stories.js

import { withNotes } from '@storybook/addon-notes' // @storybook/addon-notesのインポート

storiesOf('Atoms', module)
    .add('AppLogo', withNotes('ここに記載した文章が表示されます。')(()=> ({
        components: { AppLogo },
        template: '<AppLogo></AppLogo>'
})))

結果

もう少し見やすく変更を行う

このままでもいいですが、index.stories.jsに直接書き込みを行わないといけないのと、複数行だと書きにくいので、今回はMarkdownで記載を行うことができるように変更します。

ディレクトリについてはこのような感じです。

index.stories.js

import { storiesOf } from '@storybook/vue'
import { withNotes } from '@storybook/addon-notes'

import MarkdownText from './MarkdownText.md'; //今回記載するマークダウンファイル

storiesOf('Atoms', module)
  .add('AppLogo', withNotes(MarkdownText)(()=> ({ //ここにMarkdownTextを入れる
    components: { AppLogo },
    template: '<AppLogo></AppLogo>'
  })))

今回haMarkdownText.mdに以下を記載。

MarkdownText.md

# ノートh1

## ノートh2

## テーブル

|項目1|項目2|
|---|---|
|項目1|項目2|
|項目1|項目2|
|項目1|項目2|
|項目1|項目2|

これはマークダウンで記載されています。

結果

これなら使いようによっては、見やすいような気がします。

storybookをiphone5やiphone6などで確認できるようにする

@storybook/addon-viewportをインストール。

$ npm i -D @storybook/addon-viewport

.storybook/addons.jsに以下を記載する

.storybook/addons.js

import '@storybook/addon-viewport/register';

結果

storybook上で値の変更を行えるようにする

@storybook/addon-knobsをインストール

$ npm i -D @storybook/addon-knobs

.storybook/addons.jsに以下を記載する

.storybook/addons.js

import '@storybook/addon-knobs/register';

導入したいコンポーネントに対して以下を記載する

index.stories.js

import { withKnobs, text } from '@storybook/addon-knobs'

storiesOf('Atoms', module)
  .addDecorator(withKnobs) //ここにKnobsのDecoratorを追加
  .add('H1Title', () => {
    const Titiletext = text('text', 'テキスト') // ここに初期の表示させるテキストを記載する
    return {
      components: {H1Title},
      template: `
      <div>
        <H1Title h1text="${Titiletext}"></H1Title>
      </div>
    `
    }
  })

text ・・・ knobsのラベル名
テキスト ・・・ 表示されるテキスト
(細かくは結果を参照)

結果

storybook上でコンポーネントの情報を確認する

storybook-addon-vue-infoをインストール

$ npm i -D storybook-addon-vue-info

任意のstorybookファイルに以下を記載する

index.stories.js

import VueInfoAddon from "storybook-addon-vue-info";

storiesOf("Atoms", module)
  .addDecorator(VueInfoAddon) //これを追記する
  .add("BtnGreen", () => ({
    components: { BtnGreen },
    template: "<BtnGreen></BtnGreen>"
  }));

結果

今回は行わなかったがやってみたいaddonsリンク

storybook公式 - addons

Addons | Storybook Tutorial