cogsbox-state 0.5.472 → 0.5.473

package/src/Components.tsx

@@ -1,4 +1,11 @@
-import { FormElementParams, type FormOptsType } from './CogsState';
+import {
+  FormElementParams,
+  StateObject,
+  UpdateTypeDetail,
+  type FormOptsType,
+} from './CogsState';
+import { pluginStore } from './pluginStore';
+import { createMetadataContext, toDeconstructedMethods } from './plugins';
 import React, {
   memo,
   RefObject,
@@ -7,16 +14,14 @@ import React, {
   useLayoutEffect,
   useRef,
   useState,
+  useMemo,
 } from 'react';
-import {
-  formRefStore,
-  getGlobalStore,
-  ValidationError,
-  ValidationSeverity,
-} from './store';
+import { getGlobalStore, ValidationError, ValidationSeverity } from './store';
 import { useInView } from 'react-intersection-observer';
 import { v4 as uuidv4 } from 'uuid';
 import { isDeepEqual } from './utility';
+import { runValidation } from './validation';
+
 const {
   getInitialOptions,
 
@@ -30,6 +35,8 @@ const {
   notifyPathSubscribers,
   subscribeToPath,
 } = getGlobalStore.getState();
+const { stateHandlers, notifyFormUpdate } = pluginStore.getState();
+
 export type ValidationWrapperProps = {
   formOpts?: FormOptsType;
   path: string[];
@@ -223,21 +230,31 @@ export function FormElementWrapper({
   setState: any;
 }) {
   const componentId = useRef(uuidv4()).current;
-  const [, forceUpdate] = useState({});
 
+  const [, forceUpdate] = useState({});
+  const formElementRef = useRef<any>(null);
   const stateKeyPathKey = [stateKey, ...path].join('.');
   useRegisterComponent(stateKey, componentId, forceUpdate);
-
   // Get the shadow node to access typeInfo and schema
   const shadowNode = getGlobalStore.getState().getShadowNode(stateKey, path);
   const typeInfo = shadowNode?._meta?.typeInfo;
-  const fieldSchema = typeInfo?.schema; // The actual Zod schema for this field
 
   const globalStateValue = getShadowValue(stateKey, path);
   const [localValue, setLocalValue] = useState<any>(globalStateValue);
   const isCurrentlyDebouncing = useRef(false);
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  // 2. Memoize the list of active form wrappers to avoid re-calculating on every render.
+  const activeFormWrappers = useMemo(() => {
+    return (
+      pluginStore
+        .getState()
+        .getPluginConfigsForState(stateKey)
+        // We only care about plugins that have defined a formWrapper
+        .filter((config) => typeof config.plugin.formWrapper === 'function')
+    );
+  }, [stateKey]);
+
   useEffect(() => {
     if (
       !isCurrentlyDebouncing.current &&
@@ -248,6 +265,42 @@ export function FormElementWrapper({
   }, [globalStateValue]);
 
   useEffect(() => {
+    const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();
+
+    // Initialize clientActivityState if needed
+    const currentMeta = getShadowMetadata(stateKey, path) || {};
+    if (!currentMeta.clientActivityState) {
+      currentMeta.clientActivityState = { elements: new Map() };
+    }
+
+    // Detect element type from the ref
+    const detectElementType = () => {
+      const el = formElementRef.current;
+      if (!el) return 'input';
+      const tagName = el.tagName.toLowerCase();
+      if (tagName === 'textarea') return 'textarea';
+      if (tagName === 'select') return 'select';
+      if (tagName === 'input') {
+        const type = (el as HTMLInputElement).type;
+        if (type === 'checkbox') return 'checkbox';
+        if (type === 'radio') return 'radio';
+        if (type === 'range') return 'range';
+        if (type === 'file') return 'file';
+      }
+      return 'input';
+    };
+
+    // Add this element to the Map
+    currentMeta.clientActivityState.elements.set(componentId, {
+      domRef: formElementRef,
+      elementType: detectElementType(),
+      inputType: formElementRef.current?.type,
+      mountedAt: Date.now(),
+    });
+
+    setShadowMetadata(stateKey, path, currentMeta);
+
+    // Subscribe to path updates
     const unsubscribe = getGlobalStore
       .getState()
       .subscribeToPath(stateKeyPathKey, (newValue) => {
@@ -255,182 +308,28 @@ export function FormElementWrapper({
           forceUpdate({});
         }
       });
+
+    // Cleanup
     return () => {
       unsubscribe();
+
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current);
         isCurrentlyDebouncing.current = false;
       }
-    };
-  }, []);
 
-  // Separate validation function that uses the field's schema
-  const validateField = useCallback(
-    (value: any, trigger: 'onChange' | 'onBlur') => {
-      const rootMeta = getGlobalStore
-        .getState()
-        .getShadowMetadata(stateKey, []);
-      if (!rootMeta?.features?.validationEnabled) return;
-
-      const validationOptions = getInitialOptions(stateKey)?.validation;
-
-      if (!validationOptions) return;
-
-      const currentMeta = getShadowMetadata(stateKey, path) || {};
-      const currentStatus = currentMeta?.validation?.status;
-
-      let shouldValidate = false;
-      let severity: 'error' | 'warning' | undefined;
-      console.log('trigger', trigger, validationOptions);
-      if (trigger === 'onBlur' && validationOptions.onBlur) {
-        shouldValidate = true;
-        severity = validationOptions.onBlur ?? 'error';
-      } else if (trigger === 'onChange') {
-        if (validationOptions.onChange) {
-          shouldValidate = true;
-          severity = validationOptions.onChange;
-        } else if (currentStatus === 'INVALID') {
-          shouldValidate = true;
-          severity = 'warning';
-        }
-      }
-
-      if (!shouldValidate) return;
-
-      let validationResult: { success: boolean; message?: string } | null =
-        null;
-      console.log(
-        'shouldValidate 33',
-        path,
-        fieldSchema,
-        shouldValidate,
-        value,
-        typeof value
-      );
-      if (fieldSchema && shouldValidate) {
-        // Direct field validation using its own schema
-        const result = fieldSchema.safeParse(value);
-
-        if (!result.success) {
-          const errors =
-            'issues' in result.error
-              ? result.error.issues
-              : (result.error as any).errors;
-
-          validationResult = {
-            success: false,
-            message: errors[0]?.message || 'Invalid value',
-          };
-        } else {
-          validationResult = { success: true };
-        }
-      } else {
-        // Fallback: validate using the entire schema
-        const zodSchema =
-          validationOptions.zodSchemaV4 || validationOptions.zodSchemaV3;
-        if (!zodSchema) return;
-
-        // Create a test state with the new value at the correct path
-        const fullState = getShadowValue(stateKey, []);
-        const testState = JSON.parse(JSON.stringify(fullState)); // Deep clone
-
-        // Set the value at the correct path
-        let current = testState;
-        for (let i = 0; i < path.length - 1; i++) {
-          if (!current[path[i]!]) current[path[i]!] = {};
-          current = current[path[i]!];
-        }
-        if (path.length > 0) {
-          current[path[path.length - 1]!] = value;
-        } else {
-          // Root level update
-          Object.assign(testState, value);
-        }
-
-        const result = zodSchema.safeParse(testState);
-
-        if (!result.success) {
-          const errors =
-            'issues' in result.error
-              ? result.error.issues
-              : (result.error as any).errors;
-
-          // Find errors for this specific path
-          const pathErrors = errors.filter((error: any) => {
-            // Handle array paths with id: prefixes
-            if (path.some((p) => p.startsWith('id:'))) {
-              const parentPath = path[0]!.startsWith('id:')
-                ? []
-                : path.slice(0, -1);
-              const arrayMeta = getGlobalStore
-                .getState()
-                .getShadowMetadata(stateKey, parentPath);
-
-              if (arrayMeta?.arrayKeys) {
-                const itemKey = path.slice(0, -1).join('.');
-                const itemIndex = arrayMeta.arrayKeys.findIndex(
-                  (k) => k === path[path.length - 2]
-                );
-                const zodPath = [...parentPath, itemIndex, ...path.slice(-1)];
-                return JSON.stringify(error.path) === JSON.stringify(zodPath);
-              }
-            }
-
-            return JSON.stringify(error.path) === JSON.stringify(path);
-          });
-
-          if (pathErrors.length > 0) {
-            validationResult = {
-              success: false,
-              message: pathErrors[0]?.message,
-            };
-          } else {
-            validationResult = { success: true };
-          }
-        } else {
-          validationResult = { success: true };
-        }
+      // Remove element from Map
+      const meta = getGlobalStore.getState().getShadowMetadata(stateKey, path);
+      if (meta?.clientActivityState?.elements) {
+        meta.clientActivityState.elements.delete(componentId);
+        setShadowMetadata(stateKey, path, meta);
       }
-
-      // Update validation state based on result
-      if (validationResult) {
-        if (!validationResult.success) {
-          setShadowMetadata(stateKey, path, {
-            ...currentMeta,
-            validation: {
-              status: 'INVALID',
-              errors: [
-                {
-                  source: 'client' as const,
-                  message: validationResult.message!,
-                  severity: severity!,
-                },
-              ],
-              lastValidated: Date.now(),
-              validatedValue: value,
-            },
-          });
-        } else {
-          setShadowMetadata(stateKey, path, {
-            ...currentMeta,
-            validation: {
-              status: 'VALID',
-              errors: [],
-              lastValidated: Date.now(),
-              validatedValue: value,
-            },
-          });
-        }
-      }
-      forceUpdate({});
-    },
-    [stateKey, path, fieldSchema]
-  );
+    };
+  }, []);
 
   const debouncedUpdate = useCallback(
     (newValue: any) => {
-      // Use typeInfo to properly convert the value
-
+      // Type conversion logic (keep existing)
       if (typeInfo) {
         if (typeInfo.type === 'number' && typeof newValue === 'string') {
           newValue =
@@ -448,10 +347,7 @@ export function FormElementWrapper({
           newValue = new Date(newValue);
         }
       } else {
-        // Fallback to old behavior if no typeInfo
-
         const currentType = typeof globalStateValue;
-
         if (currentType === 'number' && typeof newValue === 'string') {
           newValue = newValue === '' ? 0 : Number(newValue);
         }
@@ -459,45 +355,145 @@ export function FormElementWrapper({
 
       setLocalValue(newValue);
 
-      // Validate immediately on change (will only run if configured or clearing errors)
-      validateField(newValue, 'onChange');
+      // Update input activity details
+      const { getShadowMetadata, setShadowMetadata } =
+        getGlobalStore.getState();
+      const meta = getShadowMetadata(stateKey, path);
+      if (meta?.clientActivityState?.elements?.has(componentId)) {
+        const element = meta.clientActivityState.elements.get(componentId);
+        if (element && element.currentActivity?.type === 'focus') {
+          element!.currentActivity.details = {
+            ...element!.currentActivity.details,
+            value: newValue,
+            previousValue:
+              element!.currentActivity.details?.value || globalStateValue,
+            inputLength:
+              typeof newValue === 'string' ? newValue.length : undefined,
+            keystrokeCount:
+              (element!.currentActivity.details?.keystrokeCount || 0) + 1,
+          };
+          setShadowMetadata(stateKey, path, meta);
+        }
+      }
+
+      // Notify plugins
+      notifyFormUpdate({
+        stateKey,
+        type: 'input',
+        path,
+        value: newValue,
+      });
 
+      // Validation (keep existing)
+      const virtualOperation: UpdateTypeDetail = {
+        stateKey,
+        path,
+        newValue: newValue,
+        updateType: 'update',
+        timeStamp: Date.now(),
+        status: 'new',
+        oldValue: globalStateValue,
+      };
+      runValidation(virtualOperation, 'onChange');
+
+      // Debounce state update (keep existing)
       isCurrentlyDebouncing.current = true;
-
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current);
       }
 
       const debounceTime = formOpts?.debounceTime ?? 200;
-
-      // Debounce only the state update, not the validation
       debounceTimeoutRef.current = setTimeout(() => {
         isCurrentlyDebouncing.current = false;
-        setState(newValue, path, { updateType: 'update' });
+        setState(newValue, path, {
+          updateType: 'update',
+          validationTrigger: 'onChange',
+        });
       }, debounceTime);
     },
     [
       setState,
       path,
       formOpts?.debounceTime,
-      validateField,
       typeInfo,
       globalStateValue,
+      stateKey,
+      componentId,
     ]
   );
 
+  const handleFocus = useCallback(() => {
+    const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();
+
+    // Update element's current activity
+    const meta = getShadowMetadata(stateKey, path);
+    if (meta?.clientActivityState?.elements?.has(componentId)) {
+      const element = meta.clientActivityState.elements.get(componentId)!;
+      element.currentActivity = {
+        type: 'focus',
+        startTime: Date.now(),
+        details: {
+          value: localValue,
+          inputLength:
+            typeof localValue === 'string' ? localValue.length : undefined,
+        },
+      };
+      setShadowMetadata(stateKey, path, meta);
+    }
+
+    // Notify plugins
+    notifyFormUpdate({
+      stateKey,
+      type: 'focus',
+      path,
+      value: localValue,
+    });
+  }, [stateKey, path, componentId, localValue]);
   const handleBlur = useCallback(() => {
-    // Commit any pending changes immediately
+    const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();
+
+    // Clear debounce if active
     if (debounceTimeoutRef.current) {
       clearTimeout(debounceTimeoutRef.current);
       debounceTimeoutRef.current = null;
       isCurrentlyDebouncing.current = false;
-      setState(localValue, path, { updateType: 'update' });
+      setState(localValue, path, {
+        updateType: 'update',
+        validationTrigger: 'onBlur',
+      });
+    }
+
+    // Clear element's current activity
+    const meta = getShadowMetadata(stateKey, path);
+    if (meta?.clientActivityState?.elements?.has(componentId)) {
+      const element = meta.clientActivityState.elements.get(componentId)!;
+      element.currentActivity = undefined;
+      setShadowMetadata(stateKey, path, meta);
     }
 
-    // Validate on blur
-    validateField(localValue, 'onBlur');
-  }, [localValue, setState, path, validateField]);
+    // Notify plugins
+    notifyFormUpdate({
+      stateKey,
+      type: 'blur',
+      path,
+      value: localValue,
+    });
+
+    // Run validation if configured
+    const validationOptions = getInitialOptions(stateKey)?.validation;
+    if (validationOptions?.onBlur) {
+      const virtualOperation: UpdateTypeDetail = {
+        stateKey,
+        path,
+        newValue: localValue,
+        updateType: 'update',
+        timeStamp: Date.now(),
+        status: 'new',
+        oldValue: globalStateValue,
+      };
+      runValidation(virtualOperation, 'onBlur');
+    }
+  }, [localValue, setState, path, stateKey, componentId, globalStateValue]);
 
   const baseState = rebuildStateShape({
     path: path,
@@ -513,10 +509,9 @@ export function FormElementWrapper({
           onChange: (e: any) => {
             debouncedUpdate(e.target.value);
           },
+          onFocus: handleFocus,
           onBlur: handleBlur,
-          ref: formRefStore
-            .getState()
-            .getFormRef(stateKey + '.' + path.join('.')),
+          ref: formElementRef,
         };
       }
 
@@ -524,9 +519,25 @@ export function FormElementWrapper({
     },
   });
 
+  const initialElement = renderFn(stateWithInputProps);
+
+  const wrappedElement = activeFormWrappers.reduceRight(
+    (currentElement, config, index) => (
+      <PluginWrapper
+        stateKey={stateKey}
+        path={path}
+        pluginName={config.plugin.name}
+        wrapperDepth={activeFormWrappers.length - 1 - index}
+      >
+        {currentElement}
+      </PluginWrapper>
+    ),
+    initialElement
+  );
+
   return (
     <ValidationWrapper formOpts={formOpts} path={path} stateKey={stateKey}>
-      {renderFn(stateWithInputProps)}
+      {wrappedElement}
     </ValidationWrapper>
   );
 }
@@ -637,3 +648,70 @@ export function IsolatedComponentWrapper({
 
   return <>{renderFn(baseState)}</>;
 }
+
+// 1. Define the MINIMAL props needed.
+type PluginWrapperProps = {
+  children: React.ReactNode;
+  stateKey: string;
+  path: string[];
+  pluginName: string;
+  wrapperDepth: number;
+};
+
+const PluginWrapper = memo(function PluginWrapper({
+  children,
+  stateKey,
+  path,
+  pluginName,
+  wrapperDepth,
+}: PluginWrapperProps) {
+  const [, forceUpdate] = useState({});
+
+  useEffect(() => {
+    const fullPathKey = [stateKey, ...path].join('.');
+    const unsubscribe = getGlobalStore
+      .getState()
+      .subscribeToPath(fullPathKey, () => {
+        forceUpdate({});
+      });
+    return unsubscribe;
+  }, [stateKey, path]);
+
+  const plugin = pluginStore
+    .getState()
+    .registeredPlugins.find((p) => p.name === pluginName);
+
+  const stateHandler: StateObject<any> | undefined = pluginStore
+    .getState()
+    .stateHandlers.get(stateKey);
+
+  const typeInfo = getGlobalStore.getState().getShadowNode(stateKey, path)
+    ?._meta?.typeInfo;
+
+  const options = pluginStore
+    .getState()
+    .pluginOptions.get(stateKey)
+    ?.get(pluginName);
+
+  const hookData = pluginStore.getState().getHookResult(stateKey, pluginName);
+
+  if (!plugin?.formWrapper || !stateHandler) {
+    return <>{children}</>;
+  }
+
+  const metadataContext = createMetadataContext(stateKey, plugin.name);
+  const deconstructed = toDeconstructedMethods(stateHandler);
+
+  return plugin.formWrapper({
+    element: children,
+    path,
+    stateKey,
+    pluginName: plugin.name,
+    ...deconstructed,
+    ...metadataContext,
+    options,
+    hookData,
+    fieldType: typeInfo?.type,
+    wrapperDepth,
+  });
+});