Create React AppからStorybookの追加が超簡単だった。

概要

ReactでStorybook使ってみたくて、色々調べてた結果、
設定面倒なのかなーと思ってたらCreate React Appからの追加が超簡単だったという話です。

環境構築

今回はyarnでゴリゴリ入れていきましょう。

yarn global add create-react-app
yarn create react-app sample-storybook
cd sample-storybook
yarn add storybook
yarn storybook

ここまで来ると、「お？Create React Appで作ったプロジェクトやんけ！」
と勝手に解釈してくれて、良い感じに雛型を作ってくれます。超便利ですね。

再度yarn storybookを叩くと、http://localhost:9009でStorybookの
サーバーが立ち上がります。以上です。

コンポーネント追加

Material-UIのボタンを追加してみます。
（実際は自作のコンポーネントを追加するような使い方になると思いますが）

yarn add @material-ui/core

src/stories/index.js

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';

+ import MaterialButton from '@material-ui/core/Button';

storiesOf('Welcome', module).add('to Storybook', () => (
  <Welcome showApp={linkTo('Button')} />
));

storiesOf('Button', module)
  .add('with text', () => (
    <Button onClick={action('clicked')}>Hello Button</Button>
  ))
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
  ))
+  .add('material', () => (
+    <MaterialButton
+      variant="contained"
+      color="primary"
+      onClick={action('clicked')}
+    >
+      Primary
+    </MaterialButton>
+  ));

ホットリロードで画面が更新されています。良いですね。