refactor: export BaseWizardStep interface

Author: johnfumaster

README.md

@@ -147,7 +147,7 @@ Used to retrieve all methods and properties related to your wizard. Make sure `W
 | stepCount    | number                      | The total number of steps of the wizard                                                                                                                  |
 | isFirstStep  | boolean                     | Indicate if the current step is the first step (aka no previous step)                                                                                    |
 | isLastStep   | boolean                     | Indicate if the current step is the last step (aka no next step)                                                                                         |
-| stepNames    | { name: string; number: string }[] | An array of objects for each step in the wizard. Each object has a `name` and `number` property corresponding to the step's name and number. |
+| steps    | { name?: string; number?: string }[] | An array of objects for each step in the wizard. Each object has a `name` and `number` property corresponding to the step's name and number. |
 |              |
 
 #### Example

playground/components/asyncStep.tsx

@@ -2,11 +2,11 @@ import { styled } from 'goober';
 import * as React from 'react';
 
 import { useWizard } from '../../dist';
+import { BaseWizardStep } from '../../dist/types';
 import { useMockMutation } from '../hooks';
 
-type Props = {
-  number: number;
-  name?: string;
+type Props = BaseWizardStep & {
+  content: string;
 };
 
 const MOCK = [

playground/components/sidebar.tsx

@@ -27,18 +27,18 @@ export const Nav = styled('nav')`
 `;
 
 const Sidebar: React.FC = () => {
-  const { activeStep, stepCount, goToStep, stepNames } = useWizard();
+  const { activeStep, stepCount, goToStep, steps } = useWizard();
 
   return (
     <Nav>
       {stepCount > 0 && (
         <ul>
-          {stepNames.map((stepName, index) => (
+          {steps.map((stepName, index) => (
             <li key={index}>
               <Button
-                label={stepName.name}
-                onClick={() => goToStep(stepName.number - 1)}
-                disabled={stepName.number - 1 > activeStep}
+                label={stepName.name || `Step ${stepName.number}`}
+                onClick={() => goToStep(index)}
+                disabled={index > activeStep}
               >
                 {stepName.name}
               </Button>

playground/components/step.tsx

@@ -2,11 +2,10 @@ import { styled } from 'goober';
 import * as React from 'react';
 
 import { useWizard } from '../../dist';
+import { BaseWizardStep } from '../../dist/types';
 
-type Props = {
-  number: number;
+type Props = BaseWizardStep & {
   withCallback?: boolean;
-  name?: string;
 };
 
 const Container = styled('div')`

src/index.ts

@@ -1,5 +1,6 @@
 // Type re-export workaround, to stay compatible with TS 3.7 and lower
 import {
+  BaseWizardStep as _BaseWizardStep,
   Handler as _Handler,
   WizardProps as _WizardProps,
   WizardValues as _WizardValues,
@@ -10,5 +11,6 @@ import { default as Wizard } from './wizard';
 export type WizardProps = _WizardProps;
 export type WizardValues = _WizardValues;
 export type Handler = _Handler;
+export interface BaseWizardStep extends _BaseWizardStep {}
 
 export { Wizard, useWizard };

src/types.ts

@@ -33,10 +33,12 @@ export type WizardProps = {
   onStepChange?: (stepIndex: number) => void;
 };
 
-export type StepName = {
-  number: number;
-  name: string;
-};
+export interface BaseWizardStep {
+  /** The step number */
+  number?: number;
+  /** The step name */
+  name?: string;
+}
 
 export type WizardValues = {
   /**
@@ -73,7 +75,7 @@ export type WizardValues = {
   /** Indicate if the current step is the last step (aka no next step) */
   isLastStep: boolean;
   /** The labels of each step */
-  stepNames: StepName[];
+  steps: BaseWizardStep[];
 };
 
 /** Console log levels */

src/wizard.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import * as logger from './logger';
-import { Handler, StepName, WizardProps } from './types';
+import { BaseWizardStep, Handler, WizardProps } from './types';
 import WizardContext from './wizardContext';
 
 const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
@@ -22,7 +22,7 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
     const nextStepHandler = React.useRef<Handler>(() => {});
     const stepCount = React.Children.toArray(children).length;
     const stepsArray = React.Children.toArray(children);
-    const stepNames = stepsArray
+    const steps = stepsArray
       .map((child) => {
         if (React.isValidElement(child)) {
           const number = child.props.number;
@@ -32,7 +32,7 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
         }
         return null;
       })
-      .filter(Boolean) as StepName[];
+      .filter(Boolean) as BaseWizardStep[];
 
     hasNextStep.current = activeStep < stepCount - 1;
     hasPreviousStep.current = activeStep > 0;
@@ -110,7 +110,7 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
         isFirstStep: !hasPreviousStep.current,
         isLastStep: !hasNextStep.current,
         goToStep,
-        stepNames,
+        steps,
       }),
       [
         doNextStep,
@@ -119,7 +119,7 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
         activeStep,
         stepCount,
         goToStep,
-        stepNames,
+        steps,
       ],
     );