@fragments-sdk/cli 0.2.2

package/src/service/patch-generator.ts

@@ -0,0 +1,349 @@
+/**
+ * Patch Generator
+ *
+ * Generates unified diff patches to fix token compliance issues.
+ * Takes style comparison results and produces patches that replace
+ * hardcoded CSS values with design token references.
+ */
+
+import type { EnhancedStyleDiffItem, TokenUsageSummary } from "../core/index.js";
+import { TokenRegistryManager } from "./token-registry.js";
+
+/**
+ * A patch represents a file modification in unified diff format
+ */
+export interface Patch {
+  /** File path relative to project root */
+  file: string;
+
+  /** Unified diff content */
+  diff: string;
+
+  /** Line number where the change starts */
+  lineNumber?: number;
+
+  /** Type of style syntax being modified */
+  styleType: "inline" | "styled-components" | "emotion" | "css-module" | "css";
+}
+
+/**
+ * Result of patch generation for a component
+ */
+export interface PatchGenerationResult {
+  /** Generated patches */
+  patches: Patch[];
+
+  /** Human-readable summary */
+  summary: string;
+
+  /** Number of hardcoded values that could be fixed */
+  fixableCount: number;
+
+  /** Number of hardcoded values that couldn't be fixed (no matching token) */
+  unfixableCount: number;
+}
+
+/**
+ * Options for patch generation
+ */
+export interface PatchGenerationOptions {
+  /** Source file path (if known from segment metadata) */
+  sourceFile?: string;
+
+  /** Style type hint */
+  styleType?: Patch["styleType"];
+
+  /** Number of context lines to include in diff (default: 3) */
+  contextLines?: number;
+
+  /** Theme context for token matching */
+  theme?: string;
+}
+
+/**
+ * Generate token patches for a component's hardcoded styles
+ *
+ * @param componentName - Name of the component
+ * @param styleDiffs - Style comparison results with rendered vs figma values
+ * @param registry - Token registry for token lookup
+ * @param options - Generation options
+ */
+export function generateTokenPatches(
+  componentName: string,
+  styleDiffs: Array<{
+    property: string;
+    figma: string;
+    rendered: string;
+    match: boolean;
+  }>,
+  registry: TokenRegistryManager,
+  options: PatchGenerationOptions = {}
+): PatchGenerationResult {
+  const { theme = "default", contextLines = 3 } = options;
+
+  // Get token usage summary with hardcoded properties
+  const summary = registry.calculateUsageSummary(styleDiffs, theme);
+
+  if (summary.hardcodedProperties.length === 0) {
+    return {
+      patches: [],
+      summary: `No hardcoded values found in ${componentName}. Token compliance is at ${summary.compliancePercent}%.`,
+      fixableCount: 0,
+      unfixableCount: 0,
+    };
+  }
+
+  const patches: Patch[] = [];
+  let fixableCount = 0;
+  let unfixableCount = 0;
+
+  // Group fixes by file (if we have file info)
+  const fixesByFile = new Map<string, EnhancedStyleDiffItem[]>();
+
+  for (const item of summary.hardcodedProperties) {
+    if (!item.suggestedFix) {
+      unfixableCount++;
+      continue;
+    }
+
+    fixableCount++;
+
+    // For now, group under the source file or a placeholder
+    const file = options.sourceFile || `${componentName}.tsx`;
+    const existing = fixesByFile.get(file) || [];
+    existing.push(item);
+    fixesByFile.set(file, existing);
+  }
+
+  // Generate patches for each file
+  for (const [file, fixes] of fixesByFile) {
+    const patch = generateUnifiedDiff(file, fixes, options);
+    if (patch) {
+      patches.push(patch);
+    }
+  }
+
+  // Generate summary
+  const summaryLines: string[] = [];
+  summaryLines.push(`Token Patch Summary for ${componentName}:`);
+  summaryLines.push(`- Compliance: ${summary.compliancePercent}%`);
+  summaryLines.push(`- Fixable issues: ${fixableCount}`);
+  if (unfixableCount > 0) {
+    summaryLines.push(`- Unfixable issues: ${unfixableCount} (no matching token found)`);
+  }
+  summaryLines.push(`- Patches generated: ${patches.length}`);
+
+  return {
+    patches,
+    summary: summaryLines.join("\n"),
+    fixableCount,
+    unfixableCount,
+  };
+}
+
+/**
+ * Generate a unified diff for a set of fixes in a single file
+ */
+function generateUnifiedDiff(
+  file: string,
+  fixes: EnhancedStyleDiffItem[],
+  options: PatchGenerationOptions
+): Patch | null {
+  if (fixes.length === 0) return null;
+
+  const { styleType = detectStyleType(file) } = options;
+  const diffLines: string[] = [];
+
+  // Diff header
+  diffLines.push(`--- a/${file}`);
+  diffLines.push(`+++ b/${file}`);
+
+  // Generate hunks for each fix
+  // In a real implementation, we'd read the actual file and generate proper diffs
+  // For now, we generate synthetic diffs showing the transformation
+  for (const fix of fixes) {
+    if (!fix.suggestedFix) continue;
+
+    const cssProperty = toCssProperty(fix.property);
+    const hunk = generateHunk(cssProperty, fix.rendered, fix.suggestedFix, styleType);
+    diffLines.push(...hunk);
+  }
+
+  return {
+    file,
+    diff: diffLines.join("\n"),
+    styleType,
+  };
+}
+
+/**
+ * Generate a diff hunk for a single property fix
+ */
+function generateHunk(
+  cssProperty: string,
+  currentValue: string,
+  suggestedFix: NonNullable<EnhancedStyleDiffItem["suggestedFix"]>,
+  styleType: Patch["styleType"]
+): string[] {
+  const lines: string[] = [];
+
+  // The hunk format depends on the style type
+  switch (styleType) {
+    case "inline":
+      // React inline style: { backgroundColor: '#0051c2' }
+      const camelProp = toCamelCase(cssProperty);
+      lines.push(`@@ -1,1 +1,1 @@ inline style`);
+      lines.push(`-  ${camelProp}: '${currentValue}',`);
+      lines.push(`+  ${camelProp}: 'var(${suggestedFix.tokenName})',`);
+      break;
+
+    case "styled-components":
+    case "emotion":
+      // CSS-in-JS: background-color: #0051c2;
+      lines.push(`@@ -1,1 +1,1 @@ ${styleType}`);
+      lines.push(`-  ${cssProperty}: ${currentValue};`);
+      lines.push(`+  ${cssProperty}: var(${suggestedFix.tokenName});`);
+      break;
+
+    case "css-module":
+    case "css":
+    default:
+      // Plain CSS: background-color: #0051c2;
+      lines.push(`@@ -1,1 +1,1 @@ css`);
+      lines.push(`-  ${cssProperty}: ${currentValue};`);
+      lines.push(`+  ${cssProperty}: var(${suggestedFix.tokenName});`);
+      break;
+  }
+
+  return lines;
+}
+
+/**
+ * Detect the style type from file extension and name
+ */
+function detectStyleType(file: string): Patch["styleType"] {
+  if (file.endsWith(".css")) return "css";
+  if (file.endsWith(".module.css") || file.endsWith(".module.scss")) return "css-module";
+  if (file.includes("styled") || file.includes("emotion")) return "styled-components";
+  // Default to inline for TSX/JSX files
+  if (file.endsWith(".tsx") || file.endsWith(".jsx")) return "inline";
+  return "css";
+}
+
+/**
+ * Convert camelCase to kebab-case
+ */
+function toCssProperty(prop: string): string {
+  return prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+/**
+ * Convert kebab-case to camelCase
+ */
+function toCamelCase(prop: string): string {
+  return prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+/**
+ * Generate patches for CSS-in-JS patterns
+ *
+ * Handles common patterns:
+ * - styled-components: styled.div`...`
+ * - emotion: css`...` or css={{...}}
+ * - inline: style={{...}}
+ */
+export function generateCSSInJSPatches(
+  sourceCode: string,
+  fixes: Array<{
+    property: string;
+    currentValue: string;
+    tokenName: string;
+  }>,
+  options: { fileName?: string } = {}
+): Patch[] {
+  const patches: Patch[] = [];
+  const fileName = options.fileName || "component.tsx";
+
+  for (const fix of fixes) {
+    // Find the property in source code
+    const cssProperty = toCssProperty(fix.property);
+    const camelProperty = toCamelCase(cssProperty);
+
+    // Try to find inline style pattern: propertyName: 'value' or propertyName: "value"
+    const inlinePattern = new RegExp(
+      `(${camelProperty}\\s*:\\s*)(['"]?)${escapeRegExp(fix.currentValue)}\\2`,
+      "g"
+    );
+
+    // Try to find CSS pattern: property-name: value;
+    const cssPattern = new RegExp(
+      `(${cssProperty}\\s*:\\s*)${escapeRegExp(fix.currentValue)}(\\s*;)`,
+      "g"
+    );
+
+    let match;
+    const lines = sourceCode.split("\n");
+
+    // Check inline style pattern
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+
+      if (inlinePattern.test(line)) {
+        const newLine = line.replace(
+          inlinePattern,
+          `$1'var(${fix.tokenName})'`
+        );
+
+        patches.push({
+          file: fileName,
+          diff: generateLineDiff(fileName, i + 1, line, newLine),
+          lineNumber: i + 1,
+          styleType: "inline",
+        });
+      } else if (cssPattern.test(line)) {
+        const newLine = line.replace(
+          cssPattern,
+          `$1var(${fix.tokenName})$2`
+        );
+
+        patches.push({
+          file: fileName,
+          diff: generateLineDiff(fileName, i + 1, line, newLine),
+          lineNumber: i + 1,
+          styleType: "css",
+        });
+      }
+
+      // Reset regex state
+      inlinePattern.lastIndex = 0;
+      cssPattern.lastIndex = 0;
+    }
+  }
+
+  return patches;
+}
+
+/**
+ * Generate a unified diff for a single line change
+ */
+function generateLineDiff(
+  file: string,
+  lineNumber: number,
+  oldLine: string,
+  newLine: string
+): string {
+  return [
+    `--- a/${file}`,
+    `+++ b/${file}`,
+    `@@ -${lineNumber},1 +${lineNumber},1 @@`,
+    `-${oldLine}`,
+    `+${newLine}`,
+  ].join("\n");
+}
+
+/**
+ * Escape special regex characters
+ */
+function escapeRegExp(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}