@trackunit/react-form-wizard 0.1.338 → 1.0.1

package/index.cjs.js

@@ -209,10 +209,11 @@ const cvaFormWizardComponentStepForm = cssClassVarianceUtilities.cvaMerge(["grid
  * A wrapper component used by the FormWizard component to render each step.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, onPrimaryAction, }) => {
+const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, onPrimaryAction, initialFullFormState, }) => {
     const navigate = reactRouter.useNavigate();
     const [isSubmitting, setIsSubmitting] = react.useState(false);
     const [submitHandlerInternal, setSubmitHandlerInternal] = react.useState(null);
+    const [beforeSubmitInternal, setBeforeSubmitInternal] = react.useState(null);
     const form = reactHookForm.useForm({
         resolver: zod.zodResolver(fullFormSchema.shape[stepKey]),
         mode: "all",
@@ -239,8 +240,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     }, [form.formState.isValid, setStepStates, stepKey]);
     const isLastStep = nextStepPath === null;
     const handleCancel = react.useCallback(() => {
-        return onCancel ? onCancel() : navigate({ to: "../../" });
-    }, [onCancel, navigate]);
+        return onCancel ? onCancel(String(stepKey)) : navigate({ to: "../../" });
+    }, [onCancel, navigate, stepKey]);
     const setSubmitHandler = react.useCallback(callback => {
         const wrappedCallbackFunction = async (fullFormStateInner) => {
             setIsSubmitting(true);
@@ -249,8 +250,19 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         };
         setSubmitHandlerInternal(() => wrappedCallbackFunction);
     }, [setSubmitHandlerInternal]);
+    const beforeStepSubmit = react.useCallback(callback => {
+        const wrappedCallbackFunction = async (fullFormStateInner) => {
+            await callback(fullFormStateInner);
+        };
+        setBeforeSubmitInternal(() => wrappedCallbackFunction);
+    }, [setBeforeSubmitInternal]);
+    const resetFullFormState = react.useCallback(callback => {
+        setFullFormState(initialFullFormState);
+        callback();
+    }, [initialFullFormState, setFullFormState]);
     const isEmptyStep = sharedUtils.objectKeys(form.getValues()).length === 0;
     const emptyStepSubmitHandler = react.useCallback(() => {
+        beforeSubmitInternal === null || beforeSubmitInternal === void 0 ? void 0 : beforeSubmitInternal(fullFormState);
         if (isLastStep) {
             submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
         }
@@ -258,10 +270,11 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
             // eslint-disable-next-line local-rules/no-typescript-assertion
             navigate({ to: basePath, params: { stepPath: nextStepPath } });
         }
-    }, [basePath, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
+    }, [basePath, beforeSubmitInternal, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
     const stepSubmitHandler = react.useMemo(() => form.handleSubmit(async (data) => {
         //? This state is not updated for the submit handler below; therefore, there is duplication.
         setFullFormState(prev => ({ ...prev, [stepKey]: data }));
+        beforeSubmitInternal === null || beforeSubmitInternal === void 0 ? void 0 : beforeSubmitInternal({ ...fullFormState, [stepKey]: data });
         if (isLastStep) {
             //? This state is not updated for the submit handler below; therefore, there is duplication.
             await (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal({ ...fullFormState, [stepKey]: data }));
@@ -272,6 +285,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         }
     }), [
         basePath,
+        beforeSubmitInternal,
         form,
         fullFormState,
         isLastStep,
@@ -310,6 +324,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                         form,
                         fullForm,
                         setSubmitHandler: isLastStep ? setSubmitHandler : null,
+                        beforeStepSubmit: beforeStepSubmit,
+                        resetFullFormState,
                     }) }) }), jsxRuntime.jsx(FormWizardFooter, { stepForms,
                 onBack: previousStepPath
                     ? // eslint-disable-next-line local-rules/no-typescript-assertion
@@ -338,16 +354,18 @@ const cvaStepContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "grid", "
 const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
     const navigate = reactRouter.useNavigate();
     const { stepPath, subStepPath } = reactRouter.useParams({ strict: false });
+    const initialFullFormState = react.useMemo(() => 
+    // eslint-disable-next-line local-rules/no-typescript-assertion
+    sharedUtils.objectFromEntries(sharedUtils.objectEntries(steps)
+        .filter(([_, { defaultValues }]) => defaultValues)
+        .map(([key, { defaultValues }]) => [key, defaultValues])), [steps]);
     const [stepStates, setStepStates] = react.useState({});
     const [stepForms, setStepForms] = react.useState({});
     const [fullFormState, setFullFormState] = react.useState(
     // DeepPartial does not allow empty object and properly working around it would severely complicate the code (DefaultValues uses DeepPartial under the hood)
     // A possible workaround could be to type it Partial<<DeepPartial<...>>> everywhere
     // Any weakening of the type in a union would be worse and likely just push the issue forward until it hits react-hook-form
-    // eslint-disable-next-line local-rules/no-typescript-assertion
-    sharedUtils.objectFromEntries(sharedUtils.objectEntries(steps)
-        .filter(([_, { defaultValues }]) => defaultValues)
-        .map(([key, { defaultValues }]) => [key, defaultValues])));
+    initialFullFormState);
     // If URL does not match a key from the schema, navigate to the first step
     const firstSchemaKey = String(sharedUtils.objectKeys(fullFormSchema.shape)[0]);
     const keyToCheck = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
@@ -466,7 +484,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                 fullFormSchema,
                 lastStepPrimaryActionLabel,
                 nextStepPath: (_b = (_a = entriesOfRenderableSteps[index + 1]) === null || _a === void 0 ? void 0 : _a[0].toString()) !== null && _b !== void 0 ? _b : null,
-                previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null }, stepKey.toString())) : null;
+                previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null,
+                initialFullFormState }, stepKey.toString())) : null;
         });
     }, [
         basePath,
@@ -478,6 +497,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
         onCancel,
         stepForms,
         steps,
+        initialFullFormState,
     ]);
     return (jsxRuntime.jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaFormWizardLayout(), children: [jsxRuntime.jsx(FormWizardSidebar, { children: sidebarSteps }), jsxRuntime.jsx("div", { className: cvaStepContainer(), children: stepWrapper })] }) }));
 };

package/index.esm.js

@@ -207,10 +207,11 @@ const cvaFormWizardComponentStepForm = cvaMerge(["grid-rows-min-fr-min", "grid",
  * A wrapper component used by the FormWizard component to render each step.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, onPrimaryAction, }) => {
+const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, onPrimaryAction, initialFullFormState, }) => {
     const navigate = useNavigate();
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [submitHandlerInternal, setSubmitHandlerInternal] = useState(null);
+    const [beforeSubmitInternal, setBeforeSubmitInternal] = useState(null);
     const form = useForm({
         resolver: zodResolver(fullFormSchema.shape[stepKey]),
         mode: "all",
@@ -237,8 +238,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     }, [form.formState.isValid, setStepStates, stepKey]);
     const isLastStep = nextStepPath === null;
     const handleCancel = useCallback(() => {
-        return onCancel ? onCancel() : navigate({ to: "../../" });
-    }, [onCancel, navigate]);
+        return onCancel ? onCancel(String(stepKey)) : navigate({ to: "../../" });
+    }, [onCancel, navigate, stepKey]);
     const setSubmitHandler = useCallback(callback => {
         const wrappedCallbackFunction = async (fullFormStateInner) => {
             setIsSubmitting(true);
@@ -247,8 +248,19 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         };
         setSubmitHandlerInternal(() => wrappedCallbackFunction);
     }, [setSubmitHandlerInternal]);
+    const beforeStepSubmit = useCallback(callback => {
+        const wrappedCallbackFunction = async (fullFormStateInner) => {
+            await callback(fullFormStateInner);
+        };
+        setBeforeSubmitInternal(() => wrappedCallbackFunction);
+    }, [setBeforeSubmitInternal]);
+    const resetFullFormState = useCallback(callback => {
+        setFullFormState(initialFullFormState);
+        callback();
+    }, [initialFullFormState, setFullFormState]);
     const isEmptyStep = objectKeys(form.getValues()).length === 0;
     const emptyStepSubmitHandler = useCallback(() => {
+        beforeSubmitInternal === null || beforeSubmitInternal === void 0 ? void 0 : beforeSubmitInternal(fullFormState);
         if (isLastStep) {
             submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal(fullFormState);
         }
@@ -256,10 +268,11 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
             // eslint-disable-next-line local-rules/no-typescript-assertion
             navigate({ to: basePath, params: { stepPath: nextStepPath } });
         }
-    }, [basePath, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
+    }, [basePath, beforeSubmitInternal, fullFormState, isLastStep, navigate, nextStepPath, submitHandlerInternal]);
     const stepSubmitHandler = useMemo(() => form.handleSubmit(async (data) => {
         //? This state is not updated for the submit handler below; therefore, there is duplication.
         setFullFormState(prev => ({ ...prev, [stepKey]: data }));
+        beforeSubmitInternal === null || beforeSubmitInternal === void 0 ? void 0 : beforeSubmitInternal({ ...fullFormState, [stepKey]: data });
         if (isLastStep) {
             //? This state is not updated for the submit handler below; therefore, there is duplication.
             await (submitHandlerInternal === null || submitHandlerInternal === void 0 ? void 0 : submitHandlerInternal({ ...fullFormState, [stepKey]: data }));
@@ -270,6 +283,7 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
         }
     }), [
         basePath,
+        beforeSubmitInternal,
         form,
         fullFormState,
         isLastStep,
@@ -308,6 +322,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
                         form,
                         fullForm,
                         setSubmitHandler: isLastStep ? setSubmitHandler : null,
+                        beforeStepSubmit: beforeStepSubmit,
+                        resetFullFormState,
                     }) }) }), jsx(FormWizardFooter, { stepForms,
                 onBack: previousStepPath
                     ? // eslint-disable-next-line local-rules/no-typescript-assertion
@@ -336,16 +352,18 @@ const cvaStepContainer = cvaMerge(["h-full", "grid", "bg-white", "overflow-hidde
 const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
     const navigate = useNavigate();
     const { stepPath, subStepPath } = useParams({ strict: false });
+    const initialFullFormState = useMemo(() => 
+    // eslint-disable-next-line local-rules/no-typescript-assertion
+    objectFromEntries(objectEntries(steps)
+        .filter(([_, { defaultValues }]) => defaultValues)
+        .map(([key, { defaultValues }]) => [key, defaultValues])), [steps]);
     const [stepStates, setStepStates] = useState({});
     const [stepForms, setStepForms] = useState({});
     const [fullFormState, setFullFormState] = useState(
     // DeepPartial does not allow empty object and properly working around it would severely complicate the code (DefaultValues uses DeepPartial under the hood)
     // A possible workaround could be to type it Partial<<DeepPartial<...>>> everywhere
     // Any weakening of the type in a union would be worse and likely just push the issue forward until it hits react-hook-form
-    // eslint-disable-next-line local-rules/no-typescript-assertion
-    objectFromEntries(objectEntries(steps)
-        .filter(([_, { defaultValues }]) => defaultValues)
-        .map(([key, { defaultValues }]) => [key, defaultValues])));
+    initialFullFormState);
     // If URL does not match a key from the schema, navigate to the first step
     const firstSchemaKey = String(objectKeys(fullFormSchema.shape)[0]);
     const keyToCheck = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
@@ -464,7 +482,8 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
                 fullFormSchema,
                 lastStepPrimaryActionLabel,
                 nextStepPath: (_b = (_a = entriesOfRenderableSteps[index + 1]) === null || _a === void 0 ? void 0 : _a[0].toString()) !== null && _b !== void 0 ? _b : null,
-                previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null }, stepKey.toString())) : null;
+                previousStepPath: (_d = (_c = entriesOfRenderableSteps[index - 1]) === null || _c === void 0 ? void 0 : _c[0].toString()) !== null && _d !== void 0 ? _d : null,
+                initialFullFormState }, stepKey.toString())) : null;
         });
     }, [
         basePath,
@@ -476,6 +495,7 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
         onCancel,
         stepForms,
         steps,
+        initialFullFormState,
     ]);
     return (jsx("div", { className: cvaFormWizardContainer({ className }), "data-testid": dataTestId, children: jsxs("div", { className: cvaFormWizardLayout(), children: [jsx(FormWizardSidebar, { children: sidebarSteps }), jsx("div", { className: cvaStepContainer(), children: stepWrapper })] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-wizard",
-  "version": "0.1.338",
+  "version": "1.0.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -9,10 +9,10 @@
     "@hookform/resolvers": "^3.3.4",
     "react-hook-form": "7.53.1",
     "@tanstack/react-router": "1.47.1",
-    "@trackunit/shared-utils": "^1.0.0",
-    "@trackunit/css-class-variance-utilities": "^0.0.61",
-    "@trackunit/react-components": "^0.5.43",
-    "@trackunit/i18n-library-translation": "^0.0.232"
+    "@trackunit/shared-utils": "^1.0.1",
+    "@trackunit/css-class-variance-utilities": "^1.0.0",
+    "@trackunit/react-components": "^1.0.1",
+    "@trackunit/i18n-library-translation": "^1.0.1"
   },
   "engines": {
     "node": ">=20.x",

package/src/FormWizard/useFormWizard.d.ts

@@ -13,6 +13,8 @@ export type StepComponentPropsInner<TStepSchema extends TFullSchemaValue[keyof T
     form: UseFormReturn<TStepSchema>;
     fullForm: UseFormReturn<TFullSchemaValue>;
     setSubmitHandler: ((onFinalSubmit: (fullFormState: TFullSchemaValue) => void) => void) | null;
+    beforeStepSubmit?: ((beforeSubmit: (fullFormState: TFullSchemaValue) => void) => void) | null;
+    resetFullFormState?: ((reset: () => void) => void) | null;
 };
 export interface SimpleStepProps {
     title: string;
@@ -38,7 +40,7 @@ export type StringWithStepKey<TPath> = TPath extends `${infer _Prefix}/$stepPath
 export interface UseFormWizardProps<TFullSchema extends SomeZodObject, TStepDefinitions extends StepDefinitions<TFullSchema>> {
     fullFormSchema: TFullSchema;
     lastStepPrimaryActionLabel: string;
-    onCancel?: () => void;
+    onCancel?: (stepKey: string) => void;
     basePath: StringWithStepKey<`${RouteIds<RegisteredRouter["routeTree"]>}`>;
     steps: TStepDefinitions;
     isEdit?: boolean;

package/src/FormWizardStepWrapper/FormWizardStepWrapper.d.ts

@@ -11,7 +11,7 @@ export interface FormWizardStepWrapperProps<TStepKey extends keyof z.TypeOf<TFul
     nextStepPath: string | null;
     basePath: StringWithStepKey<`${RoutePaths<RegisteredRouter["routeTree"]>}`>;
     previousStepPath: string | null;
-    onCancel?: () => void;
+    onCancel?: (stepKey: string) => void;
     fullFormSchema: TFullSchema;
     fullFormState: DefaultValues<z.TypeOf<TFullSchema>>;
     setFullFormState: Dispatch<SetStateAction<DefaultValues<z.TypeOf<TFullSchema>>>>;
@@ -23,9 +23,10 @@ export interface FormWizardStepWrapperProps<TStepKey extends keyof z.TypeOf<TFul
         [TStepKey2 in keyof z.TypeOf<TFullSchema>]: UseFormReturn<z.TypeOf<TFullSchema>[TStepKey2]>;
     }>>>;
     onPrimaryAction?: (form: UseFormReturn<DeepPartial<z.TypeOf<TFullSchema>[TStepKey]>>) => Promise<unknown> | void;
+    initialFullFormState: DefaultValues<z.TypeOf<TFullSchema>>;
 }
 /**
  * A wrapper component used by the FormWizard component to render each step.
  * In most cases you should not be using this component directly, but rather use the FormWizard component.
  */
-export declare const FormWizardStepWrapper: <TFullSchema extends AnyZodObject, TStepKey extends keyof z.TypeOf<TFullSchema>>({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, onPrimaryAction, }: FormWizardStepWrapperProps<TStepKey, TFullSchema>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormWizardStepWrapper: <TFullSchema extends AnyZodObject, TStepKey extends keyof z.TypeOf<TFullSchema>>({ stepKey, onCancel, description, title, component, nextStepPath, previousStepPath, lastStepPrimaryActionLabel, fullFormSchema, setFullFormState, fullFormState, stepForms, setStepForms, setStepStates, basePath, containerClassName, onPrimaryAction, initialFullFormState, }: FormWizardStepWrapperProps<TStepKey, TFullSchema>) => import("react/jsx-runtime").JSX.Element;