@nhoo-test/ui

A UI component library that automatically syncs components from the root project.

🚀 Quick Start

Copy Components from Root Project

This package automatically copies components from your root project. You have several options:

Option 1: Copy Default Components (Button + Input)

npm run copy

Option 2: Copy Specific Components

# Copy only button and input
npm run copy:button-input

# Copy all available components
npm run copy:all

# Copy specific components using Node.js script
npm run copy:js button input card

Option 3: Use Node.js Script Directly

# Copy specific components
node copy-components.js button input card

# Copy default components (button, input)
node copy-components.js

Build the Package

npm run build

📦 Available Scripts

• npm run copy - Copy default components (button, input) using batch file
• npm run copy:js - Copy default components using Node.js script
• npm run copy:all - Copy all available components
• npm run copy:button-input - Copy only button and input components
• npm run build - Copy components and build the package
• npm run dev - Watch mode for development
• npm run type-check - Run TypeScript type checking

🔄 Workflow

1. Make changes to components in your root project (src/components/ui/)
2. Copy components to the UI package:

   npm run copy

3. Build the package:

   npm run build

4. Publish or use the updated package

📁 File Structure

packages/ui/
├── src/
│   ├── components/
│   │   ├── button/
│   │   │   ├── button.tsx
│   │   │   └── index.ts
│   │   └── input/
│   │       ├── input.tsx
│   │       └── index.ts
│   ├── lib/
│   │   └── utils.ts
│   └── index.ts
├── dist/                 # Built package
├── copy-components.bat   # Windows batch script
├── copy-components.js    # Node.js script
└── package.json

🎯 Usage in Other Projects

import { Button, Input } from '@nhoo-test/ui';

function MyComponent() {
  return (
    <div>
      <Button variant="default">Click me</Button>
      <Input placeholder="Enter text" />
    </div>
  );
}

⚙️ Configuration

The copy scripts automatically:

• ✅ Copy components from ../../src/components/ui/ to src/components/
• ✅ Update import paths from @/lib/utils to ../../lib/utils
• ✅ Clean up utils.ts to remove external dependencies
• ✅ Generate proper index.ts files
• ✅ Update the main index.ts with all components

🔧 Adding New Components

To add new components to the package:

1. Add the component to your root project (src/components/ui/)
2. Update the copy script to include the new component:

   # Copy specific components including the new one
   npm run copy:js button input card dialog

3. Build the package:

   npm run build

📝 Notes

• The package automatically resolves import paths
• External dependencies are cleaned up in utils.ts
• All components maintain the same API as the root project
• TypeScript declarations are automatically generated