npm package: @pawan.sahu/create-ui-components
Description: CLI tool to automatically add reusable Angular components to your project - no prompts, just install!
Author: Pawan Sahu
Latest version: 1.1.0

# @pawan.sahu/create-ui-components

CLI tool to quickly add reusable Angular components to your project.

All components are automatically installed - no prompts, no configuration needed!

## 🚀 Usage

### Using npx (Recommended - No Installation Required)

```bash
npx @pawan.sahu/create-ui-components
```

That's it! All components will be automatically copied to `./src/app/components/`

### Custom Path

```bash
npx @pawan.sahu/create-ui-components --path ./src/app/shared
```

## 📦 What It Does

Automatically installs all available Angular components:

- **Input Text Component** - Text input with real-time value display
- **Radio Button Component** - Radio button group with selection tracking

## 📝 Example Output

```bash
$ npx @pawan.sahu/create-ui-components

🎨 Angular UI Components Generator

📦 Installing all components to: ./src/app/components

   ✓ Created src/app/components/input-text/input-text.ts
   ✓ Created src/app/components/input-text/input-text.html
   ✓ Created src/app/components/input-text/input-text.css
   ✓ Created src/app/components/radiobutton/radiobutton.ts
   ✓ Created src/app/components/radiobutton/radiobutton.html
   ✓ Created src/app/components/radiobutton/radiobutton.css

✅ All components installed successfully!

📝 Available components:

   InputTextComponent
   Import: import { InputTextComponent } from './components/input-text/input-text';
   Usage:  <app-input-text />

   RadiobuttonComponent
   Import: import { RadiobuttonComponent } from './components/radiobutton/radiobutton';
   Usage:  <app-radiobutton />
```

## 💡 Using the Components

After installation, import and use them in your Angular components:

```typescript
import { Component } from '@angular/core';
import { InputTextComponent } from './components/input-text/input-text';
import { RadiobuttonComponent } from './components/radiobutton/radiobutton';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [InputTextComponent, RadiobuttonComponent],
  template: `
    <div>
      <h1>My App</h1>
      <app-input-text />
      <app-radiobutton />
    </div>
  `
})
export class AppComponent {}
```

## 🎨 Component Details

### Input Text Component

**Selector:** `<app-input-text />`

**Features:**
- Real-time input value display
- Signal-based state management
- Styled with CSS

### Radio Button Component

**Selector:** `<app-radiobutton />`

**Features:**
- Multiple radio options
- Selection tracking
- Signal-based state management

## 🔧 Customization

All component files are copied to your project, so you can:

1. **Modify styles** - Edit the `.css` files
2. **Change behavior** - Edit the `.ts` files
3. **Update templates** - Edit the `.html` files

## 📂 Project Structure After Installation

```
your-angular-project/
└── src/
    └── app/
        └── components/
            ├── input-text/
            │   ├── input-text.ts
            │   ├── input-text.html
            │   └── input-text.css
            └── radiobutton/
                ├── radiobutton.ts
                ├── radiobutton.html
                └── radiobutton.css
```

## 🛠️ Command Line Options

```bash
# Install to default location (./src/app/components)
npx @pawan.sahu/create-ui-components

# Install to custom location
npx @pawan.sahu/create-ui-components --path ./src/app/shared

# Short flag
npx @pawan.sahu/create-ui-components -p ./src/app/shared
```

## 🔧 Requirements

- Node.js >= 14.0.0
- Angular project (v14+)

## ✨ Features

✅ **Zero configuration** - Just run and go
✅ **No prompts** - All components installed automatically
✅ **Full source code** - Customize as needed
✅ **Standalone components** - Works with Angular 14+
✅ **TypeScript** - Full type safety
✅ **Signals** - Modern Angular reactive patterns

## 📄 License

MIT

## 🤝 Contributing

Contributions welcome! Please open an issue or submit a PR.

## 📧 Author

Pawan Sahu