create-ng-tailwind 3.1.0 → 4.1.0

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

package/lib/templates/base/linting.js

@@ -0,0 +1,359 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Create VS Code settings and extensions
+ */
+async function createVSCodeSettings(config) {
+  // Create .vscode directory
+  await fs.ensureDir(path.join(config.fullPath, '.vscode'));
+
+  // VSCode settings for format on save
+  const vscodeSettings = {
+    'editor.formatOnSave': true,
+    'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    'editor.codeActionsOnSave': {
+      'source.fixAll.eslint': 'explicit',
+    },
+    '[typescript]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    '[html]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    '[css]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    '[json]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    '[jsonc]': {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+    },
+    'files.eol': '\n',
+    'files.trimTrailingWhitespace': true,
+    'files.insertFinalNewline': true,
+    'editor.tabSize': 2,
+    'prettier.requireConfig': false,
+    'eslint.validate': ['javascript', 'typescript', 'html'],
+    // Suppress CSS linting warnings for Tailwind CSS directives
+    'css.lint.unknownAtRules': 'ignore',
+  };
+
+  // VSCode extensions recommendations
+  const vscodeExtensions = {
+    recommendations: [
+      'esbenp.prettier-vscode',
+      'dbaeumer.vscode-eslint',
+      'angular.ng-template',
+      'bradlc.vscode-tailwindcss',
+    ],
+  };
+
+  // Write settings.json
+  await fs.writeFile(
+    path.join(config.fullPath, '.vscode/settings.json'),
+    JSON.stringify(vscodeSettings, null, 2)
+  );
+
+  // Write extensions.json
+  await fs.writeFile(
+    path.join(config.fullPath, '.vscode/extensions.json'),
+    JSON.stringify(vscodeExtensions, null, 2)
+  );
+}
+
+/**
+ * Update TypeScript config with path mappings
+ */
+async function updateTsConfig(config) {
+  // Define path mapping configuration
+  const pathMappingConfig = `    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"],
+      "@app/*": ["src/app/*"],
+      "@core/*": ["src/app/core/*"],
+      "@shared/*": ["src/app/shared/*"],
+      "@features/*": ["src/app/features/*"],
+      "@layout/*": ["src/app/layout/*"],
+      "@environments/*": ["src/environments/*"]
+    },`;
+
+  // Helper function to add path mappings to a tsconfig file
+  const addPathMappings = (content) => {
+    if (content.includes('"compilerOptions": {')) {
+      const compilerOptionsStart =
+        content.indexOf('"compilerOptions": {') + '"compilerOptions": {'.length;
+      const beforeOptions = content.substring(0, compilerOptionsStart);
+      const afterOptions = content.substring(compilerOptionsStart);
+      return beforeOptions + '\n' + pathMappingConfig + afterOptions;
+    }
+    return content;
+  };
+
+  // Update tsconfig.json (base config) - CRITICAL for IDE support
+  const tsConfigPath = path.join(config.fullPath, 'tsconfig.json');
+  let tsConfigContent = await fs.readFile(tsConfigPath, 'utf8');
+  tsConfigContent = addPathMappings(tsConfigContent);
+  await fs.writeFile(tsConfigPath, tsConfigContent);
+
+  // Update tsconfig.app.json
+  const tsConfigAppPath = path.join(config.fullPath, 'tsconfig.app.json');
+  let tsConfigAppContent = await fs.readFile(tsConfigAppPath, 'utf8');
+  tsConfigAppContent = addPathMappings(tsConfigAppContent);
+  await fs.writeFile(tsConfigAppPath, tsConfigAppContent);
+
+  // Update tsconfig.spec.json
+  const tsConfigSpecPath = path.join(config.fullPath, 'tsconfig.spec.json');
+  let tsConfigSpecContent = await fs.readFile(tsConfigSpecPath, 'utf8');
+  tsConfigSpecContent = addPathMappings(tsConfigSpecContent);
+  await fs.writeFile(tsConfigSpecPath, tsConfigSpecContent);
+}
+
+/**
+ * Configure angular.json for ESLint
+ */
+async function configureAngularJson(config) {
+  const angularJsonPath = path.join(config.fullPath, 'angular.json');
+  const angularJson = JSON.parse(await fs.readFile(angularJsonPath, 'utf8'));
+
+  // Add lint architect target
+  if (angularJson.projects && angularJson.projects[config.projectName]) {
+    angularJson.projects[config.projectName].architect.lint = {
+      builder: '@angular-eslint/builder:lint',
+      options: {
+        lintFilePatterns: ['src/**/*.ts', 'src/**/*.html'],
+      },
+    };
+  }
+
+  await fs.writeFile(angularJsonPath, JSON.stringify(angularJson, null, 2));
+}
+
+/**
+ * Install linting packages
+ */
+async function installLintingPackages(config) {
+  const execa = require('execa');
+
+  try {
+    const packages = [
+      '@eslint/js@^9.23.0',
+      'eslint@^9.23.0',
+      'angular-eslint@19.3.0',
+      'typescript-eslint@^8.20.0',
+      'prettier@^3.5.3',
+      'eslint-config-prettier@^10.1.2',
+      'prettier-plugin-tailwindcss@^0.6.11',
+      'simple-git-hooks@^2.11.1',
+    ];
+
+    await execa.command(`npm install ${packages.join(' ')} --save-dev`, {
+      cwd: config.fullPath,
+      stdio: 'pipe',
+    });
+  } catch (error) {
+    // Silently fail - packages will be installed when user runs npm install
+  }
+}
+
+/**
+ * Setup linting (ESLint, Prettier, simple-git-hooks)
+ */
+async function setupLinting(config) {
+  // Read current package.json
+  const packageJsonPath = path.join(config.fullPath, 'package.json');
+  const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
+
+  // Add icons and PWA to regular dependencies
+  if (!packageJson.dependencies) {
+    packageJson.dependencies = {};
+  }
+  packageJson.dependencies['@ng-icons/core'] = '^29.7.0';
+  packageJson.dependencies['@ng-icons/heroicons'] = '^29.7.0';
+  packageJson.dependencies['@angular/service-worker'] = packageJson.dependencies['@angular/core'];
+
+  // Add linting dev dependencies
+  const lintingDependencies = {
+    '@eslint/js': '^9.23.0',
+    eslint: '^9.23.0',
+    'angular-eslint': '19.3.0',
+    'typescript-eslint': '^8.20.0',
+    prettier: '^3.5.3',
+    'eslint-config-prettier': '^10.1.2',
+    'prettier-plugin-tailwindcss': '^0.6.11',
+    'simple-git-hooks': '^2.11.1',
+  };
+
+  // Add enhanced scripts
+  const enhancedScripts = {
+    lint: 'ng lint',
+    'lint:fix': 'ng lint --fix',
+    format: 'prettier --write "**/*.{ts,html,css,json,md}"',
+    'format:check': 'prettier --check "**/*.{ts,html,css,json,md}"',
+    'format:ts': 'prettier --write "**/*.ts"',
+    'code:check': 'npm run format:check && npm run lint',
+    'code:fix': 'npm run format && npm run lint:fix',
+    prepare: 'simple-git-hooks',
+  };
+
+  // Add prettier configuration
+  const prettierConfig = {
+    printWidth: 100,
+    singleQuote: true,
+    trailingComma: 'es5',
+    tabWidth: 2,
+    semi: true,
+    arrowParens: 'always',
+    endOfLine: 'lf',
+    plugins: ['prettier-plugin-tailwindcss'],
+    overrides: [
+      {
+        files: '*.html',
+        options: {
+          parser: 'angular',
+        },
+      },
+    ],
+  };
+
+  // simple-git-hooks configuration (lightweight pre-commit hooks)
+  const simpleGitHooksConfig = {
+    'pre-commit': 'npm run lint',
+  };
+
+  // Update package.json
+  packageJson.devDependencies = {
+    ...packageJson.devDependencies,
+    ...lintingDependencies,
+  };
+  packageJson.scripts = { ...packageJson.scripts, ...enhancedScripts };
+  packageJson.prettier = prettierConfig;
+  packageJson['simple-git-hooks'] = simpleGitHooksConfig;
+
+  // Write updated package.json
+  await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+
+  // Configure angular.json for ESLint
+  await configureAngularJson(config);
+
+  // Create ESLint configuration (ESLint 9+ flat config)
+  const eslintConfig = `// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+const eslintConfigPrettier = require("eslint-config-prettier");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+      eslintConfigPrettier,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+      "@angular-eslint/component-class-suffix": [
+        "error",
+        {
+          "suffixes": ["Component", "App"]
+        }
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_"
+        }
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);
+`;
+
+  await fs.writeFile(path.join(config.fullPath, 'eslint.config.js'), eslintConfig);
+
+  // Create .prettierignore file
+  const prettierIgnore = `# Build outputs
+dist/
+coverage/
+node_modules/
+
+# Generated files
+*.d.ts
+`;
+
+  await fs.writeFile(path.join(config.fullPath, '.prettierignore'), prettierIgnore);
+
+  // Create .prettierrc.json file for better IDE support
+  await fs.writeFile(
+    path.join(config.fullPath, '.prettierrc.json'),
+    JSON.stringify(prettierConfig, null, 2)
+  );
+
+  // Install linting packages if not skipping install
+  if (!config.skipInstall) {
+    await installLintingPackages(config);
+  }
+}
+
+/**
+ * Format code using Prettier
+ */
+async function formatCode(config) {
+  const execa = require('execa');
+
+  try {
+    // Run prettier to format all generated files (including config files)
+    await execa.command(
+      'npx prettier --write "**/*.{ts,html,css,json}" --ignore-path .gitignore --log-level silent',
+      {
+        cwd: config.fullPath,
+        stdio: 'pipe',
+      }
+    );
+  } catch (error) {
+    // If prettier fails, it's not critical - user can run it manually
+  }
+}
+
+module.exports = {
+  createVSCodeSettings,
+  updateTsConfig,
+  configureAngularJson,
+  installLintingPackages,
+  setupLinting,
+  formatCode,
+};