Merge pull request #107 from damianricobelli/add-before-after-go-to

feat: add before and after go to

Author: damianricobelli

.changeset/great-baboons-argue.md

@@ -0,0 +1,7 @@
+---
+"@stepperize/react": minor
+"@stepperize/core": minor
+"docs": minor
+---
+
+Add before and after go to feature

apps/docs/.source/index.js

@@ -142,6 +142,8 @@ That is why there are the following functions:
 - `afterNext`
 - `beforePrev`
 - `afterPrev`
+- `beforeGoTo`
+- `afterGoTo`
 
 ### beforeNext
 
@@ -249,6 +251,55 @@ const MyStepperComponent = () => {
 };
 ```
 
+### beforeGoTo
+
+The `beforeGoTo` function allows you to execute a function before moving to a specific step.
+It returns a promise that resolves to a boolean value. If the promise resolves to true,
+the stepper will move to the specific step. If the promise resolves to false, the stepper
+will not move to the specific step.
+
+```tsx
+const MyStepperComponent = () => {
+  const stepper = useStepper();
+
+  return (
+    <button
+      onClick={() =>
+        stepper.beforeGoTo("first", () => {
+          // Your logic here
+          return true; // or false
+        })
+      }
+    >
+      Go to first step
+    </button>
+  );
+};
+```
+
+### afterGoTo
+
+The `afterGoTo` function allows you to execute a function after moving to a specific step.
+It returns a promise that resolves to a void value.
+
+```tsx
+const MyStepperComponent = () => {
+  const stepper = useStepper();
+
+  return (
+    <button
+      onClick={() =>
+        stepper.afterGoTo("first", () => {
+          // Your logic here
+        })
+      }
+    >
+      Go to first step
+    </button>
+  );
+};
+```
+
 ## Metadata
 
 The metadata is a way to add custom data to a step. It is useful for adding dynamic values to a step, such as a value fetched from a server or any dynamic state in your application.

apps/docs/content/docs/react/api-references/hook.mdx

@@ -28,6 +28,10 @@ export type Stepper<Steps extends Step[] = Step[]> = {
 	beforePrev: (callback: () => Promise<boolean> | boolean) => Promise<void> | void;
 	/** Executes a function after navigating to the previous step. */
 	afterPrev: (callback: () => Promise<void> | void) => Promise<void> | void;
+	/** Executes a function before navigating to a specific step. */
+	beforeGoTo: (id: Get.Id<Steps>, callback: () => Promise<boolean> | boolean) => Promise<void> | void;
+	/** Executes a function after navigating to a specific step. */
+	afterGoTo: (id: Get.Id<Steps>, callback: () => Promise<void> | void) => Promise<void> | void;
 	/**
 	 * Executes a function based on the current step ID.
 	 * @param id - The ID of the step to check.

packages/core/src/types.ts

@@ -79,6 +79,14 @@ export const defineStepper = <const Steps extends Step[]>(...steps: Steps): Step
 				get(id) {
 					return steps.find((step) => step.id === id);
 				},
+				async beforeGoTo(id, callback) {
+					const shouldProceed = await executeStepCallback(callback, true);
+					if (shouldProceed) this.goTo(id);
+				},
+				async afterGoTo(id, callback) {
+					this.goTo(id);
+					await executeStepCallback(callback, false);
+				},
 				goTo(id) {
 					const index = steps.findIndex((s) => s.id === id);
 					setStepIndex(index);