figmake-pro 3.0.0

package/src/core/generators/handlerGenerator.ts

@@ -0,0 +1,72 @@
+import { MappedInteraction } from "../extractors/animationExtractor";
+import { PluginConfig } from "../config";
+
+export interface GeneratedHandlers {
+  functionDeclarations: string[];
+  propMappings: Record<string, string>;
+}
+
+function sanitizeName(name: string): string {
+  return name.replace(/[^a-zA-Z0-9]/g, "_").replace(/^([0-9])/, "_$1");
+}
+
+function toPascalCase(name: string): string {
+  return sanitizeName(name)
+    .split("_")
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join("");
+}
+
+export function generateHandlers(nodeId: string, nodeName: string, interactions: MappedInteraction[], config?: PluginConfig): GeneratedHandlers {
+  const functionDeclarations: string[] = [];
+  const propMappings: Record<string, string> = {};
+
+  interactions.forEach((interaction, index) => {
+    const trigger = interaction.trigger;
+    const actionType = interaction.actionType;
+    const suffix = interactions.length > 1 ? `_${index}` : "";
+    const baseName = `${toPascalCase(nodeName)}${suffix}`;
+    
+    let handlerName = "";
+    let body = "";
+
+    if (actionType === "NODE" || actionType === "NAVIGATE") {
+      handlerName = `handleNavigate${baseName}`;
+      const dest = interaction.destinationName || interaction.destinationId || "Unknown";
+      
+      if (config?.routing === 'nextjs') {
+        body = `    router.push('/${dest.toLowerCase().replace(/\s+/g, '-')}');`;
+      } else if (config?.routing === 'react-router') {
+        body = `    navigate('/${dest.toLowerCase().replace(/\s+/g, '-')}');`;
+      } else {
+        body = `    setActiveView('${toPascalCase(dest)}');`;
+      }
+    } else if (actionType === "URL") {
+      handlerName = `handleOpenLink${baseName}`;
+      body = `    window.open('${interaction.destinationId || "#"}', '_blank');`;
+    } else {
+      handlerName = `handleInteraction${baseName}`;
+      body = `    console.log('${interaction.trigger} triggered');`;
+    }
+
+    if (handlerName) {
+      functionDeclarations.push(`  const ${handlerName} = () => {\n${body}\n  };`);
+      const reactProp = mapTriggerToReactProp(trigger);
+      if (reactProp) propMappings[reactProp] = handlerName;
+    }
+  });
+
+  return { functionDeclarations, propMappings };
+}
+
+function mapTriggerToReactProp(trigger: string): string | null {
+  const map: Record<string, string> = {
+    click: "onClick",
+    hover: "onMouseEnter",
+    mouseEnter: "onMouseEnter",
+    mouseLeave: "onMouseLeave",
+    press: "onMouseDown",
+    drag: "onDrag",
+  };
+  return map[trigger] || null;
+}

package/src/core/generators/reactGenerator.ts

@@ -0,0 +1,129 @@
+import { extractNodeStyles } from "../extractors/styleExtractor";
+import { PluginConfig, DEFAULT_CONFIG } from "../config";
+import { generateHandlers } from "./handlerGenerator";
+import { extractAnimations } from "../extractors/animationExtractor";
+
+function generateHash(content: string): string {
+  let hash = 0;
+  for (let i = 0; i < content.length; i++) {
+    const char = content.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(16).substring(0, 8);
+}
+
+function sanitizeName(name: string): string {
+  return name.replace(/[^a-zA-Z0-9]/g, "_").replace(/^([0-9])/, "_$1");
+}
+
+function toPascalCase(name: string, naming?: string): string {
+  return sanitizeName(name)
+    .split("_")
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join("");
+}
+
+export function generateReactComponent(node: any, options: { componentName?: string, getNodeById?: (id: string) => any, config?: PluginConfig, nameOverrides?: Map<string, string> } = {}): { code: string, files: Record<string, string>, hasAnimations: boolean, hash: string } {
+  const config = options.config || DEFAULT_CONFIG;
+  const files: Record<string, string> = {};
+  const componentName = options.nameOverrides?.get(node.id) || options.componentName || toPascalCase(node.name, config.naming);
+  const getNodeById = options.getNodeById;
+  let hasAnimations = false;
+  const allHandlerDeclarations: string[] = [];
+
+  const generateNodeCode = (n: any, indent: string = "  ", parentAnimations?: any): string => {
+    if (!n.animations && n.reactions) {
+       n.animations = extractAnimations(n, getNodeById);
+    }
+    const styles = extractNodeStyles(n, config);
+    const motionProps: any = {};
+    const eventHandlers: Record<string, string> = {};
+    
+    if (n.animations && n.animations.interactions.length > 0) {
+      if (config.animations !== 'css') {
+        hasAnimations = true;
+      }
+      const { functionDeclarations, propMappings } = generateHandlers(n.id, n.name, n.animations.interactions, config);
+      allHandlerDeclarations.push(...functionDeclarations);
+      Object.assign(eventHandlers, propMappings);
+
+      n.animations.interactions.forEach((interaction: any) => {
+        if (interaction.trigger === "whileHover") motionProps.whileHover = { scale: 1.05 };
+        else if (interaction.trigger === "whileTap") motionProps.whileTap = { scale: 0.95 };
+      });
+    }
+
+    if (parentAnimations) {
+      const interaction = parentAnimations.interactions.find((i: any) => i.childDeltas);
+      if (interaction && interaction.childDeltas[n.name]) {
+        hasAnimations = true;
+        const delta = interaction.childDeltas[n.name];
+        motionProps.layoutId = sanitizeName(n.name).toLowerCase();
+        const initial: any = {};
+        if (delta.x !== undefined) initial.x = -delta.x;
+        if (delta.y !== undefined) initial.y = -delta.y;
+        if (delta.opacity !== undefined) initial.opacity = 0;
+        if (Object.keys(initial).length > 0) {
+          motionProps.initial = initial;
+          motionProps.animate = { x: 0, y: 0, opacity: 1 };
+        }
+      }
+    }
+
+    if (n.layoutMode === "HORIZONTAL" || n.layoutMode === "VERTICAL") {
+      styles.display = "flex";
+      styles.flexDirection = n.layoutMode === "HORIZONTAL" ? "row" : "column";
+      styles.gap = `${n.itemSpacing || 0}px`;
+      styles.padding = `${n.paddingTop || 0}px ${n.paddingRight || 0}px ${n.paddingBottom || 0}px ${n.paddingLeft || 0}px`;
+    } else if (n.type !== "GROUP" && n.type !== "DOCUMENT" && n.type !== "PAGE") {
+      styles.position = "absolute";
+      styles.left = `${n.x}px`;
+      styles.top = `${n.y}px`;
+      styles.width = `${n.width}px`;
+      styles.height = `${n.height}px`;
+    }
+
+    const styleAttr = `style={${JSON.stringify(styles, null, 2).replace(/"([^"]+)":/g, '$1:')}}`;
+    const motionAttr = Object.keys(motionProps).length > 0 ? ` ${Object.entries(motionProps).map(([k, v]) => `${k}={${JSON.stringify(v)}}`).join(" ")}` : "";
+    const handlerAttr = Object.keys(eventHandlers).length > 0 ? ` ${Object.entries(eventHandlers).map(([k, v]) => `${k}={${v}}`).join(" ")}` : "";
+    const syncAttrs = `data-figma-id="${n.id}"`;
+    const tagPrefix = Object.keys(motionProps).length > 0 ? "motion." : "";
+
+    if (n.type === "TEXT") return `${indent}<${tagPrefix}span ${syncAttrs}${handlerAttr} ${styleAttr}${motionAttr}>${n.characters}</${tagPrefix}span>`;
+    if (n.type === "VECTOR" || n.type === "STAR" || n.type === "POLYGON" || (n.type === "ELLIPSE" && !n.cornerRadius)) return `${indent}<${tagPrefix}div ${syncAttrs}${handlerAttr} ${styleAttr}${motionAttr}>/* SVG Placeholder */</${tagPrefix}div>`;
+
+    const childrenCode = n.children ? n.children.map((child: any) => generateNodeCode(child, indent + "  ", n.animations)).join("\n") : "";
+    let tag = "div";
+    if (n.type === "GROUP") return childrenCode;
+    if (n.type === "SECTION") tag = "section";
+    return `${indent}<${tagPrefix}${tag} ${syncAttrs}${handlerAttr} ${styleAttr}${motionAttr}>\n${childrenCode}\n${indent}</${tagPrefix}${tag}>`;
+  };
+
+  const nodeCode = generateNodeCode(node, "    ");
+  const contentHash = generateHash(nodeCode);
+  const imports = ["import React from 'react';"];
+  if (hasAnimations) imports.push("import { motion, AnimatePresence } from 'framer-motion';");
+
+  const finalCode = `
+${imports.join("\n")}
+
+/**
+ * Figma Layer: ${node.name}
+ * ID: ${node.id}
+ * Hash: ${contentHash}
+ */
+export const ${componentName}: React.FC = () => {
+${Array.from(new Set(allHandlerDeclarations)).join("\n\n")}
+
+  return (
+    ${hasAnimations ? '<AnimatePresence mode="wait">' : ''}
+${nodeCode}
+    ${hasAnimations ? '</AnimatePresence>' : ''}
+  );
+};
+`;
+
+  files[`${componentName}.tsx`] = finalCode;
+  return { code: finalCode, files, hasAnimations, hash: contentHash };
+}

package/src/core/utils/codeMetrics.ts

@@ -0,0 +1,54 @@
+export interface CodeMetrics {
+  totalLines: number;
+  totalCharacters: number;
+  fileCount: number;
+  jsxElements: number;
+  styleProperties: number;
+  handlers: number;
+  animations: number;
+  collisions: number;
+  complexity: 'simple' | 'moderate' | 'complex' | 'very-complex';
+}
+
+export function calculateMetrics(nodes: any[]): CodeMetrics {
+  let totalLines = 0;
+  let totalCharacters = 0;
+  let jsxElements = 0;
+  let styleProperties = 0;
+  let handlers = 0;
+  let animations = 0;
+
+  nodes.forEach(node => {
+    if (node.reactCode) {
+      totalLines += node.reactCode.split('\n').length;
+      totalCharacters += node.reactCode.length;
+      
+      // Heuristic counting
+      jsxElements += (node.reactCode.match(/<[a-zA-Z]/g) || []).length;
+      handlers += (node.reactCode.match(/handle[A-Z]/g) || []).length;
+      if (node.hasAnimations) animations++;
+    }
+    
+    // Recurse into styles if possible or use count from properties
+    if (node.css) {
+      styleProperties += (node.css.match(/:/g) || []).length;
+    }
+  });
+
+  let complexity: CodeMetrics['complexity'] = 'simple';
+  if (totalLines > 500 || jsxElements > 20) complexity = 'moderate';
+  if (totalLines > 1000 || jsxElements > 50) complexity = 'complex';
+  if (totalLines > 2000) complexity = 'very-complex';
+
+  return {
+    totalLines,
+    totalCharacters,
+    fileCount: nodes.length,
+    jsxElements,
+    styleProperties,
+    handlers,
+    animations,
+    collisions: 0, // Set externally
+    complexity
+  };
+}

package/src/core/utils/collisionDetector.ts

@@ -0,0 +1,77 @@
+export interface CollisionWarning {
+  type: 'exact' | 'caseInsensitive' | 'sanitized' | 'reserved';
+  name1: string;
+  name2: string;
+  figmaId1: string;
+  figmaId2: string;
+  suggestion: string;
+  severity: 'error' | 'warning';
+}
+
+const RESERVED_WORDS = new Set([
+  'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger', 'default', 'delete', 'do', 'else', 'enum', 'export', 'extends', 'false', 'finally', 'for', 'function', 'if', 'import', 'in', 'instanceof', 'new', 'null', 'return', 'super', 'switch', 'this', 'throw', 'true', 'try', 'typeof', 'var', 'void', 'while', 'with', 'yield', 'let', 'static', 'await', 'abstract', 'boolean', 'byte', 'char', 'double', 'final', 'float', 'goto', 'int', 'long', 'native', 'short', 'synchronized', 'transient', 'volatile'
+]);
+
+export function detectCollisions(nodes: any[]): CollisionWarning[] {
+  const warnings: CollisionWarning[] = [];
+  const seenNames = new Map<string, { figmaId: string, originalName: string }>();
+  const seenSanitized = new Map<string, { figmaId: string, originalName: string }>();
+
+  nodes.forEach(node => {
+    const name = node.name;
+    const sanitized = name.replace(/[^a-zA-Z0-9]/g, '');
+    const id = node.id;
+
+    // 4. Reserved words
+    if (RESERVED_WORDS.has(name.toLowerCase())) {
+      warnings.push({
+        type: 'reserved',
+        name1: name,
+        name2: '',
+        figmaId1: id,
+        figmaId2: '',
+        suggestion: `Fig${name.charAt(0).toUpperCase()}${name.slice(1)}`,
+        severity: 'error'
+      });
+    }
+
+    // 1. Exact match
+    if (seenNames.has(name)) {
+      const other = seenNames.get(name)!;
+      if (other.figmaId !== id) {
+        warnings.push({
+          type: 'exact',
+          name1: name,
+          name2: name,
+          figmaId1: id,
+          figmaId2: other.figmaId,
+          suggestion: `${name}_${id.replace(':', '_')}`,
+          severity: 'error'
+        });
+      }
+    } else {
+      seenNames.set(name, { figmaId: id, originalName: name });
+    }
+
+    // 2. Case-insensitive & 3. Sanitization
+    const lowerSanitized = sanitized.toLowerCase();
+    if (seenSanitized.has(lowerSanitized)) {
+      const other = seenSanitized.get(lowerSanitized)!;
+      if (other.figmaId !== id) {
+        warnings.push({
+          type: lowerSanitized === other.originalName.replace(/[^a-zA-Z0-9]/g, '').toLowerCase() ? 'caseInsensitive' : 'sanitized',
+          name1: name,
+          name2: other.originalName,
+          figmaId1: id,
+          figmaId2: other.figmaId,
+          suggestion: `${sanitized}_${id.replace(':', '_')}`,
+          severity: 'warning'
+        });
+      }
+    } else {
+      seenSanitized.set(lowerSanitized, { figmaId: id, originalName: name });
+    }
+  });
+
+  return warnings;
+}

package/src/core/utils/copyManager.ts

@@ -0,0 +1,33 @@
+export interface CopyOptions {
+  scope: 'component' | 'fullFile' | 'allComponents';
+  includeImports: boolean;
+  includeDependencies: boolean;
+  includeTypes: boolean;
+}
+
+export function smartCopy(nodes: any[], options: CopyOptions): string {
+  let output = "";
+
+  if (options.includeDependencies) {
+    output += "// Dependencies:\n";
+    output += "//   npm install framer-motion@11.0.0 react@18.2.0 react-dom@18.2.0\n";
+  }
+
+  const generatedAt = new Date().toISOString();
+  
+  nodes.forEach(node => {
+    output += `// Generated from Figma: ${node.name} (node: ${node.id})\n`;
+    output += `// Generated at: ${generatedAt}\n\n`;
+
+    if (options.scope === 'fullFile') {
+      output += node.reactCode;
+    } else if (options.scope === 'component') {
+      // Extract just the component body (rough approximation)
+      const match = node.reactCode.match(/export const[\s\S]*\};/);
+      output += match ? match[0] : node.reactCode;
+    }
+    output += "\n\n";
+  });
+
+  return output.trim();
+}

package/src/core/utils/generateReadme.ts

@@ -0,0 +1,70 @@
+export interface ReadmeConfig {
+  projectName: string;
+  figmaFileName: string;
+  figmaPageName: string;
+  components: any[];
+  hasAnimations: boolean;
+  hasTypescript: boolean;
+  handlerCount: number;
+  imageCount: number;
+  generatedAt: string;
+  pluginVersion: string;
+}
+
+export function generateReadme(config: ReadmeConfig): string {
+  const componentTable = config.components.map(c => 
+    `| ${c.name} | ${c.type} | ${c.hasAnimations ? 'Yes' : 'No'} | ${c.handlers || 0} |`
+  ).join('\n');
+
+  return `# ${config.projectName}
+Generated from Figma on ${config.generatedAt.split('T')[0]}
+
+## Getting Started
+
+### Prerequisites
+- Node.js 18+
+- npm or yarn
+
+### Installation
+\`\`\`bash
+npm install
+\`\`\`
+
+### Dependencies
+This project requires:
+- react: ^18.2.0
+- react-dom: ^18.2.0
+${config.hasAnimations ? '- framer-motion: ^11.0.0' : ''}
+
+## Project Structure
+components/
+${config.components.map(c => `├── ${c.name}.tsx`).join('\n')}
+
+## Components Overview
+| Component | Type | Animations | Handlers |
+|-----------|------|------------|----------|
+${componentTable}
+
+## Usage
+\`\`\`tsx
+import { ${config.components[0]?.name || 'Component'} } from './components';
+
+function App() {
+  return (
+    <div>
+      <${config.components[0]?.name || 'Component'} />
+    </div>
+  );
+}
+\`\`\`
+
+## Generated From
+- Figma File: ${config.figmaFileName}
+- Page: ${config.figmaPageName}
+- Conversion Date: ${config.generatedAt}
+- Plugin Version: ${config.pluginVersion}
+
+---
+Made with ❤️ by Figmake
+`;
+}

package/src/core/utils/imageExporter.ts

@@ -0,0 +1,34 @@
+export type ImageExportMode = 'placeholder' | 'base64' | 'url' | 'none';
+
+export interface ImageExportConfig {
+  mode: ImageExportMode;
+  maxBase64Size: number;
+  placeholderStyle: 'gradient' | 'solid' | 'blurred' | 'labeled';
+}
+
+export function handleImage(fill: any, config: ImageExportConfig): { style: any, comment: string } {
+  const style: any = {};
+  let comment = "";
+
+  if (config.mode === 'none') {
+    style.backgroundColor = '#f0f0f0';
+    comment = "TODO: Replace with actual image asset";
+    return { style, comment };
+  }
+
+  if (fill.imageHash) {
+    if (config.mode === 'placeholder') {
+      style.backgroundImage = `url(data:image/png;base64,iVBOR...)`; // Placeholder
+      style.backgroundSize = 'cover';
+      style.filter = 'blur(20px)';
+      comment = `TODO: Replace with real asset. Hash: ${fill.imageHash}`;
+    } else if (config.mode === 'base64') {
+      // In plugin mode, we'd fetch the actual bytes. 
+      // For now, we'll return a placeholder that the code.ts will replace if it has bytes.
+      style.backgroundImage = `url(IMAGE_HASH_${fill.imageHash})`;
+      style.backgroundSize = 'cover';
+    }
+  }
+
+  return { style, comment };
+}

package/src/design-system/extractDesignTokens.ts

@@ -0,0 +1,28 @@
+export function extractDesignTokens(nodes: any[]) {
+  return {
+    palette: extractPalette(nodes),
+    typography: extractTypography(nodes),
+    spacing: extractSpacing(nodes),
+    shadows: extractShadows(nodes)
+  };
+}
+
+function extractPalette(nodes: any[]) {
+  // TODO: Implementation logic
+  return {};
+}
+
+function extractTypography(nodes: any[]) {
+  // TODO: Implementation logic
+  return {};
+}
+
+function extractSpacing(nodes: any[]) {
+  // TODO: Implementation logic
+  return {};
+}
+
+function extractShadows(nodes: any[]) {
+  // TODO: Implementation logic
+  return {};
+}

package/src/design-system/extractPalette.ts

@@ -0,0 +1,92 @@
+export interface ColorScale {
+  '50': string;
+  '100': string;
+  '200': string;
+  '300': string;
+  '400': string;
+  '500': string;
+  '600': string;
+  '700': string;
+  '800': string;
+  '900': string;
+}
+
+export interface ExtractedPalette {
+  primary: ColorScale;
+  secondary: ColorScale;
+  tertiary: ColorScale;
+  accent: ColorScale;
+  neutrals: ColorScale;
+  semantic: {
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+  };
+  background: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+  };
+  text: {
+    primary: string;
+    secondary: string;
+    disabled: string;
+    inverse: string;
+  };
+}
+
+export function extractPalette(nodes: any[]): ExtractedPalette {
+  // Logic to collect colors, group by hue, and build scales
+  // This is a simplified implementation as requested
+  const colors: string[] = [];
+  
+  const traverse = (node: any) => {
+    if (node.fills) {
+      node.fills.forEach((fill: any) => {
+        if (fill.type === 'SOLID') {
+          const { r, g, b } = fill.color;
+          const hex = `#${Math.round(r * 255).toString(16).padStart(2, '0')}${Math.round(g * 255).toString(16).padStart(2, '0')}${Math.round(b * 255).toString(16).padStart(2, '0')}`;
+          colors.push(hex);
+        }
+      });
+    }
+    if (node.children) node.children.forEach(traverse);
+  };
+
+  nodes.forEach(traverse);
+
+  // Frequency analysis and grouping would happen here
+  // Returning a mock/placeholder structure that follows the interface
+  return {
+    primary: createScale(colors[0] || '#6366f1'),
+    secondary: createScale(colors[1] || '#ec4899'),
+    tertiary: createScale(colors[2] || '#14b8a6'),
+    accent: createScale(colors[3] || '#f59e0b'),
+    neutrals: createScale('#6b7280'),
+    semantic: {
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#3b82f6',
+    },
+    background: {
+      primary: '#ffffff',
+      secondary: '#f9fafb',
+      tertiary: '#f3f4f6',
+    },
+    text: {
+      primary: '#111827',
+      secondary: '#4b5563',
+      disabled: '#9ca3af',
+      inverse: '#ffffff',
+    },
+  };
+}
+
+function createScale(baseColor: string): ColorScale {
+  return {
+    '50': baseColor, '100': baseColor, '200': baseColor, '300': baseColor, '400': baseColor,
+    '500': baseColor, '600': baseColor, '700': baseColor, '800': baseColor, '900': baseColor,
+  };
+}

package/src/design-system/extractShadows.ts

@@ -0,0 +1,33 @@
+export interface ExtractedShadows {
+  elevations: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+  };
+  blurScale: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
+}
+
+export function extractShadows(nodes: any[]): ExtractedShadows {
+  return {
+    elevations: {
+      none: 'none',
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    },
+    blurScale: {
+      sm: '4px',
+      md: '8px',
+      lg: '16px',
+    }
+  };
+}

package/src/design-system/extractSpacing.ts

@@ -0,0 +1,34 @@
+export interface ExtractedSpacing {
+  unit: number;
+  scale: Record<string, string>;
+  containerPadding: {
+    mobile: string;
+    tablet: string;
+    desktop: string;
+  };
+}
+
+export function extractSpacing(nodes: any[]): ExtractedSpacing {
+  // Logic to find common padding/gap values and determine base unit
+  return {
+    unit: 4,
+    scale: {
+      '0': '0px',
+      '1': '4px',
+      '2': '8px',
+      '3': '12px',
+      '4': '16px',
+      '5': '20px',
+      '6': '24px',
+      '8': '32px',
+      '10': '40px',
+      '12': '48px',
+      '16': '64px',
+    },
+    containerPadding: {
+      mobile: '16px',
+      tablet: '24px',
+      desktop: '32px',
+    }
+  };
+}