既存のプロジェクトにStorybookを導入する

表題の通り、既存のプロジェクトにStorybookを導入する機会があったので、そのメモです。

今回の構成はこのような感じです。

• TypeScript
• React
• Webpack(これは関係ないかも)

Install Storybookのページを参考に進めてみました。

まずはnpx sb initというコマンドをとりあえず実行します。これで自動で最適な構成をインストールしてくれるらしいです。

$ npx sb init

 sb init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓
 • Adding Storybook support to your "Webpack React" app. ✓
 • Preparing to install dependencies. ✓


yarn install v1.22.4
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.74s.
. ✓

To run your Storybook, type:

   yarn storybook 

For more information visit: https://storybook.js.org

yarn add v1.22.4
[1/4] 🔍  Resolving packages...
.
.
.

npx sb initを実行してみるとstories/ディレクトリにコンポーネントファイルと.stories.tsxファイルの作成例が生成されていました。yarn storybookコマンドもpackage.jsonに自動で追記されていたので、起動してみます。

こんな感じで起動できました！あとは例にならって.stories.tsxを作っていけば良さそうです。