大家好，今天的篇章要介紹的是 Storybook

一樣會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day19-react-dnd

Storybook

Storybook 就是可以放一堆 component 來個別開發或展示的工具，所以可以有效的管理、組織，或設計你的 component 並一一列在 book 中呈現

目前參考這幾頁內的方式實作最小配置
https://storybook.js.org/docs/guides/guide-react/
https://storybook.js.org/docs/configurations/typescript-config/

首先先安裝所需的東西，因為用了 TypeScript 來撰寫的都是 tsx，所以配置會與一般的 jsx 稍稍不一樣

npm i -D @storybook/react
npm i -D @types/storybook__react
npm i -D babel-loader @babel/core

babel-loader 似乎無可避免的必須安裝，因為 storybook 也是用 webpack 來運行的，可能有其他依賴已經用到 js，可參考這看到預設的 webpack.config 設置
https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode--default
後續會新增能讀 tsx 的 ts-loader 進去

要在 package.json 增加一段 script 來準備啟動 storybook

然後設置 storybook configuration

+ .storybook/config.js

因為 component 都是用 tsx 寫的，所以要修改 storybook 的 webpack 設置

+ .storybook/webpack.config.js

設置都萬事 OK，找個 component 來加進 storybook 後並啟動看看

結果筆者發現很多目前實作的很多 copmonent 都有依賴 redux 或是其它 Context XD，好不容易發現 FormikPractice.tsx 沒有依賴那些，來加看看

+ src/components/FormikPractice/FormikPractice.stories.tsx

OK，可以啟動來看看成果了

npm run storybook

指令運行成功應該會是這個樣子的

瀏覽器畫面

它完全是原本的功能都可以用的唷

storybook 就是這樣可以輕鬆管理你的 component

不過還是應該要解決一下依賴 Context 的 component

用 Login.tsx 來實驗

+ src/components/Login/Login.stories.tsx

這時瀏覽器畫面會是給你這樣

說它沒辦法找到 react-redux context

storybook 有提供輕鬆掛上 Decorator 的方式，參考這
https://www.learnstorybook.com/intro-to-storybook/react/zh-TW/screen/

這樣子新增 Provider 就可以了

瀏覽器畫面

依賴 Context 的 component 就活蹦亂跳的呢

以上就是筆者使用 storybook 做的小小基本實例，看起來完全可以先在 storybook 先行開發 component 後續再拿來組合，這種開發方式，不過筆者目前就是想把手邊開發的東西通通丟上去管理用

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day20-storybook

明天依然會介紹 Storybook，還有許多額外的外掛 addons 還沒有介紹到，可以解鎖更多的操作或展示功能