Merge pull request #759 from Arnei/wizard-stepper-typing

Add typing to wizard stepper

src/components/shared/wizard/WizardStepper.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
 import { Step, StepButton, StepLabel, Stepper } from "@mui/material";
@@ -63,9 +64,8 @@ const WizardStepper = ({
 			activeStep={page}
 			nonLinear
 			alternativeLabel
-// @ts-expect-error TS(2322): Type 'boolean' is not assignable to type 'ReactEle... Remove this comment to see the full error message
-			connector={false}
-			sx={stepperStyle.root }
+			connector={<></>}
+			sx={stepperStyle.root}
 			className={cn("step-by-step")}
 		>
 			{steps.map((label, key) =>
@@ -77,7 +77,7 @@ const WizardStepper = ({
 							</StepLabel>
 						</StepButton>
 					</Step>
-				) : <></>
+				) : <React.Fragment key={label.translation} />
 			)}
 		</Stepper>
 	);

src/utils/wizardUtils.ts

@@ -35,10 +35,16 @@ export const stepIcon = {
  * If the clicked page is summary then it only should be clickable/reachable if all other
  * visible pages of the wizard are valid.
  */
-// @ts-expect-error TS(7006): Parameter 'key' implicitly has an 'any' type.
-export const isSummaryReachable = (key, steps, completed) => {
+
+export const isSummaryReachable = (
+	key: number,
+	steps: {
+		name: string,
+		hidden?: boolean,
+	}[],
+	completed: Record<number, boolean>,
+) => {
 	if (steps[key].name === "summary") {
-// @ts-expect-error TS(7006): Parameter 'step' implicitly has an 'any' type.
 		const visibleSteps = steps.filter((step) => !step.hidden);
 
 		return Object.keys(completed).length >= visibleSteps.length - 2;