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

# storybookにaddons.jsを追加する

```shell
touch .storybook/addons.js
```

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

![スクリーンショット 2018-10-16 1.21.38.png](https://qiita-image-store.s3.amazonaws.com/0/214546/c84d5d37-6a85-6935-21cf-d41f12ad5e67.png)


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

[@storybook/addon-storysource](https://www.npmjs.com/package/@storybook/addon-storysource)をインストール。

```
$ npm i -D @storybook/addon-storysource
```

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

```js:.storybook/addons.js
import '@storybook/addon-storysource/register';
```

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

```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;
}
```

## 結果

![スクリーンショット 2018-10-16 1.35.31.png](https://qiita-image-store.s3.amazonaws.com/0/214546/2739edd6-414d-5781-2274-12a49ccdc45f.png)


# storybook上でノートを記載する

[@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)をインストール。

```
$ npm i -D @storybook/addon-notes
```

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

```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>'
})))
```

## 結果

![スクリーンショット 2018-10-16 1.43.37.png](https://qiita-image-store.s3.amazonaws.com/0/214546/b4597923-f043-8fd7-95d8-21916fb2ddc2.png)



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

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

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

![スクリーンショット 2018-10-16 1.47.22.png](https://qiita-image-store.s3.amazonaws.com/0/214546/4f0dfe32-9f92-d51b-abc6-e229dd8fdf06.png)


```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>'
  })))

```

今回ha`MarkdownText.md`に以下を記載。

```md:MarkdownText.md
# ノートh1

## ノートh2

## テーブル

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

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

```

## 結果

![スクリーンショット 2018-10-16 1.52.00.png](https://qiita-image-store.s3.amazonaws.com/0/214546/1e8cbb74-54ec-6223-9b2b-9733be99e5da.png)

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

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

[@storybook/addon-viewport](https://github.com/storybooks/storybook/tree/release/3.4/addons/viewport)をインストール。

```shell
$ npm i -D @storybook/addon-viewport
```

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

```js:.storybook/addons.js
import '@storybook/addon-viewport/register';
```

## 結果

![スクリーンショット 2018-10-16 2.27.31.png](https://qiita-image-store.s3.amazonaws.com/0/214546/ba91314b-bcf4-96cb-3dc1-e0ad6d3027b9.png)

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

[@storybook/addon-knobs](https://www.npmjs.com/package/@storybook/addon-knobs)をインストール

```shell
$ npm i -D @storybook/addon-knobs
```

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

```js:.storybook/addons.js
import '@storybook/addon-knobs/register';
```

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

```js: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のラベル名
`テキスト` ・・・ 表示されるテキスト
(細かくは結果を参照)

## 結果

![スクリーンショット 2018-10-20 23.17.37.png](https://qiita-image-store.s3.amazonaws.com/0/214546/3cacfb75-a4d3-1720-fbf8-29907ce500b8.png)

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

[storybook-addon-vue-info](https://www.npmjs.com/package/storybook-addon-vue-info)をインストール

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

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

```js:index.stories.js
import VueInfoAddon from "storybook-addon-vue-info";

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

## 結果

![スクリーンショット 2018-10-29 15.16.45.png](https://qiita-image-store.s3.amazonaws.com/0/214546/4a151550-8a9a-2f03-9800-1a15743ba479.png)


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

[storybook公式 - addons](https://storybook.js.org/addons/addon-gallery/)

[Addons | Storybook Tutorial](https://www.learnstorybook.com/react/en/addons/)