fix/migrate AvatarAccount to TS (#20208)

* migrating AvatarAccount to TS

* updates

* reverting changes to diameter

* suggested changes

* adding explicit types for AvatarAccountDiameter

* updating documentation

* Some small updates to types

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/component-library/avatar-account/README.mdx

@@ -13,15 +13,10 @@ The `AvatarAccount` is a type of avatar reserved for representing accounts.
 
 ## Props
 
-The `AvatarAccount` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+The `AvatarAccount` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
 
 <ArgsTable of={AvatarAccount} />
 
-`AvatarAccount` accepts all [AvatarBase](/docs/components-componentlibrary-avatarbase--default-story))
-component props
-
-<ArgsTable of={AvatarBase} />
-
 ### Size
 
 Use the `size` prop and the `AvatarAccountSize` enum from `../../component-library` to change the size of `AvatarAccount`

ui/components/component-library/avatar-account/avatar-account.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import Jazzicon from '../../ui/jazzicon/jazzicon.component';
-import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component';
-
-import Box from '../../ui/box/box';
-
-import { AvatarBase } from '../avatar-base';
-import {
-  AvatarAccountDiameter,
-  AvatarAccountVariant,
-  AvatarAccountSize,
-} from './avatar-account.types';
-
-export const AvatarAccount = React.forwardRef(
-  (
-    {
-      size = AvatarAccountSize.Md,
-      address,
-      className,
-      variant = AvatarAccountVariant.Jazzicon,
-      ...props
-    },
-    ref,
-  ) => (
-    <AvatarBase
-      ref={ref}
-      size={size}
-      className={classnames('mm-avatar-account', className)}
-      {...props}
-    >
-      {variant === AvatarAccountVariant.Jazzicon ? (
-        <Jazzicon
-          className={classnames('mm-avatar-account__jazzicon')}
-          address={address}
-          diameter={AvatarAccountDiameter[size]}
-        />
-      ) : (
-        <BlockieIdenticon
-          address={address}
-          diameter={AvatarAccountDiameter[size]}
-          borderRadius="50%"
-        />
-      )}
-    </AvatarBase>
-  ),
-);
-
-AvatarAccount.propTypes = {
-  /**
-   * The size of the AvatarAccount.
-   * Possible values could be 'AvatarAccountSize.Xs', 'AvatarAccountSize.Sm', 'AvatarAccountSize.Md', 'AvatarAccountSize.Lg', 'AvatarAccountSize.Xl'
-   * Defaults to AvatarAccountSize.Md
-   */
-  size: PropTypes.oneOf(Object.values(AvatarAccountSize)),
-  /**
-   * The variant of the avatar to be rendered, it can render either a AvatarAccountVariant.Jazzicon or a AvatarAccountVariant.Blockie
-   */
-  variant: PropTypes.oneOf(Object.values(AvatarAccountVariant)),
-  /**
-   * Address used for generating random image
-   */
-  address: PropTypes.string.isRequired,
-  /**
-   * Add custom css class
-   */
-  className: PropTypes.string,
-  /**
-   * AvatarAccount also accepts all Box props including but not limited to
-   * className, as(change root element of HTML element) and margin props
-   */
-  ...Box.propTypes,
-};
-
-AvatarAccount.displayName = 'AvatarAccount';

ui/components/component-library/avatar-account/avatar-account.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import Box from '../../ui/box/box';
+import { StoryFn, Meta } from '@storybook/react';
-import { AlignItems, DISPLAY } from '../../../helpers/constants/design-system';
+import { Box } from '../box';
+import { AlignItems, Display } from '../../../helpers/constants/design-system';
 import { AvatarAccount } from './avatar-account';
 import {
   AvatarAccountVariant,
@@ -20,9 +21,7 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(AvatarAccountSize).map(
+      options: Object.values(AvatarAccountSize),
-        (value) => value.toLowerCase(), // Removes reverse mapping from enum this is a temporary fix until we are using typescript for everything
-      ),
     },
     address: { control: 'text' },
     variant: {
@@ -35,14 +34,14 @@ export default {
     size: AvatarAccountSize.Md,
     variant: AvatarAccountVariant.Jazzicon,
   },
-};
+} as Meta<typeof AvatarAccount>;
 
 export const DefaultStory = (args) => <AvatarAccount {...args} />;
 
 DefaultStory.storyName = 'Default';
 
-export const Size = (args) => (
+export const Size: StoryFn<typeof AvatarAccount> = (args) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
+  <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
     <AvatarAccount {...args} size={AvatarAccountSize.Xs} />
     <AvatarAccount {...args} size={AvatarAccountSize.Sm} />
     <AvatarAccount {...args} size={AvatarAccountSize.Md} />
@@ -51,15 +50,15 @@ export const Size = (args) => (
   </Box>
 );
 
-export const Variant = (args) => (
+export const Variant: StoryFn<typeof AvatarAccount> = (args) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
+  <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
     <AvatarAccount {...args} variant={AvatarAccountVariant.Jazzicon} />
     <AvatarAccount {...args} variant={AvatarAccountVariant.Blockies} />
   </Box>
 );
 
-export const Address = (args) => (
+export const Address: StoryFn<typeof AvatarAccount> = (args) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.BASELINE} gap={1}>
+  <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
     <AvatarAccount
       {...args}
       variant={AvatarAccountVariant.Jazzicon}

ui/components/component-library/avatar-account/avatar-account.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import classnames from 'classnames';
+import Jazzicon from '../../ui/jazzicon/jazzicon.component';
+import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component';
+
+import type { PolymorphicRef } from '../box';
+
+import { AvatarBase, AvatarBaseProps } from '../avatar-base';
+import {
+  AvatarAccountDiameter,
+  AvatarAccountVariant,
+  AvatarAccountSize,
+  AvatarAccountComponent,
+  AvatarAccountProps,
+} from './avatar-account.types';
+
+export const AvatarAccount: AvatarAccountComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    {
+      size = AvatarAccountSize.Md,
+      address,
+      className = '',
+      variant = AvatarAccountVariant.Jazzicon,
+      ...props
+    }: AvatarAccountProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => (
+    <AvatarBase
+      ref={ref}
+      size={size}
+      className={classnames('mm-avatar-account', className)}
+      {...(props as AvatarBaseProps<C>)}
+    >
+      {variant === AvatarAccountVariant.Jazzicon ? (
+        <Jazzicon
+          className={classnames('mm-avatar-account__jazzicon')}
+          address={address}
+          diameter={AvatarAccountDiameter[size]}
+        />
+      ) : (
+        <BlockieIdenticon
+          address={address}
+          diameter={AvatarAccountDiameter[size]}
+          borderRadius="50%"
+        />
+      )}
+    </AvatarBase>
+  ),
+);

ui/components/component-library/avatar-account/avatar-account.types.ts

@@ -1,4 +1,5 @@
-import { Size } from '../../../helpers/constants/design-system';
+import type { PolymorphicComponentPropWithRef } from '../box';
+import { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types';
 
 export enum AvatarAccountVariant {
   Jazzicon = 'jazzicon',
@@ -6,17 +7,50 @@ export enum AvatarAccountVariant {
 }
 
 export enum AvatarAccountSize {
-  Xs = Size.XS,
+  Xs = 'xs',
-  Sm = Size.SM,
+  Sm = 'sm',
-  Md = Size.MD,
+  Md = 'md',
-  Lg = Size.LG,
+  Lg = 'lg',
-  Xl = Size.XL,
+  Xl = 'xl',
 }
 
-export const AvatarAccountDiameter = {
+export const AvatarAccountDiameter: Record<AvatarAccountSize, number> = {
   [AvatarAccountSize.Xs]: 16,
   [AvatarAccountSize.Sm]: 24,
   [AvatarAccountSize.Md]: 32,
   [AvatarAccountSize.Lg]: 40,
   [AvatarAccountSize.Xl]: 48,
-} as const;
+};
+
+export interface AvatarAccountStyleUtilityProps
+  extends Omit<AvatarBaseStyleUtilityProps, 'size' | 'variant'> {
+  /**
+   * The size of the AvatarAccount.
+   * Possible values could be 'AvatarAccountSize.Xs', 'AvatarAccountSize.Sm', 'AvatarAccountSize.Md', 'AvatarAccountSize.Lg', 'AvatarAccountSize.Xl'
+   * Defaults to AvatarAccountSize.Md
+   */
+  size?: AvatarAccountSize;
+  /**
+   * The variant of the avatar to be rendered, it can render either a AvatarAccountVariant.Jazzicon or a AvatarAccountVariant.Blockie
+   */
+  variant?: AvatarAccountVariant;
+  /**
+   * Address used for generating random image
+   */
+  address: string;
+  /**
+   * Add custom css class
+   */
+  className?: string;
+  /**
+   * AvatarAccount also accepts all Box props including but not limited to
+   * className, as(change root element of HTML element) and margin props
+   */
+}
+
+export type AvatarAccountProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, AvatarAccountStyleUtilityProps>;
+
+export type AvatarAccountComponent = <C extends React.ElementType = 'div'>(
+  props: AvatarAccountProps<C>,
+) => React.ReactElement | null;

ui/components/component-library/avatar-account/index.ts

@@ -4,3 +4,4 @@ export {
   AvatarAccountVariant,
   AvatarAccountDiameter,
 } from './avatar-account.types';
+export type { AvatarAccountProps } from './avatar-account.types';