create-ng-tailwind 3.1.0 → 4.1.0

package/lib/templates/base/pwa.js

@@ -0,0 +1,103 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Setup PWA (Progressive Web App) configuration
+ */
+async function setupPWA(config) {
+  // Create manifest.json
+  const manifest = {
+    name: config.projectName,
+    short_name: config.projectName,
+    theme_color: '#3b82f6',
+    background_color: '#ffffff',
+    display: 'standalone',
+    scope: '/',
+    start_url: '/',
+    description: `${config.projectName} - Built with Angular and Tailwind CSS`,
+    icons: [
+      {
+        src: 'assets/icons/android-chrome-192x192.svg',
+        sizes: '192x192',
+        type: 'image/svg+xml',
+        purpose: 'maskable any',
+      },
+      {
+        src: 'assets/icons/android-chrome-512x512.svg',
+        sizes: '512x512',
+        type: 'image/svg+xml',
+        purpose: 'maskable any',
+      },
+    ],
+  };
+
+  // Write manifest to public directory (new Angular structure)
+  await fs.ensureDir(path.join(config.fullPath, 'public'));
+  await fs.writeFile(
+    path.join(config.fullPath, 'public/manifest.webmanifest'),
+    JSON.stringify(manifest, null, 2)
+  );
+
+  // Create ngsw-config.json (Service Worker configuration)
+  const ngswConfig = {
+    $schema: './node_modules/@angular/service-worker/config/schema.json',
+    index: '/index.html',
+    assetGroups: [
+      {
+        name: 'app',
+        installMode: 'prefetch',
+        resources: {
+          files: ['/favicon.ico', '/index.html', '/manifest.webmanifest', '/*.css', '/*.js'],
+        },
+      },
+      {
+        name: 'assets',
+        installMode: 'lazy',
+        updateMode: 'prefetch',
+        resources: {
+          files: [
+            '/assets/**',
+            '/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)',
+          ],
+        },
+      },
+    ],
+    dataGroups: [
+      {
+        name: 'api',
+        urls: ['https://api.example.com/**'],
+        cacheConfig: {
+          maxSize: 100,
+          maxAge: '1h',
+          timeout: '10s',
+          strategy: 'freshness',
+        },
+      },
+    ],
+  };
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'ngsw-config.json'),
+    JSON.stringify(ngswConfig, null, 2)
+  );
+
+  // Update index.html to include PWA assets
+  const indexPath = path.join(config.fullPath, 'src/index.html');
+  let indexContent = await fs.readFile(indexPath, 'utf8');
+
+  // Add manifest link and theme color meta tag if not present
+  if (!indexContent.includes('manifest.webmanifest')) {
+    indexContent = indexContent.replace(
+      '</head>',
+      `  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#3b82f6">
+  <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.svg">
+</head>`
+    );
+    await fs.writeFile(indexPath, indexContent);
+  }
+}
+
+module.exports = {
+  setupPWA,
+};

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,
+};