Merge pull request #25 from devrnt/feat/step-index

Feat/step index

Author: devrnt

README.md

@@ -50,8 +50,8 @@ const Step1 = () => {
 
   return (
     <>
-      <button onClick={previousStep}>Previous ⏮️</button>
-      <button onClick={nextStep}>Next ⏭</button>
+      <button onClick={() => previousStep()}>Previous ⏮️</button>
+      <button onClick={() => nextStep()}>Next ⏭</button>
     </>
   );
 };
@@ -112,14 +112,16 @@ Used to retrieve all methods and properties related to your wizard. Make sure `W
 
 `handleStep` is used to attach a handler to the step, can either be `async` or a `sync` function. This function will be invoked when calling `nextStep`.
 
+Provide an optional `stepIndex` to either `nextStep` or `previousStep` to overwrite the default "step-flow" behaviour.
+
 **Remark** - You can't use `useWizard` in the same component where `Wizard` is used.
 
 #### Methods
 
 | name         | type                       | description                                                                                                                                              |
 | ------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| nextStep     | () => Promise<void>        | Go to the next step                                                                                                                                      |
-| previousStep | () => void                 | Go to the previous step                                                                                                                                  |
+| nextStep     | (stepIndex?: number) => Promise<void>        | Go to the next step. Overwrite the default behaviour by providing a step index                                                                                                                                      |
+| previousStep | (stepIndex?: number) => void                 | Go to the previous step. Overwrite the default behaviour by providing a step index                                                                                                                                  |
 | handleStep   | (handler: Handler) => void | Attach a callback that will be called when calling `nextStep`.  `handler` can be either sync or async                                                     |
 | isLoading    | boolean                    | \* Will reflect the handler promise state: will be `true` if the handler promise is pending and `false` when the handler is either fulfilled or rejected |
 | activeStep   | number                     | The current active step of the wizard                                                                                                                    |
@@ -162,8 +164,8 @@ const Step1 = () => {
     <>
       <p>Step 1</p>
       {isLoading && <p>loading...</p>}
-      <button onClick={previousStep}>Previous</button>
-      <button onClick={nextStep}>Next</button>
+      <button onClick={() => previousStep()}>Previous</button>
+      <button onClick={() => nextStep()}>Next</button>
       <div>
         Has next step: {!isLastStep ? '✅' : '⛔'}
         <br />

playground/components/footer.tsx playground/components/footer/footer.tsxplayground/components/footer.tsx renamed to playground/components/footer/footer.tsx

@@ -1,18 +1,18 @@
 import { styled } from 'goober';
 import * as React from 'react';
 
-import { useWizard } from '../../dist';
-import { Button } from '../modules/common';
+import { useWizard } from '../../../dist';
+import { Button } from '../../modules/common';
 
-const Actions = styled('div')`
+export const Actions = styled('div')`
   display: flex;
   justify-content: center;
   margin: 1rem 0;
   gap: 1rem;
   flex-direction: row;
 `;
 
-const Info = styled('div')`
+export const Info = styled('div')`
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -32,7 +32,7 @@ const Info = styled('div')`
   }
 `;
 
-const Footer: React.FC = React.memo(() => {
+const Footer: React.FC = () => {
   const {
     nextStep,
     previousStep,
@@ -57,20 +57,20 @@ const Footer: React.FC = React.memo(() => {
         <Actions>
           <Button
             label="Previous"
-            onClick={previousStep}
+            onClick={() => previousStep()}
             disabled={isLoading || isFirstStep}
           >
             Previous
           </Button>
           <Button
             label="Next"
-            onClick={nextStep}
+            onClick={() => nextStep()}
             disabled={isLoading || isLastStep}
           />
         </Actions>
       </code>
     </>
   );
-});
+};
 
 export default Footer;

playground/components/footer/footerStepIndex.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import { useWizard } from '../../../dist';
+import { Button } from '../../modules/common';
+import { Actions, Info } from './footer';
+
+const FooterCustomStepIndex: React.FC = () => {
+  const {
+    nextStep,
+    previousStep,
+    isLoading,
+    activeStep,
+    isLastStep,
+    isFirstStep,
+  } = useWizard();
+
+  return (
+    <>
+      <code>
+        <Info>
+          <p>Has previous step: {!isFirstStep ? '✅' : '⛔'}</p>
+          <br />
+          <p>Has next step: {!isLastStep ? '✅' : '⛔'} </p>
+          <br />
+          <p>
+            Active step: {activeStep + 1} <br />
+          </p>
+        </Info>
+        <Actions>
+          <Button
+            label="Previous"
+            onClick={() => previousStep()}
+            disabled={isLoading || isFirstStep}
+          >
+            Previous
+          </Button>
+          <Button
+            label="Next"
+            onClick={() => nextStep(2)}
+            disabled={isLoading || isLastStep}
+          />
+        </Actions>
+      </code>
+    </>
+  );
+};
+
+export default FooterCustomStepIndex;

playground/components/index.ts

@@ -1,5 +1,6 @@
 export { default as Step } from './step';
 export { default as AsyncStep } from './asyncStep';
-export { default as Footer } from './footer';
+export { default as Footer } from './footer/footer';
+export { default as FooterStepIndex } from './footer/footerStepIndex';
 export { default as AnimatedStep } from './animatedStep';
 export { default as Tooltip } from './tooltip';

playground/modules/wizard/customNextStepIndex/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { Wizard } from '../../../../dist';
+import { AsyncStep, FooterStepIndex, Step } from '../../../components';
+import Section from '../../common/section';
+
+const CustomNextStepIndex: React.FC = () => {
+  return (
+    <Section
+      title="Custom step index"
+      description="With custom step index on next step"
+    >
+      <Wizard footer={<FooterStepIndex />}>
+        <AsyncStep number={1} />
+        <Step number={2} />
+        <AsyncStep number={3} />
+        <Step number={4} />
+      </Wizard>
+    </Section>
+  );
+};
+
+export default CustomNextStepIndex;

playground/modules/wizard/wizard.tsx

@@ -2,6 +2,7 @@ import { styled } from 'goober';
 import * as React from 'react';
 
 import AnimatedSection from './animated';
+import CustomNextStepIndex from './customNextStepIndex';
 import ReactQuerySection from './reactQuery';
 import SimpleSection from './simple';
 
@@ -17,6 +18,7 @@ const WizardModule = () => {
       <SimpleSection />
       <AnimatedSection />
       <ReactQuerySection />
+      <CustomNextStepIndex />
     </Container>
   );
 };

src/types.ts

@@ -10,10 +10,18 @@ export type WizardProps = {
 };
 
 export type WizardValues = {
-  /** Go to the next step */
-  nextStep: () => Promise<void>;
-  /** Go to the previous step */
-  previousStep: () => void;
+  /**
+   * Go to the next step
+   *
+   * @param stepIndex Overwrite the default behaviour by providing a step index
+   */
+  nextStep: (stepIndex?: number) => Promise<void>;
+  /**
+   * Go to the previous step
+   *
+   * @param stepIndex Overwrite the default behaviour by providing a step index
+   *  */
+  previousStep: (stepIndex?: number) => void;
   /**
    * Attach a callback that will be called when calling `nextStep()`
    *

src/wizard.tsx

@@ -16,15 +16,15 @@ const Wizard: React.FC<WizardProps> = React.memo(
       activeStep < React.Children.toArray(children).length - 1;
     hasPreviousStep.current = activeStep > 0;
 
-    const goToNextStep = React.useRef(() => {
+    const goToNextStep = React.useRef((stepIndex?: number) => {
       if (hasNextStep.current) {
-        setActiveStep((activeStep) => activeStep + 1);
+        setActiveStep((activeStep) => stepIndex ?? activeStep + 1);
       }
     });
 
-    const previousStep = React.useRef(() => {
+    const previousStep = React.useRef((step?: number) => {
       if (hasPreviousStep.current) {
-        setActiveStep((activeStep) => activeStep - 1);
+        setActiveStep((activeStep) => step ?? activeStep - 1);
       }
     });
 
@@ -33,14 +33,14 @@ const Wizard: React.FC<WizardProps> = React.memo(
       nextStepHandler.current = handler;
     });
 
-    const doNextStep = React.useRef(async () => {
+    const doNextStep = React.useRef(async (stepIndex?: number) => {
       if (hasNextStep.current && nextStepHandler.current) {
         try {
           setIsLoading(true);
           await nextStepHandler.current();
           setIsLoading(false);
           nextStepHandler.current = null;
-          goToNextStep.current();
+          goToNextStep.current(stepIndex);
         } catch (error) {
           setIsLoading(false);
           throw error;

test/useWizard.test.tsx

@@ -91,6 +91,52 @@ describe('useWizard', () => {
     });
   });
 
+  test('should go to passed step index on next step', () => {
+    const { result } = renderHook(() => useWizard(), {
+      wrapper: ({ children }: { children: React.ReactNode }) => {
+        return <Wizard>{children}</Wizard>;
+      },
+      initialProps: {
+        children: (
+          <>
+            <p>step 1</p>
+            <p>step 2</p>
+            <p>step 3</p>
+          </>
+        ),
+      },
+    });
+    // Wait for an element to appear
+    waitFor(() => {
+      result.current.nextStep(2);
+      expect(result.current.isFirstStep).toBe(false);
+      expect(result.current.isLastStep).toBe(true);
+    });
+  });
+
+  test('should go to passed step index on previous step', () => {
+    const { result } = renderHook(() => useWizard(), {
+      wrapper: ({ children }: { children: React.ReactNode }) => {
+        return <Wizard>{children}</Wizard>;
+      },
+      initialProps: {
+        children: (
+          <>
+            <p>step 1</p>
+            <p>step 2</p>
+            <p>step 3</p>
+          </>
+        ),
+      },
+    });
+    // Wait for an element to appear
+    waitFor(() => {
+      result.current.previousStep(2);
+      expect(result.current.isFirstStep).toBe(false);
+      expect(result.current.isLastStep).toBe(true);
+    });
+  });
+
   test('should not go to previous step if first step', () => {
     const { result } = renderUseWizardHook();