@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

package/dist/esm/components/form/StepControlContext.js

@@ -0,0 +1,249 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/StepControlContext.tsx
+const StepControlContext = createContext(void 0);
+/**
+* Provider component for step control functionality
+* Handles step navigation logic and state management
+*/
+function StepControlProvider({ children, defaultStep, handleStepSubmit, isBackValidate, onStepChange, onStepRetry, onNavigationStart, onNavigationEnd, onNavigationError, totalSteps, triggerValidation }) {
+	const stepControl = useCreateStepControl({
+		defaultStep: defaultStep ?? 1,
+		handleStepSubmit,
+		isBackValidate: isBackValidate ?? false,
+		onStepChange,
+		onStepRetry,
+		onNavigationStart,
+		onNavigationEnd,
+		onNavigationError,
+		totalSteps: totalSteps ?? 1,
+		triggerValidation
+	});
+	return /* @__PURE__ */ jsx(StepControlContext.Provider, {
+		value: stepControl,
+		children
+	});
+}
+function useCreateStepControl({ defaultStep = 1, handleStepSubmit, isBackValidate = false, onStepChange, onStepRetry, onNavigationStart, onNavigationEnd, onNavigationError, totalSteps: totalStepsProp, triggerValidation }) {
+	const [currentStep, setCurrentStep] = useState(defaultStep);
+	const [retryCount, setRetryCount] = useState(0);
+	const [transitionState, setTransitionState] = useState({
+		direction: null,
+		enteringStep: null,
+		exitingStep: null
+	});
+	const isFirstStep = currentStep === 1;
+	const isLastStep = currentStep === totalStepsProp;
+	const goToStep = useCallback((step) => {
+		const targetStep = Math.max(1, Math.min(step, totalStepsProp));
+		try {
+			onNavigationStart?.(currentStep, targetStep, "goTo");
+		} catch (error) {
+			onNavigationError?.(currentStep, targetStep, "goTo", error);
+			return;
+		}
+		if (targetStep === currentStep) {
+			onNavigationEnd?.(currentStep, targetStep, "goTo");
+			return;
+		}
+		setRetryCount(0);
+		setTransitionState({
+			direction: targetStep > currentStep ? "forward" : "backward",
+			enteringStep: targetStep,
+			exitingStep: currentStep
+		});
+		setTimeout(() => {
+			try {
+				setCurrentStep(targetStep);
+				setTransitionState({
+					direction: null,
+					enteringStep: null,
+					exitingStep: null
+				});
+				onStepChange?.(targetStep);
+				onNavigationEnd?.(currentStep, targetStep, "goTo");
+			} catch (error) {
+				onNavigationError?.(currentStep, targetStep, "goTo", error);
+			}
+		}, 300);
+	}, [
+		totalStepsProp,
+		onStepChange,
+		currentStep,
+		onNavigationStart,
+		onNavigationEnd,
+		onNavigationError
+	]);
+	const jumpTo = useCallback((step) => {
+		const targetStep = Math.max(1, Math.min(step, totalStepsProp));
+		try {
+			onNavigationStart?.(currentStep, targetStep, "jumpTo");
+		} catch (error) {
+			onNavigationError?.(currentStep, targetStep, "jumpTo", error);
+			return;
+		}
+		if (targetStep === currentStep) {
+			onNavigationEnd?.(currentStep, targetStep, "jumpTo");
+			return;
+		}
+		setRetryCount(0);
+		try {
+			setCurrentStep(targetStep);
+			onStepChange?.(targetStep);
+			onNavigationEnd?.(currentStep, targetStep, "jumpTo");
+		} catch (error) {
+			onNavigationError?.(currentStep, targetStep, "jumpTo", error);
+		}
+	}, [
+		totalStepsProp,
+		onStepChange,
+		currentStep,
+		onNavigationStart,
+		onNavigationEnd,
+		onNavigationError
+	]);
+	const handleRetry = useCallback(async () => {
+		try {
+			onNavigationStart?.(currentStep, currentStep, "retry");
+		} catch (error) {
+			onNavigationError?.(currentStep, currentStep, "retry", error);
+			return;
+		}
+		setRetryCount((prev) => prev + 1);
+		setTransitionState({
+			direction: null,
+			enteringStep: currentStep,
+			exitingStep: currentStep
+		});
+		setTimeout(() => {
+			try {
+				setTransitionState({
+					direction: null,
+					enteringStep: null,
+					exitingStep: null
+				});
+				setCurrentStep(currentStep);
+				onStepRetry?.(currentStep);
+				onNavigationEnd?.(currentStep, currentStep, "retry");
+			} catch (error) {
+				onNavigationError?.(currentStep, currentStep, "retry", error);
+			}
+		}, 300);
+	}, [
+		currentStep,
+		onStepRetry,
+		onNavigationStart,
+		onNavigationEnd,
+		onNavigationError
+	]);
+	const handleNext = useCallback(async () => {
+		if (isLastStep) return;
+		const targetStep = currentStep + 1;
+		try {
+			onNavigationStart?.(currentStep, targetStep, "next");
+		} catch (error) {
+			onNavigationError?.(currentStep, targetStep, "next", error);
+			return;
+		}
+		if (handleStepSubmit) try {
+			await handleStepSubmit();
+		} catch (error) {
+			onNavigationError?.(currentStep, targetStep, "next", error);
+			return;
+		}
+		goToStep(targetStep);
+	}, [
+		currentStep,
+		isLastStep,
+		goToStep,
+		handleStepSubmit,
+		onNavigationStart,
+		onNavigationEnd,
+		onNavigationError
+	]);
+	const handlePrevious = useCallback(async () => {
+		if (isFirstStep) return;
+		const targetStep = currentStep - 1;
+		try {
+			onNavigationStart?.(currentStep, targetStep, "previous");
+		} catch (error) {
+			onNavigationError?.(currentStep, targetStep, "previous", error);
+			return;
+		}
+		if (isBackValidate && triggerValidation) try {
+			if (!await triggerValidation()) {
+				onNavigationError?.(currentStep, targetStep, "previous", /* @__PURE__ */ new Error("Validation failed"));
+				return;
+			}
+		} catch (error) {
+			onNavigationError?.(currentStep, targetStep, "previous", error);
+			return;
+		}
+		goToStep(targetStep);
+	}, [
+		currentStep,
+		isFirstStep,
+		isBackValidate,
+		triggerValidation,
+		goToStep,
+		onNavigationStart,
+		onNavigationEnd,
+		onNavigationError
+	]);
+	return useMemo(() => ({
+		currentStep,
+		goToStep,
+		jumpTo,
+		handleNext,
+		handlePrevious,
+		handleRetry,
+		retryCount,
+		isFirstStep,
+		isLastStep,
+		totalSteps: totalStepsProp,
+		transitionState
+	}), [
+		currentStep,
+		totalStepsProp,
+		isFirstStep,
+		isLastStep,
+		goToStep,
+		jumpTo,
+		handleNext,
+		handlePrevious,
+		handleRetry,
+		retryCount,
+		transitionState
+	]);
+}
+/**
+* Hook to optionally consume the step control context
+* @returns StepControlContextType | undefined - Step control methods and state, or undefined if not in context
+*/
+function useOptionalStepControlContext() {
+	return useContext(StepControlContext);
+}
+/**
+* Backward compatibility hook
+* This maintains the original API where useStepControl could be used as both
+* a context consumer and a creator depending on whether options were passed
+*/
+function useStepControl(options) {
+	if (options) return useCreateStepControl(options);
+	return useStepControlContext();
+}
+/**
+* Hook to consume the step control context
+* @returns StepControlContextType - Step control methods and state
+* @throws Error if used outside StepControlProvider
+*/
+function useStepControlContext() {
+	const context = useContext(StepControlContext);
+	if (context === void 0) throw new Error("useStepControl must be used within a StepControlProvider");
+	return context;
+}
+
+//#endregion
+export { StepControlProvider, useCreateStepControl, useOptionalStepControlContext, useStepControl, useStepControlContext };
+//# sourceMappingURL=StepControlContext.js.map

package/dist/esm/components/form/StepControlContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepControlContext.js","names":[],"sources":["../../../../src/components/form/StepControlContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport type { NavigationType } from \"@/components\";\n\n/**\n * Interface for step control context values\n */\nexport interface StepControlContextType {\n  /**\n   * Current active step index\n   */\n  currentStep: number;\n  /**\n   * Navigate to a specific step\n   * @param step - The step index to navigate to\n   */\n  goToStep: (step: number) => void;\n  /**\n   * Jump to a specific step without transition animation\n   * @param step - The step index to jump to\n   */\n  jumpTo: (step: number) => void;\n  /**\n   * Navigate to the next step\n   */\n  handleNext: () => Promise<void>;\n  /**\n   * Navigate to the previous step\n   */\n  handlePrevious: () => Promise<void>;\n  /**\n   * Retry the current step\n   */\n  handleRetry: () => Promise<void>;\n  /**\n   * Number of times the current step has been retried\n   */\n  retryCount: number;\n  /**\n   * Whether the current step is the first step\n   */\n  isFirstStep: boolean;\n  /**\n   * Whether the current step is the last step\n   */\n  isLastStep: boolean;\n  /**\n   * Total number of steps\n   */\n  totalSteps: number;\n  /**\n   * Transition state with navigation direction\n   */\n  transitionState: {\n    direction: \"backward\" | \"forward\" | null;\n    enteringStep: null | number;\n    exitingStep: null | number;\n  };\n}\n\nconst StepControlContext = createContext<StepControlContextType | undefined>(\n  undefined,\n);\n\nexport interface StepControlProviderProps {\n  children: React.ReactNode;\n  /**\n   * Default step to start on\n   */\n  defaultStep?: number;\n  /**\n   * Function to handle step submission\n   */\n  handleStepSubmit?: () => Promise<void>;\n  /**\n   * Whether to validate when going back steps\n   */\n  isBackValidate?: boolean;\n  /**\n   * Callback when step changes\n   */\n  onStepChange?: (step: number) => void;\n  /**\n   * Callback when step is retried\n   */\n  onStepRetry?: (step: number) => void;\n  /**\n   * Callback when navigation starts\n   */\n  onNavigationStart?: (\n    fromStep: number,\n    toStep: number,\n    type: NavigationType,\n  ) => void;\n  /**\n   * Callback when navigation ends successfully\n   */\n  onNavigationEnd?: (\n    fromStep: number,\n    toStep: number,\n    type: NavigationType,\n  ) => void;\n  /**\n   * Callback when navigation fails\n   */\n  onNavigationError?: (\n    fromStep: number,\n    toStep: number,\n    type: NavigationType,\n    error: any,\n  ) => void;\n  /**\n   * Total number of steps\n   */\n  totalSteps?: number;\n  /**\n   * Function to trigger validation for the current step\n   */\n  triggerValidation?: () => Promise<boolean>;\n}\n\n/**\n * Hook to create step control state independently\n * This hook can be used outside of StepControlProvider\n */\nexport interface UseCreateStepControlOptions {\n  /**\n   * Default step to start on\n   * @default 1\n   */\n  defaultStep?: number;\n  /**\n   * Function to handle step submission\n   */\n  handleStepSubmit?: () => Promise<void>;\n  /**\n   * Whether to validate when going back steps\n   * @default false\n   */\n  isBackValidate?: boolean;\n  /**\n   * Callback when step changes\n   */\n  onStepChange?: (step: number) => void;\n  /**\n   * Callback when step is retried\n   */\n  onStepRetry?: (step: number) => void;\n  /**\n   * Callback when navigation starts\n   */\n  onNavigationStart?: (\n    fromStep: number,\n    toStep: number,\n    type: NavigationType,\n  ) => void;\n  /**\n   * Callback when navigation ends successfully\n   */\n  onNavigationEnd?: (\n    fromStep: number,\n    toStep: number,\n    type: NavigationType,\n  ) => void;\n  /**\n   * Callback when navigation fails\n   */\n  onNavigationError?: (\n    fromStep: number,\n    toStep: number,\n    type: NavigationType,\n    error: any,\n  ) => void;\n  /**\n   * Total number of steps\n   */\n  totalSteps: number;\n  /**\n   * Function to trigger validation for the current step\n   */\n  triggerValidation?: () => Promise<boolean>;\n}\n\n/**\n * Provider component for step control functionality\n * Handles step navigation logic and state management\n */\nexport function StepControlProvider({\n  children,\n  defaultStep,\n  handleStepSubmit,\n  isBackValidate,\n  onStepChange,\n  onStepRetry,\n  onNavigationStart,\n  onNavigationEnd,\n  onNavigationError,\n  totalSteps,\n  triggerValidation,\n}: StepControlProviderProps) {\n  const stepControl = useCreateStepControl({\n    defaultStep: defaultStep ?? 1,\n    handleStepSubmit,\n    isBackValidate: isBackValidate ?? false,\n    onStepChange,\n    onStepRetry,\n    onNavigationStart,\n    onNavigationEnd,\n    onNavigationError,\n    totalSteps: totalSteps ?? 1,\n    triggerValidation,\n  });\n\n  return (\n    <StepControlContext.Provider value={stepControl}>\n      {children}\n    </StepControlContext.Provider>\n  );\n}\n\nexport function useCreateStepControl({\n  defaultStep = 1,\n  handleStepSubmit,\n  isBackValidate = false,\n  onStepChange,\n  onStepRetry,\n  onNavigationStart,\n  onNavigationEnd,\n  onNavigationError,\n  totalSteps: totalStepsProp,\n  triggerValidation,\n}: UseCreateStepControlOptions): StepControlContextType {\n  const [currentStep, setCurrentStep] = useState(defaultStep);\n  const [retryCount, setRetryCount] = useState(0);\n  const [transitionState, setTransitionState] = useState<{\n    direction: \"backward\" | \"forward\" | null;\n    enteringStep: null | number;\n    exitingStep: null | number;\n  }>({\n    direction: null,\n    enteringStep: null,\n    exitingStep: null,\n  });\n\n  const isFirstStep = currentStep === 1;\n  const isLastStep = currentStep === totalStepsProp;\n\n  const goToStep = useCallback(\n    (step: number) => {\n      const targetStep = Math.max(1, Math.min(step, totalStepsProp));\n\n      // Call navigation start callback\n      try {\n        onNavigationStart?.(currentStep, targetStep, \"goTo\");\n      } catch (error) {\n        onNavigationError?.(currentStep, targetStep, \"goTo\", error);\n        return;\n      }\n\n      if (targetStep === currentStep) {\n        onNavigationEnd?.(currentStep, targetStep, \"goTo\");\n        return;\n      }\n\n      // Reset retry count when navigating to a different step\n      setRetryCount(0);\n\n      // Determine navigation direction\n      const direction = targetStep > currentStep ? \"forward\" : \"backward\";\n\n      setTransitionState({\n        direction,\n        enteringStep: targetStep,\n        exitingStep: currentStep,\n      });\n\n      // After transition duration, update the current step\n      setTimeout(() => {\n        try {\n          setCurrentStep(targetStep);\n          setTransitionState({\n            direction: null,\n            enteringStep: null,\n            exitingStep: null,\n          });\n          onStepChange?.(targetStep);\n          onNavigationEnd?.(currentStep, targetStep, \"goTo\");\n        } catch (error) {\n          onNavigationError?.(currentStep, targetStep, \"goTo\", error);\n        }\n      }, 300);\n    },\n    [\n      totalStepsProp,\n      onStepChange,\n      currentStep,\n      onNavigationStart,\n      onNavigationEnd,\n      onNavigationError,\n    ],\n  );\n\n  const jumpTo = useCallback(\n    (step: number) => {\n      const targetStep = Math.max(1, Math.min(step, totalStepsProp));\n\n      // Call navigation start callback\n      try {\n        onNavigationStart?.(currentStep, targetStep, \"jumpTo\");\n      } catch (error) {\n        onNavigationError?.(currentStep, targetStep, \"jumpTo\", error);\n        return;\n      }\n\n      if (targetStep === currentStep) {\n        onNavigationEnd?.(currentStep, targetStep, \"jumpTo\");\n        return;\n      }\n\n      // Reset retry count when jumping to a different step\n      setRetryCount(0);\n\n      // Skip transition animation and directly set the step\n      try {\n        setCurrentStep(targetStep);\n        onStepChange?.(targetStep);\n        onNavigationEnd?.(currentStep, targetStep, \"jumpTo\");\n      } catch (error) {\n        onNavigationError?.(currentStep, targetStep, \"jumpTo\", error);\n      }\n    },\n    [\n      totalStepsProp,\n      onStepChange,\n      currentStep,\n      onNavigationStart,\n      onNavigationEnd,\n      onNavigationError,\n    ],\n  );\n\n  const handleRetry = useCallback(async () => {\n    // Call navigation start callback\n    try {\n      onNavigationStart?.(currentStep, currentStep, \"retry\");\n    } catch (error) {\n      onNavigationError?.(currentStep, currentStep, \"retry\", error);\n      return;\n    }\n\n    // Increment retry count\n    setRetryCount((prev) => prev + 1);\n\n    // Trigger transition animation for retry\n    setTransitionState({\n      direction: null,\n      enteringStep: currentStep,\n      exitingStep: currentStep,\n    });\n\n    // After transition duration, reset transition state, set current step to force reprocessing, and trigger callback\n    setTimeout(() => {\n      try {\n        setTransitionState({\n          direction: null,\n          enteringStep: null,\n          exitingStep: null,\n        });\n        setCurrentStep(currentStep);\n        onStepRetry?.(currentStep);\n        onNavigationEnd?.(currentStep, currentStep, \"retry\");\n      } catch (error) {\n        onNavigationError?.(currentStep, currentStep, \"retry\", error);\n      }\n    }, 300);\n  }, [\n    currentStep,\n    onStepRetry,\n    onNavigationStart,\n    onNavigationEnd,\n    onNavigationError,\n  ]);\n\n  const handleNext = useCallback(async () => {\n    if (isLastStep) return;\n\n    const targetStep = currentStep + 1;\n\n    // Call navigation start callback\n    try {\n      onNavigationStart?.(currentStep, targetStep, \"next\");\n    } catch (error) {\n      onNavigationError?.(currentStep, targetStep, \"next\", error);\n      return;\n    }\n\n    // Handle step submission if provided\n    if (handleStepSubmit) {\n      try {\n        await handleStepSubmit();\n      } catch (error) {\n        onNavigationError?.(currentStep, targetStep, \"next\", error);\n        return;\n      }\n    }\n\n    goToStep(targetStep);\n  }, [\n    currentStep,\n    isLastStep,\n    goToStep,\n    handleStepSubmit,\n    onNavigationStart,\n    onNavigationEnd,\n    onNavigationError,\n  ]);\n\n  const handlePrevious = useCallback(async () => {\n    if (isFirstStep) return;\n\n    const targetStep = currentStep - 1;\n\n    // Call navigation start callback\n    try {\n      onNavigationStart?.(currentStep, targetStep, \"previous\");\n    } catch (error) {\n      onNavigationError?.(currentStep, targetStep, \"previous\", error);\n      return;\n    }\n\n    if (isBackValidate && triggerValidation) {\n      try {\n        const isValid = await triggerValidation();\n        if (!isValid) {\n          onNavigationError?.(\n            currentStep,\n            targetStep,\n            \"previous\",\n            new Error(\"Validation failed\"),\n          );\n          return;\n        }\n      } catch (error) {\n        onNavigationError?.(currentStep, targetStep, \"previous\", error);\n        return;\n      }\n    }\n\n    goToStep(targetStep);\n  }, [\n    currentStep,\n    isFirstStep,\n    isBackValidate,\n    triggerValidation,\n    goToStep,\n    onNavigationStart,\n    onNavigationEnd,\n    onNavigationError,\n  ]);\n\n  return useMemo(\n    () => ({\n      currentStep,\n      goToStep,\n      jumpTo,\n      handleNext,\n      handlePrevious,\n      handleRetry,\n      retryCount,\n      isFirstStep,\n      isLastStep,\n      totalSteps: totalStepsProp,\n      transitionState,\n    }),\n    [\n      currentStep,\n      totalStepsProp,\n      isFirstStep,\n      isLastStep,\n      goToStep,\n      jumpTo,\n      handleNext,\n      handlePrevious,\n      handleRetry,\n      retryCount,\n      transitionState,\n    ],\n  );\n}\n\n/**\n * Hook to optionally consume the step control context\n * @returns StepControlContextType | undefined - Step control methods and state, or undefined if not in context\n */\nexport function useOptionalStepControlContext() {\n  return useContext(StepControlContext);\n}\n\n/**\n * Backward compatibility hook\n * This maintains the original API where useStepControl could be used as both\n * a context consumer and a creator depending on whether options were passed\n */\nexport function useStepControl(\n  options?: UseCreateStepControlOptions,\n): StepControlContextType {\n  // If options are provided, create step control state independently\n  if (options) {\n    return useCreateStepControl(options);\n  }\n\n  // Otherwise, consume context (original behavior)\n  return useStepControlContext();\n}\n\n/**\n * Hook to consume the step control context\n * @returns StepControlContextType - Step control methods and state\n * @throws Error if used outside StepControlProvider\n */\nexport function useStepControlContext() {\n  const context = useContext(StepControlContext);\n  if (context === undefined) {\n    throw new Error(\"useStepControl must be used within a StepControlProvider\");\n  }\n  return context;\n}\n"],"mappings":"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"}

package/dist/esm/components/form/StepSchemaForm.d.ts

@@ -0,0 +1,22 @@
+import { StepFormConfig } from "./types.js";
+import { BaseRecord } from "@refinedev/core";
+import { FieldValues } from "react-hook-form";
+
+//#region src/components/form/StepSchemaForm.d.ts
+interface StepSchemaFormProps<TRequest extends FieldValues = FieldValues, TResponse extends BaseRecord = any> {
+  closeDialog: () => void;
+  config: StepFormConfig<TRequest, TResponse>;
+  onNavigationStart?: (fromStep: number, toStep: number, type: 'goTo' | 'jumpTo' | 'next' | 'previous' | 'retry') => void;
+  onNavigationEnd?: (fromStep: number, toStep: number, type: 'goTo' | 'jumpTo' | 'next' | 'previous' | 'retry') => void;
+  onNavigationError?: (fromStep: number, toStep: number, type: 'goTo' | 'jumpTo' | 'next' | 'previous' | 'retry', error: any) => void;
+}
+declare function StepSchemaForm<TRequest extends FieldValues = FieldValues, TResponse extends BaseRecord = any>({
+  closeDialog,
+  config,
+  onNavigationStart,
+  onNavigationEnd,
+  onNavigationError
+}: StepSchemaFormProps<TRequest, TResponse>): any;
+//#endregion
+export { StepSchemaForm };
+//# sourceMappingURL=StepSchemaForm.d.ts.map

package/dist/esm/components/form/StepSchemaForm.js

@@ -0,0 +1,176 @@
+import { isFormDialog, isWizardDialogConfig } from "../dialog/Dialog.types.js";
+import { useDialog } from "../dialog/Dialog.context.js";
+import { FormProvider } from "./context.js";
+import { StepControlProvider, useOptionalStepControlContext, useStepControl } from "./StepControlContext.js";
+import { AdapterType } from "./types.js";
+import { SchemaForm } from "./SchemaForm.js";
+import { getStepOnSuccessHandler, handleStepSubmission } from "./handlers/step.js";
+import { createStepRetryHandler } from "./utils/stepRetry.js";
+import { WizardStepContent } from "./WizardStepContent.js";
+import { isWizardForm } from "../shared/types/form.js";
+import { Environment } from "../shared/environment/builders.js";
+import { UnifiedFooter } from "../shared/UnifiedFooter.js";
+import "../index.js";
+import React, { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/StepSchemaForm.tsx
+const defaultStepFormFooter = (stepMethods, formMethods, currentDialog) => {
+	const footerEnvironment = Environment.footer().standalone().stepForm({
+		isSubmitting: formMethods?.formState?.isSubmitting || false,
+		methods: formMethods
+	}).step({
+		current: stepMethods.currentStep,
+		isFirst: stepMethods.isFirstStep,
+		isLast: stepMethods.isLastStep,
+		jumpTo: stepMethods.jumpTo,
+		onNext: stepMethods.handleSubmit || stepMethods.handleNext,
+		onPrevious: stepMethods.handlePrevious,
+		onRetry: stepMethods.handleRetry,
+		total: stepMethods.totalSteps
+	}).build();
+	return /* @__PURE__ */ jsx(UnifiedFooter, {
+		config: isFormDialog(currentDialog) || isWizardDialogConfig(currentDialog) ? currentDialog.formConfig : currentDialog,
+		environment: footerEnvironment
+	});
+};
+function StepSchemaForm({ closeDialog, config, onNavigationStart, onNavigationEnd, onNavigationError }) {
+	const { currentDialog, formMethods } = useDialog();
+	const existingStepControl = useOptionalStepControlContext();
+	if (existingStepControl && existingStepControl.totalSteps > 0) return /* @__PURE__ */ jsx(StepSchemaFormContent, {
+		closeDialog,
+		config,
+		currentDialog,
+		formMethods,
+		onNavigationStart,
+		onNavigationEnd,
+		onNavigationError
+	});
+	return /* @__PURE__ */ jsx(StepControlProvider, {
+		defaultStep: config.stepBehavior?.defaultStep,
+		isBackValidate: config.stepBehavior?.isBackValidate,
+		onStepRetry: createStepRetryHandler(config.steps),
+		totalSteps: config.steps.length,
+		onNavigationStart,
+		onNavigationEnd,
+		onNavigationError,
+		children: /* @__PURE__ */ jsx(StepSchemaFormContent, {
+			closeDialog,
+			config,
+			currentDialog,
+			formMethods,
+			onNavigationStart,
+			onNavigationEnd,
+			onNavigationError
+		})
+	});
+}
+function getStepFooterConfig(isActive, footerConfig, stepMethods, triggerSubmit) {
+	if (!isActive) return false;
+	if (footerConfig === false) return false;
+	return function StepFooterComponent(props) {
+		const { closeDialog, currentDialog, formMethods } = props;
+		return (footerConfig ?? defaultStepFormFooter)({
+			...stepMethods,
+			handleSubmit: triggerSubmit
+		}, formMethods?.current, closeDialog, currentDialog);
+	};
+}
+function StepSchemaFormContent({ closeDialog, config, formMethods, onNavigationStart, onNavigationEnd, onNavigationError }) {
+	const { currentStep, goToStep, jumpTo, handleNext, handlePrevious, handleRetry, isFirstStep, isLastStep, totalSteps, transitionState } = useStepControl();
+	const triggerSubmit = useCallback(() => {
+		if (!formMethods?.current?.handleSubmit) return;
+		handleStepSubmission({
+			closeDialog,
+			config: {
+				...config,
+				onSuccess: getStepOnSuccessHandler(config, formMethods?.current, isLastStep, closeDialog)
+			},
+			currentStep,
+			formMethods: formMethods?.current,
+			goToNextStep: handleNext,
+			isLastStep,
+			stepConfig: config.steps[currentStep - 1]
+		});
+	}, [
+		formMethods?.current,
+		config,
+		currentStep,
+		isLastStep,
+		closeDialog,
+		handleNext
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-1 grid-rows-1",
+		children: useMemo(() => {
+			const stepMethods = {
+				currentStep,
+				goToStep,
+				jumpTo,
+				handleNext,
+				handlePrevious,
+				handleRetry,
+				isFirstStep,
+				isLastStep,
+				totalSteps
+			};
+			return config.steps.map((step, index) => {
+				const isActive = currentStep === index + 1;
+				const isExiting = transitionState.exitingStep === index + 1;
+				const isEntering = transitionState.enteringStep === index + 1;
+				const formConfig = {
+					...config,
+					fields: step.fields,
+					footer: getStepFooterConfig(isActive, config.footer, stepMethods, triggerSubmit),
+					validationSchema: step.validationSchema
+				};
+				const schemaForm = /* @__PURE__ */ jsx(SchemaForm, {
+					active: isActive,
+					closeDialog,
+					config: formConfig
+				});
+				const formContent = isWizardForm(config) ? /* @__PURE__ */ jsx(WizardStepContent, {
+					className: "space-y-6",
+					description: step.description,
+					icon: step.icon,
+					isActive,
+					isEntering,
+					isExiting,
+					title: step.title,
+					children: schemaForm
+				}) : schemaForm;
+				return /* @__PURE__ */ jsx(FormProvider, {
+					adapter: config.adapter ?? "rhf",
+					config: {
+						...formConfig,
+						steps: config.steps
+					},
+					formInstance: formMethods,
+					children: formContent
+				}, `step-${index}`);
+			});
+		}, [
+			config,
+			currentStep,
+			goToStep,
+			jumpTo,
+			handleNext,
+			handlePrevious,
+			handleRetry,
+			isFirstStep,
+			isLastStep,
+			totalSteps,
+			triggerSubmit,
+			closeDialog,
+			formMethods,
+			transitionState,
+			onNavigationStart,
+			onNavigationEnd,
+			onNavigationError
+		])
+	});
+}
+
+//#endregion
+export { StepSchemaForm };
+//# sourceMappingURL=StepSchemaForm.js.map

package/dist/esm/components/form/StepSchemaForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepSchemaForm.js","names":[],"sources":["../../../../src/components/form/StepSchemaForm.tsx"],"sourcesContent":["import type { FieldValues } from \"react-hook-form\";\n\nimport { BaseRecord } from \"@refinedev/core\";\nimport React, { useCallback, useMemo } from \"react\";\n\nimport type { FormConfig, StepFormFooterRenderer } from \"./types\";\nimport { AdapterType, type StepFormConfig } from \"./types\";\n\nimport { useDialog } from \"@/components\";\nimport { isFormDialog, isWizardDialogConfig } from \"@/components\";\nimport { Environment, isWizardForm, UnifiedFooter } from \"@/components\";\nimport { FormProvider } from \"./context\";\nimport { getStepOnSuccessHandler, handleStepSubmission } from \"./handlers/step\";\nimport { SchemaForm } from \"./SchemaForm\";\nimport {\n  StepControlProvider,\n  useOptionalStepControlContext,\n  useStepControl,\n} from \"./StepControlContext\";\nimport { createStepRetryHandler } from \"./utils/stepRetry\";\nimport { WizardStepContent } from \"./WizardStepContent\";\n\nconst defaultStepFormFooter: StepFormFooterRenderer = (\n  stepMethods,\n  formMethods,\n  currentDialog,\n) => {\n  const footerEnvironment = Environment.footer()\n    .standalone()\n    .stepForm({\n      isSubmitting: formMethods?.formState?.isSubmitting || false,\n      methods: formMethods,\n    })\n    .step({\n      current: stepMethods.currentStep,\n      isFirst: stepMethods.isFirstStep,\n      isLast: stepMethods.isLastStep,\n      jumpTo: stepMethods.jumpTo,\n      onNext: stepMethods.handleSubmit || stepMethods.handleNext,\n      onPrevious: stepMethods.handlePrevious,\n      onRetry: stepMethods.handleRetry,\n      total: stepMethods.totalSteps,\n    })\n    .build();\n\n  return (\n    <UnifiedFooter\n      config={\n        isFormDialog(currentDialog) || isWizardDialogConfig(currentDialog)\n          ? currentDialog.formConfig\n          : currentDialog\n      }\n      environment={footerEnvironment}\n    />\n  );\n};\n\ninterface StepSchemaFormContentProps<\n  TRequest extends FieldValues = FieldValues,\n  TResponse extends BaseRecord = any,\n> {\n  closeDialog: () => void;\n  config: StepFormConfig<TRequest, TResponse>;\n  currentDialog: any;\n  formMethods: any;\n  onNavigationStart?: (fromStep: number, toStep: number, type: 'goTo' | 'jumpTo' | 'next' | 'previous' | 'retry') => void;\n  onNavigationEnd?: (fromStep: number, toStep: number, type: 'goTo' | 'jumpTo' | 'next' | 'previous' | 'retry') => void;\n  onNavigationError?: (fromStep: number, toStep: number, type: 'goTo' | 'jumpTo' | 'next' | 'previous' | 'retry', error: any) => void;\n}\n\ninterface StepSchemaFormProps<\n  TRequest extends FieldValues = FieldValues,\n  TResponse extends BaseRecord = any,\n> {\n  closeDialog: () => void;\n  config: StepFormConfig<TRequest, TResponse>;\n  onNavigationStart?: (fromStep: number, toStep: number, type: 'goTo' | 'jumpTo' | 'next' | 'previous' | 'retry') => void;\n  onNavigationEnd?: (fromStep: number, toStep: number, type: 'goTo' | 'jumpTo' | 'next' | 'previous' | 'retry') => void;\n  onNavigationError?: (fromStep: number, toStep: number, type: 'goTo' | 'jumpTo' | 'next' | 'previous' | 'retry', error: any) => void;\n}\n\nexport function StepSchemaForm<\n  TRequest extends FieldValues = FieldValues,\n  TResponse extends BaseRecord = any,\n>({ closeDialog, config, onNavigationStart, onNavigationEnd, onNavigationError }: StepSchemaFormProps<TRequest, TResponse>) {\n  const { currentDialog, formMethods } = useDialog();\n  const existingStepControl = useOptionalStepControlContext();\n\n  // If we're already in a step control context, render content directly\n  if (existingStepControl && existingStepControl.totalSteps > 0) {\n    return (\n      <StepSchemaFormContent\n        closeDialog={closeDialog}\n        config={config}\n        currentDialog={currentDialog}\n        formMethods={formMethods}\n        onNavigationStart={onNavigationStart}\n        onNavigationEnd={onNavigationEnd}\n        onNavigationError={onNavigationError}\n      />\n    );\n  }\n\n  // Otherwise, create a new step control context\n  return (\n    <StepControlProvider\n      defaultStep={config.stepBehavior?.defaultStep}\n      isBackValidate={config.stepBehavior?.isBackValidate}\n      onStepRetry={createStepRetryHandler(config.steps)}\n      totalSteps={config.steps.length}\n      onNavigationStart={onNavigationStart}\n      onNavigationEnd={onNavigationEnd}\n      onNavigationError={onNavigationError}>\n      <StepSchemaFormContent\n        closeDialog={closeDialog}\n        config={config}\n        currentDialog={currentDialog}\n        formMethods={formMethods}\n        onNavigationStart={onNavigationStart}\n        onNavigationEnd={onNavigationEnd}\n        onNavigationError={onNavigationError}\n      />\n    </StepControlProvider>\n  );\n}\n\nfunction getStepFooterConfig<\n  TRequest extends FieldValues,\n  TResponse extends BaseRecord,\n>(\n  isActive: boolean,\n  footerConfig: StepFormConfig<TRequest, TResponse>[\"footer\"],\n  stepMethods: any,\n  triggerSubmit: () => void,\n): false | React.ComponentType<any> {\n  if (!isActive) {\n    return false;\n  }\n  if (footerConfig === false) {\n    return false;\n  }\n\n  // Return a Higher-Order Component that receives props and calls the original footer function\n  return function StepFooterComponent(props: any) {\n    const { closeDialog, currentDialog, formMethods } = props;\n    const footerFn = footerConfig ?? defaultStepFormFooter;\n    return footerFn(\n      { ...stepMethods, handleSubmit: triggerSubmit },\n      formMethods?.current,\n      closeDialog,\n      currentDialog,\n    );\n  };\n}\n\nfunction StepSchemaFormContent<\n  TRequest extends FieldValues = FieldValues,\n  TResponse extends BaseRecord = any,\n>({\n  closeDialog,\n  config,\n  formMethods,\n  onNavigationStart,\n  onNavigationEnd,\n  onNavigationError,\n}: StepSchemaFormContentProps<TRequest, TResponse>) {\n  const stepControl = useStepControl();\n  const {\n    currentStep,\n    goToStep, // Use context's goToStep which now has transitions\n    jumpTo,\n    handleNext,\n    handlePrevious,\n    handleRetry,\n    isFirstStep,\n    isLastStep,\n    totalSteps,\n    transitionState, // Get transition state from context\n  } = stepControl;\n\n  const triggerSubmit = useCallback(() => {\n    if (!formMethods?.current?.handleSubmit) return;\n\n    handleStepSubmission({\n      closeDialog,\n      config: {\n        ...config,\n        onSuccess: getStepOnSuccessHandler(\n          config,\n          formMethods?.current,\n          isLastStep,\n          closeDialog,\n        ),\n      },\n      currentStep, // Keep 1-based for external APIs\n      formMethods: formMethods?.current,\n      goToNextStep: handleNext, // Add the missing goToNextStep parameter\n      isLastStep,\n      stepConfig: config.steps[currentStep - 1], // Convert to 0-based index for array access\n    });\n  }, [formMethods?.current, config, currentStep, isLastStep, closeDialog, handleNext]);\n\n  const schemaForms = useMemo(() => {\n    const stepMethods = {\n      currentStep, // Keep 1-based for external APIs\n      goToStep, // Use context's goToStep directly\n      jumpTo,\n      handleNext,\n      handlePrevious,\n      handleRetry,\n      isFirstStep,\n      isLastStep,\n      totalSteps,\n    };\n\n    return config.steps.map((step, index) => {\n      const isActive = currentStep === index + 1; // Compare 1-based currentStep with 0-based index\n      const isExiting = transitionState.exitingStep === index + 1;\n      const isEntering = transitionState.enteringStep === index + 1;\n\n      const formConfig: FormConfig<TRequest, TResponse> = {\n        ...config,\n        fields: step.fields,\n        footer: getStepFooterConfig(\n          isActive,\n          config.footer,\n          stepMethods,\n          triggerSubmit,\n        ),\n        validationSchema: step.validationSchema,\n      };\n\n      const schemaForm = (\n        <SchemaForm<TRequest>\n          active={isActive}\n          closeDialog={closeDialog}\n          config={formConfig}\n        />\n      );\n\n      const formContent = isWizardForm(config) ? (\n        <WizardStepContent\n          className=\"space-y-6\"\n          description={step.description}\n          icon={step.icon}\n          isActive={isActive}\n          isEntering={isEntering}\n          isExiting={isExiting}\n          title={step.title}>\n          {schemaForm}\n        </WizardStepContent>\n      ) : (\n        schemaForm\n      );\n\n      return (\n        <FormProvider\n          adapter={config.adapter ?? AdapterType.RHF}\n          config={{ ...formConfig, steps: config.steps }}\n          formInstance={formMethods}\n          key={`step-${index}`}>\n          {formContent}\n        </FormProvider>\n      );\n    });\n  }, [\n    config,\n    currentStep,\n    goToStep,\n    jumpTo,\n    handleNext,\n    handlePrevious,\n    handleRetry,\n    isFirstStep,\n    isLastStep,\n    totalSteps,\n    triggerSubmit,\n    closeDialog,\n    formMethods,\n    transitionState,\n    onNavigationStart,\n    onNavigationEnd,\n    onNavigationError,\n  ]);\n\n  return <div className=\"grid grid-cols-1 grid-rows-1\">{schemaForms}</div>;\n}\n"],"mappings":"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"}

package/dist/esm/components/form/WizardForm.d.ts

@@ -0,0 +1,16 @@
+import { WizardFormConfig } from "./types.js";
+import { BaseRecord } from "@refinedev/core";
+import { FieldValues } from "react-hook-form";
+
+//#region src/components/form/WizardForm.d.ts
+interface WizardFormProps<TRequest extends FieldValues = FieldValues, TResponse extends BaseRecord = any> {
+  closeDialog?: () => void;
+  config: WizardFormConfig<TRequest, TResponse>;
+}
+declare function WizardForm<TRequest extends FieldValues = FieldValues, TResponse extends BaseRecord = any>({
+  closeDialog,
+  config
+}: WizardFormProps<TRequest, TResponse>): any;
+//#endregion
+export { WizardForm };
+//# sourceMappingURL=WizardForm.d.ts.map

package/dist/esm/components/form/WizardForm.js

@@ -0,0 +1,126 @@
+import { useDialog } from "../dialog/Dialog.context.js";
+import { resolveAllowStepNavigation } from "../shared/utils/stepState.js";
+import { useIsInDialog } from "../dialog/utils/dialogDetection.js";
+import { StepControlProvider, useStepControl } from "./StepControlContext.js";
+import { createStepRetryHandler } from "./utils/stepRetry.js";
+import { StepSchemaForm } from "./StepSchemaForm.js";
+import { ProgressStyleType } from "../shared/types/header.js";
+import { Environment } from "../shared/environment/builders.js";
+import { UnifiedFooter } from "../shared/UnifiedFooter.js";
+import { UnifiedHeader } from "../shared/UnifiedHeader.js";
+import "../index.js";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/form/WizardForm.tsx
+function WizardForm({ closeDialog = () => void 0, config }) {
+	const { formMethods } = useDialog();
+	const existingStepControl = useStepControl();
+	const isInDialog = useIsInDialog();
+	if (existingStepControl && existingStepControl.totalSteps > 0) return /* @__PURE__ */ jsx(WizardFormContent, {
+		closeDialog,
+		config,
+		formMethods,
+		isInDialog
+	});
+	return /* @__PURE__ */ jsx(StepControlProvider, {
+		defaultStep: config.stepBehavior?.defaultStep,
+		isBackValidate: config.stepBehavior?.isBackValidate,
+		onStepRetry: createStepRetryHandler(config.steps),
+		totalSteps: config.steps.length,
+		onNavigationStart: config.onNavigationStart,
+		onNavigationEnd: config.onNavigationEnd,
+		onNavigationError: config.onNavigationError,
+		children: /* @__PURE__ */ jsx(WizardFormContent, {
+			closeDialog,
+			config,
+			formMethods,
+			isInDialog
+		})
+	});
+}
+function WizardFormContent({ closeDialog, config, formMethods, isInDialog }) {
+	const { currentDialog } = useDialog();
+	const stepControl = useStepControl();
+	const { currentStep, goToStep, isFirstStep, isLastStep, totalSteps } = stepControl;
+	const isSubmitting = formMethods?.current?.formState?.isSubmitting || false;
+	const isStepNavigationAllowed = useMemo(() => {
+		return resolveAllowStepNavigation(config.allowStepNavigation, config.steps, currentStep);
+	}, [
+		config.allowStepNavigation,
+		config.steps,
+		currentStep
+	]);
+	const currentStepConfig = config.steps[currentStep - 1];
+	const headerEnvironmentBuilder = Environment.header();
+	if (isInDialog) headerEnvironmentBuilder.dialog({
+		dialogConfig: currentDialog || {},
+		onClose: closeDialog
+	});
+	else headerEnvironmentBuilder.standalone();
+	const headerEnvironment = headerEnvironmentBuilder.content({
+		actions: void 0,
+		description: currentStepConfig?.description,
+		title: currentStepConfig?.title
+	}).wizardNavigation({
+		allowNavigation: isStepNavigationAllowed,
+		current: currentStep,
+		disabledSteps: config.stepNavigationDisabled,
+		onStepClick: goToStep,
+		progressStyle: "timeline",
+		steps: config.steps,
+		total: totalSteps
+	}).build();
+	return /* @__PURE__ */ jsxs("div", {
+		className: config.wizardClassName || "space-y-6",
+		children: [!isInDialog && /* @__PURE__ */ jsx(UnifiedHeader, {
+			config,
+			environment: headerEnvironment
+		}), /* @__PURE__ */ jsx("div", {
+			className: "space-y-4",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: /* @__PURE__ */ jsx(StepSchemaForm, {
+					closeDialog,
+					config: {
+						...config,
+						footer: (stepMethods, formMethods, closeDialog, currentDialog) => {
+							const footerEnvironmentBuilder = Environment.footer();
+							if (isInDialog) footerEnvironmentBuilder.dialog({
+								dialogConfig: currentDialog || {},
+								onClose: closeDialog
+							});
+							else footerEnvironmentBuilder.standalone();
+							return /* @__PURE__ */ jsx(UnifiedFooter, {
+								config,
+								environment: footerEnvironmentBuilder.wizardForm({
+									isSubmitting,
+									methods: {
+										...formMethods?.current,
+										handleSubmit: stepMethods.handleSubmit
+									}
+								}).step({
+									current: currentStep,
+									isFirst: isFirstStep,
+									isLast: isLastStep,
+									jumpTo: stepControl.jumpTo,
+									onNext: stepMethods.handleNext,
+									onPrevious: stepMethods.handlePrevious,
+									onRetry: stepMethods.handleRetry,
+									retryCount: stepControl.retryCount,
+									total: totalSteps
+								}).build()
+							});
+						},
+						header: false,
+						stepBehavior: config.stepBehavior
+					}
+				})
+			})
+		})]
+	});
+}
+
+//#endregion
+export { WizardForm };
+//# sourceMappingURL=WizardForm.js.map