chore: add custom step index in playground

Author: devrnt

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>
   );
 };