@specverse/engine-realize 3.5.3

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

@@ -0,0 +1,106 @@
+/**
+ * Field Helpers Generator
+ * Generates utility functions for form field handling
+ */
+
+export interface FieldHelpersGeneratorContext {
+  spec: any;
+  manifest: any;
+}
+
+export async function generate(context: FieldHelpersGeneratorContext): Promise<string> {
+  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;
+}
+`;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * .gitignore Generator for React Frontend
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+
+export default function generateGitignore(context: TemplateContext): string {
+  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
+`;
+}

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

@@ -0,0 +1,85 @@
+/**
+ * Index CSS Generator for React App
+ *
+ * Generates basic CSS with Tailwind-style reset
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+
+export default function generateIndexCss(context: TemplateContext): string {
+  return `/* Base styles with Tailwind-inspired reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}
+
+/* Utility classes */
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+`;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Index HTML Generator for React App
+ *
+ * Generates the HTML entry point for a React SPA
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+
+export default function generateIndexHtml(context: TemplateContext): string {
+  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>
+`;
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Main.tsx Generator for React App
+ *
+ * Generates the React entry point with React Query provider
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+
+export default function generateMainTsx(context: TemplateContext): string {
+  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>,
+);
+`;
+}

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

@@ -0,0 +1,54 @@
+/**
+ * Package.json Generator for React Frontend
+ *
+ * Generates package.json for the frontend workspace
+ */
+
+import type { TemplateContext } from '@specverse/engine-realize';
+
+export default function generatePackageJson(context: TemplateContext): string {
+  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",
+      "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);
+}

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

@@ -0,0 +1,179 @@
+/**
+ * Pattern Adapter Generator (v0.9.0)
+ *
+ * Copies ReactPatternAdapter from specverse-app-demo for pattern-based view rendering.
+ * This bundles the adapter with generated code for standalone deployment.
+ */
+
+import { readFileSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+export interface PatternAdapterGeneratorContext {
+  spec: any;
+  manifest: any;
+}
+
+export async function generate(context: PatternAdapterGeneratorContext): Promise<string> {
+  // Try to find the react-pattern-adapter.tsx source file
+  // It should be in specverse-app-demo/frontend-react/src/lib/react-pattern-adapter.tsx
+
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+
+  // Possible locations for the source file
+  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: string | null = null;
+  let foundPath: string | null = null;
+
+  for (const path of possiblePaths) {
+    if (existsSync(path)) {
+      try {
+        adapterSource = readFileSync(path, 'utf-8');
+        foundPath = path;
+        break;
+      } catch (error) {
+        // Continue to next path
+      }
+    }
+  }
+
+  if (adapterSource) {
+    // Successfully read the adapter - return it with a header comment
+    // The imports from @specverse/engine-realize are valid and exported
+    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}
+`;
+  }
+
+  // Fallback: Return stub that imports from @specverse/engine-realize
+  return `/**
+ * ReactPatternAdapter - Pattern-Based View Rendering (STUB)
+ *
+ * ⚠️ 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/engine-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">⚠️ 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/engine-realize';
+
+console.warn('⚠️ Using stub ReactPatternAdapter - full source file not found during generation');
+`;
+}