@trackunit/react-form-wizard 0.1.105 → 0.1.106

package/index.cjs.js

@@ -263,9 +263,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     }, [form.formState.isValid, setStepStates, stepKey]);
     const isLastStep = nextStepPath === null;
     const handleCancel = react.useCallback(() => {
-        // TODO: Get previous path from before wizard the wizard was started
-        return onCancel ? onCancel() : navigate({ to: basePath, params: { stepPath: "" } });
-    }, [onCancel, navigate, basePath]);
+        return onCancel ? onCancel() : navigate({ to: "../../" });
+    }, [onCancel, navigate]);
     const setSubmitHandler = react.useCallback(callback => {
         const wrappedCallbackFunction = (fullFormStateInner) => __awaiter(void 0, void 0, void 0, function* () {
             setIsSubmitting(true);
@@ -309,7 +308,6 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     const handleSubmit = react.useMemo(() => {
         return isEmptyStep && form.formState.isValid ? emptyStepSubmitHandler : stepSubmitHandler;
     }, [emptyStepSubmitHandler, form.formState.isValid, isEmptyStep, stepSubmitHandler]);
-    // TODO Replace with hoooooook
     react.useEffect(() => {
         // submit on cmd/ctrl + enter, always
         const handleKeyDown = (event) => {
@@ -355,6 +353,7 @@ const cvaStepContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "grid", "
  * Use the useFormWizard hook to generate the props for this component.
  */
 const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
+    const navigate = reactRouter.useNavigate();
     const { stepPath, subStepPath } = reactRouter.useParams({ strict: false });
     const [stepStates, setStepStates] = react.useState({});
     const [stepForms, setStepForms] = react.useState({});
@@ -366,6 +365,12 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
     sharedUtils.objectFromEntries(sharedUtils.objectEntries(steps)
         .filter(([_, { defaultValues }]) => defaultValues)
         .map(([key, { defaultValues }]) => [key, defaultValues])));
+    // 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;
+    if (fullFormSchema.shape[keyToCheck] === undefined) {
+        navigate({ to: basePath, params: { stepPath: firstSchemaKey } });
+    }
     const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
     const currentVisibleStepIndex = sharedUtils.objectKeys(steps)
         .filter(key => {
@@ -464,7 +469,53 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
 };
 
 /**
- * A hook to generate the props for the FormWizard component.
+ * Generates the props for rendering a Form Wizard component.
+ * This hook processes the provided step definitions and form schema to prepare the necessary props for the Form Wizard component.
+ *
+ * @param props Configuration options for the Form Wizard component.
+ * @param props.fullFormSchema The Zod schema for the entire form.
+ * @param props.lastStepPrimaryActionLabel Label for the primary action button on the last step.
+ * @param props.onCancel Callback to execute when canceling the form submission. Defaults to navigating to the parent route.
+ * @param props.basePath Base path for routing within the form wizard.
+ * @param props.steps Definitions for each step in the form wizard. Keys are used as path and a slash is used to define a substep.
+ * @param props.isEdit Indicates whether the form is being edited or created. If the step has a default value, it is considered valid when editing.
+ * @example
+ * ```
+ * typescript
+ * import { useFormWizard } from './path/to/useFormWizard';
+ * const { steps,...wizardProps } = useFormWizard({
+ * fullFormSchema: useYourZodSchema(),
+ * lastStepPrimaryActionLabel: 'Finish',
+ * basePath: '/your-base-path/$stepPath',
+ * steps: {
+ *   entry: {
+ *     title: "Add your thing",
+ *     description: Choose how to add your thing,
+ *     sidebarDescription: Choose how to add your thing,
+ *     defaultValues: { entryMethod: "upload" },
+ *     component: stepProps => <EntryMethodStep {...stepProps} />,
+ *   },
+ *   "entry/manual": {
+ *     shouldRender: fullFormState => fullFormState.entry?.entryMethod === "manual",
+ *     title: "Type your thing",
+ *     description: "Manually type your thing",
+ *     component: stepProps => <ManualStep {...stepProps} />,
+ *   },
+ *   "entry/upload": {
+ *     shouldRender: fullFormState => fullFormState.entry?.entryMethod === "upload",
+ *     title: "Upload your thing",
+ *     description: "Upload a spreadsheet thing",
+ *     component: stepProps => <UploadStep {...stepProps} />,
+ *   },
+ *   review: {
+ *     title: "Review & Save",
+ *     description: "Make sure everythings looks alright",
+ *     sidebarDescription: "Make sure everythings looks alright",
+ *     component: stepProps => <ReviewSaveStep {...stepProps} />,
+ *   },
+ * },
+ * ```
+});
  */
 const useFormWizard = (props) => {
     return react.useMemo(() => (Object.assign(Object.assign({}, props), { 

package/index.esm.js

@@ -259,9 +259,8 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     }, [form.formState.isValid, setStepStates, stepKey]);
     const isLastStep = nextStepPath === null;
     const handleCancel = useCallback(() => {
-        // TODO: Get previous path from before wizard the wizard was started
-        return onCancel ? onCancel() : navigate({ to: basePath, params: { stepPath: "" } });
-    }, [onCancel, navigate, basePath]);
+        return onCancel ? onCancel() : navigate({ to: "../../" });
+    }, [onCancel, navigate]);
     const setSubmitHandler = useCallback(callback => {
         const wrappedCallbackFunction = (fullFormStateInner) => __awaiter(void 0, void 0, void 0, function* () {
             setIsSubmitting(true);
@@ -305,7 +304,6 @@ const FormWizardStepWrapper = ({ stepKey, onCancel, description, title, componen
     const handleSubmit = useMemo(() => {
         return isEmptyStep && form.formState.isValid ? emptyStepSubmitHandler : stepSubmitHandler;
     }, [emptyStepSubmitHandler, form.formState.isValid, isEmptyStep, stepSubmitHandler]);
-    // TODO Replace with hoooooook
     useEffect(() => {
         // submit on cmd/ctrl + enter, always
         const handleKeyDown = (event) => {
@@ -351,6 +349,7 @@ const cvaStepContainer = cvaMerge(["h-full", "grid", "bg-white", "overflow-hidde
  * Use the useFormWizard hook to generate the props for this component.
  */
 const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema, onCancel, className, dataTestId, basePath, }) => {
+    const navigate = useNavigate();
     const { stepPath, subStepPath } = useParams({ strict: false });
     const [stepStates, setStepStates] = useState({});
     const [stepForms, setStepForms] = useState({});
@@ -362,6 +361,12 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
     objectFromEntries(objectEntries(steps)
         .filter(([_, { defaultValues }]) => defaultValues)
         .map(([key, { defaultValues }]) => [key, defaultValues])));
+    // 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;
+    if (fullFormSchema.shape[keyToCheck] === undefined) {
+        navigate({ to: basePath, params: { stepPath: firstSchemaKey } });
+    }
     const currentVisibleStepKey = subStepPath ? `${stepPath}/${subStepPath}` : stepPath;
     const currentVisibleStepIndex = objectKeys(steps)
         .filter(key => {
@@ -460,7 +465,53 @@ const FormWizard = ({ lastStepPrimaryActionLabel, isEdit, steps, fullFormSchema,
 };
 
 /**
- * A hook to generate the props for the FormWizard component.
+ * Generates the props for rendering a Form Wizard component.
+ * This hook processes the provided step definitions and form schema to prepare the necessary props for the Form Wizard component.
+ *
+ * @param props Configuration options for the Form Wizard component.
+ * @param props.fullFormSchema The Zod schema for the entire form.
+ * @param props.lastStepPrimaryActionLabel Label for the primary action button on the last step.
+ * @param props.onCancel Callback to execute when canceling the form submission. Defaults to navigating to the parent route.
+ * @param props.basePath Base path for routing within the form wizard.
+ * @param props.steps Definitions for each step in the form wizard. Keys are used as path and a slash is used to define a substep.
+ * @param props.isEdit Indicates whether the form is being edited or created. If the step has a default value, it is considered valid when editing.
+ * @example
+ * ```
+ * typescript
+ * import { useFormWizard } from './path/to/useFormWizard';
+ * const { steps,...wizardProps } = useFormWizard({
+ * fullFormSchema: useYourZodSchema(),
+ * lastStepPrimaryActionLabel: 'Finish',
+ * basePath: '/your-base-path/$stepPath',
+ * steps: {
+ *   entry: {
+ *     title: "Add your thing",
+ *     description: Choose how to add your thing,
+ *     sidebarDescription: Choose how to add your thing,
+ *     defaultValues: { entryMethod: "upload" },
+ *     component: stepProps => <EntryMethodStep {...stepProps} />,
+ *   },
+ *   "entry/manual": {
+ *     shouldRender: fullFormState => fullFormState.entry?.entryMethod === "manual",
+ *     title: "Type your thing",
+ *     description: "Manually type your thing",
+ *     component: stepProps => <ManualStep {...stepProps} />,
+ *   },
+ *   "entry/upload": {
+ *     shouldRender: fullFormState => fullFormState.entry?.entryMethod === "upload",
+ *     title: "Upload your thing",
+ *     description: "Upload a spreadsheet thing",
+ *     component: stepProps => <UploadStep {...stepProps} />,
+ *   },
+ *   review: {
+ *     title: "Review & Save",
+ *     description: "Make sure everythings looks alright",
+ *     sidebarDescription: "Make sure everythings looks alright",
+ *     component: stepProps => <ReviewSaveStep {...stepProps} />,
+ *   },
+ * },
+ * ```
+});
  */
 const useFormWizard = (props) => {
     return useMemo(() => (Object.assign(Object.assign({}, props), { 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-wizard",
-  "version": "0.1.105",
+  "version": "0.1.106",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {

package/src/FormWizard/useFormWizard.d.ts

@@ -30,6 +30,11 @@ export interface FromWizardComponentProps<TFullSchema extends AnyZodObject, TCom
     steps: TComponentStepDefinitions;
 }
 export type StringWithStepKey<TPath> = TPath extends `${infer _Prefix}/$stepPath` ? TPath : never;
+/**
+ * The main props interface for the useFormWizard hook.
+ * This interface contains the full configuration needed
+ * for the Hook to generate the props for the wizard component.
+ */
 export interface UseFormWizardProps<TFullSchema extends SomeZodObject, TStepDefinitions extends StepDefinitions<TFullSchema>> {
     fullFormSchema: TFullSchema;
     lastStepPrimaryActionLabel: string;
@@ -39,7 +44,53 @@ export interface UseFormWizardProps<TFullSchema extends SomeZodObject, TStepDefi
     isEdit?: boolean;
 }
 /**
- * A hook to generate the props for the FormWizard component.
+ * Generates the props for rendering a Form Wizard component.
+ * This hook processes the provided step definitions and form schema to prepare the necessary props for the Form Wizard component.
+ *
+ * @param props Configuration options for the Form Wizard component.
+ * @param props.fullFormSchema The Zod schema for the entire form.
+ * @param props.lastStepPrimaryActionLabel Label for the primary action button on the last step.
+ * @param props.onCancel Callback to execute when canceling the form submission. Defaults to navigating to the parent route.
+ * @param props.basePath Base path for routing within the form wizard.
+ * @param props.steps Definitions for each step in the form wizard. Keys are used as path and a slash is used to define a substep.
+ * @param props.isEdit Indicates whether the form is being edited or created. If the step has a default value, it is considered valid when editing.
+ * @example
+ * ```
+ * typescript
+ * import { useFormWizard } from './path/to/useFormWizard';
+ * const { steps,...wizardProps } = useFormWizard({
+ * fullFormSchema: useYourZodSchema(),
+ * lastStepPrimaryActionLabel: 'Finish',
+ * basePath: '/your-base-path/$stepPath',
+ * steps: {
+ *   entry: {
+ *     title: "Add your thing",
+ *     description: Choose how to add your thing,
+ *     sidebarDescription: Choose how to add your thing,
+ *     defaultValues: { entryMethod: "upload" },
+ *     component: stepProps => <EntryMethodStep {...stepProps} />,
+ *   },
+ *   "entry/manual": {
+ *     shouldRender: fullFormState => fullFormState.entry?.entryMethod === "manual",
+ *     title: "Type your thing",
+ *     description: "Manually type your thing",
+ *     component: stepProps => <ManualStep {...stepProps} />,
+ *   },
+ *   "entry/upload": {
+ *     shouldRender: fullFormState => fullFormState.entry?.entryMethod === "upload",
+ *     title: "Upload your thing",
+ *     description: "Upload a spreadsheet thing",
+ *     component: stepProps => <UploadStep {...stepProps} />,
+ *   },
+ *   review: {
+ *     title: "Review & Save",
+ *     description: "Make sure everythings looks alright",
+ *     sidebarDescription: "Make sure everythings looks alright",
+ *     component: stepProps => <ReviewSaveStep {...stepProps} />,
+ *   },
+ * },
+ * ```
+});
  */
 export declare const useFormWizard: <TStepDefinition extends StepDefinitions<TFullSchema>, TFullSchema extends AnyZodObject>(props: UseFormWizardProps<TFullSchema, TStepDefinition>) => FromWizardComponentProps<TFullSchema, StepDefinitions<TFullSchema>>;
 export {};