@specverse/engines 4.1.28 → 4.2.0

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

@@ -1,299 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

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