@specverse/engines 4.1.5 → 4.1.7

package/dist/libs/instance-factories/views/templates/react/react-component-generator.js

@@ -0,0 +1,299 @@
+import {
+  BaseComponentGenerator
+} from "../shared/base-generator.js";
+import { getSyntaxPattern } from "../shared/syntax-mapper.js";
+import { extractComponentTypes } from "../shared/base-generator.js";
+class ReactComponentGenerator extends BaseComponentGenerator {
+  reactConfig;
+  constructor(adapter, config) {
+    super(adapter, config);
+    this.reactConfig = config;
+  }
+  // ============================================================================
+  // Abstract Method Implementations
+  // ============================================================================
+  /**
+   * Generate React imports
+   */
+  generateImports(viewSpec) {
+    const imports = [];
+    const reactImports = this.getReactCoreImports(viewSpec);
+    if (reactImports) {
+      imports.push(reactImports);
+    }
+    const componentTypes = extractComponentTypes(viewSpec.components);
+    const componentImports = this.getComponentImports(componentTypes);
+    imports.push(...componentImports);
+    return imports.join("\n");
+  }
+  /**
+   * Generate complete React component
+   */
+  generateComponent(parts) {
+    const lines = [];
+    if (this.reactConfig.includeComments) {
+      lines.push(`/**`);
+      lines.push(` * ${parts.name} Component`);
+      lines.push(` * Generated by SpecVerse`);
+      lines.push(` */`);
+      lines.push("");
+    }
+    lines.push(parts.imports);
+    lines.push("");
+    const propsInterface = this.generatePropsInterface(parts.name);
+    if (propsInterface) {
+      lines.push(propsInterface);
+      lines.push("");
+    }
+    lines.push(this.generateComponentFunction(parts));
+    return lines.join("\n");
+  }
+  /**
+   * Generate state declarations using React hooks
+   */
+  generateState(state) {
+    const stateDeclarations = [];
+    for (const [name, def] of Object.entries(state)) {
+      const declaration = getSyntaxPattern("stateDeclaration", "react", {
+        name,
+        Name: this.capitalize(name),
+        type: def.type,
+        initial: JSON.stringify(def.initial)
+      });
+      if (this.reactConfig.includeComments && def.description) {
+        stateDeclarations.push(`  // ${def.description}`);
+      }
+      stateDeclarations.push(`  ${declaration}`);
+    }
+    return stateDeclarations.join("\n");
+  }
+  /**
+   * Generate event handlers
+   */
+  generateEvents(events) {
+    const eventHandlers = [];
+    for (const [name, def] of Object.entries(events)) {
+      const handler = getSyntaxPattern("eventHandler", "react", {
+        Name: this.capitalize(name),
+        params: def.params || "",
+        body: def.body
+      });
+      if (this.reactConfig.includeComments && def.description) {
+        eventHandlers.push(`  // ${def.description}`);
+      }
+      eventHandlers.push(`  ${handler}`);
+    }
+    return eventHandlers.join("\n\n");
+  }
+  /**
+   * Get file extension (.tsx for React/TypeScript)
+   */
+  getFileExtension() {
+    return this.reactConfig.typescript ? ".tsx" : ".jsx";
+  }
+  /**
+   * Get additional files (styles, types, etc.)
+   */
+  getAdditionalFiles(viewSpec) {
+    const files = {};
+    if (this.reactConfig.typescript && this.reactConfig.strictMode) {
+      files[`${viewSpec.name}.types.ts`] = this.generateTypesFile(viewSpec);
+    }
+    return files;
+  }
+  // ============================================================================
+  // React-Specific Helper Methods
+  // ============================================================================
+  /**
+   * Get React core imports (useState, useEffect, etc.)
+   */
+  getReactCoreImports(viewSpec) {
+    const hooks = [];
+    if (viewSpec.state && Object.keys(viewSpec.state).length > 0) {
+      hooks.push("useState");
+    }
+    if (this.needsUseEffect(viewSpec)) {
+      hooks.push("useEffect");
+    }
+    if (hooks.length > 0) {
+      return `import React, { ${hooks.join(", ")} } from 'react';`;
+    }
+    return `import React from 'react';`;
+  }
+  /**
+   * Get component library imports
+   */
+  getComponentImports(componentTypes) {
+    const imports = [];
+    const importMap = /* @__PURE__ */ new Map();
+    for (const type of componentTypes) {
+      const adapterComponent = this.adapter.components[type];
+      if (adapterComponent && adapterComponent.import) {
+        const importMatch = adapterComponent.import.match(/from ['"](.+)['"]/);
+        if (importMatch) {
+          const source = importMatch[1];
+          const componentMatch = adapterComponent.import.match(/import \{ (.+) \}/);
+          if (componentMatch) {
+            const componentName = componentMatch[1];
+            if (!importMap.has(source)) {
+              importMap.set(source, []);
+            }
+            importMap.get(source).push(componentName);
+          }
+        }
+      }
+    }
+    for (const [source, components] of importMap) {
+      imports.push(getSyntaxPattern("libraryImport", "react", {
+        exports: components.join(", "),
+        library: source
+      }));
+    }
+    return imports;
+  }
+  /**
+   * Generate props interface for TypeScript
+   */
+  generatePropsInterface(componentName) {
+    if (!this.reactConfig.typescript) {
+      return null;
+    }
+    const lines = [];
+    if (this.reactConfig.includeComments) {
+      lines.push(`/**`);
+      lines.push(` * Props for ${componentName} component`);
+      lines.push(` */`);
+    }
+    lines.push(`interface ${componentName}Props {`);
+    lines.push(`  // Component props will be added here`);
+    lines.push(`}`);
+    return lines.join("\n");
+  }
+  /**
+   * Generate main component function
+   */
+  generateComponentFunction(parts) {
+    const lines = [];
+    const propsParam = this.reactConfig.typescript ? `props: ${parts.name}Props` : "props";
+    lines.push(`export function ${parts.name}(${propsParam}) {`);
+    if (parts.state) {
+      lines.push(parts.state);
+      lines.push("");
+    }
+    if (parts.events) {
+      lines.push(parts.events);
+      lines.push("");
+    }
+    lines.push("  return (");
+    lines.push('    <div className="specverse-view">');
+    const indentedComponents = parts.components.split("\n").map((line) => line ? `      ${line}` : "").join("\n");
+    lines.push(indentedComponents);
+    lines.push("    </div>");
+    lines.push("  );");
+    lines.push("}");
+    return lines.join("\n");
+  }
+  /**
+   * Generate separate types file
+   */
+  generateTypesFile(viewSpec) {
+    const lines = [];
+    lines.push(`/**`);
+    lines.push(` * Type definitions for ${viewSpec.name}`);
+    lines.push(` * Generated by SpecVerse`);
+    lines.push(` */`);
+    lines.push("");
+    if (viewSpec.state) {
+      lines.push(`export interface ${viewSpec.name}State {`);
+      for (const [name, def] of Object.entries(viewSpec.state)) {
+        if (def.description) {
+          lines.push(`  /** ${def.description} */`);
+        }
+        lines.push(`  ${name}: ${def.type};`);
+      }
+      lines.push(`}`);
+      lines.push("");
+    }
+    if (viewSpec.events) {
+      for (const [name, def] of Object.entries(viewSpec.events)) {
+        const handlerName = `${this.capitalize(name)}Handler`;
+        const params = def.params || "";
+        if (def.description) {
+          lines.push(`/** ${def.description} */`);
+        }
+        lines.push(`export type ${handlerName} = (${params}) => void;`);
+        lines.push("");
+      }
+    }
+    return lines.join("\n");
+  }
+  /**
+   * Check if component needs useEffect hook
+   */
+  needsUseEffect(viewSpec) {
+    if (viewSpec.events) {
+      const eventNames = Object.keys(viewSpec.events).map((e) => e.toLowerCase());
+      return eventNames.some(
+        (name) => name.includes("mount") || name.includes("init") || name.includes("load")
+      );
+    }
+    return false;
+  }
+  /**
+   * Capitalize first letter of string
+   */
+  capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+  // ============================================================================
+  // React-Specific Component Rendering
+  // ============================================================================
+  /**
+   * Override to add React-specific rendering hints
+   */
+  renderAdapterComponent(type, properties, children, context) {
+    if (!properties.className && type !== "container") {
+      properties.className = `specverse-${type}`;
+    }
+    return super.renderAdapterComponent(type, properties, children, context);
+  }
+}
+function createReactGenerator(adapter, config) {
+  const defaultConfig = {
+    framework: "react",
+    target: "shadcn",
+    typescript: true,
+    strictMode: false,
+    includeComments: true,
+    maxDepth: 3,
+    enableWarnings: true
+  };
+  const finalConfig = { ...defaultConfig, ...config };
+  return new ReactComponentGenerator(adapter, finalConfig);
+}
+function generateReactComponent(viewSpec, adapter, options) {
+  const generator = createReactGenerator(adapter, options);
+  const result = generator.generate(viewSpec);
+  if (result.warnings.length > 0) {
+    console.warn("Generation warnings:", result.warnings);
+  }
+  return result.code;
+}
+function generateReactComponentFiles(viewSpec, adapter, options) {
+  const generator = createReactGenerator(adapter, options);
+  const result = generator.generate(viewSpec);
+  const files = /* @__PURE__ */ new Map();
+  const ext = generator.getFileExtension();
+  files.set(`${viewSpec.name}${ext}`, result.code);
+  const additionalFiles = generator.getAdditionalFiles(viewSpec);
+  for (const [filename, content] of Object.entries(additionalFiles)) {
+    files.set(filename, content);
+  }
+  return files;
+}
+export {
+  ReactComponentGenerator,
+  createReactGenerator,
+  generateReactComponent,
+  generateReactComponentFiles
+};

package/dist/libs/instance-factories/views/templates/react/router-generator.js

@@ -0,0 +1,136 @@
+function generateRouter(context) {
+  const { spec, models = [], views = [] } = context;
+  const specViews = views.length > 0 ? views : spec?.views ? Object.entries(spec.views) : [];
+  const imports = [];
+  const routes = [];
+  routes.push(`  {
+    path: '/',
+    element: <div className="home-page">
+      <h1>Welcome</h1>
+      <nav>
+        <ul>
+${generateHomeLinks(specViews, models)}
+        </ul>
+      </nav>
+    </div>
+  }`);
+  const usedPaths = /* @__PURE__ */ new Set();
+  specViews.forEach((viewEntry) => {
+    const [viewName, viewDef] = Array.isArray(viewEntry) ? viewEntry : [viewEntry.name, viewEntry];
+    const viewType = viewDef?.type || "list";
+    const model = Array.isArray(viewDef?.model) ? viewDef.model[0] : viewDef?.model;
+    if (!model) return;
+    const modelLower = model.toLowerCase();
+    const modelPlural = modelLower + "s";
+    imports.push(`import ${viewName} from './components/${viewName}';`);
+    const basePath = `/${modelPlural}`;
+    switch (viewType) {
+      case "list":
+        const listPath = usedPaths.has(basePath) ? `${basePath}/${viewName.toLowerCase().replace(/view$/, "")}` : basePath;
+        if (!usedPaths.has(listPath)) {
+          routes.push(`  {
+    path: '${listPath}',
+    element: <${viewName} />
+  }`);
+          usedPaths.add(listPath);
+        }
+        break;
+      case "detail":
+        const detailPath = `${basePath}/:id`;
+        if (!usedPaths.has(detailPath)) {
+          routes.push(`  {
+    path: '${detailPath}',
+    element: <${viewName} />
+  }`);
+          usedPaths.add(detailPath);
+        }
+        break;
+      case "form":
+        const newPath = `${basePath}/new`;
+        const editPath = `${basePath}/:id/edit`;
+        if (!usedPaths.has(newPath)) {
+          routes.push(`  {
+    path: '${newPath}',
+    element: <${viewName} />
+  }`);
+          usedPaths.add(newPath);
+        }
+        if (!usedPaths.has(editPath)) {
+          routes.push(`  {
+    path: '${editPath}',
+    element: <${viewName} />
+  }`);
+          usedPaths.add(editPath);
+        }
+        break;
+      case "dashboard":
+        const dashPath = modelLower === "author" || modelLower === "user" ? "/dashboard" : `/dashboard/${modelLower}`;
+        if (!usedPaths.has(dashPath)) {
+          routes.push(`  {
+    path: '${dashPath}',
+    element: <${viewName} />
+  }`);
+          usedPaths.add(dashPath);
+        }
+        break;
+    }
+  });
+  return `/**
+ * React Router Configuration
+ * Auto-generated by SpecVerse
+ */
+
+import { createBrowserRouter } from 'react-router-dom';
+${imports.join("\n")}
+
+/**
+ * Application Router
+ */
+export const router = createBrowserRouter([
+${routes.join(",\n")}
+]);
+`;
+}
+function generateHomeLinks(views, models) {
+  const links = [];
+  const usedPaths = /* @__PURE__ */ new Set();
+  views.forEach((viewEntry) => {
+    const [viewName, viewDef] = Array.isArray(viewEntry) ? viewEntry : [viewEntry.name, viewEntry];
+    const viewType = viewDef?.type || "list";
+    const model = Array.isArray(viewDef?.model) ? viewDef.model[0] : viewDef?.model;
+    if (!model) return;
+    const modelLower = model.toLowerCase();
+    const modelPlural = modelLower + "s";
+    const basePath = `/${modelPlural}`;
+    const viewLabel = viewName.replace(/View$/, "").replace(/([A-Z])/g, " $1").trim();
+    switch (viewType) {
+      case "list":
+        const listPath = usedPaths.has(basePath) ? `${basePath}/${viewName.toLowerCase().replace(/view$/, "")}` : basePath;
+        if (!usedPaths.has(listPath)) {
+          links.push(`          <li><a href="${listPath}">${viewLabel}</a></li>`);
+          usedPaths.add(listPath);
+        }
+        break;
+      case "form":
+        const formPath = `${basePath}/new`;
+        if (!usedPaths.has(formPath)) {
+          links.push(`          <li><a href="${formPath}">Create ${model}</a></li>`);
+          usedPaths.add(formPath);
+        }
+        break;
+      case "dashboard":
+        const dashPath = modelLower === "author" || modelLower === "user" ? "/dashboard" : `/dashboard/${modelLower}`;
+        if (!usedPaths.has(dashPath)) {
+          links.push(`          <li><a href="${dashPath}">${viewLabel}</a></li>`);
+          usedPaths.add(dashPath);
+        }
+        break;
+      case "detail":
+        break;
+    }
+  });
+  return links.join("\n");
+}
+export {
+  generateRouter as default
+};

package/dist/libs/instance-factories/views/templates/react/router-generic-generator.js

@@ -0,0 +1,107 @@
+function generateRouter(context) {
+  const { spec, models = [], views = [] } = context;
+  const specViews = views.length > 0 ? views : spec?.views || [];
+  const viewsArray = Array.isArray(specViews) ? specViews : Object.values(specViews);
+  const modelViews = /* @__PURE__ */ new Map();
+  const viewImports = [];
+  const routeEntries = [];
+  viewsArray.forEach((viewDef) => {
+    const viewName = viewDef.name;
+    if (!viewName) return;
+    const model = Array.isArray(viewDef.model) ? viewDef.model[0] : viewDef.model;
+    if (!model) return;
+    const viewType = viewDef.type || "list";
+    const modelLower = model.toLowerCase();
+    const path = `/${modelLower}${viewType}`;
+    viewImports.push(`import ${viewName} from './components/${viewName}';`);
+    routeEntries.push(`          <Route path="${path}" element={<${viewName} />} />`);
+    if (!modelViews.has(model)) modelViews.set(model, []);
+    modelViews.get(model).push({ name: viewName, type: viewType, path });
+  });
+  const appName = spec?.componentName || spec?.metadata?.component || spec?.name || "App";
+  const sidebarSections = Array.from(modelViews.entries()).map(([model, views2]) => {
+    const lower = model.toLowerCase();
+    const listView = views2.find((v) => v.type === "list");
+    const formView = views2.find((v) => v.type === "form");
+    const specialistViews = views2.filter((v) => !["list", "detail", "form"].includes(v.type));
+    const specialistLinks = specialistViews.map((v) => {
+      const label = v.type.charAt(0).toUpperCase() + v.type.slice(1);
+      const icon = v.type === "board" ? "\u25A6" : v.type === "timeline" ? "\u23F1" : v.type === "calendar" ? "\u{1F4C5}" : v.type === "dashboard" ? "\u{1F4CA}" : v.type === "analytics" ? "\u{1F4C8}" : "\u25C6";
+      return `              <Link to="${v.path}" className={\`flex items-center gap-2 px-2 py-1.5 rounded text-sm transition-all \${location.pathname === '${v.path}' ? 'bg-blue-50 text-blue-700 font-medium border border-blue-200' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 border border-transparent'}\`}>
+                <span className="text-xs">${icon}</span> ${label}
+              </Link>`;
+    }).join("\n");
+    return `          {/* ${model} */}
+          <div>
+            <h3 className="px-2 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">${model}s</h3>
+            <div className="space-y-0.5">
+${listView ? `              <Link to="${listView.path}" className={\`flex items-center gap-2 px-2 py-1.5 rounded text-sm transition-all \${location.pathname === '${listView.path}' ? 'bg-blue-50 text-blue-700 font-medium border border-blue-200' : 'text-gray-700 hover:bg-gray-50 border border-transparent'}\`}>
+                <span className="text-xs">\u2630</span> Browse
+              </Link>` : ""}
+${formView ? `              <Link to="${formView.path}" className={\`flex items-center gap-2 px-2 py-1.5 rounded text-sm transition-all \${location.pathname === '${formView.path}' ? 'bg-blue-50 text-blue-700 font-medium border border-blue-200' : 'text-gray-700 hover:bg-gray-50 border border-transparent'}\`}>
+                <span className="text-xs">\uFF0B</span> New
+              </Link>` : ""}
+${specialistLinks}
+            </div>
+          </div>`;
+  }).join("\n\n");
+  const firstModel = Array.from(modelViews.keys())[0]?.toLowerCase() || "unknown";
+  const hasDashboard = viewsArray.some((v) => v.type === "dashboard");
+  const defaultElement = hasDashboard ? viewsArray.find((v) => v.type === "dashboard")?.name || `${Array.from(modelViews.keys())[0]}ListView` : `${Array.from(modelViews.keys())[0] || "Unknown"}ListView`;
+  return `import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
+${viewImports.join("\n")}
+
+function Sidebar() {
+  const location = useLocation();
+  return (
+    <aside className="w-60 bg-white border-r border-gray-200 flex flex-col">
+      {/* App Header */}
+      <div className="px-4 py-5 border-b border-gray-100">
+        <h1 className="text-lg font-bold text-gray-900">${appName}</h1>
+        <p className="text-xs text-gray-400 mt-0.5">Generated from specification</p>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-5">
+${sidebarSections}
+      </nav>
+
+      {/* Footer */}
+      <div className="px-4 py-3 border-t border-gray-100 text-xs text-gray-400">
+        Powered by SpecVerse
+      </div>
+    </aside>
+  );
+}
+
+function App() {
+  return (
+    <Router>
+      <div className="flex h-screen bg-gray-50 overflow-hidden">
+        <Sidebar />
+        <main className="flex-1 overflow-y-auto">
+          <Routes>
+            <Route path="/" element={<${defaultElement} />} />
+${routeEntries.join("\n")}
+            <Route path="*" element={
+              <div className="flex items-center justify-center h-full">
+                <div className="text-center">
+                  <h1 className="text-4xl font-bold text-gray-300 mb-2">404</h1>
+                  <p className="text-gray-500">Page not found</p>
+                  <Link to="/" className="mt-4 inline-block text-blue-600 hover:text-blue-700 text-sm">\u2190 Back to home</Link>
+                </div>
+              </div>
+            } />
+          </Routes>
+        </main>
+      </div>
+    </Router>
+  );
+}
+
+export default App;
+`;
+}
+export {
+  generateRouter as default
+};