Zent ( ˈzent ) 是有贊 PC 端 Web UI 規範的 React 實現版本，提供了一整套基礎的 UI 元件以及常用的業務元件。通過 Zent，可以快速搭建出風格統一的頁面，提升開發效率。目前我們有 45+ 元件，其中包括 Design 以及 SKU 等實用的業務元件。這些元件都已經在有讚的各類 PC 業務中廣泛使用，我們會在此基礎上，持續開發更多實用的新元件。
我們的目標是做東半球最好的 React 元件庫，讓 React 開發更快、更簡單。
一、特性
- 一套完整的 UI 元件庫，元件都經過有讚的業務檢驗，實用又靠譜。
- 完善的中英文文件，每個元件都有詳細的 API 說明以及可以執行的示例。
- 內建了 TypeScript 型別定義檔案。
- Zent 支援自定義主題，通過我們提供的工具你可以在不修改程式碼的情況下將元件庫的整體色調改成你想要的任何顏色。
- 一套有贊設計師繪製的圖示庫。
- 單測覆蓋率在 90% 以上。
- 提供了一個 babel 外掛自動化按需載入程式碼，只引入使用到的 JavaScript 以及 CSS 檔案，減小 bundle 體積。
二、我們的優勢: 豐富實用的元件
下面是一些元件的簡單展示，另外我們也提供了一些專案示例，可以幫助你快速使用 Zent 搭建一個頁面。
時間選擇
做過 Web 開發的都知道瀏覽器原生的時間選擇元件不僅不好用，還有各種相容性問題。為了解決這些問題，Zent 提供了一套自己的時間選擇元件，包括日期選擇、周選擇元件、月選擇以及時間區間選擇。為了適應不同場景的需求，時間區間選擇還提供了兩種不同的互動模式。
顏色選擇器
和時間選擇一樣，顏色選擇在 Web 上也是一個問題，Zent 同樣提供了一個功能強大又方便的顏色選擇元件。
除了常用的基礎元件，Zent 還提供了豐富的業務元件，開發者可以使用這些元件快速實現業務功能。
微頁面編輯
我們還開源了有讚的微頁面編輯元件，支援自定義微頁面內的元件，讓你輕輕鬆鬆寫出一個WebApp，讓普通使用者也可以搭建含動態資料的頁面的。
SKU 選擇
商品規格是商品很重要的一個屬性，Zent 的 SKU 選擇元件封裝了商品規格選擇的邏輯，讓你從複雜的互動中解放出來，有更多精力去優化業務的實現。
省市區選擇
Zent 也提供了地址輸入中常用的省市區選擇元件，這個功能是由級聯選擇元件實現的。級聯選擇元件不僅僅可以用來實現省市區選擇，很多有層次關係的內容選擇都可以通過這個互動實現，例如店鋪的主營業務類目選擇等。
我們會繼續開放更多基於 Zent 的實用業務元件，敬請期待。
三、展望
Zent 還有不少功能沒有完善，例如還沒有動畫基礎設施，很期待得到大家的批評和幫助，一起打造一個更完善、更好用的 Zent。
本文首發於有贊技術部落格。