@specverse/engines 4.1.5 → 4.1.7

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

@@ -0,0 +1,285 @@
+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)) {
+    if (name === "id" || name === "createdAt" || name === "updatedAt") continue;
+    const attr = config;
+    if (attr.auto || attr.autoGenerate) continue;
+    const autoTimestampFields = ["joinedAt", "registeredAt", "enrolledAt", "startedAt", "completedAt", "verifiedAt"];
+    if (autoTimestampFields.includes(name) && (attr.type === "DateTime" || attr.type === "Timestamp")) {
+      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)) {
+    if (name === "id" || name === "createdAt" || name === "updatedAt") continue;
+    const attr = config;
+    if (attr.auto || attr.autoGenerate) continue;
+    const autoTimestampFields = ["joinedAt", "registeredAt", "enrolledAt", "startedAt", "completedAt", "verifiedAt"];
+    if (autoTimestampFields.includes(name) && (attr.type === "DateTime" || attr.type === "Timestamp")) {
+      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

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

@@ -0,0 +1,111 @@
+function generateReactHook(context) {
+  const { model, controller, spec } = context;
+  if (!model) {
+    throw new Error("Model is required in template context");
+  }
+  const modelName = model.name;
+  const hookName = `use${modelName}`;
+  const controllerName = `${modelName}Controller`;
+  return `/**
+ * ${hookName}
+ * Custom React hook for ${modelName} data fetching and mutations
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { executeOperation } from '../lib/apiClient';
+import type { ${modelName} } from '../types/${modelName}';
+
+interface Use${modelName}Options {
+  id?: string;
+  list?: boolean;
+  filters?: Record<string, any>;
+}
+
+/**
+ * ${hookName} - Fetch and mutate ${modelName} data
+ */
+export function ${hookName}(options: Use${modelName}Options = {}) {
+  const queryClient = useQueryClient();
+  const { id, list, filters } = options;
+
+  // Fetch single ${modelName}
+  const { data: ${modelName.toLowerCase()}, isLoading: singleLoading, error: singleError } = useQuery({
+    queryKey: ['${modelName.toLowerCase()}', id],
+    queryFn: async () => {
+      if (!id) return null;
+      return await executeOperation('${controllerName}', 'retrieve', { id });
+    },
+    enabled: !!id && !list,
+  });
+
+  // Fetch list of ${modelName}s
+  const { data: ${modelName.toLowerCase()}s, isLoading: listLoading, error: listError } = useQuery({
+    queryKey: ['${modelName.toLowerCase()}s', filters],
+    queryFn: async () => {
+      return await executeOperation('${controllerName}', 'list', filters || {});
+    },
+    enabled: list,
+  });
+
+  const isLoading = list ? listLoading : singleLoading;
+  const error = list ? listError : singleError;
+
+  // Create mutation
+  const createMutation = useMutation({
+    mutationFn: async (data: Partial<${modelName}>) => {
+      return await executeOperation('${controllerName}', 'create', data);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['${modelName.toLowerCase()}s'] });
+    },
+  });
+
+  // Update mutation
+  const updateMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: Partial<${modelName}> }) => {
+      return await executeOperation('${controllerName}', 'update', { id, ...data });
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['${modelName.toLowerCase()}', variables.id] });
+      queryClient.invalidateQueries({ queryKey: ['${modelName.toLowerCase()}s'] });
+    },
+  });
+
+  // Delete mutation
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return await executeOperation('${controllerName}', 'delete', { id });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['${modelName.toLowerCase()}s'] });
+    },
+  });
+
+  // Refetch functions
+  const refetch = () => {
+    if (list) {
+      queryClient.invalidateQueries({ queryKey: ['${modelName.toLowerCase()}s'] });
+    } else if (id) {
+      queryClient.invalidateQueries({ queryKey: ['${modelName.toLowerCase()}', id] });
+    }
+  };
+
+  return {
+    ${modelName.toLowerCase()},
+    ${modelName.toLowerCase()}s,
+    isLoading,
+    error,
+    refetch,
+    create: createMutation.mutateAsync,
+    update: updateMutation.mutateAsync,
+    delete: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+  };
+}
+`;
+}
+export {
+  generateReactHook as default
+};

package/dist/libs/instance-factories/views/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/views/templates/react/index-html-generator.js

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

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