Skip to content

Commit 2b4fdf9

Browse files
hotlonghotlong
authored
Merge pull request #200 from objectstack-ai/copilot/compare-components-implementations
2 parents e5c704a + 64b03ae commit 2b4fdf9

File tree

12 files changed

+2993
-1
lines changed

12 files changed

+2993
-1
lines changed

‎.github/workflows/shadcn-check.yml‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
name: Check Shadcn Components
2+
3+
on:
4+
# Run weekly on Mondays at 9:00 AM UTC
5+
schedule:
6+
- cron: '0 9 * * 1'
7+
8+
# Allow manual trigger
9+
workflow_dispatch:
10+
11+
jobs:
12+
check-components:
13+
name: Check for Shadcn Component Updates
14+
runs-on: ubuntu-latest
15+
16+
steps:
17+
- name: Checkout code
18+
uses: actions/checkout@v4
19+
20+
- name: Setup pnpm
21+
uses: pnpm/action-setup@v2
22+
with:
23+
version: 9
24+
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: '20'
29+
cache: 'pnpm'
30+
31+
- name: Install dependencies
32+
run: pnpm install --frozen-lockfile
33+
34+
- name: Analyze components (offline)
35+
id: analyze
36+
run: |
37+
echo "Running offline component analysis..."
38+
pnpm shadcn:analyze > analysis.txt
39+
cat analysis.txt
40+
continue-on-error: true
41+
42+
- name: Check component status (online)
43+
id: check
44+
run: |
45+
echo "Checking component status against Shadcn registry..."
46+
pnpm shadcn:check > check.txt
47+
cat check.txt
48+
continue-on-error: true
49+
50+
- name: Upload analysis results
51+
uses: actions/upload-artifact@v4
52+
if: always()
53+
with:
54+
name: shadcn-analysis
55+
path: |
56+
analysis.txt
57+
check.txt
58+
retention-days: 30
59+
60+
- name: Create issue if components are outdated
61+
if: failure()
62+
uses: actions/github-script@v7
63+
with:
64+
script: |
65+
const fs = require('fs');
66+
67+
let body = '## Shadcn Components Status Report\n\n';
68+
body += 'The weekly component sync check has detected issues or updates.\n\n';
69+
70+
if (fs.existsSync('analysis.txt')) {
71+
const analysis = fs.readFileSync('analysis.txt', 'utf8');
72+
body += '### Offline Analysis\n\n';
73+
body += '```\n' + analysis.substring(0, 5000) + '\n```\n\n';
74+
}
75+
76+
if (fs.existsSync('check.txt')) {
77+
const check = fs.readFileSync('check.txt', 'utf8');
78+
body += '### Online Check Results\n\n';
79+
body += '```\n' + check.substring(0, 5000) + '\n```\n\n';
80+
}
81+
82+
body += '### Next Steps\n\n';
83+
body += '1. Review the analysis results above\n';
84+
body += '2. Run `pnpm shadcn:analyze` locally for detailed information\n';
85+
body += '3. Update components as needed with `pnpm shadcn:update <component>`\n';
86+
body += '4. See [SHADCN_SYNC.md](../blob/main/docs/SHADCN_SYNC.md) for detailed guide\n\n';
87+
body += '> This issue was automatically created by the Shadcn Components Check workflow.\n';
88+
89+
// Check if there's already an open issue
90+
const issues = await github.rest.issues.listForRepo({
91+
owner: context.repo.owner,
92+
repo: context.repo.repo,
93+
state: 'open',
94+
labels: 'shadcn-sync',
95+
});
96+
97+
if (issues.data.length > 0) {
98+
// Update existing issue
99+
await github.rest.issues.createComment({
100+
owner: context.repo.owner,
101+
repo: context.repo.repo,
102+
issue_number: issues.data[0].number,
103+
body: '## Updated Check Results\n\n' + body,
104+
});
105+
} else {
106+
// Create new issue
107+
await github.rest.issues.create({
108+
owner: context.repo.owner,
109+
repo: context.repo.repo,
110+
title: 'Shadcn Components Need Review',
111+
body: body,
112+
labels: ['maintenance', 'shadcn-sync', 'dependencies'],
113+
});
114+
}

‎docs/COMPONENT_SYNC_SUMMARY.md‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# Component Sync Tools Summary
2+
3+
## 问题 / Problem
4+
对比目前 components 基础组件 和 https://ui.shadcn.com/docs/components 的实现差异，要求全部使用基础组件，需要有脚本来更新最新版本。
5+
6+
Compare current component implementations with https://ui.shadcn.com/docs/components, ensure all use base components, and need scripts to update to latest versions.
7+
8+
## 解决方案 / Solution
9+
10+
已创建完整的组件同步工具集，包括：
11+
Created a complete component sync toolset including:
12+
13+
### 1. 组件清单 / Component Manifest
14+
**文件:** `packages/components/shadcn-components.json`
15+
16+
- 追踪 46 个 Shadcn 基础组件
17+
- 追踪 14 个自定义 ObjectUI 组件
18+
- 记录每个组件的依赖关系和注册源
19+
20+
- Tracks 46 Shadcn base components
21+
- Tracks 14 custom ObjectUI components
22+
- Records dependencies and registry sources for each component
23+
24+
### 2. 在线同步脚本 / Online Sync Script
25+
**文件:** `scripts/shadcn-sync.js`
26+
27+
功能 / Features:
28+
- ✓ 检查组件状态 (`pnpm shadcn:check`)
29+
- ✓ 更新单个组件 (`pnpm shadcn:update <name>`)
30+
- ✓ 批量更新所有组件 (`pnpm shadcn:update-all`)
31+
- ✓ 对比差异 (`pnpm shadcn:diff <name>`)
32+
- ✓ 列出所有组件 (`pnpm shadcn:list`)
33+
34+
要求网络访问 ui.shadcn.com
35+
Requires network access to ui.shadcn.com
36+
37+
### 3. 离线分析脚本 / Offline Analysis Script
38+
**文件:** `scripts/component-analysis.js`
39+
40+
功能 / Features:
41+
- ✓ 分析本地组件 (`pnpm shadcn:analyze`)
42+
- ✓ 识别定制化级别（未修改/轻度/重度）
43+
- ✓ 检测 data-slot 属性、自定义变体、暗黑模式增强
44+
- ✓ 提供基于复杂度的更新建议
45+
- ✓ 完全离线工作，无需网络
46+
47+
- Analyze local components
48+
- Identify customization levels (unmodified/light/heavy)
49+
- Detect data-slots, custom variants, dark mode enhancements
50+
- Provide update recommendations based on complexity
51+
- Works completely offline without network
52+
53+
### 4. 自动化工作流 / Automated Workflow
54+
**文件:** `.github/workflows/shadcn-check.yml`
55+
56+
- 每周一自动检查组件更新
57+
- 发现过时组件时创建 Issue
58+
- 可手动触发
59+
60+
- Auto-check for component updates every Monday
61+
- Creates issue when outdated components detected
62+
- Can be manually triggered
63+
64+
### 5. 文档 / Documentation
65+
- `docs/SHADCN_SYNC.md` - 完整同步指南 / Complete sync guide
66+
- `docs/SHADCN_QUICK_START.md` - 快速开始指南 / Quick start guide
67+
- `packages/components/README_SHADCN_SYNC.md` - 组件同步参考 / Component sync reference
68+
69+
## 使用方法 / Usage
70+
71+
### 快速分析 / Quick Analysis
72+
```bash
73+
# 离线分析（推荐首先运行）
74+
# Offline analysis (recommended to run first)
75+
npm run shadcn:analyze
76+
```
77+
78+
### 检查更新 / Check for Updates
79+
```bash
80+
# 在线检查（需要网络）
81+
# Online check (requires internet)
82+
npm run shadcn:check
83+
```
84+
85+
### 更新组件 / Update Components
86+
```bash
87+
# 更新单个组件（带备份）
88+
# Update single component (with backup)
89+
npm run shadcn:update button -- --backup
90+
91+
# 更新所有组件（带备份）
92+
# Update all components (with backup)
93+
npm run shadcn:update-all
94+
```
95+
96+
### 查看差异 / View Differences
97+
```bash
98+
# 查看特定组件的差异
99+
# View differences for specific component
100+
npm run shadcn:diff button
101+
```
102+
103+
## 分析结果 / Analysis Results
104+
105+
### 组件分类 / Component Classification
106+
107+
**✅ 安全更新 (4个) / Safe to Update (4 components)**
108+
- calendar, sonner, table, toast
109+
- 最小定制化，可直接更新 / Minimal customization, can update directly
110+
111+
**⚠️ 需审查 (37个) / Review Required (37 components)**
112+
- 大多数表单和导航组件 / Most form and navigation components
113+
- 主要定制：data-slot 属性 / Main customization: data-slot attributes
114+
- 更新前需检查差异 / Check differences before updating
115+
116+
**🔧 手动合并 (5个) / Manual Merge (5 components)**
117+
- card, form, label, skeleton, tabs
118+
- 重度定制化（玻璃态效果、表单集成等）/ Heavy customization (glassmorphism, form integration, etc.)
119+
- 需要手动合并更新 / Requires manual merge for updates
120+
121+
**● 不要更新 (14个) / Do Not Update (14 components)**
122+
- button-group, calendar-view, chatbot, combobox, date-picker, empty, field, filter-builder, input-group, item, kbd, spinner, timeline, toaster
123+
- ObjectUI 自定义组件 / ObjectUI custom components
124+
- 不存在于 Shadcn / Not in Shadcn
125+
126+
### 依赖关系 / Dependencies
127+
- 27 个 Radix UI 包 / 27 Radix UI packages
128+
- 7 个外部依赖 / 7 external dependencies
129+
130+
## 工作流建议 / Recommended Workflow
131+
132+
### 方案1: 更新单个安全组件 / Update Single Safe Component
133+
```bash
134+
npm run shadcn:analyze # 1. 分析 / Analyze
135+
npm run shadcn:update toast -- --backup # 2. 更新 / Update
136+
git diff packages/components/src/ui/toast.tsx # 3. 检查 / Review
137+
# 4. 测试和提交 / Test and commit
138+
```
139+
140+
### 方案2: 批量更新组件 / Batch Update Components
141+
```bash
142+
git checkout -b chore/update-shadcn # 1. 创建分支 / Create branch
143+
npm run shadcn:update-all # 2. 更新所有 / Update all
144+
git diff packages/components/src/ui/ # 3. 审查变更 / Review changes
145+
# 4. 测试、提交、推送 / Test, commit, push
146+
```
147+
148+
### 方案3: 手动更新定制组件 / Manual Update Custom Components
149+
1. 访问 Shadcn 文档获取最新代码 / Visit Shadcn docs for latest code
150+
2. 复制组件代码 / Copy component code
151+
3. 调整导入路径 / Adjust import paths
152+
4. 恢复 ObjectUI 定制化 / Restore ObjectUI customizations
153+
5. 测试并提交 / Test and commit
154+
155+
## 下一步 / Next Steps
156+
157+
建议定期（每月或每季度）运行分析脚本，检查是否有需要更新的组件。
158+
159+
Recommended to run analysis script periodically (monthly or quarterly) to check for components needing updates.
160+
161+
使用 GitHub Actions 工作流自动化检查过程。
162+
163+
Use GitHub Actions workflow to automate the checking process.
164+
165+
## 相关链接 / Related Links
166+
167+
- [Shadcn UI 文档 / Shadcn UI Docs](https://ui.shadcn.com)
168+
- [Radix UI 文档 / Radix UI Docs](https://www.radix-ui.com)
169+
- [完整同步指南 / Full Sync Guide](./SHADCN_SYNC.md)
170+
- [快速开始 / Quick Start](./SHADCN_QUICK_START.md)

0 commit comments

Comments
 (0)