the rest of the owl

Author: TheSonOfThomp

packages/wizard/src/Wizard.stories.tsx

@@ -1,20 +1,62 @@
+/* eslint-disable no-console */
 import React from 'react';
+import { faker } from '@faker-js/faker';
+import { StoryMetaType } from '@lg-tools/storybook-utils';
 import { StoryObj } from '@storybook/react';
 
+import Card from '@leafygreen-ui/card';
+
 import { Wizard } from '.';
 
+faker.seed(0);
+
 export default {
   title: 'Components/Wizard',
   component: Wizard,
-};
+  parameters: {
+    default: 'LiveExample',
+  },
+  decorators: [
+    Fn => (
+      <div style={{ margin: -100, height: '100vh' }}>
+        <Fn />
+      </div>
+    ),
+  ],
+} satisfies StoryMetaType<typeof Wizard>;
 
 export const LiveExample: StoryObj<typeof Wizard> = {
   parameters: {
     controls: {
       exclude: ['children', 'activeStep', 'onStepChange'],
     },
   },
-  render: props => <Wizard {...props}></Wizard>,
+  render: props => (
+    <Wizard {...props}>
+      {['Apple', 'Banana', 'Carrot'].map((title, i) => (
+        <Wizard.Step
+          key={i}
+          title={`Step ${i + 1}: ${title}`}
+          description={faker.lorem.paragraph()}
+        >
+          <Card>{faker.lorem.paragraph(10)}</Card>
+        </Wizard.Step>
+      ))}
+      <Wizard.Footer
+        backButtonProps={{
+          onClick: () => console.log('[Storybook] Clicked Back'),
+        }}
+        cancelButtonProps={{
+          children: 'Cancel',
+          onClick: () => console.log('[Storybook] Clicked Cancel'),
+        }}
+        primaryButtonProps={{
+          children: 'Primary',
+          onClick: () => console.log('[Storybook] Clicked Primary'),
+        }}
+      />
+    </Wizard>
+  ),
 };
 
 export const Controlled: StoryObj<typeof Wizard> = {
@@ -23,14 +65,47 @@ export const Controlled: StoryObj<typeof Wizard> = {
       exclude: ['children', 'onStepChange'],
     },
   },
+  args: {
+    activeStep: 0,
+  },
   render: ({ activeStep, ...props }) => {
     return (
       <Wizard
         activeStep={activeStep}
-        // eslint-disable-next-line no-console
-        onStepChange={x => console.log(`Set activeStep to ${x}`)}
+        onStepChange={x =>
+          console.log(`[Storybook] activeStep should change to ${x}`)
+        }
         {...props}
-      ></Wizard>
+      >
+        {['Apple', 'Banana', 'Carrot'].map((title, i) => (
+          <Wizard.Step
+            key={i}
+            title={`Step ${i + 1}: ${title}`}
+            description={faker.lorem.paragraph()}
+          >
+            <Card>
+              <p>
+                This Wizard is controlled. Clicking the buttons will not do
+                anything. Use the Storybook controls to see the next step
+              </p>
+              {faker.lorem.paragraph(10)}
+            </Card>
+          </Wizard.Step>
+        ))}
+        <Wizard.Footer
+          backButtonProps={{
+            onClick: () => console.log('[Storybook] Clicked Back'),
+          }}
+          cancelButtonProps={{
+            children: 'Cancel',
+            onClick: () => console.log('[Storybook] Clicked Cancel'),
+          }}
+          primaryButtonProps={{
+            children: 'Primary',
+            onClick: () => console.log('[Storybook] Clicked Primary'),
+          }}
+        />
+      </Wizard>
     );
   },
 };

packages/wizard/src/Wizard/Wizard.styles.ts

@@ -1,9 +1,12 @@
 import { css } from '@leafygreen-ui/emotion';
 
 export const wizardContainerStyles = css`
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 24px;
+  outline: 1px solid red;
 `;
 
 export const stepContentStyles = css`

packages/wizard/src/Wizard/Wizard.tsx

@@ -1,6 +1,11 @@
-import React, { Children, cloneElement, isValidElement } from 'react';
+import React, { Children, isValidElement } from 'react';
 
+import { Direction } from '@leafygreen-ui/descendants';
+import { findChild } from '@leafygreen-ui/lib';
+
+import { WIZARD_FOOTER_KEY } from '../constants';
 import { useWizardControlledValue } from '../utils/useWizardControlledValue/useWizardControlledValue';
+import { WizardContext } from '../WizardContext/WizardContext';
 import { WizardFooter } from '../WizardFooter';
 import { WizardStep } from '../WizardStep';
 
@@ -16,23 +21,10 @@ export function Wizard({
   const {
     isControlled,
     value: activeStep,
-    setValue: setInternalActiveStep,
+    setValue: setActiveStep,
   } = useWizardControlledValue<number>(activeStepProp, undefined, 0);
 
-  // Handle step changes
-  const handleStepChange = (newStep: number) => {
-    if (!isControlled) {
-      setInternalActiveStep(newStep);
-    }
-    onStepChange?.(newStep);
-  };
-
-  // Filter children to separate steps from footer
-  const childrenArray = Children.toArray(children);
-
-  // For now, we'll look for components with displayName ending in 'Step' or 'Footer'
-  // This will be more precise once Wizard.Step and Wizard.Footer are implemented
-  const stepChildren = childrenArray.filter(child => {
+  const stepChildren = Children.toArray(children).filter(child => {
     if (isValidElement(child)) {
       const displayName = (child.type as any)?.displayName;
       return displayName && displayName.includes('Step');
@@ -41,38 +33,41 @@ export function Wizard({
     return false;
   });
 
-  const footerChild = childrenArray.find(child => {
-    if (isValidElement(child)) {
-      const displayName = (child.type as any)?.displayName;
-      return displayName && displayName.includes('Footer');
+  const updateStep = (direction: Direction) => {
+    const getNextStep = (curr: number) => {
+      switch (direction) {
+        case Direction.Next:
+          return Math.min(curr + 1, stepChildren.length - 1);
+        case Direction.Prev:
+          return Math.max(curr - 1, 0);
+      }
+    };
+
+    if (!isControlled) {
+      setActiveStep(getNextStep);
     }
 
-    return false;
-  });
+    onStepChange?.(getNextStep(activeStep));
+  };
+
+  const footerChild = findChild(children, WIZARD_FOOTER_KEY);
 
   // Get the current step to render
   const currentStep = stepChildren[activeStep] || null;
 
-  // Clone footer with step navigation handlers if it exists
-  const clonedFooter =
-    footerChild && isValidElement(footerChild)
-      ? cloneElement(footerChild as React.ReactElement<any>, {
-          activeStep,
-          totalSteps: stepChildren.length,
-          onStepChange: handleStepChange,
-          isControlled,
-        })
-      : null;
-
   return (
-    <div className={wizardContainerStyles}>
-      <code>activeStep: {activeStep}</code>
-      {/* Render current step */}
-      <div className={stepContentStyles}>{currentStep}</div>
-
-      {/* Render footer */}
-      {clonedFooter}
-    </div>
+    <WizardContext.Provider
+      value={{
+        activeStep,
+        updateStep,
+      }}
+    >
+      <div className={wizardContainerStyles}>
+        <div className={stepContentStyles}>{currentStep}</div>
+        {/* Render footer */}
+        {footerChild}
+      </div>
+    </WizardContext.Provider>
   );
 }
 

packages/wizard/src/WizardContext/WizardContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+import { Direction } from '@leafygreen-ui/descendants';
+
+interface WizardContextData {
+  activeStep: number;
+  updateStep: (direction: Direction) => void;
+}
+
+export const WizardContext = createContext<WizardContextData>({
+  activeStep: 0,
+  updateStep: () => {},
+});
+
+export const useWizardContext = () => useContext(WizardContext);

packages/wizard/src/WizardFooter/WizardFooter.tsx

@@ -1,23 +1,48 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 
+import { Direction } from '@leafygreen-ui/descendants';
 import FormFooter from '@leafygreen-ui/form-footer';
 
+import { WIZARD_FOOTER_KEY } from '../constants';
+import { useWizardContext } from '../WizardContext/WizardContext';
+
 import { WizardFooterProps } from './WizardFooter.types';
 
-export function WizardFooter({
+export const WizardFooter = ({
   backButtonProps,
   cancelButtonProps,
   primaryButtonProps,
-}: WizardFooterProps) {
-  // Handle back button click
+}: WizardFooterProps) => {
+  const { activeStep, updateStep } = useWizardContext();
+
+  const handleBackButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
+    updateStep(Direction.Prev);
+    backButtonProps?.onClick?.(e);
+  };
+
+  const handlePrimaryButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
+    updateStep(Direction.Next);
+    primaryButtonProps.onClick?.(e);
+  };
 
   return (
     <FormFooter
-      backButtonProps={backButtonProps}
+      backButtonProps={
+        activeStep > 0
+          ? {
+              ...backButtonProps,
+              onClick: handleBackButtonClick,
+            }
+          : undefined
+      }
       cancelButtonProps={cancelButtonProps}
-      primaryButtonProps={primaryButtonProps}
+      primaryButtonProps={{
+        ...primaryButtonProps,
+        onClick: handlePrimaryButtonClick,
+      }}
     />
   );
-}
+};
 
 WizardFooter.displayName = 'WizardFooter';
+WizardFooter[WIZARD_FOOTER_KEY] = true;

packages/wizard/src/WizardStep/WizardStep.styles.ts

@@ -1,5 +1,6 @@
 import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
 
-export const stepContentStyles = css`
-  /* Content styles */
+export const stepStyles = css`
+  padding: 0 ${spacing[1800]}px;
 `;

packages/wizard/src/WizardStep/WizardStep.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 
 import { Description, H3 } from '@leafygreen-ui/typography';
 
-import { stepContentStyles } from './WizardStep.styles';
+import { stepStyles } from './WizardStep.styles';
 import { WizardStepProps } from './WizardStep.types';
 
 export function WizardStep({ title, description, children }: WizardStepProps) {
   return (
-    <div>
+    <div className={stepStyles}>
       <H3>{title}</H3>
       {description && <Description>{description}</Description>}
-      <div className={stepContentStyles}>{children}</div>
+      <div>{children}</div>
     </div>
   );
 }

packages/wizard/src/WizardStep/WizardStep.types.ts

@@ -9,7 +9,7 @@ export interface WizardStepProps {
   /**
    * The description of the step
    */
-  description: ReactNode;
+  description?: ReactNode;
 
   /**
    * The content of the step

packages/wizard/src/constants.ts

@@ -0,0 +1,2 @@
+export const WIZARD_STEP_KEY = 'isWizardStep';
+export const WIZARD_FOOTER_KEY = 'isWizardFooter';

packages/wizard/src/utils/useWizardControlledValue/useWizardControlledValue.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import isUndefined from 'lodash/isUndefined';
 
 import { usePrevious } from '@leafygreen-ui/hooks';
@@ -15,7 +15,7 @@ interface ControlledValueReturnObject<T extends any> {
    * Either updates the uncontrolled value,
    * or calls the provided `onChange` callback
    */
-  setValue: (newVal?: T, ...args: Array<any>) => void;
+  setValue: Dispatch<SetStateAction<T>>;
 }
 
 /**
@@ -61,14 +61,14 @@ export const useWizardControlledValue = <T extends any>(
 
   // We set the initial value to either the `value`
   // or the temporary `initialValue` prop
-  const initialValue = useMemo(
-    () => (isControlled ? valueProp : initialProp),
+  const initialValue: T = useMemo(
+    () => (isControlled ? (valueProp as T) : (initialProp as T)),
     [initialProp, isControlled, valueProp],
   );
 
   // Keep track of the internal value state
-  const [uncontrolledValue, setUncontrolledValue] = useState<T | undefined>(
-    initialValue,
+  const [uncontrolledValue, setUncontrolledValue] = useState<T>(
+    initialValue as T,
   );
 
   // The returned value is wither the provided value prop
@@ -79,12 +79,13 @@ export const useWizardControlledValue = <T extends any>(
   );
 
   // A wrapper around `handleChange` that fires a simulated event
-  const setValue = (newVal: T | undefined) => {
+  const setValue: Dispatch<SetStateAction<T>> = newVal => {
     if (!isControlled) {
       setUncontrolledValue(newVal);
     }
 
-    onChange?.(newVal);
+    const val = typeof newVal === 'function' ? (newVal as Function)() : newVal;
+    onChange?.(val);
   };
 
   return {