@specverse/engines 4.1.28 → 4.2.0

package/dist/libs/instance-factories/applications/templates/react/relationship-field-generator.js

@@ -1,143 +0,0 @@
-async function generate(context) {
-  return `/**
- * RelationshipField - Handles belongsTo, hasMany, hasOne relationships
- *
- * Renders appropriate UI based on relationship type:
- * - belongsTo: Dropdown select with target entities
- * - hasMany: Count display (in view mode)
- * - hasOne: Entity display (in view mode)
- */
-
-import { useEntitiesQuery } from '../../hooks/useApi';
-import type { RelationshipDefinition } from '../../types/api';
-
-interface RelationshipFieldProps {
-  /**
-   * The attribute name (e.g., 'author')
-   */
-  name: string;
-
-  /**
-   * Relationship definition from schema
-   */
-  relationship: RelationshipDefinition;
-
-  /**
-   * Current value (entity ID for belongsTo, array for hasMany)
-   */
-  value: string | string[] | null;
-
-  /**
-   * Change handler
-   */
-  onChange: (value: string | string[] | null) => void;
-
-  /**
-   * Whether field is required
-   */
-  required?: boolean;
-
-  /**
-   * Whether in read-only mode
-   */
-  readOnly?: boolean;
-}
-
-/**
- * Get display name for an entity (prefers name, then title, then id)
- */
-function getEntityDisplayName(entity: any): string {
-  return entity.data?.name || entity.data?.title || entity.id;
-}
-
-export function RelationshipField({
-  name,
-  relationship,
-  value,
-  onChange,
-  required = false,
-  readOnly = false,
-}: RelationshipFieldProps) {
-  const relType = relationship.type;
-  const targetModel = relationship.model || relationship.targetModel || null;
-  const controllerName = targetModel ? \`\${targetModel}Controller\` : null;
-
-  // Fetch target entities
-  const { data: targetEntities = [], isLoading } = useEntitiesQuery(controllerName, targetModel);
-
-  // Handle belongsTo relationships
-  if (relType === 'belongsTo') {
-    return (
-      <div className="space-y-1">
-        <label htmlFor={name} className="block text-sm font-medium text-gray-300">
-          {name.charAt(0).toUpperCase() + name.slice(1)}
-          {required && <span className="text-red-400 ml-1">*</span>}
-        </label>
-        <select
-          id={name}
-          value={value as string || ''}
-          onChange={(e) => onChange(e.target.value || null)}
-          disabled={readOnly || isLoading}
-          required={required}
-          className="w-full px-3 py-2 bg-slate-700 border border-slate-600 text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
-        >
-          <option value="">-- Select {targetModel} --</option>
-          {targetEntities.map((entity) => (
-            <option key={entity.id} value={entity.id}>
-              {getEntityDisplayName(entity)}
-            </option>
-          ))}
-        </select>
-        {isLoading && (
-          <p className="text-sm text-gray-400">Loading {targetModel} options...</p>
-        )}
-      </div>
-    );
-  }
-
-  // Handle hasMany relationships (read-only display)
-  if (relType === 'hasMany') {
-    const count = Array.isArray(value) ? value.length : 0;
-    return (
-      <div className="space-y-1">
-        <label className="block text-sm font-medium text-gray-300">
-          {name.charAt(0).toUpperCase() + name.slice(1)}
-        </label>
-        <div className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-gray-300">
-          {count} {targetModel}(s)
-        </div>
-      </div>
-    );
-  }
-
-  // Handle hasOne relationships (read-only display)
-  if (relType === 'hasOne') {
-    return (
-      <div className="space-y-1">
-        <label className="block text-sm font-medium text-gray-300">
-          {name.charAt(0).toUpperCase() + name.slice(1)}
-        </label>
-        <div className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-gray-300">
-          {value ? \`\${targetModel} #\${value}\` : 'None'}
-        </div>
-      </div>
-    );
-  }
-
-  // Fallback for unknown relationship types
-  return (
-    <div className="space-y-1">
-      <label className="block text-sm font-medium text-gray-300">
-        {name.charAt(0).toUpperCase() + name.slice(1)}
-      </label>
-      <div className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-gray-400 italic">
-        Unsupported relationship type: {relType}
-      </div>
-    </div>
-  );
-}
-`;
-}
-export {
-  generate
-};