GateWeb Material React UI

GateWeb Material React UI 是一個基於 Material-UI (MUI) 打造的UI元件庫，旨在提供一致且易於使用的UI元件，幫助開發者更高效地構建現代Web應用。我們的元件庫使用了 Material React Table 套件來實現高效和靈活的表格功能。

技術堆棧

• React: 用於構建用戶界面的JavaScript庫。
• Material-UI (MUI): 一個流行的React UI框架，提供一套基於Material Design的高質量元件。
• Material React Table: 一個強大的React表格庫，樣式基於 Material-UI (MUI)，功能基於 TanStack Table，提供豐富的表格功能

系統要求

• Node.js: 18.x 或更高版本

使用方式

安裝

npm install @gateweb/react-material-ui
# or
yarn add @gateweb/react-material-ui
# or
pnpm add @gateweb/react-material-ui

引入

import { Button } from '@gateweb/react-material-ui';

如何發布版本

手動發布

1. 更新 package.json 內的版本號

   # e.g. 從 0.1.0 升級成 0.1.1
   {
       "name": "@gateweb/react-material-ui",
   -   "version": "0.1.0"
   +   "version": "0.1.1"
   }

2. 安裝依賴、建置程式碼

   pnpm install
   pnpm build

3. 登入 npm

   # 確保有 npm 帳號
   pnpm login
   # npm notice Log in on https://registry.npmjs.org/
   # Login at:
   # https://www.npmjs.com/login?next=/login/cli/390e514d-7aa5-4ee7-a13a-b17e6dd64518
   # Press ENTER to open in the browser...

4. 發布到 npm

   pnpm publish --access public --no-git-checks

5. 到 npm 頁面上確認是否有新版本發布成功

   @gateweb/react-material-ui

自動發布

• 當有新的 commit push 到 main 分支時，GitHub Action 會自動執行發布流程。

• 版本號的規則都是遵循 Semantic Versioning。

注意事項

Mui-icons 問題

v1.2.0 時在 next.js 專案中使用包含引入 @mui/icons-material 的元件時，會遇到以下錯誤：

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

根據相關的 issue，在引入 icon 時做了以下調整：

// 原本方式使用 default import
import CheckIcon from '@mui/icons-material/Check';

// 修改為使用 named import
import { Check as CheckIcon } from '@mui/icons-material';