create-ng-tailwind 3.1.0 → 4.0.0

package/README.md

@@ -4,218 +4,154 @@
 
 [![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
-```
-
-### Using npm
-
-Install globally and use:
-
 ```bash
-npm install -g create-ng-tailwind
-create-ng-tailwind my-awesome-app
+npx create-ng-tailwind my-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` 🎉
-
-## 🏗️ 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
+Your app runs at `http://localhost:4200`
 
-- **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
 
-MIT License - see the LICENSE file included in the package.
+```bash
+# Interactive (default)
+npx create-ng-tailwind my-app
 
-## 🙏 Support & Community
+# With options
+npx create-ng-tailwind my-app --template=starter --ssr --zoneless
 
-If you find this tool helpful, please consider:
+# Available templates
+--template=<minimal|starter|dashboard>
 
-- ⭐ **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)
+# Other flags
+--ssr           # Enable Server-Side Rendering
+--zoneless      # Create zoneless application
+--ai-config     # Configure AI tools (Claude, Cursor, etc.)
+```
 
 ---
 
+## Requirements
+
+- Node.js 18+
+- 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

@@ -15,7 +15,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(
@@ -64,15 +64,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",
       },

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() {

package/lib/templates/base/components.js

@@ -0,0 +1,243 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Create Button Component
+ */
+async function createButtonComponent(config) {
+  const buttonComponent = `import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [],
+  template: \`
+    <button
+      [class]="buttonClasses"
+      [disabled]="disabled || loading"
+      (click)="handleClick($event)"
+      [type]="type">
+
+      @if (loading) {
+        <svg class="animate-spin -ml-1 mr-3 h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      }
+
+      <ng-content></ng-content>
+    </button>
+  \`
+})
+export class ButtonComponent {
+  @Input() variant: ButtonVariant = 'primary';
+  @Input() size: ButtonSize = 'md';
+  @Input() disabled = false;
+  @Input() loading = false;
+  @Input() type: 'button' | 'submit' | 'reset' = 'button';
+  @Input() fullWidth = false;
+
+  @Output() clicked = new EventEmitter<Event>();
+
+  get buttonClasses(): string {
+    const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
+
+    const sizeClasses = {
+      sm: 'text-sm px-3 py-2 h-9',
+      md: 'text-sm px-4 py-2 h-10',
+      lg: 'text-base px-8 py-3 h-11'
+    };
+
+    const variantClasses = {
+      primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
+      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-400',
+      outline: 'border-2 border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white focus:ring-primary-500',
+      ghost: 'hover:bg-gray-100 hover:text-gray-900 focus:ring-gray-400',
+      danger: 'bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500'
+    };
+
+    const widthClass = this.fullWidth ? 'w-full' : '';
+
+    return \`\${baseClasses} \${sizeClasses[this.size]} \${variantClasses[this.variant]} \${widthClass}\`.trim();
+  }
+
+  handleClick(event: Event): void {
+    if (!this.disabled && !this.loading) {
+      this.clicked.emit(event);
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/components/button/button.component.ts'),
+    buttonComponent
+  );
+}
+
+/**
+ * Create Card Component
+ */
+async function createCardComponent(config) {
+  const cardComponent = `import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  imports: [],
+  template: \`
+    <div [class]="cardClasses">
+      @if (title || subtitle) {
+        <div class="px-6 py-4 border-b border-gray-200">
+          @if (title) {
+            <h3 class="text-lg font-semibold text-gray-900">
+              {{ title }}
+            </h3>
+          }
+          @if (subtitle) {
+            <p class="text-sm text-gray-600 mt-1">
+              {{ subtitle }}
+            </p>
+          }
+        </div>
+      }
+
+      <div [class]="contentClasses">
+        <ng-content></ng-content>
+      </div>
+
+      @if (hasFooter) {
+        <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
+          <ng-content select="[slot=footer]"></ng-content>
+        </div>
+      }
+    </div>
+  \`
+})
+export class CardComponent {
+  @Input() title?: string;
+  @Input() subtitle?: string;
+  @Input() padding = true;
+  @Input() shadow = true;
+  @Input() hover = false;
+  @Input() hasFooter = false;
+
+  get cardClasses(): string {
+    const baseClasses = 'bg-white border border-gray-200 rounded-lg overflow-hidden';
+    const shadowClasses = this.shadow ? 'shadow-sm' : '';
+    const hoverClasses = this.hover ? 'hover:shadow-md transition-shadow duration-200' : '';
+
+    return \`\${baseClasses} \${shadowClasses} \${hoverClasses}\`.trim();
+  }
+
+  get contentClasses(): string {
+    return this.padding ? 'p-6' : '';
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/components/card/card.component.ts'),
+    cardComponent
+  );
+}
+
+/**
+ * Create Loading Spinner Component
+ */
+async function createLoadingSpinnerComponent(config) {
+  const spinnerComponent = `import { Component, Input } from '@angular/core';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+
+@Component({
+  selector: 'app-loading-spinner',
+  standalone: true,
+  imports: [],
+  template: \`
+    <div [class]="containerClasses">
+      <svg [class]="spinnerClasses" fill="none" viewBox="0 0 24 24">
+        <circle
+          cx="12" cy="12" r="10"
+          stroke="currentColor"
+          stroke-width="4"
+          class="opacity-25">
+        </circle>
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+        </path>
+      </svg>
+      @if (text) {
+        <span [class]="textClasses">{{ text }}</span>
+      }
+    </div>
+  \`
+})
+export class LoadingSpinnerComponent {
+  @Input() size: SpinnerSize = 'md';
+  @Input() text?: string;
+  @Input() centered = false;
+  @Input() color = 'primary';
+
+  private readonly sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-8 w-8',
+    lg: 'h-12 w-12',
+    xl: 'h-16 w-16'
+  } as const;
+
+  private readonly colorClasses = {
+    primary: 'text-primary-600',
+    secondary: 'text-secondary-600',
+    accent: 'text-accent-600',
+    success: 'text-success-600',
+    danger: 'text-danger-600',
+    warning: 'text-warning-600',
+    info: 'text-info-600',
+    gray: 'text-gray-600',
+    white: 'text-white'
+  } as const;
+
+  protected readonly textClasses = 'text-sm text-gray-600';
+
+  get containerClasses(): string {
+    const baseClasses = 'flex items-center';
+    const centerClasses = this.centered ? 'justify-center' : '';
+    const directionClasses = this.text ? 'flex-col space-y-2' : '';
+
+    return \`\${baseClasses} \${centerClasses} \${directionClasses}\`.trim();
+  }
+
+  get spinnerClasses(): string {
+    const baseClasses = 'animate-spin';
+    return \`\${baseClasses} \${this.sizeClasses[this.size]} \${this.colorClasses[this.color as keyof typeof this.colorClasses] || this.colorClasses.primary}\`.trim();
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      'src/app/shared/components/loading-spinner/loading-spinner.component.ts'
+    ),
+    spinnerComponent
+  );
+}
+
+/**
+ * Create all shared components
+ */
+async function createSharedComponents(config) {
+  await createButtonComponent(config);
+  await createCardComponent(config);
+  await createLoadingSpinnerComponent(config);
+}
+
+module.exports = {
+  createButtonComponent,
+  createCardComponent,
+  createLoadingSpinnerComponent,
+  createSharedComponents,
+};