create-ng-tailwind 2.0.2 → 2.1.1

package/lib/utils/ai-config.js

@@ -62,6 +62,7 @@ src/app/
 ## ⚡ HTTP Interceptors (Pre-configured)
 
 Interceptors run in this order:
+
 1. **authInterceptor** → Adds JWT Bearer token to requests
 2. **cachingInterceptor** → Caches GET requests (5min TTL)
 3. **loadingInterceptor** → Shows/hides loading indicator
@@ -70,6 +71,7 @@ Interceptors run in this order:
 ## 🧩 Available Services (Use These!)
 
 ### ToastService
+
 \`\`\`typescript
 import { inject } from '@angular/core';
 import { ToastService } from '@core/services/toast.service';
@@ -82,6 +84,7 @@ toast.info('New message received');
 \`\`\`
 
 ### ModalService
+
 \`\`\`typescript
 import { inject } from '@angular/core';
 import { ModalService } from '@core/services/modal.service';
@@ -103,6 +106,7 @@ await modal.alert('Your session has expired', 'Session Timeout');
 \`\`\`
 
 ### ApiService
+
 \`\`\`typescript
 import { inject } from '@angular/core';
 import { ApiService } from '@core/services/api.service';
@@ -110,12 +114,12 @@ import { ApiService } from '@core/services/api.service';
 const api = inject(ApiService);
 
 // GET request
-api.get<User[]>('users').subscribe(users => {
+api.get<User[]>('users').subscribe((users) => {
   console.log(users);
 });
 
 // POST request
-api.post<User>('users', userData).subscribe(newUser => {
+api.post<User>('users', userData).subscribe((newUser) => {
   console.log('Created:', newUser);
 });
 
@@ -123,6 +127,7 @@ api.post<User>('users', userData).subscribe(newUser => {
 \`\`\`
 
 ### AuthService
+
 \`\`\`typescript
 import { inject } from '@angular/core';
 import { AuthService } from '@core/services/auth.service';
@@ -132,11 +137,11 @@ const auth = inject(AuthService);
 // Login
 auth.login({ email, password }).subscribe({
   next: () => router.navigate(['/dashboard']),
-  error: (err) => console.error(err)
+  error: (err) => console.error(err),
 });
 
 // Check auth state (reactive)
-auth.isAuthenticated$.subscribe(isAuth => {
+auth.isAuthenticated$.subscribe((isAuth) => {
   console.log('Authenticated:', isAuth);
 });
 
@@ -145,6 +150,7 @@ auth.logout();
 \`\`\`
 
 ### LoadingService
+
 \`\`\`typescript
 import { inject } from '@angular/core';
 import { LoadingService } from '@core/services/loading.service';
@@ -165,6 +171,7 @@ loading.hide();
 ## 📝 Coding Patterns
 
 ### Component Structure (Standalone)
+
 \`\`\`typescript
 import { Component, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -175,15 +182,16 @@ import { ToastService } from '@core/services/toast.service';
   standalone: true,
   imports: [CommonModule],
   template: \`
-    <div class="p-6 bg-white rounded-lg shadow">
-      <h2 class="text-xl font-bold mb-4">{{ title() }}</h2>
+    <div class="rounded-lg bg-white p-6 shadow">
+      <h2 class="mb-4 text-xl font-bold">{{ title() }}</h2>
       <button
         (click)="handleClick()"
-        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+        class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+      >
         Click Me ({{ count() }})
       </button>
     </div>
-  \`
+  \`,
 })
 export class ExampleComponent {
   private toast = inject(ToastService);
@@ -193,13 +201,14 @@ export class ExampleComponent {
   count = signal(0);
 
   handleClick(): void {
-    this.count.update(n => n + 1);
+    this.count.update((n) => n + 1);
     this.toast.success(\`Clicked \${this.count()} times\`);
   }
 }
 \`\`\`
 
 ### Service Creation
+
 \`\`\`typescript
 import { Injectable, inject, signal } from '@angular/core';
 import { ApiService } from '@core/services/api.service';
@@ -224,13 +233,14 @@ export class ItemService {
         this.items.set(data);
         this.loading.set(false);
       },
-      error: () => this.loading.set(false)
+      error: () => this.loading.set(false),
     });
   }
 }
 \`\`\`
 
 ### Reactive Forms
+
 \`\`\`typescript
 import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -241,29 +251,27 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
   imports: [ReactiveFormsModule],
   template: \`
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
-      <input formControlName="email" class="border p-2 rounded" />
+      <input formControlName="email" class="rounded border p-2" />
       @if (form.get('email')?.invalid && form.get('email')?.touched) {
-        <span class="text-red-500 text-sm">Email is required</span>
+        <span class="text-sm text-red-500">Email is required</span>
       }
-      <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">
-        Submit
-      </button>
+      <button type="submit" class="rounded bg-blue-500 px-4 py-2 text-white">Submit</button>
     </form>
-  \`
+  \`,
 })
 export class ContactFormComponent {
   private fb = inject(FormBuilder);
 
   form = this.fb.group({
     email: ['', [Validators.required, Validators.email]],
-    message: ['', [Validators.required, Validators.minLength(10)]]
+    message: ['', [Validators.required, Validators.minLength(10)]],
   });
 
   onSubmit(): void {
     if (this.form.valid) {
       console.log(this.form.value);
     } else {
-      Object.keys(this.form.controls).forEach(key => {
+      Object.keys(this.form.controls).forEach((key) => {
         this.form.get(key)?.markAsTouched();
       });
     }
@@ -272,6 +280,7 @@ export class ContactFormComponent {
 \`\`\`
 
 ### Routing with Lazy Loading
+
 \`\`\`typescript
 import { Routes } from '@angular/router';
 import { authGuard } from '@core/guards/auth.guard';
@@ -279,15 +288,14 @@ import { authGuard } from '@core/guards/auth.guard';
 export const routes: Routes = [
   {
     path: '',
-    loadComponent: () => import('./features/home/home.component')
-      .then(c => c.HomeComponent)
+    loadComponent: () => import('./features/home/home.component').then((c) => c.HomeComponent),
   },
   {
     path: 'dashboard',
-    loadComponent: () => import('./features/dashboard/dashboard.component')
-      .then(c => c.DashboardComponent),
-    canActivate: [authGuard]
-  }
+    loadComponent: () =>
+      import('./features/dashboard/dashboard.component').then((c) => c.DashboardComponent),
+    canActivate: [authGuard],
+  },
 ];
 \`\`\`
 
@@ -296,26 +304,33 @@ export const routes: Routes = [
 **Always use Tailwind CSS classes. Do NOT write custom CSS.**
 
 Common patterns:
+
 \`\`\`html
 <!-- Layout -->
 <div class="container mx-auto px-4">
-<div class="flex items-center justify-between">
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-
-<!-- Spacing -->
-<div class="p-4 mt-6 space-y-4">
-
-<!-- Colors -->
-<div class="bg-blue-500 text-white">
-<button class="bg-gray-100 hover:bg-gray-200 text-gray-900">
-
-<!-- Typography -->
-<h1 class="text-3xl font-bold">
-<p class="text-sm text-gray-600">
-
-<!-- Responsive -->
-<div class="hidden md:block">
-<div class="w-full md:w-1/2 lg:w-1/3">
+  <div class="flex items-center justify-between">
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <!-- Spacing -->
+      <div class="mt-6 space-y-4 p-4">
+        <!-- Colors -->
+        <div class="bg-blue-500 text-white">
+          <button class="bg-gray-100 text-gray-900 hover:bg-gray-200">
+            <!-- Typography -->
+            <h1 class="text-3xl font-bold">
+              <p class="text-sm text-gray-600">
+                <!-- Responsive -->
+              </p>
+
+              <div class="hidden md:block">
+                <div class="w-full md:w-1/2 lg:w-1/3"></div>
+              </div>
+            </h1>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 \`\`\`
 
 ## 🌍 Internationalization (i18n)
@@ -323,16 +338,19 @@ Common patterns:
 Support English and Arabic with RTL:
 
 **Add translations to both files:**
+
 - \`public/assets/i18n/en.json\`
 - \`public/assets/i18n/ar.json\`
 
 **In templates:**
+
 \`\`\`html
 <h1>{{ 'welcome.title' | translate }}</h1>
 <button>{{ 'common.save' | translate }}</button>
 \`\`\`
 
 **In components:**
+
 \`\`\`typescript
 import { inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
@@ -379,6 +397,7 @@ const message = translate.instant('error.notFound');
 ## 🧪 Testing
 
 Write unit tests using Jasmine/Karma:
+
 \`\`\`typescript
 describe('ExampleComponent', () => {
   let component: ExampleComponent;
@@ -386,7 +405,7 @@ describe('ExampleComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ExampleComponent]
+      imports: [ExampleComponent],
     });
     fixture = TestBed.createComponent(ExampleComponent);
     component = fixture.componentInstance;
@@ -416,8 +435,8 @@ describe('ExampleComponent', () => {
   const claudeDir = path.join(projectPath, ".claude");
   await fs.ensureDir(claudeDir);
 
-  // Write claude.md inside .claude folder
-  await fs.writeFile(path.join(claudeDir, "claude.md"), claudeMd);
+  // Write CLAUDE.md inside .claude folder (uppercase to match Angular CLI convention)
+  await fs.writeFile(path.join(claudeDir, "CLAUDE.md"), claudeMd);
 }
 
 // ==================== CURSOR-SPECIFIC CONFIG ====================
@@ -426,6 +445,7 @@ async function createCursorConfig(projectPath, projectName) {
   const cursorRules = `# ${projectName} - Cursor AI Rules
 
 ## Quick Reference
+
 - Angular 20+ standalone components
 - Tailwind CSS v4 (use utility classes only)
 - inject() for DI (not constructors)
@@ -433,6 +453,7 @@ async function createCursorConfig(projectPath, projectName) {
 - Path aliases: @core/, @shared/, @features/, @environments/
 
 ## Component Pattern
+
 \`\`\`typescript
 import { Component, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -441,7 +462,7 @@ import { CommonModule } from '@angular/common';
   selector: 'app-name',
   standalone: true,
   imports: [CommonModule],
-  template: \`<div class="p-4">{{ text() }}</div>\`
+  template: \`<div class="p-4">{{ text() }}</div>\`,
 })
 export class NameComponent {
   private service = inject(ServiceName);
@@ -450,6 +471,7 @@ export class NameComponent {
 \`\`\`
 
 ## Available Services (Use These!)
+
 - **ToastService** - \`toast.success('Message')\`
 - **ModalService** - \`await modal.confirm('Message')\`
 - **ApiService** - \`api.get<Type>('endpoint')\`
@@ -457,31 +479,37 @@ export class NameComponent {
 - **LoadingService** - \`loading.isLoading()\`
 
 ## HTTP Interceptors (Automatic)
+
 Auth → Cache → Loading → Error
 
 ## Forms: Use Reactive Forms
+
 \`\`\`typescript
 form = inject(FormBuilder).group({
-  email: ['', [Validators.required, Validators.email]]
+  email: ['', [Validators.required, Validators.email]],
 });
 \`\`\`
 
 ## Routing: Use Lazy Loading
+
 \`\`\`typescript
 {
   path: 'feature',
-  loadComponent: () => import('./feature/feature.component')
-    .then(c => c.FeatureComponent)
+  loadComponent: () =>
+    import('./feature/feature.component').then((c) => c.FeatureComponent),
 }
 \`\`\`
 
 ## Styling: Tailwind Only
-Use: \`bg-blue-500 text-white p-4 rounded hover:bg-blue-600\`
+
+Use: \`rounded bg-blue-500 p-4 text-white hover:bg-blue-600\`
 
 ## i18n: Support English + Arabic
+
 Add keys to \`public/assets/i18n/en.json\` and \`ar.json\`
 
 ## Don't
+
 - No NgModule
 - No constructor injection
 - No custom CSS
@@ -502,13 +530,14 @@ Angular 20+ | Tailwind CSS v4 | Standalone Components | Signals
 
 ## Quick Patterns
 
-Component:
+**Component:**
+
 \`\`\`typescript
 @Component({
   selector: 'app-name',
   standalone: true,
   imports: [CommonModule],
-  template: \`<div class="p-4">{{ state() }}</div>\`
+  template: \`<div class="p-4">{{ state() }}</div>\`,
 })
 export class NameComponent {
   private svc = inject(Service);
@@ -516,44 +545,54 @@ export class NameComponent {
 }
 \`\`\`
 
-Show Toast:
+**Show Toast:**
+
 \`\`\`typescript
 inject(ToastService).success('Message');
 \`\`\`
 
-Open Modal:
+**Open Modal:**
+
 \`\`\`typescript
 await inject(ModalService).confirm('Message');
 \`\`\`
 
-API Call:
+**API Call:**
+
 \`\`\`typescript
 inject(ApiService).get<Type>('endpoint').subscribe(...);
 \`\`\`
 
-Form:
+**Form:**
+
 \`\`\`typescript
 form = inject(FormBuilder).group({
-  field: ['', Validators.required]
+  field: ['', Validators.required],
 });
 \`\`\`
 
 ## Path Aliases
+
 @core/ @shared/ @features/ @environments/
 
 ## Services Available
+
 ToastService, ModalService, ApiService, AuthService, LoadingService, CacheService
 
 ## HTTP Interceptors (Auto)
+
 Auth → Cache → Loading → Error
 
 ## Styling
-Tailwind only: bg-blue-500 text-white p-4 rounded
+
+Tailwind only: rounded bg-blue-500 p-4 text-white
 
 ## i18n
+
 public/assets/i18n/en.json + ar.json
 
 ## Don't
+
 No NgModule, No constructors, No custom CSS, No 'any', No src/assets
 `;
 
@@ -585,7 +624,7 @@ async function createAIConfigs(projectPath, projectName, aiTools) {
   // Create tool-specific configs only if selected
   if (aiTools.includes("claude")) {
     await createClaudeConfig(projectPath, projectName);
-    console.log("  ✓ .claude/claude.md created");
+    console.log("  ✓ .claude/CLAUDE.md created");
   }
 
   if (aiTools.includes("cursor")) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-ng-tailwind",
-  "version": "2.0.2",
-  "description": "🚀 Create Angular projects with Tailwind CSS in seconds - Zero configuration, modern setup, beautiful starter templates",
+  "version": "2.1.1",
+  "description": "🚀 A CLI tool to give starter template for angular project with tailwind css",
   "main": "bin/create-ng-tailwind.js",
   "bin": {
     "create-ng-tailwind": "./bin/create-ng-tailwind.js"
@@ -53,8 +53,7 @@
     "lib/",
     "README.md",
     "LICENSE",
-    "CHANGELOG.md",
-    "CLAUDE.md"
+    "CHANGELOG.md"
   ],
   "dependencies": {
     "chalk": "^4.1.2",

package/CLAUDE.md

@@ -1,178 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-`create-ng-tailwind` is a CLI tool that scaffolds Angular projects with Tailwind CSS preconfigured. It wraps the Angular CLI (`ng new`) and adds Tailwind v4 setup, templates, and best practices. The tool operates in two modes:
-
-1. **Interactive Mode (Default)**: Prompts users for configuration like `ng new` does
-2. **Fast Mode**: Accepts all options via CLI flags for CI/CD workflows
-
-## Architecture
-
-The codebase follows a modular architecture with clear separation of concerns:
-
-### Core Components
-
-1. **CLI Layer** (`lib/cli/`)
-   - `index.js`: Main CLI handler - parses arguments, orchestrates interactive prompts, delegates to ProjectManager
-   - `interactive.js`: Interactive prompt logic
-   - `validators.js`: Input validation utilities
-
-2. **Manager Layer** (`lib/managers/`)
-   - `ProjectManager.js`: Orchestrates project creation - wraps `ng new`, coordinates TailwindManager and TemplateManager
-   - `TailwindManager.js`: Handles Tailwind v4 installation and PostCSS configuration
-   - `TemplateManager.js`: Applies selected template to the project
-
-3. **Template System** (`lib/templates/`)
-   - `minimal/`: Minimal template (just Angular + Tailwind)
-   - `starter/`: Professional foundation with components, routing, i18n, auth UI, services, interceptors, etc.
-   - Templates export an `apply(config)` async function that modifies the generated Angular project
-
-4. **Utilities** (`lib/utils/`)
-   - `logger.js`: Styled CLI output with ora spinners
-   - `helpers.js`: Shared utility functions
-   - `constants.js`: Configuration constants
-
-### Key Workflow
-
-```
-bin/create-ng-tailwind.js → lib/cli/index.js → lib/managers/ProjectManager.js
-                                                   ├─> lib/managers/TailwindManager.js
-                                                   └─> lib/managers/TemplateManager.js
-                                                        └─> lib/templates/{minimal|starter}/index.js
-```
-
-## Development Commands
-
-```bash
-# Test locally during development
-npm run dev my-test-app
-
-# Test with CLI flags (skip prompts for fast testing)
-npm run dev my-app -- --template=starter
-
-# Test interactive mode (will prompt for all options)
-npm run dev my-app
-
-# Quick demo
-npm run demo
-
-# Link for global testing
-npm link
-create-ng-tailwind test-app
-
-# Unlink when done testing
-npm unlink -g create-ng-tailwind
-```
-
-## Key Technical Details
-
-### Tailwind v4 Setup
-
-The tool uses Tailwind v4's modern PostCSS plugin approach:
-- `.postcssrc.json` with `@tailwindcss/postcss` plugin
-- `styles.css` with `@import "tailwindcss";` directive
-- Dependencies: `tailwindcss`, `@tailwindcss/postcss`, `postcss`
-
-### Angular CLI Integration
-
-The tool passes configuration to `ng new`:
-- `--routing`: Enable/disable routing (default: true)
-- `--style=css`: Always uses CSS (Tailwind v4 official approach, no preprocessors)
-- `--ssr`: Server-Side Rendering
-- `--zoneless`: Create zoneless app
-- `--ai-config`: AI tool configurations (multiple flags supported)
-- Always uses: `--skip-git --package-manager=npm --interactive=false`
-
-### Starter Template Features
-
-The starter template (`lib/templates/starter/`) includes:
-- Standalone Angular 20+ architecture with signals
-- **i18n System**: Full internationalization with English/Arabic translations
-  - RTL (Right-to-Left) support for Arabic
-  - Language switcher in header (desktop & mobile)
-  - Uses `@ngx-translate/core` and `@ngx-translate/http-loader`
-  - Translation files in `public/assets/i18n/`
-  - Auto-detects browser language with localStorage persistence
-- **Layout System**:
-  - Main layout (header with navigation + footer)
-  - Auth layout (for login/register pages)
-- **Shared Components**: Button, Card, LoadingSpinner (with Tailwind styling)
-- **Auth UI Pages**: Login, Register, Forgot Password (with form validation)
-- **Example Pages**: Home, About, Contact (with reactive forms and validation)
-- **Core Services**: API service, Auth service, i18n service, Translation service
-- **Routing**: Auth guards, lazy loading examples
-- **TypeScript**: Models, interfaces, strongly-typed services
-- **Assets**: Organized in `public/assets/` (images, i18n, icons)
-- **Path Aliases**: `@core`, `@shared`, `@features` configured in tsconfig.json
-
-## File Locations
-
-- **CLI entry point**: `bin/create-ng-tailwind.js` - Minimal wrapper that instantiates CLIHandler
-- **Main package config**: `package.json`
-- **Library code**: `lib/` (modular architecture)
-  - `lib/cli/index.js` - Main CLIHandler class
-  - `lib/managers/` - ProjectManager, TailwindManager, TemplateManager
-  - `lib/templates/` - Template definitions (minimal, starter)
-  - `lib/utils/` - Logger, helpers, constants
-- **Generated projects**: Use `public/assets/` for assets (Angular 17+ convention, not `src/assets/`)
-
-## Publishing
-
-Before publishing:
-1. Update version in `package.json`
-2. Update `CHANGELOG.md`
-3. Run `npm publish`
-
-See `PUBLISHING.md` for detailed publishing instructions.
-
-## Common Development Patterns
-
-### Adding a New Template
-
-1. Create `lib/templates/your-template/index.js`
-2. Export an object with an `apply(config)` async function:
-   ```javascript
-   module.exports = {
-     async apply(config) {
-       // config contains: projectName, template, style (always "css"), routing, ssr, zoneless, aiConfig, skipInstall, fullPath
-       // Modify the generated Angular project here
-     }
-   };
-   ```
-3. Register in `lib/templates/index.js`
-4. Update CLI prompt choices in `lib/cli/index.js:getTemplateChoice()`
-
-### Modifying Angular CLI Behavior
-
-Edit `lib/managers/ProjectManager.js:createAngularProject()` to adjust the `ng new` command construction. The method builds a command string with flags based on config options.
-
-### Changing Tailwind Configuration
-
-- **PostCSS setup**: Edit `lib/managers/TailwindManager.js:createPostCSSConfig()`
-- **Stylesheet imports**: Edit `lib/managers/TailwindManager.js:updateStyles()`
-- **Version/dependencies**: Edit `TailwindManager.js:addTailwindToPackageJson()`
-
-### Adding CLI Options
-
-1. Add option to `lib/cli/index.js:parseOptions()` using commander
-2. Add prompt in appropriate method (e.g., `getConfigurationOptions()`)
-3. Include in config object in `buildConfiguration()`
-4. Use in managers or templates via `config` parameter
-
-## Important Constraints and Best Practices
-
-- **Node.js 18+** required (specified in package.json engines)
-- **Angular CLI**: Relies on `@angular/cli@latest` being available via npx
-- **Module System**: Uses CommonJS (not ESM) for Node.js compatibility
-- **Tailwind v4 Dependencies**: Must be in `dependencies`, NOT `devDependencies` (required at runtime)
-- **CSS-Only Approach**: Only CSS is supported (Tailwind v4 no longer supports SCSS/Sass/Less preprocessors due to LightningCSS)
-- **CLI Output**: All user-facing messages must use the Logger utility (`lib/utils/logger.js`) for consistent styling with chalk, ora spinners, and inquirer prompts
-- **Stylesheet Format**: Always uses CSS (`config.style` is always `"css"`) - `TailwindManager.js:updateStyles()` writes to `styles.css`
-- **Interactive Mode**: Default behavior - CLI prompts for options not provided via flags
-- **Fast Mode**: All prompts can be skipped by providing complete CLI flags
-- **AI Config**: Handled by Angular CLI's `--ai-config` flag, our CLI just passes it through (supports multiple tools)
-- **Assets Location**: Generated projects use `public/assets/` (Angular 17+ convention), not `src/assets/`
-- **Angular v20 ESLint Fix**: The starter template's ESLint config includes `"suffixes": ["Component", "App"]` for the `@angular-eslint/component-class-suffix` rule to support Angular v20's new `app.ts` naming convention (class `App` instead of `AppComponent`)