create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/base/index.js

@@ -0,0 +1,207 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+// Import modular components
+const { createCoreServices } = require('./services');
+const { createSharedComponents } = require('./components');
+const {
+  createDirectoryStructure,
+  createEnvironments,
+  createGuards,
+  createModels,
+  createPipes,
+} = require('./infrastructure');
+const {
+  createVSCodeSettings,
+  updateTsConfig,
+  setupLinting,
+  formatCode,
+} = require('./linting');
+const { setupPWA } = require('./pwa');
+
+// Import existing modular components
+const {
+  createAuthInterceptor,
+  createErrorInterceptor,
+  createLoadingInterceptor,
+  createCachingInterceptor,
+  createToastService,
+  createToastComponent,
+  createLoadingService,
+  createCacheService,
+} = require('./advanced-features');
+
+const {
+  createModalService,
+  createModalComponent,
+  createTruncatePipe,
+  createClickOutsideDirective,
+  createTooltipDirective,
+} = require('./ui-features');
+
+const { createSEOService, createStructuredDataUtil, createRobotsTxt } = require('./seo-features');
+
+const {
+  createDefaultOGImage,
+  createFavicon,
+  createAppleTouchIcon,
+  createAndroidIcon,
+  createAndroidIconLarge,
+  createLogo,
+} = require('./seo-assets');
+
+/**
+ * Base Template
+ * Contains all core infrastructure: services, guards, interceptors, pipes, directives, etc.
+ * UI templates (starter, dashboard, ecommerce) extend this base.
+ */
+const base = {
+  info: {
+    name: 'Base',
+    description: 'Core infrastructure template with services, guards, interceptors, and shared components',
+    features: [
+      'Modern standalone Angular 20+ architecture with signals',
+      'HTTP Interceptors (Auth, Error, Loading, Caching)',
+      'Core services (API, Auth, Storage, Cache, Loading, SEO)',
+      'Toast/Notification system with auto-dismiss',
+      'Modal/Dialog system with confirm & alert',
+      'Essential UI components (Button, Card, Spinner, Toast, Modal)',
+      'Truncate pipe for text truncation',
+      'Useful Directives (ClickOutside, Tooltip)',
+      'TypeScript interfaces and models',
+      'ESLint + Prettier + simple-git-hooks (pre-commit)',
+      'PWA-ready with service worker configuration',
+      'Icons library (@ng-icons/heroicons)',
+    ],
+  },
+
+  async apply(config, spinner) {
+    this.spinner = spinner;
+    const chalk = require('chalk');
+
+    const completeStep = (message) => {
+      if (spinner) {
+        spinner.stop();
+        console.log(chalk.green('  ✔') + chalk.white(' ' + message));
+        spinner.start();
+      }
+    };
+
+    // Create core infrastructure
+    if (spinner) spinner.update('Setting up base project structure...');
+    await createDirectoryStructure(config);
+    await createEnvironments(config);
+    await createCoreServices(config);
+    await this.createSEOFeatures(config);
+    await this.createHttpInterceptors(config);
+    await createGuards(config);
+    await createSharedComponents(config);
+    await createLoadingService(config);
+    await createCacheService(config);
+    await this.createToastSystem(config);
+    await this.createModalSystem(config);
+    await createPipes(config);
+    await this.createAdditionalPipes(config);
+    await this.createDirectives(config);
+    await createModels(config);
+    await createVSCodeSettings(config);
+    await updateTsConfig(config);
+    await setupLinting(config);
+    await setupPWA(config);
+
+    if (spinner) spinner.stop();
+
+    // Show base template summary
+    console.log('');
+    completeStep('Core infrastructure configured');
+    completeStep('HTTP interceptors (Auth, Error, Loading, Cache)');
+    completeStep('Core services (9 services including SEO)');
+    completeStep('UI components (Button, Card, Toast, Modal, Spinner)');
+    completeStep('Utility pipes & directives');
+    completeStep('PWA support configured');
+    completeStep('ESLint + Prettier + simple-git-hooks');
+  },
+
+  async createSEOFeatures(config) {
+    // Create SEO Service
+    const seoService = createSEOService();
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/services/seo.service.ts'),
+      seoService
+    );
+
+    // Create Structured Data Utility
+    const structuredDataUtil = createStructuredDataUtil();
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/utils/structured-data.ts'),
+      structuredDataUtil
+    );
+
+    // Create robots.txt in public folder
+    const robotsTxt = createRobotsTxt();
+    await fs.writeFile(path.join(config.fullPath, 'public/robots.txt'), robotsTxt);
+
+    // Create default OG image (SVG as placeholder)
+    const ogImage = createDefaultOGImage(config.projectName);
+    await fs.writeFile(path.join(config.fullPath, 'public/assets/images/og-default.svg'), ogImage);
+
+    // Create favicon
+    const favicon = createFavicon(config.projectName);
+    await fs.writeFile(path.join(config.fullPath, 'public/favicon.svg'), favicon);
+
+    // Create Apple Touch Icon (SVG as placeholder)
+    const appleTouchIcon = createAppleTouchIcon(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/icons/apple-touch-icon.svg'),
+      appleTouchIcon
+    );
+
+    // Create Android Chrome icons (SVG as placeholder)
+    const androidIcon = createAndroidIcon(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/icons/android-chrome-192x192.svg'),
+      androidIcon
+    );
+
+    const androidIconLarge = createAndroidIconLarge(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/icons/android-chrome-512x512.svg'),
+      androidIconLarge
+    );
+
+    // Create logo
+    const logo = createLogo(config.projectName);
+    await fs.writeFile(path.join(config.fullPath, 'public/assets/images/logo.svg'), logo);
+  },
+
+  async createHttpInterceptors(config) {
+    await createAuthInterceptor(config);
+    await createErrorInterceptor(config);
+    await createLoadingInterceptor(config);
+    await createCachingInterceptor(config);
+  },
+
+  async createToastSystem(config) {
+    await createToastService(config);
+    await createToastComponent(config);
+  },
+
+  async createModalSystem(config) {
+    await createModalService(config);
+    await createModalComponent(config);
+  },
+
+  async createAdditionalPipes(config) {
+    await createTruncatePipe(config);
+  },
+
+  async createDirectives(config) {
+    await createClickOutsideDirective(config);
+    await createTooltipDirective(config);
+  },
+
+  // Expose formatCode for child templates to use
+  formatCode,
+};
+
+module.exports = base;

package/lib/templates/base/infrastructure.js

@@ -0,0 +1,314 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Create directory structure for base template
+ */
+async function createDirectoryStructure(config) {
+  const directories = [
+    'src/environments',
+    'src/app/core/services',
+    'src/app/core/guards',
+    'src/app/core/interceptors',
+    'src/app/core/utils',
+    'src/app/shared/components/button',
+    'src/app/shared/components/card',
+    'src/app/shared/components/loading-spinner',
+    'src/app/shared/components/toast',
+    'src/app/shared/components/modal',
+    'src/app/shared/pipes',
+    'src/app/shared/directives',
+    'src/app/shared/models',
+    'public/assets/images',
+    'public/assets/icons',
+  ];
+
+  for (const dir of directories) {
+    await fs.ensureDir(path.join(config.fullPath, dir));
+  }
+}
+
+/**
+ * Create environment files
+ */
+async function createEnvironments(config) {
+  // Development environment
+  const devEnvironment = `export const environment = {
+  production: false,
+  apiUrl: 'http://localhost:3000/api',
+  appName: '${config.projectName}',
+  version: '1.0.0',
+  enableDevTools: true,
+  logLevel: 'debug' as 'debug' | 'info' | 'warn' | 'error',
+  features: {
+    enableAnalytics: false,
+    enableLogging: true,
+    enableMocking: true
+  },
+  auth: {
+    tokenKey: 'auth_token',
+    refreshTokenKey: 'refresh_token',
+    tokenExpirationBuffer: 300000 // 5 minutes
+  },
+  api: {
+    timeout: 30000,
+    retryAttempts: 3
+  }
+};`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/environments/environment.ts'),
+    devEnvironment
+  );
+
+  // Production environment
+  const prodEnvironment = `export const environment = {
+  production: true,
+  apiUrl: 'https://api.${config.projectName}.com/api',
+  appName: '${config.projectName}',
+  version: '1.0.0',
+  enableDevTools: false,
+  logLevel: 'error' as 'debug' | 'info' | 'warn' | 'error',
+  features: {
+    enableAnalytics: true,
+    enableLogging: false,
+    enableMocking: false
+  },
+  auth: {
+    tokenKey: 'auth_token',
+    refreshTokenKey: 'refresh_token',
+    tokenExpirationBuffer: 300000 // 5 minutes
+  },
+  api: {
+    timeout: 30000,
+    retryAttempts: 1
+  }
+};`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/environments/environment.prod.ts'),
+    prodEnvironment
+  );
+}
+
+/**
+ * Create auth guard
+ */
+async function createGuards(config) {
+  const authGuard = `import { CanActivateFn, Router } from '@angular/router';
+import { inject } from '@angular/core';
+
+/**
+ * Simple authentication guard
+ * Replace with your actual authentication logic
+ */
+export const authGuard: CanActivateFn = (_route, _state) => {
+  const router = inject(Router);
+
+  // Replace with your actual authentication check
+  const isAuthenticated = localStorage.getItem('auth-token') !== null;
+
+  if (!isAuthenticated) {
+    // Redirect to login page
+    router.navigate(['/auth/login']);
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * Example: Check if user has specific role
+ */
+export const roleGuard = (requiredRole: string): CanActivateFn => {
+  return (_route, _state) => {
+    const router = inject(Router);
+
+    // Replace with your actual role checking logic
+    const userRole = localStorage.getItem('user-role');
+
+    if (userRole !== requiredRole) {
+      router.navigate(['/unauthorized']);
+      return false;
+    }
+
+    return true;
+  };
+};`;
+
+  await fs.writeFile(path.join(config.fullPath, 'src/app/core/guards/auth.guard.ts'), authGuard);
+}
+
+/**
+ * Create model interfaces
+ */
+async function createModels(config) {
+  // User Interface
+  const userInterface = `export interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  avatar?: string;
+  role: 'user' | 'admin' | 'moderator';
+  createdAt: Date;
+  updatedAt: Date;
+  isActive: boolean;
+}
+
+export interface UserProfile {
+  user: User;
+  preferences: {
+    notifications: boolean;
+    language: string;
+  };
+}
+
+export interface CreateUserRequest {
+  email: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+}
+
+export interface UpdateUserRequest {
+  firstName?: string;
+  lastName?: string;
+  avatar?: string;
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/models/user.interface.ts'),
+    userInterface
+  );
+
+  // API Response Interface
+  const apiResponseInterface = `export interface ApiResponse<T = unknown> {
+  data: T;
+  message: string;
+  success: boolean;
+  errors?: string[];
+  meta?: {
+    total: number;
+    page: number;
+    perPage: number;
+    totalPages: number;
+  };
+}
+
+export interface ApiError {
+  message: string;
+  code: string;
+  status: number;
+  timestamp: string;
+  details?: Record<string, string[]>;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  meta: {
+    total: number;
+    page: number;
+    perPage: number;
+    totalPages: number;
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
+  };
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/models/api-response.interface.ts'),
+    apiResponseInterface
+  );
+}
+
+/**
+ * Create pipes (Truncate, TimeAgo)
+ */
+async function createPipes(config) {
+  // Truncate Pipe
+  const truncatePipe = `import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate',
+  standalone: true
+})
+export class TruncatePipe implements PipeTransform {
+  transform(value: string | null | undefined, limit = 50, suffix = '...'): string {
+    if (!value) return '';
+
+    if (value.length <= limit) {
+      return value;
+    }
+
+    return value.substring(0, limit).trim() + suffix;
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/pipes/truncate.pipe.ts'),
+    truncatePipe
+  );
+
+  // Time Ago Pipe
+  const timeAgoPipe = `import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'timeAgo',
+  standalone: true
+})
+export class TimeAgoPipe implements PipeTransform {
+  transform(value: string | number | Date | null | undefined): string {
+    if (!value) return '';
+
+    const date = new Date(value);
+    const now = new Date();
+    const secondsAgo = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+    if (secondsAgo < 60) {
+      return 'just now';
+    }
+
+    const minutesAgo = Math.floor(secondsAgo / 60);
+    if (minutesAgo < 60) {
+      return \`\${minutesAgo} minute\${minutesAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const hoursAgo = Math.floor(minutesAgo / 60);
+    if (hoursAgo < 24) {
+      return \`\${hoursAgo} hour\${hoursAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const daysAgo = Math.floor(hoursAgo / 24);
+    if (daysAgo < 7) {
+      return \`\${daysAgo} day\${daysAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const weeksAgo = Math.floor(daysAgo / 7);
+    if (weeksAgo < 4) {
+      return \`\${weeksAgo} week\${weeksAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const monthsAgo = Math.floor(daysAgo / 30);
+    if (monthsAgo < 12) {
+      return \`\${monthsAgo} month\${monthsAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const yearsAgo = Math.floor(daysAgo / 365);
+    return \`\${yearsAgo} year\${yearsAgo === 1 ? '' : 's'} ago\`;
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/pipes/time-ago.pipe.ts'),
+    timeAgoPipe
+  );
+}
+
+module.exports = {
+  createDirectoryStructure,
+  createEnvironments,
+  createGuards,
+  createModels,
+  createPipes,
+};