npm package: @istaging/fe-shared-component
Description: [![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)](https://main--64f8b4a4c0a8a5007b4b4a4c.chromatic.com/) [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=
Latest version: 2.0.0

# 🚀 FE Shared Component Library

[![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)](https://main--64f8b4a4c0a8a5007b4b4a4c.chromatic.com/)
[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)

## 📝 專案概述 / 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

### 📦 安裝組件庫

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

### 🎨 引入樣式

```css
/* 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";
```

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

### 🧩 元件使用

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

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

## 🛠️ 開發指南 / Development Guide

### 📖 [開發指南](./docs/Development_Guide.md)

### 🎨 [組件規範](./docs/Component_Guidelines.md)

### 🏗️ [專案結構](./docs/Project_Structure.md)

### 📦 [打包過程](./docs/Build_and_Usage.md)

### 🔨 專案設定與雜項

- [TS 型別宣告檔的產生](./docs/misc/Build-and-types.md)
- [Husky hooks設定](./docs/misc/Husky-and-commitlint.md)

## ⚖️ 授權 / License

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

---

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