@specverse/engines 4.1.30 → 4.2.0

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

@@ -1,275 +0,0 @@
-function generateReactForm(context) {
-  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>
-  );
-}
-`;
-}
-function generateSchemaFields(model) {
-  let attributes = model.attributes || {};
-  if (Array.isArray(attributes)) {
-    const obj = {};
-    attributes.forEach((attr, index) => {
-      if (attr && typeof attr === "object" && attr.name) {
-        obj[attr.name] = attr;
-      } else if (Array.isArray(attr) && attr.length >= 2) {
-        obj[attr[0]] = attr[1];
-      } else {
-        obj[index.toString()] = attr;
-      }
-    });
-    attributes = obj;
-  }
-  const fields = [];
-  for (const [name, config] of Object.entries(attributes)) {
-    const attr = config;
-    if (attr.category === "metadata") continue;
-    const type = attr.type || "String";
-    let zodType = "z.string()";
-    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()";
-    if (type === "UUID") zodType = "z.string().uuid()";
-    if (attr.required) {
-    } 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");
-}
-function generateFormFields(model) {
-  let attributes = model.attributes || {};
-  if (Array.isArray(attributes)) {
-    const obj = {};
-    attributes.forEach((attr, index) => {
-      if (attr && typeof attr === "object" && attr.name) {
-        obj[attr.name] = attr;
-      } else if (Array.isArray(attr) && attr.length >= 2) {
-        obj[attr[0]] = attr[1];
-      } else {
-        obj[index.toString()] = attr;
-      }
-    });
-    attributes = obj;
-  }
-  const fields = [];
-  const regularFields = [];
-  const textAreaFields = [];
-  for (const [name, config] of Object.entries(attributes)) {
-    const attr = config;
-    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>`;
-    if (inputType === "textarea") {
-      textAreaFields.push(field);
-    } else {
-      regularFields.push(field);
-    }
-  }
-  let output = "";
-  if (regularFields.length > 0) {
-    output += `      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-`;
-    output += regularFields.join("\n\n");
-    output += `
-      </div>`;
-  }
-  if (textAreaFields.length > 0) {
-    if (output) output += "\n\n";
-    output += textAreaFields.join("\n\n");
-  }
-  return output;
-}
-export {
-  generateReactForm as default
-};

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

@@ -1,46 +0,0 @@
-function generateFrontendPackageJson(context) {
-  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);
-}
-export {
-  generateFrontendPackageJson as default
-};

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

@@ -1,81 +0,0 @@
-function generateReactHook(context) {
-  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 \u2014 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) {
-  return s.charAt(0).toUpperCase() + s.slice(1);
-}
-export {
-  generateReactHook as default
-};

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

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

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

@@ -1,23 +0,0 @@
-function generateIndexHtml(context) {
-  const { spec } = context;
-  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>
-`;
-}
-export {
-  generateIndexHtml as default
-};

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

@@ -1,21 +0,0 @@
-function generateMainTsx(context) {
-  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>
-);
-`;
-}
-export {
-  generateMainTsx as default
-};