Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

storybookにaddons.jsを追加する

touch .storybook/addons.js

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

スクリーンショット 2018-10-16 1.21.38.png

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

結果

スクリーンショット 2018-10-16 1.35.31.png

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

結果

スクリーンショット 2018-10-16 1.43.37.png

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

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

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

スクリーンショット 2018-10-16 1.47.22.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>'
  })))

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

MarkdownText.md
# ノートh1

## ノートh2

## テーブル

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

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

結果

スクリーンショット 2018-10-16 1.52.00.png

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

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

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

$ npm i -D @storybook/addon-viewport

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

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

結果

スクリーンショット 2018-10-16 2.27.31.png

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

結果

スクリーンショット 2018-10-20 23.17.37.png

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>"
  }));

結果

スクリーンショット 2018-10-29 15.16.45.png

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

storybook公式 - addons

Addons | Storybook Tutorial

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした