@sunggang/ui-lib

基於 React 的現代化 UI 組件庫,使用 Tailwind CSS 和 shadcn/ui 構建。

🚀 特性

• ⚡️ Tree Shaking 優化 - 智能分包設計,只打包你使用的組件
• 🎨 現代化設計 - 基於 Tailwind CSS 和 shadcn/ui
• 📦 靈活的導入方式 - 支援 ESM 和 CJS 格式
• 🔧 TypeScript 支援 - 完整的類型定義
• ⚛️ Next.js 友好 - 完整支援 App Router 和 Pages Router
• 🎯 豐富的組件 - 提供基礎 UI 到複雜功能組件

📦 安裝

npm install @sunggang/ui-lib
# 或
yarn add @sunggang/ui-lib
# 或
pnpm add @sunggang/ui-lib

Peer Dependencies

此庫需要以下 peer dependencies:

npm install react react-dom
# 如果使用 MUI 組件
npm install @mui/material @mui/icons-material
# 如果使用 Next.js
npm install next

🎯 使用方式

導入 CSS

在你的應用入口文件中導入樣式:

import '@sunggang/ui-lib/style.css';

基礎 UI 組件

基礎組件可以直接從主包導入,支援 tree shaking:

import { Button, Input, Switch, Select } from '@sunggang/ui-lib';

function App() {
  return (
    <div>
      <Button variant="default">點擊我</Button>
      <Input placeholder="請輸入..." />
      <Switch />
    </div>
  );
}

功能性組件 (分包導入)

大型功能組件建議使用分包導入以優化打包大小:

// Form Provider
import { FormProvider } from '@sunggang/ui-lib/FormProvider';

// DataTable
import { DataTable } from '@sunggang/ui-lib/DataTable';

// BigCalendar
import { BigCalender } from '@sunggang/ui-lib/BigCalender';

// Form 組件
import { Form } from '@sunggang/ui-lib/Form';

// CkEditor (建議使用 dynamic import)
import dynamic from 'next/dynamic';
const CkEditor = dynamic(
  () => import('@sunggang/ui-lib/CkEditor').then(mod => mod.CkEditor),
  { ssr: false }
);

📚 可用組件

基礎 UI 組件

• Button - 按鈕組件
• Input - 輸入框
• Switch - 開關
• Select - 選擇器
• Checkbox - 複選框
• DateRangePicker - 日期範圍選擇器
• SinglePicker - 單日期選擇器
• InputOtp - OTP 輸入框
• Carousel - 輪播組件
• Skeleton - 骨架屏
• Accordion - 手風琴組件
• Dropdown - 下拉菜單
• Spin - 加載動畫

功能性組件 (分包)

• FormProvider - 表單上下文提供者
• DataTable - 數據表格
• BigCalender - 大型日曆
• Form - 表單組件集合
• CkEditor - 富文本編輯器
• DropImage - 圖片拖放上傳
• Tabs - 標籤頁
• ReactDateRange - React 日期範圍
• LiffProvider - LINE LIFF 提供者

🔧 Next.js 集成

App Router

所有組件都已添加 'use client' 指令,可以直接在 Next.js App Router 中使用:

import { Button } from '@sunggang/ui-lib';
import '@sunggang/ui-lib/style.css';

export default function Page() {
  return <Button>Hello</Button>;
}

動態導入大型組件

對於 CkEditor 等大型組件,建議使用動態導入:

'use client';

import dynamic from 'next/dynamic';

const CkEditor = dynamic(
  () => import('@sunggang/ui-lib/CkEditor').then(mod => mod.CkEditor),
  { ssr: false }
);

export default function EditorPage() {
  return <CkEditor />;
}

📖 詳細文檔

查看 Storybook 文檔 獲取完整的組件 API 和示例。

🔄 版本兼容性

• React: ^18.0.0
• Next.js: ^14.0.0 或 ^15.0.0 (可選)
• @mui/material: ^6.0.0 (可選)

📝 變更日誌

查看 CHANGELOG.md 了解版本更新記錄。

🤝 貢獻

歡迎提交 Issue 和 Pull Request!

📄 License

MIT License

📞 支援

如有問題,請提交 GitHub Issue。