コンポーネント開発速度を加速させるStorybookをReact に追加する

● Storybook のインストール

npx storybook@latest init

● Storybook を起動する

npm run storybook

● ./src/stories を削除する

自動で /src/stories にファイルが生成されるので不要な場合は削除しましょう。

● StorybookのHTMLでグローバルcssを読み込ませる

.storybook/preview.ts の 1行目に以下のインポート文を追加するだけでOKです

import "../src/app/globals.css"

● 有名なプロダクトの Storybookを参考にする

https://storybook.js.org/showcase

● add-onを活用する

・ @storybook/addon-essentials

（Essential addons には以下のアドオンが内包されています。）

Docs	ストーリー定義を元に、ドキュメントを自動生成する
Controls	コンポーネントに対するパラメータ(≒props)をGUI上で動的に切り替える
Actions	コンポーネントから発火されたイベント(≒emit)をロギングする
Viewport	様々な画面サイズでストーリーを描画できるようにする
Backgrounds	背景色を変更する
Toolbars & globals	グローバルパラメータの埋め込みと、それを設定するツールバーを作成する

引用 : https://zenn.dev/sa2knight/books/aca5d5e021dd10262bb9/viewer/1c420c