• 出来上がったデザインをどのように実装に落とし込むかを体系的に学ぶ演習
• 実際にReact + StoryBookを実装する
• デザイン

• FilledとOutlineの両方のボタンが用意されてはいるが、デザインと合っていない。

• FilledとOutlineの両方のボタンがデザイン通りに実装されていることをStorybookで確認できる状態

対象のファイルは以下です

.
└── src
    └── stories
        └── button.css
        ├── Button.jsx
        └── Button.stories.js

• 特定の状態(story)のコンポーネントを描画する方法

• 角を丸める方法
• 文字を太くする方法
• 背景色を変更する方法

• 前提
  • node,npmがinstall済み

1. 任意の作業フォルダに移動
2. 以下のコマンドで、リポジトリを取得

git clone https://github.com/otsukatatsuya/storybook-example-public.git

4. 任意のIDEを用いて、そちらを開く
5. ルートで、以下のコマンドを実行

npm i
npm run storybook

7. webサーバーが立ち上がり、正常に閲覧できることを確認する