@polymorphism-tech/morph-spec 2.3.0 → 3.0.0

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

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

package/src/utils/file-copier.js

@@ -1,139 +1,187 @@
-import fs from 'fs-extra';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-export function getContentDir() {
-  return join(__dirname, '..', '..', 'content');
-}
-
-export async function copyDirectory(src, dest, options = {}) {
-  const { filter, overwrite = true } = options;
-
-  await fs.copy(src, dest, {
-    overwrite,
-    filter: filter || (() => true),
-    errorOnExist: false
-  });
-}
-
-export async function copyFile(src, dest) {
-  await fs.ensureDir(dirname(dest));
-  await fs.copy(src, dest, { overwrite: true });
-}
-
-export async function pathExists(path) {
-  return fs.pathExists(path);
-}
-
-export async function readJson(path) {
-  return fs.readJson(path);
-}
-
-export async function writeJson(path, data) {
-  await fs.ensureDir(dirname(path));
-  await fs.writeJson(path, data, { spaces: 2 });
-}
-
-export async function ensureDir(path) {
-  await fs.ensureDir(path);
-}
-
-export async function writeFile(path, content) {
-  await fs.ensureDir(dirname(path));
-  await fs.writeFile(path, content, 'utf8');
-}
-
-export async function removeDir(path) {
-  await fs.remove(path);
-}
-
-export async function readFile(path) {
-  return fs.readFile(path, 'utf8');
-}
-
-/**
- * Create symlink with fallback to copy if symlink fails
- * @param {string} target - Path to the original file/folder
- * @param {string} link - Path where symlink should be created
- * @param {string} type - 'file' or 'dir'
- * @returns {Promise<'symlink' | 'copy'>} - Returns how the link was created
- */
-export async function createSymlink(target, link, type = 'file') {
-  await fs.ensureDir(dirname(link));
-
-  try {
-    // Try to create symlink
-    await fs.ensureSymlink(target, link, type);
-    return 'symlink';
-  } catch (error) {
-    // Fallback: copy the file/directory if symlink fails
-    // (Windows may require admin permissions for symlinks)
-    if (type === 'file') {
-      await copyFile(target, link);
-    } else {
-      await copyDirectory(target, link);
-    }
-    return 'copy';
-  }
-}
-
-export async function updateGitignore(projectPath) {
-  const gitignorePath = join(projectPath, '.gitignore');
-
-  const morphRules = [
-    '',
-    '# MORPH-SPEC',
-    '.morph/examples/',
-    '.morph/templates/',
-    '.claude/settings.local.json',
-    ''
-  ];
-
-  let content = '';
-  let hasMorphSection = false;
-
-  // Read existing .gitignore if it exists
-  if (await pathExists(gitignorePath)) {
-    content = await readFile(gitignorePath);
-    hasMorphSection = content.includes('# MORPH-SPEC');
-  }
-
-  // If MORPH section already exists, check if rules are up to date
-  if (hasMorphSection) {
-    const lines = content.split('\n');
-    const morphStartIndex = lines.findIndex(line => line.trim() === '# MORPH-SPEC');
-
-    // Find the end of MORPH section (next empty line or section header)
-    let morphEndIndex = morphStartIndex + 1;
-    while (morphEndIndex < lines.length &&
-           lines[morphEndIndex].trim() !== '' &&
-           !lines[morphEndIndex].startsWith('#')) {
-      morphEndIndex++;
-    }
-
-    // Extract current MORPH rules
-    const currentMorphRules = lines.slice(morphStartIndex, morphEndIndex + 1);
-    const expectedMorphRules = morphRules.slice(1, -1); // Remove empty lines from comparison
-
-    // Check if all expected rules are present
-    const missingRules = expectedMorphRules.filter(rule =>
-      rule.startsWith('#') || !currentMorphRules.some(line => line.trim() === rule)
-    );
-
-    if (missingRules.length > 0) {
-      // Update the section with all rules
-      lines.splice(morphStartIndex, morphEndIndex - morphStartIndex, ...morphRules.slice(1, -1));
-      content = lines.join('\n');
-    }
-  } else {
-    // Add MORPH section
-    if (content && !content.endsWith('\n')) {
-      content += '\n';
-    }
-    content += morphRules.join('\n');
-  }
-
-  await writeFile(gitignorePath, content);
-}
+import fs from 'fs-extra';
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+function isSamePath(a, b) {
+  return resolve(a) === resolve(b);
+}
+
+export function getContentDir() {
+  return join(__dirname, '..', '..', 'content');
+}
+
+export async function copyDirectory(src, dest, options = {}) {
+  if (isSamePath(src, dest)) return;
+
+  const { filter, overwrite = true } = options;
+
+  await fs.copy(src, dest, {
+    overwrite,
+    filter: filter || (() => true),
+    errorOnExist: false
+  });
+}
+
+export async function copyFile(src, dest) {
+  if (isSamePath(src, dest)) return;
+
+  await fs.ensureDir(dirname(dest));
+  await fs.copy(src, dest, { overwrite: true });
+}
+
+export async function pathExists(path) {
+  return fs.pathExists(path);
+}
+
+export async function readJson(path) {
+  return fs.readJson(path);
+}
+
+export async function writeJson(path, data) {
+  await fs.ensureDir(dirname(path));
+  await fs.writeJson(path, data, { spaces: 2 });
+}
+
+export async function ensureDir(path) {
+  await fs.ensureDir(path);
+}
+
+export async function writeFile(path, content) {
+  await fs.ensureDir(dirname(path));
+  await fs.writeFile(path, content, 'utf8');
+}
+
+export async function removeDir(path) {
+  await fs.remove(path);
+}
+
+export async function readFile(path) {
+  return fs.readFile(path, 'utf8');
+}
+
+/**
+ * Create symlink with fallback to copy if symlink fails
+ * @param {string} target - Path to the original file/folder
+ * @param {string} link - Path where symlink should be created
+ * @param {string} type - 'file' or 'dir'
+ * @returns {Promise<'symlink' | 'copy'>} - Returns how the link was created
+ */
+export async function createSymlink(target, link, type = 'file') {
+  await fs.ensureDir(dirname(link));
+
+  try {
+    // Try to create symlink
+    await fs.ensureSymlink(target, link, type);
+    return 'symlink';
+  } catch (error) {
+    // Fallback: copy the file/directory if symlink fails
+    // (Windows may require admin permissions for symlinks)
+    if (type === 'file') {
+      await copyFile(target, link);
+    } else {
+      await copyDirectory(target, link);
+    }
+    return 'copy';
+  }
+}
+
+/**
+ * Create a directory link (junction on Windows, symlink on other platforms)
+ * with fallback to directory copy if linking fails.
+ * @param {string} target - Path to the original directory
+ * @param {string} link - Path where the link should be created
+ * @returns {Promise<'junction' | 'symlink' | 'copy'>} - How the link was created
+ */
+export async function createDirectoryLink(target, link) {
+  await fs.ensureDir(dirname(link));
+
+  // Remove existing link/directory before recreating
+  if (await pathExists(link)) {
+    await fs.remove(link);
+  }
+
+  if (process.platform === 'win32') {
+    try {
+      // Junction on Windows - does NOT require admin privileges
+      await fs.symlink(target, link, 'junction');
+      return 'junction';
+    } catch {
+      try {
+        await fs.ensureSymlink(target, link, 'dir');
+        return 'symlink';
+      } catch {
+        await copyDirectory(target, link);
+        return 'copy';
+      }
+    }
+  } else {
+    try {
+      await fs.ensureSymlink(target, link, 'dir');
+      return 'symlink';
+    } catch {
+      await copyDirectory(target, link);
+      return 'copy';
+    }
+  }
+}
+
+export async function updateGitignore(projectPath) {
+  const gitignorePath = join(projectPath, '.gitignore');
+
+  const morphRules = [
+    '',
+    '# MORPH-SPEC',
+    '.morph/examples/',
+    '.morph/templates/',
+    '.claude/settings.local.json',
+    ''
+  ];
+
+  let content = '';
+  let hasMorphSection = false;
+
+  // Read existing .gitignore if it exists
+  if (await pathExists(gitignorePath)) {
+    content = await readFile(gitignorePath);
+    hasMorphSection = content.includes('# MORPH-SPEC');
+  }
+
+  // If MORPH section already exists, check if rules are up to date
+  if (hasMorphSection) {
+    const lines = content.split('\n');
+    const morphStartIndex = lines.findIndex(line => line.trim() === '# MORPH-SPEC');
+
+    // Find the end of MORPH section (next empty line or section header)
+    let morphEndIndex = morphStartIndex + 1;
+    while (morphEndIndex < lines.length &&
+           lines[morphEndIndex].trim() !== '' &&
+           !lines[morphEndIndex].startsWith('#')) {
+      morphEndIndex++;
+    }
+
+    // Extract current MORPH rules
+    const currentMorphRules = lines.slice(morphStartIndex, morphEndIndex + 1);
+    const expectedMorphRules = morphRules.slice(1, -1); // Remove empty lines from comparison
+
+    // Check if all expected rules are present
+    const missingRules = expectedMorphRules.filter(rule =>
+      rule.startsWith('#') || !currentMorphRules.some(line => line.trim() === rule)
+    );
+
+    if (missingRules.length > 0) {
+      // Update the section with all rules
+      lines.splice(morphStartIndex, morphEndIndex - morphStartIndex, ...morphRules.slice(1, -1));
+      content = lines.join('\n');
+    }
+  } else {
+    // Add MORPH section
+    if (content && !content.endsWith('\n')) {
+      content += '\n';
+    }
+    content += morphRules.join('\n');
+  }
+
+  await writeFile(gitignorePath, content);
+}