wizzard-stepper-react 1.3.0 → 1.4.0

package/dist/index.js

@@ -3,7 +3,17 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/context/WizardContext.tsx
-import { createContext, useContext, useEffect, useMemo, useState, useCallback } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useSyncExternalStore,
+  useRef,
+  useTransition
+} from "react";
 
 // src/adapters/persistence/MemoryAdapter.ts
 var MemoryAdapter = class {
@@ -34,6 +44,9 @@ function getByPath(obj, path, defaultValue) {
 }
 function setByPath(obj, path, value) {
   if (!path) return value;
+  if (!path.includes(".") && !path.includes("[") && !path.includes("]")) {
+    return { ...obj, [path]: value };
+  }
   const keys = path.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
   const update = (current, index) => {
     if (index === keys.length) return value;
@@ -54,39 +67,83 @@ function setByPath(obj, path, value) {
 
 // src/context/WizardContext.tsx
 import { jsx } from "react/jsx-runtime";
-var WizardContext = createContext(void 0);
+var WizardStateContext = createContext(
+  void 0
+);
+var WizardActionsContext = createContext(
+  void 0
+);
+var WizardStore = class {
+  constructor(initialData) {
+    __publicField(this, "state");
+    __publicField(this, "listeners", /* @__PURE__ */ new Set());
+    __publicField(this, "getSnapshot", () => this.state);
+    __publicField(this, "subscribe", (listener) => {
+      this.listeners.add(listener);
+      return () => this.listeners.delete(listener);
+    });
+    this.state = { data: initialData, errors: {} };
+  }
+  update(newData) {
+    this.state = { ...this.state, data: newData };
+    this.notify();
+  }
+  updateErrors(newErrors) {
+    this.state = { ...this.state, errors: newErrors };
+    this.notify();
+  }
+  notify() {
+    this.listeners.forEach((l) => l());
+  }
+};
 function WizardProvider({
   config,
   initialData,
   children
 }) {
   const [currentStepId, setCurrentStepId] = useState("");
-  const [wizardData, setWizardData] = useState(initialData || {});
   const [visitedSteps, setVisitedSteps] = useState(/* @__PURE__ */ new Set());
   const [completedSteps, setCompletedSteps] = useState(/* @__PURE__ */ new Set());
   const [errorSteps, setErrorSteps] = useState(/* @__PURE__ */ new Set());
-  const [allErrors, setAllErrors] = useState({});
+  const [, setAllErrorsState] = useState({});
   const [isLoading, setIsLoading] = useState(true);
+  const [isPending, startTransition] = useTransition();
+  const storeRef = useRef(new WizardStore(initialData || {}));
+  const [wizardData, setWizardData] = useState(initialData || {});
   const persistenceAdapter = useMemo(() => {
     return config.persistence?.adapter || new MemoryAdapter();
   }, [config.persistence?.adapter]);
   const persistenceMode = config.persistence?.mode || "onStepChange";
-  const activeSteps = useMemo(() => {
-    return config.steps.filter((step) => {
+  const [activeSteps, setActiveSteps] = useState(
+    () => config.steps.filter((s) => !s.condition || s.condition(wizardData))
+  );
+  useEffect(() => {
+    const nextActiveSteps = config.steps.filter((step) => {
       if (step.condition) {
         return step.condition(wizardData);
       }
       return true;
     });
-  }, [config.steps, wizardData]);
+    const currentIds = activeSteps.map((s) => s.id).join(",");
+    const nextIds = nextActiveSteps.map((s) => s.id).join(",");
+    if (currentIds !== nextIds) {
+      setActiveSteps(nextActiveSteps);
+    }
+  }, [config.steps, wizardData, activeSteps]);
   useEffect(() => {
     if (!currentStepId && activeSteps.length > 0) {
       setCurrentStepId(activeSteps[0].id);
       setIsLoading(false);
     }
   }, [activeSteps, currentStepId]);
-  const currentStep = useMemo(() => activeSteps.find((s) => s.id === currentStepId) || null, [activeSteps, currentStepId]);
-  const currentStepIndex = useMemo(() => activeSteps.findIndex((s) => s.id === currentStepId), [activeSteps, currentStepId]);
+  const currentStep = useMemo(
+    () => activeSteps.find((s) => s.id === currentStepId) || null,
+    [activeSteps, currentStepId]
+  );
+  const currentStepIndex = useMemo(
+    () => activeSteps.findIndex((s) => s.id === currentStepId),
+    [activeSteps, currentStepId]
+  );
   const isFirstStep = currentStepIndex === 0;
   const isLastStep = currentStepIndex === activeSteps.length - 1;
   const META_KEY = "__wizzard_meta__";
@@ -106,103 +163,159 @@ function WizardProvider({
       }
     });
     if (Object.keys(loadedData).length > 0) {
-      setWizardData((prev) => ({ ...prev, ...loadedData }));
+      setWizardData((prev) => {
+        const newData = { ...prev, ...loadedData };
+        storeRef.current.update(newData);
+        return newData;
+      });
     }
     setIsLoading(false);
   }, [config.steps, persistenceAdapter]);
   useEffect(() => {
     hydrate();
   }, [hydrate]);
-  const saveData = useCallback((mode, stepId, data) => {
-    if (mode === persistenceMode || mode === "manual") {
-      persistenceAdapter.saveStep(stepId, data);
-    }
-  }, [persistenceAdapter, persistenceMode]);
-  const setStepData = useCallback((stepId, data) => {
-    setWizardData((prev) => {
-      const newData = { ...prev, ...data };
+  const saveData = useCallback(
+    (mode, stepId, data) => {
+      if (mode === persistenceMode || mode === "manual") {
+        persistenceAdapter.saveStep(stepId, data);
+      }
+    },
+    [persistenceAdapter, persistenceMode]
+  );
+  const validationTimeoutRef = useRef(
+    null
+  );
+  const validateStep = useCallback(
+    async (stepId, data) => {
+      const step = config.steps.find((s) => s.id === stepId);
+      if (!step || !step.validationAdapter) return true;
+      const result = await step.validationAdapter.validate(data);
+      if (!result.isValid) {
+        const newAllErrors = {
+          ...storeRef.current.getSnapshot().errors,
+          [stepId]: result.errors || {}
+        };
+        storeRef.current.updateErrors(newAllErrors);
+        setAllErrorsState(newAllErrors);
+        setErrorSteps((prev) => {
+          const next = new Set(prev);
+          next.add(stepId);
+          return next;
+        });
+        return false;
+      } else {
+        const newAllErrors = { ...storeRef.current.getSnapshot().errors };
+        delete newAllErrors[stepId];
+        storeRef.current.updateErrors(newAllErrors);
+        setAllErrorsState(newAllErrors);
+        setErrorSteps((prev) => {
+          const next = new Set(prev);
+          next.delete(stepId);
+          return next;
+        });
+        return true;
+      }
+    },
+    [config.steps]
+  );
+  const setStepData = useCallback(
+    (stepId, data) => {
+      const prevData = storeRef.current.getSnapshot().data;
+      const newData = { ...prevData, ...data };
+      storeRef.current.update(newData);
+      startTransition(() => {
+        setWizardData(newData);
+      });
       if (persistenceMode === "onChange") {
         saveData("onChange", stepId, newData);
       }
-      return newData;
-    });
-  }, [persistenceMode, saveData]);
-  const setData = useCallback((path, value2) => {
-    setWizardData((prev) => {
-      const newData = setByPath(prev, path, value2);
+    },
+    [persistenceMode, saveData]
+  );
+  const setData = useCallback(
+    (path, value, options) => {
+      const prevData = storeRef.current.getSnapshot().data;
+      const newData = setByPath(prevData, path, value);
+      storeRef.current.update(newData);
+      startTransition(() => {
+        setWizardData(newData);
+      });
+      if (options?.debounceValidation) {
+        if (validationTimeoutRef.current)
+          clearTimeout(validationTimeoutRef.current);
+        validationTimeoutRef.current = setTimeout(() => {
+          validateStep(currentStepId, newData);
+        }, options.debounceValidation);
+      } else {
+        validateStep(currentStepId, newData);
+      }
       if (persistenceMode === "onChange") {
         saveData("onChange", currentStepId, newData);
       }
-      return newData;
-    });
-  }, [persistenceMode, saveData, currentStepId]);
+    },
+    [persistenceMode, saveData, currentStepId, validateStep]
+  );
   const getData = useCallback((path, defaultValue) => {
-    return getByPath(wizardData, path, defaultValue);
-  }, [wizardData]);
-  const handleStepChange = useCallback((field, value2) => {
-    if (!currentStepId) return;
-    setData(field, value2);
-  }, [setData, currentStepId]);
-  const validateStep = useCallback(async (stepId) => {
-    const step = config.steps.find((s) => s.id === stepId);
-    if (!step) return true;
-    if (!step.validationAdapter) return true;
-    const result = await step.validationAdapter.validate(wizardData);
-    if (!result.isValid) {
-      setAllErrors((prev) => ({
-        ...prev,
-        [stepId]: result.errors || {}
-      }));
-      setErrorSteps((prev) => new Set(prev).add(stepId));
-      return false;
-    } else {
-      setAllErrors((prev) => {
-        const next = { ...prev };
-        delete next[stepId];
-        return next;
-      });
-      setErrorSteps((prev) => {
-        const next = new Set(prev);
-        next.delete(stepId);
-        return next;
-      });
-      return true;
-    }
-  }, [config.steps, wizardData]);
+    return getByPath(storeRef.current.getSnapshot().data, path, defaultValue);
+  }, []);
+  const handleStepChange = useCallback(
+    (field, value) => {
+      if (!currentStepId) return;
+      setData(field, value);
+    },
+    [setData, currentStepId]
+  );
   const validateAll = useCallback(async () => {
     let isValid = true;
+    const currentData = storeRef.current.getSnapshot().data;
     for (const step of activeSteps) {
-      const stepValid = await validateStep(step.id);
+      const stepValid = await validateStep(step.id, currentData);
       if (!stepValid) isValid = false;
     }
     return isValid;
   }, [activeSteps, validateStep]);
-  const goToStep = useCallback(async (stepId) => {
-    const targetIndex = activeSteps.findIndex((s) => s.id === stepId);
-    if (targetIndex === -1) return false;
-    if (targetIndex > currentStepIndex) {
-      const shouldValidate = currentStep?.autoValidate ?? config.autoValidate ?? true;
-      if (shouldValidate) {
-        const isValid = await validateStep(currentStepId);
-        if (!isValid) return false;
+  const goToStep = useCallback(
+    async (stepId) => {
+      const targetIndex = activeSteps.findIndex((s) => s.id === stepId);
+      if (targetIndex === -1) return false;
+      const currentData = storeRef.current.getSnapshot().data;
+      if (targetIndex > currentStepIndex) {
+        const shouldValidate = currentStep?.autoValidate ?? config.autoValidate ?? true;
+        if (shouldValidate) {
+          const isValid = await validateStep(currentStepId, currentData);
+          if (!isValid) return false;
+        }
       }
-    }
-    if (persistenceMode === "onStepChange" && currentStep) {
-      saveData("onStepChange", currentStepId, wizardData);
-    }
-    const nextVisited = new Set(visitedSteps).add(currentStepId);
-    setVisitedSteps(nextVisited);
-    setCurrentStepId(stepId);
-    if (persistenceMode !== "manual") {
-      persistenceAdapter.saveStep(META_KEY, {
-        currentStepId: stepId,
-        visited: Array.from(nextVisited),
-        completed: Array.from(completedSteps)
-      });
-    }
-    window.scrollTo(0, 0);
-    return true;
-  }, [activeSteps, currentStepId, currentStep, currentStepIndex, config.autoValidate, persistenceMode, saveData, wizardData, validateStep, visitedSteps, completedSteps, persistenceAdapter]);
+      if (persistenceMode === "onStepChange" && currentStep) {
+        saveData("onStepChange", currentStepId, currentData);
+      }
+      const nextVisited = new Set(visitedSteps).add(currentStepId);
+      setVisitedSteps(nextVisited);
+      setCurrentStepId(stepId);
+      if (persistenceMode !== "manual") {
+        persistenceAdapter.saveStep(META_KEY, {
+          currentStepId: stepId,
+          visited: Array.from(nextVisited),
+          completed: Array.from(completedSteps)
+        });
+      }
+      window.scrollTo(0, 0);
+      return true;
+    },
+    [
+      activeSteps,
+      currentStepId,
+      currentStep,
+      currentStepIndex,
+      config.autoValidate,
+      persistenceMode,
+      saveData,
+      validateStep,
+      visitedSteps,
+      completedSteps,
+      persistenceAdapter
+    ]
+  );
   const goToNextStep = useCallback(async () => {
     if (isLastStep) return;
     const nextStep = activeSteps[currentStepIndex + 1];
@@ -216,12 +329,21 @@ function WizardProvider({
             currentStepId: nextStep.id,
             visited: Array.from(new Set(visitedSteps).add(currentStepId)),
             completed: Array.from(nextCompleted)
-            // Updated completed steps
           });
         }
       }
     }
-  }, [activeSteps, currentStepIndex, isLastStep, currentStepId, goToStep, visitedSteps, completedSteps, persistenceMode, persistenceAdapter]);
+  }, [
+    activeSteps,
+    currentStepIndex,
+    isLastStep,
+    currentStepId,
+    goToStep,
+    visitedSteps,
+    completedSteps,
+    persistenceMode,
+    persistenceAdapter
+  ]);
   const goToPrevStep = useCallback(() => {
     if (isFirstStep) return;
     const prevStep = activeSteps[currentStepIndex - 1];
@@ -229,45 +351,212 @@ function WizardProvider({
       goToStep(prevStep.id);
     }
   }, [activeSteps, currentStepIndex, isFirstStep, goToStep]);
-  const value = {
-    currentStep,
-    currentStepIndex,
-    isFirstStep,
-    isLastStep,
-    isLoading,
-    activeSteps,
-    wizardData,
-    allErrors,
-    visitedSteps,
-    completedSteps,
-    errorSteps,
-    goToNextStep,
-    goToPrevStep,
-    goToStep,
-    setStepData,
-    handleStepChange,
-    validateStep,
-    validateAll,
-    save: useCallback(() => saveData("manual", currentStepId, wizardData), [saveData, currentStepId, wizardData]),
-    clearStorage: useCallback(() => persistenceAdapter.clear(), [persistenceAdapter]),
-    setData,
-    getData
-  };
-  return /* @__PURE__ */ jsx(WizardContext.Provider, { value, children });
+  const clearStorage = useCallback(
+    () => persistenceAdapter.clear(),
+    [persistenceAdapter]
+  );
+  const save = useCallback(
+    () => saveData("manual", currentStepId, storeRef.current.getSnapshot().data),
+    [saveData, currentStepId]
+  );
+  const stateValue = useMemo(
+    () => ({
+      currentStep,
+      currentStepIndex,
+      isFirstStep,
+      isLastStep,
+      isLoading,
+      isPending,
+      activeSteps,
+      visitedSteps,
+      completedSteps,
+      errorSteps,
+      store: storeRef.current
+    }),
+    [
+      currentStep,
+      currentStepIndex,
+      isFirstStep,
+      isLastStep,
+      isLoading,
+      isPending,
+      activeSteps,
+      visitedSteps,
+      completedSteps,
+      errorSteps
+    ]
+  );
+  const actionsValue = useMemo(
+    () => ({
+      goToNextStep,
+      goToPrevStep,
+      goToStep,
+      setStepData,
+      handleStepChange,
+      validateStep: (sid) => validateStep(sid, storeRef.current.getSnapshot().data),
+      validateAll,
+      save,
+      clearStorage,
+      setData,
+      getData
+    }),
+    [
+      goToNextStep,
+      goToPrevStep,
+      goToStep,
+      setStepData,
+      handleStepChange,
+      validateStep,
+      validateAll,
+      save,
+      clearStorage,
+      setData,
+      getData
+    ]
+  );
+  return /* @__PURE__ */ jsx(WizardStateContext.Provider, { value: stateValue, children: /* @__PURE__ */ jsx(WizardActionsContext.Provider, { value: actionsValue, children }) });
 }
-function useWizardContext() {
-  const context = useContext(WizardContext);
+function useWizardState() {
+  const context = useContext(WizardStateContext);
   if (!context) {
-    throw new Error("useWizardContext must be used within a WizardProvider");
+    throw new Error("useWizardState must be used within a WizardProvider");
   }
   return context;
 }
+function useWizardValue(path) {
+  const { store } = useWizardState();
+  const lastStateRef = useRef(null);
+  const lastValueRef = useRef(null);
+  const getSnapshot = useCallback(() => {
+    const fullState = store.getSnapshot();
+    const data = fullState.data;
+    if (data === lastStateRef.current) {
+      return lastValueRef.current;
+    }
+    const value = getByPath(data, path);
+    lastStateRef.current = data;
+    lastValueRef.current = value;
+    return value;
+  }, [store, path]);
+  return useSyncExternalStore(store.subscribe, getSnapshot);
+}
+function useWizardError(path) {
+  const { store } = useWizardState();
+  const lastStateRef = useRef(null);
+  const lastValueRef = useRef(null);
+  const getSnapshot = useCallback(() => {
+    const fullState = store.getSnapshot();
+    const errors = fullState.errors;
+    if (errors === lastStateRef.current) {
+      return lastValueRef.current;
+    }
+    let foundError;
+    Object.values(errors).forEach((stepErrors) => {
+      const typedStepErrors = stepErrors;
+      if (typedStepErrors[path]) foundError = typedStepErrors[path];
+    });
+    lastStateRef.current = errors;
+    lastValueRef.current = foundError;
+    return foundError;
+  }, [store, path]);
+  return useSyncExternalStore(store.subscribe, getSnapshot);
+}
+function useWizardSelector(selector) {
+  const { store } = useWizardState();
+  const lastStateRef = useRef(null);
+  const lastResultRef = useRef(null);
+  const getSnapshot = useCallback(() => {
+    const fullState = store.getSnapshot();
+    if (fullState === lastStateRef.current) {
+      return lastResultRef.current;
+    }
+    const result = selector(fullState.data);
+    lastStateRef.current = fullState;
+    lastResultRef.current = result;
+    return result;
+  }, [store, selector]);
+  return useSyncExternalStore(store.subscribe, getSnapshot);
+}
+function useWizardActions() {
+  const context = useContext(WizardActionsContext);
+  if (!context) {
+    throw new Error("useWizardActions must be used within a WizardProvider");
+  }
+  return context;
+}
+function useWizardContext() {
+  const state = useWizardState();
+  const actions = useWizardActions();
+  const wizardData = useWizardSelector((s) => s);
+  const fullState = state.store.getSnapshot();
+  return useMemo(
+    () => ({
+      ...state,
+      ...actions,
+      wizardData,
+      allErrors: fullState.errors
+    }),
+    [state, actions, wizardData, fullState.errors]
+  );
+}
 
 // src/hooks/useWizard.ts
 var useWizard = () => {
   return useWizardContext();
 };
 
+// src/factory.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function createWizardFactory() {
+  const WizardProvider2 = ({
+    config,
+    initialData,
+    children
+  }) => {
+    return /* @__PURE__ */ jsx2(
+      WizardProvider,
+      {
+        config,
+        initialData,
+        children
+      }
+    );
+  };
+  const useWizard2 = () => {
+    return useWizard();
+  };
+  const useWizardContext2 = () => {
+    return useWizardContext();
+  };
+  const useWizardValue2 = (path) => {
+    return useWizardValue(path);
+  };
+  const useWizardSelector2 = (selector) => {
+    return useWizardSelector(selector);
+  };
+  const useWizardError2 = (path) => {
+    return useWizardError(path);
+  };
+  const useWizardActions2 = () => {
+    return useWizardActions();
+  };
+  const useWizardState2 = () => {
+    return useWizardState();
+  };
+  const createStep = (config) => config;
+  return {
+    WizardProvider: WizardProvider2,
+    useWizard: useWizard2,
+    useWizardContext: useWizardContext2,
+    useWizardValue: useWizardValue2,
+    useWizardSelector: useWizardSelector2,
+    useWizardError: useWizardError2,
+    useWizardActions: useWizardActions2,
+    useWizardState: useWizardState2,
+    createStep
+  };
+}
+
 // src/adapters/persistence/LocalStorageAdapter.ts
 var LocalStorageAdapter = class {
   constructor(prefix = "wizard_") {
@@ -317,16 +606,17 @@ var ZodAdapter = class {
       return { isValid: true };
     }
     const errors = {};
-    result.error.issues.forEach((err) => {
-      const path = err.path.join(".");
-      errors[path] = err.message;
-    });
+    if (result.error) {
+      result.error.issues.forEach((err) => {
+        const path = err.path.join(".");
+        errors[path] = err.message;
+      });
+    }
     return { isValid: false, errors };
   }
 };
 
 // src/adapters/validation/YupAdapter.ts
-import { ValidationError } from "yup";
 var YupAdapter = class {
   constructor(schema) {
     __publicField(this, "schema");
@@ -337,9 +627,10 @@ var YupAdapter = class {
       await this.schema.validate(data, { abortEarly: false });
       return { isValid: true };
     } catch (err) {
-      if (err instanceof ValidationError) {
+      if (err && typeof err === "object" && "inner" in err) {
+        const yupError = err;
         const errors = {};
-        err.inner.forEach((error) => {
+        yupError.inner.forEach((error) => {
           if (error.path) {
             errors[error.path] = error.message;
           }
@@ -354,11 +645,18 @@ export {
   LocalStorageAdapter,
   MemoryAdapter,
   WizardProvider,
+  WizardStore,
   YupAdapter,
   ZodAdapter,
+  createWizardFactory,
   getByPath,
   setByPath,
   useWizard,
-  useWizardContext
+  useWizardActions,
+  useWizardContext,
+  useWizardError,
+  useWizardSelector,
+  useWizardState,
+  useWizardValue
 };
 //# sourceMappingURL=index.js.map