From 023249a944c816f842d50b6e5c011ed26510e049 Mon Sep 17 00:00:00 2001
From: jainex <jainexp017@gmail.com>
Date: Wed, 2 Aug 2023 06:06:55 +0530
Subject: [PATCH] migration of  HeaderBase to use TS Box version (#20250)

* migration of  HeaderBase to use TS Box version

* migration of  HeaderBase to use TS Box version

* update snapshot

* fix lint error

* Some small updates to types and removing deprecated storyook functions

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
---
 .../__snapshots__/header-base.test.tsx.snap   |   4 +-
 .../header-base/header-base.stories.tsx       |  10 +-
 .../header-base/header-base.tsx               | 210 +++++++++---------
 .../header-base/header-base.types.ts          |  22 +-
 .../component-library/header-base/index.ts    |   6 +-
 .../__snapshots__/modal-header.test.tsx.snap  |   4 +-
 .../modal-header/modal-header.types.ts        |   4 +-
 .../popover-header.test.tsx.snap              |   4 +-
 .../popover-header/popover-header.types.ts    |   4 +-
 9 files changed, 145 insertions(+), 123 deletions(-)

diff --git a/ui/components/component-library/header-base/__snapshots__/header-base.test.tsx.snap b/ui/components/component-library/header-base/__snapshots__/header-base.test.tsx.snap
index c6217297f..a67e3648e 100644
--- a/ui/components/component-library/header-base/__snapshots__/header-base.test.tsx.snap
+++ b/ui/components/component-library/header-base/__snapshots__/header-base.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`HeaderBase should render HeaderBase element correctly 1`] = `
 <div>
   <div
-    class="box mm-header-base box--display-flex box--flex-direction-row box--justify-content-space-between"
+    class="mm-box mm-header-base mm-box--display-flex mm-box--justify-content-space-between"
     data-testid="header-base"
     title="HeaderBase test"
   >
     <div
-      class="box box--flex-direction-row box--width-full"
+      class="mm-box mm-box--width-full"
     >
       should render HeaderBase element correctly
     </div>
diff --git a/ui/components/component-library/header-base/header-base.stories.tsx b/ui/components/component-library/header-base/header-base.stories.tsx
index 6079b9f69..abe880dcf 100644
--- a/ui/components/component-library/header-base/header-base.stories.tsx
+++ b/ui/components/component-library/header-base/header-base.stories.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Box from '../../ui/box';
+import { StoryFn, Meta } from '@storybook/react';
 import {
   IconName,
   Button,
@@ -8,6 +7,7 @@ import {
   ButtonIcon,
   ButtonIconSize,
   Text,
+  Box,
 } from '..';
 
 import {
@@ -27,11 +27,9 @@ export default {
       page: README,
     },
   },
-} as ComponentMeta<typeof HeaderBase>;
+} as Meta<typeof HeaderBase>;
 
-const Template: ComponentStory<typeof HeaderBase> = (args) => (
-  <HeaderBase {...args} />
-);
+const Template: StoryFn<typeof HeaderBase> = (args) => <HeaderBase {...args} />;
 
 export const DefaultStory = Template.bind({});
 
diff --git a/ui/components/component-library/header-base/header-base.tsx b/ui/components/component-library/header-base/header-base.tsx
index f10315e3f..371340762 100644
--- a/ui/components/component-library/header-base/header-base.tsx
+++ b/ui/components/component-library/header-base/header-base.tsx
@@ -1,114 +1,122 @@
 import React, { useRef, useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
 import {
-  BLOCK_SIZES,
-  DISPLAY,
+  BlockSize,
+  Display,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
-import Box from '../../ui/box';
+import { Box } from '..';
 
-import { HeaderBaseProps } from './header-base.types';
+import type { PolymorphicRef, BoxProps } from '../box';
 
-export const HeaderBase: React.FC<HeaderBaseProps> = ({
-  startAccessory,
-  endAccessory,
-  className = '',
-  children,
-  childrenWrapperProps,
-  startAccessoryWrapperProps,
-  endAccessoryWrapperProps,
-  ...props
-}) => {
-  const startAccessoryRef = useRef<HTMLDivElement>(null);
-  const endAccessoryRef = useRef<HTMLDivElement>(null);
-  const [accessoryMinWidth, setAccessoryMinWidth] = useState<number>();
+import { HeaderBaseProps, HeaderBaseComponent } from './header-base.types';
 
-  useEffect(() => {
-    function handleResize() {
-      if (startAccessoryRef.current && endAccessoryRef.current) {
-        const accMinWidth = Math.max(
-          startAccessoryRef.current.scrollWidth,
-          endAccessoryRef.current.scrollWidth,
-        );
-        setAccessoryMinWidth(accMinWidth);
-      } else if (startAccessoryRef.current && !endAccessoryRef.current) {
-        setAccessoryMinWidth(startAccessoryRef.current.scrollWidth);
-      } else if (!startAccessoryRef.current && endAccessoryRef.current) {
-        setAccessoryMinWidth(endAccessoryRef.current.scrollWidth);
-      } else {
-        setAccessoryMinWidth(0);
+export const HeaderBase: HeaderBaseComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    {
+      startAccessory,
+      endAccessory,
+      className = '',
+      children,
+      childrenWrapperProps,
+      startAccessoryWrapperProps,
+      endAccessoryWrapperProps,
+      ...props
+    }: HeaderBaseProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    const startAccessoryRef = useRef<HTMLDivElement>(null);
+    const endAccessoryRef = useRef<HTMLDivElement>(null);
+    const [accessoryMinWidth, setAccessoryMinWidth] = useState<number>();
+
+    useEffect(() => {
+      function handleResize() {
+        if (startAccessoryRef.current && endAccessoryRef.current) {
+          const accMinWidth = Math.max(
+            startAccessoryRef.current.scrollWidth,
+            endAccessoryRef.current.scrollWidth,
+          );
+          setAccessoryMinWidth(accMinWidth);
+        } else if (startAccessoryRef.current && !endAccessoryRef.current) {
+          setAccessoryMinWidth(startAccessoryRef.current.scrollWidth);
+        } else if (!startAccessoryRef.current && endAccessoryRef.current) {
+          setAccessoryMinWidth(endAccessoryRef.current.scrollWidth);
+        } else {
+          setAccessoryMinWidth(0);
+        }
       }
-    }
 
-    handleResize();
-    window.addEventListener('resize', handleResize);
+      handleResize();
+      window.addEventListener('resize', handleResize);
 
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [startAccessoryRef, endAccessoryRef, children]);
-
-  const getTitleStyles = useMemo(() => {
-    if (startAccessory && !endAccessory) {
-      return {
-        marginRight: `${accessoryMinWidth}px`,
+      return () => {
+        window.removeEventListener('resize', handleResize);
       };
-    } else if (!startAccessory && endAccessory) {
-      return {
-        marginLeft: `${accessoryMinWidth}px`,
-      };
-    }
-    return {};
-  }, [accessoryMinWidth, startAccessory, endAccessory]);
+    }, [startAccessoryRef, endAccessoryRef, children]);
 
-  return (
-    <Box
-      className={classnames('mm-header-base', className)}
-      display={DISPLAY.FLEX}
-      justifyContent={JustifyContent.spaceBetween}
-      {...props}
-    >
-      {startAccessory && (
-        <Box
-          ref={startAccessoryRef}
-          style={
-            children
-              ? {
-                  minWidth: `${accessoryMinWidth}px`,
-                }
-              : undefined
-          }
-          {...startAccessoryWrapperProps}
-        >
-          {startAccessory}
-        </Box>
-      )}
-      {children && (
-        <Box
-          width={BLOCK_SIZES.FULL}
-          style={getTitleStyles}
-          {...childrenWrapperProps}
-        >
-          {children}
-        </Box>
-      )}
-      {endAccessory && (
-        <Box
-          display={DISPLAY.FLEX}
-          justifyContent={JustifyContent.flexEnd}
-          ref={endAccessoryRef}
-          style={
-            children
-              ? {
-                  minWidth: `${accessoryMinWidth}px`,
-                }
-              : undefined
-          }
-          {...endAccessoryWrapperProps}
-        >
-          {endAccessory}
-        </Box>
-      )}
-    </Box>
-  );
-};
+    const getTitleStyles = useMemo(() => {
+      if (startAccessory && !endAccessory) {
+        return {
+          marginRight: `${accessoryMinWidth}px`,
+        };
+      } else if (!startAccessory && endAccessory) {
+        return {
+          marginLeft: `${accessoryMinWidth}px`,
+        };
+      }
+      return {};
+    }, [accessoryMinWidth, startAccessory, endAccessory]);
+
+    return (
+      <Box
+        className={classnames('mm-header-base', className)}
+        ref={ref}
+        display={Display.Flex}
+        justifyContent={JustifyContent.spaceBetween}
+        {...(props as BoxProps<C>)}
+      >
+        {startAccessory && (
+          <Box
+            ref={startAccessoryRef}
+            style={
+              children
+                ? {
+                    minWidth: `${accessoryMinWidth}px`,
+                  }
+                : undefined
+            }
+            {...(startAccessoryWrapperProps as BoxProps<'div'>)}
+          >
+            {startAccessory}
+          </Box>
+        )}
+        {children && (
+          <Box
+            width={BlockSize.Full}
+            style={getTitleStyles}
+            {...(childrenWrapperProps as BoxProps<'div'>)}
+          >
+            {children}
+          </Box>
+        )}
+        {endAccessory && (
+          <Box
+            display={Display.Flex}
+            justifyContent={JustifyContent.flexEnd}
+            ref={endAccessoryRef}
+            style={
+              children
+                ? {
+                    minWidth: `${accessoryMinWidth}px`,
+                  }
+                : undefined
+            }
+            {...(endAccessoryWrapperProps as BoxProps<'div'>)}
+          >
+            {endAccessory}
+          </Box>
+        )}
+      </Box>
+    );
+  },
+);
diff --git a/ui/components/component-library/header-base/header-base.types.ts b/ui/components/component-library/header-base/header-base.types.ts
index a871ce744..8c5938efb 100644
--- a/ui/components/component-library/header-base/header-base.types.ts
+++ b/ui/components/component-library/header-base/header-base.types.ts
@@ -1,7 +1,12 @@
 import React from 'react';
-import type { BoxProps } from '../../ui/box/box.d';
 
-export interface HeaderBaseProps extends BoxProps {
+import type {
+  StyleUtilityProps,
+  PolymorphicComponentPropWithRef,
+  BoxProps,
+} from '../box';
+
+export interface HeaderBaseStyleUtilityProps extends StyleUtilityProps {
   /**
    * The children is the title area of the HeaderBase
    */
@@ -9,7 +14,7 @@ export interface HeaderBaseProps extends BoxProps {
   /**
    * Use the `childrenWrapperProps` prop to define the props to the children wrapper
    */
-  childrenWrapperProps?: BoxProps;
+  childrenWrapperProps?: BoxProps<'div'>;
   /**
    * The start(default left) content area of HeaderBase
    */
@@ -17,7 +22,7 @@ export interface HeaderBaseProps extends BoxProps {
   /**
    * Use the `startAccessoryWrapperProps` prop to define the props to the start accessory wrapper
    */
-  startAccessoryWrapperProps?: BoxProps;
+  startAccessoryWrapperProps?: BoxProps<'div'>;
   /**
    * The end (default right) content area of HeaderBase
    */
@@ -25,9 +30,16 @@ export interface HeaderBaseProps extends BoxProps {
   /**
    * Use the `endAccessoryWrapperProps` prop to define the props to the end accessory wrapper
    */
-  endAccessoryWrapperProps?: BoxProps;
+  endAccessoryWrapperProps?: BoxProps<'div'>;
   /**
    * An additional className to apply to the HeaderBase
    */
   className?: string;
 }
+
+export type HeaderBaseProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, HeaderBaseStyleUtilityProps>;
+
+export type HeaderBaseComponent = <C extends React.ElementType = 'div'>(
+  props: HeaderBaseProps<C>,
+) => React.ReactElement | null;
diff --git a/ui/components/component-library/header-base/index.ts b/ui/components/component-library/header-base/index.ts
index 1b47557f8..a05425161 100644
--- a/ui/components/component-library/header-base/index.ts
+++ b/ui/components/component-library/header-base/index.ts
@@ -1,2 +1,6 @@
 export { HeaderBase } from './header-base';
-export type { HeaderBaseProps } from './header-base.types';
+export type {
+  HeaderBaseProps,
+  HeaderBaseComponent,
+  HeaderBaseStyleUtilityProps,
+} from './header-base.types';
diff --git a/ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap b/ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap
index 67298b339..c927dbe36 100644
--- a/ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap
+++ b/ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`ModalHeader should render ModalHeader correctly 1`] = `
 <div>
   <div
-    class="box mm-header-base mm-modal-header box--display-flex box--flex-direction-row box--justify-content-space-between"
+    class="mm-box mm-header-base mm-modal-header mm-box--display-flex mm-box--justify-content-space-between"
     data-testid="modal-header"
   >
     <div
-      class="box box--flex-direction-row box--width-full"
+      class="mm-box mm-box--width-full"
     >
       <header
         class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
diff --git a/ui/components/component-library/modal-header/modal-header.types.ts b/ui/components/component-library/modal-header/modal-header.types.ts
index 47bb752a0..32d38fa98 100644
--- a/ui/components/component-library/modal-header/modal-header.types.ts
+++ b/ui/components/component-library/modal-header/modal-header.types.ts
@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ButtonIconProps } from '../button-icon/button-icon.types';
-import type { HeaderBaseProps } from '../header-base';
+import type { HeaderBaseStyleUtilityProps } from '../header-base';
 
-export interface ModalHeaderProps extends HeaderBaseProps {
+export interface ModalHeaderProps extends HeaderBaseStyleUtilityProps {
   /**
    * The contents within the ModalHeader positioned middle (popular for title use case)
    */
diff --git a/ui/components/component-library/popover-header/__snapshots__/popover-header.test.tsx.snap b/ui/components/component-library/popover-header/__snapshots__/popover-header.test.tsx.snap
index 06201d78f..a691faaed 100644
--- a/ui/components/component-library/popover-header/__snapshots__/popover-header.test.tsx.snap
+++ b/ui/components/component-library/popover-header/__snapshots__/popover-header.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`PopoverHeader should render PopoverHeader correctly 1`] = `
 <div>
   <div
-    class="box mm-header-base mm-popover-header box--display-flex box--flex-direction-row box--justify-content-space-between"
+    class="mm-box mm-header-base mm-popover-header mm-box--display-flex mm-box--justify-content-space-between"
     data-testid="popover-header"
   >
     <div
-      class="box box--flex-direction-row box--width-full"
+      class="mm-box mm-box--width-full"
     >
       <h4
         class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-inherit"
diff --git a/ui/components/component-library/popover-header/popover-header.types.ts b/ui/components/component-library/popover-header/popover-header.types.ts
index a965dbd54..1221a1c89 100644
--- a/ui/components/component-library/popover-header/popover-header.types.ts
+++ b/ui/components/component-library/popover-header/popover-header.types.ts
@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ButtonIconProps } from '../button-icon/button-icon.types';
-import type { HeaderBaseProps } from '../header-base';
+import type { HeaderBaseStyleUtilityProps } from '../header-base';
 
-export interface PopoverHeaderProps extends HeaderBaseProps {
+export interface PopoverHeaderProps extends HeaderBaseStyleUtilityProps {
   /**
    * The contents within the PopoverHeader positioned middle (popular for title use case)
    */