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 短期集中コース](https://www.youtube.com/watch?v=qSkHRVLcj6U&t=2178s)
[ゼロから始めるStorybook入門(React編)](https://reffect.co.jp/html/storybook/)