create-ng-tailwind 1.0.0 → 2.0.1

package/lib/templates/starter/advanced-features.js

@@ -0,0 +1,528 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+// ==================== HTTP INTERCEPTORS ====================
+
+async function createAuthInterceptor(config) {
+  const authInterceptor = `import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { AuthService } from '@core/services/auth.service';
+
+/**
+ * Authentication Interceptor
+ * Adds JWT token to outgoing requests
+ */
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(AuthService);
+  const token = authService.getToken();
+
+  // Skip adding token for login/register endpoints
+  const skipAuthUrls = ['/auth/login', '/auth/register', '/auth/refresh'];
+  const shouldSkip = skipAuthUrls.some(url => req.url.includes(url));
+
+  if (token && !shouldSkip) {
+    // Clone the request and add the authorization header
+    req = req.clone({
+      setHeaders: {
+        Authorization: \`Bearer \${token}\`
+      }
+    });
+  }
+
+  return next(req);
+};`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/core/interceptors/auth.interceptor.ts"),
+    authInterceptor,
+  );
+}
+
+async function createErrorInterceptor(config) {
+  const errorInterceptor = `import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { catchError, throwError } from 'rxjs';
+import { ToastService } from '@core/services/toast.service';
+
+/**
+ * Error Handling Interceptor
+ * Handles HTTP errors globally and shows user-friendly messages
+ */
+export const errorInterceptor: HttpInterceptorFn = (req, next) => {
+  const router = inject(Router);
+  const toastService = inject(ToastService);
+
+  return next(req).pipe(
+    catchError((error: HttpErrorResponse) => {
+      let errorMessage = 'An error occurred';
+
+      if (error.error instanceof ErrorEvent) {
+        // Client-side error
+        errorMessage = \`Client Error: \${error.error.message}\`;
+      } else {
+        // Server-side error
+        switch (error.status) {
+          case 0:
+            errorMessage = 'No internet connection';
+            break;
+          case 400:
+            errorMessage = error.error?.message || 'Bad request';
+            break;
+          case 401:
+            errorMessage = 'Unauthorized. Please login again.';
+            // Redirect to login
+            router.navigate(['/auth/login']);
+            break;
+          case 403:
+            errorMessage = 'Access forbidden';
+            break;
+          case 404:
+            errorMessage = 'Resource not found';
+            break;
+          case 500:
+            errorMessage = 'Internal server error';
+            break;
+          case 503:
+            errorMessage = 'Service unavailable';
+            break;
+          default:
+            errorMessage = error.error?.message || \`Error: \${error.status}\`;
+        }
+      }
+
+      // Show error toast
+      toastService.error(errorMessage);
+
+      console.error('HTTP Error:', error);
+      return throwError(() => new Error(errorMessage));
+    })
+  );
+};`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/core/interceptors/error.interceptor.ts",
+    ),
+    errorInterceptor,
+  );
+}
+
+async function createLoadingInterceptor(config) {
+  const loadingInterceptor = `import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { finalize } from 'rxjs';
+import { LoadingService } from '@core/services/loading.service';
+
+/**
+ * Loading Interceptor
+ * Shows/hides loading indicator for HTTP requests
+ */
+export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
+  const loadingService = inject(LoadingService);
+
+  // Skip loading indicator for certain endpoints (optional)
+  const skipLoadingUrls = ['/api/polling', '/api/heartbeat'];
+  const shouldSkip = skipLoadingUrls.some(url => req.url.includes(url));
+
+  if (!shouldSkip) {
+    loadingService.show();
+  }
+
+  return next(req).pipe(
+    finalize(() => {
+      if (!shouldSkip) {
+        loadingService.hide();
+      }
+    })
+  );
+};`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/core/interceptors/loading.interceptor.ts",
+    ),
+    loadingInterceptor,
+  );
+}
+
+async function createCachingInterceptor(config) {
+  const cachingInterceptor = `import { HttpInterceptorFn, HttpResponse } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { of, tap } from 'rxjs';
+import { CacheService } from '@core/services/cache.service';
+
+/**
+ * Caching Interceptor
+ * Caches GET requests for better performance
+ */
+export const cachingInterceptor: HttpInterceptorFn = (req, next) => {
+  const cacheService = inject(CacheService);
+
+  // Only cache GET requests
+  if (req.method !== 'GET') {
+    return next(req);
+  }
+
+  // Check if request has cache bypass header
+  if (req.headers.has('X-Bypass-Cache')) {
+    return next(req);
+  }
+
+  // Check cache
+  const cachedResponse = cacheService.get(req.url);
+  if (cachedResponse) {
+    return of(cachedResponse);
+  }
+
+  // If not cached, make request and cache the response
+  return next(req).pipe(
+    tap(event => {
+      if (event instanceof HttpResponse) {
+        cacheService.set(req.url, event);
+      }
+    })
+  );
+};`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/core/interceptors/caching.interceptor.ts",
+    ),
+    cachingInterceptor,
+  );
+}
+
+// ==================== TOAST SERVICE & COMPONENT ====================
+
+async function createToastService(config) {
+  const toastService = `import { Injectable, signal } from '@angular/core';
+
+export interface Toast {
+  id: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  message: string;
+  duration?: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastService {
+  // Reactive signal for toast state
+  toasts = signal<Toast[]>([]);
+
+  private toastId = 0;
+
+  /**
+   * Show a success toast
+   */
+  success(message: string, duration = 5000): void {
+    this.show('success', message, duration);
+  }
+
+  /**
+   * Show an error toast
+   */
+  error(message: string, duration = 7000): void {
+    this.show('error', message, duration);
+  }
+
+  /**
+   * Show a warning toast
+   */
+  warning(message: string, duration = 6000): void {
+    this.show('warning', message, duration);
+  }
+
+  /**
+   * Show an info toast
+   */
+  info(message: string, duration = 5000): void {
+    this.show('info', message, duration);
+  }
+
+  /**
+   * Show a toast with custom type
+   */
+  private show(type: Toast['type'], message: string, duration: number): void {
+    const id = \`toast-\${++this.toastId}\`;
+    const toast: Toast = { id, type, message, duration };
+
+    // Add toast to the list
+    this.toasts.update(toasts => [...toasts, toast]);
+
+    // Auto-remove after duration
+    if (duration > 0) {
+      setTimeout(() => this.remove(id), duration);
+    }
+  }
+
+  /**
+   * Remove a toast by ID
+   */
+  remove(id: string): void {
+    this.toasts.update(toasts => toasts.filter(t => t.id !== id));
+  }
+
+  /**
+   * Clear all toasts
+   */
+  clear(): void {
+    this.toasts.set([]);
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/core/services/toast.service.ts"),
+    toastService,
+  );
+}
+
+async function createToastComponent(config) {
+  const toastComponent = `import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToastService, Toast } from '@core/services/toast.service';
+
+@Component({
+  selector: 'app-toast',
+  imports: [CommonModule],
+  template: \`
+    <!-- Toast Container -->
+    <div class="fixed top-4 right-4 z-50 space-y-2 max-w-sm w-full">
+      @for (toast of toastService.toasts(); track toast.id) {
+        <div
+          [class]="getToastClasses(toast)"
+          class="p-4 rounded-lg shadow-lg flex items-start space-x-3 animate-slide-in-right">
+
+          <!-- Icon -->
+          <div class="shrink-0">
+            @switch (toast.type) {
+              @case ('success') {
+                <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+              }
+              @case ('error') {
+                <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+              }
+              @case ('warning') {
+                <svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                </svg>
+              }
+              @case ('info') {
+                <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+              }
+            }
+          </div>
+
+          <!-- Message -->
+          <div class="flex-1 pt-0.5">
+            <p class="text-sm font-medium text-gray-900">{{ toast.message }}</p>
+          </div>
+
+          <!-- Close Button -->
+          <button
+            (click)="toastService.remove(toast.id)"
+            class="shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+      }
+    </div>
+  \`,
+  styles: [\`
+    @keyframes slide-in-right {
+      from {
+        opacity: 0;
+        transform: translateX(100%);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    .animate-slide-in-right {
+      animation: slide-in-right 0.3s ease-out;
+    }
+  \`]
+})
+export class ToastComponent {
+  toastService = inject(ToastService);
+
+  getToastClasses(toast: Toast): string {
+    const baseClasses = 'border-l-4';
+    const typeClasses = {
+      success: 'bg-green-50 border-green-500',
+      error: 'bg-red-50 border-red-500',
+      warning: 'bg-yellow-50 border-yellow-500',
+      info: 'bg-blue-50 border-blue-500'
+    };
+
+    return \`\${baseClasses} \${typeClasses[toast.type]}\`;
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/toast/toast.component.ts",
+    ),
+    toastComponent,
+  );
+}
+
+// ==================== LOADING SERVICE ====================
+
+async function createLoadingService(config) {
+  const loadingService = `import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoadingService {
+  // Reactive signal for loading state
+  private loadingCount = 0;
+  isLoading = signal(false);
+
+  /**
+   * Show loading indicator
+   */
+  show(): void {
+    this.loadingCount++;
+    this.isLoading.set(true);
+  }
+
+  /**
+   * Hide loading indicator
+   */
+  hide(): void {
+    this.loadingCount = Math.max(0, this.loadingCount - 1);
+    if (this.loadingCount === 0) {
+      this.isLoading.set(false);
+    }
+  }
+
+  /**
+   * Force hide loading (reset counter)
+   */
+  forceHide(): void {
+    this.loadingCount = 0;
+    this.isLoading.set(false);
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/core/services/loading.service.ts"),
+    loadingService,
+  );
+}
+
+// ==================== CACHE SERVICE ====================
+
+async function createCacheService(config) {
+  const cacheService = `import { Injectable } from '@angular/core';
+import { HttpResponse } from '@angular/common/http';
+
+interface CacheEntry {
+  response: HttpResponse<unknown>;
+  timestamp: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CacheService {
+  private cache = new Map<string, CacheEntry>();
+  private readonly maxAge = 5 * 60 * 1000; // 5 minutes
+
+  /**
+   * Get cached response
+   */
+  get(url: string): HttpResponse<unknown> | null {
+    const entry = this.cache.get(url);
+
+    if (!entry) {
+      return null;
+    }
+
+    // Check if cache is expired
+    const isExpired = Date.now() - entry.timestamp > this.maxAge;
+    if (isExpired) {
+      this.cache.delete(url);
+      return null;
+    }
+
+    return entry.response;
+  }
+
+  /**
+   * Set cache entry
+   */
+  set(url: string, response: HttpResponse<unknown>): void {
+    this.cache.set(url, {
+      response,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * Clear specific cache entry
+   */
+  delete(url: string): void {
+    this.cache.delete(url);
+  }
+
+  /**
+   * Clear all cache
+   */
+  clear(): void {
+    this.cache.clear();
+  }
+
+  /**
+   * Clear expired cache entries
+   */
+  clearExpired(): void {
+    const now = Date.now();
+    for (const [url, entry] of this.cache.entries()) {
+      if (now - entry.timestamp > this.maxAge) {
+        this.cache.delete(url);
+      }
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/core/services/cache.service.ts"),
+    cacheService,
+  );
+}
+
+// Export all functions
+module.exports = {
+  // Interceptors
+  createAuthInterceptor,
+  createErrorInterceptor,
+  createLoadingInterceptor,
+  createCachingInterceptor,
+
+  // Toast System
+  createToastService,
+  createToastComponent,
+
+  // Supporting Services
+  createLoadingService,
+  createCacheService,
+};