open-index/open-npm huggingface dataset:
npm package: @jrchan/commontools
Description: React component library with TypeScript and PropTypes validation
Author: diaojw
Latest version: 1.0.0

# React UI 组件库

基于 Monorepo 架构的 React 组件库，采用 TypeScript + PropTypes 双重校验，使用 Rollup 进行打包。

## 特性

- 🏗️ **Monorepo 架构**: 使用 npm workspaces 管理多包项目
- 🔒 **双重类型校验**: TypeScript 编译时校验 + PropTypes 运行时校验
- 📦 **Rollup 打包**: 支持 ESM 和 CJS 两种格式输出
- 🎨 **代码规范**: ESLint + Prettier 确保代码质量
- 🚀 **开发体验**: 热更新开发环境，完整的 TypeScript 支持

## 项目结构

```
组件库/
├── packages/
│   ├── components/          # 组件包
│   │   ├── src/
│   │   │   ├── Toast/      # Toast 组件
│   │   │   └── index.ts    # 入口文件
│   │   ├── types/          # TypeScript 声明
│   │   └── package.json
│   ├── utils/              # 工具包
│   │   ├── src/
│   │   └── package.json
│   └── example/            # 示例应用
│       ├── src/
│       └── package.json
├── rollup.config.js        # Rollup 配置
├── tsconfig.json           # TypeScript 配置
├── .eslintrc.js           # ESLint 配置
├── .prettierrc            # Prettier 配置
└── package.json           # 根配置
```

## 安装依赖

```bash
pnpm install
```

## 开发命令

```bash
# 启动开发服务器（示例应用）
pnpm run dev

# 构建组件库
pnpm run build

# 代码格式化
pnpm run format

# 代码检查
pnpm run lint

# 类型检查
pnpm run type-check

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

## 技术栈

- **React 18** - 用户界面库
- **TypeScript** - 类型安全
- **PropTypes** - 运行时类型校验
- **Rollup** - 打包工具
- **ESLint + Prettier** - 代码质量
- **Vite** - 开发工具
- **npm workspaces** - Monorepo 管理

## Git 配置

项目包含以下 Git 配置文件：

- **`.gitignore`** - 忽略不必要的文件（依赖、构建产物、缓存等）
- **`.gitattributes`** - 配置行尾符和语言检测
- **`packages/example/.gitignore`** - 示例应用特定的忽略规则

### 构建产物策略

- 组件库的 `dist/` 目录默认不被忽略，以便 npm 发布
- 示例应用的构建产物被忽略，不需要提交

## 开发指南

### 添加新组件

1. 在 `packages/components/src/` 下创建组件目录
2. 创建组件文件、类型定义、样式文件
3. 添加 PropTypes 验证
4. 在 `src/index.ts` 中导出组件
5. 在示例应用中添加使用演示

### 代码规范

项目使用 ESLint 和 Prettier 确保代码质量：

- 使用 TypeScript 严格模式
- 组件必须添加 PropTypes 验证
- 遵循 React Hooks 规范
- 使用 Prettier 格式化代码

## 构建产物

构建后会生成以下文件：

```
packages/components/dist/
├── index.esm.js     # ES Module 格式
├── index.cjs.js     # CommonJS 格式
└── index.d.ts       # TypeScript 声明文件
```

## 许可证

MIT
npm package: @jrdan-dev/jrdan-ui
Description: Component library by jrdan.dev
Latest version: 0.5.0

# @jordan-cod/jrdan-ui

Component library by [jrdan.dev](https://jrdan.dev). Built with React, Tailwind CSS v4, Radix UI, and CVA.

## Components

| Component | Description |
|-----------|-------------|
| **Button** | 3D press-down effect button with 6 variants and 8 sizes |
| **Typography** | Text component with semantic variants (h1-h5, lead, p, small, stat, blockquote) |
| **Breadcrumb** | Accessible breadcrumb navigation with separator and ellipsis support |

## Installation

This package is hosted on GitHub Packages. Configure your `.npmrc`:

```
@jordan-cod:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_TOKEN
```

Then install:

```bash
pnpm add @jordan-cod/jrdan-ui
```

## Usage

```tsx
import { Button, Typography, Breadcrumb } from "@jordan-cod/jrdan-ui";
```

### Button

```tsx
<Button variant="default">Click me</Button>
<Button variant="destructive" size="sm">Delete</Button>
<Button variant="ghost" size="icon"><Icon /></Button>
```

**Variants:** `default`, `destructive`, `outline`, `secondary`, `ghost`, `link`

**Sizes:** `default`, `xs`, `sm`, `lg`, `icon`, `icon-xs`, `icon-sm`, `icon-lg`

### Typography

```tsx
<Typography variant="h1">Hero Title</Typography>
<Typography variant="lead">Introduction text</Typography>
<Typography variant="stat">55k+</Typography>
<Typography variant="h3" as="h1">h3 style as h1 element</Typography>
```

**Variants:** `h1`, `h2`, `h3`, `h4`, `h5`, `lead`, `p`, `small`, `blockquote`, `stat`

### Breadcrumb

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## Tailwind CSS Setup

Add the `@source` directive in your CSS so Tailwind scans the library classes:

```css
@import "tailwindcss";
@source "../../node_modules/@jordan-cod/jrdan-ui/dist";
```

The library uses CSS variables for theming (`--primary`, `--background`, etc.). Define them in your project or import the included theme:

```css
@import "@jordan-cod/jrdan-ui/styles.css";
```

## Development

```bash
pnpm install       # Install dependencies
pnpm dev           # Start Storybook
pnpm build         # Build the library
```

## Publishing

Bump the version in `package.json` and push to `main`. GitHub Actions will automatically build, publish to GitHub Packages, and create a release.

## Tech Stack

- [React](https://react.dev)
- [Tailwind CSS v4](https://tailwindcss.com)
- [Radix UI](https://radix-ui.com)
- [CVA](https://cva.style)
- [tsup](https://tsup.egoist.dev)
- [Storybook](https://storybook.js.org)

## License

MIT