vuejs
Pocket

普段はReactでStorybook使ってて、便利なので手放せないなという感じです。特にコンポーネントベースのAtomicデザインで作るときは。

導入方法に何か違いがあったり、つまづくところあるかなと思いましたが、あまりありませんでした。

環境構築はvue-cliでやってsrc/components/Buttonディレクトリを作って、その中にvueファイルとstorybook用のjsを置くようにします。storybook用のディレクトリ切ってる場合を見ますが、該当のコンポーネントファイルとstorybookのファイルがまとまってる方が管理しやすいので。

インストール

storybook本体以外にも便利なstorybookプラグインも入れてしまいます。

npm install -D @storybook/vue @storybook/addon-knobs @storybook/addon-options

addon-optionsはstorybookのオプションを設定できるもの、addon-knobsはコンポーネントのプロパティを動的に変更できるものです。

src/components/Button

こんな感じでかいてみました。slotとかはまだよく分かってないですが、いい感じで動いたので。

src/components/Button/index.vue

<template>
  <button><slot></slot></button>
</template>

<script>
export default {
  name: 'app_button',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
  background-color: #ccc;
}
</style>

src/components/Button/index.stories.js

import { storiesOf } from '@storybook/vue'
import { text } from '@storybook/addon-knobs'
import Button from '.'

storiesOf('Button', module).add('simple', () => ({
  components: { Button },
  template: `<Button>${text('name', 'button')}</Button>`
}))

storybook表示用のファイルです。${text(‘name’, ‘button’)}の部分がknobsを使っていて、storybook上でボタンのテキストを自由に変えられるようにしています。

storybookが動くようにするには、プロジェクトフォルダにルートに.storybookフォルダを作りその中に設定をかきます。

.storybook/addons.js

addonを読み込む用のファイル

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

.storybook/config.js

いろいろ設定用ファイル。setOptionsは他にも設定できます。addonPanelInRightでpanelの表示位置を画面右にしています。

https://www.npmjs.com/package/@storybook/addon-options

import { configure, addDecorator } from '@storybook/vue'
import Vue from 'vue'
import { setOptions } from '@storybook/addon-options'
import { withKnobs } from '@storybook/addon-knobs'

setOptions({
  name: 'Vue Playground',
  url: 'https://github.com/mismith0227',
  addonPanelInRight: true
})

addDecorator(withKnobs)

function loadStories() {
  const req = require.context('../src/components/', true, /.stories.js$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

require.contextはこれ

Webpackでフォルダ内の全ファイルを一気にrequireする

これで簡単ですがstorybookが使えるようになりました。

storybook

Pocket