@specverse/engine-realize 3.5.3

package/libs/instance-factories/applications/templates/react/_view-components-source.ts

@@ -0,0 +1,555 @@
+/**
+ * View Components Generator
+ *
+ * Generates local versions of view components (FormView, ListView, DetailView, DashboardView)
+ * that use locally generated hooks and utilities (no external dependencies).
+ *
+ * All view components are self-contained within the generated project with instance-factory-specific
+ * endpoints (e.g., REST for Fastify, GraphQL for Apollo, etc.).
+ */
+
+export interface ViewComponentsGeneratorContext {
+  spec: any;
+  manifest: any;
+}
+
+export async function generate(context: ViewComponentsGeneratorContext): Promise<{ [filename: string]: string }> {
+  const files: { [filename: string]: string } = {};
+
+  // Generate FormView.tsx
+  files['FormView.tsx'] = generateFormView();
+
+  // Generate ListView.tsx
+  files['ListView.tsx'] = generateListView();
+
+  // Generate DetailView.tsx
+  files['DetailView.tsx'] = generateDetailView();
+
+  // Generate DashboardView.tsx
+  files['DashboardView.tsx'] = generateDashboardView();
+
+  return files;
+}
+
+function generateFormView(): string {
+  return `/**
+ * StandardFormView - Controller-Based Form View Component
+ *
+ * LOCAL VERSION - Uses local hooks with instance-factory-specific API client
+ *
+ * Supports both Create and Edit modes with:
+ * - Controller-driven form generation
+ * - Smart input types (text, number, boolean, relationship selectors)
+ * - Auto-generated field detection
+ * - Validation and error handling
+ * - Lifecycle management (Edit/Evolve tabs)
+ * - Foreign key relationship fields
+ * - Two-panel layout (form + entity list)
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+import { useAppStore } from '../../stores/appStore';
+import { useEntitiesQuery, useModelSchemaQuery, useExecuteOperationMutation, useAvailableTransitionsQuery, useTransitionStateMutation } from '../../hooks/useApi';
+import { isAutoGeneratedField, isFieldRequired, initializeFormData } from '../../utils/field-helpers';
+import { RelationshipField } from '../../components/RelationshipField';
+import type { View, Entity } from '../../types/api';
+
+type FormMode = 'create' | 'update';
+type ActiveTab = 'edit' | 'evolve';
+
+interface StandardFormViewProps {
+  view: View;
+  spec?: any;  // Full spec for controller access
+}
+
+export function FormView({ view, spec }: StandardFormViewProps) {
+  // Determine controller and model
+  let controllerName: string;
+  let modelName: string;
+
+  if (view.controller && spec) {
+    // New: Controller-based
+    controllerName = view.controller;
+    const controller = spec.controllers[view.controller];
+    modelName = controller.model;
+  } else {
+    // Legacy: Model-based
+    modelName = view.model as string;
+    controllerName = \`\${modelName}Controller\`;
+  }
+
+  const [selectedEntity, setSelectedEntity] = useState<Entity | null>(null);
+  const [formMode, setFormMode] = useState<FormMode>('create');
+  const [activeTab, setActiveTab] = useState<ActiveTab>('edit');
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [selectedLifecycleStates, setSelectedLifecycleStates] = useState<Record<string, string>>({});
+
+  // Fetch entities and schema - USES LOCAL HOOKS
+  const { data: entities = [], isLoading: entitiesLoading } = useEntitiesQuery(controllerName, modelName);
+  const { data: schema } = useModelSchemaQuery(modelName);
+  const { mutate: executeOperation, isPending } = useExecuteOperationMutation();
+  const { mutate: transitionState, isPending: isTransitioning } = useTransitionStateMutation();
+
+  const attributes = schema?.attributes || {};
+  const relationships = schema?.relationships || {};
+  const lifecycles = schema?.lifecycles || {};
+
+  // Get entities store for relationship resolution
+  const entitiesStore = useAppStore((state) => state.entities);
+
+  // Sync selected entity with updated entities list
+  useEffect(() => {
+    if (selectedEntity && entities.length > 0) {
+      const updatedEntity = entities.find((e) => e.id === selectedEntity.id);
+      if (updatedEntity) {
+        const oldStates = JSON.stringify(selectedEntity.metadata?.lifecycleStates || {});
+        const newStates = JSON.stringify(updatedEntity.metadata?.lifecycleStates || {});
+
+        if (oldStates !== newStates) {
+          setSelectedEntity(updatedEntity);
+          setSelectedLifecycleStates({ ...(updatedEntity.metadata?.lifecycleStates || {}) });
+        }
+      }
+    }
+  }, [entities, selectedEntity?.id]);
+
+  // Initialize form data when schema changes or when switching modes
+  useEffect(() => {
+    if (selectedEntity && formMode === 'update') {
+      setFormData({ ...selectedEntity.data });
+      const currentStates = selectedEntity.metadata?.lifecycleStates || {};
+      setSelectedLifecycleStates({ ...currentStates });
+    } else if (schema?.attributes) {
+      setFormData(initializeFormData(schema.attributes, { includeAutoGenerated: false }));
+      setSelectedLifecycleStates({});
+    }
+  }, [selectedEntity, formMode, schema]);
+
+  // Check if field should be shown
+  const shouldShowField = (attrName: string, attrDef: any): boolean => {
+    const isAuto = isAutoGeneratedField(attrName, attrDef);
+    // In create mode, hide auto-generated fields
+    if (formMode === 'create' && isAuto) {
+      return false;
+    }
+    // In update mode, show all fields
+    return true;
+  };
+
+  // Handle form submission
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setErrors({});
+
+    const operation = formMode === 'create' ? 'create' : 'update';
+    const params = formMode === 'update' && selectedEntity
+      ? { ...formData, id: selectedEntity.id }
+      : formData;
+
+    executeOperation(
+      { controllerName, operationName: operation, params },
+      {
+        onSuccess: () => {
+          if (formMode === 'create') {
+            setFormData(initializeFormData(schema.attributes, { includeAutoGenerated: false }));
+          }
+          setFormMode('create');
+          setSelectedEntity(null);
+        },
+        onError: (error: any) => {
+          setErrors({ _form: error.message || 'Operation failed' });
+        }
+      }
+    );
+  };
+
+  // Handle entity selection for editing
+  const handleEntitySelect = (entity: Entity) => {
+    setSelectedEntity(entity);
+    setFormMode('update');
+    setActiveTab('edit');
+  };
+
+  // Handle lifecycle state transition
+  const handleLifecycleTransition = (lifecycleName: string, toState: string) => {
+    if (!selectedEntity) return;
+
+    transitionState(
+      { modelName, entityId: selectedEntity.id, toState, lifecycleName },
+      {
+        onSuccess: () => {
+          setSelectedLifecycleStates((prev) => ({ ...prev, [lifecycleName]: toState }));
+        },
+        onError: (error: any) => {
+          setErrors({ _lifecycle: error.message || 'Transition failed' });
+        }
+      }
+    );
+  };
+
+  // Render field input
+  const renderFieldInput = (attrName: string, attrDef: any) => {
+    const value = formData[attrName] ?? '';
+    const isRequired = isFieldRequired(attrDef);
+
+    const handleChange = (newValue: any) => {
+      setFormData((prev) => ({ ...prev, [attrName]: newValue }));
+    };
+
+    // Boolean field
+    if (attrDef.type === 'Boolean') {
+      return (
+        <input
+          type="checkbox"
+          checked={!!value}
+          onChange={(e) => handleChange(e.target.checked)}
+          className="h-4 w-4 rounded border-gray-300"
+        />
+      );
+    }
+
+    // Number field
+    if (attrDef.type === 'Integer' || attrDef.type === 'Float' || attrDef.type === 'Decimal') {
+      return (
+        <input
+          type="number"
+          value={value}
+          onChange={(e) => handleChange(e.target.value ? Number(e.target.value) : '')}
+          required={isRequired}
+          className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+        />
+      );
+    }
+
+    // Text field (default)
+    return (
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => handleChange(e.target.value)}
+        required={isRequired}
+        className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+      />
+    );
+  };
+
+  return (
+    <div className="flex gap-4 h-full">
+      {/* Form Panel */}
+      <div className="flex-1 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">
+          {formMode === 'create' ? \`Create \${modelName}\` : \`Edit \${modelName}\`}
+        </h2>
+
+        {/* Tabs for Edit/Evolve modes */}
+        {formMode === 'update' && Object.keys(lifecycles).length > 0 && (
+          <div className="flex gap-2 mb-4 border-b border-gray-200">
+            <button
+              onClick={() => setActiveTab('edit')}
+              className={\`px-4 py-2 font-medium \${activeTab === 'edit' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}\`}
+            >
+              Edit Data
+            </button>
+            <button
+              onClick={() => setActiveTab('evolve')}
+              className={\`px-4 py-2 font-medium \${activeTab === 'evolve' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}\`}
+            >
+              Lifecycle
+            </button>
+          </div>
+        )}
+
+        {activeTab === 'edit' ? (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {errors._form && (
+              <div className="p-3 bg-red-100 text-red-700 rounded-md">{errors._form}</div>
+            )}
+
+            {/* Attributes */}
+            {Object.entries(attributes).map(([attrName, attrDef]: [string, any]) => {
+              if (!shouldShowField(attrName, attrDef)) return null;
+
+              return (
+                <div key={attrName}>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    {attrName}
+                    {isFieldRequired(attrDef) && <span className="text-red-500">*</span>}
+                  </label>
+                  {renderFieldInput(attrName, attrDef)}
+                </div>
+              );
+            })}
+
+            {/* Relationships */}
+            {Object.entries(relationships).map(([relName, relDef]: [string, any]) => (
+              <RelationshipField
+                key={relName}
+                name={relName}
+                definition={relDef}
+                value={formData[relName]}
+                onChange={(value) => setFormData((prev) => ({ ...prev, [relName]: value }))}
+                entities={entitiesStore}
+              />
+            ))}
+
+            <div className="flex gap-2 pt-4">
+              <button
+                type="submit"
+                disabled={isPending}
+                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+              >
+                {isPending ? 'Saving...' : formMode === 'create' ? 'Create' : 'Update'}
+              </button>
+              {formMode === 'update' && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setFormMode('create');
+                    setSelectedEntity(null);
+                    setFormData(initializeFormData(schema.attributes, { includeAutoGenerated: false }));
+                  }}
+                  className="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600"
+                >
+                  Cancel
+                </button>
+              )}
+            </div>
+          </form>
+        ) : (
+          /* Lifecycle Tab */
+          <div className="space-y-4">
+            {errors._lifecycle && (
+              <div className="p-3 bg-red-100 text-red-700 rounded-md">{errors._lifecycle}</div>
+            )}
+
+            {Object.entries(lifecycles).map(([lifecycleName, lifecycle]: [string, any]) => {
+              const currentState = selectedLifecycleStates[lifecycleName] || lifecycle.initial;
+
+              return (
+                <div key={lifecycleName} className="border border-gray-200 rounded-lg p-4">
+                  <h3 className="font-semibold text-lg mb-2">{lifecycleName}</h3>
+                  <p className="text-sm text-gray-600 mb-3">Current: {currentState}</p>
+
+                  <div className="flex flex-wrap gap-2">
+                    {Object.keys(lifecycle.states || {}).map((state) => (
+                      <button
+                        key={state}
+                        onClick={() => handleLifecycleTransition(lifecycleName, state)}
+                        disabled={isTransitioning || state === currentState}
+                        className={\`px-3 py-1 rounded-md \${state === currentState ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'} disabled:opacity-50\`}
+                      >
+                        {state}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Entity List Panel */}
+      <div className="w-80 bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+        <h3 className="text-lg font-semibold mb-3 text-gray-800 dark:text-white">
+          {modelName} List
+        </h3>
+
+        {entitiesLoading ? (
+          <p className="text-gray-500">Loading...</p>
+        ) : entities.length === 0 ? (
+          <p className="text-gray-500 italic">No entities yet</p>
+        ) : (
+          <div className="space-y-2">
+            {entities.map((entity) => (
+              <div
+                key={entity.id}
+                onClick={() => handleEntitySelect(entity)}
+                className={\`p-3 rounded-md cursor-pointer \${selectedEntity?.id === entity.id ? 'bg-blue-100 border-blue-500' : 'bg-gray-50 hover:bg-gray-100'} border\`}
+              >
+                <p className="font-medium text-sm">{entity.id}</p>
+                {Object.entries(entity.data).slice(0, 2).map(([key, value]) => (
+                  <p key={key} className="text-xs text-gray-600">
+                    {key}: {String(value)}
+                  </p>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FormView;
+`;
+}
+
+function generateListView(): string {
+  return `/**
+ * StandardListView - Controller-Based List View Component
+ *
+ * LOCAL VERSION - Uses local hooks with instance-factory-specific API client
+ */
+
+import { useEntitiesQuery, useModelSchemaQuery } from '../../hooks/useApi';
+import type { View } from '../../types/api';
+
+interface StandardListViewProps {
+  view: View;
+  spec?: any;
+}
+
+export function ListView({ view, spec }: StandardListViewProps) {
+  let controllerName: string;
+  let modelName: string;
+
+  if (view.controller && spec) {
+    controllerName = view.controller;
+    const controller = spec.controllers[view.controller];
+    modelName = controller.model;
+  } else {
+    modelName = view.model as string;
+    controllerName = \`\${modelName}Controller\`;
+  }
+
+  const { data: entities = [], isLoading } = useEntitiesQuery(controllerName, modelName);
+  const { data: schema } = useModelSchemaQuery(modelName);
+
+  if (isLoading) {
+    return <div className="p-4">Loading...</div>;
+  }
+
+  return (
+    <div className="p-6">
+      <h2 className="text-2xl font-bold mb-4">{modelName} List</h2>
+      <div className="overflow-x-auto">
+        <table className="min-w-full bg-white border border-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-4 py-2 border-b">ID</th>
+              {schema && Object.keys(schema.attributes || {}).map((attr) => (
+                <th key={attr} className="px-4 py-2 border-b">{attr}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {entities.map((entity) => (
+              <tr key={entity.id} className="hover:bg-gray-50">
+                <td className="px-4 py-2 border-b">{entity.id}</td>
+                {schema && Object.keys(schema.attributes || {}).map((attr) => (
+                  <td key={attr} className="px-4 py-2 border-b">
+                    {String(entity.data[attr] ?? '')}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default ListView;
+`;
+}
+
+function generateDetailView(): string {
+  return `/**
+ * StandardDetailView - Controller-Based Detail View Component
+ *
+ * LOCAL VERSION - Uses local hooks with instance-factory-specific API client
+ */
+
+import { useEntitiesQuery, useModelSchemaQuery } from '../../hooks/useApi';
+import type { View } from '../../types/api';
+
+interface StandardDetailViewProps {
+  view: View;
+  spec?: any;
+}
+
+export function DetailView({ view, spec }: StandardDetailViewProps) {
+  let controllerName: string;
+  let modelName: string;
+
+  if (view.controller && spec) {
+    controllerName = view.controller;
+    const controller = spec.controllers[view.controller];
+    modelName = controller.model;
+  } else {
+    modelName = view.model as string;
+    controllerName = \`\${modelName}Controller\`;
+  }
+
+  const { data: entities = [] } = useEntitiesQuery(controllerName, modelName);
+  const { data: schema } = useModelSchemaQuery(modelName);
+  const entity = entities[0];
+
+  if (!entity) {
+    return <div className="p-4">No entity selected</div>;
+  }
+
+  return (
+    <div className="p-6">
+      <h2 className="text-2xl font-bold mb-4">{modelName} Detail</h2>
+      <div className="space-y-2">
+        <div>
+          <span className="font-semibold">ID:</span> {entity.id}
+        </div>
+        {schema && Object.entries(schema.attributes || {}).map(([attr, def]: [string, any]) => (
+          <div key={attr}>
+            <span className="font-semibold">{attr}:</span> {String(entity.data[attr] ?? '')}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DetailView;
+`;
+}
+
+function generateDashboardView(): string {
+  return `/**
+ * StandardDashboardView - Controller-Based Dashboard View Component
+ *
+ * LOCAL VERSION - Uses local hooks with instance-factory-specific API client
+ */
+
+import type { View } from '../../types/api';
+
+interface StandardDashboardViewProps {
+  view: View;
+  spec?: any;
+}
+
+export function DashboardView({ view, spec }: StandardDashboardViewProps) {
+  return (
+    <div className="p-6">
+      <h2 className="text-2xl font-bold mb-4">Dashboard</h2>
+      <div className="grid grid-cols-3 gap-4">
+        <div className="bg-white p-4 rounded-lg shadow">
+          <h3 className="text-lg font-semibold">Card 1</h3>
+          <p>Content here</p>
+        </div>
+        <div className="bg-white p-4 rounded-lg shadow">
+          <h3 className="text-lg font-semibold">Card 2</h3>
+          <p>Content here</p>
+        </div>
+        <div className="bg-white p-4 rounded-lg shadow">
+          <h3 className="text-lg font-semibold">Card 3</h3>
+          <p>Content here</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardView;
+`;
+}