From 96ee04212d15221c9bcc6a1f98fa806d1a57ac2b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 03:36:20 +0000 Subject: [PATCH 1/4] Initial plan From 16442b93bad6b85e71fe65124dd99af0c29be533 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 03:43:36 +0000 Subject: [PATCH 2/4] feat(components): add Shadcn component sync and analysis tools Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- docs/SHADCN_SYNC.md | 408 ++++++++++++++++++++ package.json | 7 + packages/components/README_SHADCN_SYNC.md | 281 ++++++++++++++ packages/components/shadcn-components.json | 307 +++++++++++++++ scripts/component-analysis.js | 286 ++++++++++++++ scripts/shadcn-sync.js | 416 +++++++++++++++++++++ 6 files changed, 1705 insertions(+) create mode 100644 docs/SHADCN_SYNC.md create mode 100644 packages/components/README_SHADCN_SYNC.md create mode 100644 packages/components/shadcn-components.json create mode 100755 scripts/component-analysis.js create mode 100755 scripts/shadcn-sync.js diff --git a/docs/SHADCN_SYNC.md b/docs/SHADCN_SYNC.md new file mode 100644 index 00000000..e2bdfbf2 --- /dev/null +++ b/docs/SHADCN_SYNC.md @@ -0,0 +1,408 @@ +# Shadcn Components Sync Guide + +This guide explains how to keep ObjectUI components synchronized with the latest Shadcn UI components. + +## Overview + +ObjectUI is built on top of Shadcn UI components. This sync script helps you: + +1. **Compare** local components with Shadcn's latest versions +2. **Update** components to the latest Shadcn implementation +3. **Track** which components are custom vs. from Shadcn +4. **Maintain** consistency with the Shadcn ecosystem + +## Prerequisites + +### Network Access + +The sync script requires internet access to fetch components from the Shadcn registry at `https://ui.shadcn.com/registry`. If you're behind a corporate firewall or in a restricted environment, you may need to: + +1. Configure proxy settings +2. Use the offline mode (manual comparison) +3. Allow access to `ui.shadcn.com` in your firewall + +### Alternative: Official Shadcn CLI + +You can also use the official Shadcn CLI directly: + +```bash +# Install shadcn CLI globally +npm install -g shadcn@latest + +# Or use with npx +npx shadcn@latest add button + +# Update all components +npx shadcn@latest add --all --overwrite +``` + +However, this will overwrite ObjectUI customizations, so you'll need to manually restore: +- ObjectUI copyright headers +- Custom styling and variants +- data-slot attributes +- Integration code + +## Quick Start + +### Check Component Status + +```bash +node scripts/shadcn-sync.js --check +``` + +This will show: +- ✓ **Synced**: Components matching Shadcn +- ⚠ **Modified**: Components with customizations +- ● **Custom**: ObjectUI-specific components +- ✗ **Errors**: Components with issues + +### Update a Single Component + +```bash +# Update button component +node scripts/shadcn-sync.js --update button --backup + +# Update without backup +node scripts/shadcn-sync.js --update button +``` + +### Update All Components + +```bash +# Update all with backups (recommended) +node scripts/shadcn-sync.js --update-all --backup + +# Update all without backups +node scripts/shadcn-sync.js --update-all +``` + +### Show Component Diff + +```bash +node scripts/shadcn-sync.js --diff button +``` + +### List All Components + +```bash +node scripts/shadcn-sync.js --list +``` + +## Component Categories + +### Shadcn Components (40+ components) + +These are standard Shadcn UI components that can be updated from the registry: + +- **Forms**: `input`, `textarea`, `select`, `checkbox`, `radio-group`, `switch`, `form`, `label` +- **Layout**: `card`, `tabs`, `accordion`, `separator`, `scroll-area`, `resizable` +- **Overlay**: `dialog`, `popover`, `tooltip`, `hover-card`, `sheet`, `drawer` +- **Navigation**: `button`, `breadcrumb`, `navigation-menu`, `dropdown-menu`, `context-menu`, `menubar`, `pagination` +- **Data**: `table`, `avatar`, `badge`, `skeleton`, `progress`, `slider` +- **Feedback**: `alert`, `alert-dialog`, `toast`, `sonner` +- **Advanced**: `command`, `carousel`, `sidebar`, `collapsible` + +### Custom ObjectUI Components (14 components) + +These are custom components specific to ObjectUI and should NOT be auto-updated: + +- `button-group` - Button group wrapper +- `calendar-view` - Full calendar view +- `chatbot` - Chatbot interface +- `combobox` - Combo box (select + input) +- `date-picker` - Date picker wrapper +- `empty` - Empty state component +- `field` - Form field wrapper +- `filter-builder` - Query filter builder +- `input-group` - Input with addons +- `input-otp` - OTP input (from Shadcn but customized) +- `item` - Generic item component +- `kbd` - Keyboard key display +- `spinner` - Loading spinner +- `timeline` - Timeline component +- `toaster` - Toast container + +## Component Manifest + +Component metadata is tracked in `packages/components/shadcn-components.json`: + +```json +{ + "components": { + "button": { + "source": "https://ui.shadcn.com/registry/styles/default/button.json", + "dependencies": ["@radix-ui/react-slot"], + "registryDependencies": [] + } + }, + "customComponents": { + "button-group": { + "description": "Custom ObjectUI component", + "dependencies": ["button"] + } + } +} +``` + +## Workflow + +### Option 1: Update Individual Components (Recommended) + +Best for selective updates and careful testing: + +```bash +# 1. Check which components are outdated +node scripts/shadcn-sync.js --check + +# 2. Review what changed +node scripts/shadcn-sync.js --diff button + +# 3. Update with backup +node scripts/shadcn-sync.js --update button --backup + +# 4. Review changes +git diff packages/components/src/ui/button.tsx + +# 5. Test the component +pnpm --filter @object-ui/components test + +# 6. If good, commit +git add packages/components/src/ui/button.tsx +git commit -m "chore(components): update button to latest Shadcn version" +``` + +### Option 2: Bulk Update All Components + +Best for major version syncs: + +```bash +# 1. Create backups +node scripts/shadcn-sync.js --update-all --backup + +# 2. Review all changes +git diff packages/components/src/ui/ + +# 3. Check for breaking changes in key components +# (especially: form, input, button, card, dialog) + +# 4. Test thoroughly +pnpm --filter @object-ui/components build +pnpm test + +# 5. Commit if all tests pass +git add packages/components/src/ui/ +git commit -m "chore(components): sync all components with Shadcn UI" +``` + +## Important Considerations + +### 1. Custom Modifications + +ObjectUI components may have customizations: + +- **data-slot attributes** - Used for styling and component identification +- **Additional variants** - Extra CVA variants for ObjectUI themes +- **Dark mode enhancements** - Enhanced dark mode support +- **Accessibility improvements** - Extra ARIA attributes +- **Integration code** - Integration with ObjectUI's renderer system + +After updating, you may need to re-apply these customizations. + +### 2. Breaking Changes + +Shadcn components occasionally have breaking changes: + +- Check the [Shadcn UI changelog](https://github.com/shadcn-ui/ui/releases) +- Review prop changes in updated components +- Test all ObjectUI examples and demos +- Update TypeScript types if needed + +### 3. Dependencies + +Component updates may require dependency updates: + +```bash +# Check if new Radix UI versions are needed +pnpm --filter @object-ui/components outdated + +# Update specific dependency +pnpm --filter @object-ui/components add @radix-ui/react-dialog@latest +``` + +### 4. Backups + +Backups are stored in `packages/components/.backup/`: + +```bash +# List backups +ls -la packages/components/.backup/ + +# Restore from backup +cp packages/components/.backup/button.tsx.1234567890.backup \ + packages/components/src/ui/button.tsx +``` + +## Adding New Shadcn Components + +To add a component that exists in Shadcn but not in ObjectUI: + +1. **Update the manifest** (`shadcn-components.json`): + +```json +{ + "components": { + "new-component": { + "source": "https://ui.shadcn.com/registry/styles/default/new-component.json", + "dependencies": ["@radix-ui/react-*"], + "registryDependencies": ["button", "label"] + } + } +} +``` + +2. **Download the component**: + +```bash +node scripts/shadcn-sync.js --update new-component +``` + +3. **Install dependencies** (if needed): + +```bash +pnpm --filter @object-ui/components add @radix-ui/react-* +``` + +4. **Export in index.ts**: + +```typescript +export * from './ui/new-component' +``` + +5. **Create a renderer** (if needed for schema usage): + +```typescript +// packages/components/src/renderers/new-component-renderer.tsx +import { registerRenderer } from '@object-ui/react' +import { NewComponent } from '../ui/new-component' + +export function registerNewComponentRenderer() { + registerRenderer('new-component', NewComponent) +} +``` + +## Troubleshooting + +### Script Errors + +If the sync script fails: + +```bash +# Check Node.js version (needs v20+) +node --version + +# Check network connectivity to Shadcn registry +curl https://ui.shadcn.com/registry/styles/default/button.json + +# Run with verbose output +node scripts/shadcn-sync.js --check 2>&1 | tee sync-log.txt +``` + +### Build Errors After Update + +```bash +# Clear build cache +rm -rf packages/components/dist +rm -rf node_modules/.vite + +# Rebuild +pnpm --filter @object-ui/components build + +# Check TypeScript errors +pnpm --filter @object-ui/components type-check +``` + +### Test Failures + +```bash +# Run tests in watch mode +pnpm --filter @object-ui/components test:watch + +# Run with coverage +pnpm --filter @object-ui/components test:coverage + +# Check specific component test +pnpm test -- button.test +``` + +## CI/CD Integration + +Add to your GitHub Actions workflow: + +```yaml +name: Check Shadcn Components + +on: + schedule: + # Run weekly on Mondays + - cron: '0 0 * * 1' + workflow_dispatch: + +jobs: + check-components: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v2 + - uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install + + - name: Check component status + run: node scripts/shadcn-sync.js --check + + - name: Create issue if outdated + if: failure() + uses: actions/github-script@v7 + with: + script: | + github.rest.issues.create({ + owner: context.repo.owner, + repo: context.repo.repo, + title: 'Components need Shadcn sync', + body: 'Run `node scripts/shadcn-sync.js --check` for details' + }) +``` + +## Best Practices + +1. ✅ **Always create backups** when updating components +2. ✅ **Test after each update** - Don't update all at once +3. ✅ **Review diffs carefully** - Look for breaking changes +4. ✅ **Update dependencies** together with components +5. ✅ **Document customizations** - Add comments explaining ObjectUI-specific code +6. ✅ **Run full test suite** before committing +7. ✅ **Check examples** - Make sure demos still work +8. ✅ **Update docs** if component APIs change + +## Resources + +- [Shadcn UI Documentation](https://ui.shadcn.com) +- [Shadcn UI GitHub](https://github.com/shadcn-ui/ui) +- [Radix UI Documentation](https://www.radix-ui.com) +- [ObjectUI Documentation](https://objectui.org) + +## Support + +If you encounter issues: + +1. Check the [ObjectUI Issues](https://github.com/objectstack-ai/objectui/issues) +2. Review [Shadcn UI Discussions](https://github.com/shadcn-ui/ui/discussions) +3. Open an issue with: + - Component name + - Error message + - Output of `--check` command + - Node.js version diff --git a/package.json b/package.json index 66fdfd6c..fa310226 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "object-ui-monorepo", "private": true, + "type": "module", "license": "MIT", "homepage": "https://www.objectui.org", "engines": { @@ -31,6 +32,12 @@ "check": "node packages/cli/dist/cli.js check", "generate": "node packages/cli/dist/cli.js generate", "g": "node packages/cli/dist/cli.js generate", + "shadcn:analyze": "node scripts/component-analysis.js", + "shadcn:check": "node scripts/shadcn-sync.js --check", + "shadcn:update": "node scripts/shadcn-sync.js --update", + "shadcn:update-all": "node scripts/shadcn-sync.js --update-all --backup", + "shadcn:diff": "node scripts/shadcn-sync.js --diff", + "shadcn:list": "node scripts/shadcn-sync.js --list", "changeset": "changeset", "changeset:version": "changeset version", "changeset:publish": "changeset publish" diff --git a/packages/components/README_SHADCN_SYNC.md b/packages/components/README_SHADCN_SYNC.md new file mode 100644 index 00000000..5da2856d --- /dev/null +++ b/packages/components/README_SHADCN_SYNC.md @@ -0,0 +1,281 @@ +# Shadcn Components Synchronization + +This directory contains tools for keeping ObjectUI components in sync with Shadcn UI. + +## Files + +- `shadcn-components.json` - Component manifest tracking Shadcn components and custom ObjectUI components +- `shadcn-sync.js` - Automated sync script (requires network access to ui.shadcn.com) + +## Component Categories + +### Shadcn Components (46) + +These components come from Shadcn UI and can be updated from the registry: + +**Form Controls:** +- input, textarea, select, checkbox, radio-group, switch, form, label, input-otp + +**Layout:** +- card, tabs, accordion, separator, scroll-area, resizable + +**Overlays:** +- dialog, popover, tooltip, hover-card, sheet, drawer, alert-dialog + +**Navigation:** +- button, breadcrumb, navigation-menu, dropdown-menu, context-menu, menubar, pagination + +**Data Display:** +- table, avatar, badge, skeleton, progress, slider + +**Feedback:** +- alert, toast, sonner + +**Advanced:** +- command, carousel, sidebar, collapsible, calendar, aspect-ratio, toggle, toggle-group + +### Custom ObjectUI Components (14) + +These are custom to ObjectUI and should NOT be auto-updated: + +- `button-group` - Button group wrapper +- `calendar-view` - Full calendar implementation +- `chatbot` - Chatbot UI interface +- `combobox` - Combined select/input component +- `date-picker` - Date picker with calendar +- `empty` - Empty state component +- `field` - Form field wrapper with validation +- `filter-builder` - Advanced query builder +- `input-group` - Input with prefix/suffix +- `item` - Generic item display +- `kbd` - Keyboard shortcut display +- `spinner` - Loading spinner +- `timeline` - Timeline/activity feed +- `toaster` - Toast notification manager + +## Usage + +### Automated Sync (Requires Internet) + +```bash +# Check component status +pnpm shadcn:check + +# Update a specific component +pnpm shadcn:update button + +# Update all components +pnpm shadcn:update-all + +# Show diff for a component +pnpm shadcn:diff button + +# List all components +pnpm shadcn:list +``` + +### Manual Sync Process + +If you don't have network access or prefer manual control: + +1. **Visit Shadcn UI Documentation** + - Go to https://ui.shadcn.com/docs/components/[component-name] + - Click "View Code" to see the latest implementation + +2. **Compare with Local Version** + ```bash + # View local component + cat packages/components/src/ui/button.tsx + ``` + +3. **Copy Latest Version** + - Copy the component code from Shadcn docs + - Paste into a temporary file + +4. **Adjust Imports** + Replace Shadcn imports: + ```typescript + // FROM: + import { cn } from "@/lib/utils" + import { Button } from "@/components/ui/button" + + // TO: + import { cn } from "../lib/utils" + import { Button } from "./button" + ``` + +5. **Add ObjectUI Header** + ```typescript + /** + * ObjectUI + * Copyright (c) 2024-present ObjectStack Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + ``` + +6. **Preserve Customizations** + - Keep any `data-slot` attributes + - Keep ObjectUI-specific variants + - Keep dark mode enhancements + - Keep accessibility improvements + +7. **Test the Component** + ```bash + pnpm --filter @object-ui/components build + pnpm --filter @object-ui/components test + ``` + +## Using Official Shadcn CLI + +You can also use the official Shadcn CLI: + +```bash +# Install Shadcn CLI +npm install -g shadcn@latest + +# Initialize (if not done) +cd packages/components +npx shadcn@latest init + +# Add/update a component +npx shadcn@latest add button --overwrite + +# Add all components +npx shadcn@latest add --all --overwrite +``` + +**⚠️ Warning:** This will overwrite all ObjectUI customizations! You'll need to: + +1. Review the diff carefully: `git diff src/ui/` +2. Restore ObjectUI copyright headers +3. Re-add any custom variants or styling +4. Re-add data-slot attributes +5. Test thoroughly + +## Checking for Updates + +### Manual Check + +1. Visit [Shadcn UI GitHub](https://github.com/shadcn-ui/ui/tree/main/apps/www/registry/default/ui) +2. Compare file dates with last update +3. Check [Shadcn Releases](https://github.com/shadcn-ui/ui/releases) for changelog + +### Compare Dependencies + +```bash +# Check Radix UI versions +cat packages/components/package.json | grep @radix-ui + +# Check latest versions +npm view @radix-ui/react-dialog version +npm view @radix-ui/react-select version +``` + +### Review Breaking Changes + +Check Shadcn's changelog: +- [UI Changelog](https://github.com/shadcn-ui/ui/releases) +- [Radix UI Releases](https://github.com/radix-ui/primitives/releases) + +## Common Customizations in ObjectUI + +When updating components, preserve these ObjectUI patterns: + +### 1. Copyright Headers + +```typescript +/** + * ObjectUI + * Copyright (c) 2024-present ObjectStack Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +``` + +### 2. Data Slot Attributes + +```typescript +
+``` + +### 3. Additional Variants + +```typescript +const buttonVariants = cva( + "...", + { + variants: { + // ObjectUI-specific variants + size: { + "icon-sm": "h-8 w-8", // Extra size variant + "icon-lg": "h-10 w-10", // Extra size variant + } + } + } +) +``` + +### 4. Enhanced Dark Mode + +ObjectUI may have enhanced dark mode styles: + +```typescript +className="... dark:bg-background/95 dark:backdrop-blur-sm" +``` + +## Testing After Updates + +```bash +# Type check +pnpm --filter @object-ui/components type-check + +# Build +pnpm --filter @object-ui/components build + +# Run tests +pnpm --filter @object-ui/components test + +# Visual regression (if available) +pnpm --filter @object-ui/components storybook + +# Integration test +pnpm test +``` + +## Rollback + +If an update causes issues: + +```bash +# Revert specific file +git checkout HEAD -- packages/components/src/ui/button.tsx + +# Revert all UI components +git checkout HEAD -- packages/components/src/ui/ + +# Restore from backup (if created) +cp packages/components/.backup/button.tsx.* packages/components/src/ui/button.tsx +``` + +## Contributing + +When you update a component: + +1. Document the changes in CHANGELOG.md +2. Update the version in shadcn-components.json (add lastUpdated field) +3. Test with all examples +4. Create a PR with: + - Component name in title + - Reason for update + - Breaking changes (if any) + - Screenshots (if visual changes) + +## Resources + +- [Shadcn UI Docs](https://ui.shadcn.com) +- [Radix UI Docs](https://www.radix-ui.com) +- [Tailwind CSS Docs](https://tailwindcss.com) +- [CVA (Class Variance Authority)](https://cva.style) diff --git a/packages/components/shadcn-components.json b/packages/components/shadcn-components.json new file mode 100644 index 00000000..c6460cd0 --- /dev/null +++ b/packages/components/shadcn-components.json @@ -0,0 +1,307 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/index.css", + "baseColor": "slate", + "cssVariables": true + }, + "aliases": { + "components": "@/ui", + "utils": "@/lib/utils" + }, + "registry": "https://ui.shadcn.com/registry", + "components": { + "accordion": { + "source": "https://ui.shadcn.com/registry/styles/default/accordion.json", + "dependencies": ["@radix-ui/react-accordion"], + "registryDependencies": [] + }, + "alert": { + "source": "https://ui.shadcn.com/registry/styles/default/alert.json", + "dependencies": [], + "registryDependencies": [] + }, + "alert-dialog": { + "source": "https://ui.shadcn.com/registry/styles/default/alert-dialog.json", + "dependencies": ["@radix-ui/react-alert-dialog"], + "registryDependencies": ["button"] + }, + "aspect-ratio": { + "source": "https://ui.shadcn.com/registry/styles/default/aspect-ratio.json", + "dependencies": ["@radix-ui/react-aspect-ratio"], + "registryDependencies": [] + }, + "avatar": { + "source": "https://ui.shadcn.com/registry/styles/default/avatar.json", + "dependencies": ["@radix-ui/react-avatar"], + "registryDependencies": [] + }, + "badge": { + "source": "https://ui.shadcn.com/registry/styles/default/badge.json", + "dependencies": [], + "registryDependencies": [] + }, + "breadcrumb": { + "source": "https://ui.shadcn.com/registry/styles/default/breadcrumb.json", + "dependencies": [], + "registryDependencies": [] + }, + "button": { + "source": "https://ui.shadcn.com/registry/styles/default/button.json", + "dependencies": ["@radix-ui/react-slot"], + "registryDependencies": [] + }, + "calendar": { + "source": "https://ui.shadcn.com/registry/styles/default/calendar.json", + "dependencies": ["react-day-picker", "date-fns"], + "registryDependencies": ["button"] + }, + "card": { + "source": "https://ui.shadcn.com/registry/styles/default/card.json", + "dependencies": [], + "registryDependencies": [] + }, + "carousel": { + "source": "https://ui.shadcn.com/registry/styles/default/carousel.json", + "dependencies": ["embla-carousel-react"], + "registryDependencies": ["button"] + }, + "checkbox": { + "source": "https://ui.shadcn.com/registry/styles/default/checkbox.json", + "dependencies": ["@radix-ui/react-checkbox"], + "registryDependencies": [] + }, + "collapsible": { + "source": "https://ui.shadcn.com/registry/styles/default/collapsible.json", + "dependencies": ["@radix-ui/react-collapsible"], + "registryDependencies": [] + }, + "command": { + "source": "https://ui.shadcn.com/registry/styles/default/command.json", + "dependencies": ["cmdk"], + "registryDependencies": ["dialog"] + }, + "context-menu": { + "source": "https://ui.shadcn.com/registry/styles/default/context-menu.json", + "dependencies": ["@radix-ui/react-context-menu"], + "registryDependencies": [] + }, + "dialog": { + "source": "https://ui.shadcn.com/registry/styles/default/dialog.json", + "dependencies": ["@radix-ui/react-dialog"], + "registryDependencies": [] + }, + "drawer": { + "source": "https://ui.shadcn.com/registry/styles/default/drawer.json", + "dependencies": ["vaul"], + "registryDependencies": [] + }, + "dropdown-menu": { + "source": "https://ui.shadcn.com/registry/styles/default/dropdown-menu.json", + "dependencies": ["@radix-ui/react-dropdown-menu"], + "registryDependencies": [] + }, + "form": { + "source": "https://ui.shadcn.com/registry/styles/default/form.json", + "dependencies": ["@radix-ui/react-label", "react-hook-form", "@hookform/resolvers"], + "registryDependencies": ["button", "label"] + }, + "hover-card": { + "source": "https://ui.shadcn.com/registry/styles/default/hover-card.json", + "dependencies": ["@radix-ui/react-hover-card"], + "registryDependencies": [] + }, + "input": { + "source": "https://ui.shadcn.com/registry/styles/default/input.json", + "dependencies": [], + "registryDependencies": [] + }, + "input-otp": { + "source": "https://ui.shadcn.com/registry/styles/default/input-otp.json", + "dependencies": ["input-otp"], + "registryDependencies": [] + }, + "label": { + "source": "https://ui.shadcn.com/registry/styles/default/label.json", + "dependencies": ["@radix-ui/react-label"], + "registryDependencies": [] + }, + "menubar": { + "source": "https://ui.shadcn.com/registry/styles/default/menubar.json", + "dependencies": ["@radix-ui/react-menubar"], + "registryDependencies": [] + }, + "navigation-menu": { + "source": "https://ui.shadcn.com/registry/styles/default/navigation-menu.json", + "dependencies": ["@radix-ui/react-navigation-menu"], + "registryDependencies": [] + }, + "pagination": { + "source": "https://ui.shadcn.com/registry/styles/default/pagination.json", + "dependencies": [], + "registryDependencies": ["button"] + }, + "popover": { + "source": "https://ui.shadcn.com/registry/styles/default/popover.json", + "dependencies": ["@radix-ui/react-popover"], + "registryDependencies": [] + }, + "progress": { + "source": "https://ui.shadcn.com/registry/styles/default/progress.json", + "dependencies": ["@radix-ui/react-progress"], + "registryDependencies": [] + }, + "radio-group": { + "source": "https://ui.shadcn.com/registry/styles/default/radio-group.json", + "dependencies": ["@radix-ui/react-radio-group"], + "registryDependencies": [] + }, + "resizable": { + "source": "https://ui.shadcn.com/registry/styles/default/resizable.json", + "dependencies": ["react-resizable-panels"], + "registryDependencies": [] + }, + "scroll-area": { + "source": "https://ui.shadcn.com/registry/styles/default/scroll-area.json", + "dependencies": ["@radix-ui/react-scroll-area"], + "registryDependencies": [] + }, + "select": { + "source": "https://ui.shadcn.com/registry/styles/default/select.json", + "dependencies": ["@radix-ui/react-select"], + "registryDependencies": [] + }, + "separator": { + "source": "https://ui.shadcn.com/registry/styles/default/separator.json", + "dependencies": ["@radix-ui/react-separator"], + "registryDependencies": [] + }, + "sheet": { + "source": "https://ui.shadcn.com/registry/styles/default/sheet.json", + "dependencies": ["@radix-ui/react-dialog"], + "registryDependencies": [] + }, + "sidebar": { + "source": "https://ui.shadcn.com/registry/styles/default/sidebar.json", + "dependencies": ["@radix-ui/react-separator", "@radix-ui/react-slot"], + "registryDependencies": ["button", "separator", "sheet", "skeleton", "tooltip"] + }, + "skeleton": { + "source": "https://ui.shadcn.com/registry/styles/default/skeleton.json", + "dependencies": [], + "registryDependencies": [] + }, + "slider": { + "source": "https://ui.shadcn.com/registry/styles/default/slider.json", + "dependencies": ["@radix-ui/react-slider"], + "registryDependencies": [] + }, + "sonner": { + "source": "https://ui.shadcn.com/registry/styles/default/sonner.json", + "dependencies": ["sonner", "next-themes"], + "registryDependencies": [] + }, + "switch": { + "source": "https://ui.shadcn.com/registry/styles/default/switch.json", + "dependencies": ["@radix-ui/react-switch"], + "registryDependencies": [] + }, + "table": { + "source": "https://ui.shadcn.com/registry/styles/default/table.json", + "dependencies": [], + "registryDependencies": [] + }, + "tabs": { + "source": "https://ui.shadcn.com/registry/styles/default/tabs.json", + "dependencies": ["@radix-ui/react-tabs"], + "registryDependencies": [] + }, + "textarea": { + "source": "https://ui.shadcn.com/registry/styles/default/textarea.json", + "dependencies": [], + "registryDependencies": [] + }, + "toast": { + "source": "https://ui.shadcn.com/registry/styles/default/toast.json", + "dependencies": ["@radix-ui/react-toast"], + "registryDependencies": [] + }, + "toggle": { + "source": "https://ui.shadcn.com/registry/styles/default/toggle.json", + "dependencies": ["@radix-ui/react-toggle"], + "registryDependencies": [] + }, + "toggle-group": { + "source": "https://ui.shadcn.com/registry/styles/default/toggle-group.json", + "dependencies": ["@radix-ui/react-toggle-group"], + "registryDependencies": [] + }, + "tooltip": { + "source": "https://ui.shadcn.com/registry/styles/default/tooltip.json", + "dependencies": ["@radix-ui/react-tooltip"], + "registryDependencies": [] + } + }, + "customComponents": { + "button-group": { + "description": "Custom ObjectUI component - Button group wrapper", + "dependencies": ["button"] + }, + "calendar-view": { + "description": "Custom ObjectUI component - Full calendar view", + "dependencies": ["calendar"] + }, + "chatbot": { + "description": "Custom ObjectUI component - Chatbot interface", + "dependencies": ["card", "input", "button"] + }, + "combobox": { + "description": "Custom ObjectUI component - Combo box (select + input)", + "dependencies": ["popover", "command"] + }, + "date-picker": { + "description": "Custom ObjectUI component - Date picker wrapper", + "dependencies": ["calendar", "popover", "button"] + }, + "empty": { + "description": "Custom ObjectUI component - Empty state", + "dependencies": [] + }, + "field": { + "description": "Custom ObjectUI component - Form field wrapper", + "dependencies": ["label"] + }, + "filter-builder": { + "description": "Custom ObjectUI component - Query filter builder", + "dependencies": ["select", "input", "button"] + }, + "input-group": { + "description": "Custom ObjectUI component - Input group with addons", + "dependencies": ["input"] + }, + "item": { + "description": "Custom ObjectUI component - Generic item component", + "dependencies": [] + }, + "kbd": { + "description": "Custom ObjectUI component - Keyboard key display", + "dependencies": [] + }, + "spinner": { + "description": "Custom ObjectUI component - Loading spinner", + "dependencies": [] + }, + "timeline": { + "description": "Custom ObjectUI component - Timeline component", + "dependencies": [] + }, + "toaster": { + "description": "Custom ObjectUI component - Toast container", + "dependencies": ["toast"] + } + } +} diff --git a/scripts/component-analysis.js b/scripts/component-analysis.js new file mode 100755 index 00000000..3c0e1d59 --- /dev/null +++ b/scripts/component-analysis.js @@ -0,0 +1,286 @@ +#!/usr/bin/env node + +/** + * Offline Component Analysis Script + * + * Analyzes ObjectUI components to identify customizations vs base Shadcn structure + * Works without network access by examining local files + * + * Usage: node scripts/component-analysis.js + */ + +import fs from 'fs/promises'; +import path from 'path'; +import { fileURLToPath } from 'url'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const REPO_ROOT = path.join(__dirname, '..'); +const COMPONENTS_DIR = path.join(REPO_ROOT, 'packages/components/src/ui'); +const MANIFEST_PATH = path.join(REPO_ROOT, 'packages/components/shadcn-components.json'); + +const colors = { + reset: '\x1b[0m', + bright: '\x1b[1m', + dim: '\x1b[2m', + red: '\x1b[31m', + green: '\x1b[32m', + yellow: '\x1b[33m', + blue: '\x1b[34m', + cyan: '\x1b[36m', + white: '\x1b[37m', +}; + +function log(message, color = 'white') { + console.log(`${colors[color]}${message}${colors.reset}`); +} + +function logSection(title) { + console.log('\n' + '='.repeat(70)); + log(title, 'bright'); + console.log('='.repeat(70) + '\n'); +} + +async function loadManifest() { + const content = await fs.readFile(MANIFEST_PATH, 'utf-8'); + return JSON.parse(content); +} + +async function analyzeComponent(name, filePath) { + const content = await fs.readFile(filePath, 'utf-8'); + const lines = content.split('\n'); + + const analysis = { + name, + lines: lines.length, + hasObjectUIHeader: content.includes('ObjectUI') && content.includes('ObjectStack Inc'), + hasDataSlots: content.includes('data-slot'), + hasCustomVariants: false, + imports: { + radix: [], + local: [], + external: [], + }, + exports: [], + customizations: [], + }; + + // Analyze imports + for (const line of lines) { + if (line.includes('from "@radix-ui/')) { + const match = line.match(/@radix-ui\/([^"']+)/); + if (match) analysis.imports.radix.push(match[1]); + } else if (line.includes('from "../')) { + const match = line.match(/from ["']\.\.\/([^"']+)/); + if (match) analysis.imports.local.push(match[1]); + } else if (line.includes('from "') && !line.includes('react')) { + const match = line.match(/from ["']([^"']+)/); + if (match && !match[1].startsWith('.')) { + analysis.imports.external.push(match[1]); + } + } + } + + // Check for exports + const exportMatches = content.matchAll(/export (?:const|function|interface|type) (\w+)/g); + for (const match of exportMatches) { + analysis.exports.push(match[1]); + } + + // Detect customizations + if (content.includes('icon-sm') || content.includes('icon-lg')) { + analysis.customizations.push('Extra size variants (icon-sm, icon-lg)'); + analysis.hasCustomVariants = true; + } + + if (content.includes('backdrop-blur')) { + analysis.customizations.push('Glassmorphism effects'); + } + + if (content.includes('dark:bg-') && content.match(/dark:bg-[^\s"']+/g)?.length > 5) { + analysis.customizations.push('Enhanced dark mode styling'); + } + + if (content.includes('data-slot')) { + analysis.customizations.push(`Data-slot attributes (${content.match(/data-slot/g).length} instances)`); + } + + if (content.includes('@hookform/resolvers') || content.includes('useFormContext')) { + analysis.customizations.push('React Hook Form integration'); + } + + if (content.includes('ObjectUI') && lines[0].includes('/**')) { + analysis.customizations.push('ObjectUI copyright header'); + } + + // Check if significantly different from typical Shadcn component + const typicalShadcnLines = { + 'button': 70, + 'input': 30, + 'label': 25, + 'card': 80, + 'dialog': 200, + 'select': 250, + 'form': 180, + }; + + if (typicalShadcnLines[name]) { + const expectedLines = typicalShadcnLines[name]; + const diff = Math.abs(analysis.lines - expectedLines); + if (diff > expectedLines * 0.3) { // More than 30% difference + analysis.customizations.push(`Significantly different size (${analysis.lines} vs ~${expectedLines} lines)`); + } + } + + return analysis; +} + +async function main() { + logSection('ObjectUI Components Analysis (Offline Mode)'); + + const manifest = await loadManifest(); + const files = await fs.readdir(COMPONENTS_DIR); + const componentFiles = files.filter(f => f.endsWith('.tsx')); + + log(`Analyzing ${componentFiles.length} components...`, 'cyan'); + log(`Manifest tracks ${Object.keys(manifest.components).length} Shadcn components`, 'dim'); + log(`Manifest tracks ${Object.keys(manifest.customComponents).length} custom components\n`, 'dim'); + + const analyses = []; + + for (const file of componentFiles.sort()) { + const name = file.replace('.tsx', ''); + const filePath = path.join(COMPONENTS_DIR, file); + const analysis = await analyzeComponent(name, filePath); + analyses.push(analysis); + } + + // Categorize components + const shadcnComponents = analyses.filter(a => manifest.components[a.name]); + const customComponents = analyses.filter(a => manifest.customComponents[a.name]); + const unknownComponents = analyses.filter(a => + !manifest.components[a.name] && !manifest.customComponents[a.name] + ); + + // Report Shadcn components with customizations + logSection('Shadcn Components - Customization Analysis'); + + const heavilyCustomized = []; + const lightlyCustomized = []; + const unmodified = []; + + for (const analysis of shadcnComponents) { + if (analysis.customizations.length === 0 || + (analysis.customizations.length === 1 && analysis.hasObjectUIHeader)) { + unmodified.push(analysis); + } else if (analysis.customizations.length >= 3) { + heavilyCustomized.push(analysis); + } else { + lightlyCustomized.push(analysis); + } + } + + log(`📊 Customization Levels:`, 'cyan'); + log(` ✓ Unmodified: ${unmodified.length} components`, 'green'); + log(` ⚡ Light customization: ${lightlyCustomized.length} components`, 'yellow'); + log(` 🔧 Heavy customization: ${heavilyCustomized.length} components\n`, 'blue'); + + if (heavilyCustomized.length > 0) { + log('🔧 Heavily Customized Components:', 'blue'); + for (const a of heavilyCustomized) { + log(`\n ${a.name} (${a.lines} lines)`, 'bright'); + for (const custom of a.customizations) { + log(` • ${custom}`, 'dim'); + } + } + } + + if (lightlyCustomized.length > 0) { + log('\n⚡ Lightly Customized Components:', 'yellow'); + for (const a of lightlyCustomized) { + const customs = a.customizations.filter(c => !c.includes('copyright')); + if (customs.length > 0) { + log(` • ${a.name.padEnd(25)} ${customs.join(', ')}`, 'dim'); + } + } + } + + // Report custom components + logSection('Custom ObjectUI Components'); + + log(`Found ${customComponents.length} custom components:\n`, 'cyan'); + for (const a of customComponents) { + const desc = manifest.customComponents[a.name]?.description || 'No description'; + log(` • ${a.name.padEnd(20)} (${String(a.lines).padStart(3)} lines) ${colors.dim}${desc}${colors.reset}`); + } + + // Report dependencies + logSection('Dependency Summary'); + + const allRadixDeps = new Set(); + const allExternalDeps = new Set(); + + for (const a of analyses) { + a.imports.radix.forEach(dep => allRadixDeps.add(dep)); + a.imports.external.forEach(dep => allExternalDeps.add(dep)); + } + + log('Radix UI Dependencies:', 'cyan'); + Array.from(allRadixDeps).sort().forEach(dep => { + const count = analyses.filter(a => a.imports.radix.includes(dep)).length; + log(` • @radix-ui/${dep.padEnd(30)} (used by ${count} components)`, 'dim'); + }); + + log('\nExternal Dependencies:', 'cyan'); + Array.from(allExternalDeps).sort().forEach(dep => { + const count = analyses.filter(a => a.imports.external.includes(dep)).length; + log(` • ${dep.padEnd(35)} (used by ${count} components)`, 'dim'); + }); + + // Recommendations + logSection('Update Recommendations'); + + log('✅ Safe to update (minimal customizations):', 'green'); + for (const a of unmodified.slice(0, 10)) { + log(` • ${a.name}`, 'dim'); + } + if (unmodified.length > 10) { + log(` ... and ${unmodified.length - 10} more`, 'dim'); + } + + log('\n⚠️ Review carefully before updating (moderate customizations):', 'yellow'); + for (const a of lightlyCustomized) { + log(` • ${a.name}`, 'dim'); + } + + log('\n🔧 Manual merge required (heavy customizations):', 'blue'); + for (const a of heavilyCustomized) { + log(` • ${a.name}`, 'dim'); + } + + log('\n● Do NOT update (custom ObjectUI components):', 'red'); + for (const a of customComponents) { + log(` • ${a.name}`, 'dim'); + } + + // Summary stats + logSection('Summary'); + + log(`Total components: ${analyses.length}`, 'bright'); + log(`Shadcn-based: ${shadcnComponents.length}`, 'cyan'); + log(`Custom ObjectUI: ${customComponents.length}`, 'blue'); + if (unknownComponents.length > 0) { + log(`Unknown/Untracked: ${unknownComponents.length}`, 'red'); + } + log(`\nRadix UI dependencies: ${allRadixDeps.size}`, 'dim'); + log(`External dependencies: ${allExternalDeps.size}`, 'dim'); + + console.log(''); +} + +main().catch(error => { + log(`Fatal error: ${error.message}`, 'red'); + console.error(error); + process.exit(1); +}); diff --git a/scripts/shadcn-sync.js b/scripts/shadcn-sync.js new file mode 100755 index 00000000..6fc15e08 --- /dev/null +++ b/scripts/shadcn-sync.js @@ -0,0 +1,416 @@ +#!/usr/bin/env node + +/** + * Shadcn Components Sync Script + * + * This script compares ObjectUI components with the latest Shadcn UI components + * and provides options to update them to the latest version. + * + * Usage: + * node scripts/shadcn-sync.js [options] + * + * Options: + * --check Check for component differences (default) + * --update Update specific component from Shadcn registry + * --update-all Update all components from Shadcn registry + * --diff Show detailed diff for a component + * --list List all components + * --backup Create backup before updating + */ + +import fs from 'fs/promises'; +import path from 'path'; +import { fileURLToPath } from 'url'; +import https from 'https'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const REPO_ROOT = path.join(__dirname, '..'); +const COMPONENTS_DIR = path.join(REPO_ROOT, 'packages/components/src/ui'); +const MANIFEST_PATH = path.join(REPO_ROOT, 'packages/components/shadcn-components.json'); +const BACKUP_DIR = path.join(REPO_ROOT, 'packages/components/.backup'); + +// ANSI color codes +const colors = { + reset: '\x1b[0m', + bright: '\x1b[1m', + dim: '\x1b[2m', + red: '\x1b[31m', + green: '\x1b[32m', + yellow: '\x1b[33m', + blue: '\x1b[34m', + cyan: '\x1b[36m', + white: '\x1b[37m', +}; + +function log(message, color = 'white') { + console.log(`${colors[color]}${message}${colors.reset}`); +} + +function logSection(title) { + console.log('\n' + '='.repeat(60)); + log(title, 'bright'); + console.log('='.repeat(60) + '\n'); +} + +async function fetchUrl(url) { + return new Promise((resolve, reject) => { + https.get(url, (res) => { + let data = ''; + res.on('data', (chunk) => { data += chunk; }); + res.on('end', () => { + try { + resolve(JSON.parse(data)); + } catch (e) { + resolve(data); + } + }); + }).on('error', reject); + }); +} + +async function loadManifest() { + try { + const content = await fs.readFile(MANIFEST_PATH, 'utf-8'); + return JSON.parse(content); + } catch (error) { + log(`Error loading manifest: ${error.message}`, 'red'); + process.exit(1); + } +} + +async function getLocalComponents() { + try { + const files = await fs.readdir(COMPONENTS_DIR); + return files + .filter(f => f.endsWith('.tsx')) + .map(f => f.replace('.tsx', '')); + } catch (error) { + log(`Error reading components directory: ${error.message}`, 'red'); + process.exit(1); + } +} + +async function checkComponent(name, manifest) { + const componentInfo = manifest.components[name]; + if (!componentInfo) { + return { + name, + status: 'custom', + message: 'Custom ObjectUI component (not in Shadcn)', + }; + } + + const localPath = path.join(COMPONENTS_DIR, `${name}.tsx`); + try { + const localContent = await fs.readFile(localPath, 'utf-8'); + const localLines = localContent.split('\n').length; + + // Fetch latest from registry + try { + const registryData = await fetchUrl(componentInfo.source); + const shadcnContent = registryData.files?.[0]?.content || ''; + const shadcnLines = shadcnContent.split('\n').length; + + // Simple heuristic: check if significantly different + const lineDiff = Math.abs(localLines - shadcnLines); + const isDifferent = lineDiff > 10 || localContent.includes('ObjectUI') || localContent.includes('data-slot'); + + return { + name, + status: isDifferent ? 'modified' : 'synced', + localLines, + shadcnLines, + lineDiff, + message: isDifferent ? + `Modified (${lineDiff} lines difference)` : + 'Synced with Shadcn', + }; + } catch (fetchError) { + return { + name, + status: 'error', + message: `Error fetching from registry: ${fetchError.message}`, + }; + } + } catch (error) { + return { + name, + status: 'error', + message: `Error reading local file: ${error.message}`, + }; + } +} + +async function checkAllComponents() { + logSection('Checking Components Status'); + + const manifest = await loadManifest(); + const localComponents = await getLocalComponents(); + + log(`Found ${localComponents.length} local components`, 'cyan'); + log(`Tracking ${Object.keys(manifest.components).length} Shadcn components`, 'cyan'); + log(`Tracking ${Object.keys(manifest.customComponents).length} custom components\n`, 'cyan'); + + const results = { + synced: [], + modified: [], + custom: [], + error: [], + }; + + for (const component of localComponents) { + const result = await checkComponent(component, manifest); + results[result.status].push(result); + + const symbol = { + synced: '✓', + modified: '⚠', + custom: '●', + error: '✗', + }[result.status]; + + const color = { + synced: 'green', + modified: 'yellow', + custom: 'blue', + error: 'red', + }[result.status]; + + log(`${symbol} ${result.name.padEnd(25)} ${result.message}`, color); + } + + // Summary + logSection('Summary'); + log(`✓ Synced: ${results.synced.length} components`, 'green'); + log(`⚠ Modified: ${results.modified.length} components`, 'yellow'); + log(`● Custom: ${results.custom.length} components`, 'blue'); + log(`✗ Errors: ${results.error.length} components`, 'red'); + + if (results.modified.length > 0) { + log('\nTo update a component:', 'cyan'); + log(' node scripts/shadcn-sync.js --update ', 'dim'); + log(' node scripts/shadcn-sync.js --update-all', 'dim'); + } + + return results; +} + +async function createBackup(componentName) { + await fs.mkdir(BACKUP_DIR, { recursive: true }); + const sourcePath = path.join(COMPONENTS_DIR, `${componentName}.tsx`); + const backupPath = path.join(BACKUP_DIR, `${componentName}.tsx.${Date.now()}.backup`); + + try { + await fs.copyFile(sourcePath, backupPath); + log(`Created backup: ${path.basename(backupPath)}`, 'dim'); + } catch (error) { + log(`Warning: Could not create backup: ${error.message}`, 'yellow'); + } +} + +async function updateComponent(name, manifest, options = {}) { + const componentInfo = manifest.components[name]; + + if (!componentInfo) { + log(`Component "${name}" not found in Shadcn registry (might be custom)`, 'red'); + return false; + } + + log(`\nUpdating ${name}...`, 'cyan'); + + try { + // Fetch from registry + const registryData = await fetchUrl(componentInfo.source); + + if (!registryData.files || registryData.files.length === 0) { + log(`No files found in registry for ${name}`, 'red'); + return false; + } + + let content = registryData.files[0].content; + + // Transform imports to match ObjectUI structure + content = content.replace( + /from ["']@\/lib\/utils["']/g, + 'from "../lib/utils"' + ); + content = content.replace( + /from ["']@\/components\/ui\/([^"']+)["']/g, + 'from "./$1"' + ); + + // Add ObjectUI header + const header = `/** + * ObjectUI + * Copyright (c) 2024-present ObjectStack Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +`; + + content = header + content; + + // Create backup if requested + if (options.backup) { + await createBackup(name); + } + + // Write updated component + const targetPath = path.join(COMPONENTS_DIR, `${name}.tsx`); + await fs.writeFile(targetPath, content, 'utf-8'); + + log(`✓ Updated ${name}.tsx`, 'green'); + + // Check and log dependencies + if (componentInfo.dependencies.length > 0) { + log(` Dependencies: ${componentInfo.dependencies.join(', ')}`, 'dim'); + } + if (componentInfo.registryDependencies.length > 0) { + log(` Registry deps: ${componentInfo.registryDependencies.join(', ')}`, 'dim'); + } + + return true; + } catch (error) { + log(`✗ Error updating ${name}: ${error.message}`, 'red'); + return false; + } +} + +async function updateAllComponents(options = {}) { + logSection('Updating All Components from Shadcn Registry'); + + const manifest = await loadManifest(); + const componentNames = Object.keys(manifest.components); + + if (options.backup) { + log('Creating backups...', 'cyan'); + } + + let updated = 0; + let failed = 0; + + for (const name of componentNames) { + const success = await updateComponent(name, manifest, options); + if (success) { + updated++; + } else { + failed++; + } + + // Small delay to avoid rate limiting + await new Promise(resolve => setTimeout(resolve, 100)); + } + + logSection('Update Complete'); + log(`✓ Updated: ${updated} components`, 'green'); + if (failed > 0) { + log(`✗ Failed: ${failed} components`, 'red'); + } + + log('\nNext steps:', 'cyan'); + log('1. Review the changes: git diff packages/components/src/ui/', 'dim'); + log('2. Test the components: pnpm test', 'dim'); + log('3. Build the package: pnpm --filter @object-ui/components build', 'dim'); +} + +async function showDiff(name) { + logSection(`Component Diff: ${name}`); + + const manifest = await loadManifest(); + const componentInfo = manifest.components[name]; + + if (!componentInfo) { + log(`Component "${name}" not found in registry`, 'red'); + return; + } + + try { + const localPath = path.join(COMPONENTS_DIR, `${name}.tsx`); + const localContent = await fs.readFile(localPath, 'utf-8'); + const registryData = await fetchUrl(componentInfo.source); + const shadcnContent = registryData.files?.[0]?.content || ''; + + log('Local version:', 'cyan'); + console.log(localContent.substring(0, 500) + '...\n'); + + log('Shadcn version:', 'cyan'); + console.log(shadcnContent.substring(0, 500) + '...\n'); + + log(`Local: ${localContent.split('\n').length} lines`, 'dim'); + log(`Shadcn: ${shadcnContent.split('\n').length} lines`, 'dim'); + } catch (error) { + log(`Error: ${error.message}`, 'red'); + } +} + +async function listComponents() { + logSection('Component List'); + + const manifest = await loadManifest(); + + log('Shadcn Components:', 'cyan'); + Object.keys(manifest.components).sort().forEach(name => { + console.log(` • ${name}`); + }); + + log('\nCustom ObjectUI Components:', 'blue'); + Object.entries(manifest.customComponents).sort().forEach(([name, info]) => { + console.log(` • ${name.padEnd(20)} ${colors.dim}${info.description}${colors.reset}`); + }); +} + +// Main CLI +async function main() { + const args = process.argv.slice(2); + + if (args.length === 0 || args.includes('--check')) { + await checkAllComponents(); + } else if (args.includes('--update-all')) { + const backup = args.includes('--backup'); + await updateAllComponents({ backup }); + } else if (args.includes('--update')) { + const idx = args.indexOf('--update'); + const componentName = args[idx + 1]; + if (!componentName) { + log('Error: --update requires a component name', 'red'); + process.exit(1); + } + const manifest = await loadManifest(); + const backup = args.includes('--backup'); + await updateComponent(componentName, manifest, { backup }); + } else if (args.includes('--diff')) { + const idx = args.indexOf('--diff'); + const componentName = args[idx + 1]; + if (!componentName) { + log('Error: --diff requires a component name', 'red'); + process.exit(1); + } + await showDiff(componentName); + } else if (args.includes('--list')) { + await listComponents(); + } else if (args.includes('--help') || args.includes('-h')) { + logSection('Shadcn Components Sync Script'); + console.log('Usage: node scripts/shadcn-sync.js [options]\n'); + console.log('Options:'); + console.log(' --check Check for component differences (default)'); + console.log(' --update Update specific component from Shadcn'); + console.log(' --update-all Update all components from Shadcn'); + console.log(' --diff Show detailed diff for a component'); + console.log(' --list List all components'); + console.log(' --backup Create backup before updating'); + console.log(' --help, -h Show this help message\n'); + } else { + log('Unknown option. Use --help for usage information.', 'red'); + process.exit(1); + } +} + +main().catch(error => { + log(`Fatal error: ${error.message}`, 'red'); + console.error(error); + process.exit(1); +}); From b4d0bfff6c8540f43b3e0dea56360a0bd6db2f7d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 03:46:06 +0000 Subject: [PATCH 3/4] docs: add comprehensive component sync documentation and GitHub workflow Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- .github/workflows/shadcn-check.yml | 114 ++++++++++++++++ docs/COMPONENT_SYNC_SUMMARY.md | 170 +++++++++++++++++++++++ docs/SHADCN_QUICK_START.md | 212 +++++++++++++++++++++++++++++ packages/components/README.md | 20 ++- 4 files changed, 515 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/shadcn-check.yml create mode 100644 docs/COMPONENT_SYNC_SUMMARY.md create mode 100644 docs/SHADCN_QUICK_START.md diff --git a/.github/workflows/shadcn-check.yml b/.github/workflows/shadcn-check.yml new file mode 100644 index 00000000..a880f5bc --- /dev/null +++ b/.github/workflows/shadcn-check.yml @@ -0,0 +1,114 @@ +name: Check Shadcn Components + +on: + # Run weekly on Mondays at 9:00 AM UTC + schedule: + - cron: '0 9 * * 1' + + # Allow manual trigger + workflow_dispatch: + +jobs: + check-components: + name: Check for Shadcn Component Updates + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: 9 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Analyze components (offline) + id: analyze + run: | + echo "Running offline component analysis..." + pnpm shadcn:analyze > analysis.txt + cat analysis.txt + continue-on-error: true + + - name: Check component status (online) + id: check + run: | + echo "Checking component status against Shadcn registry..." + pnpm shadcn:check > check.txt + cat check.txt + continue-on-error: true + + - name: Upload analysis results + uses: actions/upload-artifact@v4 + if: always() + with: + name: shadcn-analysis + path: | + analysis.txt + check.txt + retention-days: 30 + + - name: Create issue if components are outdated + if: failure() + uses: actions/github-script@v7 + with: + script: | + const fs = require('fs'); + + let body = '## Shadcn Components Status Report\n\n'; + body += 'The weekly component sync check has detected issues or updates.\n\n'; + + if (fs.existsSync('analysis.txt')) { + const analysis = fs.readFileSync('analysis.txt', 'utf8'); + body += '### Offline Analysis\n\n'; + body += '```\n' + analysis.substring(0, 5000) + '\n```\n\n'; + } + + if (fs.existsSync('check.txt')) { + const check = fs.readFileSync('check.txt', 'utf8'); + body += '### Online Check Results\n\n'; + body += '```\n' + check.substring(0, 5000) + '\n```\n\n'; + } + + body += '### Next Steps\n\n'; + body += '1. Review the analysis results above\n'; + body += '2. Run `pnpm shadcn:analyze` locally for detailed information\n'; + body += '3. Update components as needed with `pnpm shadcn:update `\n'; + body += '4. See [SHADCN_SYNC.md](../blob/main/docs/SHADCN_SYNC.md) for detailed guide\n\n'; + body += '> This issue was automatically created by the Shadcn Components Check workflow.\n'; + + // Check if there's already an open issue + const issues = await github.rest.issues.listForRepo({ + owner: context.repo.owner, + repo: context.repo.repo, + state: 'open', + labels: 'shadcn-sync', + }); + + if (issues.data.length > 0) { + // Update existing issue + await github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: issues.data[0].number, + body: '## Updated Check Results\n\n' + body, + }); + } else { + // Create new issue + await github.rest.issues.create({ + owner: context.repo.owner, + repo: context.repo.repo, + title: 'Shadcn Components Need Review', + body: body, + labels: ['maintenance', 'shadcn-sync', 'dependencies'], + }); + } diff --git a/docs/COMPONENT_SYNC_SUMMARY.md b/docs/COMPONENT_SYNC_SUMMARY.md new file mode 100644 index 00000000..aaca5852 --- /dev/null +++ b/docs/COMPONENT_SYNC_SUMMARY.md @@ -0,0 +1,170 @@ +# Component Sync Tools Summary + +## 问题 / Problem +对比目前 components 基础组件 和 https://ui.shadcn.com/docs/components 的实现差异，要求全部使用基础组件，需要有脚本来更新最新版本。 + +Compare current component implementations with https://ui.shadcn.com/docs/components, ensure all use base components, and need scripts to update to latest versions. + +## 解决方案 / Solution + +已创建完整的组件同步工具集，包括： +Created a complete component sync toolset including: + +### 1. 组件清单 / Component Manifest +**文件:** `packages/components/shadcn-components.json` + +- 追踪 46 个 Shadcn 基础组件 +- 追踪 14 个自定义 ObjectUI 组件 +- 记录每个组件的依赖关系和注册源 + +- Tracks 46 Shadcn base components +- Tracks 14 custom ObjectUI components +- Records dependencies and registry sources for each component + +### 2. 在线同步脚本 / Online Sync Script +**文件:** `scripts/shadcn-sync.js` + +功能 / Features: +- ✓ 检查组件状态 (`pnpm shadcn:check`) +- ✓ 更新单个组件 (`pnpm shadcn:update `) +- ✓ 批量更新所有组件 (`pnpm shadcn:update-all`) +- ✓ 对比差异 (`pnpm shadcn:diff `) +- ✓ 列出所有组件 (`pnpm shadcn:list`) + +要求网络访问 ui.shadcn.com +Requires network access to ui.shadcn.com + +### 3. 离线分析脚本 / Offline Analysis Script +**文件:** `scripts/component-analysis.js` + +功能 / Features: +- ✓ 分析本地组件 (`pnpm shadcn:analyze`) +- ✓ 识别定制化级别（未修改/轻度/重度） +- ✓ 检测 data-slot 属性、自定义变体、暗黑模式增强 +- ✓ 提供基于复杂度的更新建议 +- ✓ 完全离线工作，无需网络 + +- Analyze local components +- Identify customization levels (unmodified/light/heavy) +- Detect data-slots, custom variants, dark mode enhancements +- Provide update recommendations based on complexity +- Works completely offline without network + +### 4. 自动化工作流 / Automated Workflow +**文件:** `.github/workflows/shadcn-check.yml` + +- 每周一自动检查组件更新 +- 发现过时组件时创建 Issue +- 可手动触发 + +- Auto-check for component updates every Monday +- Creates issue when outdated components detected +- Can be manually triggered + +### 5. 文档 / Documentation +- `docs/SHADCN_SYNC.md` - 完整同步指南 / Complete sync guide +- `docs/SHADCN_QUICK_START.md` - 快速开始指南 / Quick start guide +- `packages/components/README_SHADCN_SYNC.md` - 组件同步参考 / Component sync reference + +## 使用方法 / Usage + +### 快速分析 / Quick Analysis +```bash +# 离线分析（推荐首先运行） +# Offline analysis (recommended to run first) +npm run shadcn:analyze +``` + +### 检查更新 / Check for Updates +```bash +# 在线检查（需要网络） +# Online check (requires internet) +npm run shadcn:check +``` + +### 更新组件 / Update Components +```bash +# 更新单个组件（带备份） +# Update single component (with backup) +npm run shadcn:update button -- --backup + +# 更新所有组件（带备份） +# Update all components (with backup) +npm run shadcn:update-all +``` + +### 查看差异 / View Differences +```bash +# 查看特定组件的差异 +# View differences for specific component +npm run shadcn:diff button +``` + +## 分析结果 / Analysis Results + +### 组件分类 / Component Classification + +**✅ 安全更新 (4个) / Safe to Update (4 components)** +- calendar, sonner, table, toast +- 最小定制化，可直接更新 / Minimal customization, can update directly + +**⚠️ 需审查 (37个) / Review Required (37 components)** +- 大多数表单和导航组件 / Most form and navigation components +- 主要定制：data-slot 属性 / Main customization: data-slot attributes +- 更新前需检查差异 / Check differences before updating + +**🔧 手动合并 (5个) / Manual Merge (5 components)** +- card, form, label, skeleton, tabs +- 重度定制化（玻璃态效果、表单集成等）/ Heavy customization (glassmorphism, form integration, etc.) +- 需要手动合并更新 / Requires manual merge for updates + +**● 不要更新 (14个) / Do Not Update (14 components)** +- button-group, calendar-view, chatbot, combobox, date-picker, empty, field, filter-builder, input-group, item, kbd, spinner, timeline, toaster +- ObjectUI 自定义组件 / ObjectUI custom components +- 不存在于 Shadcn / Not in Shadcn + +### 依赖关系 / Dependencies +- 27 个 Radix UI 包 / 27 Radix UI packages +- 7 个外部依赖 / 7 external dependencies + +## 工作流建议 / Recommended Workflow + +### 方案1: 更新单个安全组件 / Update Single Safe Component +```bash +npm run shadcn:analyze # 1. 分析 / Analyze +npm run shadcn:update toast -- --backup # 2. 更新 / Update +git diff packages/components/src/ui/toast.tsx # 3. 检查 / Review +# 4. 测试和提交 / Test and commit +``` + +### 方案2: 批量更新组件 / Batch Update Components +```bash +git checkout -b chore/update-shadcn # 1. 创建分支 / Create branch +npm run shadcn:update-all # 2. 更新所有 / Update all +git diff packages/components/src/ui/ # 3. 审查变更 / Review changes +# 4. 测试、提交、推送 / Test, commit, push +``` + +### 方案3: 手动更新定制组件 / Manual Update Custom Components +1. 访问 Shadcn 文档获取最新代码 / Visit Shadcn docs for latest code +2. 复制组件代码 / Copy component code +3. 调整导入路径 / Adjust import paths +4. 恢复 ObjectUI 定制化 / Restore ObjectUI customizations +5. 测试并提交 / Test and commit + +## 下一步 / Next Steps + +建议定期（每月或每季度）运行分析脚本，检查是否有需要更新的组件。 + +Recommended to run analysis script periodically (monthly or quarterly) to check for components needing updates. + +使用 GitHub Actions 工作流自动化检查过程。 + +Use GitHub Actions workflow to automate the checking process. + +## 相关链接 / Related Links + +- [Shadcn UI 文档 / Shadcn UI Docs](https://ui.shadcn.com) +- [Radix UI 文档 / Radix UI Docs](https://www.radix-ui.com) +- [完整同步指南 / Full Sync Guide](./SHADCN_SYNC.md) +- [快速开始 / Quick Start](./SHADCN_QUICK_START.md) diff --git a/docs/SHADCN_QUICK_START.md b/docs/SHADCN_QUICK_START.md new file mode 100644 index 00000000..9906413c --- /dev/null +++ b/docs/SHADCN_QUICK_START.md @@ -0,0 +1,212 @@ +# Shadcn Component Sync - Quick Start Guide + +This guide helps you quickly get started with syncing ObjectUI components with Shadcn UI. + +## 🚀 Quick Commands + +```bash +# Analyze components (works offline) +pnpm shadcn:analyze + +# List all components +pnpm shadcn:list + +# Check status online (requires internet) +pnpm shadcn:check + +# Update a single component +pnpm shadcn:update button + +# Update all components with backups +pnpm shadcn:update-all +``` + +## 📊 Understanding the Analysis + +When you run `pnpm shadcn:analyze`, you'll see components categorized by customization level: + +### ✅ Safe to Update (4 components) +These have minimal ObjectUI customizations and can be updated directly: +- `calendar` +- `sonner` +- `table` +- `toast` + +**How to update:** +```bash +pnpm shadcn:update calendar --backup +``` + +### ⚠️ Review Before Updating (37 components) +These have light customizations (mainly data-slot attributes): +- Most form components: `input`, `checkbox`, `select`, etc. +- Navigation components: `dropdown-menu`, `menubar`, etc. +- Overlay components: `dialog`, `popover`, `tooltip`, etc. + +**How to update:** +1. Check what changed: `pnpm shadcn:diff input` +2. Update with backup: `pnpm shadcn:update input --backup` +3. Review changes: `git diff packages/components/src/ui/input.tsx` +4. Re-add data-slot attributes if needed +5. Test: `pnpm --filter @object-ui/components test` + +### 🔧 Manual Merge Required (5 components) +These have heavy customizations requiring careful manual merging: +- `card` - Glassmorphism effects, custom styling +- `form` - React Hook Form integration +- `label` - Enhanced with data-slots +- `skeleton` - Glassmorphism effects +- `tabs` - Glassmorphism, custom animations + +**How to update:** +1. Copy current file as reference +2. Get latest from Shadcn docs +3. Manually merge customizations +4. Test thoroughly + +### ● Never Update (14 components) +These are custom ObjectUI components, not from Shadcn: +- `button-group`, `calendar-view`, `chatbot`, `combobox` +- `date-picker`, `empty`, `field`, `filter-builder` +- `input-group`, `item`, `kbd`, `spinner` +- `timeline`, `toaster` + +## 🎯 Common Workflows + +### Workflow 1: Update a Single Safe Component + +```bash +# 1. Analyze to find safe components +pnpm shadcn:analyze + +# 2. Update with backup +pnpm shadcn:update toast --backup + +# 3. Review changes +git diff packages/components/src/ui/toast.tsx + +# 4. Test +pnpm --filter @object-ui/components build +pnpm --filter @object-ui/components test + +# 5. Commit if good +git add packages/components/src/ui/toast.tsx +git commit -m "chore(components): update toast to latest Shadcn" +``` + +### Workflow 2: Update Multiple Components + +```bash +# 1. Analyze first +pnpm shadcn:analyze + +# 2. Create a branch +git checkout -b chore/update-shadcn-components + +# 3. Update components one by one +pnpm shadcn:update button --backup +pnpm shadcn:update input --backup +pnpm shadcn:update select --backup + +# 4. Review all changes +git diff packages/components/src/ui/ + +# 5. Test everything +pnpm build +pnpm test + +# 6. Commit and push +git add packages/components/src/ui/ +git commit -m "chore(components): update form components to latest Shadcn" +git push origin chore/update-shadcn-components +``` + +### Workflow 3: Check for Updates (Weekly) + +```bash +# The GitHub Action runs automatically every Monday +# Or trigger manually: + +# 1. Go to GitHub Actions +# 2. Select "Check Shadcn Components" +# 3. Click "Run workflow" + +# Check the results: +# - If components are outdated, an issue will be created +# - Review the issue and follow recommendations +``` + +## 🔍 Troubleshooting + +### "Cannot reach ui.shadcn.com" + +If online sync fails due to network issues: + +1. **Use offline mode:** + ```bash + pnpm shadcn:analyze + ``` + +2. **Use official Shadcn CLI:** + ```bash + npx shadcn@latest add button --overwrite + # Then manually restore ObjectUI customizations + ``` + +3. **Manual process:** + - Visit https://ui.shadcn.com/docs/components/button + - Copy code from docs + - Update local file manually + +### "Component has customizations" + +If a component has ObjectUI customizations: + +1. **Create backup:** + ```bash + cp packages/components/src/ui/card.tsx packages/components/src/ui/card.tsx.backup + ``` + +2. **Update component:** + ```bash + pnpm shadcn:update card + ``` + +3. **Restore customizations:** + - Compare with backup: `diff card.tsx card.tsx.backup` + - Re-add data-slot attributes + - Re-add custom variants + - Re-add ObjectUI header + +4. **Test:** + ```bash + pnpm --filter @object-ui/components test + ``` + +## 📚 Learn More + +- [Full Sync Guide](../docs/SHADCN_SYNC.md) - Comprehensive documentation +- [Component README](../packages/components/README_SHADCN_SYNC.md) - Detailed reference +- [Shadcn UI Docs](https://ui.shadcn.com) - Official Shadcn documentation + +## 🤝 Need Help? + +- Check existing [GitHub Issues](https://github.com/objectstack-ai/objectui/issues?q=label%3Ashadcn-sync) +- Read the [Contributing Guide](../CONTRIBUTING.md) +- Open a new issue with the `shadcn-sync` label + +## 📝 Component Manifest + +The manifest at `packages/components/shadcn-components.json` tracks: + +- **46 Shadcn components** - Can be updated from registry +- **14 Custom components** - ObjectUI-specific, do not update + +To add a new Shadcn component: + +1. Add to manifest +2. Run `pnpm shadcn:update ` +3. Export in `src/index.ts` +4. Create renderer if needed +5. Add tests +6. Update docs diff --git a/packages/components/README.md b/packages/components/README.md index 20bc3510..6d638f75 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -6,10 +6,28 @@ Standard UI component library for Object UI, built with Shadcn UI + Tailwind CSS - 🎨 **Tailwind Native** - Built entirely with Tailwind CSS utility classes - 🧩 **Shadcn UI** - Based on Radix UI primitives for accessibility -- 📦 **50+ Components** - Complete set of UI components +- 📦 **60+ Components** - Complete set of UI components (46 from Shadcn + 14 custom) - ♿ **Accessible** - WCAG compliant components - 🎯 **Type-Safe** - Full TypeScript support - 🔌 **Extensible** - Easy to customize and extend +- 🔄 **Sync Tools** - Scripts to keep components updated with latest Shadcn + +## Keeping Components Updated + +ObjectUI provides tools to sync components with the latest Shadcn UI versions: + +```bash +# Analyze components (offline) +pnpm shadcn:analyze + +# Check for updates (online) +pnpm shadcn:check + +# Update a component +pnpm shadcn:update button --backup +``` + +**📚 See [SHADCN_SYNC.md](../../docs/SHADCN_SYNC.md) for the complete guide.** ## Installation From 64b03aedaa165d46ea69ffba7b4601ce4e6a263d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 26 Jan 2026 03:48:40 +0000 Subject: [PATCH 4/4] docs: add demo walkthrough and comprehensive README for Shadcn sync tools Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- docs/README_SHADCN_TOOLS.md | 290 ++++++++++++++++++++++ docs/SHADCN_DEMO.md | 483 ++++++++++++++++++++++++++++++++++++ 2 files changed, 773 insertions(+) create mode 100644 docs/README_SHADCN_TOOLS.md create mode 100644 docs/SHADCN_DEMO.md diff --git a/docs/README_SHADCN_TOOLS.md b/docs/README_SHADCN_TOOLS.md new file mode 100644 index 00000000..76772a1b --- /dev/null +++ b/docs/README_SHADCN_TOOLS.md @@ -0,0 +1,290 @@ +# Shadcn Component Sync Tools + +> 🇨🇳 **中文用户**: 查看 [COMPONENT_SYNC_SUMMARY.md](./COMPONENT_SYNC_SUMMARY.md) 获取中英文对照说明 + +**Complete toolset for keeping ObjectUI components synchronized with Shadcn UI.** + +## 🚀 Quick Start + +```bash +# 1. Analyze your components (offline, no network needed) +npm run shadcn:analyze + +# 2. List all components +npm run shadcn:list + +# 3. Update a component (online, needs internet) +npm run shadcn:update button -- --backup +``` + +## 📖 Documentation + +| Document | Description | When to Read | +|----------|-------------|--------------| +| **[Quick Start Guide](./SHADCN_QUICK_START.md)** | Fast introduction with common workflows | Start here! | +| **[Demo Walkthrough](./SHADCN_DEMO.md)** | Real examples and scenarios | Learning by example | +| **[Complete Sync Guide](./SHADCN_SYNC.md)** | Comprehensive reference | Deep dive | +| **[Component Reference](../packages/components/README_SHADCN_SYNC.md)** | Component-specific info | While updating | +| **[Bilingual Summary](./COMPONENT_SYNC_SUMMARY.md)** | English/Chinese summary | Quick reference | + +## 🎯 What Problem Does This Solve? + +ObjectUI is built on Shadcn UI components. When Shadcn releases updates: + +❌ **Without these tools:** +- No way to know which components are outdated +- Risk of overwriting ObjectUI customizations +- Manual comparison is time-consuming +- Easy to miss important updates + +✅ **With these tools:** +- Automatic detection of outdated components +- Safe updates with backups +- Clear identification of customizations +- Offline and online modes +- Automated weekly checks + +## 🛠️ Tools Included + +### 1. Offline Analysis (`shadcn:analyze`) + +Analyzes local components without requiring internet access. + +```bash +npm run shadcn:analyze +``` + +**Shows:** +- Customization levels (unmodified, light, heavy) +- Data-slot attributes +- Custom variants +- Dark mode enhancements +- Update recommendations + +### 2. Online Sync (`shadcn:check/update`) + +Fetches latest from Shadcn registry and updates components. + +```bash +# Check status +npm run shadcn:check + +# Update single component +npm run shadcn:update button -- --backup + +# Update all +npm run shadcn:update-all + +# Show diff +npm run shadcn:diff button +``` + +### 3. GitHub Actions Workflow + +Automatic weekly checks for outdated components. + +- Runs every Monday at 9:00 AM UTC +- Creates issues when updates detected +- Can be manually triggered + +## 📊 Current Status + +Based on the latest analysis: + +| Category | Count | Action | +|----------|-------|--------| +| ✅ Safe to Update | 4 | Can update directly | +| ⚠️ Review Required | 37 | Check diff first | +| 🔧 Manual Merge | 5 | Carefully merge changes | +| ● Custom Components | 14 | Do not update | + +### Components by Category + +**✅ Safe to Update:** +- `calendar`, `sonner`, `table`, `toast` + +**🔧 Need Manual Merge:** +- `card` - Glassmorphism effects +- `form` - React Hook Form integration +- `label` - Enhanced with data-slots +- `skeleton` - Glassmorphism effects +- `tabs` - Custom animations + +**● Custom ObjectUI (Do Not Update):** +- `button-group`, `calendar-view`, `chatbot`, `combobox` +- `date-picker`, `empty`, `field`, `filter-builder` +- `input-group`, `item`, `kbd`, `spinner` +- `timeline`, `toaster` + +## 💡 Common Use Cases + +### Use Case 1: Monthly Maintenance + +```bash +# Check for updates +npm run shadcn:analyze + +# Update safe components +npm run shadcn:update calendar -- --backup +npm run shadcn:update table -- --backup + +# Test and commit +npm test +git commit -am "chore: update safe components" +``` + +### Use Case 2: Shadcn Major Update + +```bash +# Analyze impact +npm run shadcn:analyze > before.txt + +# Update all with backups +npm run shadcn:update-all + +# Review changes +git diff packages/components/src/ui/ + +# Test thoroughly +npm test + +# Commit or revert +git commit -am "chore: update to Shadcn vX.Y.Z" +# OR +git checkout packages/components/src/ui/ +``` + +### Use Case 3: Adding New Component + +```bash +# Check if it exists in Shadcn +npm run shadcn:list | grep "my-component" + +# If yes, add to manifest then: +npm run shadcn:update my-component -- --backup + +# Export in index.ts +echo "export * from './ui/my-component'" >> packages/components/src/index.ts + +# Create renderer if needed +``` + +## 🎓 Learning Path + +1. **Beginner**: Read [Quick Start](./SHADCN_QUICK_START.md) +2. **Practice**: Follow [Demo Walkthrough](./SHADCN_DEMO.md) +3. **Master**: Study [Complete Guide](./SHADCN_SYNC.md) + +## ⚙️ Configuration + +### Component Manifest + +`packages/components/shadcn-components.json` tracks: + +```json +{ + "components": { + "button": { + "source": "https://ui.shadcn.com/registry/...", + "dependencies": ["@radix-ui/react-slot"] + } + }, + "customComponents": { + "button-group": { + "description": "Custom ObjectUI component" + } + } +} +``` + +### NPM Scripts + +Added to root `package.json`: + +```json +{ + "scripts": { + "shadcn:analyze": "node scripts/component-analysis.js", + "shadcn:check": "node scripts/shadcn-sync.js --check", + "shadcn:update": "node scripts/shadcn-sync.js --update", + "shadcn:update-all": "node scripts/shadcn-sync.js --update-all --backup", + "shadcn:diff": "node scripts/shadcn-sync.js --diff", + "shadcn:list": "node scripts/shadcn-sync.js --list" + } +} +``` + +## 🔒 Safety Features + +✅ **Automatic Backups**: All updates create timestamped backups +✅ **Git Integration**: Review changes with `git diff` +✅ **Offline Mode**: Analyze without network risk +✅ **Custom Detection**: Won't update ObjectUI components +✅ **Test Prompts**: Reminders to test after updates + +## 🐛 Troubleshooting + +### Network Issues + +If `shadcn:check` fails: +1. Use offline mode: `npm run shadcn:analyze` +2. Use official CLI: `npx shadcn@latest add ` +3. Manual update from Shadcn docs + +### Build Errors + +After updating components: +```bash +# Clear cache +rm -rf packages/components/dist +rm -rf node_modules/.vite + +# Rebuild +npm run build + +# Check types +npm run type-check +``` + +### Restoring from Backup + +```bash +# List backups +ls -la packages/components/.backup/ + +# Restore specific component +cp packages/components/.backup/button.tsx.1234567890.backup \ + packages/components/src/ui/button.tsx +``` + +## 📈 Roadmap + +- [ ] Interactive CLI with prompts +- [ ] Visual diff viewer in browser +- [ ] Automatic PR creation for safe updates +- [ ] Component version history +- [ ] Migration guides for breaking changes +- [ ] VS Code extension integration + +## 🤝 Contributing + +Found an issue? Want to improve the tools? + +1. Check [existing issues](https://github.com/objectstack-ai/objectui/issues?q=label%3Ashadcn-sync) +2. Read [Contributing Guide](../CONTRIBUTING.md) +3. Open an issue with `shadcn-sync` label + +## 📄 License + +MIT License - See [LICENSE](../LICENSE) + +## 🔗 Related Links + +- [ObjectUI Documentation](https://objectui.org) +- [Shadcn UI](https://ui.shadcn.com) +- [Radix UI](https://www.radix-ui.com) +- [Tailwind CSS](https://tailwindcss.com) + +--- + +**Made with ❤️ for the ObjectUI community** diff --git a/docs/SHADCN_DEMO.md b/docs/SHADCN_DEMO.md new file mode 100644 index 00000000..fe00a8fd --- /dev/null +++ b/docs/SHADCN_DEMO.md @@ -0,0 +1,483 @@ +# Shadcn Component Sync - Demo Walkthrough + +This document shows real examples of using the component sync tools. + +## Demo 1: Analyzing Components (Offline) + +```bash +$ npm run shadcn:analyze +``` + +**Output:** +``` +====================================================================== +ObjectUI Components Analysis (Offline Mode) +====================================================================== + +Analyzing 60 components... +Manifest tracks 46 Shadcn components +Manifest tracks 14 custom components + +====================================================================== +Shadcn Components - Customization Analysis +====================================================================== + +📊 Customization Levels: + ✓ Unmodified: 4 components + ⚡ Light customization: 37 components + 🔧 Heavy customization: 5 components + +🔧 Heavily Customized Components: + + card (147 lines) + • Glassmorphism effects + • Data-slot attributes (7 instances) + • ObjectUI copyright header + • Significantly different size (147 vs ~80 lines) + + form (176 lines) + • Data-slot attributes (5 instances) + • React Hook Form integration + • ObjectUI copyright header + +... + +====================================================================== +Update Recommendations +====================================================================== + +✅ Safe to update (minimal customizations): + • calendar + • sonner + • table + • toast + +⚠️ Review carefully before updating (moderate customizations): + • accordion + • alert-dialog + • button + • input + ... + +🔧 Manual merge required (heavy customizations): + • card + • form + • label + • skeleton + • tabs + +● Do NOT update (custom ObjectUI components): + • button-group + • calendar-view + • chatbot + ... +``` + +**What This Tells You:** + +1. **4 components are safe** - You can update these directly +2. **37 need review** - Check diffs before updating +3. **5 need manual merge** - Heavy customizations +4. **14 are custom** - Don't update from Shadcn + +## Demo 2: Listing All Components + +```bash +$ npm run shadcn:list +``` + +**Output:** +``` +============================================================ +Component List +============================================================ + +Shadcn Components: + • accordion + • alert + • alert-dialog + • aspect-ratio + • avatar + • badge + • breadcrumb + • button + ... + (46 total) + +Custom ObjectUI Components: + • button-group Custom ObjectUI component - Button group wrapper + • calendar-view Custom ObjectUI component - Full calendar view + • chatbot Custom ObjectUI component - Chatbot interface + ... + (14 total) +``` + +**What This Tells You:** + +- Which components come from Shadcn (can be updated) +- Which are ObjectUI-specific (should not be updated) + +## Demo 3: Updating a Safe Component + +Let's update the `toast` component (identified as safe): + +```bash +# Step 1: Check current state +$ npm run shadcn:analyze | grep "toast" +✓ toast Synced with Shadcn + +# Step 2: View current file +$ cat packages/components/src/ui/toast.tsx | head -20 +/** + * ObjectUI + * Copyright (c) 2024-present ObjectStack Inc. + */ +import * as React from "react" +import * as ToastPrimitives from "@radix-ui/react-toast" +import { cva, type VariantProps } from "class-variance-authority" +... + +# Step 3: Update with backup +$ npm run shadcn:update toast -- --backup + +Updating toast... +Created backup: toast.tsx.1706252400000.backup +✓ Updated toast.tsx + Dependencies: @radix-ui/react-toast + +# Step 4: Review changes +$ git diff packages/components/src/ui/toast.tsx +diff --git a/packages/components/src/ui/toast.tsx b/packages/components/src/ui/toast.tsx +... +(shows the changes made) + +# Step 5: Test +$ npm run test -- toast +✓ All tests passed + +# Step 6: Commit +$ git add packages/components/src/ui/toast.tsx +$ git commit -m "chore(components): update toast to latest Shadcn version" +``` + +## Demo 4: Checking What Changed in a Component + +Want to see what's different before updating? + +```bash +$ npm run shadcn:diff button +``` + +**Output:** +``` +============================================================ +Component Diff: button +============================================================ + +Local version: +/** + * ObjectUI + * Copyright (c) 2024-present ObjectStack Inc. + */ + +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "../lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2...", + { + variants: { + variant: { ... }, + size: { + default: "h-9 px-4 py-2", + sm: "h-8 rounded-md px-3 text-xs", + lg: "h-10 rounded-md px-8", + icon: "h-9 w-9", + "icon-sm": "h-8 w-8", // ← ObjectUI custom + "icon-lg": "h-10 w-10", // ← ObjectUI custom + }, + }, + } +) +... + +Shadcn version: +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2...", + { + variants: { + variant: { ... }, + size: { + default: "h-9 px-4 py-2", + sm: "h-8 rounded-md px-3 text-xs", + lg: "h-10 rounded-md px-8", + icon: "h-9 w-9", + }, + }, + } +) +... + +Local: 68 lines +Shadcn: 65 lines +``` + +**What You Learn:** + +- ObjectUI has custom `icon-sm` and `icon-lg` sizes +- Import paths are different (`../lib/utils` vs `@/lib/utils`) +- ObjectUI has copyright header +- Size difference is small (3 lines) + +**Decision:** You can update, but need to restore the custom sizes after. + +## Demo 5: Batch Updating Components + +Update multiple safe components at once: + +```bash +# Step 1: Create a branch +$ git checkout -b chore/update-shadcn-safe-components + +# Step 2: Identify safe components +$ npm run shadcn:analyze | grep "Safe to update" -A 10 +✅ Safe to update (minimal customizations): + • calendar + • sonner + • table + • toast + +# Step 3: Update each one +$ npm run shadcn:update calendar -- --backup +$ npm run shadcn:update sonner -- --backup +$ npm run shadcn:update table -- --backup +$ npm run shadcn:update toast -- --backup + +# Step 4: Review all changes +$ git status +modified: packages/components/src/ui/calendar.tsx +modified: packages/components/src/ui/sonner.tsx +modified: packages/components/src/ui/table.tsx +modified: packages/components/src/ui/toast.tsx + +$ git diff packages/components/src/ui/ +(review each file's changes) + +# Step 5: Test +$ npm test + +# Step 6: Commit and push +$ git add packages/components/src/ui/ +$ git commit -m "chore(components): update safe components to latest Shadcn" +$ git push origin chore/update-shadcn-safe-components +``` + +## Demo 6: Handling a Heavily Customized Component + +Let's try updating `card` (identified as heavily customized): + +```bash +# Step 1: Check what's custom +$ npm run shadcn:analyze | grep -A 5 "card" + card (147 lines) + • Glassmorphism effects + • Data-slot attributes (7 instances) + • ObjectUI copyright header + • Significantly different size (147 vs ~80 lines) + +# Step 2: View the diff +$ npm run shadcn:diff card +(shows significant differences) + +# Step 3: Manual process +# 3a. Create backup +$ cp packages/components/src/ui/card.tsx \ + packages/components/src/ui/card.tsx.manual-backup + +# 3b. Note ObjectUI customizations +$ grep -n "data-slot\|backdrop-blur\|glassmorphism" \ + packages/components/src/ui/card.tsx +12: className={cn("... backdrop-blur-sm", className)} data-slot="card" +25: className={cn("...", className)} data-slot="card-header" +... + +# 3c. Get latest from Shadcn +$ npm run shadcn:update card + +# 3d. Manually re-add customizations +$ vim packages/components/src/ui/card.tsx +(restore data-slot attributes, glassmorphism effects) + +# 3e. Test extensively +$ npm test -- card +$ npm run build + +# 3f. Commit +$ git add packages/components/src/ui/card.tsx +$ git commit -m "chore(components): update card with manual customization merge" +``` + +## Demo 7: Weekly Automated Check (GitHub Actions) + +The GitHub Action runs automatically every Monday: + +**Workflow Run Output:** +``` +✓ Checkout code +✓ Setup pnpm +✓ Setup Node.js +✓ Install dependencies +✓ Analyze components (offline) + + Component analysis completed: + - 4 unmodified + - 37 light customization + - 5 heavy customization + - 14 custom + +✓ Check component status (online) + + Modified components found: + - button (15 lines difference) + - dialog (8 lines difference) + - select (12 lines difference) + +✓ Create issue: "Shadcn Components Need Review" +``` + +**Created Issue:** +``` +Title: Shadcn Components Need Review + +## Shadcn Components Status Report + +The weekly component sync check has detected issues or updates. + +### Modified Components +- button: 15 lines difference +- dialog: 8 lines difference +- select: 12 lines difference + +### Next Steps +1. Review the analysis results +2. Run `npm run shadcn:analyze` locally +3. Update components with `npm run shadcn:update ` +4. See SHADCN_SYNC.md for detailed guide + +Labels: maintenance, shadcn-sync, dependencies +``` + +## Real-World Scenarios + +### Scenario 1: New Shadcn Feature Released + +Shadcn adds a new feature to the Button component: + +```bash +# 1. Check what changed +$ npm run shadcn:diff button + +# 2. See that new "loading" variant was added +# 3. Update component +$ npm run shadcn:update button -- --backup + +# 4. Restore ObjectUI custom sizes +$ vim packages/components/src/ui/button.tsx +# Add back icon-sm and icon-lg + +# 5. Test and commit +``` + +### Scenario 2: Radix UI Version Bump + +Shadcn updates to use a newer Radix UI version: + +```bash +# 1. Update component +$ npm run shadcn:update select -- --backup + +# 2. Check if dependency needs updating +$ npm run shadcn:list +# Shows: Dependencies: @radix-ui/react-select + +# 3. Update dependency +$ cd packages/components +$ npm install @radix-ui/react-select@latest + +# 4. Test thoroughly +$ npm test +``` + +### Scenario 3: Monthly Maintenance + +Once a month, proactively check for updates: + +```bash +# 1. Analyze current state +$ npm run shadcn:analyze > analysis.txt + +# 2. Review safe components +$ grep "Safe to update" analysis.txt -A 5 + +# 3. Update safe ones +$ npm run shadcn:update calendar -- --backup +$ npm run shadcn:update table -- --backup + +# 4. Create PR +$ git checkout -b chore/monthly-shadcn-sync +$ git add . +$ git commit -m "chore: monthly Shadcn component sync" +$ git push +``` + +## Tips & Tricks + +### Tip 1: Quick Check Before Starting Work + +```bash +# Always analyze before making component changes +$ npm run shadcn:analyze | grep "your-component" +``` + +### Tip 2: Backup Everything + +```bash +# Create a full backup before bulk updates +$ cp -r packages/components/src/ui packages/components/src/ui.backup.$(date +%s) +``` + +### Tip 3: Selective Updates + +```bash +# Update only form-related components +$ for comp in input textarea select checkbox radio-group; do + npm run shadcn:update $comp -- --backup + done +``` + +### Tip 4: Compare with Git + +```bash +# Use git to see exactly what changed +$ git diff --word-diff packages/components/src/ui/button.tsx +``` + +## Conclusion + +These tools make it easy to: +- ✅ Track which components need updates +- ✅ Safely update components with backups +- ✅ Preserve ObjectUI customizations +- ✅ Automate weekly checks +- ✅ Make informed decisions about updates + +See the full documentation for more details!