create-ng-tailwind 1.0.0 → 2.0.1

package/CHANGELOG.md

@@ -5,39 +5,240 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.0] - 2024-12-XX
+## [2.0.0] - 2025-01-20
+
+**Major Release with Breaking Changes** - This release includes significant updates to the CLI architecture, template system, and development workflow. Review the breaking changes and migration guide below before upgrading.
+
+### 📈 Release Highlights
+
+- ✨ **Professional Starter Template** with 20+ production-ready features (i18n, auth UI, interceptors, services)
+- 🎨 **Simplified CSS-Only Approach** aligned with Tailwind v4 official recommendations
+- 🎯 **Enhanced User Experience** with interactive mode by default (like `ng new`)
+- 🔒 **Private Repository Model** focused on quality and stability
+- 🤖 **Advanced AI Integration** supporting 6 different AI development tools
+- 🎮 **Interactive UI Components** including Toast notifications, Modal dialogs, and custom directives
+
+### 🚨 BREAKING CHANGES
+
+- **CSS-Only Approach**: Removed SCSS/Sass/Less support - CSS is now the only stylesheet option (aligns with Tailwind v4 official recommendations)
+- **Template System Redesign**: Changed template option from "none" to "minimal" for better clarity
+- **Interactive Mode is Default**: Removed `--interactive` flag - interactive mode is now default behavior (like `ng new`)
+- **Repository Now Private**: No longer accepting public contributions - package remains available on npm
+
+### 🎉 Major New Features
+
+- 🤖 **AI Configuration Files (Tool-Specific)**
+
+  - Creates `.claude/claude.md` if Claude is selected
+  - Creates `.cursorrules` if Cursor is selected
+  - Creates `.windsurfrules` if Windsurf is selected
+  - Each config file includes comprehensive Angular + Tailwind guidelines
+  - Includes project structure, tech stack, coding patterns, and examples
+  - Works with Claude Code, Cursor, Copilot, Windsurf, Gemini, and JetBrains
+  - ~400 lines of context for AI assistants
+
+- ⚡ **HTTP Interceptors (Starter Template)**
+
+  - **Auth Interceptor** - Automatically adds JWT tokens to requests
+  - **Error Interceptor** - Global error handling with toast notifications
+  - **Loading Interceptor** - Shows/hides loading state automatically
+  - **Caching Interceptor** - Caches GET requests (5min TTL)
+  - All interceptors pre-configured in `app.config.ts`
+
+- 🔔 **Toast/Notification System (Starter Template)**
+
+  - `ToastService` with success, error, warning, info methods
+  - Animated toast component with auto-dismiss
+  - Queue management for multiple toasts
+  - Fully integrated in root app component
+
+- 💬 **Modal/Dialog System (Starter Template)**
+
+  - `ModalService` with confirm, alert, and custom modal support
+  - Promise-based API for easy async handling
+  - Configurable sizes (sm, md, lg, xl, full)
+  - Gray semi-transparent backdrop (bg-opacity-30) for better visibility
+  - Backdrop click and ESC key support
+  - Full keyboard accessibility (ARIA roles, tabindex)
+
+- 🔧 **Truncate Pipe (Starter Template)**
+
+  - `TruncatePipe` - Text truncation with word boundaries and custom ellipsis
+
+- 🎮 **Interactive Examples on Home Page (Starter Template)**
+
+  - Live Toast notification examples (Success, Error, Warning, Info)
+  - Modal dialog demonstrations (Confirm, Alert)
+  - Practical code examples showing ToastService and ModalService usage
+  - Helps users understand how to use included services
+
+- ✨ **Custom Directives (Starter Template)**
+
+  - `ClickOutsideDirective` - Detect clicks outside element
+  - `TooltipDirective` - Beautiful tooltips with positioning
+
+- 🛠️ **Supporting Services (Starter Template)**
+  - `LoadingService` - Reactive loading state with signals
+  - `CacheService` - HTTP response caching with TTL
+
+### 🔧 Changed
+
+- **Template Renamed**: "none" → "minimal" for better clarity
+- **Interactive Mode is Default**: CLI now prompts for all configuration options by default (like `ng new`)
+- **Repository Visibility**: Changed from public to private repository
+- **Package Structure**: Simplified to focus on core CLI functionality
+- **Documentation**: Updated all documentation to reflect private repository model
+
+### 🗑️ Removed
+
+- **Test Suite**: Removed `test.js` and all test-related infrastructure
+- **Public Contributions**: Removed CONTRIBUTING.md and contribution workflow
+- **GitHub Integration**: Removed repository URLs and issue tracking references
+- **SCSS/Sass/Less Support**: Removed preprocessor support (CSS-only approach for Tailwind v4)
+
+### 🐛 Fixed
+
+- 🔧 **ESLint & TypeScript Compliance (Starter Template)**
+
+  - Created proper `ModalData` interface with typed properties
+  - Replaced `HttpResponse<any>` with `HttpResponse<unknown>` in CacheService
+  - Removed unused imports (createComponent, ApplicationRef, EnvironmentInjector)
+  - Fixed accessibility issues in ModalComponent (ARIA roles, keyboard handlers)
+  - Added helper methods (`getModalType()`, `getModalMessage()`) to avoid index signature issues
+  - Used `eslint-disable-next-line` for legitimate `any` use in Promise resolver
+  - **Fixed Angular v20 `app.ts` ESLint error** - Added "App" to allowed component class suffixes to support Angular v20's new naming convention
+  - All generated code now compiles and passes `ng lint` without errors
+
+- 📝 **Template Renamed: "none" → "minimal"**
+
+  - Better clarity: "Minimal" describes clean Angular + Tailwind starter
+  - Updated CLI descriptions to show feature differences
+  - All documentation and prompts updated
+
+- 🎨 **Starter Template Enhanced**
+
+  - Updated feature list in CLI with all new capabilities
+  - Now shows: "Professional foundation (routing, i18n, auth UI, components, services, interceptors)"
+  - Feature count increased from 15 to 20+ features
+
+- 🎯 **CSS-Only Approach (Tailwind v4 Official)** 🚨 **BREAKING CHANGE**
+
+  - **Removed SCSS/Sass/Less support** - CSS is now the only stylesheet option
+  - Aligns with **Tailwind CSS v4 official recommendations** (v4 doesn't support preprocessors)
+  - Removed `--style` CLI option
+  - Removed stylesheet format prompt from interactive mode
+  - Always uses CSS with modern features (nesting, variables)
+  - Simpler, faster builds with PostCSS + LightningCSS
+  - Migration note: If you need SCSS, use Tailwind CSS v3 or migrate to modern CSS
+
+- 🎯 **Interactive Mode is Now Default** (Like `ng new`)
+  - CLI now prompts for all configuration options by default
+  - Removed `--interactive` flag (interactive is now the default behavior)
+  - Questions asked in order:
+    1. Project name (if not provided)
+    2. Template (None or Starter)
+    3. Enable SSR? (Server-Side Rendering)
+    4. Enable Zoneless? (without zone.js)
+    5. AI tools to configure (None, Claude, Cursor, Gemini, Copilot, JetBrains, Windsurf) - **Multiple selection supported**
+  - All prompts can be skipped by providing values via CLI flags
+  - Example: `npx create-ng-tailwind my-app --template=starter`
+
+### Added
+
+- 🎨 **New CLI Options**:
+  - `--routing` / `--no-routing` - Enable/disable Angular routing
+  - `--ssr` - Enable Server-Side Rendering
+  - `--zoneless` - Create zoneless application
+  - `--ai-config <tools>` - Configure AI tools (delegated to Angular CLI)
+- 🌍 **i18n Translation Support** (Starter template)
+  - Full English and Arabic translations
+  - Reactive language switcher in header (desktop & mobile)
+  - RTL (Right-to-Left) support for Arabic
+  - Auto-detects browser language
+  - Saves language preference to localStorage
+  - Uses `@ngx-translate` with HTTP loader
+  - Translation files in `public/assets/i18n/`
+  - All components, pages, and UI elements translated
+- 📁 **Assets now in `public/assets/`** instead of `src/assets/`
+  - Translation files: `public/assets/i18n/`
+  - Images: `public/assets/images/`
+  - Removed empty `src/styles/` folder
+
+### Improved
+
+- Better user experience: Interactive prompts guide users through setup like `ng new`
+- More discoverable: Users see all available options during setup
+- Proper Angular project structure with assets in public folder
+- Fast mode available for CI/CD by providing all options via flags
+- AI configuration delegated to Angular CLI for native support and updates
+
+### 📊 Migration Guide from v1.x to v2.0
+
+#### Breaking Changes Impact:
+
+1. **CSS-Only Approach**:
+   - **Before (v1.x)**: `--style` flag supported css, scss, sass, less
+   - **After (v2.0)**: Only CSS is supported (--style flag removed)
+   - **Migration**: If you need SCSS, continue using v1.x or migrate to modern CSS
+
+2. **Template Names**:
+   - **Before (v1.x)**: `--template=none`
+   - **After (v2.0)**: `--template=minimal`
+   - **Migration**: Update scripts to use `minimal` instead of `none`
+
+3. **Interactive Mode**:
+   - **Before (v1.x)**: Non-interactive by default, `--interactive` flag to enable
+   - **After (v2.0)**: Interactive by default, provide all flags to skip prompts
+   - **Migration**: Add all required flags to CI/CD scripts for non-interactive mode
+
+4. **Repository & Support**:
+   - **Before (v1.x)**: Public repository accepting contributions
+   - **After (v2.0)**: Private repository, email-based support only
+   - **Migration**: Contact via email for support (tehseen_ullah786@hotmail.com)
+
+#### Recommended Update Command:
+```bash
+# Update to v2.0.0
+npx create-ng-tailwind@latest my-app --template=minimal
+
+# Or with starter template (recommended)
+npx create-ng-tailwind@latest my-app --template=starter
+```
+
+---
+
+## [1.0.0] - 2025-09-03
 
 ### Added
+
 - 🚀 Initial release of create-ng-tailwind CLI
-- ✨ Angular 20 project scaffolding with Tailwind CSS preconfigured
-- 🎨 Modern Tailwind CSS setup using `@tailwindcss/postcss`
+- ✨ Angular 20 project scaffolding with Tailwind preconfigured
+- 🎨 Modern Tailwind setup using `@tailwindcss/postcss`
 - 📋 Interactive mode (`--interactive`) with guided prompts
 - ⚡ Fast non-interactive mode with best practice defaults
 - 🛠️ Traditional Angular file naming (`*.component.*`)
 - 🔧 Comprehensive CLI options:
-  - CSS/SCSS/Sass/Less stylesheet support
   - Angular routing (enabled by default)
   - Server-Side Rendering (SSR) support
   - Zoneless application support
   - AI tools configuration
 - 🎯 Beautiful starter templates with Tailwind examples
 - 📱 Responsive design examples
-- 🧪 Comprehensive testing suite
 - 📚 Professional documentation
 
 ### Features
+
 - **Best Practice Defaults**: CSS + Routing + No AI tools
 - **Zero Configuration**: Works out of the box
 - **Professional Setup**: Traditional Angular file structure
-- **Modern Tooling**: Latest Angular and Tailwind CSS versions
+- **Modern Tooling**: Latest Angular and Tailwind versions
 - **Cross-Platform**: Windows, macOS, and Linux support
 
 ## [Unreleased]
 
 ### Planned
+
 - Angular schematic support (`ng add`)
 - UI library integrations
 - Authentication boilerplates
-- Testing configurations
 - Docker setup
-- CI/CD templates

package/CLAUDE.md

@@ -0,0 +1,178 @@
+# 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`)

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Create Angular Tailwind
+Copyright (c) 2025 Tehseen Ullah
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal