🚀 FE Shared Component Library

📝 專案概述 / Project Overview

這是一個為 iStaging 設計的共享組件庫專案，旨在為所有產品線提供統一的 UI/UX 設計語言和組件。專案目標包括：

• 🎨 建立統一的設計系統 - 提供高彈性和重用性的設計語言
• 🤖 支援 AI 協作開發 - 建立標準化的 AI 工作流程
• ⚡ 提升開發效率 - 減少重複開發，加速產品迭代
• 🎯 確保品牌一致性 - 所有產品線的用戶體驗保持一致
• 🔧 降低維護成本 - 統一的架構和測試策略

💡 技術棧 / Tech Stack

• 框架 / Framework: React 19.1.1 with Vite 7.1.2
• 語言 / Language: TypeScript 5.8.3
• 樣式 / Styling: Tailwind CSS 4.1.12
• UI 基礎組件 / UI Primitives: Radix UI (avatar, checkbox, dropdown-menu, portal, radio-group)
• 組件開發 / Component Development: Storybook 9.1.4
• 測試 / Testing: Vitest 3.2.4 with Playwright for E2E testing
• 建置工具 / Build Tool: Vite with Rollup
• 程式碼檢查 / Linting: ESLint 9.33.0 with React and Storybook plugins
• 程式碼格式化 / Code Formatting: Prettier 3.6.2
• 套件管理 / Package Manager: pnpm 10.10.0
• 版本管理 / Version Management: bumpp
• CSS 處理 / CSS Processing: PostCSS with px-to-rem conversion

🚀 快速開始 / Quick Start

📦 安裝組件庫

npm install @istaging/fe-shared-component
# 或
pnpm add @istaging/fe-shared-component

🎨 引入樣式

/* Tailwind v4 專案 */
/* 給Tailwind v4解析時使用 */
@import "@istaging/fe-shared-component/foundations/tailwindv4/index.css";
/* 直接使用已編譯好的 global CSS（會在 :root 注入 tokens） */
@import "@istaging/fe-shared-component/foundations/css/index.css";
/* 或：只想在特定區域啟用 iStaging tokens，可使用 scoped 版本 */
/* 這個檔案只會在 .istaging-theme / [data-istaging-theme] 範圍內注入 tokens，避免污染全域 :root */
@import "@istaging/fe-shared-component/foundations/css/scoped.css";

// Tailwind v3 或 其他 CSS-in-JS 專案
import "@istaging/fe-shared-component/foundations/colors/js/index.js";

🧩 元件使用

import Button from "@istaging/fe-shared-component/components/Button";

function App() {
  return (
    <div>
      <Button variant="solid" size="md">
        點擊我
      </Button>
    </div>
  );
}

🛠️ 開發指南 / Development Guide

📖 開發指南

🎨 組件規範

🏗️ 專案結構

📦 打包過程

🔨 專案設定與雜項

• TS 型別宣告檔的產生
• Husky hooks設定

⚖️ 授權 / License

此專案為 iStaging 內部使用，未經授權不得外傳。

注意 / Note: 此專案仍在積極開發中，API 可能會在正式版發布前有所變更。