鐵人檔案
Storybook可以縮小專案團隊中開發的溝通Gap，它會跟著專案目前開發的程式碼呈現統一的元件功能展示，它是一個用於元件開發、測試和文件說明的工具，並支持Vue、React、Angular等主流框架。
我會透過30天的文章，整理 Storybook 的完整說明，帶大家 Step-by-Step 的玩轉 Storybook，。
目前我是使用Vue做專案開發，所以會以Vue框架的設定為主。因為也接觸過 Angular，也可能會一併放上Angular整合Storybook的方法。
Container and Presentational 官網的程式碼架構，會把元件分成二種類型-容器型(Container)及表現型(Presentation...
在前面的單元，我們已經完成了開發單一元件Task，也完成了複合元件 TaskList，也把 TaskList 拆分為容器型(TaskListComponent)...
DocsPage 介紹 Storybook Docs 是預設的 Addons，不需要做設定就可以使用。它可以整合元件裡的Stories、文字描述、程式註解、參數...
MDX 若要更詳細的整理 Storybook 文件，可以使用 Markdown 語法搭配 JSX 的格式 - MDX。 有二種使用 MDX 方法 Story...
Exporting as a static app 首先要把寫好的Stories相關檔案，都打包成靜態可部署的檔案。 打包的語法如下 // package.js...
Introduction 目前較具規模的公司，像是 Airbnb / Uber / Microsoft，為了保持旗下不同網站一致的使用者體驗，會遵循著 Desi...
單一真值來源 或 單點故障 Single Source of Truth (SSOT) 單一真值來源 Single Points of Failure (SP...
通過 Storybook Docs 推動 Design System 的採用 Design System為整個組織的利益相關者服務，因此我們需要教其他人如何從經...
在整個組織中發佈 Design System 從架構的角度來看，Design System 如同 lodash、moment 一樣，可做為專案開發過程的 dep...
根據研究指出，重用程式碼可以節省42–81％的時間，並提高生產力 40％。易於共享UI元件的Design System在開發團隊中越來越流行。 Design S...
