@jmruthers/pace-core 0.6.8 → 0.6.10

package/src/components/Form/Form.tsx

@@ -81,6 +81,7 @@ import { cn } from '../../utils/core/cn';
 import { useSessionDraft } from '../../hooks/useSessionDraft';
 import { deriveFormKey } from '../../utils/persistence/keyDerivation';
 import { filterSensitiveFields, isSensitiveField } from '../../utils/persistence/sensitiveFieldDetection';
+import { createLogger } from '../../utils/core/logger';
 
 /**
  * Props for the Form component
@@ -153,6 +154,8 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
   children,
   className,
 }: FormProps<TFieldValues>) {
+  const logger = createLogger('Form');
+  
   // Call all hooks unconditionally at the top level
   // Hooks must be called in the same order on every render
   // If providers are missing, these hooks will throw - errors should be handled by error boundaries
@@ -190,11 +193,11 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
     
     // Try to extract types from schema
     if (schema && 'shape' in schema && typeof schema.shape === 'object') {
-      const shape = schema.shape as Record<string, any>;
+      const shape = schema.shape as Record<string, z.ZodTypeAny>;
       for (const [key, value] of Object.entries(shape)) {
         // Zod schema type detection (simplified)
         if (value && typeof value === 'object' && '_def' in value) {
-          const def = (value as any)._def;
+          const def = value._def;
           if (def.typeName === 'ZodString') {
             types[key] = 'text';
           } else if (def.typeName === 'ZodNumber') {
@@ -284,28 +287,28 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
     restoreTimeoutRef.current = setTimeout(() => {
       // CRITICAL: Handle both numeric keys (from old array-based persistence) and field names
       // If persistedValues has numeric keys, map them to fieldNames
-      const persistedKeys = Object.keys(persistedValues as Record<string, any>);
+      const persistedKeys = Object.keys(persistedValues as Record<string, unknown>);
       const hasNumericKeys = persistedKeys.length > 0 && persistedKeys.every(key => /^\d+$/.test(key));
       
-      let valuesToRestore: Record<string, any>;
+      let valuesToRestore: Partial<TFieldValues>;
       if (hasNumericKeys && fieldNames.length === persistedKeys.length) {
         // Map numeric keys to field names
-        valuesToRestore = {};
+        valuesToRestore = {} as Partial<TFieldValues>;
         for (let i = 0; i < fieldNames.length; i++) {
           const fieldName = fieldNames[i];
           const numericKey = String(i);
           if (numericKey in persistedValues) {
-            valuesToRestore[fieldName] = (persistedValues as Record<string, any>)[numericKey];
+            (valuesToRestore as Record<string, unknown>)[fieldName] = (persistedValues as Record<string, unknown>)[numericKey];
           }
         }
-        console.log('[Form Persistence] Mapped numeric keys to field names:', {
+        logger.debug('[Form Persistence] Mapped numeric keys to field names:', {
           numericKeys: persistedKeys,
           fieldNames,
           mappedValues: valuesToRestore,
         });
       } else {
         // Use persistedValues as-is (should have field names as keys)
-        valuesToRestore = persistedValues as Record<string, any>;
+        valuesToRestore = persistedValues as Partial<TFieldValues>;
       }
 
       // Filter sensitive fields
@@ -322,7 +325,7 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
         return isSensitiveField(name, type);
       });
 
-      console.log('[Form Persistence] ✅ Restoring persisted values:', {
+      logger.debug('[Form Persistence] ✅ Restoring persisted values:', {
         persistenceKey,
         persistedValuesKeys: persistedKeys,
         persistedValuesString: JSON.stringify(persistedValues),
@@ -341,16 +344,16 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
       let hasValuesToSet = false;
 
       for (const [key, value] of Object.entries(filteredPersisted)) {
-        const currentValue = methods.getValues(key as any);
+        const currentValue = methods.getValues(key as FieldPath<TFieldValues>);
         // Only set if different from current value (to avoid unnecessary updates)
         if (currentValue !== value) {
-          valuesToSet[key as keyof TFieldValues] = value as any;
+          (valuesToSet as Record<string, unknown>)[key] = value;
           hasValuesToSet = true;
         }
       }
 
       if (hasValuesToSet) {
-        console.log('[Form Persistence] 🔄 Setting form values via reset():', {
+        logger.debug('[Form Persistence] 🔄 Setting form values via reset():', {
           persistenceKey,
           valuesToSetKeys: Object.keys(valuesToSet),
           valuesToSet,
@@ -361,12 +364,12 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
           ...methods.getValues(),
           ...valuesToSet,
         } as TFieldValues);
-        console.log('[Form Persistence] ✅ Form values set successfully', {
+        logger.debug('[Form Persistence] ✅ Form values set successfully', {
           persistenceKey,
           currentValues: methods.getValues(),
         });
       } else {
-        console.log('[Form Persistence] ⏭️ No values to set (all values already match)', {
+        logger.debug('[Form Persistence] ⏭️ No values to set (all values already match)', {
           persistenceKey,
         });
       }
@@ -423,9 +426,9 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
     persistTimeoutRef.current = setTimeout(() => {
       // Filter sensitive fields before persisting
       // CRITICAL: Use all keys from watchedValues to ensure we capture all values
-      const allFieldNames = Object.keys(watchedValues as Record<string, any>);
+      const allFieldNames = Object.keys(watchedValues as Record<string, unknown>);
       const filteredValues = filterSensitiveFields(
-        watchedValues as Record<string, any>,
+        watchedValues as Record<string, unknown>,
         allFieldNames.length > 0 ? allFieldNames : fieldNames,
         fieldTypes
       );
@@ -436,10 +439,10 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
         return isSensitiveField(name, type);
       });
 
-      console.log('[Form Persistence] 💾 Persisting form values:', {
+      logger.debug('[Form Persistence] 💾 Persisting form values:', {
         persistenceKey,
         filteredValuesKeys: Object.keys(filteredValues),
-        originalValuesKeys: Object.keys(watchedValues as Record<string, any>),
+        originalValuesKeys: Object.keys(watchedValues as Record<string, unknown>),
         allFieldNames,
         sensitiveFields,
         filteredCount: Object.keys(filteredValues).length,
@@ -449,16 +452,21 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
 
       setPersistedValues(filteredValues as Partial<TFieldValues>);
       
-      // Log sessionStorage after setting (with delay to allow write)
-      if (persistenceKey) {
+      // Log sessionStorage after setting (with delay to allow write, only if available)
+      if (persistenceKey && typeof sessionStorage !== 'undefined') {
         setTimeout(() => {
-          const storageKey = `pace-core:draft:${persistenceKey}`;
-          const stored = sessionStorage.getItem(storageKey);
-          console.log('[Form Persistence] 📦 SessionStorage AFTER setPersistedValues:', {
-            persistenceKey,
-            storageKey,
-            stored: stored ? JSON.parse(stored) : null,
-          });
+          try {
+            const storageKey = `pace-core:draft:${persistenceKey}`;
+            const stored = sessionStorage.getItem(storageKey);
+            logger.debug('[Form Persistence] 📦 SessionStorage AFTER setPersistedValues:', {
+              persistenceKey,
+              storageKey,
+              stored: stored ? JSON.parse(stored) : null,
+            });
+          } catch (error) {
+            // Ignore errors in test environments where sessionStorage may be unavailable
+            logger.debug('[Form Persistence] Could not access sessionStorage after setPersistedValues', { error });
+          }
         }, 100);
       }
       persistTimeoutRef.current = null;
@@ -476,7 +484,7 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
   // Enhanced submit handler that clears draft on success
   const handleSubmit = methods.handleSubmit(
     async (data) => {
-      console.log('[Form Lifecycle] 📤 Form submit started', {
+      logger.debug('[Form Lifecycle] 📤 Form submit started', {
         persistenceKey,
         dataKeys: Object.keys(data),
         timestamp: new Date().toISOString(),
@@ -484,32 +492,39 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
       
       await onSubmit(data);
       
-      console.log('[Form Lifecycle] ✅ Form submit successful', {
+      logger.debug('[Form Lifecycle] ✅ Form submit successful', {
         persistenceKey,
         timestamp: new Date().toISOString(),
       });
       
       // Clear draft after successful submit
       if (persistenceKey && clearDraft) {
-        console.log('[Form Persistence] 🗑️ Clearing draft after successful submit', {
+        logger.debug('[Form Persistence] 🗑️ Clearing draft after successful submit', {
           persistenceKey,
         });
         clearDraft();
         
-        // Log sessionStorage after clearing
-        setTimeout(() => {
-          const storageKey = `pace-core:draft:${persistenceKey}`;
-          const stored = sessionStorage.getItem(storageKey);
-          console.log('[Form Persistence] 📦 SessionStorage AFTER clearDraft (submit):', {
-            persistenceKey,
-            storageKey,
-            stored: stored ? JSON.parse(stored) : null,
-          });
-        }, 100);
+        // Log sessionStorage after clearing (only if available - may not be in test environments)
+        if (typeof sessionStorage !== 'undefined') {
+          setTimeout(() => {
+            try {
+              const storageKey = `pace-core:draft:${persistenceKey}`;
+              const stored = sessionStorage.getItem(storageKey);
+              logger.debug('[Form Persistence] 📦 SessionStorage AFTER clearDraft (submit):', {
+                persistenceKey,
+                storageKey,
+                stored: stored ? JSON.parse(stored) : null,
+              });
+            } catch (error) {
+              // Ignore errors in test environments where sessionStorage may be unavailable
+              logger.debug('[Form Persistence] Could not access sessionStorage after clearDraft', { error });
+            }
+          }, 100);
+        }
       }
     },
     (errors) => {
-      console.log('[Form Lifecycle] ❌ Form submit failed with errors', {
+      logger.debug('[Form Lifecycle] ❌ Form submit failed with errors', {
         persistenceKey,
         errors,
         timestamp: new Date().toISOString(),
@@ -585,7 +600,7 @@ export interface FormFieldProps<
     field: ControllerRenderProps<TFieldValues, TName>;
     fieldState: ControllerFieldState;
     formState: UseFormStateReturn<TFieldValues>;
-  }) => React.ReactElement<any>;
+  }) => React.ReactElement;
   
   /**
    * Test ID