在第十四、十五篇「站在巨人的肩膀」的 UI 解析中，看到 Ant Design、Bootstrap 的介面及使用說明的時候就在想：我能不能把 Design System 做得這麼完善（好像心有點大了 XDDD）想起之前分享會的伙伴 cailiwu 有分享一個好用的工具 Storybook，它可以創建一個獨立的 UI Library，提供給設計師、工程師使用，在維護上也很有彈性。

Storybook 的知識點：

1. 要有 coding 的經驗：最少要會 HTML、CSS、JS。
2. 要會使用編輯器：我們使用的編輯器是 VS code。
3. 要會安裝 Node.js：這相對簡單，別怕。
4. 要會使用終端機（Terminal）：這也不難，放心。
5. 要會使用前端框架：我們這次使用的是 React。

所以⋯⋯，這不是前端工程師的工作嗎？呃～就說是自己的夢想了唄。

Storybook 的環境建置：

Storybook 是架設在 React 之上，而 React 是架設在 Node.js 之上，所以我們就從基礎建設開始吧。

安裝 Node.js：

1. 請到 Node.js 的官網 https://nodejs.org/zh-tw ，下載 Node.js ，並安裝起來，安裝很簡單，只要 double click ，繼續、同意、下一步⋯⋯，完成。
   

2. 打開終端機（Terminal），要看看是否安裝成功，請在終端機打「node -v」，按下 Enter，會得到 node.js 的版本 v20.18.0。

3. 再打「npm -v」，按下 Enter，會得到 npm 的版本 10.8.2，當你得到以下的結果，就表示 Node.js 安裝成功。（什麼是 npm ？那又是一個大坑QQ）

node -v
v20.18.0 is already installed.

npm -v
10.8.2

架設 React 專案：

1. 打開 VS code 編輯器，點選左側的 Open Folder。

2. 點選彈出視窗左下角的「新增檔案夾」。

3. 檔案夾名稱：mybook，按製作。

4. 在 VS code 的左側就會看到 MYBOOK的資料夾。
   

5. 在 VS code 的上方找到 「 Terminal 」下拉選單，點選 「 New Terminal 」，VS code 下方就會出現 Terminal 面版。
   

6. 在 Terminal 面版中，打 npm create vite@latest 按下 Enter。

7. 接下來要輸入專案名稱：my-book。

8. 用上下鍵選擇要使用的 framework，請選 React 按下 Enter。

9. 再用上下鍵選擇要使用的語法，請選擇 javascript。

10. 完成會有三列指令要執行，在 Terminal 裡分別執行它：
    cd my-book：將目錄導到我們的專案 my-book 目錄中。
    npm install：安裝 React 專案所需要用到的套件。
    npm run dev：啟動開發伺服器。
    

11. 三列指令執行完成之後，在左側檔案資料夾中就會看到很多檔案，表示安裝完成。

12. 在 Terminal 面版中有一個 http://localhost:5173/，把這個網址貼到瀏覽器，如果出現以下圖示，就表示 React 專案設定成功。再按 Ctrl + C 跳出，回到 my-book 目錄項下。
    

安裝與啟動 Storybook：

1. 在 Terminal 面版中輸入 npx sb init --builder @storybook/builder-vite，按 Enter 開始安裝 Storybook，過程中會問你 「Would you like to install it ?」 請打 Y（也就是 yes 的意思），安裝過程會有點久，請耐心等候。
2. 安裝完成會自動開啟 Storybook 的網頁，當你看到如下圖這個頁面，就表示 Storybook 安裝成功了（～耶！）
   

Storybook 簡介：

在左側的選單中，有看到 Button、Header、Page 三個選項，這是 Storybook 的 UI component 的範例，我們以 Button 為例：

1. 點選 Button 裡面的 Docs 是關於 Button 的組件說明，按 show code 會顯示 code 的寫法。
2. 點選 Button 裡面的 Primary 是主要按鈕的 Controls、Actions、Interactions 三個功能選項，我們主要是 focus 在 Controls 裡。
3. 在 Controls 有 4 個控制項，分別是：
   1. Primary：是否為主要按鈕：False：外框按鈕。True：實心按鈕。
   2. Label：按鈕文字。
   3. backgroundColor：可變更按鈕顏色。
   4. size：有 small、medium、large 三種尺寸可選擇。

其他 Secondary、Large、Small 都各有專屬控制項，捧油們可以點點看喔！

當然，我們不是要使用 Storybook 的預設 UI Component，而是要自己創建，所以今天先把 Storybook 的環境建置好，明天才能繼續朝夢想（惡夢）前進。

參考：https://nodejs.org/zh-tw
參考：https://react.dev/
參考：https://storybook.js.org/