React + StorybookでAtomic Designするための構成

storybookはコンポーネントを作るライブラリで、特にデザイナーとエンジニアとのデザインコミュニケーションの手段として最適です。今回はstorybookでatomic designを管理するための構成を作成していきます。
f:id:kamimura-dev:20190901112921p:plain

プロジェクトのセットアップ

create-react-appで作成したプロジェクトにstorybookを作成することをベースに話を進めていきます。まずは必要パッケージのインストールから。

$ yarn add -D @storybook/react

そしてプロジェクトrootディレクトリに.storiesというフォルダとconfig.jsを作成します。

$ mkdir .storybook
$ touch .storybook/config.js

こちらがindex.jsの内容です。

//config.js
import { addParameters, configure } from '@storybook/react';

const component = require.context('../src', true, /.stories.js$/);

function loadStories() {
  component.keys().forEach(filename => component(filename));
}

configure(loadStories, module);

これでsrcフォルダ配下の.stories.jsファイルをstoryとして登録してくれます。

まずはatomsのstoryを登録してみましょう。フォルダ構成はcomponentsにatomic desiginのコンポーネントを作成していく感じです。
src/components/atoms/atoms.stories.js

//atoms.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import addStories from '@storybook/react';

storiesOf('atoms', module).add('with text', () => <h1>Text</h1>);

package.jsonに追加

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    //追加
    "storybook": "start-storybook -p 9001 -c .storybook"
  },