@sunggang/nx-ui-lib

一個專為 Tree Shaking 優化設計的 React UI 組件庫。

特色

✅ 完全支援 Tree Shaking - 只打包您實際使用的組件
✅ TypeScript 支援 - 完整的類型定義
✅ Tailwind CSS - 使用 Tailwind 進行樣式設計
✅ ESLint 整合 - 內建程式碼品質檢查
✅ 分包架構 - 按功能分組，支援按需載入

安裝

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

使用方法

基本用法 (推薦)

只導入您需要的組件，實現最佳的 tree shaking：

// 核心 UI 組件
import { Button, Input } from '@sunggang/nx-ui-lib';

function App() {
  return (
    <div>
      <Button variant="primary">點擊我</Button>
      <Input placeholder="輸入文字" />
    </div>
  );
}

分包導入 (進階用法)

對於大型組件，使用分包導入來進一步優化 bundle size：

// UI 組件包
import { Card, CardHeader, CardContent } from '@sunggang/nx-ui-lib/ui';

// 表單組件包
import { Form, FormField } from '@sunggang/nx-ui-lib/form';

// 數據組件包
import { Table } from '@sunggang/nx-ui-lib/data';

// 工具函數包
import { formatDate, debounce } from '@sunggang/nx-ui-lib/utils';

// Hooks 包
import { useToggle, useLocalStorage } from '@sunggang/nx-ui-lib/hooks';

樣式導入

// 在您的主要 CSS 文件中導入
import '@sunggang/nx-ui-lib/styles';

可用的分包

| 分包 | 說明 | 導入方式 | |------|------|----------| | 主包 | 核心 UI 組件 (Button, Input) | @sunggang/nx-ui-lib | | ui | 完整 UI 組件集 (Card, Button, Input) | @sunggang/nx-ui-lib/ui | | form | 表單相關組件 | @sunggang/nx-ui-lib/form | | data | 數據顯示組件 (Table) | @sunggang/nx-ui-lib/data | | utils | 工具函數 | @sunggang/nx-ui-lib/utils | | hooks | React Hooks | @sunggang/nx-ui-lib/hooks |

組件範例

Button

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

<Button variant="primary" size="md" loading={false}>
  按鈕文字
</Button>

Table

import { Table } from '@sunggang/nx-ui-lib/data';

const columns = [
  { key: 'name', title: '姓名' },
  { key: 'age', title: '年齡' },
];

const data = [
  { name: '張三', age: 25 },
  { name: '李四', age: 30 },
];

<Table columns={columns} data={data} />

Form

import { Form, FormField } from '@sunggang/nx-ui-lib/form';
import { Input } from '@sunggang/nx-ui-lib';

<Form>
  <FormField label="使用者名稱" required>
    <Input placeholder="請輸入使用者名稱" />
  </FormField>
</Form>

開發指南

建置

npx nx build nx-ui-lib

Lint 檢查

npx nx lint nx-ui-lib

Tree Shaking 優化

此組件庫專為 tree shaking 設計：

1. ES modules - 使用 ESM 格式進行分發
2. sideEffects: false - 標記為無副作用，支援更激進的 tree shaking
3. 分包架構 - 按功能分組，避免不必要的代碼載入
4. 按需導入 - 只導入實際使用的組件

Bundle Size 優化建議

1. 使用具體的導入路徑而不是通配符導入
2. 對於大型組件，使用分包導入
3. 在 Next.js 中配置 optimizePackageImports

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ['@sunggang/nx-ui-lib'],
  },
};

許可證

MIT