@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/scripts/check-icon-names.js

@@ -0,0 +1,402 @@
+#!/usr/bin/env node
+
+/**
+ * Modus Icon Names Validation Script for Angular + Tailwind v4
+ *
+ * This script validates that all Modus icon names used in the codebase
+ * are correct and exist in the official Modus Icons list.
+ *
+ * It checks for typos, invalid names, and suggests corrections.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+const { glob } = require('glob');
+
+// Read and parse the Modus icons data from TypeScript file
+const iconsContent = fs.readFileSync(path.join(process.cwd(), 'data/modusIcons.ts'), 'utf8');
+
+// Extract the modusIcons object using regex
+const modusIconsMatch = iconsContent.match(/export const modusIcons = ({[\s\S]*?});/);
+if (!modusIconsMatch) {
+  console.error('Could not extract modusIcons object from TypeScript file');
+  process.exit(1);
+}
+
+// Evaluate the modusIcons object (safe since we control the content)
+const modusIcons = eval(`(${modusIconsMatch[1]})`);
+
+// Flatten all icons for easy access
+const allModusIcons = Object.values(modusIcons).flat();
+
+// File patterns to check
+const FILE_PATTERNS = ['src/**/*.{ts,html}', 'src/**/*.css', 'src/**/*.scss'];
+
+// Colors for console output
+const colors = {
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+};
+
+// Icon usage patterns to detect (Angular template syntax)
+const ICON_USAGE_PATTERNS = [
+  // Angular modus-icon component usage
+  /<modus-icon[^>]*name=["']([^"']+)["'][^>]*>/g,
+
+  // Direct icon class usage - match content between <i> tags with modus-icons class
+  /<i[^>]*class=["'][^"']*modus-icons[^"']*["'][^>]*>([^<]+)<\/i>/g,
+
+  // Icon in string literals - only for specific icon-related attributes
+  /icon=["']([a-zA-Z0-9_-]+)["']/g,
+  /iconName=["']([a-zA-Z0-9_-]+)["']/g,
+  /startIcon=["']([a-zA-Z0-9_-]+)["']/g,
+  /endIcon=["']([a-zA-Z0-9_-]+)["']/g,
+
+  // Angular component icon attributes
+  /<modus-button[^>]*icon=["']([^"']+)["'][^>]*>/g,
+  /<modus-card[^>]*icon=["']([^"']+)["'][^>]*>/g,
+  /<modus-chip[^>]*icon=["']([^"']+)["'][^>]*>/g,
+  /<modus-alert[^>]*icon=["']([^"']+)["'][^>]*>/g,
+  /<modus-tooltip[^>]*icon=["']([^"']+)["'][^>]*>/g,
+
+  // Icon in template literals - only if they're likely icon names
+  /`([a-zA-Z0-9_-]+)`(?=.*modus-icons)/g,
+];
+
+/**
+ * Find similar icon names using Levenshtein distance
+ */
+function findSimilarIcons(iconName, maxDistance = 2) {
+  const similar = [];
+
+  for (const validIcon of allModusIcons) {
+    const distance = levenshteinDistance(iconName.toLowerCase(), validIcon.toLowerCase());
+
+    // Only include if distance is reasonable and the icon name is meaningful
+    if (distance <= maxDistance && distance > 0) {
+      // Filter out very short matches that are likely meaningless
+      if (validIcon.length >= 3 && iconName.length >= 3) {
+        similar.push({
+          name: validIcon,
+          distance: distance,
+        });
+      }
+    }
+  }
+
+  return similar.sort((a, b) => a.distance - b.distance).slice(0, 5);
+}
+
+/**
+ * Calculate Levenshtein distance between two strings
+ */
+function levenshteinDistance(str1, str2) {
+  const matrix = [];
+
+  for (let i = 0; i <= str2.length; i++) {
+    matrix[i] = [i];
+  }
+
+  for (let j = 0; j <= str1.length; j++) {
+    matrix[0][j] = j;
+  }
+
+  for (let i = 1; i <= str2.length; i++) {
+    for (let j = 1; j <= str1.length; j++) {
+      if (str2.charAt(i - 1) === str1.charAt(j - 1)) {
+        matrix[i][j] = matrix[i - 1][j - 1];
+      } else {
+        matrix[i][j] = Math.min(
+          matrix[i - 1][j - 1] + 1,
+          matrix[i][j - 1] + 1,
+          matrix[i - 1][j] + 1
+        );
+      }
+    }
+  }
+
+  return matrix[str2.length][str1.length];
+}
+
+/**
+ * Find icon by partial name match
+ */
+function findIconByPartial(iconName) {
+  // Only search for partial matches if the input is meaningful
+  if (iconName.length < 3) {
+    return [];
+  }
+
+  const partialMatches = allModusIcons.filter((icon) => {
+    // Only include icons that are at least 3 characters long
+    if (icon.length < 3) return false;
+
+    // Check if the icon name contains the search term or vice versa
+    const iconLower = icon.toLowerCase();
+    const searchLower = iconName.toLowerCase();
+
+    return iconLower.includes(searchLower) || searchLower.includes(iconLower);
+  });
+
+  // Sort by relevance (exact substring matches first, then by length)
+  return partialMatches
+    .sort((a, b) => {
+      const aExact = a.toLowerCase().includes(iconName.toLowerCase());
+      const bExact = b.toLowerCase().includes(iconName.toLowerCase());
+
+      if (aExact && !bExact) return -1;
+      if (!aExact && bExact) return 1;
+
+      return a.length - b.length;
+    })
+    .slice(0, 5);
+}
+
+/**
+ * Get icon category
+ */
+function getIconCategory(iconName) {
+  for (const [category, icons] of Object.entries(modusIcons)) {
+    if (icons.includes(iconName)) {
+      return category;
+    }
+  }
+  return null;
+}
+
+/**
+ * Check a single file for icon name violations
+ */
+function checkFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const violations = [];
+
+  for (const pattern of ICON_USAGE_PATTERNS) {
+    let match;
+    while ((match = pattern.exec(content)) !== null) {
+      const iconName = match[1];
+
+      // Skip if it's not a potential icon name (too short, contains spaces, etc.)
+      if (
+        iconName.length < 2 ||
+        iconName.includes(' ') ||
+        iconName.includes('\n') ||
+        iconName.includes('\t')
+      ) {
+        continue;
+      }
+
+      // Skip common non-icon words that might be caught by the regex
+      const commonWords = [
+        'description',
+        'title',
+        'content',
+        'text',
+        'label',
+        'value',
+        'name',
+        'id',
+        'class',
+        'type',
+        'src',
+        'alt',
+        'href',
+        'target',
+        'rel',
+        'style',
+        'width',
+        'height',
+        'size',
+        'onClick',
+        'onChange',
+        'onSubmit',
+        'onFocus',
+        'onBlur',
+        'onMouseOver',
+        'onMouseOut',
+        'className',
+        'htmlFor',
+        'ariaLabel',
+        'ariaDescribedBy',
+        'role',
+        'tabIndex',
+        'true',
+        'false',
+        'null',
+        'undefined',
+        'this',
+        'that',
+        'here',
+        'there',
+        'where',
+      ];
+
+      if (commonWords.includes(iconName.toLowerCase())) {
+        continue;
+      }
+
+      // Check if the icon name exists in the official list
+      if (!allModusIcons.includes(iconName)) {
+        const lines = content.substring(0, match.index).split('\n');
+        const lineNumber = lines.length;
+        const columnNumber = lines[lines.length - 1].length + 1;
+
+        // Find similar icons
+        const similarIcons = findSimilarIcons(iconName);
+        const partialMatches = findIconByPartial(iconName);
+
+        violations.push({
+          file: filePath,
+          line: lineNumber,
+          column: columnNumber,
+          iconName: iconName,
+          match: match[0],
+          similarIcons: similarIcons,
+          partialMatches: partialMatches,
+        });
+      }
+    }
+    pattern.lastIndex = 0;
+  }
+
+  return violations;
+}
+
+/**
+ * Format violation for display
+ */
+function formatViolation(violation) {
+  const { file, line, column, iconName, similarIcons, partialMatches } = violation;
+  const relativePath = path.relative(process.cwd(), file);
+
+  let suggestions = [];
+
+  if (similarIcons.length > 0) {
+    suggestions.push(
+      `Did you mean: ${colors.green}${similarIcons.map((s) => s.name).join(', ')}${colors.reset}`
+    );
+  }
+
+  if (partialMatches.length > 0) {
+    suggestions.push(`Similar icons: ${colors.cyan}${partialMatches.join(', ')}${colors.reset}`);
+  }
+
+  return {
+    location: `${relativePath}:${line}:${column}`,
+    message: `Invalid Modus icon name: ${colors.red}${iconName}${colors.reset}`,
+    suggestions: suggestions,
+    explanation: `The icon "${iconName}" is not found in the official Modus Icons list.`,
+  };
+}
+
+/**
+ * Main function
+ */
+async function main() {
+  console.log(`${colors.bold}${colors.blue}🔍 Validating Modus icon names...${colors.reset}\n`);
+
+  const allFiles = [];
+  for (const pattern of FILE_PATTERNS) {
+    const files = glob.sync(pattern, { cwd: process.cwd() });
+    allFiles.push(...files);
+  }
+  const uniqueFiles = [...new Set(allFiles)];
+  let totalViolations = 0;
+  const violationsByFile = {};
+
+  // Check each file
+  for (const file of uniqueFiles) {
+    const violations = checkFile(file);
+    if (violations.length > 0) {
+      violationsByFile[file] = violations;
+      totalViolations += violations.length;
+    }
+  }
+
+  // Display results
+  if (totalViolations === 0) {
+    console.log(`${colors.green}✅ All Modus icon names are valid!${colors.reset}`);
+    console.log(
+      `${colors.dim}Found ${allModusIcons.length} valid Modus icons across ${
+        Object.keys(modusIcons).length
+      } categories.${colors.reset}\n`
+    );
+    process.exit(0);
+  }
+
+  console.log(
+    `${colors.red}❌ Found ${totalViolations} invalid Modus icon name${
+      totalViolations === 1 ? '' : 's'
+    }:${colors.reset}\n`
+  );
+
+  // Group violations by file
+  for (const [file, violations] of Object.entries(violationsByFile)) {
+    const relativePath = path.relative(process.cwd(), file);
+    console.log(`${colors.bold}${colors.cyan}📁 ${relativePath}${colors.reset}`);
+
+    for (const violation of violations) {
+      const formatted = formatViolation(violation);
+      console.log(`  ${colors.dim}${formatted.location}${colors.reset}`);
+      console.log(`  ${formatted.message}`);
+      if (formatted.suggestions.length > 0) {
+        formatted.suggestions.forEach((suggestion) => {
+          console.log(`  ${suggestion}`);
+        });
+      }
+      console.log(`  ${colors.dim}${formatted.explanation}${colors.reset}\n`);
+    }
+  }
+
+  // Summary and help
+  console.log(`${colors.bold}${colors.yellow}📋 Summary:${colors.reset}`);
+  console.log(`• Total violations: ${colors.red}${totalViolations}${colors.reset}`);
+  console.log(
+    `• Files affected: ${colors.red}${Object.keys(violationsByFile).length}${colors.reset}`
+  );
+  console.log(`• Valid icons available: ${colors.green}${allModusIcons.length}${colors.reset}\n`);
+
+  console.log(`${colors.bold}${colors.blue}💡 How to fix:${colors.reset}`);
+  console.log(`• Check the icon name spelling and case`);
+  console.log(`• Use the suggestions provided above`);
+  console.log(`• Browse available icons at: ${colors.cyan}data/modusIcons.ts${colors.reset}`);
+  console.log(`• See docs/angular-design-system.mdc for usage patterns\n`);
+
+  console.log(`${colors.bold}${colors.magenta}🔧 Available commands:${colors.reset}`);
+  console.log(`• ${colors.cyan}npm run lint:icon-names${colors.reset} - Run this check`);
+  console.log(`• ${colors.cyan}npm run lint:all${colors.reset} - Run all linting checks\n`);
+
+  // Show some popular icon categories
+  console.log(`${colors.bold}${colors.blue}📚 Popular Icon Categories:${colors.reset}`);
+  const popularCategories = [
+    'Navigation & UI',
+    'Actions & Operations',
+    'Status & Feedback',
+    'Files & Documents',
+  ];
+
+  popularCategories.forEach((category) => {
+    const count = modusIcons[category]?.length || 0;
+    console.log(`• ${colors.cyan}${category}${colors.reset}: ${count} icons`);
+  });
+  console.log();
+
+  process.exit(1);
+}
+
+// Run the script
+main().catch((error) => {
+  console.error(`${colors.red}❌ Error running icon names validation:${colors.reset}`);
+  console.error(error);
+  process.exit(1);
+});

package/templates/angular/scripts/check-inline-styles.js

@@ -0,0 +1,292 @@
+#!/usr/bin/env node
+
+/**
+ * Inline Styles Linting Script for Angular + Tailwind v4
+ *
+ * This script checks for usage of inline styles that should be replaced with Tailwind classes
+ * to ensure design system consistency and proper styling patterns.
+ *
+ * It flags common inline style patterns and suggests Tailwind alternatives.
+ *
+ * EXCEPTIONS: Border-related styles are allowed due to Tailwind v4 + Modus conflicts.
+ * However, inline border styles should be replaced with our border utility classes.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+const { glob } = require('glob');
+
+// Inline style patterns to detect (Angular template syntax: [style.*] and style="")
+const INLINE_STYLE_PATTERNS = [
+  // Angular style attribute binding
+  /\[style\.[^\]]+=\s*["'][^"']+["']\]/g,
+  /\[style\.[^\]]+\.px\]/g,
+  /\[style\.[^\]]+\.rem\]/g,
+  /\[style\.[^\]]+\.em\]/g,
+  /\[style\.[^\]]+\.%\]/g,
+
+  // Regular style attribute
+  /style\s*=\s*["'][^"']*background[^"']*["']/gi,
+  /style\s*=\s*["'][^"']*color[^"']*["']/gi,
+  /style\s*=\s*["'][^"']*margin[^"']*["']/gi,
+  /style\s*=\s*["'][^"']*padding[^"']*["']/gi,
+  /style\s*=\s*["'][^"']*font-size[^"']*["']/gi,
+  /style\s*=\s*["'][^"']*font-weight[^"']*["']/gi,
+  /style\s*=\s*["'][^"']*width[^"']*["']/gi,
+  /style\s*=\s*["'][^"']*height[^"']*["']/gi,
+  /style\s*=\s*["'][^"']*display[^"']*["']/gi,
+  /style\s*=\s*["'][^"']*var\(--[^"']*["']/gi,
+];
+
+// Tailwind alternatives for common inline styles
+const TAILWIND_ALTERNATIVES = {
+  // Spacing (most common in Angular templates)
+  '[style.margin-right.px]="8"': 'mr-2',
+  '[style.margin-left.px]="8"': 'ml-2',
+  '[style.margin-top.px]="8"': 'mt-2',
+  '[style.margin-bottom.px]="8"': 'mb-2',
+  '[style.padding.px]="16"': 'p-4',
+  '[style.padding.px]="8"': 'p-2',
+  '[style.padding.px]="32"': 'p-8',
+
+  // Background colors - Design System Colors
+  'style="background: var(--background)"': 'bg-background',
+  'style="background: var(--card)"': 'bg-card',
+  'style="background: var(--muted)"': 'bg-muted',
+  'style="background: var(--secondary)"': 'bg-secondary',
+  'style="background: var(--primary)"': 'bg-primary',
+  'style="background: var(--success)"': 'bg-success',
+  'style="background: var(--error)"': 'bg-error',
+  'style="background: var(--warning)"': 'bg-warning',
+
+  // Text colors - Design System Colors
+  'style="color: var(--foreground)"': 'text-foreground',
+  'style="color: var(--primary)"': 'text-primary',
+  'style="color: var(--success)"': 'text-success',
+  'style="color: var(--error)"': 'text-error',
+  'style="color: var(--warning)"': 'text-warning',
+  'style="color: var(--muted-foreground)"': 'text-muted-foreground',
+
+  // Typography
+  'style="font-size: 1.5rem"': 'text-xl',
+  'style="font-size: 1.25rem"': 'text-lg',
+  'style="font-size: 1rem"': 'text-base',
+  'style="font-size: 0.875rem"': 'text-sm',
+  'style="font-size: 0.75rem"': 'text-xs',
+  'style="font-weight: 600"': 'font-semibold',
+  'style="font-weight: 700"': 'font-bold',
+  'style="text-align: center"': 'text-center',
+  'style="text-align: left"': 'text-left',
+  'style="text-align: right"': 'text-right',
+
+  // Layout
+  'style="display: flex"': 'flex',
+  'style="display: grid"': 'grid',
+  'style="display: block"': 'block',
+  'style="display: inline-block"': 'inline-block',
+
+  // Sizing
+  'style="width: 100%"': 'w-full',
+  'style="height: 100%"': 'h-full',
+};
+
+// Files to check
+const FILE_PATTERNS = ['src/**/*.ts', 'src/**/*.html', 'src/**/*.css', 'src/**/*.scss'];
+
+// Files to exclude
+const EXCLUDE_PATTERNS = [
+  'node_modules/**',
+  'dist/**',
+  'build/**',
+  '**/*.d.ts',
+  'scripts/**',
+  'src/styles.css', // Exclude styles.css as it contains the design system definitions
+];
+
+function isBorderRelatedStyle(styleContent) {
+  // Check for border-related patterns
+  const borderPatterns = [
+    /border-width/gi,
+    /border-top/gi,
+    /border-right/gi,
+    /border-bottom/gi,
+    /border-left/gi,
+    /border:\s*["']?\d+px/gi,
+    /border:\s*["']?\d+px\s+solid/gi,
+    /border:\s*["']?\d+px\s+solid\s+var\(--border\)/gi,
+    /border:\s*["']?\d+px\s+solid\s+var\(--modus-wc-color/gi,
+  ];
+
+  return borderPatterns.some((pattern) => pattern.test(styleContent));
+}
+
+function isDynamicValue(styleContent) {
+  // Check for Angular template expressions
+  return (
+    styleContent.includes('{{') ||
+    styleContent.includes('}}') ||
+    (styleContent.includes('[') && styleContent.includes(']') && styleContent.includes('=')) ||
+    styleContent.includes('*ngIf') ||
+    styleContent.includes('*ngFor') ||
+    styleContent.includes('@') ||
+    styleContent.includes('?') || // Ternary operators
+    styleContent.includes('&&') || // Logical operators
+    styleContent.includes('||')
+  ); // Logical operators
+}
+
+function getTailwindSuggestion(styleContent) {
+  // Try to find exact matches first
+  for (const [inlineStyle, tailwindClass] of Object.entries(TAILWIND_ALTERNATIVES)) {
+    if (styleContent.includes(inlineStyle)) {
+      return tailwindClass;
+    }
+  }
+
+  // Generic suggestions based on common patterns
+  if (styleContent.includes('background') || styleContent.includes('background-color')) {
+    return 'Use bg-* classes (bg-background, bg-card, bg-primary, etc.)';
+  }
+  if (styleContent.includes('color')) {
+    return 'Use text-* classes (text-foreground, text-primary, etc.)';
+  }
+  if (styleContent.includes('margin')) {
+    return 'Use m-* classes (m-2, mr-4, mt-8, etc.)';
+  }
+  if (styleContent.includes('padding')) {
+    return 'Use p-* classes (p-2, px-4, py-8, etc.)';
+  }
+  if (styleContent.includes('font-size')) {
+    return 'Use text-* classes (text-sm, text-lg, text-xl, etc.)';
+  }
+  if (styleContent.includes('display')) {
+    return 'Use display classes (flex, grid, block, etc.)';
+  }
+
+  return 'Use appropriate Tailwind utility classes';
+}
+
+async function checkFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const violations = [];
+
+  for (const pattern of INLINE_STYLE_PATTERNS) {
+    let match;
+    while ((match = pattern.exec(content)) !== null) {
+      const line = content.substring(0, match.index).split('\n').length;
+      const column = match.index - content.lastIndexOf('\n', match.index - 1);
+
+      const styleContent = match[0];
+
+      // Skip if it's a border-related style (allowed, but should use utilities)
+      if (isBorderRelatedStyle(styleContent)) {
+        continue;
+      }
+
+      // Skip if it's a dynamic value (contains template expressions)
+      if (isDynamicValue(styleContent)) {
+        continue;
+      }
+
+      const suggestion = getTailwindSuggestion(styleContent);
+
+      violations.push({
+        file: filePath,
+        line,
+        column,
+        match: match[0],
+        message: `Inline style detected: "${match[0]}". Use Tailwind classes instead.`,
+        suggestion: suggestion,
+      });
+    }
+    pattern.lastIndex = 0;
+  }
+
+  return violations;
+}
+
+async function main() {
+  console.log('🎨 Checking for inline styles that should use Tailwind classes in Angular app...\n');
+
+  let allViolations = [];
+
+  try {
+    // Get all files to check
+    const allFiles = [];
+    for (const pattern of FILE_PATTERNS) {
+      const files = glob.sync(pattern, {
+        ignore: EXCLUDE_PATTERNS,
+      });
+      allFiles.push(...files.map(f => path.resolve(f)));
+    }
+    const files = [...new Set(allFiles)];
+
+    // Check each file
+    for (const file of files) {
+      try {
+        const violations = await checkFile(file);
+        allViolations = allViolations.concat(violations);
+      } catch (error) {
+        console.warn(`⚠️  Warning: Could not check file ${file}: ${error.message}`);
+      }
+    }
+
+    // Report results
+    if (allViolations.length === 0) {
+      console.log('✅ All files are using Tailwind classes correctly!');
+      console.log(
+        '📝 Note: Border-related styles are allowed due to Tailwind v4 + Modus conflicts'
+      );
+      process.exit(0);
+    } else {
+      console.log(`❌ Found ${allViolations.length} inline style violations:\n`);
+
+      // Group violations by file
+      const violationsByFile = allViolations.reduce((acc, violation) => {
+        if (!acc[violation.file]) {
+          acc[violation.file] = [];
+        }
+        acc[violation.file].push(violation);
+        return acc;
+      }, {});
+
+      // Print violations
+      for (const [file, violations] of Object.entries(violationsByFile)) {
+        const relativePath = path.relative(process.cwd(), file);
+        console.log(`📄 ${relativePath}:`);
+
+        for (const violation of violations) {
+          console.log(`  ${violation.line}:${violation.column} - ${violation.message}`);
+          console.log(`    💡 Suggestion: ${violation.suggestion}`);
+        }
+        console.log();
+      }
+
+      console.log('💡 Tailwind Classes Reference:');
+      console.log('  ✅ Background: bg-background, bg-card, bg-primary, bg-muted');
+      console.log('  ✅ Text: text-foreground, text-primary, text-error');
+      console.log('  ✅ Spacing: p-4, m-2, px-4, py-2, gap-4, mr-2, ml-2');
+      console.log('  ✅ Typography: text-lg, font-semibold, text-center');
+      console.log('  ✅ Layout: flex, grid, items-center, justify-between');
+      console.log('  ✅ Sizing: w-full, h-full, max-w-5xl, min-h-screen');
+      console.log('  ✅ Effects: opacity-50, rounded-lg, shadow-lg');
+      console.log(
+        '  📝 Note: Border styles (borderWidth, border) are allowed due to Tailwind v4 conflicts'
+      );
+      console.log(
+        '  🎯 Use border utility classes: border-default, border-thick, border-dashed, etc.'
+      );
+      console.log('  📖 Documentation: https://tailwindcss.com/docs');
+
+      process.exit(1);
+    }
+  } catch (error) {
+    console.error('💥 Error running inline styles check:', error.message);
+    process.exit(1);
+  }
+}
+
+// Run the script
+main();