具有一定規模的專案，很容易會有大量的組件散落，這樣帶來幾個問題：

1. 專案中非常有可能出現功能相似的重複組件，讓人難以確認該使用哪個組件。
2. 團隊新成員不知可用的組件、不知組件如何使用。
3. 組件與邏輯、全域狀態高耦合，難以測試。

引入 Storybook 並搭配團隊的流程規範，可以在一定程度上解決這些問題。

Storybook 是什麼？

Storybook 是一個開發、協作共用 components 的工具，我們可以透過在專案中新增 *.stories.ts 檔案來撰寫組件的示範文件，將 Storybook 運作起來之後就可以看到組件的實際效果。

https://storybook.js.org/0f37e3bc4895c3ad120d760b704a2ee1/7.0-storybook-hero-video.mp4

Source: why-storybook

而且因為 Storybook 的執行環境是獨立於專案之外的，所以也非常適合用在跨專案的基礎組件。

這系列主要還是以介紹工具與使用經驗為主，詳細的使用、安裝流程還請參閱 官方文件 按照自己的專案需求來操作喔。

哪些組件要寫 stories ?

首先我認為只要是泛用性的組件就最好都要有 stories ，在組件開發、修改要 Merge 回到主線的時候，都應該要依照組件的使用情境來建構 stories ，這是需要 code review 的配合才行。

而維護 stories 也是非常重要的工作，只要 stories 能夠得到持續的維護，那 Storybook 就可以成為團隊協作時的最佳文件，讓協作者能快速理解組件如何使用。