@k3-universe/react-kit 0.0.3 → 0.0.5

package/src/kit/builder/form/components/FormBuilder.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo } from 'react';
-import { useForm } from 'react-hook-form';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useForm, useWatch, type Control, type FieldValues } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { cn } from '../../../../shadcn/lib/utils';
@@ -66,6 +66,26 @@ export interface FormBuilderFieldConfig {
   gridCols?: number;
   rows?: number; // For textarea fields
   itemType?: string; // For array fields
+  // Array field layout: default 'card'
+  arrayLayout?: 'card' | 'table' | 'custom';
+  // Custom renderer for array fields when arrayLayout === 'custom'
+  arrayRender?: (params: {
+    field: FormBuilderFieldConfig;
+    control: Control<FieldValues>;
+    fieldPath: string;
+    value: any;
+    onChange: (value: any) => void;
+    addItem: () => void;
+    removeItem: (index: number) => void;
+    disabled?: boolean;
+    rows?: { id: string }[]; // useFieldArray rows for stable rendering
+  }) => React.ReactNode;
+  // Optional styling for array layouts (used mainly for 'table')
+  arrayColors?: {
+    headerBgClass?: string; // e.g. 'bg-teal-700'
+    headerTextClass?: string; // e.g. 'text-white'
+    rowAltBgClass?: string; // e.g. 'bg-teal-50'
+  };
   conditional?: {
     field: string;
     value: any;
@@ -317,21 +337,36 @@ export function FormBuilder({
     defaultValues: generatedDefaultValues,
   });
 
-  const { control, handleSubmit, reset, setValue, getValues, watch } = form;
+  const { control, handleSubmit, reset, setValue, getValues } = form;
 
-  // Determine if any field dependencies are declared
-  const hasDependencies = useMemo(() => {
-    return sections.some((section) =>
-      section.fields?.some((f) => Array.isArray(f.dependencies) && f.dependencies.length > 0),
-    );
+  // Determine dependency fields to watch
+  const dependencyFields = useMemo(() => {
+    const set = new Set<string>();
+    sections.forEach((section) => {
+      section.fields?.forEach((f) => {
+        f.dependencies?.forEach((d) => set.add(d.field));
+      });
+    });
+    return Array.from(set);
   }, [sections]);
 
-  // Only watch values when there are dependencies to respond to
-  // This prevents unnecessary re-renders that can cause focus loss
-  const emptyWatchedValues = useMemo(() => ({} as Record<string, any>), []);
-  const watchedValues = hasDependencies ? watch() : emptyWatchedValues;
+  const hasDependencies = dependencyFields.length > 0;
+
+  // Watch only dependency fields via useWatch; create a stable object map
+  // Always call useWatch to satisfy hooks rules. Passing an empty array is safe and returns an empty array.
+  const depValuesArr = useWatch({ control, name: dependencyFields });
+  const watchedValues = useMemo(() => {
+    if (!hasDependencies) return {} as Record<string, any>;
+    const obj: Record<string, any> = {};
+    dependencyFields.forEach((n, i) => { obj[n] = (depValuesArr as any[])[i]; });
+    return obj;
+    // dependencyFields is stable from sections; depValuesArr changes only when values change
+  }, [hasDependencies, dependencyFields, depValuesArr]);
 
   // Handle field dependencies
+  // Queue dependency-driven value updates to avoid calling setValue during render
+  const pendingValueUpdatesRef = useRef<Array<{ name: string; value: any }>>([]);
+
   const handleFieldDependencies = useCallback(
     (field: FormBuilderFieldConfig) => {
       if (!hasDependencies || !field.dependencies) return {};
@@ -339,7 +374,7 @@ export function FormBuilder({
       const result: { disabled?: boolean; hidden?: boolean } = {};
 
       field.dependencies.forEach((dep) => {
-        const dependentValue = (watchedValues as Record<string, any>)[dep.field];
+        const dependentValue = watchedValues[dep.field];
         const conditionMet = dep.condition(dependentValue);
 
         switch (dep.action) {
@@ -358,9 +393,9 @@ export function FormBuilder({
           case 'setValue':
             if (conditionMet && dep.value !== undefined) {
               const currentValue = getValues(field.name);
-              // Only setValue if the value is actually different to prevent infinite loops
               if (currentValue !== dep.value) {
-                setValue(field.name, dep.value);
+                // Defer the update to an effect to prevent state changes during render
+                pendingValueUpdatesRef.current.push({ name: field.name, value: dep.value });
               }
             }
             break;
@@ -369,9 +404,24 @@ export function FormBuilder({
 
       return result;
     },
-    [hasDependencies, watchedValues, setValue, getValues],
+    [hasDependencies, watchedValues, getValues],
   );
 
+  // Flush any pending setValue updates after watchedValues change
+  useEffect(() => {
+    if (pendingValueUpdatesRef.current.length === 0) return;
+    const updatesMap = new Map<string, any>();
+    // last write wins per field
+    pendingValueUpdatesRef.current.forEach(({ name, value }) => updatesMap.set(name, value));
+    pendingValueUpdatesRef.current = [];
+    updatesMap.forEach((value, name) => {
+      const current = getValues(name);
+      if (current !== value) {
+        setValue(name, value, { shouldDirty: false, shouldTouch: false, shouldValidate: false });
+      }
+    });
+  }, [watchedValues, setValue, getValues]);
+
   // Handle field change with custom onChange
   const handleFieldChange = useCallback(
     (field: FormBuilderFieldConfig, value: any) => {