@specverse/engines 4.1.5 → 4.1.7

package/dist/libs/instance-factories/applications/templates/react/field-helpers-generator.js

@@ -0,0 +1,99 @@
+async function generate(context) {
+  return `/**
+ * Utility functions for form field handling
+ */
+
+/**
+ * Check if a field should be hidden because it's auto-generated
+ */
+export function isAutoGeneratedField(attrName: string, attrDef: any): boolean {
+  const typeStr = typeof attrDef === 'string' ? attrDef : attrDef?.type || '';
+
+  // Hide UUID id field
+  if (attrName === 'id' && typeStr.includes('UUID')) return true;
+
+  // Hide auto-generated DateTime fields
+  const autoDateFields = ['createdAt', 'updatedAt', 'joinedAt', 'publishedAt'];
+  if (autoDateFields.includes(attrName) && typeStr.includes('DateTime')) return true;
+
+  return false;
+}
+
+/**
+ * Check if a field is required
+ */
+export function isFieldRequired(attrDef: any): boolean {
+  if (!attrDef) return false;
+  if (typeof attrDef === 'string') {
+    return attrDef.toLowerCase().includes('required');
+  }
+  return attrDef.required === true;
+}
+
+/**
+ * Get default value for a field based on its type
+ */
+export function getFieldDefaultValue(attrDef: any): any {
+  if (!attrDef) return '';
+
+  const typeStr = typeof attrDef === 'string' ? attrDef : attrDef?.type || '';
+
+  // Check if schema has a default value
+  if (attrDef && typeof attrDef === 'object' && attrDef.default !== undefined) {
+    const defaultVal = attrDef.default;
+    // Parse string defaults to proper types
+    if (typeStr.toLowerCase().includes('bool')) {
+      return defaultVal === 'true' || defaultVal === true;
+    } else if (
+      typeStr.toLowerCase().includes('int') ||
+      typeStr.toLowerCase().includes('number')
+    ) {
+      return typeof defaultVal === 'number' ? defaultVal : parseInt(defaultVal) || 0;
+    } else if (typeStr.toLowerCase().includes('string')) {
+      // Remove surrounding quotes if present
+      return typeof defaultVal === 'string'
+        ? defaultVal.replace(/^"|"$/g, '')
+        : defaultVal;
+    } else {
+      return defaultVal;
+    }
+  }
+
+  // Otherwise use type-based defaults
+  if (typeStr.toLowerCase().includes('bool')) {
+    return false;
+  } else if (
+    typeStr.toLowerCase().includes('int') ||
+    typeStr.toLowerCase().includes('number')
+  ) {
+    return 0;
+  } else {
+    return '';
+  }
+}
+
+/**
+ * Initialize form data from schema attributes
+ */
+export function initializeFormData(
+  attributes: Record<string, any>,
+  options: { includeAutoGenerated?: boolean } = {}
+): Record<string, any> {
+  const data: Record<string, any> = {};
+
+  Object.entries(attributes).forEach(([attrName, attrDef]) => {
+    // Skip auto-generated fields unless explicitly included
+    if (!options.includeAutoGenerated && isAutoGeneratedField(attrName, attrDef)) {
+      return;
+    }
+
+    data[attrName] = getFieldDefaultValue(attrDef);
+  });
+
+  return data;
+}
+`;
+}
+export {
+  generate
+};

package/dist/libs/instance-factories/applications/templates/react/gitignore-generator.js

@@ -0,0 +1,35 @@
+function generateGitignore(context) {
+  return `# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+`;
+}
+export {
+  generateGitignore as default
+};

package/dist/libs/instance-factories/applications/templates/react/index-css-generator.js

@@ -0,0 +1,9 @@
+function generateIndexCss(context) {
+  return `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+}
+export {
+  generateIndexCss as default
+};

package/dist/libs/instance-factories/applications/templates/react/index-html-generator.js

@@ -0,0 +1,23 @@
+function generateIndexHtml(context) {
+  const { spec } = context;
+  const appName = spec.metadata?.component || "SpecVerse App";
+  const description = spec.metadata?.description || "Generated by SpecVerse";
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="${description}" />
+    <title>${appName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`;
+}
+export {
+  generateIndexHtml as default
+};

package/dist/libs/instance-factories/applications/templates/react/main-tsx-generator.js

@@ -0,0 +1,29 @@
+function generateMainTsx(context) {
+  return `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import App from './App';
+import './index.css';
+
+// Create a client for React Query
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      retry: 1,
+    },
+  },
+});
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>,
+);
+`;
+}
+export {
+  generateMainTsx as default
+};

package/dist/libs/instance-factories/applications/templates/react/package-json-generator.js

@@ -0,0 +1,49 @@
+function generatePackageJson(context) {
+  const { spec } = context;
+  const appName = spec.metadata?.component?.toLowerCase() || "frontend";
+  const version = spec.metadata?.version || "1.0.0";
+  const description = spec.metadata?.description || "Frontend application";
+  const pkg = {
+    name: `${appName}-frontend`,
+    version,
+    description,
+    private: true,
+    type: "module",
+    scripts: {
+      dev: "vite",
+      build: "tsc && vite build",
+      preview: "vite preview",
+      test: "echo 'No tests configured for frontend'",
+      lint: "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    },
+    dependencies: {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "react-router-dom": "^6.18.0",
+      "@tanstack/react-query": "^5.0.0",
+      "react-hook-form": "^7.48.0",
+      "zod": "^3.22.0",
+      "@hookform/resolvers": "^3.3.0",
+      "zustand": "^4.4.0"
+    },
+    devDependencies: {
+      "@types/react": "^18.2.0",
+      "@types/react-dom": "^18.2.0",
+      "@vitejs/plugin-react": "^4.2.0",
+      "autoprefixer": "^10.4.20",
+      "postcss": "^8.4.47",
+      "tailwindcss": "^3.4.13",
+      "typescript": "^5.2.0",
+      "vite": "^5.0.0",
+      "eslint": "^8.53.0",
+      "@typescript-eslint/eslint-plugin": "^6.10.0",
+      "@typescript-eslint/parser": "^6.10.0",
+      "eslint-plugin-react-hooks": "^4.6.0",
+      "eslint-plugin-react-refresh": "^0.4.4"
+    }
+  };
+  return JSON.stringify(pkg, null, 2);
+}
+export {
+  generatePackageJson as default
+};

package/dist/libs/instance-factories/applications/templates/react/pattern-adapter-generator.js

@@ -0,0 +1,156 @@
+import { readFileSync, existsSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+async function generate(context) {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const possiblePaths = [
+    // PRIORITY 0: Same directory as this generator (source)
+    join(__dirname, "react-pattern-adapter.tsx"),
+    // PRIORITY 1: Bundled with package (in libs/ directory, from dist/)
+    join(__dirname, "../../../../../../libs/instance-factories/applications/templates/react/react-pattern-adapter.tsx"),
+    // Up from dist to package root then into libs
+    join(__dirname, "../../../../../libs/instance-factories/applications/templates/react/react-pattern-adapter.tsx"),
+    join(__dirname, "../../../../libs/instance-factories/applications/templates/react/react-pattern-adapter.tsx"),
+    // Development environment (specverse-app-demo sibling)
+    join(__dirname, "../../../../../../../specverse-app-demo/frontend-react/src/lib/react-pattern-adapter.tsx")
+  ];
+  let adapterSource = null;
+  let foundPath = null;
+  for (const path of possiblePaths) {
+    if (existsSync(path)) {
+      try {
+        adapterSource = readFileSync(path, "utf-8");
+        foundPath = path;
+        break;
+      } catch (error) {
+      }
+    }
+  }
+  if (adapterSource) {
+    return `/**
+ * ReactPatternAdapter - Pattern-Based View Rendering
+ *
+ * AUTO-GENERATED: Copied from specverse-app-demo
+ * Source: ${foundPath}
+ *
+ * This file provides pattern detection and React/Tailwind rendering for
+ * tech-independent composite patterns. It is bundled with generated code
+ * for standalone deployment.
+ *
+ * Imports COMPOSITE_VIEW_PATTERNS and types from @specverse/engine-realize
+ * which are exported from the published npm package.
+ *
+ * DO NOT EDIT: Changes will be overwritten on next generation.
+ * To customize, create a wrapper or modify the original source.
+ */
+
+${adapterSource}
+`;
+  }
+  return `/**
+ * ReactPatternAdapter - Pattern-Based View Rendering (STUB)
+ *
+ * \u26A0\uFE0F WARNING: Could not locate react-pattern-adapter.tsx source file.
+ *
+ * This is a stub implementation that imports from @specverse/engine-realize.
+ * For full functionality, ensure specverse-app-demo is available at generation time.
+ *
+ * Attempted paths:
+${possiblePaths.map((p) => ` * - ${p}`).join("\n")}
+ */
+
+import { useMemo } from 'react';
+import {
+  COMPOSITE_VIEW_PATTERNS,
+  type CompositeViewPattern,
+  type CURVEDOperation
+} from '@specverse/engines/realize';
+
+/**
+ * React-specific protocol mapping for CURVED operations (STUB)
+ */
+export const REACT_PROTOCOL_MAPPING: Record<CURVEDOperation, {
+  method: string;
+  pathPattern: string;
+}> = {
+  create: {
+    method: 'POST',
+    pathPattern: '/api/{resource}'
+  },
+  update: {
+    method: 'PUT',
+    pathPattern: '/api/{resource}/{id}'
+  },
+  retrieve: {
+    method: 'GET',
+    pathPattern: '/api/{resource}/{id}'
+  },
+  retrieve_many: {
+    method: 'GET',
+    pathPattern: '/api/{resource}'
+  },
+  validate: {
+    method: 'POST',
+    pathPattern: '/api/{resource}/validate'
+  },
+  evolve: {
+    method: 'POST',
+    pathPattern: '/api/{resource}/{id}/evolve'
+  },
+  delete: {
+    method: 'DELETE',
+    pathPattern: '/api/{resource}/{id}'
+  }
+};
+
+/**
+ * Simple Tailwind adapter stub
+ */
+const createStubTailwindAdapter = () => ({
+  renderComponent: (type: string, _props: any) => {
+    return \`<div class="p-2 text-gray-600">[\${type}]</div>\`;
+  }
+});
+
+/**
+ * Stub PatternAdapter that uses browser exports
+ */
+export function usePatternAdapter() {
+  return useMemo(() => ({
+    tailwindAdapter: createStubTailwindAdapter(),
+
+    detectPattern(view: any): CompositeViewPattern | null {
+      const viewType = view.type?.toLowerCase();
+      const typeToPattern: Record<string, string> = {
+        'form': 'form-view',
+        'list': 'list-view',
+        'detail': 'detail-view',
+        'dashboard': 'dashboard-view'
+      };
+      const patternId = typeToPattern[viewType];
+      return patternId ? COMPOSITE_VIEW_PATTERNS[patternId] : null;
+    },
+
+    renderPattern(_context: any): string {
+      return \`
+        <div class="p-4 bg-yellow-50 border border-yellow-200 rounded">
+          <p class="text-yellow-800 font-semibold">\u26A0\uFE0F Pattern Adapter Stub</p>
+          <p class="text-sm text-yellow-700 mt-2">
+            Full ReactPatternAdapter could not be bundled.
+            Views will not render correctly.
+          </p>
+        </div>
+      \`;
+    }
+  }), []);
+}
+
+export { COMPOSITE_VIEW_PATTERNS } from '@specverse/engines/realize';
+
+console.warn('\u26A0\uFE0F Using stub ReactPatternAdapter - full source file not found during generation');
+`;
+}
+export {
+  generate
+};