Reactで Storybookを基本からまとめてみた【Storybook入門】

Storybookとは？

アプリケーションからUIコンポーネントを切り離し、独立した状態でコンポーネントの開発、動作確認やテストを行うために利用することができるツール。コンポーネントが持つpropsを変更することでブラウザ上でどのような表示になるかプレビューを行うことで動作確認することができる。

1. Reactプロジェクトを作成

npx create-react-app [プロジェクト名]

cd [プロジェクト名]

2. StoryBookのインストール

npx storybook@latest init

npm run storybook
yarn storybook 

3. Buttonコンポーネントの設定

① srcフォルダの下にcomponentsフォルダ、componentsの下にButtonフォルダを作成しその下にButton.jsxファイルとButton.stories.jsxファイルを作成する

components/Button/Button.jsx

function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;

components/Button/Button.stories.jsx

import Button from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const HelloButton = () => <Button>Hello World!</Button>;

② .storybookフォルダに存在する設定ファイルmain.jsの内容を変更する

.storybook

module.exports = {
  // "stories": [
  //   "../src/**/*.stories.mdx",
  //   "../src/**/*.stories.@(js|jsx|ts|tsx)"
  // ],
  stories: ['../src/components/**/*.stories.jsx'], //追加
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
};

③ 設定ファイルのmain.jsを更新した場合はStorybookを再起動する必要があるのでyarn storybookを再実行する

4. ストーリーの追加

① Buttonフォルダの中にbutton.cssファイルを作成してbutton要素に対してCSSを適用する

Button/button.css

button {
  font-size: 14px;
  padding: 10px;
  border: 0;
  border-radius: 1em;
  cursor: pointer;
  display: inline-block;
}

② 作成したbutton.cssファイルをButton.jsxファイルでimportする

Button.js

import './button.css';
function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;

③ propsの値によって背景色を変更できるように新たにpropsにcolorを追加する　※デフォルト値をdefaultとする

components/Button/Button.jsx

import './button.css';
function Button({ children, color = 'default' }) {
  return <button className={color}>{children}</button>;
}

export default Button;

④ defaultのclassをbutton.cssに追加する。
※ button要素の文字の色をwhiteに設定する

button.css

button {
  font-size: 14px;
  padding: 10px;
  border: 0;
  border-radius: 1em;
  cursor: pointer;
  display: inline-block;
  color: white;
}

.default {
  background-color: #6c757d;
}

⑤ propsのcolorの値によってボタンのデザインが変わるようにbutton.stories.jsxで設定したストーリーを変更する

button.stories.jsx

import Button from '../Button/Button';

export default {
  title: 'Common/Button',
  component: Button,
};

export const Default = () => <Button>Default</Button>;
export const Primary = () => <Button color="primary">Primary</Button>;

⑥ CSSの追加も合わせて行う

button.css

//省略
.danger {
  background-color: #dc3545;
}

5.サイズの変更

① Buttonコンポーネントに背景色だけではなくサイズの変更もできるようにpropsにsizeを追加する

components/Button/Button.jsx

import './button.css';
function Button({ children, color = 'default', size = 'base' }) {
  return <button className={`${color} ${size}`}>{children}</button>;
}

export default Button;

② size propsのdefault値はbaseとする。baseの他にsm, lgも設定できるようにsmとlgもbutton.cssファイルに追加しておく。文字の大きさだけではなくpaddingも変更するためbutton要素に設定していたpaddingをbase, sm, lgで設定できるように変更する。

button.css

button {
  border: 0;
  border-radius: 1em;
  cursor: pointer;
  display: inline-block;
  color: white;
}

//略

.base {
  font-size: 14px;
  padding: 10px;
}

.sm {
  font-size: 12px;
  padding: 8px;
}

.lg {
  font-size: 18px;
  padding: 14px;
}

③ Button.stories.jsxにカラーとサイズを指定したストーリー(PrimarySmall, PrimaryLarge)を追加する

Button.stories.jsx

import Button from '../Button/Button';

export default {
  title: 'Common/Button',
  component: Button,
};

export const Default = () => <Button>Default</Button>;
export const Danger = () => <Button color="danger">Danger</Button>;
export const Primary = () => <Button color="primary">Primary</Button>;
export const PrimarySmall = () => (
  <Button size="sm" color="primary">
    Small
  </Button>
);
export const PrimaryLarge = () => (
  <Button size="lg" color="primary">
    Large
  </Button>
);

参考サイト

独自のデザインシステムを作成しましょう！ Storybook React と TypeScript を使用 |ストーリーブック 6 短期集中コース
ゼロから始めるStorybook入門(React編)