@specverse/engines 4.1.28 → 4.2.0

package/libs/instance-factories/views/templates/react/forms-generator.ts

@@ -1,325 +0,0 @@
-/**
- * React Forms Generator
- *
- * Generates React forms with react-hook-form and Zod validation
- */
-
-import type { TemplateContext } from '@specverse/types';
-
-/**
- * Generate React form component for a model
- */
-export default function generateReactForm(context: TemplateContext): string {
-  const { model, spec } = context;
-
-  if (!model) {
-    throw new Error('Model is required in template context');
-  }
-
-  const modelName = model.name;
-  const formName = `${modelName}Form`;
-
-  return `/**
- * ${formName}
- * Form component for creating/editing ${modelName}
- */
-
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { useEffect } from 'react';
-import type { ${modelName} } from '../../types/${modelName}';
-
-// Zod schema for form validation
-const ${modelName.toLowerCase()}Schema = z.object({
-  ${generateSchemaFields(model)}
-});
-
-type ${modelName}FormData = z.infer<typeof ${modelName.toLowerCase()}Schema>;
-
-interface ${formName}Props {
-  ${modelName.toLowerCase()}?: ${modelName};
-  onSubmit: (data: ${modelName}FormData) => void;
-  onValidate?: (data: ${modelName}FormData) => void;
-  onDelete?: () => void;
-  onCancel?: () => void;
-  isDeleting?: boolean;
-  isValidating?: boolean;
-}
-
-/**
- * ${formName} Component
- */
-export function ${formName}({ ${modelName.toLowerCase()}, onSubmit, onValidate, onDelete, onCancel, isDeleting, isValidating }: ${formName}Props) {
-  const {
-    register,
-    handleSubmit,
-    getValues,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<${modelName}FormData>({
-    resolver: zodResolver(${modelName.toLowerCase()}Schema),
-    defaultValues: ${modelName.toLowerCase()} || {},
-  });
-
-  // Reset form when ${modelName.toLowerCase()} changes
-  useEffect(() => {
-    if (${modelName.toLowerCase()}) {
-      reset(${modelName.toLowerCase()});
-    } else {
-      reset({});
-    }
-  }, [${modelName.toLowerCase()}, reset]);
-
-  const handleValidateClick = () => {
-    if (onValidate) {
-      const data = getValues();
-      onValidate(data);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="${modelName.toLowerCase()}-form space-y-4" autoComplete="off" data-lpignore="true" data-form-type="other">
-      {/* Hidden fake fields to trick password managers */}
-      <input type="text" name="fake-username" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" aria-hidden="true" />
-      <input type="password" name="fake-password" style={{ display: 'none' }} tabIndex={-1} autoComplete="new-password" aria-hidden="true" />
-
-      ${generateFormFields(model)}
-
-      <div className="form-actions flex flex-wrap gap-2 pt-4">
-        <button
-          type="submit"
-          disabled={isSubmitting}
-          className="px-6 py-2 bg-blue-600 text-white font-medium rounded hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed transition-colors"
-        >
-          {isSubmitting ? 'Saving...' : 'Save'}
-        </button>
-
-        {onValidate && (
-          <button
-            type="button"
-            onClick={handleValidateClick}
-            disabled={isValidating}
-            className="px-6 py-2 bg-green-600 text-white font-medium rounded hover:bg-green-700 disabled:bg-slate-600 disabled:cursor-not-allowed transition-colors"
-          >
-            {isValidating ? 'Validating...' : 'Validate'}
-          </button>
-        )}
-
-        {onDelete && (
-          <button
-            type="button"
-            onClick={onDelete}
-            disabled={isDeleting}
-            className="px-6 py-2 bg-red-600 text-white font-medium rounded hover:bg-red-700 disabled:bg-slate-600 disabled:cursor-not-allowed transition-colors"
-          >
-            {isDeleting ? 'Deleting...' : 'Delete'}
-          </button>
-        )}
-
-        {onCancel && (
-          <button
-            type="button"
-            onClick={onCancel}
-            className="px-6 py-2 bg-slate-600 text-gray-200 font-medium rounded hover:bg-slate-500 transition-colors"
-          >
-            Cancel
-          </button>
-        )}
-      </div>
-    </form>
-  );
-}
-`;
-}
-
-/**
- * Generate Zod schema fields from model attributes
- */
-function generateSchemaFields(model: any): string {
-  let attributes = model.attributes || {};
-
-  // If attributes is an array (from Object.entries), convert back to object
-  if (Array.isArray(attributes)) {
-    const obj: Record<string, any> = {};
-    attributes.forEach((attr: any, index: number) => {
-      if (attr && typeof attr === 'object' && attr.name) {
-        obj[attr.name] = attr;
-      } else if (Array.isArray(attr) && attr.length >= 2) {
-        // Handle [name, config] tuple format
-        obj[attr[0]] = attr[1];
-      } else {
-        obj[index.toString()] = attr;
-      }
-    });
-    attributes = obj;
-  }
-
-  const fields: string[] = [];
-
-  for (const [name, config] of Object.entries(attributes)) {
-    const attr: any = config;
-
-    // Skip metadata fields (category set at parse time)
-    if (attr.category === 'metadata') continue;
-
-    const type = attr.type || 'String';
-    let zodType = 'z.string()';
-
-    // Map SpecVerse types to Zod types
-    if (type === 'Integer' || type === 'Number') zodType = 'z.number()';
-    if (type === 'Boolean') zodType = 'z.boolean()';
-    if (type === 'Email') zodType = 'z.string().email()';
-    if (type === 'DateTime') zodType = 'z.string()'; // datetime-local input gives string, not ISO datetime
-    if (type === 'UUID') zodType = 'z.string().uuid()';
-
-    // Add constraints
-    if (attr.required) {
-      // Already required by default
-    } else {
-      zodType += '.optional()';
-    }
-
-    if (attr.min && type === 'String') {
-      zodType = zodType.replace(')', `.min(${attr.min})`);
-    }
-    if (attr.max && type === 'String') {
-      zodType = zodType.replace(')', `.max(${attr.max})`);
-    }
-
-    fields.push(`  ${name}: ${zodType},`);
-  }
-
-  return fields.join('\n');
-}
-
-/**
- * Generate form fields from model attributes
- */
-function generateFormFields(model: any): string {
-  let attributes = model.attributes || {};
-
-  // If attributes is an array (from Object.entries), convert back to object
-  if (Array.isArray(attributes)) {
-    const obj: Record<string, any> = {};
-    attributes.forEach((attr: any, index: number) => {
-      if (attr && typeof attr === 'object' && attr.name) {
-        obj[attr.name] = attr;
-      } else if (Array.isArray(attr) && attr.length >= 2) {
-        // Handle [name, config] tuple format
-        obj[attr[0]] = attr[1];
-      } else {
-        obj[index.toString()] = attr;
-      }
-    });
-    attributes = obj;
-  }
-
-  const fields: string[] = [];
-  const regularFields: string[] = [];
-  const textAreaFields: string[] = [];
-
-  for (const [name, config] of Object.entries(attributes)) {
-    const attr: any = config;
-
-    // Skip metadata fields (category set at parse time)
-    if (attr.category === 'metadata') continue;
-
-    const type = attr.type || 'String';
-    const label = name.charAt(0).toUpperCase() + name.slice(1);
-    const isRequired = attr.required;
-
-    let inputType = 'text';
-    if (type === 'Email') inputType = 'email';
-    if (type === 'Number' || type === 'Integer') inputType = 'number';
-    if (type === 'Boolean') inputType = 'checkbox';
-    if (type === 'DateTime') inputType = 'datetime-local';
-    if (type === 'Text') inputType = 'textarea';
-
-    const field = inputType === 'textarea' ? `        <div className="form-field">
-          <label htmlFor="${name}" className="block text-sm font-medium text-gray-300 mb-1">
-            ${name}${isRequired ? ' <span className="text-red-400">*</span>' : ''}
-          </label>
-          <textarea
-            id="${name}"
-            {...register('${name}')}
-            rows={2}
-            className={\`w-full px-3 py-2 rounded bg-slate-700 border transition-colors text-gray-200
-              \${errors['${name}']
-                ? 'border-red-500 focus:border-red-400'
-                : 'border-slate-600 focus:border-blue-500'
-              } focus:outline-none focus:ring-0 resize-none\`}
-            placeholder="Enter ${name}"
-            autoComplete="off"
-            data-lpignore="true"
-            data-form-type="other"
-            readOnly
-            onFocus={(e) => e.target.removeAttribute('readonly')}
-          />
-          {errors['${name}'] && (
-            <p className="mt-1 text-xs text-red-400">{errors['${name}']?.message}</p>
-          )}
-        </div>` : inputType === 'checkbox' ? `        <div className="form-field">
-          <label htmlFor="${name}" className="flex items-center text-sm font-medium text-gray-300">
-            <input
-              id="${name}"
-              type="checkbox"
-              {...register('${name}')}
-              className="mr-2"
-              autoComplete="off"
-              data-lpignore="true"
-            />
-            ${name}${isRequired ? ' <span className="ml-1 text-red-400">*</span>' : ''}
-          </label>
-          {errors['${name}'] && (
-            <p className="mt-1 text-xs text-red-400">{errors['${name}']?.message}</p>
-          )}
-        </div>` : `        <div className="form-field">
-          <label htmlFor="${name}" className="block text-sm font-medium text-gray-300 mb-1">
-            ${name}${isRequired ? ' <span className="text-red-400">*</span>' : ''}
-          </label>
-          <input
-            id="${name}"
-            type="${inputType}"
-            {...register('${name}')}
-            className={\`w-full px-3 py-2 rounded bg-slate-700 border transition-colors text-gray-200
-              \${errors['${name}']
-                ? 'border-red-500 focus:border-red-400'
-                : 'border-slate-600 focus:border-blue-500'
-              } focus:outline-none focus:ring-0\`}
-            placeholder="Enter ${name}"
-            autoComplete="off"
-            data-lpignore="true"
-            data-form-type="other"
-            readOnly
-            onFocus={(e) => e.target.removeAttribute('readonly')}
-          />
-          {errors['${name}'] && (
-            <p className="mt-1 text-xs text-red-400">{errors['${name}']?.message}</p>
-          )}
-        </div>`;
-
-    // Separate textarea fields from regular fields
-    if (inputType === 'textarea') {
-      textAreaFields.push(field);
-    } else {
-      regularFields.push(field);
-    }
-  }
-
-  // Build final output with grid layout for regular fields
-  let output = '';
-
-  if (regularFields.length > 0) {
-    output += `      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">\n`;
-    output += regularFields.join('\n\n');
-    output += `\n      </div>`;
-  }
-
-  if (textAreaFields.length > 0) {
-    if (output) output += '\n\n';
-    output += textAreaFields.join('\n\n');
-  }
-
-  return output;
-}

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

@@ -1,57 +0,0 @@
-/**
- * Frontend Package JSON Generator
- *
- * Generates package.json for the frontend workspace with React dependencies
- */
-
-import type { TemplateContext } from '@specverse/types';
-
-/**
- * Generate frontend workspace package.json
- */
-export default function generateFrontendPackageJson(context: TemplateContext): string {
-  const { spec } = context;
-
-  const componentName = spec?.name || 'app';
-  const packageName = `${componentName.toLowerCase()}-frontend`;
-
-  const packageJson = {
-    name: packageName,
-    version: '1.0.0',
-    description: `Frontend for ${spec?.description || componentName}`,
-    private: true,
-    type: 'module',
-    scripts: {
-      dev: 'vite',
-      build: 'tsc && vite build',
-      preview: 'vite preview',
-      lint: 'eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0',
-      'type-check': 'tsc --noEmit'
-    },
-    dependencies: {
-      'react': '^18.3.1',
-      'react-dom': '^18.3.1',
-      'react-router-dom': '^6.26.2',
-      '@tanstack/react-query': '^5.56.2',
-      'zustand': '^4.5.5',
-      'axios': '^1.7.7'
-    },
-    devDependencies: {
-      '@types/react': '^18.3.9',
-      '@types/react-dom': '^18.3.0',
-      '@typescript-eslint/eslint-plugin': '^8.7.0',
-      '@typescript-eslint/parser': '^8.7.0',
-      '@vitejs/plugin-react': '^4.3.1',
-      'autoprefixer': '^10.4.20',
-      'eslint': '^9.11.1',
-      'eslint-plugin-react-hooks': '^5.1.0-rc.0',
-      'eslint-plugin-react-refresh': '^0.4.12',
-      'postcss': '^8.4.47',
-      'tailwindcss': '^3.4.13',
-      'typescript': '^5.6.2',
-      'vite': '^5.4.8'
-    }
-  };
-
-  return JSON.stringify(packageJson, null, 2);
-}

package/libs/instance-factories/views/templates/react/hooks-generator.ts

@@ -1,106 +0,0 @@
-/**
- * React Hooks Generator — per-model convenience hook.
- *
- * Emits `use${Model}()` which is a thin delegator over the canonical
- * hooks in `hooks/useApi.ts`. Historically this generator produced
- * its own `useQuery(...)` + `useMutation(...)` blocks with private
- * query keys (`['poll', id]`, `['polls', filters]`), which meant:
- *
- *   1. WebSocket events invalidating `['entities', modelName]` never
- *      reached views that consumed this hook.
- *   2. The conformance check `no-bare-usequery-in-views` lit up for
- *      every per-model hook file.
- *
- * v2: delegate everything to `useEntitiesQuery` and
- * `useExecuteOperationMutation` so there's exactly one cache key
- * per model and one mutation pipeline across the whole frontend.
- *
- * The public API of `use${Model}()` is preserved for callers that
- * depend on it: { [model], [models], isLoading, error, refetch,
- * create, update, delete, isCreating, isUpdating, isDeleting }.
- */
-
-import type { TemplateContext } from '@specverse/types';
-
-export default function generateReactHook(context: TemplateContext): string {
-  const { model } = context;
-
-  if (!model) {
-    throw new Error('Model is required in template context');
-  }
-
-  const modelName = model.name;
-  const hookName = `use${modelName}`;
-  const controllerName = `${modelName}Controller`;
-  const singular = modelName.charAt(0).toLowerCase() + modelName.slice(1);
-  const plural = singular + 's';
-
-  return `/**
- * ${hookName}
- *
- * Thin delegator over the canonical useApi hooks. All state flows
- * through \`['entities', '${modelName}']\` so WebSocket invalidation
- * reaches every view consuming this hook.
- */
-
-import { useMemo } from 'react';
-import {
-  useEntitiesQuery,
-  useExecuteOperationMutation,
-} from './useApi';
-import type { ${modelName} } from '../types/${modelName}';
-
-interface ${capitalize(hookName)}Options {
-  id?: string;
-  list?: boolean;
-  filters?: Record<string, any>;
-}
-
-export function ${hookName}(opts: ${capitalize(hookName)}Options = {}) {
-  const { id, filters: _filters } = opts;
-
-  // Canonical list query — one cache key per model. The list flag
-  // is preserved for backwards compatibility but the query always
-  // runs; React Query dedupes across consumers automatically.
-  const query = useEntitiesQuery('${controllerName}', '${modelName}');
-  const ${plural} = (query.data as ${modelName}[] | undefined) || [];
-
-  // Single-entity lookup is client-side against the canonical list
-  // so both the detail view and the list view share one source of
-  // truth. If the caller needs server-side hydration for a single
-  // entity, they should call useEntitiesQuery directly with a
-  // filtered controller endpoint.
-  const ${singular} = useMemo<${modelName} | null>(() => {
-    if (!id) return null;
-    for (const entity of ${plural}) {
-      const entityId = (entity as any)?.id || (entity as any)?.data?.id;
-      if (entityId === id) return entity;
-    }
-    return null;
-  }, [id, ${plural}]);
-
-  const mutation = useExecuteOperationMutation();
-
-  return {
-    ${singular},
-    ${plural},
-    isLoading: query.isLoading,
-    error: query.error,
-    refetch: () => { /* handled by useEntitiesQuery refetchInterval + WS invalidation */ },
-    create: (data: Partial<${modelName}>) =>
-      mutation.mutateAsync({ controllerName: '${controllerName}', operationName: 'create', data: data as Record<string, unknown> }),
-    update: (args: { id: string; data: Partial<${modelName}> }) =>
-      mutation.mutateAsync({ controllerName: '${controllerName}', operationName: 'update', entityId: args.id, data: args.data as Record<string, unknown> }),
-    delete: (entityId: string) =>
-      mutation.mutateAsync({ controllerName: '${controllerName}', operationName: 'delete', entityId, data: {} }),
-    isCreating: mutation.isPending,
-    isUpdating: mutation.isPending,
-    isDeleting: mutation.isPending,
-  };
-}
-`;
-}
-
-function capitalize(s: string): string {
-  return s.charAt(0).toUpperCase() + s.slice(1);
-}

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

@@ -1,14 +0,0 @@
-/**
- * React index.css Generator
- *
- * Generates Tailwind CSS entry point
- */
-
-import type { TemplateContext } from '@specverse/types';
-
-export default function generateIndexCss(context: TemplateContext): string {
-  return `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`;
-}

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

@@ -1,34 +0,0 @@
-/**
- * React index.html Generator
- *
- * Generates the HTML entry point for a React application
- */
-
-import type { TemplateContext } from '@specverse/types';
-
-/**
- * Generate index.html for React application
- */
-export default function generateIndexHtml(context: TemplateContext): string {
-  const { spec } = context;
-
-  // Extract component name from spec metadata
-  const componentName = spec?.metadata?.component || spec?.component?.name || 'App';
-  const description = spec?.metadata?.description || spec?.component?.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>${componentName}</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-`;
-}

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

@@ -1,29 +0,0 @@
-/**
- * React main.tsx Entry Point Generator
- *
- * Generates the main.tsx entry point for React application
- */
-
-import type { TemplateContext } from '@specverse/types';
-
-/**
- * Generate main.tsx React entry point
- */
-export default function generateMainTsx(context: TemplateContext): string {
-  return `/**
- * React Application Entry Point
- * Auto-generated by SpecVerse
- */
-
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import './index.css';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-`;
-}