create-ng-tailwind 3.1.0 → 4.1.0

package/README.md

@@ -4,218 +4,172 @@
 
 [![npm version](https://badge.fury.io/js/create-ng-tailwind.svg)](https://badge.fury.io/js/create-ng-tailwind)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Node.js Version](https://img.shields.io/node/v/create-ng-tailwind.svg)](https://nodejs.org/)
 [![Downloads](https://img.shields.io/npm/dm/create-ng-tailwind.svg)](https://www.npmjs.com/package/create-ng-tailwind)
 
-**🚀 A CLI tool to give starter template for angular project with tailwind css**
+**Production-ready Angular + Tailwind CSS starter templates**
 
 </div>
 
 ---
 
-## ✨ Features
-
-- 🎯 **Angular 20+** - Latest version with standalone components and signals
-- 🎨 **Tailwind CSS v4** - Utility-first CSS framework preconfigured
-- 🚀 **SEO Optimized** - Meta tags, Open Graph, Twitter Cards, structured data, robots.txt
-- 🌍 **i18n Translation** - English & Arabic with RTL support
-- 🎮 **Interactive UI** - Toast notifications, Modal dialogs, and components
-- 🏗️ **Zero Configuration** - Everything set up and ready to go
-
 ## Quick Start
 
-### Using npx (Recommended)
-
-Run the following command and follow the prompts:
-
 ```bash
-npx create-ng-tailwind my-awesome-app
+npx create-ng-tailwind my-app
 ```
 
-### Using npm
-
-Install globally and use:
-
-```bash
-npm install -g create-ng-tailwind
-create-ng-tailwind my-awesome-app
-```
-
-### What happens next?
-
-The CLI will guide you through:
-1. Choosing a template (Minimal or Starter)
-2. Configuring Server-Side Rendering (optional)
-3. Setting up zoneless application (optional)
-4. Selecting AI tools integration (optional)
-
-After setup completes:
+Then follow the prompts to choose your template.
 
 ```bash
-cd my-awesome-app
+cd my-app
 npm install
 ng serve
 ```
 
-Your app will be running at `http://localhost:4200` 🎉
+Your app runs at `http://localhost:4200`
 
-## 🏗️ Project Structure
-
-```
-my-app/
-├── src/
-│   ├── app/
-│   │   ├── core/                  # Core services and interceptors
-│   │   │   ├── services/          # Auth, API, SEO, Toast, Modal, etc.
-│   │   │   ├── interceptors/      # HTTP interceptors
-│   │   │   ├── guards/            # Route guards
-│   │   │   ├── i18n/              # Translation service
-│   │   │   └── utils/             # Structured data utilities
-│   │   ├── shared/                # Shared components and utilities
-│   │   │   ├── components/        # Button, Card, Toast, Modal
-│   │   │   ├── pipes/             # Truncate, TimeAgo
-│   │   │   ├── directives/        # ClickOutside, Tooltip
-│   │   │   └── models/            # TypeScript interfaces
-│   │   ├── features/              # Feature modules
-│   │   │   ├── home/              # Home page
-│   │   │   ├── about/             # About page
-│   │   │   ├── contact/           # Contact page
-│   │   │   └── auth/              # Authentication pages
-│   │   ├── layout/                # Layout components
-│   │   │   ├── header/            # Navigation header
-│   │   │   └── footer/            # Footer component
-│   │   ├── app.config.ts          # App configuration
-│   │   ├── app.routes.ts          # Routing configuration
-│   │   └── app.ts                 # Main app component
-│   ├── styles.css                 # Tailwind CSS imports
-│   └── main.ts                    # Bootstrap
-├── public/
-│   ├── assets/
-│   │   ├── i18n/                  # Translation files (en.json, ar.json)
-│   │   └── images/                # OG images, logos
-│   ├── robots.txt                 # SEO robots file
-│   ├── favicon.svg                # Favicon
-│   └── android-chrome-*.svg       # PWA icons
-├── .postcssrc.json                # PostCSS configuration
-├── package.json
-└── ...
-```
-
-## 🎯 Starter Template Features
-
-The **Starter Template** includes 25+ production-ready features:
-
-### Core Services
-
-- **AuthService** - Authentication & user management
-- **ApiService** - Centralized HTTP request handling
-- **SeoService** - Comprehensive SEO management (meta tags, Open Graph, Twitter Cards, structured data)
-- **ToastService** - Notification system (success, error, warning, info)
-- **ModalService** - Dialog system with confirm & alert
-- **LoadingService** - Global loading state with signals
-- **CacheService** - Response caching with TTL
-- **StorageService** - LocalStorage wrapper with type safety
-- **i18nService** - Internationalization management
-
-### SEO Optimization (Simple & Ready to Use)
+---
 
-- **SEO Service** - Just 2 methods: `updateMeta()` and `addStructuredData()`
-- **Meta Tags** - Title, description, keywords (auto-configured on all pages)
-- **Social Sharing** - Open Graph & Twitter Cards (pre-configured)
-- **Structured Data** - Organization & WebSite schemas (included)
-- **Canonical URLs** - Auto-updated on route changes
-- **Assets** - robots.txt, favicon set, OG image placeholder
-- **Extensible** - Easy to add more schemas as needed
+## Templates
 
-### UI Components
+### Starter (Recommended)
 
-- **ButtonComponent** - Variants: primary, secondary, danger
-- **CardComponent** - Flexible container with title & shadow
-- **LoadingSpinnerComponent** - Animated loading indicator
-- **ToastComponent** - Auto-dismiss notifications
-- **ModalComponent** - Accessible dialog with sizes
+Professional foundation with everything you need:
 
-### Utilities
+- Header, Footer, Auth pages (Login, Register, Forgot Password)
+- i18n (English & Arabic with RTL)
+- Toast & Modal systems
+- SEO optimization
+- HTTP interceptors (Auth, Error, Loading, Cache)
+- PWA support
 
-- **Pipes** - Truncate, TimeAgo
-- **Directives** - ClickOutside, Tooltip
-- **HTTP Interceptors** - Auth, Error handling, Loading, Caching
-- **TypeScript Path Aliases** - Clean imports with `@core/*`, `@shared/*`, `@features/*`
+### Dashboard
 
-### Internationalization
+Admin dashboard with:
 
-- **Complete i18n Support** - English & Arabic with RTL support
-- **Language Switcher** - Built-in header component
-- **Translation Files** - JSON-based translation system
+- Collapsible sidebar navigation
+- Stats cards with icons and trends
+- Chart components (Bar, Line, Donut)
+- Data table with sorting & pagination
+- 5 pages: Overview, Analytics, Users, Orders, Settings
+- i18n support (EN/AR) with RTL
+- Dark mode ready
 
-### Additional Features
+### Minimal
 
-- **Routing** - Pre-configured with lazy loading
-- **Authentication Pages** - Login, Register, Forgot Password
-- **Example Pages** - Home, About, Contact with reactive forms
-- **PWA Support** - Service worker configuration
-- **Linting & Formatting** - ESLint + Prettier + simple-git-hooks (pre-commit linting)
-- **Modern Stack** - Tailwind v4, TypeScript, Signals
+Clean slate - just Angular + Tailwind CSS configured.
 
-## 🎨 Tailwind CSS v4
+---
 
-This tool uses **Tailwind CSS v4** with the official PostCSS approach:
+## Features Comparison
+
+| Feature            | Minimal | Starter | Dashboard |
+| ------------------ | ------- | ------- | --------- |
+| Tailwind CSS v4    | ✅      | ✅      | ✅        |
+| Routing            | ✅      | ✅      | ✅        |
+| i18n (EN/AR + RTL) | -       | ✅      | ✅        |
+| Auth UI            | -       | ✅      | -         |
+| HTTP Interceptors  | -       | ✅      | ✅        |
+| Toast/Modal        | -       | ✅      | ✅        |
+| SEO Service        | -       | ✅      | ✅        |
+| PWA                | -       | ✅      | ✅        |
+| ESLint + Prettier  | ✅      | ✅      | ✅        |
+| Sidebar Layout     | -       | -       | ✅        |
+| Charts             | -       | -       | ✅        |
+| Data Tables        | -       | -       | ✅        |
 
-- ✅ **Modern PostCSS Plugin** - `@tailwindcss/postcss`
-- ⚡ **LightningCSS** - Fast CSS processing
-- 🎨 **Modern CSS Features** - Nesting, variables, and more built-in
-- 🚀 **Simplified Build** - No preprocessors needed
+---
 
-**Note:** Tailwind v4 does not support SCSS, Sass, or Less. Modern CSS provides all the features you need!
+## Project Structure
 
-### 🎨 Comprehensive Theming System
+```
+src/app/
+├── core/           # Services, guards, interceptors, i18n
+├── shared/         # Components, pipes, directives
+├── features/       # Page components (home, about, auth...)
+├── layout/         # Header, footer, sidebar
+├── app.config.ts   # App configuration
+├── app.routes.ts   # Routing
+└── app.ts          # Root component
+```
 
-The starter template includes a **powerful Tailwind v4 theming system** using the `@theme` directive:
+---
 
-**Theme Colors:**
-- `primary` - Main brand color (with full 50-950 scale)
-- `secondary` - Secondary brand color (with full 50-950 scale)
-- `accent` - Accent/highlight color (with full 50-950 scale)
-- `success` - Success states (green)
-- `danger` - Error/danger states (red)
-- `warning` - Warning states (yellow/orange)
-- `info` - Informational states (blue)
+## Theming
 
-**Customization:**
-Simply edit `src/styles.css` and change the color values in the `@theme` block. All components automatically update!
+Edit `src/styles.css` to customize colors:
 
 ```css
 @theme {
-  --color-primary-500: #3b82f6;  /* Change this to your brand color */
+  --color-primary-500: #3b82f6;
   --color-secondary-500: #06b6d4;
   --color-accent-500: #a855f7;
-  /* ... complete color scales included */
 }
 ```
 
-**Usage in templates:**
+Use in templates:
+
 ```html
-<div class="bg-primary-600 text-white">Primary button</div>
-<div class="bg-secondary-500">Secondary element</div>
-<p class="text-danger-600">Error message</p>
+<button class="bg-primary-500 text-white">Click me</button>
 ```
 
-All UI components, pages, and layouts use these theme colors, making it easy to rebrand your entire application by changing a few color values!
+---
 
-## 📄 License
+## CLI Options
+
+```bash
+# Interactive (default)
+npx create-ng-tailwind my-app
+
+# With options
+npx create-ng-tailwind my-app --template=starter --ssr --zoneless
+
+# Available templates
+--template=<minimal|starter|dashboard>
+
+# Other flags
+--ssr                  # Enable Server-Side Rendering
+--zoneless             # Create zoneless application
+--ai-config            # Configure AI tools (Claude, Cursor, etc.)
+--ng-version=<v>       # Pin Angular CLI version (latest|21|20|19).
+                       # Default: auto-pick the highest version compatible
+                       # with your current Node.js runtime.
+```
+
+---
 
-MIT License - see the LICENSE file included in the package.
+## Node.js / Angular Compatibility
 
-## 🙏 Support & Community
+This CLI auto-detects your Node.js version and picks the highest compatible Angular CLI release. You don't normally need to think about it — but if you want to pin a specific Angular version, pass `--ng-version=<v>`.
 
-If you find this tool helpful, please consider:
+| Angular CLI | Required Node.js                  |
+| ----------- | --------------------------------- |
+| 22 (latest) | `^22.22.3 \|\| ^24.15.0 \|\| >=26.0.0` |
+| 21          | `^20.19.0 \|\| ^22.12.0 \|\| >=24.0.0` |
+| 20          | `^20.11.1 \|\| ^22.0.0 \|\| ^24.0.0`   |
+| 19          | `^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0`  |
 
-- ⭐ **Star the package** on [npm](https://www.npmjs.com/package/create-ng-tailwind)
-- 🔄 **Share** with your developer friends
-- 📧 **Contact**: [tehseen_ullah786@hotmail.com](mailto:tehseen_ullah786@hotmail.com)
+If no Angular version supports your Node, the CLI prints an upgrade hint and exits.
 
 ---
 
+## Requirements
+
+- Node.js 18+ (Node 20.11.1+ recommended for Angular 20+)
+- npm 9+
+
+---
+
+## License
+
+MIT
+
+---
+
+## Support
+
+- Contact: [tehseen_ullah786@hotmail.com](mailto:tehseen_ullah786@hotmail.com)
+
 <div align="center">
 
 [![NPM](https://nodei.co/npm/create-ng-tailwind.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/create-ng-tailwind)

package/lib/cli/index.js

@@ -3,6 +3,12 @@ const inquirer = require("inquirer");
 const chalk = require("chalk");
 const CLI = require("./interactive");
 const { createLogger } = require("../utils/logger");
+const {
+  ANGULAR_COMPAT,
+  pickAngularVersion,
+  satisfies,
+  buildIncompatMessage,
+} = require("../utils/nodeCompat");
 
 class CLIHandler {
   constructor() {
@@ -15,7 +21,7 @@ class CLIHandler {
       .description("Create Angular projects with Tailwind CSS")
       .version(require("../../package.json").version)
       .argument("[project-name]", "Project name")
-      .option("-t, --template <template>", "Template to use (minimal, starter)")
+      .option("-t, --template <template>", "Template to use (minimal, starter, dashboard)")
       .option("--routing", "Enable Angular routing")
       .option("--no-routing", "Disable Angular routing")
       .option(
@@ -27,6 +33,10 @@ class CLIHandler {
         "--ai-config <tools>",
         "AI tools to configure (none, claude, cursor, gemini, copilot, jetbrains, windsurf)",
       )
+      .option(
+        "--ng-version <version>",
+        "Pin Angular CLI version (e.g. latest, 21, 20, 19). Default: auto-pick highest compatible with current Node",
+      )
       .option("--skip-install", "Skip npm install")
       .parse();
 
@@ -64,15 +74,41 @@ class CLIHandler {
         type: "list",
         name: "template",
         message: "Which template would you like to use?",
+        pageSize: 10,
         choices: [
           {
-            name: "Minimal     - Clean Angular + Tailwind CSS (zero features, build your own way)",
+            name: "Minimal     - Clean Angular + Tailwind CSS (zero features)",
             value: "minimal",
           },
           {
-            name: "Starter     - Professional foundation (routing, i18n, auth UI, components, services, interceptors)",
+            name: "Starter     - Professional foundation (routing, i18n, auth, services)",
             value: "starter",
           },
+          {
+            name: "Dashboard   - Admin panel with sidebar, charts, and analytics",
+            value: "dashboard",
+          },
+          // TODO: Enable these templates in future releases
+          // {
+          //   name: "Ecommerce   - Online store with products, cart, and checkout",
+          //   value: "ecommerce",
+          // },
+          // {
+          //   name: "Blog        - CMS with posts, categories, tags, and comments",
+          //   value: "blog",
+          // },
+          // {
+          //   name: "SaaS        - Pricing, subscriptions, and user dashboard",
+          //   value: "saas",
+          // },
+          // {
+          //   name: "Portfolio   - Projects showcase, skills, and resume",
+          //   value: "portfolio",
+          // },
+          // {
+          //   name: "Landing     - Marketing page with hero, features, and pricing",
+          //   value: "landing",
+          // },
         ],
         default: "starter",
       },
@@ -141,7 +177,41 @@ class CLIHandler {
     return answers;
   }
 
+  resolveAngularVersion(requested) {
+    const nodeVer = process.versions.node;
+
+    // User explicitly pinned a version — honor it, but warn if known-incompatible.
+    if (requested) {
+      const entry = ANGULAR_COMPAT.find((e) => e.version === requested);
+      if (entry && !satisfies(nodeVer, entry.nodeRanges)) {
+        this.logger.warn(
+          `Angular ${requested} requires Node ${entry.nodeRanges.join(" || ")}, but you're on ${nodeVer}. Proceeding anyway — expect engine warnings.`,
+        );
+      }
+      return { version: requested, label: entry ? entry.label : `Angular ${requested}`, pinned: true };
+    }
+
+    // Auto-pick the highest compatible version.
+    const picked = pickAngularVersion(nodeVer);
+    if (!picked) {
+      console.error(chalk.red("\n❌ Incompatible Node.js version\n"));
+      console.error(buildIncompatMessage(nodeVer));
+      process.exit(1);
+    }
+
+    // Tell the user when we fell back from latest.
+    if (picked.version !== "latest") {
+      this.logger.info(
+        `Node ${nodeVer} doesn't support Angular latest — using ${picked.label}. Pass --ng-version=latest to override.`,
+      );
+    }
+
+    return { ...picked, pinned: false };
+  }
+
   async buildConfiguration(options, projectName, configOptions) {
+    const angular = this.resolveAngularVersion(options.ngVersion);
+
     const config = {
       projectName,
       template: options.template || "starter",
@@ -150,6 +220,7 @@ class CLIHandler {
       ssr: configOptions.ssr || false,
       zoneless: configOptions.zoneless || false,
       aiConfig: configOptions.aiConfig || ["none"], // Array of AI tools
+      angularVersion: angular.version,
       skipInstall: options.skipInstall || false,
       fullPath: require("path").resolve(process.cwd(), projectName),
     };

package/lib/cli/interactive.js

@@ -6,15 +6,40 @@ async function getInteractiveOptions() {
       type: "list",
       name: "template",
       message: "Which template would you like to use?",
+      pageSize: 10,
       choices: [
         {
           name: "Minimal - Clean Angular + Tailwind CSS (zero features, build your own way)",
           value: "minimal",
         },
         {
-          name: "Starter - Professional foundation (routing, i18n, auth UI, components, services, interceptors)",
+          name: "Starter - Professional foundation (routing, i18n, auth UI, components, services)",
           value: "starter",
         },
+        {
+          name: "Dashboard - Admin dashboard with sidebar, charts, tables, and analytics",
+          value: "dashboard",
+        },
+        {
+          name: "Ecommerce - Online store with products, cart, checkout, and wishlist",
+          value: "ecommerce",
+        },
+        {
+          name: "Blog - Content management with posts, categories, tags, and comments",
+          value: "blog",
+        },
+        {
+          name: "SaaS - Pricing page, subscription management, and user dashboard",
+          value: "saas",
+        },
+        {
+          name: "Portfolio - Projects showcase, skills, experience timeline, and resume",
+          value: "portfolio",
+        },
+        {
+          name: "Landing - Marketing page with hero, features, testimonials, pricing, FAQ",
+          value: "landing",
+        },
       ],
       default: "starter",
     },

package/lib/managers/ProjectManager.js

@@ -2,7 +2,6 @@ const fs = require('fs-extra');
 const execa = require('execa');
 const TailwindManager = require('./TailwindManager');
 const TemplateManager = require('./TemplateManager');
-const { createAIConfigs } = require('../utils/ai-config');
 
 class ProjectManager {
   constructor(config, logger) {
@@ -40,9 +39,6 @@ class ProjectManager {
 
     // Apply template
     await this.templateManager.apply();
-
-    // Create AI configuration files (CLAUDE.md + tool-specific)
-    await createAIConfigs(this.config.fullPath, this.config.projectName, this.config.aiConfig);
   }
 
   async createAngularProject() {
@@ -55,7 +51,8 @@ class ProjectManager {
       const zoneless = this.config.zoneless || false;
       const aiConfig = this.config.aiConfig || ['none'];
 
-      let cmd = `npx @angular/cli@latest new ${this.config.projectName}`;
+      const ngVersion = this.config.angularVersion || "latest";
+      let cmd = `npx @angular/cli@${ngVersion} new ${this.config.projectName}`;
       cmd += ` --routing=${routing}`;
       cmd += ` --style=css`; // Always use CSS (Tailwind v4 official approach)
       cmd += ` --ssr=${ssr}`;