From 3c7e06d356acf494c7d7481aafd99ba9d53bea4b Mon Sep 17 00:00:00 2001
From: Rai Siqueira <rai93siqueira@gmail.com>
Date: Fri, 18 Aug 2023 16:06:01 -0300
Subject: [PATCH] fix(package): skip disabled step

Signed-off-by: Rai Siqueira <rai93siqueira@gmail.com>
---
 packages/headless-stepper/node_modules/react  |  1 +
 packages/headless-stepper/package.json        |  2 +-
 .../lib/examples/HeadlessStepper.stories.tsx  |  4 +-
 .../src/lib/examples/HeadlessStepper.tsx      | 11 +++-
 .../lib/examples/StepperComponent.stories.tsx | 12 +++++
 .../src/lib/examples/StepperComponent.tsx     | 19 +++++++
 .../src/lib/hooks/useStepper.test.ts          | 51 +++++++++++++++++++
 .../src/lib/hooks/useStepper.ts               | 36 +++++++++++--
 tsconfig.base.json                            |  3 +-
 9 files changed, 130 insertions(+), 9 deletions(-)
 create mode 120000 packages/headless-stepper/node_modules/react
 create mode 100644 packages/headless-stepper/src/lib/examples/StepperComponent.stories.tsx
 create mode 100644 packages/headless-stepper/src/lib/examples/StepperComponent.tsx

diff --git a/packages/headless-stepper/node_modules/react b/packages/headless-stepper/node_modules/react
new file mode 120000
index 0000000..52cb8d7
--- /dev/null
+++ b/packages/headless-stepper/node_modules/react
@@ -0,0 +1 @@
+../../../node_modules/.pnpm/react@18.2.0/node_modules/react
\ No newline at end of file
diff --git a/packages/headless-stepper/package.json b/packages/headless-stepper/package.json
index 3653015..fbfbf89 100644
--- a/packages/headless-stepper/package.json
+++ b/packages/headless-stepper/package.json
@@ -1,7 +1,7 @@
 {
   "name": "headless-stepper",
   "description": "Production ready React hook to create awesome stepper components. Effortless to use, easy to customize.",
-  "version": "1.8.3",
+  "version": "1.9.0-beta.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
diff --git a/packages/headless-stepper/src/lib/examples/HeadlessStepper.stories.tsx b/packages/headless-stepper/src/lib/examples/HeadlessStepper.stories.tsx
index 66267f5..73edfb9 100644
--- a/packages/headless-stepper/src/lib/examples/HeadlessStepper.stories.tsx
+++ b/packages/headless-stepper/src/lib/examples/HeadlessStepper.stories.tsx
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { HeadlessStepper, HeadlessStepperProps } from './HeadlessStepper';
 
 export default {
@@ -6,7 +6,7 @@ export default {
   title: 'HeadlessStepper/useStepper',
 } as Meta;
 
-const Template: Story<HeadlessStepperProps> = (args) => (
+const Template: StoryFn<HeadlessStepperProps> = (args) => (
   <HeadlessStepper {...args} />
 );
 
diff --git a/packages/headless-stepper/src/lib/examples/HeadlessStepper.tsx b/packages/headless-stepper/src/lib/examples/HeadlessStepper.tsx
index e4c4429..d2aa184 100644
--- a/packages/headless-stepper/src/lib/examples/HeadlessStepper.tsx
+++ b/packages/headless-stepper/src/lib/examples/HeadlessStepper.tsx
@@ -29,7 +29,13 @@ export function HeadlessStepper(props: HeadlessStepperProps) {
       <div>
         <nav style={{ display: 'flex' }} {...stepperProps}>
           {stepsProps?.map((step, index) => (
-            <ol key={index}>
+            <ol
+              key={index}
+              style={{
+                opacity: steps[index].disabled ? 0.6 : 1,
+                fontWeight: state.currentStep === index ? 'bold' : 'unset',
+              }}
+            >
               <a {...step}>{steps[index].label}</a>
             </ol>
           ))}
@@ -51,6 +57,9 @@ export function HeadlessStepper(props: HeadlessStepperProps) {
         Next
       </button>
       <div className="bg-gray-400 w-100% h-1/2" {...progressProps} />
+      <pre>
+        <code>{JSON.stringify(state, null, 2)}</code>
+      </pre>
     </div>
   );
 }
diff --git a/packages/headless-stepper/src/lib/examples/StepperComponent.stories.tsx b/packages/headless-stepper/src/lib/examples/StepperComponent.stories.tsx
new file mode 100644
index 0000000..a8cddb0
--- /dev/null
+++ b/packages/headless-stepper/src/lib/examples/StepperComponent.stories.tsx
@@ -0,0 +1,12 @@
+import { StoryFn, Meta } from '@storybook/react';
+import StepperComponent from './StepperComponent';
+
+export default {
+  component: StepperComponent,
+  title: 'HeadlessStepper/StepperComponent',
+} as Meta;
+
+const Template: StoryFn = (args) => <StepperComponent {...args} />;
+
+export const StepperComponentStory = Template.bind({});
+StepperComponentStory.args = {};
diff --git a/packages/headless-stepper/src/lib/examples/StepperComponent.tsx b/packages/headless-stepper/src/lib/examples/StepperComponent.tsx
new file mode 100644
index 0000000..626b5fb
--- /dev/null
+++ b/packages/headless-stepper/src/lib/examples/StepperComponent.tsx
@@ -0,0 +1,19 @@
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { Stepper, Step } from 'headless-stepper/components';
+// TODO: Fix the line above. It should avoid circular dependencies.
+
+const StepperComponent = () => {
+  return (
+    <Stepper currentStep={0} className="example">
+      <Step label="Step 1">Step 1 content</Step>
+
+      <Step label="Step 2" disabled>
+        Step 2 content
+      </Step>
+
+      <Step label="Step 3">Step 3 content</Step>
+    </Stepper>
+  );
+};
+
+export default StepperComponent;
diff --git a/packages/headless-stepper/src/lib/hooks/useStepper.test.ts b/packages/headless-stepper/src/lib/hooks/useStepper.test.ts
index 9d845d0..f787639 100644
--- a/packages/headless-stepper/src/lib/hooks/useStepper.test.ts
+++ b/packages/headless-stepper/src/lib/hooks/useStepper.test.ts
@@ -11,6 +11,19 @@ const steps: Steps[] = [
   },
 ];
 
+const disabledSteps = [
+  {
+    label: 'step 01',
+  },
+  {
+    label: 'step 02',
+    disabled: true,
+  },
+  {
+    label: 'step 03',
+  },
+];
+
 describe('useStepper', () => {
   it('should start with 0 as current step and dont have previous step', () => {
     const { result } = renderHook(({ steps }) => useStepper({ steps }), {
@@ -85,4 +98,42 @@ describe('useStepper', () => {
     expect(result?.current?.state?.currentStep).toBe(3);
     expect(result?.current?.state?.hasPreviousStep).toBeTruthy();
   });
+
+  it('should skip the disabled step when use the nextStep fn', async () => {
+    const { result } = renderHook(
+      ({ steps, currentStep }) =>
+        useStepper({
+          steps,
+          currentStep,
+        }),
+      { initialProps: { steps: disabledSteps, currentStep: 0 } }
+    );
+
+    expect(result?.current?.state?.currentStep).toBe(0);
+
+    act(() => {
+      result.current?.nextStep();
+    });
+
+    expect(result?.current?.state?.currentStep).toBe(2);
+  });
+
+  it('should skip the disabled step and go back to the previous step', async () => {
+    const { result } = renderHook(
+      ({ steps, currentStep }) =>
+        useStepper({
+          steps,
+          currentStep, // start from the last step.
+        }),
+      { initialProps: { steps: disabledSteps, currentStep: 2 } }
+    );
+
+    expect(result?.current?.state?.currentStep).toBe(2);
+
+    act(() => {
+      result.current?.prevStep();
+    });
+
+    expect(result?.current?.state?.currentStep).toBe(0);
+  });
 });
diff --git a/packages/headless-stepper/src/lib/hooks/useStepper.ts b/packages/headless-stepper/src/lib/hooks/useStepper.ts
index b5196a0..703ae73 100644
--- a/packages/headless-stepper/src/lib/hooks/useStepper.ts
+++ b/packages/headless-stepper/src/lib/hooks/useStepper.ts
@@ -78,16 +78,44 @@ const useStepper = ({
   hasNextStep.current = _currentStep < steps.length - 1;
 
   // Handlers
+  const guessNextAvailableStep = React.useCallback(
+    (currentIndex: number): number => {
+      const nextStep = steps[currentIndex + 1];
+      const isNextStepDisabled = nextStep?.disabled;
+      if (isNextStepDisabled) {
+        return guessNextAvailableStep(currentIndex + 1);
+      }
+      return currentIndex + 1;
+    },
+    [steps]
+  );
+
+  const guessPreviousAvailableStep = React.useCallback(
+    (currentIndex: number) => {
+      const previousStep = steps[currentIndex - 1];
+      const isPreviousStepDisabled = previousStep?.disabled;
+      if (isPreviousStepDisabled) {
+        return guessPreviousAvailableStep(currentIndex - 1);
+      }
+      return currentIndex - 1;
+    },
+    [steps]
+  );
+
   const nextStep = React.useCallback(() => {
     if (_currentStep === steps?.length - 1) return;
 
-    setCurrentStep((currentStep) => currentStep + 1);
-  }, [_currentStep, steps]);
+    setCurrentStep((currentStep) => {
+      return guessNextAvailableStep(currentStep);
+    });
+  }, [_currentStep, guessNextAvailableStep, steps?.length]);
 
   const prevStep = React.useCallback(() => {
     if (_currentStep === 0) return;
-    setCurrentStep((currentStep) => currentStep - 1);
-  }, [_currentStep]);
+    setCurrentStep((currentStep) => {
+      return guessPreviousAvailableStep(currentStep);
+    });
+  }, [_currentStep, guessPreviousAvailableStep]);
 
   const _getNextArrayItem = (el: HTMLElement) => {
     const currentIndex = stepElementsRef.current.indexOf(el);
diff --git a/tsconfig.base.json b/tsconfig.base.json
index e2e1c2a..ff71f02 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -15,7 +15,8 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "headless-stepper": ["packages/headless-stepper/src/index.ts"]
+      "headless-stepper": ["packages/headless-stepper/src/index.ts"],
+      "headless-stepper/components": ["packages/headless-stepper/components/index.ts"],
     }
   },
   "exclude": ["node_modules", "tmp"]