From 2e0f2ebbf1f045c027810ee85084644beff7e841 Mon Sep 17 00:00:00 2001
From: Alexander Janssen <a.janssen@tnajanssen.nl>
Date: Mon, 11 Oct 2021 12:16:18 +0200
Subject: [PATCH 1/2] Allow typehinting of the values

---
 src/FormkWizard.tsx     |  8 ++++----
 src/types.tsx           | 24 ++++++++++++------------
 src/useFormikWizard.tsx | 10 +++++-----
 src/useWizard.ts        |  7 ++++---
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/FormkWizard.tsx b/src/FormkWizard.tsx
index 14ffef3..00b8819 100644
--- a/src/FormkWizard.tsx
+++ b/src/FormkWizard.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { Formik } from 'formik';
+import {Formik, FormikValues} from 'formik';
 import { WizardProps, Step } from './types';
 import { useWizard } from './useWizard';
 
-const FormikWizard = ({
+const FormikWizard  = <T extends FormikValues>({
   activeStepIndex = 0,
   validateOnNext = true,
   steps,
   children,
   ...props
-}: WizardProps) => {
+}: WizardProps<T>) => {
   const {
     currentStepIndex,
     isPrevDisabled,
@@ -18,7 +18,7 @@ const FormikWizard = ({
     handlePrev,
     handleNext,
   } = useWizard(activeStepIndex, steps, validateOnNext);
-  const currentStep: Step = steps[currentStepIndex];
+  const currentStep: Step<T> = steps[currentStepIndex];
   const { component: StepComponent } = currentStep;
 
   return (
diff --git a/src/types.tsx b/src/types.tsx
index 76cfcf6..20108fe 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -1,28 +1,28 @@
-import { FormikConfig, FormikProps, FormikValues } from 'formik';
+import { FormikConfig, FormikProps } from 'formik';
 
-export type Step = {
+export type Step<T> = {
   /** Validation schema object for the current step */
   validationSchema?: any | (() => any);
 
   /** Handler to be called before moving to previous step */
   beforePrev?: (
-    values: FormikValues,
-    formikBag: FormikProps<FormikValues>,
+    values: T,
+    formikBag: FormikProps<T>,
     currentStepIndex: number
   ) => Promise<any>;
 
   /** Handler to be called before moving to next step */
   beforeNext?: (
-    values: FormikValues,
-    formikBag: FormikProps<FormikValues>,
+    values: T,
+    formikBag: FormikProps<T>,
     currentStepIndex: number
   ) => Promise<any>;
 
   /** React functional or class component */
-  component: React.ComponentType<FormikProps<FormikValues>>;
+  component: React.ComponentType<FormikProps<T>>;
 };
 
-export interface RenderProps extends FormikProps<FormikValues> {
+export interface RenderProps<T> extends FormikProps<T> {
   /** Handler to be called on previous button click */
   handlePrev: () => void;
 
@@ -48,17 +48,17 @@ export interface RenderProps extends FormikProps<FormikValues> {
   renderComponent: () => React.ReactNode;
 }
 
-export interface WizardProps extends FormikConfig<FormikValues> {
+export interface WizardProps<T> extends FormikConfig<T> {
   /** Default active step index for the wizard */
   activeStepIndex: number;
 
   /** Wizard steps array */
-  steps: Step[];
+  steps: Step<T>[];
 
   /** Must be a function or react element */
   children?:
-    | ((props: RenderProps) => React.ReactNode)
-    | React.ReactElement<RenderProps>;
+    | ((props: RenderProps<T>) => React.ReactNode)
+    | React.ReactElement<RenderProps<T>>;
 
   /** Should validate the form before moving to next step */
   validateOnNext?: boolean;
diff --git a/src/useFormikWizard.tsx b/src/useFormikWizard.tsx
index 81a9b23..a23ac3d 100644
--- a/src/useFormikWizard.tsx
+++ b/src/useFormikWizard.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { useFormik } from 'formik';
+import {FormikValues, useFormik} from 'formik';
 import { useWizard } from './useWizard';
 import { WizardProps, Step } from './types';
 
-const useFormikWizard = ({
+const useFormikWizard = <T extends FormikValues>({
   activeStepIndex = 0,
   validateOnNext = true,
   steps,
   children,
   ...props
-}: WizardProps) => {
+}: WizardProps<T>) => {
   const {
     currentStepIndex,
     isPrevDisabled,
@@ -18,9 +18,9 @@ const useFormikWizard = ({
     handlePrev,
     handleNext,
   } = useWizard(activeStepIndex, steps, validateOnNext);
-  const currentStep: Step = steps[currentStepIndex];
+  const currentStep: Step<T> = steps[currentStepIndex];
   const { component: StepComponent, validationSchema } = currentStep;
-  const formik = useFormik({ ...props, validationSchema });
+  const formik = useFormik<T>({ ...props, validationSchema });
 
   return {
     ...formik,
diff --git a/src/useWizard.ts b/src/useWizard.ts
index d7f2b7c..0fe9c91 100644
--- a/src/useWizard.ts
+++ b/src/useWizard.ts
@@ -1,10 +1,11 @@
 import { useState, useCallback } from 'react';
 import { Step } from './types';
 import { isFunction } from './utils';
+import {FormikValues} from "formik";
 
-const useWizard = (
+const useWizard = <T extends FormikValues>(
   activeStepIndex: number,
-  steps: Step[],
+  steps: Step<T>[],
   validateOnNext: boolean
 ) => {
   const total = steps.length;
@@ -20,7 +21,7 @@ const useWizard = (
     () => setCurrentStep(Math.min(currentStep + 1, total - 1)),
     [setCurrentStep, currentStep, total]
   );
-  const stepObj: Step = steps[currentStep];
+  const stepObj: Step<T> = steps[currentStep];
   const { beforePrev, beforeNext } = stepObj;
 
   const handlePrev = useCallback(

From 95888b91a4c20af89e36e096cab7987af77ddfcb Mon Sep 17 00:00:00 2001
From: Alexander Janssen <a.janssen@tnajanssen.nl>
Date: Mon, 11 Oct 2021 12:17:44 +0200
Subject: [PATCH 2/2] Add changeset

---
 .changeset/tasty-camels-dream.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tasty-camels-dream.md

diff --git a/.changeset/tasty-camels-dream.md b/.changeset/tasty-camels-dream.md
new file mode 100644
index 0000000..386a7b4
--- /dev/null
+++ b/.changeset/tasty-camels-dream.md
@@ -0,0 +1,5 @@
+---
+'formik-wizard-form': major
+---
+
+Allow to typehint the values of the form wizard