[LG-5562] integ(wizard): Creates Wizard package

.changeset/descendants-exports.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/descendants': minor
+---
+
+Exports `Position` enum. Removes type annotation from `Direction` export

.changeset/lib-find-children.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': minor
+---
+
+Adds `findChildren` utility to `lib`. Also adds `unwrapRootFragment` and `isChildWithProperty` helpers

packages/descendants/src/Highlight/index.ts

@@ -1,10 +1,11 @@
-export type {
+export {
   Direction,
-  HighlightChangeHandler,
-  HighlightContextProps,
-  HighlightHookReturnType,
-  Index,
-  UseHighlightOptions,
+  type HighlightChangeHandler,
+  type HighlightContextProps,
+  type HighlightHookReturnType,
+  type Index,
+  Position,
+  type UseHighlightOptions,
 } from './highlight.types';
 export {
   createHighlightContext,

packages/descendants/src/index.ts

@@ -15,13 +15,14 @@ export {
 // Highlight
 export {
   createHighlightContext,
-  type Direction,
+  Direction,
   type HighlightChangeHandler,
   type HighlightContextProps,
   type HighlightContextType,
   type HighlightHookReturnType,
   HighlightProvider,
   type Index,
+  Position,
   useHighlight,
   useHighlightContext,
   type UseHighlightOptions,

packages/lib/src/childQueries/findChild/findChild.spec.tsx

@@ -30,7 +30,7 @@ Baz.displayName = 'Baz';
 (Bar as any).isBar = true;
 (Baz as any).isBaz = true;
 
-describe('packages/lib/findChild', () => {
+describe('packages/compound-component/findChild', () => {
   test('should find a child component with matching static property', () => {
     // Create an iterable to test different iteration scenarios
     const children = [<Foo text="Foo" />, <Bar text="Bar" />];
@@ -77,6 +77,30 @@ describe('packages/lib/findChild', () => {
     expect((found as React.ReactElement).props.text).toBe('also-in-fragment');
   });
 
+  test('should find mapped children', () => {
+    const COUNT = 5;
+    const children = new Array(COUNT).fill(null).map((_, i) => {
+      return <Foo text={`Foo number ${i}`} />;
+    });
+
+    const found = findChild(children, 'isFoo');
+    expect((found as React.ReactElement).props.text).toBe('Foo number 0');
+  });
+
+  test('should find deeply mapped children', () => {
+    const COUNT = 5;
+    const children = (
+      <>
+        {new Array(COUNT).fill(null).map((_, i) => {
+          return <Foo text={`Foo number ${i}`} />;
+        })}
+      </>
+    );
+
+    const found = findChild(children, 'isFoo');
+    expect((found as React.ReactElement).props.text).toBe('Foo number 0');
+  });
+
   test('should NOT find components in deeply nested fragments (search depth limitation)', () => {
     const children = (
       <React.Fragment>

packages/lib/src/childQueries/findChild/findChild.tsx

@@ -42,8 +42,9 @@ export const findChild = (
   }
 
   const allChildren = unwrapRootFragment(children);
+  if (!allChildren) return;
 
-  return allChildren?.find(child =>
-    isChildWithProperty(child, staticProperty),
-  ) as ReactElement | undefined;
+  return allChildren
+    .flat()
+    .find(child => isChildWithProperty(child, staticProperty)) as ReactElement;
 };

packages/lib/src/childQueries/findChildren/findChildren.spec.tsx

@@ -30,7 +30,7 @@ Baz.displayName = 'Baz';
 (Bar as any).isBar = true;
 (Baz as any).isBaz = true;
 
-describe('packages/lib/findChildren', () => {
+describe('packages/compound-component/findChildren', () => {
   describe('basic functionality', () => {
     it('should find all children with matching static property', () => {
       const children = [
@@ -67,120 +67,142 @@ describe('packages/lib/findChildren', () => {
     });
   });
 
-  describe('empty and null children handling', () => {
-    it('should handle null children', () => {
-      const found = findChildren(null, 'isFoo');
-      expect(found).toEqual([]);
+  it('should find mapped children', () => {
+    const COUNT = 5;
+    const children = new Array(COUNT).fill(null).map((_, i) => {
+      return <Foo text={`Foo number ${i}`} />;
     });
 
-    it('should handle undefined children', () => {
-      const found = findChildren(undefined, 'isFoo');
-      expect(found).toEqual([]);
-    });
+    const found = findChildren(children, 'isFoo');
+    expect(found).toHaveLength(COUNT);
+  });
 
-    it('should handle empty fragment', () => {
-      const children = <></>;
-      const found = findChildren(children, 'isFoo');
-      expect(found).toEqual([]);
-    });
+  it('should find deeply mapped children', () => {
+    const COUNT = 5;
+    const children = (
+      <>
+        {new Array(COUNT).fill(null).map((_, i) => {
+          return <Foo text={`Foo number ${i}`} />;
+        })}
+      </>
+    );
+
+    const found = findChildren(children, 'isFoo');
+    expect(found).toHaveLength(COUNT);
+  });
+});
 
-    it('should handle empty array children', () => {
-      const children: Array<React.ReactElement> = [];
-      const found = findChildren(children, 'isFoo');
-      expect(found).toEqual([]);
-    });
+describe('empty and null children handling', () => {
+  it('should handle null children', () => {
+    const found = findChildren(null, 'isFoo');
+    expect(found).toEqual([]);
   });
 
-  describe('Fragment handling', () => {
-    it('should handle single-level fragment children', () => {
-      const children = (
-        <React.Fragment>
-          <Foo text="foo-in-fragment" />
-          <Bar text="bar-in-fragment" />
-          <Foo text="another-foo" />
-        </React.Fragment>
-      );
+  it('should handle undefined children', () => {
+    const found = findChildren(undefined, 'isFoo');
+    expect(found).toEqual([]);
+  });
 
-      const found = findChildren(children, 'isFoo');
-      expect(found).toHaveLength(2);
-      expect(found[0].props.text).toBe('foo-in-fragment');
-      expect(found[1].props.text).toBe('another-foo');
-    });
+  it('should handle empty fragment', () => {
+    const children = <></>;
+    const found = findChildren(children, 'isFoo');
+    expect(found).toEqual([]);
+  });
+
+  it('should handle empty array children', () => {
+    const children: Array<React.ReactElement> = [];
+    const found = findChildren(children, 'isFoo');
+    expect(found).toEqual([]);
+  });
+});
 
-    it('should NOT find children in deeply nested Fragments', () => {
-      const children = (
+describe('Fragment handling', () => {
+  it('should handle single-level fragment children', () => {
+    const children = (
+      <React.Fragment>
+        <Foo text="foo-in-fragment" />
+        <Bar text="bar-in-fragment" />
+        <Foo text="another-foo" />
+      </React.Fragment>
+    );
+
+    const found = findChildren(children, 'isFoo');
+    expect(found).toHaveLength(2);
+    expect(found[0].props.text).toBe('foo-in-fragment');
+    expect(found[1].props.text).toBe('another-foo');
+  });
+
+  it('should NOT find children in deeply nested Fragments', () => {
+    const children = (
+      <React.Fragment>
+        <Foo text="direct-foo" />
         <React.Fragment>
-          <Foo text="direct-foo" />
           <React.Fragment>
-            <React.Fragment>
-              <Foo text="deeply-nested-foo" />
-            </React.Fragment>
+            <Foo text="deeply-nested-foo" />
           </React.Fragment>
-          <Bar text="direct-bar" />
         </React.Fragment>
-      );
-
-      // Should only find direct children, not double-nested ones
-      const found = findChildren(children, 'isFoo');
-      expect(found).toHaveLength(1);
-      expect(found[0].props.text).toBe('direct-foo');
-    });
+        <Bar text="direct-bar" />
+      </React.Fragment>
+    );
+
+    // Should only find direct children, not double-nested ones
+    const found = findChildren(children, 'isFoo');
+    expect(found).toHaveLength(1);
+    expect(found[0].props.text).toBe('direct-foo');
   });
+});
 
-  describe('styled components', () => {
-    it('should work with styled components from @emotion/styled', () => {
-      const StyledFoo = styled(Foo)`
-        background-color: red;
-        padding: 8px;
-      `;
-
-      const children = [
-        <Foo text="regular-foo" />,
-        <StyledFoo text="styled-foo" />,
-        <StyledFoo text="styled-foo-two" />,
-        <Bar text="regular-bar" />,
-        <Foo text="another-foo" />,
-      ];
-
-      const found = findChildren(children, 'isFoo');
-      expect(found).toHaveLength(4);
-      expect(found.map(c => c.props.text)).toEqual([
-        'regular-foo',
-        'styled-foo',
-        'styled-foo-two',
-        'another-foo',
-      ]);
-
-      // Verify the styled component is actually styled
-      const styledComponent = found[1];
-      const styledType = styledComponent.type as any;
-      const hasEmotionProps = !!(
-        styledType.target || styledType.__emotion_base
-      );
-      expect(hasEmotionProps).toBe(true);
-    });
+describe('styled components', () => {
+  it('should work with styled components from @emotion/styled', () => {
+    const StyledFoo = styled(Foo)`
+      background-color: red;
+      padding: 8px;
+    `;
+
+    const children = [
+      <Foo text="regular-foo" />,
+      <StyledFoo text="styled-foo" />,
+      <StyledFoo text="styled-foo-two" />,
+      <Bar text="regular-bar" />,
+      <Foo text="another-foo" />,
+    ];
+
+    const found = findChildren(children, 'isFoo');
+    expect(found).toHaveLength(4);
+    expect(found.map(c => c.props.text)).toEqual([
+      'regular-foo',
+      'styled-foo',
+      'styled-foo-two',
+      'another-foo',
+    ]);
+
+    // Verify the styled component is actually styled
+    const styledComponent = found[1];
+    const styledType = styledComponent.type as any;
+    const hasEmotionProps = !!(styledType.target || styledType.__emotion_base);
+    expect(hasEmotionProps).toBe(true);
   });
+});
 
-  describe('search depth limitations', () => {
-    it('should NOT find deeply nested components', () => {
-      const children = [
-        <Fragment>
-          <Foo text="single-fragment" />
-        </Fragment>,
+describe('search depth limitations', () => {
+  it('should NOT find deeply nested components', () => {
+    const children = [
+      <Fragment>
+        <Foo text="single-fragment" />
+      </Fragment>,
+      <Fragment>
         <Fragment>
-          <Fragment>
-            <Foo text="double-nested" />
-          </Fragment>
-        </Fragment>,
-        <div>
-          <Foo text="inside-div" />
-        </div>,
-        <Foo text="direct-child" />,
-      ];
-
-      const found = findChildren(children, 'isFoo');
-      expect(found).toHaveLength(1);
-      expect(found[0].props.text).toBe('direct-child');
-    });
+          <Foo text="double-nested" />
+        </Fragment>
+      </Fragment>,
+      <div>
+        <Foo text="inside-div" />
+      </div>,
+      <Foo text="direct-child" />,
+    ];
+
+    const found = findChildren(children, 'isFoo');
+    expect(found).toHaveLength(1);
+    expect(found[0].props.text).toBe('direct-child');
   });
 });

packages/lib/src/childQueries/findChildren/findChildren.ts

@@ -15,7 +15,7 @@ import { unwrapRootFragment } from '../unwrapRootFragment';
  * **Styled Component Support:** Checks component.target and component.__emotion_base
  * for styled() wrapped components.
  *
- *  * @example
+ * @example
  * ```ts
  * // ✅ Will find: Direct children
  * findChildren([
@@ -56,7 +56,9 @@ export const findChildren = (
 
   if (!allChildren) return [];
 
-  return allChildren.filter(child =>
-    isChildWithProperty(child, staticProperty),
-  ) as Array<ReactElement>;
+  return allChildren
+    .flat()
+    .filter(child =>
+      isChildWithProperty(child, staticProperty),
+    ) as Array<ReactElement>;
 };

packages/wizard/README.md

@@ -0,0 +1,25 @@
+# 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
+
+### PNPM
+
+```shell
+pnpm add @leafygreen-ui/wizard
+```
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/wizard
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/wizard
+```