npm package: @jncode/components
Description: jncode UI Components based on Ant Design
Author: jiaxue@jncode.cn
Latest version: 0.0.0


# @jncode/components

基于 Ant Design 的 jncode UI 组件库

## 📦 安装

```bash
# 使用 pnpm (推荐)
pnpm add @jncode/components

# 使用 npm
npm install @jncode/components

# 使用 yarn
yarn add @jncode/components
```

## 🚀 快速开始

### 1. 导入组件

```tsx
import { Button, Card, Input, Modal } from '@jncode/components'

function App() {
  return (
    <div>
      <Button type="primary">点击我</Button>
      <Card title="卡片标题">
        <p>卡片内容</p>
      </Card>
    </div>
  )
}
```

### 2. 样式配置

确保在你的项目中引入 antd 的样式文件：

```tsx
import 'antd/dist/reset.css'; // antd 5.x 版本
```

或者使用按需加载：

```js
// babel.config.js 或 .babelrc
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }
    ]
  ]
}
```

## 🎨 组件预览

本项目使用 Storybook 进行组件开发和预览：

```bash
# 启动 Storybook 开发服务器
pnpm run dev

# 构建 Storybook
pnpm run build-storybook
```

访问 `http://localhost:6006` 查看组件文档和示例。

## 📚 可用组件

本组件库基于 [Ant Design](https://ant.design/) 构建，包含以下组件：

### 通用组件
- **Button** - 按钮组件，支持多种类型、尺寸和状态
- **Icon** - 图标组件
- **Typography** - 排版组件

### 布局组件
- **Divider** - 分割线
- **Grid** - 栅格系统
- **Layout** - 布局组件
- **Space** - 间距组件

### 导航组件
- **Affix** - 固钉
- **Breadcrumb** - 面包屑
- **Dropdown** - 下拉菜单
- **Menu** - 导航菜单
- **Pagination** - 分页
- **Steps** - 步骤条

### 数据录入组件
- **AutoComplete** - 自动完成
- **Checkbox** - 多选框
- **DatePicker** - 日期选择器
- **Form** - 表单
- **Input** - 输入框
- **InputNumber** - 数字输入框
- **Radio** - 单选框
- **Rate** - 评分
- **Select** - 选择器
- **Slider** - 滑动输入条
- **Switch** - 开关
- **TimePicker** - 时间选择器
- **Transfer** - 穿梭框
- **TreeSelect** - 树选择
- **Upload** - 上传

### 数据展示组件
- **Avatar** - 头像
- **Badge** - 徽标数
- **Calendar** - 日历
- **Card** - 卡片
- **Carousel** - 走马灯
- **Collapse** - 折叠面板
- **Comment** - 评论
- **Descriptions** - 描述列表
- **Empty** - 空状态
- **Image** - 图片
- **List** - 列表
- **Popover** - 气泡卡片
- **Statistic** - 统计数值
- **Table** - 表格
- **Tabs** - 标签页
- **Tag** - 标签
- **Timeline** - 时间轴
- **Tooltip** - 文字提示
- **Tree** - 树形控件

### 反馈组件
- **Alert** - 警告提示
- **Drawer** - 抽屉
- **Message** - 全局提示
- **Modal** - 对话框
- **Notification** - 通知提醒框
- **Popconfirm** - 气泡确认框
- **Progress** - 进度条
- **Result** - 结果
- **Skeleton** - 骨架屏
- **Spin** - 加载中

### Button 组件示例

```tsx
// 不同类型
<Button>Default</Button>
<Button type="primary">Primary</Button>
<Button type="dashed">Dashed</Button>
<Button type="link">Link</Button>
<Button type="text">Text</Button>
<Button danger>Danger</Button>

// 不同尺寸
<Button size="small">Small</Button>
<Button size="middle">Middle</Button>
<Button size="large">Large</Button>

// 不同状态
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>
<Button ghost>Ghost</Button>
```

## 🛠️ 开发

### 项目结构

```
packages/components/
├── .storybook/          # Storybook 配置
├── stories/             # 组件故事文件
│   └── Button.stories.tsx
├── dist/                # 构建输出目录
├── index.tsx            # 主入口文件
├── package.json         # 包配置
├── tsconfig.json        # TypeScript 配置
└── vite.config.ts       # Vite 配置
### 开发命令

```bash
# 构建组件库
pnpm run build

# 启动 Storybook 开发服务器
pnpm run dev

# 监听模式构建
pnpm run build:watch

# 类型检查
pnpm run type-check

# 代码检查
pnpm run lint

# 修复代码格式
pnpm run lint:fix

# 清理构建文件
pnpm run clean
```

## 📋 依赖

### 核心依赖
- `antd` - Ant Design React 组件库
- `@ant-design/icons` - Ant Design 图标库
- `clsx` - 条件类名工具

### 对等依赖
- `react >= 18.0.0`
- `react-dom >= 18.0.0`

## 🔧 配置

### TypeScript 支持

本组件库完全支持 TypeScript，所有组件都包含类型定义。

### 主题定制

你可以通过 Ant Design 的主题系统来定制组件样式：

```js
// tailwind.config.js
const { theme } = require('antd')

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
          DEFAULT: "#3b82f6",
        },
      },
    },
  },
}
```

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系

- 邮箱: jiaxue@jncode.cn
- 仓库: [GitHub](https://github.com/jncode/jncode)