sonance-brand-mcp 1.3.111 → 1.3.113

package/dist/assets/api/sonance-vision-apply/styling-detection.ts

@@ -0,0 +1,730 @@
+/**
+ * Styling System Detection
+ * 
+ * Analyzes a codebase to determine what styling approach is used,
+ * enabling the AI to generate appropriate code modifications.
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+export type StylingSystem = 
+  | "tailwind"
+  | "css-modules"
+  | "styled-components"
+  | "emotion"
+  | "vanilla-css"
+  | "scss"
+  | "sass"
+  | "less"
+  | "inline-styles"
+  | "unknown";
+
+export type ComponentLibrary =
+  | "cva" // class-variance-authority
+  | "shadcn"
+  | "radix"
+  | "chakra"
+  | "material-ui"
+  | "ant-design"
+  | "none";
+
+export interface StylingAnalysis {
+  primarySystem: StylingSystem;
+  secondarySystems: StylingSystem[];
+  componentLibraries: ComponentLibrary[];
+  hasClassMerging: boolean; // e.g., tailwind-merge, clsx
+  hasCSSVariables: boolean;
+  hasDesignTokens: boolean;
+  confidence: number; // 0-1
+  evidence: {
+    files: string[];
+    patterns: string[];
+  };
+}
+
+interface DetectionRule {
+  system: StylingSystem | ComponentLibrary;
+  type: "styling" | "component";
+  // Package.json dependencies to check
+  dependencies?: string[];
+  // File patterns to look for
+  filePatterns?: RegExp[];
+  // Code patterns to detect in files
+  codePatterns?: RegExp[];
+  // Config files that indicate this system
+  configFiles?: string[];
+  weight: number; // Higher = more definitive
+}
+
+const DETECTION_RULES: DetectionRule[] = [
+  // Tailwind CSS
+  {
+    system: "tailwind",
+    type: "styling",
+    dependencies: ["tailwindcss"],
+    configFiles: ["tailwind.config.js", "tailwind.config.ts", "tailwind.config.mjs"],
+    codePatterns: [
+      /className\s*=\s*["'`][^"'`]*(?:flex|grid|p-\d|m-\d|text-|bg-|border-|rounded)/,
+      /\bclass(?:Name)?\s*[:=]\s*["'`](?:[a-z]+-)+[a-z]+/,
+    ],
+    weight: 10,
+  },
+  
+  // CSS Modules
+  {
+    system: "css-modules",
+    type: "styling",
+    filePatterns: [/\.module\.css$/, /\.module\.scss$/, /\.module\.sass$/],
+    codePatterns: [
+      /import\s+(?:styles|css|s)\s+from\s+["'][^"']+\.module\.(css|scss|sass)["']/,
+      /className\s*=\s*\{?\s*styles\./,
+    ],
+    weight: 9,
+  },
+  
+  // styled-components
+  {
+    system: "styled-components",
+    type: "styling",
+    dependencies: ["styled-components"],
+    codePatterns: [
+      /import\s+styled\s+from\s+["']styled-components["']/,
+      /styled\.[a-z]+`/,
+      /styled\([A-Z][a-zA-Z]*\)`/,
+    ],
+    weight: 10,
+  },
+  
+  // Emotion
+  {
+    system: "emotion",
+    type: "styling",
+    dependencies: ["@emotion/react", "@emotion/styled", "@emotion/css"],
+    codePatterns: [
+      /import\s+.*from\s+["']@emotion\/(react|styled|css)["']/,
+      /css\s*`/,
+      /styled\.[a-z]+`/,
+    ],
+    weight: 10,
+  },
+  
+  // SCSS/Sass
+  {
+    system: "scss",
+    type: "styling",
+    dependencies: ["sass", "node-sass"],
+    filePatterns: [/\.scss$/],
+    codePatterns: [/import\s+["'][^"']+\.scss["']/],
+    weight: 7,
+  },
+  
+  // Less
+  {
+    system: "less",
+    type: "styling",
+    dependencies: ["less"],
+    filePatterns: [/\.less$/],
+    codePatterns: [/import\s+["'][^"']+\.less["']/],
+    weight: 7,
+  },
+  
+  // CVA (class-variance-authority)
+  {
+    system: "cva",
+    type: "component",
+    dependencies: ["class-variance-authority"],
+    codePatterns: [
+      /import\s+.*\bcva\b.*from\s+["']class-variance-authority["']/,
+      /\bcva\s*\(/,
+    ],
+    weight: 8,
+  },
+  
+  // shadcn/ui
+  {
+    system: "shadcn",
+    type: "component",
+    configFiles: ["components.json"],
+    filePatterns: [/components\/ui\//],
+    codePatterns: [
+      /@\/components\/ui\//,
+      /from\s+["']@\/components\/ui\//,
+    ],
+    weight: 8,
+  },
+  
+  // Radix UI
+  {
+    system: "radix",
+    type: "component",
+    dependencies: ["@radix-ui/react-dialog", "@radix-ui/react-dropdown-menu", "@radix-ui/react-popover"],
+    codePatterns: [/import\s+.*from\s+["']@radix-ui\//],
+    weight: 7,
+  },
+  
+  // Chakra UI
+  {
+    system: "chakra",
+    type: "component",
+    dependencies: ["@chakra-ui/react"],
+    codePatterns: [/import\s+.*from\s+["']@chakra-ui\//],
+    weight: 9,
+  },
+  
+  // Material UI
+  {
+    system: "material-ui",
+    type: "component",
+    dependencies: ["@mui/material", "@material-ui/core"],
+    codePatterns: [
+      /import\s+.*from\s+["']@mui\//,
+      /import\s+.*from\s+["']@material-ui\//,
+    ],
+    weight: 9,
+  },
+  
+  // Ant Design
+  {
+    system: "ant-design",
+    type: "component",
+    dependencies: ["antd"],
+    codePatterns: [/import\s+.*from\s+["']antd["']/],
+    weight: 9,
+  },
+];
+
+// Patterns that indicate class merging utilities
+const CLASS_MERGING_PATTERNS = [
+  /import\s+.*\btwMerge\b.*from\s+["']tailwind-merge["']/,
+  /import\s+.*\bclsx\b.*from\s+["']clsx["']/,
+  /import\s+.*\bclassnames\b.*from\s+["']classnames["']/,
+  /import\s+.*\bcn\b.*from/,
+  /export\s+function\s+cn\s*\(/,
+];
+
+// Patterns that indicate CSS variables / design tokens
+const CSS_VARIABLES_PATTERNS = [
+  /--[a-z][a-z0-9-]*\s*:/,
+  /var\s*\(\s*--[a-z]/,
+];
+
+const DESIGN_TOKENS_PATTERNS = [
+  /tokens?\.(colors?|spacing|typography)/i,
+  /theme\.(colors?|spacing|typography)/i,
+  /"tokens"\s*:/,
+];
+
+/**
+ * Analyze a codebase to detect the styling system(s) in use
+ */
+export async function detectStylingSystem(projectRoot: string): Promise<StylingAnalysis> {
+  const result: StylingAnalysis = {
+    primarySystem: "unknown",
+    secondarySystems: [],
+    componentLibraries: [],
+    hasClassMerging: false,
+    hasCSSVariables: false,
+    hasDesignTokens: false,
+    confidence: 0,
+    evidence: {
+      files: [],
+      patterns: [],
+    },
+  };
+  
+  // Track scores for each system
+  const systemScores: Record<string, number> = {};
+  const componentScores: Record<string, number> = {};
+  
+  // 1. Check package.json
+  const packageJsonPath = path.join(projectRoot, "package.json");
+  let packageJson: { dependencies?: Record<string, string>; devDependencies?: Record<string, string> } = {};
+  
+  if (fs.existsSync(packageJsonPath)) {
+    try {
+      packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+      const allDeps = {
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies,
+      };
+      
+      for (const rule of DETECTION_RULES) {
+        if (rule.dependencies) {
+          for (const dep of rule.dependencies) {
+            if (allDeps[dep]) {
+              const scoreMap = rule.type === "styling" ? systemScores : componentScores;
+              scoreMap[rule.system] = (scoreMap[rule.system] || 0) + rule.weight;
+              result.evidence.patterns.push(`package.json: ${dep}`);
+            }
+          }
+        }
+      }
+      
+      // Check for class merging utilities
+      if (allDeps["tailwind-merge"] || allDeps["clsx"] || allDeps["classnames"]) {
+        result.hasClassMerging = true;
+        result.evidence.patterns.push("Class merging utility detected");
+      }
+    } catch {
+      // Ignore JSON parse errors
+    }
+  }
+  
+  // 2. Check for config files
+  for (const rule of DETECTION_RULES) {
+    if (rule.configFiles) {
+      for (const configFile of rule.configFiles) {
+        const configPath = path.join(projectRoot, configFile);
+        if (fs.existsSync(configPath)) {
+          const scoreMap = rule.type === "styling" ? systemScores : componentScores;
+          scoreMap[rule.system] = (scoreMap[rule.system] || 0) + rule.weight;
+          result.evidence.files.push(configFile);
+        }
+      }
+    }
+  }
+  
+  // 3. Scan source files for patterns
+  const srcDir = path.join(projectRoot, "src");
+  if (fs.existsSync(srcDir)) {
+    const filesToScan = findFilesRecursive(srcDir, /\.(tsx?|jsx?|css|scss|sass|less)$/, 100);
+    
+    for (const filePath of filesToScan) {
+      try {
+        const content = fs.readFileSync(filePath, "utf-8");
+        const relativePath = path.relative(projectRoot, filePath);
+        
+        // Check code patterns
+        for (const rule of DETECTION_RULES) {
+          // Check file pattern matches
+          if (rule.filePatterns) {
+            for (const pattern of rule.filePatterns) {
+              if (pattern.test(filePath)) {
+                const scoreMap = rule.type === "styling" ? systemScores : componentScores;
+                scoreMap[rule.system] = (scoreMap[rule.system] || 0) + (rule.weight / 2);
+                if (!result.evidence.files.includes(relativePath)) {
+                  result.evidence.files.push(relativePath);
+                }
+              }
+            }
+          }
+          
+          // Check code patterns
+          if (rule.codePatterns) {
+            for (const pattern of rule.codePatterns) {
+              if (pattern.test(content)) {
+                const scoreMap = rule.type === "styling" ? systemScores : componentScores;
+                scoreMap[rule.system] = (scoreMap[rule.system] || 0) + (rule.weight / 3);
+              }
+            }
+          }
+        }
+        
+        // Check for CSS variables
+        for (const pattern of CSS_VARIABLES_PATTERNS) {
+          if (pattern.test(content)) {
+            result.hasCSSVariables = true;
+            break;
+          }
+        }
+        
+        // Check for design tokens
+        for (const pattern of DESIGN_TOKENS_PATTERNS) {
+          if (pattern.test(content)) {
+            result.hasDesignTokens = true;
+            break;
+          }
+        }
+        
+        // Check for class merging
+        if (!result.hasClassMerging) {
+          for (const pattern of CLASS_MERGING_PATTERNS) {
+            if (pattern.test(content)) {
+              result.hasClassMerging = true;
+              result.evidence.patterns.push(`Class merging in ${relativePath}`);
+              break;
+            }
+          }
+        }
+      } catch {
+        // Ignore file read errors
+      }
+    }
+  }
+  
+  // 4. Determine primary and secondary systems
+  const sortedSystems = Object.entries(systemScores)
+    .sort(([, a], [, b]) => b - a)
+    .map(([system]) => system as StylingSystem);
+  
+  if (sortedSystems.length > 0) {
+    result.primarySystem = sortedSystems[0];
+    result.secondarySystems = sortedSystems.slice(1);
+    
+    // Calculate confidence based on score difference
+    const topScore = systemScores[sortedSystems[0]] || 0;
+    const secondScore = sortedSystems[1] ? systemScores[sortedSystems[1]] || 0 : 0;
+    result.confidence = Math.min(1, topScore / 30 + (topScore - secondScore) / 20);
+  }
+  
+  // Add component libraries
+  result.componentLibraries = Object.entries(componentScores)
+    .filter(([, score]) => score > 5)
+    .sort(([, a], [, b]) => b - a)
+    .map(([lib]) => lib as ComponentLibrary);
+  
+  return result;
+}
+
+/**
+ * Generate styling-specific AI guidance based on detected system
+ */
+export function generateStylingGuidance(analysis: StylingAnalysis): string {
+  const sections: string[] = [];
+  
+  sections.push(`
+═══════════════════════════════════════════════════════════════════════════════
+DETECTED STYLING SYSTEM: ${analysis.primarySystem.toUpperCase()}
+Confidence: ${Math.round(analysis.confidence * 100)}%
+${analysis.secondarySystems.length > 0 ? `Also uses: ${analysis.secondarySystems.join(", ")}` : ""}
+${analysis.componentLibraries.length > 0 ? `Component libraries: ${analysis.componentLibraries.join(", ")}` : ""}
+═══════════════════════════════════════════════════════════════════════════════`);
+  
+  // System-specific guidance
+  switch (analysis.primarySystem) {
+    case "tailwind":
+      sections.push(generateTailwindGuidance(analysis));
+      break;
+    case "css-modules":
+      sections.push(generateCSSModulesGuidance());
+      break;
+    case "styled-components":
+    case "emotion":
+      sections.push(generateCSSInJSGuidance(analysis.primarySystem));
+      break;
+    case "scss":
+    case "sass":
+    case "less":
+      sections.push(generatePreprocessorGuidance(analysis.primarySystem));
+      break;
+    case "vanilla-css":
+      sections.push(generateVanillaCSSGuidance());
+      break;
+    default:
+      sections.push(generateGenericGuidance());
+  }
+  
+  // Component library specific guidance
+  for (const lib of analysis.componentLibraries) {
+    sections.push(generateComponentLibraryGuidance(lib, analysis));
+  }
+  
+  return sections.join("\n\n");
+}
+
+function generateTailwindGuidance(analysis: StylingAnalysis): string {
+  let guidance = `
+TAILWIND CSS MODIFICATION RULES:
+
+1. MODIFYING STYLES:
+   - Add/change utility classes in className prop
+   - Example: className="bg-blue-500" → className="bg-green-500"
+   
+2. SPACING: Use Tailwind spacing scale
+   - Padding: p-{0-96}, px-{}, py-{}, pt-{}, etc.
+   - Margin: m-{0-96}, mx-{}, my-{}, mt-{}, etc.
+   - Gap: gap-{0-96}
+   
+3. COLORS: Use theme colors or arbitrary values
+   - Theme: bg-primary, text-foreground, border-border
+   - Arbitrary: bg-[#FF5733], text-[rgb(255,87,51)]
+   
+4. LAYOUT: 
+   - Flexbox: flex, items-center, justify-between, flex-col
+   - Grid: grid, grid-cols-{1-12}, gap-{n}
+   
+5. SIZING:
+   - Width: w-{size}, w-full, w-screen, w-[200px]
+   - Height: h-{size}, h-full, h-screen, h-[200px]
+   - Border radius: rounded-{none|sm|md|lg|xl|2xl|full}`;
+
+  if (analysis.hasClassMerging) {
+    guidance += `
+
+6. CLASS MERGING ENABLED:
+   - This codebase uses a class merging utility (cn/clsx/twMerge)
+   - Later classes WILL override earlier conflicting classes
+   - Safe to add override classes: className="rounded-none" will override component defaults`;
+  }
+
+  if (analysis.hasCSSVariables) {
+    guidance += `
+
+7. CSS VARIABLES AVAILABLE:
+   - Use semantic color variables when available
+   - Prefer var(--primary) over hardcoded colors
+   - Check globals.css or theme files for available variables`;
+  }
+
+  return guidance;
+}
+
+function generateCSSModulesGuidance(): string {
+  return `
+CSS MODULES MODIFICATION RULES:
+
+1. STYLE CHANGES REQUIRE EDITING .module.css FILES:
+   - Find the imported CSS module (e.g., styles from './Component.module.css')
+   - Modify the CSS class definitions in that file
+   
+2. TO ADD NEW STYLES:
+   - Add new class to the .module.css file
+   - Reference in component: className={styles.newClassName}
+   
+3. TO MODIFY EXISTING STYLES:
+   - Locate the class in the .module.css file
+   - Update the CSS properties there
+   
+4. COMPOSING STYLES:
+   - Use composes: existingClass; to extend styles
+   - Or combine: className={\`\${styles.base} \${styles.modifier}\`}
+   
+5. STRUCTURAL VS DESIGN CHANGES:
+   - Design changes: Edit the .module.css file
+   - Structural changes: Edit the component JSX
+
+EXAMPLE:
+User asks: "make the card blue"
+1. Find: import styles from './Card.module.css'
+2. Edit Card.module.css: .card { background-color: blue; }
+NOT: Add inline styles or className strings`;
+}
+
+function generateCSSInJSGuidance(system: "styled-components" | "emotion"): string {
+  const importPath = system === "styled-components" ? "styled-components" : "@emotion/styled";
+  
+  return `
+${system.toUpperCase()} MODIFICATION RULES:
+
+1. MODIFYING STYLED COMPONENTS:
+   - Find the styled.div\` ... \` or styled(Component)\` ... \` definition
+   - Modify the CSS inside the template literal
+   
+2. EXAMPLE:
+   const Card = styled.div\`
+     background: blue;  // Change this value
+     padding: 16px;
+   \`;
+   
+3. DYNAMIC STYLES (props-based):
+   const Button = styled.button\`
+     background: \${props => props.primary ? 'blue' : 'gray'};
+   \`;
+   // Pass props: <Button primary />
+   
+4. EXTENDING STYLES:
+   const BlueCard = styled(Card)\`
+     background: blue;
+   \`;
+   
+5. TO CHANGE COMPONENT INSTANCES:
+   - Prefer extending with styled() over inline overrides
+   - Or use the css prop: <Card css={{ background: 'blue' }} />
+
+DESIGN CHANGES: Edit the styled\` \` template
+STRUCTURAL CHANGES: Edit the JSX structure`;
+}
+
+function generatePreprocessorGuidance(system: "scss" | "sass" | "less"): string {
+  const extension = system === "less" ? "less" : system;
+  
+  return `
+${system.toUpperCase()} MODIFICATION RULES:
+
+1. STYLE CHANGES GO IN .${extension} FILES:
+   - Find the imported stylesheet
+   - Modify CSS/SCSS rules there
+   
+2. USING VARIABLES:
+   - SCSS/Sass: $variable-name
+   - Less: @variable-name
+   - Modify variable definitions for global changes
+   
+3. NESTING:
+   - Styles are often nested under parent selectors
+   - Follow the nesting to find the right rule
+   
+4. MIXINS:
+   - Look for @mixin/@include (SCSS) or .mixin() (Less)
+   - Modify mixin definitions for reusable style changes
+   
+5. APPROACH:
+   - Design changes: Edit .${extension} files
+   - Structural changes: Edit component files
+   - Use variables for theme-wide changes`;
+}
+
+function generateVanillaCSSGuidance(): string {
+  return `
+VANILLA CSS MODIFICATION RULES:
+
+1. FIND THE CSS FILE:
+   - Check for imported .css files
+   - Or look for <link> tags in HTML/layout files
+   
+2. CSS SPECIFICITY MATTERS:
+   - More specific selectors override less specific ones
+   - ID > Class > Element
+   - Later rules override earlier ones (same specificity)
+   
+3. TO CHANGE STYLES:
+   - Locate the selector in the CSS file
+   - Modify the properties
+   - Consider specificity when adding new rules
+   
+4. FOR ONE-OFF CHANGES:
+   - Add inline styles: style={{ backgroundColor: 'blue' }}
+   - Or add a more specific class selector
+   
+5. STRUCTURAL VS DESIGN:
+   - Design: Edit CSS files
+   - Structural: Edit JSX/HTML`;
+}
+
+function generateGenericGuidance(): string {
+  return `
+STYLING APPROACH NOT DEFINITIVELY DETECTED
+
+When modifying styles, consider:
+
+1. CHECK FOR:
+   - className props (utility classes or CSS class references)
+   - style={{ }} inline styles
+   - styled-components or CSS-in-JS
+   - External CSS file imports
+   
+2. FOLLOW THE PATTERN:
+   - Look at how existing styles are applied
+   - Match the same approach for consistency
+   
+3. COMMON PATTERNS:
+   - className="..." → Add/modify class names
+   - style={{...}} → Modify inline style object
+   - styled.div\`\` → Edit template literal CSS
+   - import './styles.css' → Edit the CSS file`;
+}
+
+function generateComponentLibraryGuidance(library: ComponentLibrary, analysis: StylingAnalysis): string {
+  switch (library) {
+    case "cva":
+      return `
+CVA (class-variance-authority) DETECTED:
+
+Components use variants for predefined styles:
+- size="sm" | "md" | "lg"
+- variant="default" | "destructive" | "outline"
+
+TO MODIFY:
+1. Use variant props when available
+2. Override with className (${analysis.hasClassMerging ? "class merging is enabled" : "may need careful ordering"})
+3. Edit the cva() definition for permanent changes
+
+Example:
+<Button variant="destructive" size="lg">  // Use props
+<Button className="rounded-full">         // Override`;
+      
+    case "shadcn":
+      return `
+SHADCN/UI DETECTED:
+
+Components are in src/components/ui/ and can be modified directly.
+They typically use:
+- CVA for variants
+- Tailwind for styling
+- Radix primitives for behavior
+
+TO MODIFY:
+1. Use component props (variant, size, etc.)
+2. Pass className for overrides
+3. Edit the component file for permanent changes`;
+      
+    case "chakra":
+      return `
+CHAKRA UI DETECTED:
+
+Use Chakra's style props directly on components:
+<Box bg="blue.500" p={4} borderRadius="lg">
+<Button colorScheme="blue" size="lg">
+
+TO MODIFY:
+1. Use style props: bg, color, p, m, w, h, etc.
+2. Use theme tokens: "blue.500", "gray.100"
+3. Use sx prop for custom CSS: sx={{ '&:hover': { bg: 'blue.600' } }}`;
+      
+    case "material-ui":
+      return `
+MATERIAL UI DETECTED:
+
+Use MUI's sx prop or styled() API:
+<Box sx={{ bgcolor: 'primary.main', p: 2 }}>
+<Button variant="contained" color="primary">
+
+TO MODIFY:
+1. Use sx prop for one-off styles
+2. Use theme tokens: 'primary.main', 'grey.100'
+3. Use styled() API for reusable styled components`;
+      
+    case "ant-design":
+      return `
+ANT DESIGN DETECTED:
+
+Components use props for variants:
+<Button type="primary" size="large">
+<Card bordered={false}>
+
+TO MODIFY:
+1. Use component props (type, size, etc.)
+2. Use style prop for custom inline styles
+3. Use className for CSS class overrides
+4. Modify theme variables for global changes`;
+      
+    default:
+      return "";
+  }
+}
+
+/**
+ * Helper to recursively find files
+ */
+function findFilesRecursive(dir: string, pattern: RegExp, maxFiles: number): string[] {
+  const files: string[] = [];
+  
+  function walk(currentDir: string) {
+    if (files.length >= maxFiles) return;
+    
+    try {
+      const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+      
+      for (const entry of entries) {
+        if (files.length >= maxFiles) break;
+        
+        const fullPath = path.join(currentDir, entry.name);
+        
+        // Skip node_modules, .git, dist, build, etc.
+        if (entry.isDirectory()) {
+          if (!["node_modules", ".git", "dist", "build", ".next", "coverage"].includes(entry.name)) {
+            walk(fullPath);
+          }
+        } else if (entry.isFile() && pattern.test(entry.name)) {
+          files.push(fullPath);
+        }
+      }
+    } catch {
+      // Ignore permission errors
+    }
+  }
+  
+  walk(dir);
+  return files;
+}