@wizzard-packages/react 0.1.0

package/dist/index.js

@@ -0,0 +1,655 @@
+// src/context/WizardContext.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useSyncExternalStore,
+  useRef
+} from "react";
+import {
+  WizardStore,
+  getByPath,
+  setByPath
+} from "@wizzard-packages/core";
+import { MemoryAdapter } from "@wizzard-packages/persistence";
+import { jsx } from "react/jsx-runtime";
+var WizardStateContext = createContext(void 0);
+var WizardActionsContext = createContext(void 0);
+var WizardStoreContext = createContext(void 0);
+function WizardProvider({
+  config,
+  initialData,
+  initialStepId,
+  children
+}) {
+  const [localConfig, setLocalConfig] = useState(config);
+  const storeRef = useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = new WizardStore(initialData || {}, config.middlewares);
+  }
+  const isInitialized = useRef(false);
+  const persistenceAdapter = useMemo(() => {
+    return localConfig.persistence?.adapter || new MemoryAdapter();
+  }, [localConfig.persistence?.adapter]);
+  const persistenceMode = localConfig.persistence?.mode || "onStepChange";
+  const META_KEY = "__wizzard_meta__";
+  const snapshot = useSyncExternalStore(
+    storeRef.current.subscribe,
+    storeRef.current.getSnapshot
+  );
+  const {
+    activeSteps,
+    currentStepId,
+    history,
+    visitedSteps,
+    completedSteps,
+    data,
+    errors: _errors
+  } = snapshot;
+  const stepsMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    localConfig.steps.forEach((step) => map.set(step.id, step));
+    return map;
+  }, [localConfig.steps]);
+  useEffect(() => {
+    setLocalConfig(config);
+  }, [config]);
+  const activeStepsIndexMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    activeSteps.forEach((s, i) => map.set(s.id, i));
+    return map;
+  }, [activeSteps]);
+  const stateRef = useRef({
+    config: localConfig,
+    stepsMap,
+    activeSteps,
+    activeStepsIndexMap,
+    visitedSteps,
+    completedSteps,
+    persistenceMode,
+    persistenceAdapter,
+    currentStepId,
+    history
+  });
+  const validationDebounceRef = useRef(null);
+  useEffect(() => {
+    stateRef.current = {
+      config: localConfig,
+      stepsMap,
+      activeSteps,
+      activeStepsIndexMap,
+      visitedSteps,
+      completedSteps,
+      persistenceMode,
+      persistenceAdapter,
+      currentStepId,
+      history
+    };
+  });
+  useEffect(() => {
+    return () => {
+      if (validationDebounceRef.current) {
+        clearTimeout(validationDebounceRef.current);
+      }
+    };
+  }, []);
+  const trackEvent = useCallback(
+    (name, payload) => {
+      localConfig.analytics?.onEvent(name, payload);
+    },
+    [localConfig.analytics]
+  );
+  const resolveActiveStepsHelper = useCallback(
+    (data2) => storeRef.current.resolveActiveSteps(data2),
+    []
+  );
+  const validateStep = useCallback((stepId) => storeRef.current.validateStep(stepId), []);
+  const goToStep = useCallback(
+    async (stepId, providedActiveSteps, options = { validate: true }) => {
+      return storeRef.current.goToStep(stepId, {
+        validate: options.validate,
+        providedActiveSteps
+      });
+    },
+    []
+  );
+  const goToNextStep = useCallback(async () => {
+    const { currentStepId: currentStepId2 } = stateRef.current;
+    if (!currentStepId2) return;
+    const currentData = storeRef.current.getSnapshot().data;
+    const step = stepsMap.get(currentStepId2);
+    const shouldVal = step?.autoValidate ?? localConfig.autoValidate ?? !!step?.validationAdapter;
+    if (shouldVal) {
+      const ok = await validateStep(currentStepId2);
+      if (!ok) return;
+    }
+    const resolvedSteps = await resolveActiveStepsHelper(currentData);
+    const idx = resolvedSteps.findIndex((s) => s.id === currentStepId2);
+    if (idx !== -1 && idx < resolvedSteps.length - 1) {
+      const nextStepId = resolvedSteps[idx + 1].id;
+      const success = await goToStep(nextStepId, resolvedSteps, {
+        validate: false
+      });
+      if (success) {
+        const currentSnapshot = storeRef.current.getSnapshot();
+        if (!currentSnapshot.errorSteps.has(currentStepId2)) {
+          const nextComp = new Set(currentSnapshot.completedSteps);
+          nextComp.add(currentStepId2);
+          storeRef.current.dispatch({
+            type: "SET_COMPLETED_STEPS",
+            payload: { steps: nextComp }
+          });
+        }
+      }
+    }
+  }, [goToStep, resolveActiveStepsHelper, validateStep, stepsMap, localConfig]);
+  const goToPrevStep = useCallback(async () => {
+    const { currentStepId: currentStepId2, activeSteps: activeSteps2, activeStepsIndexMap: activeStepsIndexMap2 } = stateRef.current;
+    const idx = activeStepsIndexMap2.get(currentStepId2) ?? -1;
+    if (idx > 0) await goToStep(activeSteps2[idx - 1].id);
+  }, [goToStep]);
+  const handleStepDependencies = useCallback(
+    (paths, initialData2) => {
+      let currentData = { ...initialData2 };
+      const allClearedPaths = /* @__PURE__ */ new Set();
+      const { completedSteps: completedSteps2, visitedSteps: visitedSteps2 } = storeRef.current.getSnapshot();
+      const nextComp = new Set(completedSteps2);
+      const nextVis = new Set(visitedSteps2);
+      let statusChanged = false;
+      const processDependencies = (changedPaths) => {
+        const newlyClearedPaths = [];
+        localConfig.steps.forEach((step) => {
+          const isDependent = step.dependsOn?.some(
+            (p) => changedPaths.some(
+              (path) => path === p || p.startsWith(path + ".") || path.startsWith(p + ".")
+            )
+          );
+          if (isDependent) {
+            if (nextComp.delete(step.id)) {
+              statusChanged = true;
+            }
+            if (nextVis.delete(step.id)) {
+              statusChanged = true;
+            }
+            if (step.clearData) {
+              if (typeof step.clearData === "function") {
+                const patch = step.clearData(currentData, changedPaths);
+                Object.keys(patch).forEach((key) => {
+                  if (currentData[key] !== patch[key]) {
+                    currentData[key] = patch[key];
+                    newlyClearedPaths.push(key);
+                    allClearedPaths.add(key);
+                  }
+                });
+              } else {
+                const pathsToClear = Array.isArray(step.clearData) ? step.clearData : [step.clearData];
+                pathsToClear.forEach((p) => {
+                  const val = getByPath(currentData, p);
+                  if (val !== void 0) {
+                    currentData = setByPath(currentData, p, void 0);
+                    newlyClearedPaths.push(p);
+                    allClearedPaths.add(p);
+                  }
+                });
+              }
+            }
+          }
+        });
+        if (newlyClearedPaths.length > 0) {
+          processDependencies(newlyClearedPaths);
+        }
+      };
+      processDependencies(paths);
+      if (statusChanged) {
+        storeRef.current.dispatch({
+          type: "SET_COMPLETED_STEPS",
+          payload: { steps: nextComp }
+        });
+        storeRef.current.dispatch({
+          type: "SET_VISITED_STEPS",
+          payload: { steps: nextVis }
+        });
+      }
+      return {
+        newData: currentData,
+        hasClearing: allClearedPaths.size > 0,
+        clearedPaths: Array.from(allClearedPaths)
+      };
+    },
+    [localConfig.steps]
+  );
+  const setData = useCallback(
+    (path, value, options) => {
+      const { stepsMap: stepsMap2, currentStepId: currentStepId2 } = stateRef.current;
+      const prevData = storeRef.current.getSnapshot().data;
+      if (getByPath(prevData, path) === value) return;
+      const baseData = setByPath(prevData, path, value);
+      const { newData, hasClearing } = handleStepDependencies([path], baseData);
+      if (!hasClearing) {
+        storeRef.current.dispatch({
+          type: "SET_DATA",
+          payload: {
+            path,
+            value,
+            options: { ...options, __from_set_data__: true }
+          }
+        });
+      } else {
+        storeRef.current.dispatch({
+          type: "UPDATE_DATA",
+          payload: {
+            data: newData,
+            options: { replace: true, __from_set_data__: true, path }
+          }
+        });
+      }
+      if (currentStepId2) {
+        storeRef.current.deleteError(currentStepId2, path);
+        const step = stepsMap2.get(currentStepId2);
+        const mode = step?.validationMode || localConfig.validationMode || "onStepChange";
+        if (mode === "onChange") {
+          const debounceMs = options?.debounceValidation ?? localConfig.validationDebounceTime ?? 300;
+          if (validationDebounceRef.current) {
+            clearTimeout(validationDebounceRef.current);
+          }
+          validationDebounceRef.current = setTimeout(() => {
+            validateStep(currentStepId2);
+          }, debounceMs);
+        }
+      }
+    },
+    [localConfig, validateStep, handleStepDependencies]
+  );
+  const updateData = useCallback(
+    (data2, options) => {
+      const prev = storeRef.current.getSnapshot().data;
+      const baseData = options?.replace ? data2 : { ...prev, ...data2 };
+      const { newData } = handleStepDependencies(Object.keys(data2), baseData);
+      storeRef.current.update(newData, Object.keys(data2));
+      if (options?.persist) {
+        if (storeRef.current.save) {
+          storeRef.current.save(storeRef.current.getSnapshot().currentStepId);
+        }
+      }
+    },
+    [handleStepDependencies]
+  );
+  const reset = useCallback(() => {
+    storeRef.current.setInitialData(initialData || {});
+    storeRef.current.update(initialData || {});
+    storeRef.current.updateErrors({});
+    storeRef.current.dispatch({
+      type: "SET_VISITED_STEPS",
+      payload: { steps: /* @__PURE__ */ new Set() }
+    });
+    storeRef.current.dispatch({
+      type: "SET_COMPLETED_STEPS",
+      payload: { steps: /* @__PURE__ */ new Set() }
+    });
+    storeRef.current.dispatch({
+      type: "SET_ERROR_STEPS",
+      payload: { steps: /* @__PURE__ */ new Set() }
+    });
+    if (activeSteps.length > 0) {
+      const startId = activeSteps[0].id;
+      storeRef.current.dispatch({
+        type: "SET_CURRENT_STEP_ID",
+        payload: { stepId: startId }
+      });
+      storeRef.current.dispatch({
+        type: "SET_HISTORY",
+        payload: { history: [startId] }
+      });
+    } else {
+      storeRef.current.dispatch({
+        type: "SET_CURRENT_STEP_ID",
+        payload: { stepId: "" }
+      });
+      storeRef.current.dispatch({
+        type: "SET_HISTORY",
+        payload: { history: [] }
+      });
+    }
+    persistenceAdapter.clear();
+    trackEvent("wizard_reset", { data: initialData });
+  }, [initialData, activeSteps, persistenceAdapter, trackEvent]);
+  const stateValue = useMemo(
+    () => ({
+      ...snapshot,
+      config: localConfig
+    }),
+    [snapshot, localConfig]
+  );
+  const actionsValue = useMemo(
+    () => ({
+      goToNextStep,
+      goToPrevStep,
+      goToStep: (sid, optionsOrUndefined, thirdArg) => {
+        let finalOptions = optionsOrUndefined;
+        if (thirdArg && optionsOrUndefined === void 0) {
+          finalOptions = thirdArg;
+        }
+        return goToStep(sid, void 0, finalOptions);
+      },
+      setStepData: (_stepId, data2) => {
+        const next = { ...storeRef.current.getSnapshot().data, ...data2 };
+        storeRef.current.update(next, Object.keys(data2));
+      },
+      handleStepChange: (f, v) => {
+        if (stateRef.current.currentStepId) setData(f, v);
+      },
+      validateStep: (sid) => validateStep(sid),
+      validateAll: async () => {
+        storeRef.current.updateMeta({ isBusy: true });
+        const data2 = storeRef.current.getSnapshot().data;
+        const active = await resolveActiveStepsHelper(data2);
+        const results = await Promise.all(
+          active.map((s) => validateStep(s.id))
+        );
+        storeRef.current.updateMeta({ isBusy: false });
+        return {
+          isValid: results.every(Boolean),
+          errors: storeRef.current.getSnapshot().errors
+        };
+      },
+      save: (ids) => {
+        if (ids === true) {
+          localConfig.steps.forEach(
+            (s) => storeRef.current.save(s.id)
+          );
+        } else if (!ids) {
+          storeRef.current.save();
+        } else {
+          (Array.isArray(ids) ? ids : [ids]).forEach((id) => storeRef.current.save(id));
+        }
+      },
+      clearStorage: () => persistenceAdapter.clear(),
+      reset,
+      setData,
+      updateData,
+      getData: (p, d) => getByPath(storeRef.current.getSnapshot().data, p, d),
+      updateConfig: (nc) => {
+        setLocalConfig((prev) => ({ ...prev, ...nc }));
+      }
+    }),
+    [
+      goToNextStep,
+      goToPrevStep,
+      goToStep,
+      validateStep,
+      reset,
+      setData,
+      updateData,
+      persistenceAdapter,
+      localConfig,
+      resolveActiveStepsHelper
+    ]
+  );
+  useEffect(() => {
+    if (!isInitialized.current) {
+      storeRef.current.injectPersistence(persistenceAdapter);
+      storeRef.current.dispatch({
+        type: "INIT",
+        payload: { data: initialData || {}, config: localConfig }
+      });
+      storeRef.current.hydrate();
+      isInitialized.current = true;
+    } else {
+      storeRef.current.updateMeta({ config: localConfig });
+    }
+  }, [initialData, localConfig, persistenceAdapter]);
+  useEffect(() => {
+    let isMounted = true;
+    const timeoutId = setTimeout(async () => {
+      const resolved = await resolveActiveStepsHelper(data);
+      if (isMounted) {
+        storeRef.current.dispatch({
+          type: "SET_ACTIVE_STEPS",
+          payload: { steps: resolved }
+        });
+      }
+    }, 200);
+    return () => {
+      isMounted = false;
+      clearTimeout(timeoutId);
+    };
+  }, [data, resolveActiveStepsHelper]);
+  const hasHydratedRef = useRef(false);
+  useEffect(() => {
+    if (hasHydratedRef.current) return;
+    hasHydratedRef.current = true;
+    const meta = persistenceAdapter.getStep(META_KEY);
+    if (meta) {
+      if (meta.currentStepId) {
+        storeRef.current.dispatch({
+          type: "SET_CURRENT_STEP_ID",
+          payload: { stepId: meta.currentStepId }
+        });
+      }
+      if (meta.visited)
+        storeRef.current.dispatch({
+          type: "SET_VISITED_STEPS",
+          payload: { steps: new Set(meta.visited) }
+        });
+      if (meta.completed)
+        storeRef.current.dispatch({
+          type: "SET_COMPLETED_STEPS",
+          payload: { steps: new Set(meta.completed) }
+        });
+      if (meta.history) {
+        storeRef.current.dispatch({
+          type: "SET_HISTORY",
+          payload: { history: meta.history }
+        });
+      }
+    }
+    const currentSnapshot = storeRef.current.getSnapshot();
+    const currentActiveSteps = currentSnapshot.activeSteps;
+    if (!currentSnapshot.currentStepId && currentActiveSteps.length > 0) {
+      const startId = initialStepId && currentActiveSteps.some((s) => s.id === initialStepId) ? initialStepId : currentActiveSteps[0].id;
+      storeRef.current.dispatch({
+        type: "SET_CURRENT_STEP_ID",
+        payload: { stepId: startId }
+      });
+      if (currentSnapshot.history.length === 0) {
+        storeRef.current.dispatch({
+          type: "SET_HISTORY",
+          payload: { history: [startId] }
+        });
+      }
+      const currentVisited = new Set(currentSnapshot.visitedSteps);
+      if (!currentVisited.has(startId)) {
+        currentVisited.add(startId);
+        storeRef.current.dispatch({
+          type: "SET_VISITED_STEPS",
+          payload: { steps: currentVisited }
+        });
+      }
+    }
+    if (currentActiveSteps.length > 0 && currentSnapshot.isLoading) {
+      storeRef.current.updateMeta({ isLoading: false });
+    }
+  }, [activeSteps, initialStepId, persistenceAdapter]);
+  return /* @__PURE__ */ jsx(WizardStoreContext.Provider, { value: storeRef.current, children: /* @__PURE__ */ jsx(WizardStateContext.Provider, { value: stateValue, children: /* @__PURE__ */ jsx(WizardActionsContext.Provider, { value: actionsValue, children }) }) });
+}
+function useWizardState() {
+  const context = useContext(WizardStateContext);
+  if (!context) throw new Error("useWizardState must be used within a WizardProvider");
+  return context;
+}
+function useWizardValue(path, options) {
+  const store = useContext(WizardStoreContext);
+  if (!store) throw new Error("useWizardValue must be used within a WizardProvider");
+  const lastStateRef = useRef(null);
+  const lastValueRef = useRef(null);
+  const getSnapshot = useCallback(() => {
+    const data = store.getSnapshot().data;
+    if (data === lastStateRef.current) return lastValueRef.current;
+    const value = getByPath(data, path);
+    if (lastValueRef.current !== void 0 && (options?.isEqual || Object.is)(lastValueRef.current, value)) {
+      lastStateRef.current = data;
+      return lastValueRef.current;
+    }
+    lastStateRef.current = data;
+    lastValueRef.current = value;
+    return value;
+  }, [store, path, options?.isEqual]);
+  return useSyncExternalStore(store.subscribe, getSnapshot);
+}
+function useWizardError(path) {
+  const store = useContext(WizardStoreContext);
+  if (!store) throw new Error("useWizardError must be used within a WizardProvider");
+  const getSnapshot = useCallback(() => {
+    const errors = store.getSnapshot().errors;
+    for (const [_, stepErrors] of Object.entries(errors)) {
+      const typed = stepErrors;
+      if (typed[path]) return typed[path];
+    }
+    return void 0;
+  }, [store, path]);
+  return useSyncExternalStore(store.subscribe, getSnapshot);
+}
+function useWizardSelector(selector, options) {
+  const store = useContext(WizardStoreContext);
+  if (!store) throw new Error("useWizardSelector must be used within a WizardProvider");
+  const lastResultRef = useRef(null);
+  const getSnapshot = useCallback(() => {
+    const full = store.getSnapshot();
+    const res = selector(full);
+    if (lastResultRef.current !== null && (options?.isEqual || Object.is)(lastResultRef.current, res)) {
+      return lastResultRef.current;
+    }
+    lastResultRef.current = res;
+    return res;
+  }, [store, selector, options?.isEqual]);
+  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 store = useContext(WizardStoreContext);
+  const data = useWizardSelector((s) => s.data);
+  const allErrors = useWizardSelector((s) => s.errors);
+  const errors = useMemo(() => {
+    const flat = {};
+    Object.values(allErrors).forEach((stepErrors) => {
+      Object.assign(flat, stepErrors);
+    });
+    return flat;
+  }, [allErrors]);
+  const { data: _d, errors: _e, ...stateProps } = state;
+  return useMemo(
+    () => ({
+      ...stateProps,
+      ...actions,
+      data,
+      allErrors,
+      errors,
+      store
+    }),
+    [stateProps, actions, data, allErrors, errors, store]
+  );
+}
+
+// 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, options) => {
+    return useWizardValue(path, options);
+  };
+  const useWizardSelector2 = (selector, options) => {
+    return useWizardSelector(selector, options);
+  };
+  const useWizardError2 = (path) => {
+    return useWizardError(path);
+  };
+  const useWizardActions2 = () => {
+    return useWizardActions();
+  };
+  const useWizardState2 = () => {
+    return useWizardState();
+  };
+  const useBreadcrumbs = () => {
+    return useWizardState().breadcrumbs;
+  };
+  const createStep = (config) => config;
+  return {
+    WizardProvider: WizardProvider2,
+    useWizard: useWizard2,
+    useWizardContext: useWizardContext2,
+    useWizardValue: useWizardValue2,
+    useWizardSelector: useWizardSelector2,
+    useWizardError: useWizardError2,
+    useWizardActions: useWizardActions2,
+    useWizardState: useWizardState2,
+    useBreadcrumbs,
+    createStep
+  };
+}
+
+// src/components/WizardStepRenderer.tsx
+import { useMemo as useMemo2, Suspense } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var WizardStepRenderer = ({
+  wrapper: Wrapper,
+  fallback = null
+}) => {
+  const { currentStep } = useWizardContext();
+  const StepComponent = useMemo2(() => {
+    if (!currentStep?.component) return null;
+    return currentStep.component;
+  }, [currentStep]);
+  if (!currentStep || !StepComponent) {
+    return null;
+  }
+  const content = /* @__PURE__ */ jsx3(Suspense, { fallback, children: /* @__PURE__ */ jsx3(StepComponent, {}) });
+  if (Wrapper) {
+    return /* @__PURE__ */ jsx3(Wrapper, { children: content }, currentStep.id);
+  }
+  return content;
+};
+
+// src/index.ts
+import { WizardStore as WizardStore2 } from "@wizzard-packages/core";
+import { loggerMiddleware } from "@wizzard-packages/middleware";
+export {
+  WizardProvider,
+  WizardStepRenderer,
+  WizardStore2 as WizardStore,
+  createWizardFactory,
+  loggerMiddleware,
+  useWizard,
+  useWizardActions,
+  useWizardContext,
+  useWizardError,
+  useWizardSelector,
+  useWizardState,
+  useWizardValue
+};
+//# sourceMappingURL=index.js.map