@polymorphism-tech/morph-spec 3.2.0 → 4.3.0

package/src/lib/validators/css/index.js

@@ -0,0 +1,7 @@
+/**
+ * CSS Validators
+ *
+ * CSS validation and design system compliance.
+ */
+
+export * from './css-validator.js';

package/src/lib/validators/{design-system-validator.js → design-system/design-system-validator.js}

@@ -1,231 +1,231 @@
-/**
- * Design System Validator
- *
- * Validates that CSS and Razor files only use design system tokens
- * instead of hardcoded colors, fonts, or spacing values.
- *
- * MORPH-SPEC 3.0 - Phase 3: Design System Enforcement
- */
-
-import { existsSync, readFileSync, readdirSync, statSync } from 'fs';
-import { join, extname } from 'path';
-import { parseColors, parseTypography, parseSpacing } from '../design-system-generator.js';
-import { detectDesignSystem } from '../design-system-detector.js';
-
-/**
- * Validate design system compliance
- * @param {string} projectPath - Root path of the project
- * @param {string} featureName - Feature name (optional)
- * @param {Object} options - Validation options
- * @returns {Object} { errors, warnings, issues }
- */
-export async function validateDesignSystem(projectPath, featureName = null, options = {}) {
-  const result = {
-    errors: 0,
-    warnings: 0,
-    issues: []
-  };
-
-  // Detect design system
-  const dsDetection = detectDesignSystem(projectPath, featureName);
-
-  if (!dsDetection.hasDesignSystem) {
-    result.errors++;
-    result.issues.push({
-      level: 'error',
-      message: 'No design system found',
-      solution: 'Create a design system at .morph/project/design-system.md or run design system generator'
-    });
-    return result;
-  }
-
-  // Parse design system
-  let designSystem;
-  try {
-    const markdown = readFileSync(dsDetection.path, 'utf8');
-    designSystem = {
-      colors: parseColors(markdown),
-      typography: parseTypography(markdown),
-      spacing: parseSpacing(markdown)
-    };
-  } catch (err) {
-    result.errors++;
-    result.issues.push({
-      level: 'error',
-      message: `Failed to parse design system: ${err.message}`,
-      file: dsDetection.path
-    });
-    return result;
-  }
-
-  // Build allowed color set
-  const allowedColors = new Set();
-  Object.values(designSystem.colors.primary).forEach(hex => allowedColors.add(hex.toLowerCase()));
-  Object.values(designSystem.colors.secondary).forEach(hex => allowedColors.add(hex.toLowerCase()));
-  Object.values(designSystem.colors.neutral).forEach(hex => allowedColors.add(hex.toLowerCase()));
-  Object.values(designSystem.colors.semantic).forEach(hex => allowedColors.add(hex.toLowerCase()));
-
-  // Common system colors (allowed)
-  const systemColors = new Set([
-    '#ffffff', '#fff', '#000000', '#000', 'transparent', 'inherit', 'currentcolor'
-  ]);
-
-  // Scan CSS files
-  const cssFiles = findFiles(projectPath, ['.css'], options.scanPaths || ['wwwroot/css', 'styles']);
-  for (const cssFile of cssFiles) {
-    const cssResult = validateCSSFile(cssFile, allowedColors, systemColors);
-    result.warnings += cssResult.warnings;
-    result.issues.push(...cssResult.issues);
-  }
-
-  // Scan Razor files
-  const razorFiles = findFiles(projectPath, ['.razor'], options.scanPaths || ['Components', 'Pages']);
-  for (const razorFile of razorFiles) {
-    const razorResult = validateRazorFile(razorFile, allowedColors, systemColors);
-    result.warnings += razorResult.warnings;
-    result.issues.push(...razorResult.issues);
-  }
-
-  return result;
-}
-
-/**
- * Find files with specific extensions in directories
- */
-function findFiles(projectPath, extensions, scanPaths) {
-  const files = [];
-
-  for (const scanPath of scanPaths) {
-    const fullPath = join(projectPath, scanPath);
-    if (!existsSync(fullPath)) continue;
-
-    try {
-      walkDirectory(fullPath, extensions, files);
-    } catch (err) {
-      // Ignore permission errors
-    }
-  }
-
-  return files;
-}
-
-/**
- * Recursively walk directory
- */
-function walkDirectory(dir, extensions, files) {
-  const items = readdirSync(dir);
-
-  for (const item of items) {
-    const fullPath = join(dir, item);
-    const stat = statSync(fullPath);
-
-    if (stat.isDirectory()) {
-      walkDirectory(fullPath, extensions, files);
-    } else if (stat.isFile()) {
-      const ext = extname(fullPath);
-      if (extensions.includes(ext)) {
-        files.push(fullPath);
-      }
-    }
-  }
-}
-
-/**
- * Validate CSS file for hardcoded colors
- */
-function validateCSSFile(filePath, allowedColors, systemColors) {
-  const result = {
-    warnings: 0,
-    issues: []
-  };
-
-  try {
-    const content = readFileSync(filePath, 'utf8');
-
-    // Match hex colors: #RGB or #RRGGBB
-    const hexRegex = /#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})\b/g;
-
-    let match;
-    let lineNumber = 1;
-    let lastIndex = 0;
-
-    while ((match = hexRegex.exec(content)) !== null) {
-      const hex = match[0].toLowerCase();
-
-      // Count line number
-      const upToMatch = content.substring(lastIndex, match.index);
-      lineNumber += (upToMatch.match(/\n/g) || []).length;
-      lastIndex = match.index;
-
-      // Skip if in allowed or system colors
-      if (allowedColors.has(hex) || systemColors.has(hex)) {
-        continue;
-      }
-
-      result.warnings++;
-      result.issues.push({
-        level: 'warning',
-        message: `Hardcoded color ${hex} not in design system palette`,
-        file: filePath,
-        line: lineNumber,
-        solution: 'Use CSS variable like var(--color-primary-500) instead'
-      });
-    }
-  } catch (err) {
-    // Ignore read errors
-  }
-
-  return result;
-}
-
-/**
- * Validate Razor file for inline styles with hardcoded colors
- */
-function validateRazorFile(filePath, allowedColors, systemColors) {
-  const result = {
-    warnings: 0,
-    issues: []
-  };
-
-  try {
-    const content = readFileSync(filePath, 'utf8');
-
-    // Match style="" attributes with hex colors
-    const styleRegex = /style\s*=\s*"([^"]*)"/gi;
-
-    let match;
-    while ((match = styleRegex.exec(content)) !== null) {
-      const styleContent = match[1];
-
-      // Find hex colors in style attribute
-      const hexRegex = /#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})\b/g;
-      let hexMatch;
-
-      while ((hexMatch = hexRegex.exec(styleContent)) !== null) {
-        const hex = hexMatch[0].toLowerCase();
-
-        // Skip if in allowed or system colors
-        if (allowedColors.has(hex) || systemColors.has(hex)) {
-          continue;
-        }
-
-        // Count line number
-        const upToMatch = content.substring(0, match.index);
-        const lineNumber = (upToMatch.match(/\n/g) || []).length + 1;
-
-        result.warnings++;
-        result.issues.push({
-          level: 'warning',
-          message: `Inline style with hardcoded color ${hex} not in design system`,
-          file: filePath,
-          line: lineNumber,
-          solution: 'Use CSS class with design system variables or component props instead of inline styles'
-        });
-      }
-    }
-  } catch (err) {
-    // Ignore read errors
-  }
-
-  return result;
-}
+/**
+ * Design System Validator
+ *
+ * Validates that CSS and Razor files only use design system tokens
+ * instead of hardcoded colors, fonts, or spacing values.
+ *
+ * MORPH-SPEC 3.0 - Phase 3: Design System Enforcement
+ */
+
+import { existsSync, readFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+import { parseColors, parseTypography, parseSpacing } from '../../generators/design-system-generator.js';
+import { detectDesignSystem } from '../../detectors/design-system-detector.js';
+
+/**
+ * Validate design system compliance
+ * @param {string} projectPath - Root path of the project
+ * @param {string} featureName - Feature name (optional)
+ * @param {Object} options - Validation options
+ * @returns {Object} { errors, warnings, issues }
+ */
+export async function validateDesignSystem(projectPath, featureName = null, options = {}) {
+  const result = {
+    errors: 0,
+    warnings: 0,
+    issues: []
+  };
+
+  // Detect design system
+  const dsDetection = detectDesignSystem(projectPath, featureName);
+
+  if (!dsDetection.hasDesignSystem) {
+    result.errors++;
+    result.issues.push({
+      level: 'error',
+      message: 'No design system found',
+      solution: 'Create a design system at .morph/project/design-system.md or run design system generator'
+    });
+    return result;
+  }
+
+  // Parse design system
+  let designSystem;
+  try {
+    const markdown = readFileSync(dsDetection.path, 'utf8');
+    designSystem = {
+      colors: parseColors(markdown),
+      typography: parseTypography(markdown),
+      spacing: parseSpacing(markdown)
+    };
+  } catch (err) {
+    result.errors++;
+    result.issues.push({
+      level: 'error',
+      message: `Failed to parse design system: ${err.message}`,
+      file: dsDetection.path
+    });
+    return result;
+  }
+
+  // Build allowed color set
+  const allowedColors = new Set();
+  Object.values(designSystem.colors.primary).forEach(hex => allowedColors.add(hex.toLowerCase()));
+  Object.values(designSystem.colors.secondary).forEach(hex => allowedColors.add(hex.toLowerCase()));
+  Object.values(designSystem.colors.neutral).forEach(hex => allowedColors.add(hex.toLowerCase()));
+  Object.values(designSystem.colors.semantic).forEach(hex => allowedColors.add(hex.toLowerCase()));
+
+  // Common system colors (allowed)
+  const systemColors = new Set([
+    '#ffffff', '#fff', '#000000', '#000', 'transparent', 'inherit', 'currentcolor'
+  ]);
+
+  // Scan CSS files
+  const cssFiles = findFiles(projectPath, ['.css'], options.scanPaths || ['wwwroot/css', 'styles']);
+  for (const cssFile of cssFiles) {
+    const cssResult = validateCSSFile(cssFile, allowedColors, systemColors);
+    result.warnings += cssResult.warnings;
+    result.issues.push(...cssResult.issues);
+  }
+
+  // Scan Razor files
+  const razorFiles = findFiles(projectPath, ['.razor'], options.scanPaths || ['Components', 'Pages']);
+  for (const razorFile of razorFiles) {
+    const razorResult = validateRazorFile(razorFile, allowedColors, systemColors);
+    result.warnings += razorResult.warnings;
+    result.issues.push(...razorResult.issues);
+  }
+
+  return result;
+}
+
+/**
+ * Find files with specific extensions in directories
+ */
+function findFiles(projectPath, extensions, scanPaths) {
+  const files = [];
+
+  for (const scanPath of scanPaths) {
+    const fullPath = join(projectPath, scanPath);
+    if (!existsSync(fullPath)) continue;
+
+    try {
+      walkDirectory(fullPath, extensions, files);
+    } catch (err) {
+      // Ignore permission errors
+    }
+  }
+
+  return files;
+}
+
+/**
+ * Recursively walk directory
+ */
+function walkDirectory(dir, extensions, files) {
+  const items = readdirSync(dir);
+
+  for (const item of items) {
+    const fullPath = join(dir, item);
+    const stat = statSync(fullPath);
+
+    if (stat.isDirectory()) {
+      walkDirectory(fullPath, extensions, files);
+    } else if (stat.isFile()) {
+      const ext = extname(fullPath);
+      if (extensions.includes(ext)) {
+        files.push(fullPath);
+      }
+    }
+  }
+}
+
+/**
+ * Validate CSS file for hardcoded colors
+ */
+function validateCSSFile(filePath, allowedColors, systemColors) {
+  const result = {
+    warnings: 0,
+    issues: []
+  };
+
+  try {
+    const content = readFileSync(filePath, 'utf8');
+
+    // Match hex colors: #RGB or #RRGGBB
+    const hexRegex = /#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})\b/g;
+
+    let match;
+    let lineNumber = 1;
+    let lastIndex = 0;
+
+    while ((match = hexRegex.exec(content)) !== null) {
+      const hex = match[0].toLowerCase();
+
+      // Count line number
+      const upToMatch = content.substring(lastIndex, match.index);
+      lineNumber += (upToMatch.match(/\n/g) || []).length;
+      lastIndex = match.index;
+
+      // Skip if in allowed or system colors
+      if (allowedColors.has(hex) || systemColors.has(hex)) {
+        continue;
+      }
+
+      result.warnings++;
+      result.issues.push({
+        level: 'warning',
+        message: `Hardcoded color ${hex} not in design system palette`,
+        file: filePath,
+        line: lineNumber,
+        solution: 'Use CSS variable like var(--color-primary-500) instead'
+      });
+    }
+  } catch (err) {
+    // Ignore read errors
+  }
+
+  return result;
+}
+
+/**
+ * Validate Razor file for inline styles with hardcoded colors
+ */
+function validateRazorFile(filePath, allowedColors, systemColors) {
+  const result = {
+    warnings: 0,
+    issues: []
+  };
+
+  try {
+    const content = readFileSync(filePath, 'utf8');
+
+    // Match style="" attributes with hex colors
+    const styleRegex = /style\s*=\s*"([^"]*)"/gi;
+
+    let match;
+    while ((match = styleRegex.exec(content)) !== null) {
+      const styleContent = match[1];
+
+      // Find hex colors in style attribute
+      const hexRegex = /#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})\b/g;
+      let hexMatch;
+
+      while ((hexMatch = hexRegex.exec(styleContent)) !== null) {
+        const hex = hexMatch[0].toLowerCase();
+
+        // Skip if in allowed or system colors
+        if (allowedColors.has(hex) || systemColors.has(hex)) {
+          continue;
+        }
+
+        // Count line number
+        const upToMatch = content.substring(0, match.index);
+        const lineNumber = (upToMatch.match(/\n/g) || []).length + 1;
+
+        result.warnings++;
+        result.issues.push({
+          level: 'warning',
+          message: `Inline style with hardcoded color ${hex} not in design system`,
+          file: filePath,
+          line: lineNumber,
+          solution: 'Use CSS class with design system variables or component props instead of inline styles'
+        });
+      }
+    }
+  } catch (err) {
+    // Ignore read errors
+  }
+
+  return result;
+}

package/src/lib/validators/design-system/index.js

@@ -0,0 +1,7 @@
+/**
+ * Design System Validators
+ *
+ * Design system compliance validation.
+ */
+
+export * from './design-system-validator.js';

package/src/lib/validators/packages/index.js

@@ -0,0 +1,7 @@
+/**
+ * Package Validators
+ *
+ * Package and dependency validation.
+ */
+
+export * from './package-validator.js';

package/src/lib/validators/shared/index.js

@@ -0,0 +1,12 @@
+/**
+ * Shared validator utilities
+ *
+ * Common functionality used across multiple validators.
+ */
+
+export { countIssues } from './issue-counter.js';
+export {
+  formatValidationSummary,
+  formatValidationIssues,
+  formatValidationStatus,
+} from './result-formatter.js';

package/src/lib/validators/shared/issue-counter.js

@@ -0,0 +1,18 @@
+/**
+ * Shared issue counting utility for validators
+ *
+ * Consolidates duplicate implementations from:
+ * - blazor-validator.js
+ * - blazor-state-validator.js
+ * - blazor-concurrency-analyzer.js
+ *
+ * @param {Array} issues - Array of validation issues with type property
+ * @returns {{errors: number, warnings: number, infos: number}} Count by type
+ */
+export function countIssues(issues) {
+  return {
+    errors: issues.filter((i) => i.type === 'error').length,
+    warnings: issues.filter((i) => i.type === 'warning').length,
+    infos: issues.filter((i) => i.type === 'info').length,
+  };
+}

package/src/lib/validators/shared/result-formatter.js

@@ -0,0 +1,124 @@
+/**
+ * Shared validation result formatting utilities
+ *
+ * Provides common formatting patterns for validation results.
+ * Domain-specific formatters (CSS, template, etc.) can extend these.
+ */
+
+import chalk from 'chalk';
+
+/**
+ * Format a generic validation result summary
+ *
+ * @param {Object} summary - Validation summary object
+ * @param {string} title - Title for the results section
+ * @returns {string[]} Array of formatted lines
+ */
+export function formatValidationSummary(summary, title = 'Validation Results') {
+  const lines = [];
+
+  lines.push('');
+  lines.push(title);
+  lines.push('='.repeat(50));
+  lines.push('');
+
+  // Format summary key-value pairs
+  for (const [key, value] of Object.entries(summary)) {
+    const label = key
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/^./, str => str.toUpperCase())
+      .trim();
+    lines.push(`${label}: ${value}`);
+  }
+
+  lines.push('');
+
+  return lines;
+}
+
+/**
+ * Format validation issues with consistent styling
+ *
+ * @param {Array} issues - Array of validation issues
+ * @param {boolean} verbose - Include detailed output
+ * @returns {string[]} Array of formatted issue lines
+ */
+export function formatValidationIssues(issues, verbose = false) {
+  const lines = [];
+
+  if (issues.length === 0) {
+    return lines;
+  }
+
+  // Group by type
+  const errors = issues.filter(i => i.type === 'error');
+  const warnings = issues.filter(i => i.type === 'warning');
+
+  if (errors.length > 0) {
+    lines.push(chalk.red.bold(`Errors (${errors.length}):`));
+    lines.push('-'.repeat(50));
+    for (const issue of errors) {
+      lines.push(formatIssue(issue, verbose));
+    }
+    lines.push('');
+  }
+
+  if (warnings.length > 0) {
+    lines.push(chalk.yellow.bold(`Warnings (${warnings.length}):`));
+    lines.push('-'.repeat(50));
+    for (const issue of warnings) {
+      lines.push(formatIssue(issue, verbose));
+    }
+    lines.push('');
+  }
+
+  return lines;
+}
+
+/**
+ * Format a single validation issue
+ *
+ * @param {Object} issue - Validation issue
+ * @param {boolean} verbose - Include additional details
+ * @returns {string} Formatted issue string
+ */
+function formatIssue(issue, verbose = false) {
+  const color = issue.type === 'error' ? chalk.red : chalk.yellow;
+  const icon = issue.type === 'error' ? '✗' : '⚠';
+
+  let formatted = `  ${icon} ${issue.message}`;
+
+  if (issue.file) {
+    formatted += chalk.dim(` (${issue.file}`);
+    if (issue.line) {
+      formatted += `:${issue.line}`;
+    }
+    formatted += chalk.dim(')');
+  }
+
+  if (verbose && issue.suggestion) {
+    formatted += `\n    ${chalk.cyan('→')} ${issue.suggestion}`;
+  }
+
+  return formatted;
+}
+
+/**
+ * Format final validation status
+ *
+ * @param {boolean} valid - Whether validation passed
+ * @param {number} errorCount - Number of errors
+ * @param {number} warningCount - Number of warnings
+ * @returns {string} Status message with appropriate styling
+ */
+export function formatValidationStatus(valid, errorCount = 0, warningCount = 0) {
+  if (valid && errorCount === 0 && warningCount === 0) {
+    return chalk.green('✓ All validations passed');
+  }
+
+  if (errorCount > 0) {
+    return chalk.red(`✗ Validation failed with ${errorCount} error(s) and ${warningCount} warning(s)`);
+  }
+
+  return chalk.yellow(`⚠ Validation passed with ${warningCount} warning(s)`);
+}