Edited at

Storybookのaddonを一部紹介


Storybookとは

ReactReact-Native, Vue等のComponentをRenderしてテストできるツールだよ

Storybook公式サイト


addonとは

Storybookに追加できる拡張機能だよ

Storybook addon公式ドキュメント

ここでは追加できるaddonの一部とその設定方法を紹介するよ


addonの追加

storybookのconfigが含まれているディレクトリにaddon.jsを追加する。

その中にimport @storybook/[addon名]/registerを追加する。

その後、config.jsで各addonに定められた設定を行う。


addon.js

import '@storybook/addon-viewport/register'

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


@storybook/addon-viewport


  • ChromeDevToolsの様にViewportの設定ができるよ

** 追記 Storybook 5 になって若干書き方が変わりました。


Storybook 4 から前のバージョン


config.js

import { configureViewport } from '@storybook/addon-viewport'

configureViewport({
defaultViewport: 'iphone6p',
})



Storybook 5以降


config.js

import { addParameters } from '@storybook/react'

addParameters({
viewport: {
defaultViewport: 'iphone6p',
}
})



@storybook/addon-options


  • Addonの設定ができるよ

  • Addonパネルを画面の右側に置く設定などが行えるよ(デフォルトでは下にある。操作しづらい)


config.js

import { addDecorator } from '@storybook/react'

import { withOptions } from '@storybook/addon-options'

addDecorator(
withOptions({
addonPanelInRight: true,
}),
)



@storybook/addon-actions



  • onPress等のeventのシミュレートができるよ


button.story.js

import { storiesOf, addDecorator } from '@storybook/react'

import { action } from '@storybook/addon-actions'
import { Button } from '../components' // 架空のComponent

storiesOf('Elements', module)
.addDecorator(withKnobs)
.add('Button', () => (
<Button
onPress={action('onPressAction')}
/>
))



@storybook/addon-knobs


  • storybookの画面上でprops等の編集ができるよ

  • optionsでescapeHTML:falseにすると ', &などの記号がそのまま表示される様になるよ(デフォルトだとhtml entityになってしまう)


config.js

import { addDecorator } from '@storybook/react'

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

addDecorator(
withKnobs({
escapeHTML: false,
}),
)



button.story.js

import { storiesOf, addDecorator } from '@storybook/react'

import {withKnobs, text} from '@storybook/addon-knobs'
import { Button } from '../components' // 架空のComponent

storiesOf('Elements', module)
.addDecorator(withKnobs)
.add('Button', () => (
<Button
label={text('label', 'Button')}
onPress={action('onPressAction')}
/>
))