initial Wizard component

Author: TheSonOfThomp

packages/wizard/README.md

@@ -1,7 +1,7 @@
-
 # Wizard
 
 ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/wizard.svg)
+
 #### [View on MongoDB.design](https://www.mongodb.design/component/wizard/live-example/)
 
 ## Installation
@@ -23,4 +23,3 @@ yarn add @leafygreen-ui/wizard
 ```shell
 npm install @leafygreen-ui/wizard
 ```
-

packages/wizard/src/Wizard.stories.tsx

@@ -1,17 +1,36 @@
-
 import React from 'react';
-import { StoryFn } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
 
 import { Wizard } from '.';
 
 export default {
   title: 'Components/Wizard',
   component: Wizard,
-}
-
-const Template: StoryFn<typeof Wizard> = (props) => (
-  <Wizard {...props} />
-);
+};
 
-export const Basic = Template.bind({});
+export const LiveExample: StoryObj<typeof Wizard> = {
+  parameters: {
+    controls: {
+      exclude: ['children', 'activeStep', 'onStepChange'],
+    },
+  },
+  render: props => <Wizard {...props}></Wizard>,
+};
 
+export const Controlled: StoryObj<typeof Wizard> = {
+  parameters: {
+    controls: {
+      exclude: ['children', 'onStepChange'],
+    },
+  },
+  render: ({ activeStep, ...props }) => {
+    return (
+      <Wizard
+        activeStep={activeStep}
+        // eslint-disable-next-line no-console
+        onStepChange={x => console.log(`Set activeStep to ${x}`)}
+        {...props}
+      ></Wizard>
+    );
+  },
+};

packages/wizard/src/Wizard/Wizard.spec.tsx

@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { Wizard } from '.';
 
 describe('packages/wizard', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});

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

@@ -1,4 +1,12 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
-export const baseStyles = css``;
+export const wizardContainerStyles = css`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+
+export const stepContentStyles = css`
+  flex: 1;
+  min-height: 0; /* Allow content to shrink */
+`;

packages/wizard/src/Wizard/Wizard.tsx

@@ -1,8 +1,75 @@
-import React from 'react';
+import React, { Children, cloneElement, isValidElement, useState } from 'react';
+
+import { stepContentStyles, wizardContainerStyles } from './Wizard.styles';
 import { WizardProps } from './Wizard.types';
 
-export function Wizard({}: WizardProps) {
-  return <div>your content here</div>;
+export function Wizard({
+  activeStep: controlledActiveStep,
+  onStepChange,
+  children,
+}: WizardProps) {
+  // Internal state for uncontrolled mode
+  const [internalActiveStep, setInternalActiveStep] = useState<number>(0);
+
+  // Use controlled prop if provided, otherwise use internal state
+  const isControlled = controlledActiveStep !== undefined;
+  const activeStep = isControlled ? controlledActiveStep : internalActiveStep;
+
+  // 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 => {
+    if (isValidElement(child)) {
+      const displayName = (child.type as any)?.displayName;
+      return displayName && displayName.includes('Step');
+    }
+
+    return false;
+  });
+
+  const footerChild = childrenArray.find(child => {
+    if (isValidElement(child)) {
+      const displayName = (child.type as any)?.displayName;
+      return displayName && displayName.includes('Footer');
+    }
+
+    return false;
+  });
+
+  // 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>
+  );
 }
 
 Wizard.displayName = 'Wizard';

packages/wizard/src/Wizard/Wizard.types.ts

@@ -1 +1,18 @@
-export interface WizardProps {}
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+export interface WizardProps extends ComponentPropsWithRef<'div'> {
+  /**
+   * The current active step index (0-based). If provided, the component operates in controlled mode.
+   */
+  activeStep?: number;
+
+  /**
+   * Callback fired when the active step changes
+   */
+  onStepChange?: (step: number) => void;
+
+  /**
+   * The wizard steps and footer as children
+   */
+  children: ReactNode;
+}

packages/wizard/src/Wizard/index.ts

@@ -1,3 +1,2 @@
-
-export  { Wizard } from './Wizard';
+export { Wizard } from './Wizard';
 export { type WizardProps } from './Wizard.types';

packages/wizard/src/index.ts

@@ -1 +1 @@
-export { Wizard, type WizardProps } from './Wizard';
+export { Wizard, type WizardProps } from './Wizard';

packages/wizard/src/testing/getTestUtils.spec.tsx

@@ -4,7 +4,5 @@ import { render } from '@testing-library/react';
 import { Wizard } from '.';
 
 describe('packages/wizard/getTestUtils', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});

packages/wizard/src/testing/getTestUtils.types.ts

@@ -1 +1 @@
-export interface TestUtilsReturnType {}
+export interface TestUtilsReturnType {}