From 658ceb90d148d7d46caad8935137534258c5dd65 Mon Sep 17 00:00:00 2001
From: Dhruv <79097544+dhruvv173@users.noreply.github.com>
Date: Fri, 4 Aug 2023 22:41:55 +0530
Subject: [PATCH] Fix-Migrate Picker-Network to TS (#20365)

* migrating PickerNetwork to TS

* deleting js file

* deleting js snapshot

* fixing e2e tests and updating snapshot

* updating snapshot

* Some small updates to docs and types

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>
---
 .../picker-network/README.mdx                 |  2 -
 ...t.js.snap => picker-network.test.tsx.snap} |  2 +-
 .../component-library/picker-network/index.js |  1 -
 .../component-library/picker-network/index.ts |  5 ++
 .../picker-network/picker-network.js          | 89 -------------------
 ....stories.js => picker-network.stories.tsx} | 18 ++--
 ...etwork.test.js => picker-network.test.tsx} |  0
 .../picker-network/picker-network.tsx         | 72 +++++++++++++++
 .../picker-network/picker-network.types.ts    | 36 ++++++++
 .../__snapshots__/app-header.test.js.snap     |  2 +-
 10 files changed, 124 insertions(+), 103 deletions(-)
 rename ui/components/component-library/picker-network/__snapshots__/{picker-network.test.js.snap => picker-network.test.tsx.snap} (82%)
 delete mode 100644 ui/components/component-library/picker-network/index.js
 create mode 100644 ui/components/component-library/picker-network/index.ts
 delete mode 100644 ui/components/component-library/picker-network/picker-network.js
 rename ui/components/component-library/picker-network/{picker-network.stories.js => picker-network.stories.tsx} (74%)
 rename ui/components/component-library/picker-network/{picker-network.test.js => picker-network.test.tsx} (100%)
 create mode 100644 ui/components/component-library/picker-network/picker-network.tsx
 create mode 100644 ui/components/component-library/picker-network/picker-network.types.ts

diff --git a/ui/components/component-library/picker-network/README.mdx b/ui/components/component-library/picker-network/README.mdx
index 2d7185d99..2e31576f8 100644
--- a/ui/components/component-library/picker-network/README.mdx
+++ b/ui/components/component-library/picker-network/README.mdx
@@ -12,8 +12,6 @@ The `PickerNetwork` is used for the action of changing a network.
 
 ## Props
 
-The `PickerNetwork` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
-
 <ArgsTable of={PickerNetwork} />
 
 ### Label
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
similarity index 82%
rename from ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
rename to ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
index 42534287b..2b2226998 100644
--- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
 <div>
   <button
-    class="box mm-picker-network box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
+    class="mm-box mm-picker-network mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
     data-testid="picker-network"
   >
     <div
diff --git a/ui/components/component-library/picker-network/index.js b/ui/components/component-library/picker-network/index.js
deleted file mode 100644
index 469bf6962..000000000
--- a/ui/components/component-library/picker-network/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { PickerNetwork } from './picker-network';
diff --git a/ui/components/component-library/picker-network/index.ts b/ui/components/component-library/picker-network/index.ts
new file mode 100644
index 000000000..acd470a73
--- /dev/null
+++ b/ui/components/component-library/picker-network/index.ts
@@ -0,0 +1,5 @@
+export { PickerNetwork } from './picker-network';
+export type {
+  PickerNetworkProps,
+  PickerNetworkComponent,
+} from './picker-network.types';
diff --git a/ui/components/component-library/picker-network/picker-network.js b/ui/components/component-library/picker-network/picker-network.js
deleted file mode 100644
index cfe4f4972..000000000
--- a/ui/components/component-library/picker-network/picker-network.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import {
-  AlignItems,
-  DISPLAY,
-  BorderRadius,
-  TextVariant,
-  IconColor,
-  BackgroundColor,
-} from '../../../helpers/constants/design-system';
-import Box from '../../ui/box';
-import {
-  AvatarNetwork,
-  AvatarNetworkSize,
-  IconName,
-  Icon,
-  IconSize,
-  Text,
-} from '..';
-
-export const PickerNetwork = ({
-  className,
-  avatarNetworkProps,
-  iconProps,
-  label,
-  src,
-  ...props
-}) => {
-  return (
-    <Box
-      className={classnames('mm-picker-network', className)}
-      as="button"
-      backgroundColor={BackgroundColor.backgroundAlternative}
-      alignItems={AlignItems.center}
-      paddingLeft={2}
-      paddingRight={4}
-      gap={2}
-      borderRadius={BorderRadius.pill}
-      display={DISPLAY.FLEX}
-      {...props}
-    >
-      <AvatarNetwork
-        className="mm-picker-network__avatar-network"
-        src={src}
-        name={label}
-        size={AvatarNetworkSize.Xs}
-        {...avatarNetworkProps}
-      />
-      <Text ellipsis variant={TextVariant.bodySm}>
-        {label}
-      </Text>
-      <Icon
-        className="mm-picker-network__arrow-down-icon"
-        name={IconName.ArrowDown}
-        color={IconColor.iconDefault}
-        size={IconSize.Xs}
-        {...iconProps}
-      />
-    </Box>
-  );
-};
-
-PickerNetwork.propTypes = {
-  /**
-   * The src accepts the string of the image to be rendered
-   */
-  src: PropTypes.string,
-  /**
-   * An additional className to apply to the PickerNetwork.
-   */
-  className: PropTypes.string,
-  /**
-   * It accepts all the props from AvatarNetwork
-   */
-  avatarNetworkProps: PropTypes.object,
-  /**
-   * It accepts all the props from Icon
-   */
-  iconProps: PropTypes.object,
-  /**
-   * The text content of the PickerNetwork component
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * PickerNetwork accepts all the props from Box
-   */
-  ...Box.propTypes,
-};
diff --git a/ui/components/component-library/picker-network/picker-network.stories.js b/ui/components/component-library/picker-network/picker-network.stories.tsx
similarity index 74%
rename from ui/components/component-library/picker-network/picker-network.stories.js
rename to ui/components/component-library/picker-network/picker-network.stories.tsx
index 650f2866f..be2629223 100644
--- a/ui/components/component-library/picker-network/picker-network.stories.js
+++ b/ui/components/component-library/picker-network/picker-network.stories.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
 } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box';
+import { Box } from '..';
 import README from './README.mdx';
 import { PickerNetwork } from './picker-network';
 
 export default {
   title: 'Components/ComponentLibrary/PickerNetwork',
-
   component: PickerNetwork,
   parameters: {
     docs: {
@@ -29,12 +29,12 @@ export default {
     label: 'Avalanche C-Chain',
     src: './images/avax-token.png',
   },
-};
+} as Meta<typeof PickerNetwork>;
 
 export const DefaultStory = (args) => <PickerNetwork {...args} />;
 
-export const Label = (args) => (
-  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+export const Label: StoryFn<typeof PickerNetwork> = (args) => (
+  <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
     <PickerNetwork {...args} label="Arbitrum One" />
     <PickerNetwork {...args} label="Polygon Mainnet" />
     <PickerNetwork {...args} label="Optimism" />
@@ -46,8 +46,8 @@ export const Label = (args) => (
   </Box>
 );
 
-export const Src = (args) => (
-  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+export const Src: StoryFn<typeof PickerNetwork> = (args) => (
+  <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
     <PickerNetwork {...args} label="Arbitrum One" src="./images/arbitrum.svg" />
     <PickerNetwork
       {...args}
diff --git a/ui/components/component-library/picker-network/picker-network.test.js b/ui/components/component-library/picker-network/picker-network.test.tsx
similarity index 100%
rename from ui/components/component-library/picker-network/picker-network.test.js
rename to ui/components/component-library/picker-network/picker-network.test.tsx
diff --git a/ui/components/component-library/picker-network/picker-network.tsx b/ui/components/component-library/picker-network/picker-network.tsx
new file mode 100644
index 000000000..282269b00
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import classnames from 'classnames';
+import {
+  AlignItems,
+  BorderRadius,
+  TextVariant,
+  IconColor,
+  BackgroundColor,
+  Display,
+} from '../../../helpers/constants/design-system';
+import {
+  AvatarNetwork,
+  AvatarNetworkSize,
+  Box,
+  IconName,
+  Icon,
+  IconSize,
+  Text,
+} from '..';
+import { BoxProps, PolymorphicRef } from '../box';
+import {
+  PickerNetworkComponent,
+  PickerNetworkProps,
+} from './picker-network.types';
+
+export const PickerNetwork: PickerNetworkComponent = React.forwardRef(
+  <C extends React.ElementType = 'button'>(
+    {
+      className = '',
+      avatarNetworkProps,
+      iconProps,
+      label,
+      src,
+      ...props
+    }: PickerNetworkProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    return (
+      <Box
+        className={classnames('mm-picker-network', className)}
+        ref={ref}
+        as="button"
+        backgroundColor={BackgroundColor.backgroundAlternative}
+        alignItems={AlignItems.center}
+        paddingLeft={2}
+        paddingRight={4}
+        gap={2}
+        borderRadius={BorderRadius.pill}
+        display={Display.Flex}
+        {...(props as BoxProps<C>)}
+      >
+        <AvatarNetwork
+          className="mm-picker-network__avatar-network"
+          src={src}
+          name={label}
+          size={AvatarNetworkSize.Xs}
+          {...avatarNetworkProps}
+        />
+        <Text ellipsis variant={TextVariant.bodySm}>
+          {label}
+        </Text>
+        <Icon
+          className="mm-picker-network__arrow-down-icon"
+          name={IconName.ArrowDown}
+          color={IconColor.iconDefault}
+          size={IconSize.Xs}
+          {...iconProps}
+        />
+      </Box>
+    );
+  },
+);
diff --git a/ui/components/component-library/picker-network/picker-network.types.ts b/ui/components/component-library/picker-network/picker-network.types.ts
new file mode 100644
index 000000000..48d97be43
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.types.ts
@@ -0,0 +1,36 @@
+import type {
+  PolymorphicComponentPropWithRef,
+  StyleUtilityProps,
+} from '../box';
+import { IconProps } from '../icon/icon.types';
+import { AvatarNetworkProps } from '../avatar-network/avatar-network.types';
+
+export interface PickerNetworkStyleUtilityProps extends StyleUtilityProps {
+  /**
+   * The src accepts the string of the image to be rendered
+   */
+  src?: string;
+  /**
+   * An additional className to apply to the PickerNetwork.
+   */
+  className?: string;
+  /**
+   * It accepts all the props from AvatarNetwork
+   */
+  avatarNetworkProps?: AvatarNetworkProps<'span'>;
+  /**
+   * It accepts all the props from Icon
+   */
+  iconProps?: IconProps<'span'>;
+  /**
+   * The text content of the PickerNetwork component
+   */
+  label: string;
+}
+
+export type PickerNetworkProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, PickerNetworkStyleUtilityProps>;
+
+export type PickerNetworkComponent = <C extends React.ElementType = 'button'>(
+  props: PickerNetworkProps<C>,
+) => React.ReactElement | null;
diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index 073515ead..ad79e655b 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -207,7 +207,7 @@ exports[`App Header should match snapshot 1`] = `
     >
       <div>
         <button
-          class="box mm-picker-network multichain-app-header__contents__network-picker box--margin-2 box--padding-right-4 box--padding-left-2 box--display-none box--sm:display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
+          class="mm-box mm-picker-network multichain-app-header__contents__network-picker mm-box--margin-2 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-none mm-box--sm:display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
           data-testid="network-display"
           disabled=""
         >