create-ng-tailwind 3.0.1 → 4.0.0

package/lib/templates/base/services.js

@@ -0,0 +1,362 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Create API Service
+ */
+async function createApiService(config) {
+  const apiService = `import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError, retry } from 'rxjs/operators';
+
+import { ApiResponse } from '@shared/models/api-response.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+  private http = inject(HttpClient);
+  private readonly baseUrl = 'https://api.example.com'; // Configure your API URL
+
+  /**
+   * Generic GET request
+   */
+  get<T>(endpoint: string): Observable<ApiResponse<T>> {
+    return this.http.get<ApiResponse<T>>(\`\${this.baseUrl}/\${endpoint}\`)
+      .pipe(
+        retry(1),
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Generic POST request
+   */
+  post<T, D = unknown>(endpoint: string, data: D): Observable<ApiResponse<T>> {
+    return this.http.post<ApiResponse<T>>(\`\${this.baseUrl}/\${endpoint}\`, data)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Generic PUT request
+   */
+  put<T, D = unknown>(endpoint: string, data: D): Observable<ApiResponse<T>> {
+    return this.http.put<ApiResponse<T>>(\`\${this.baseUrl}/\${endpoint}\`, data)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Generic DELETE request
+   */
+  delete<T>(endpoint: string): Observable<ApiResponse<T>> {
+    return this.http.delete<ApiResponse<T>>(\`\${this.baseUrl}/\${endpoint}\`)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Handle HTTP errors
+   */
+  private handleError(error: HttpErrorResponse) {
+    let errorMessage = 'An unknown error occurred';
+
+    if (error.error instanceof ErrorEvent) {
+      // Client-side error
+      errorMessage = error.error.message;
+    } else {
+      // Server-side error
+      errorMessage = error.error?.message || \`Server returned code: \${error.status}, error message is: \${error.message}\`;
+    }
+
+    console.error('API Error:', errorMessage);
+    return throwError(() => new Error(errorMessage));
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/core/services/api.service.ts'),
+    apiService
+  );
+}
+
+/**
+ * Create Auth Service
+ */
+async function createAuthService(config) {
+  const authService = `import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { BehaviorSubject, Observable, throwError } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
+import { environment } from '@environments/environment';
+import { StorageService } from './storage.service';
+
+interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+}
+
+interface AuthResponse {
+  token: string;
+  user: User;
+  refreshToken?: string;
+}
+
+interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+interface RegisterData {
+  email: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private http = inject(HttpClient);
+  private router = inject(Router);
+  private storage = inject(StorageService);
+
+  private readonly API_URL = environment.apiUrl;
+
+  // Reactive state
+  private _isAuthenticated$ = new BehaviorSubject<boolean>(this.hasValidToken());
+  private _currentUser$ = new BehaviorSubject<User | null>(this.getCurrentUserFromStorage());
+
+  // Public observables
+  public readonly isAuthenticated$ = this._isAuthenticated$.asObservable();
+  public readonly currentUser$ = this._currentUser$.asObservable();
+
+  constructor() {
+    // Initialize authentication state on service creation
+    this.checkAuthenticationStatus();
+  }
+
+  login(credentials: LoginCredentials): Observable<AuthResponse> {
+    // For demo purposes, simulate login
+    if (credentials.email === 'demo@example.com' && credentials.password === 'password') {
+      const mockResponse: AuthResponse = {
+        token: 'mock_jwt_token_12345',
+        user: {
+          id: '1',
+          email: 'demo@example.com',
+          firstName: 'Demo',
+          lastName: 'User'
+        }
+      };
+
+      // Store auth data
+      this.storage.setItem(environment.auth.tokenKey, mockResponse.token);
+      this.storage.setItem('current_user', JSON.stringify(mockResponse.user));
+
+      // Update reactive state
+      this._isAuthenticated$.next(true);
+      this._currentUser$.next(mockResponse.user);
+
+      return new Observable(subscriber => {
+        setTimeout(() => {
+          subscriber.next(mockResponse);
+          subscriber.complete();
+        }, 1000);
+      });
+    }
+
+    // Real API call would be:
+    return this.http.post<AuthResponse>(\`\${this.API_URL}/auth/login\`, credentials)
+      .pipe(
+        tap(response => {
+          // Store tokens
+          this.storage.setItem(environment.auth.tokenKey, response.token);
+          this.storage.setItem('current_user', JSON.stringify(response.user));
+          if (response.refreshToken) {
+            this.storage.setItem(environment.auth.refreshTokenKey, response.refreshToken);
+          }
+
+          // Update reactive state
+          this._isAuthenticated$.next(true);
+          this._currentUser$.next(response.user);
+        }),
+        catchError(error => throwError(() => error))
+      );
+  }
+
+  logout(): void {
+    this.storage.removeItem(environment.auth.tokenKey);
+    this.storage.removeItem(environment.auth.refreshTokenKey);
+    this.storage.removeItem('current_user');
+
+    // Update reactive state
+    this._isAuthenticated$.next(false);
+    this._currentUser$.next(null);
+
+    this.router.navigate(['/auth/login']);
+  }
+
+  register(userData: RegisterData): Observable<AuthResponse> {
+    return this.http.post<AuthResponse>(\`\${this.API_URL}/auth/register\`, userData)
+      .pipe(
+        tap(response => {
+          // Store auth data after successful registration
+          this.storage.setItem(environment.auth.tokenKey, response.token);
+          this.storage.setItem('current_user', JSON.stringify(response.user));
+
+          // Update reactive state
+          this._isAuthenticated$.next(true);
+          this._currentUser$.next(response.user);
+        }),
+        catchError(error => throwError(() => error))
+      );
+  }
+
+  // Synchronous authentication check
+  isAuthenticated(): boolean {
+    return this.hasValidToken();
+  }
+
+  private hasValidToken(): boolean {
+    const token = this.storage.getItem(environment.auth.tokenKey);
+    return !!token && !this.isTokenExpired(token);
+  }
+
+  private isTokenExpired(token: string): boolean {
+    // For demo token, always return false
+    if (token === 'mock_jwt_token_12345') {
+      return false;
+    }
+
+    try {
+      const payload = JSON.parse(atob(token.split('.')[1]));
+      const now = Date.now() / 1000;
+      return payload.exp < now;
+    } catch {
+      return true;
+    }
+  }
+
+  private getCurrentUserFromStorage(): User | null {
+    try {
+      const userStr = this.storage.getItem('current_user');
+      return userStr ? JSON.parse(userStr) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  private checkAuthenticationStatus(): void {
+    const isAuth = this.hasValidToken();
+    const user = this.getCurrentUserFromStorage();
+
+    this._isAuthenticated$.next(isAuth);
+    this._currentUser$.next(user);
+  }
+
+  getToken(): string | null {
+    return this.storage.getItem(environment.auth.tokenKey);
+  }
+
+  // Get current user synchronously
+  getCurrentUser(): User | null {
+    return this._currentUser$.getValue();
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/core/services/auth.service.ts'),
+    authService
+  );
+}
+
+/**
+ * Create Storage Service
+ */
+async function createStorageService(config) {
+  const storageService = `import { Injectable, inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StorageService {
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+
+  setItem(key: string, value: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
+    try {
+      localStorage.setItem(key, value);
+    } catch (error) {
+      console.error('Error storing to localStorage:', error);
+    }
+  }
+
+  getItem(key: string): string | null {
+    if (!this.isBrowser) {
+      return null;
+    }
+    try {
+      return localStorage.getItem(key);
+    } catch (error) {
+      console.error('Error retrieving from localStorage:', error);
+      return null;
+    }
+  }
+
+  removeItem(key: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      console.error('Error removing from localStorage:', error);
+    }
+  }
+
+  clear(): void {
+    if (!this.isBrowser) {
+      return;
+    }
+    try {
+      localStorage.clear();
+    } catch (error) {
+      console.error('Error clearing localStorage:', error);
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/core/services/storage.service.ts'),
+    storageService
+  );
+}
+
+/**
+ * Create all core services
+ */
+async function createCoreServices(config) {
+  await createApiService(config);
+  await createAuthService(config);
+  await createStorageService(config);
+}
+
+module.exports = {
+  createApiService,
+  createAuthService,
+  createStorageService,
+  createCoreServices,
+};

package/lib/templates/blog/app.js

@@ -0,0 +1,250 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create Blog Routing
+ */
+async function createRouting(config) {
+  const routes = `import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  // Home - Blog Post List
+  {
+    path: '',
+    loadComponent: () => import('./features/blog/post-list/post-list.component').then(c => c.PostListComponent)
+  },
+
+  // Blog routes
+  {
+    path: 'category/:category',
+    loadComponent: () => import('./features/blog/category/category.component').then(c => c.CategoryComponent)
+  },
+  {
+    path: 'tag/:tag',
+    loadComponent: () => import('./features/blog/tag/tag.component').then(c => c.TagComponent)
+  },
+  {
+    path: 'author/:id',
+    loadComponent: () => import('./features/blog/author/author.component').then(c => c.AuthorComponent)
+  },
+  {
+    path: 'post/:slug',
+    loadComponent: () => import('./features/blog/post-detail/post-detail.component').then(c => c.PostDetailComponent)
+  },
+
+  // Auth routes
+  {
+    path: 'auth',
+    loadComponent: () => import('./layout/auth/auth-layout.component').then(c => c.AuthLayoutComponent),
+    children: [
+      { path: '', redirectTo: 'login', pathMatch: 'full' },
+      { path: 'login', loadComponent: () => import('./features/auth/login/login.component').then(c => c.LoginComponent) },
+      { path: 'register', loadComponent: () => import('./features/auth/register/register.component').then(c => c.RegisterComponent) },
+      { path: 'forgot-password', loadComponent: () => import('./features/auth/forgot-password/forgot-password.component').then(c => c.ForgotPasswordComponent) }
+    ]
+  },
+
+  // Catch-all
+  { path: '**', redirectTo: '' }
+];`;
+
+  await fs.writeFile(path.join(config.fullPath, "src/app/app.routes.ts"), routes);
+}
+
+/**
+ * Create Blog App Component
+ */
+async function createAppComponent(config) {
+  const appComponent = `import { Component, inject } from '@angular/core';
+import { RouterOutlet, RouterModule } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroMagnifyingGlass, heroUser, heroRss, heroEnvelope } from '@ng-icons/heroicons/outline';
+import { BlogService } from '@core/services/blog.service';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroMagnifyingGlass, heroUser, heroRss, heroEnvelope })],
+  template: \`
+    <div class="min-h-screen bg-gray-50">
+      <!-- Header -->
+      <header class="sticky top-0 z-50 border-b border-gray-200 bg-white/95 backdrop-blur-sm shadow-sm">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="flex h-20 items-center justify-between">
+            <!-- Logo & Tagline -->
+            <div class="flex items-center gap-4">
+              <a routerLink="/" class="flex items-center gap-3 group">
+                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-primary-500 to-purple-600 text-white font-bold text-2xl shadow-lg group-hover:shadow-xl transition-shadow">
+                  📝
+                </div>
+                <div class="hidden sm:block">
+                  <h1 class="text-2xl font-bold text-gray-900 group-hover:text-primary-600 transition-colors">My Blog</h1>
+                  <p class="text-xs text-gray-500">Insights & Tutorials</p>
+                </div>
+              </a>
+            </div>
+
+            <!-- Desktop Navigation -->
+            <nav class="hidden md:flex items-center gap-8">
+              <a routerLink="/" routerLinkActive="text-primary-600 font-semibold" [routerLinkActiveOptions]="{exact: true}" class="text-gray-600 hover:text-primary-600 font-medium transition-colors">
+                Home
+              </a>
+              @for (category of blogService.categories(); track category) {
+                <a [routerLink]="['/category', category]" routerLinkActive="text-primary-600 font-semibold" class="text-gray-600 hover:text-primary-600 font-medium transition-colors">
+                  {{ category }}
+                </a>
+              }
+            </nav>
+
+            <!-- Actions -->
+            <div class="flex items-center gap-3">
+              <button class="flex h-10 w-10 items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 hover:text-primary-600 transition-colors" aria-label="Search">
+                <ng-icon name="heroMagnifyingGlass" size="20"></ng-icon>
+              </button>
+              <a routerLink="/auth/login" class="flex h-10 w-10 items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 hover:text-primary-600 transition-colors" aria-label="Sign In">
+                <ng-icon name="heroUser" size="20"></ng-icon>
+              </a>
+              <a href="#" class="hidden sm:inline-flex items-center gap-2 rounded-full bg-primary-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-600 shadow-md hover:shadow-lg transition-all">
+                <ng-icon name="heroRss" size="16"></ng-icon>
+                Subscribe
+              </a>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <!-- Main Content -->
+      <main class="min-h-screen">
+        <router-outlet></router-outlet>
+      </main>
+
+      <!-- Footer -->
+      <footer class="border-t border-gray-200 bg-white">
+        <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+          <div class="grid gap-12 md:grid-cols-4">
+            <!-- About -->
+            <div class="md:col-span-2">
+              <div class="flex items-center gap-3 mb-4">
+                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-primary-500 to-purple-600 text-white font-bold text-2xl shadow-lg">
+                  📝
+                </div>
+                <div>
+                  <h3 class="text-xl font-bold text-gray-900">My Blog</h3>
+                  <p class="text-xs text-gray-500">Insights & Tutorials</p>
+                </div>
+              </div>
+              <p class="text-gray-600 mb-6 max-w-md">
+                Discover insights, tutorials, and best practices on modern web development, Angular, TypeScript, and more. Join our community of developers.
+              </p>
+              <div class="flex items-center gap-3">
+                <a href="#" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-primary-500 hover:text-white transition-colors">
+                  <span class="text-sm font-bold">𝕏</span>
+                </a>
+                <a href="#" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-primary-500 hover:text-white transition-colors">
+                  <span class="text-sm font-bold">in</span>
+                </a>
+                <a href="#" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-primary-500 hover:text-white transition-colors">
+                  <ng-icon name="heroRss" size="18"></ng-icon>
+                </a>
+              </div>
+            </div>
+
+            <!-- Categories -->
+            <div>
+              <h3 class="mb-4 font-semibold text-gray-900">Categories</h3>
+              <ul class="space-y-3">
+                @for (category of blogService.categories(); track category) {
+                  <li>
+                    <a [routerLink]="['/category', category]" class="text-gray-600 hover:text-primary-600 transition-colors">
+                      {{ category }}
+                    </a>
+                  </li>
+                }
+              </ul>
+            </div>
+
+            <!-- Quick Links -->
+            <div>
+              <h3 class="mb-4 font-semibold text-gray-900">Quick Links</h3>
+              <ul class="space-y-3">
+                <li><a routerLink="/" class="text-gray-600 hover:text-primary-600 transition-colors">All Posts</a></li>
+                <li><a routerLink="/auth/login" class="text-gray-600 hover:text-primary-600 transition-colors">Sign In</a></li>
+                <li><a routerLink="/auth/register" class="text-gray-600 hover:text-primary-600 transition-colors">Register</a></li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Newsletter -->
+          <div class="mt-12 rounded-2xl bg-linear-to-r from-primary-500 to-purple-600 p-8 text-white">
+            <div class="mx-auto max-w-3xl text-center">
+              <h3 class="text-2xl font-bold mb-2">Subscribe to our Newsletter</h3>
+              <p class="mb-6 text-primary-100">Get the latest posts and updates delivered directly to your inbox.</p>
+              <div class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
+                <input
+                  type="email"
+                  placeholder="Enter your email"
+                  class="flex-1 rounded-full px-6 py-3 text-gray-900 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-white/50"
+                />
+                <button class="rounded-full bg-white px-8 py-3 font-semibold text-primary-600 hover:bg-gray-100 transition-colors whitespace-nowrap">
+                  Subscribe
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Bottom Bar -->
+          <div class="mt-12 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-gray-200 pt-8">
+            <p class="text-sm text-gray-600">
+              &copy; {{ currentYear }} My Blog. All rights reserved.
+            </p>
+            <div class="flex items-center gap-6">
+              <a href="#" class="text-sm text-gray-600 hover:text-primary-600 transition-colors">Privacy Policy</a>
+              <a href="#" class="text-sm text-gray-600 hover:text-primary-600 transition-colors">Terms of Service</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  \`,
+})
+export class App {
+  blogService = inject(BlogService);
+  currentYear = new Date().getFullYear();
+
+  constructor(private translate: TranslateService) {
+    this.translate.setDefaultLang('en');
+    this.translate.use('en');
+  }
+}`;
+
+  await fs.writeFile(path.join(config.fullPath, "src/app/app.ts"), appComponent);
+}
+
+/**
+ * Clean up starter layout files (blog has its own header/footer in app.component)
+ */
+async function cleanupStarterLayout(config) {
+  const foldersToRemove = [
+    "src/app/layout/header",
+    "src/app/layout/footer",
+    "src/app/features/home",
+    "src/app/features/about",
+    "src/app/features/contact",
+  ];
+
+  for (const folder of foldersToRemove) {
+    try {
+      await fs.remove(path.join(config.fullPath, folder));
+    } catch (e) {
+      // Ignore errors if files don't exist
+    }
+  }
+}
+
+module.exports = {
+  createRouting,
+  createAppComponent,
+  cleanupStarterLayout,
+};