feat: support sidebar property

Author: johnfumaster

src/types.ts

@@ -3,12 +3,14 @@ export type Handler = (() => Promise<void>) | (() => void) | null;
 export type WizardProps = {
   /** Optional header that is shown above the active step */
   header?: React.ReactNode;
+  /** Optional sidebar that is shown before the active step */
+  sidebar?: React.ReactNode;
   /** Optional footer that is shown below the active step */
   footer?: React.ReactNode;
   /** Optional start index @default 0 */
   startIndex?: number;
   /**
-   * Optional wrapper that is exclusively wrapped around the active step component. It is not wrapped around the `header` and `footer`
+   * Optional wrapper that is exclusively wrapped around the active step component. It is not wrapped around the `header`, `sidebar` and `footer`
    * @example With `framer-motion` - `<AnimatePresence />`
    * ```jsx
    * <Wizard wrapper={<AnimatePresence exitBeforeEnter />}>

src/wizard.tsx

@@ -7,6 +7,7 @@ import WizardContext from './wizardContext';
 const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
   ({
     header,
+    sidebar,
     footer,
     children,
     onStepChange,
@@ -126,14 +127,19 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
         if (header && !React.isValidElement(header)) {
           logger.log('error', 'Invalid header passed to <Wizard>');
         }
+        // Invalid sidebar element
+        if (sidebar && !React.isValidElement(sidebar)) {
+          logger.log('error', 'Invalid sidebar passed to <Wizard>');
+        }
+
         // Invalid footer element
         if (footer && !React.isValidElement(footer)) {
           logger.log('error', 'Invalid footer passed to <Wizard>');
         }
       }
 
       return reactChildren[activeStep];
-    }, [activeStep, children, header, footer]);
+    }, [activeStep, children, header, sidebar, footer]);
 
     const enhancedActiveStepContent = React.useMemo(
       () =>
@@ -146,6 +152,7 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
     return (
       <WizardContext.Provider value={wizardValue}>
         {header}
+        {sidebar}
         {enhancedActiveStepContent}
         {footer}
       </WizardContext.Provider>