cogsbox-state 0.5.471 → 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[];
@@ -222,16 +229,32 @@ export function FormElementWrapper({
   formOpts?: FormOptsType;
   setState: any;
 }) {
-  const [componentId] = useState(() => uuidv4());
-  const [, forceUpdate] = useState({});
+  const componentId = useRef(uuidv4()).current;
 
+  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 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 &&
@@ -242,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) => {
@@ -249,208 +308,192 @@ export function FormElementWrapper({
           forceUpdate({});
         }
       });
+
+    // Cleanup
     return () => {
       unsubscribe();
+
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current);
         isCurrentlyDebouncing.current = false;
       }
+
+      // Remove element from Map
+      const meta = getGlobalStore.getState().getShadowMetadata(stateKey, path);
+      if (meta?.clientActivityState?.elements) {
+        meta.clientActivityState.elements.delete(componentId);
+        setShadowMetadata(stateKey, path, meta);
+      }
     };
   }, []);
 
   const debouncedUpdate = useCallback(
     (newValue: any) => {
-      const currentType = typeof globalStateValue;
-      if (currentType === 'number' && typeof newValue === 'string') {
-        newValue = newValue === '' ? 0 : Number(newValue);
+      // Type conversion logic (keep existing)
+      if (typeInfo) {
+        if (typeInfo.type === 'number' && typeof newValue === 'string') {
+          newValue =
+            newValue === ''
+              ? typeInfo.nullable
+                ? null
+                : (typeInfo.default ?? 0)
+              : Number(newValue);
+        } else if (
+          typeInfo.type === 'boolean' &&
+          typeof newValue === 'string'
+        ) {
+          newValue = newValue === 'true' || newValue === '1';
+        } else if (typeInfo.type === 'date' && typeof newValue === 'string') {
+          newValue = new Date(newValue);
+        }
+      } else {
+        const currentType = typeof globalStateValue;
+        if (currentType === 'number' && typeof newValue === 'string') {
+          newValue = newValue === '' ? 0 : Number(newValue);
+        }
       }
+
       setLocalValue(newValue);
-      isCurrentlyDebouncing.current = true;
 
+      // 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;
-
       debounceTimeoutRef.current = setTimeout(() => {
         isCurrentlyDebouncing.current = false;
-        setState(newValue, path, { updateType: 'update' });
-
-        // NEW: Check if validation is enabled via features
-        const rootMeta = getGlobalStore
-          .getState()
-          .getShadowMetadata(stateKey, []);
-        if (!rootMeta?.features?.validationEnabled) return;
-
-        const validationOptions = getInitialOptions(stateKey)?.validation;
-        const zodSchema =
-          validationOptions?.zodSchemaV4 || validationOptions?.zodSchemaV3;
-
-        if (zodSchema) {
-          const fullState = getShadowValue(stateKey, []);
-          const result = zodSchema.safeParse(fullState);
-          const currentMeta = getShadowMetadata(stateKey, path) || {};
-
-          if (!result.success) {
-            const errors =
-              'issues' in result.error
-                ? result.error.issues
-                : (result.error as any).errors;
-
-            const pathErrors = errors.filter(
-              (error: any) =>
-                JSON.stringify(error.path) === JSON.stringify(path)
-            );
-
-            if (pathErrors.length > 0) {
-              setShadowMetadata(stateKey, path, {
-                ...currentMeta,
-                validation: {
-                  status: 'INVALID',
-                  errors: [
-                    {
-                      source: 'client',
-                      message: pathErrors[0]?.message,
-                      severity: 'warning', // Gentle error during typing
-                    },
-                  ],
-                  lastValidated: Date.now(),
-                  validatedValue: newValue,
-                },
-              });
-            } else {
-              setShadowMetadata(stateKey, path, {
-                ...currentMeta,
-                validation: {
-                  status: 'VALID',
-                  errors: [],
-                  lastValidated: Date.now(),
-                  validatedValue: newValue,
-                },
-              });
-            }
-          } else {
-            setShadowMetadata(stateKey, path, {
-              ...currentMeta,
-              validation: {
-                status: 'VALID',
-                errors: [],
-                lastValidated: Date.now(),
-                validatedValue: newValue,
-              },
-            });
-          }
-        }
+        setState(newValue, path, {
+          updateType: 'update',
+          validationTrigger: 'onChange',
+        });
       }, debounceTime);
-      forceUpdate({});
     },
-    [setState, path, formOpts?.debounceTime, stateKey]
+    [
+      setState,
+      path,
+      formOpts?.debounceTime,
+      typeInfo,
+      globalStateValue,
+      stateKey,
+      componentId,
+    ]
   );
 
-  const handleBlur = useCallback(async () => {
-    console.log('handleBlur triggered');
+  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(() => {
+    const { getShadowMetadata, setShadowMetadata } = getGlobalStore.getState();
 
-    // Commit any pending changes
+    // 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',
+      });
     }
-    const rootMeta = getShadowMetadata(stateKey, []);
-    if (!rootMeta?.features?.validationEnabled) return;
-    const { getInitialOptions } = getGlobalStore.getState();
-    const validationOptions = getInitialOptions(stateKey)?.validation;
-    const zodSchema =
-      validationOptions?.zodSchemaV4 || validationOptions?.zodSchemaV3;
-
-    if (!zodSchema) return;
 
-    // Get the full path including stateKey
-
-    // Update validation state to "validating"
-    const currentMeta = getShadowMetadata(stateKey, path);
+    // 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);
+    }
 
-    setShadowMetadata(stateKey, path, {
-      ...currentMeta,
-      validation: {
-        status: 'VALIDATING',
-        errors: [],
-        lastValidated: Date.now(),
-        validatedValue: localValue,
-      },
+    // Notify plugins
+    notifyFormUpdate({
+      stateKey,
+      type: 'blur',
+      path,
+      value: localValue,
     });
 
-    // Validate full state
-    const fullState = getShadowValue(stateKey, []);
-    const result = zodSchema.safeParse(fullState);
-
-    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) => {
-        // For array paths, we need to translate indices to ULIDs
-        if (path.some((p) => p.startsWith('id:'))) {
-          // This is an array item path like ["id:xyz", "name"]
-          const parentPath = path[0]!.startsWith('id:')
-            ? []
-            : path.slice(0, -1);
-
-          const arrayMeta = getGlobalStore
-            .getState()
-            .getShadowMetadata(stateKey, parentPath);
-
-          if (arrayMeta?.arrayKeys) {
-            const itemKey = [stateKey, ...path.slice(0, -1)].join('.');
-            const itemIndex = arrayMeta.arrayKeys.indexOf(itemKey);
-
-            // Compare with Zod path
-            const zodPath = [...parentPath, itemIndex, ...path.slice(-1)];
-            const match =
-              JSON.stringify(error.path) === JSON.stringify(zodPath);
-
-            return match;
-          }
-        }
-
-        const directMatch = JSON.stringify(error.path) === JSON.stringify(path);
-
-        return directMatch;
-      });
-
-      // Update shadow metadata with validation result
-      setShadowMetadata(stateKey, path, {
-        ...currentMeta,
-        validation: {
-          status: 'INVALID',
-          errors: pathErrors.map((err: any) => ({
-            source: 'client' as const,
-            message: err.message,
-            severity: 'error' as const, // Hard error on blur
-          })),
-          lastValidated: Date.now(),
-          validatedValue: localValue,
-        },
-      });
-    } else {
-      // Validation passed
-      setShadowMetadata(stateKey, path, {
-        ...currentMeta,
-        validation: {
-          status: 'VALID',
-          errors: [],
-          lastValidated: Date.now(),
-          validatedValue: 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');
     }
-    forceUpdate({});
-  }, [stateKey, path, localValue, setState]);
+  }, [localValue, setState, path, stateKey, componentId, globalStateValue]);
 
   const baseState = rebuildStateShape({
     path: path,
@@ -466,11 +509,9 @@ export function FormElementWrapper({
           onChange: (e: any) => {
             debouncedUpdate(e.target.value);
           },
-          // 5. Wire the new onBlur handler to the input props.
+          onFocus: handleFocus,
           onBlur: handleBlur,
-          ref: formRefStore
-            .getState()
-            .getFormRef(stateKey + '.' + path.join('.')),
+          ref: formElementRef,
         };
       }
 
@@ -478,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>
   );
 }
@@ -591,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,
+  });
+});