StorybookでReactJSコンポーネントのレビュー環境を作る
StorybookとはWeb開発におけるUIコンポーネントを作る環境のこと。
インストール
まずは導入するReactJSプロジェクトを用意する。
mkdir react-sample cd react-sample npm init npm i --save react react-dom
次にStorybookを導入するためのコマンド getstorybook
をいれる。
npm i -g getstorybook getstorybook
getstorybook - the simplest way to add a storybook to your project. • Detecting project type. ✓ • Adding storybook support to your "React" app. ✓ • Preparing to install dependencies. ✓ yarn install v0.17.6 info No lockfile found. [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 📃 Building fresh packages... success Saved lockfile. ✨ Done in 21.14s. • Installing dependencies. ✓ To run your storybook, type: yarn run storybook For more information visit: http://getstorybook.io
このようになったら導入成功。 yarnの利用が推奨されてるらしい。
storiesというディレクトリが作れていて、中に
- Welcome.js
- Button.js
- index.js
3つのファイルが生成されている。
WelcomeとButtonはサンプルコンポーネントで,indexはコンポーネントをStorybookにつなぐためのもの。
使う
早速 yarn run storybook
で実行してみる。
http://localhost:6006/
にStorybookが表示される。
import React from 'react'; import { storiesOf, action, linkTo } from '@kadira/storybook'; import Button from './Button'; import Welcome from './Welcome'; 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> ));
storiesOfでストーリーを定義出来る。
コンポーネントの視覚的なテストのようなイメージ。
add
でprops等を入れていく。
試しに small というpropertyがつくとボタンが小さくなるようにする。
index.js
に
.add('with small', () => ( <Button onClick={action('clicked')} small>Small Button</Button> ))
を追加する。
import React from 'react'; export default class Button extends React.Component { constructor(props){ super(props); this.styles = { border: '1px solid #eee', borderRadius: 3, backgroundColor: '#FFFFFF', cursor: 'pointer', fontSize: 15, padding: '3px 10px', margin: 10, }; } render() { if(this.props.small){ this.styles.fontSize = 10; } return ( <button style={this.styles} onClick={this.props.onClick} > {this.props.children} </button> ); } } Button.propTypes = { children: React.PropTypes.string.isRequired, onClick: React.PropTypes.func, };
Buttonコンポーネントをこんな感じに書き換える。
リアルタイムで見た目が変わった。
共有する
作成したStorybookプロジェクトはStorybookHUBで共有できる。
Storybook Hub - The Perfect Place To Develop & Review User Interfaces
まずStorybookにコメント機能を付ける。
// To get built in addons. npm i -D @kadira/storybook-database-cloud npm i -D @kadira/storybook-addon-comments
↑を実行した後`.storybook/addons.jsを記述する
import '@kadira/storybook/addons'; import '@kadira/storybook-database-cloud/register'; import '@kadira/storybook-addon-comments/register';
コミットしてGitHubにプッシュする。
Storybook Hub - The Perfect Place To Develop & Review User Interfaces StorybookHUBのサイトにAppを登録する。 いまプッシュしたGitHubリポジトリを対象にする。
自動でビルドされて、StorybookのURLが生成される。 ↓こんな感じ
publicで公開することもできれば、privateでAppを作成して招待するという事もできる。
Storyに対してコメントが出来る。
ちなみにPublicリポジトリの場合は無料で利用できるけれど、 Privateリポジトリはコラボレータを増やすのにお金がかかる。