create-ng-tailwind 1.0.0 → 2.0.2

package/README.md

@@ -9,21 +9,19 @@
 
 **🚀 Create Angular projects with Tailwind CSS in seconds**
 
-*Zero configuration • Modern setup • Beautiful starter templates*
-
-[Quick Start](#quick-start) • [Features](#features) • [Examples](#examples) • [Documentation](#interactive-vs-non-interactive-modes)
+_Zero configuration • Modern setup • Beautiful starter templates_
 
 </div>
 
 ---
 
-## Features
+## ✨ Features
 
-- ✨ **Angular 19** - Latest version with all modern features
-- 🎨 **Tailwind CSS** - Utility-first CSS framework preconfigured
-- 📱 **Responsive** - Mobile-first responsive design examples
+- 🎯 **Angular 20+** - Latest version with standalone components and signals
+- 🎨 **Tailwind CSS v4** - Utility-first CSS framework preconfigured
+- 🌍 **i18n Translation** - English & Arabic with RTL support
+- 🎮 **Interactive UI** - Toast notifications, Modal dialogs, and components
 - 🏗️ **Zero Configuration** - Everything set up and ready to go
-- 🎯 **Best Practices** - Modern project structure and configuration
 - 💨 **Fast Setup** - Get started in seconds, not minutes
 
 ## Quick Start
@@ -53,328 +51,235 @@ create-ng-tailwind [project-name] [options]
 
 ### Options
 
-| Option | Description | Default |
-|--------|-------------|---------|
-| `-d, --directory <dir>` | Target directory | Same as project name |
-| `--skip-install` | Skip npm install | false |
-| `--no-routing` | Disable Angular routing | **true** (routing enabled by default) |
-| `--style <style>` | Stylesheet format (css, scss, sass, less) | **css** (recommended for Tailwind) |
-| `--ssr` | Enable Server-Side Rendering | false |
-| `--zoneless` | Create zoneless application without zone.js | false |
-| `--ai-config <tools>` | AI tools to configure | **none** |
-| `--interactive` | Enable interactive prompts like `ng new` | false |
-| `-h, --help` | Display help for command | - |
-| `-V, --version` | Display version number | - |
+| Option                      | Description                                 | Default                            |
+| --------------------------- | ------------------------------------------- | ---------------------------------- |
+| `-t, --template <template>` | Template to use (minimal, starter)          | **Prompted** (mandatory selection) |
+| `--routing`                 | Enable Angular routing                      | true (routing enabled by default)  |
+| `--no-routing`              | Disable Angular routing                     | false                              |
+| `--ssr`                     | Enable Server-Side Rendering                | **Prompted** (default: false)      |
+| `--zoneless`                | Create zoneless application without zone.js | **Prompted** (default: false)      |
+| `--ai-config <tools>`       | AI tools to configure                       | **Prompted** (default: none)       |
+| `--skip-install`            | Skip npm install                            | false                              |
+| `-h, --help`                | Display help for command                    | -                                  |
+| `-V, --version`             | Display version number                      | -                                  |
+
+#### Template Options:
+
+- `minimal` - Just Angular + Tailwind (minimal setup with basic example)
+- `starter` - Professional foundation with essential components, routing, services, and best practices
+
+**Note:** If you don't provide the `--template` flag, you will be prompted to choose a template during setup.
 
 #### AI Tools Options:
-- `none` (default) - No AI tools
+
+When you select AI tools during setup, Angular CLI will automatically create configuration folders and files:
+
+- `none` (default) - No AI tools configured
 - `claude` - Configure Claude integration
-- `cursor` - Configure Cursor integration  
+- `cursor` - Configure Cursor integration
 - `gemini` - Configure Gemini integration
 - `copilot` - Configure GitHub Copilot integration
 - `jetbrains` - Configure JetBrains AI Assistant
 - `windsurf` - Configure Windsurf integration
 
+**Note:** You can select multiple AI tools (checkbox selection). Each selected tool will have its configuration folder created by Angular CLI (`ng new --ai-config`). Our CLI focuses on Tailwind CSS setup and template application.
+
 ### Examples
 
-#### Quick Start (Non-Interactive)
+#### Default Interactive Mode (Like `ng new`)
+
 ```bash
-# Basic usage - fast setup with BEST PRACTICE defaults
+# Run the CLI - it will prompt you for all options
 npx create-ng-tailwind my-app
-# ✅ CSS (works best with Tailwind)
-# ✅ Angular Routing (most apps need it)
-# ✅ No SSR (simpler for most apps)
-# ✅ No AI tools (clean setup)
-
-# Disable routing if you don't need it
-npx create-ng-tailwind my-app --no-routing
 
-# Use SCSS if you prefer (though CSS is recommended for Tailwind)
-npx create-ng-tailwind my-app --style=scss
+# You'll be asked:
+# ✔ What is your project name? (my-angular-app)
+# ✔ Which template would you like to use?
+#   ❯ Minimal     - Just Angular + Tailwind (minimal setup)
+#     Starter     - Professional foundation with essential components
+# ✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)
+# ✔ Do you want to create a 'zoneless' application without zone.js? (y/N)
+# ✔ Which AI tools do you want to configure? (Press <space> to select, <a> to toggle all)
+#   ❯◉ None
+#    ◯ Claude
+#    ◯ Cursor
+#    ◯ Gemini
+#    ◯ GitHub Copilot
+#    ◯ JetBrains AI
+#    ◯ Windsurf
 ```
 
-#### Interactive Mode (Like `ng new`)
+#### Quick Start with CLI Flags (Skip Prompts)
+
 ```bash
-# Interactive prompts - choose options step by step
-npx create-ng-tailwind my-app --interactive
-
-# Interactive prompts will ask:
-# ✔ Which stylesheet format would you like to use? (CSS, SCSS, Sass, Less)
-# ✔ Would you like to add Angular routing? (y/N)
-# ✔ Do you want to enable Server-Side Rendering (SSR)? (y/N)
-# ✔ Do you want to create a 'zoneless' application? (y/N)
-# ✔ Which AI tools do you want to configure? (◯ None ◯ Claude ◯ Cursor...)
+# Skip all prompts by providing all options via CLI flags
+npx create-ng-tailwind my-app --template=starter
+
+# With more options
+npx create-ng-tailwind my-app --template=starter --ssr --zoneless --ai-config=cursor
+
+# Or use short flag for template
+npx create-ng-tailwind my-app -t starter
 ```
 
 #### Other Options
+
 ```bash
-# Custom directory
-npx create-ng-tailwind my-app --directory=./projects/my-app
+# Skip npm install (for CI/CD or manual installation later)
+npx create-ng-tailwind my-app --template=starter --skip-install
 
-# Skip installation (for CI/CD)
-npx create-ng-tailwind my-app --skip-install
+# Disable routing
+npx create-ng-tailwind my-app --template=starter --no-routing
 
-# Combine flags with interactive mode (flags override prompts)
-npx create-ng-tailwind my-app --interactive --style=scss --routing
+# Combine multiple flags
+npx create-ng-tailwind my-app --template=starter --ssr --zoneless --skip-install
 ```
 
 ## What's Included
 
 ### 📦 Dependencies
+
 - **Angular 20** - Latest Angular framework
 - **Tailwind CSS** - Utility-first CSS framework
 - **@tailwindcss/postcss** - Modern PostCSS plugin for Tailwind
 - **PostCSS** - CSS processing tool
 
 ### 🎨 Preconfigured Setup
+
 - Modern PostCSS configuration (`.postcssrc.json`)
 - Tailwind CSS import in styles file
 - Example components with Tailwind classes
 - Responsive design examples
 - Zero configuration required
 
-### 🎯 Why CSS Works Best with Tailwind
+### 🎯 CSS-Only Approach (Tailwind v4 Official)
 
-**Plain CSS is recommended for Tailwind projects because:**
+**We use CSS exclusively for Tailwind v4 compatibility:**
 
-- **🚀 Simpler Build Process** - No SCSS compilation needed
-- **⚡ Faster Builds** - Less processing overhead
-- **🎨 Tailwind is Utility-First** - Most styling is done via classes, not custom CSS
-- **🛠️ Tailwind @apply Works in CSS** - You can still use `@apply` directive
-- **📦 Smaller Bundle Size** - No SCSS runtime needed
-- **🔧 Less Configuration** - Fewer build tools to configure
+- **✅ Official Tailwind v4 Approach** - Tailwind v4 no longer supports preprocessors (SCSS/Sass/Less)
+- **🚀 Simpler Build Process** - No preprocessor compilation needed
+- **⚡ Faster Builds** - Direct PostCSS processing with LightningCSS
+- **🎨 Modern CSS Features** - CSS nesting, variables, and modern features built-in
+- **🛠️ Full Tailwind Support** - All Tailwind directives work seamlessly
+- **📦 Smaller Bundle Size** - No preprocessor runtime needed
+- **🔧 Zero Configuration** - Works out of the box with Angular CLI
 
-**When to use SCSS/Sass:**
-- You have existing SCSS components to migrate
-- You prefer nesting for the few custom styles you write
-- Your team is more comfortable with SCSS
+**Note:** Tailwind CSS v4 uses LightningCSS internally and does not support SCSS, Sass, or Less preprocessors. Modern CSS provides nesting and other features previously requiring preprocessors.
+
+### 🏗️ Project Structure (Starter Template)
 
-### 🏗️ Project Structure
 ```
 my-app/
 ├── src/
 │   ├── app/
-│   │   ├── app.component.html     # Beautiful example with Tailwind
-│   │   ├── app.component.ts       # Traditional Angular component
-│   │   ├── app.component.css      # Component styles
-│   │   ├── app.component.spec.ts  # Component tests
-│   │   ├── app.config.ts          # App configuration
-│   │   └── ...
-│   ├── styles.css                 # Tailwind import included
-│   ├── main.ts                    # Bootstrap with AppComponent
-│   └── ...
-├── .postcssrc.json                # Modern PostCSS configuration
+│   │   ├── core/                  # Core services and interceptors
+│   │   │   ├── services/          # Auth, API, Toast, Modal, etc.
+│   │   │   ├── interceptors/      # HTTP interceptors
+│   │   │   ├── guards/           # Route guards
+│   │   │   └── i18n/             # Translation service
+│   │   ├── 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)
+├── .postcssrc.json              # PostCSS configuration
 ├── package.json
 └── ...
 ```
 
-## Interactive vs Non-Interactive Modes
+## 🚀 Interactive Mode
+
+By default, the CLI works like `ng new` with interactive prompts:
 
-### 🚀 Non-Interactive Mode (Default - Fast)
-Perfect for experienced developers and CI/CD:
 ```bash
 npx create-ng-tailwind my-app
-# ✔ Angular project created (5s)
-# ✔ Tailwind CSS configured
-# ✔ Project files configured
-# ✅ Project created successfully!
-```
 
-### 🎯 Interactive Mode (User-Friendly)
-Perfect for beginners and exploring options:
-```bash
-npx create-ng-tailwind my-app --interactive
-
-📋 Configure your Angular project:
-
-? Which stylesheet format would you like to use? (Use arrow keys)
-❯ CSS
-  SCSS   [ https://sass-lang.com/documentation/syntax#scss ]
-  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
-  Less   [ https://lesscss.org ]
-
-? Would you like to add Angular routing? (Y/n) y
-? Do you want to enable Server-Side Rendering (SSR)? (y/N) n  
-? Do you want to create a 'zoneless' application without zone.js? (y/N) n
-? Which AI tools do you want to configure? (Press <space> to select)
-❯◉ None
- ◯ Claude
- ◯ Cursor
- ◯ Gemini
- ◯ GitHub Copilot
- ◯ JetBrains AI Assistant
- ◯ Windsurf
-
-✔ Angular project created
-✔ Tailwind CSS configured  
-✔ Project files configured
+? Which template would you like to use? › Starter
+? Enable Server-Side Rendering (SSR)? › No
+? Create zoneless application? › No
+? Configure AI tools? › None
+
 ✅ Project created successfully!
 ```
 
-## Example Output
-
-After running the CLI, you'll get a beautiful Angular app with:
+**Fast Mode**: Skip prompts by providing flags:
 
-- 🎨 Modern gradient background
-- 💳 Card-based layout  
-- 📱 Responsive grid system
-- 🔘 Interactive buttons
-- 🎯 Tailwind utility examples
-- 📚 Link to Tailwind documentation
-- ⚙️ Traditional Angular file structure (`*.component.*`)
+```bash
+npx create-ng-tailwind my-app --template=starter
+```
 
-## Development
+## 🎯 Starter Template Features
 
-### Prerequisites
-- Node.js 18+
-- npm or yarn
+The **Starter Template** includes 20+ production-ready features:
 
-### Local Development
+### Core Services
 
-1. Clone this repository
-```bash
-git clone <your-repo-url>
-cd create-ng-tailwind
-```
+- **AuthService** - Authentication & user management
+- **ApiService** - Centralized HTTP request handling
+- **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
 
-2. Install dependencies
-```bash
-npm install
-```
+### UI Components
 
-3. Test locally
-```bash
-npm run dev -- my-test-app
-```
+- **ButtonComponent** - Variants: primary, secondary, danger
+- **CardComponent** - Flexible container with title & shadow
+- **LoadingSpinnerComponent** - Animated loading indicator
+- **ToastComponent** - Auto-dismiss notifications
+- **ModalComponent** - Accessible dialog with sizes
 
-4. Link for global testing
-```bash
-npm link
-create-ng-tailwind test-app
-```
+### Utilities
 
-### Publishing
+- **Pipes** - Truncate, TimeAgo, FileSize, SafeHtml
+- **Directives** - ClickOutside, Tooltip
+- **HTTP Interceptors** - Auth, Error handling, Loading, Caching
+- **TypeScript Path Aliases** - Clean imports with `@core/*`, `@shared/*`, `@features/*`
 
-See [PUBLISHING.md](PUBLISHING.md) for detailed publishing instructions.
+### Internationalization
 
-```bash
-# Quick publish (after setup)
-npm test && npm publish
-```
-
-## Roadmap
-
-### Phase 1: CLI Tool ✅
-- [x] Basic Angular + Tailwind scaffolding
-- [x] Command line options (flags)
-- [x] Interactive prompts mode (`--interactive`)
-- [x] Beautiful starter template with Tailwind examples
-- [x] Zero-configuration setup
-- [x] Traditional Angular file naming (`*.component.*`)
-- [x] Modern Tailwind CSS setup (`@tailwindcss/postcss`)
-- [x] Non-interactive mode for CI/CD
-- [x] Angular 20+ features support (SSR, zoneless, AI tools)
-- [x] **Best Practice Defaults** (CSS + Routing + No AI tools)
-
-### Phase 2: Angular Schematic (Coming Soon)
-- [ ] `ng add quick-start-angular` support
-- [ ] Integration with existing projects
-- [ ] Migration utilities
-- [ ] Workspace integration
-
-### Phase 3: Enhanced Features (Future)
-- [ ] UI library integrations (Angular Material, PrimeNG, Ant Design)
-- [ ] Authentication boilerplate (Auth0, Firebase, JWT)
-- [ ] State management options (NgRx, Akita, Signal Store)
-- [ ] Testing setup (Jest, Cypress, Playwright)
-- [ ] PWA configuration
-- [ ] Docker setup
-- [ ] CI/CD templates (GitHub Actions, GitLab CI)
-- [ ] Monorepo support (Nx integration)
-
-## 🤝 Contributing
-
-We welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
-
-**Quick Start for Contributors:**
-```bash
-git clone https://github.com/TEHSEENULLAH786/create-ng-tailwind.git
-cd create-ng-tailwind
-npm install
-npm run dev my-test-project  # Test your changes
-npm test                     # Run tests
-```
+- **Complete i18n Support** - English & Arabic with RTL support
+- **Language Switcher** - Built-in header component
+- **Translation Files** - JSON-based translation system
 
 ## 📄 License
 
 MIT License - see the [LICENSE](LICENSE) file for details.
 
-## 🙏 Support
+## 🙏 Support & Community
 
 If you find this tool helpful, please consider:
 
-<div align="center">
-
-[![GitHub stars](https://img.shields.io/github/stars/TEHSEENULLAH786/create-ng-tailwind.svg?style=social&label=Star)](https://github.com/TEHSEENULLAH786/create-ng-tailwind)
-[![GitHub Follow](https://img.shields.io/github/followers/TEHSEENULLAH786.svg?style=social&label=Follow)](https://github.com/TEHSEENULLAH786)
-
-</div>
-
-- ⭐ **Star the repository** on GitHub
-- 🐛 **Report bugs** via GitHub Issues
-- 💡 **Suggest features** in Discussions
-- 📝 **Contribute** to the codebase
+- ⭐ **Star the package** on [npm](https://www.npmjs.com/package/create-ng-tailwind)
 - 🔄 **Share** with your developer friends
-- ☕ **Buy us a coffee** (optional donation link)
-
-## 🏆 Contributors
-
-Thanks to these amazing people:
-
-<div align="center">
-
-<!-- Contributors will be automatically added here -->
-[![Contributors](https://contrib.rocks/image?repo=TEHSEENULLAH786/create-ng-tailwind)](https://github.com/TEHSEENULLAH786/create-ng-tailwind/graphs/contributors)
-
-*Become a contributor by submitting your first PR!*
-
-</div>
-
-## 📊 Package Stats
-
-<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)
-
-</div>
-
-## 🔗 Related Projects
-
-| Project | Description |
-|---------|-------------|
-| [Angular CLI](https://angular.io/cli) | Official Angular command-line interface |
-| [Tailwind CSS](https://tailwindcss.com/) | Utility-first CSS framework |
-| [Create React App](https://create-react-app.dev/) | Similar tool for React |
-| [Vite](https://vitejs.dev/) | Fast build tool for web projects |
-| [Nx](https://nx.dev/) | Smart monorepos for Angular |
-
-## 📱 Connect With Us
-
-<div align="center">
-
-[![GitHub](https://img.shields.io/badge/GitHub-TEHSEENULLAH786-181717)](https://github.com/TEHSEENULLAH786)
-[![Email](https://img.shields.io/badge/Email-tehseen__ullah786@hotmail.com-red)](mailto:tehseen_ullah786@hotmail.com)
-
-</div>
+- 📧 **Contact**: [tehseen_ullah786@hotmail.com](mailto:tehseen_ullah786@hotmail.com)
 
 ---
 
 <div align="center">
 
-**🚀 Happy coding with Angular and Tailwind CSS!** 
+[![NPM](https://nodei.co/npm/create-ng-tailwind.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/create-ng-tailwind)
 
-*Built with ❤️ by developers, for developers*
+**🚀 Happy coding with Angular and Tailwind CSS!**
 
-[⬆ Back to top](#create-angular--tailwind)
+_Built with ❤️ by developers, for developers_
 
 </div>