diff --git a/shared/constants/network.ts b/shared/constants/network.ts index f4a840762dc4..4c84c362d913 100644 --- a/shared/constants/network.ts +++ b/shared/constants/network.ts @@ -3,14 +3,14 @@ import { capitalize, pick } from 'lodash'; * A type representing any valid value for 'type' for setProviderType and other * methods that add or manipulate networks in MetaMask state. */ -export type NetworkType = (typeof NETWORK_TYPES)[keyof typeof NETWORK_TYPES]; +export type NetworkType = typeof NETWORK_TYPES[keyof typeof NETWORK_TYPES]; /** * A union type of all possible hard-coded chain ids. This type is not * exhaustive and cannot be used for typing chainId in areas where the user or * dapp may specify any chainId. */ -export type ChainId = (typeof CHAIN_IDS)[keyof typeof CHAIN_IDS]; +export type ChainId = typeof CHAIN_IDS[keyof typeof CHAIN_IDS]; /** * A type that is a union type of all possible hardcoded currency symbols. @@ -18,13 +18,13 @@ export type ChainId = (typeof CHAIN_IDS)[keyof typeof CHAIN_IDS]; * or dapp may supply their own symbol. */ export type CurrencySymbol = - (typeof CURRENCY_SYMBOLS)[keyof typeof CURRENCY_SYMBOLS]; + typeof CURRENCY_SYMBOLS[keyof typeof CURRENCY_SYMBOLS]; /** * Test networks have special symbols that combine the network name and 'ETH' * so that they are distinct from mainnet and other networks that use 'ETH'. */ export type TestNetworkCurrencySymbol = - (typeof TEST_NETWORK_TICKER_MAP)[keyof typeof TEST_NETWORK_TICKER_MAP]; + typeof TEST_NETWORK_TICKER_MAP[keyof typeof TEST_NETWORK_TICKER_MAP]; /** * An object containing preferences for an RPC definition diff --git a/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap b/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.tsx.snap similarity index 100% rename from ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap rename to ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.tsx.snap diff --git a/ui/components/component-library/avatar-token/avatar-token.constants.js b/ui/components/component-library/avatar-token/avatar-token.constants.js deleted file mode 100644 index b9d1e10a42c7..000000000000 --- a/ui/components/component-library/avatar-token/avatar-token.constants.js +++ /dev/null @@ -1,9 +0,0 @@ -import { Size } from '../../../helpers/constants/design-system'; - -export const AVATAR_TOKEN_SIZES = { - XS: Size.XS, - SM: Size.SM, - MD: Size.MD, - LG: Size.LG, - XL: Size.XL, -}; diff --git a/ui/components/component-library/avatar-token/avatar-token.js b/ui/components/component-library/avatar-token/avatar-token.js deleted file mode 100644 index 9cc951011035..000000000000 --- a/ui/components/component-library/avatar-token/avatar-token.js +++ /dev/null @@ -1,133 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import classnames from 'classnames'; -import PropTypes from 'prop-types'; -import Box from '../../ui/box/box'; -import { AvatarBase } from '../avatar-base'; -import { - Size, - DISPLAY, - AlignItems, - JustifyContent, - TextColor, - BorderColor, - BackgroundColor, -} from '../../../helpers/constants/design-system'; -import { AVATAR_TOKEN_SIZES } from './avatar-token.constants'; - -export const AvatarToken = React.forwardRef( - ( - { - size = Size.MD, - name, - src, - showHalo, - color = TextColor.textDefault, - backgroundColor = BackgroundColor.backgroundAlternative, - borderColor = BorderColor.transparent, - className, - ...props - }, - ref, - ) => { - const [showFallback, setShowFallback] = useState(false); - - useEffect(() => { - setShowFallback(!src); - }, [src]); - - const handleOnError = () => { - setShowFallback(true); - }; - - const fallbackString = name && name[0] ? name[0] : '?'; - - return ( - - {showFallback ? ( - fallbackString - ) : ( - <> - {showHalo && ( - - )} - {`${name} - - )} - - ); - }, -); - -AvatarToken.propTypes = { - /** - * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src - */ - name: PropTypes.string, - /** - * The src accepts the string of the image to be rendered - */ - src: PropTypes.string, - /** - * The showHalo accepts a boolean prop to render the image with halo effect - */ - showHalo: PropTypes.bool, - /** - * The size of the AvatarToken. - * Possible values could be SIZES.XS(16px), SIZES.SM(24px), SIZES.MD(32px), SIZES.LG(40px), SIZES.XL(48px) - * Defaults to SIZES.MD - */ - size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)), - /** - * The background color of the AvatarToken - * Defaults to Color.backgroundAlternative - */ - backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)), - /** - * The background color of the AvatarToken - * Defaults to Color.borderDefault - */ - borderColor: PropTypes.oneOf(Object.values(BorderColor)), - /** - * The color of the text inside the AvatarToken - * Defaults to Color.textDefault - */ - color: PropTypes.oneOf(Object.values(TextColor)), - /** - * Additional classNames to be added to the AvatarToken - */ - className: PropTypes.string, - /** - * AvatarToken also accepts all Box props including but not limited to - * className, as(change root element of HTML element) and margin props - */ - ...Box.propTypes, -}; - -AvatarToken.displayName = 'AvatarToken'; diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.js b/ui/components/component-library/avatar-token/avatar-token.stories.tsx similarity index 77% rename from ui/components/component-library/avatar-token/avatar-token.stories.js rename to ui/components/component-library/avatar-token/avatar-token.stories.tsx index 4262f30d1d74..2b7f55400a75 100644 --- a/ui/components/component-library/avatar-token/avatar-token.stories.js +++ b/ui/components/component-library/avatar-token/avatar-token.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; import { - Size, DISPLAY, AlignItems, TextColor, @@ -18,14 +18,13 @@ import { Text, } from '..'; +import { AvatarBaseSize } from '../avatar-base/avatar-base.types'; import README from './README.mdx'; import { AvatarToken } from './avatar-token'; -import { AVATAR_TOKEN_SIZES } from './avatar-token.constants'; export default { title: 'Components/ComponentLibrary/AvatarToken', - component: AvatarToken, parameters: { docs: { @@ -35,7 +34,7 @@ export default { argTypes: { size: { control: 'select', - options: Object.values(AVATAR_TOKEN_SIZES), + options: Object.values(AvatarBaseSize), }, color: { options: Object.values(TextColor), @@ -62,19 +61,19 @@ export default { args: { name: 'eth', src: './images/eth_logo.png', - size: Size.MD, + size: AvatarBaseSize.Md, showHalo: false, }, -}; +} as ComponentMeta; -const Template = (args) => { +const Template: ComponentStory = (args) => { return ; }; export const DefaultStory = Template.bind({}); DefaultStory.storyName = 'Default'; -export const SizeStory = (args) => ( +export const SizeStory: ComponentStory = (args) => ( <> ( gap={2} marginBottom={4} > - - - - - + + + + + ( gap={2} marginBottom={4} > - - - - - + + + + + Sizes with{' '} @@ -128,65 +127,65 @@ export const SizeStory = (args) => ( } > - + } > - + } > - + } > - + } > - + @@ -194,7 +193,7 @@ export const SizeStory = (args) => ( badge={ @@ -204,7 +203,7 @@ export const SizeStory = (args) => ( {...args} src="" name="ETH" - size={Size.XS} + size={AvatarBaseSize.Xs} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -213,7 +212,7 @@ export const SizeStory = (args) => ( badge={ @@ -223,7 +222,7 @@ export const SizeStory = (args) => ( {...args} name="ETH" src="" - size={Size.SM} + size={AvatarBaseSize.Sm} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -232,7 +231,7 @@ export const SizeStory = (args) => ( badge={ @@ -242,7 +241,7 @@ export const SizeStory = (args) => ( {...args} name="ETH" src="" - size={Size.MD} + size={AvatarBaseSize.Md} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -251,7 +250,7 @@ export const SizeStory = (args) => ( badge={ @@ -261,7 +260,7 @@ export const SizeStory = (args) => ( {...args} name="ETH" src="" - size={Size.LG} + size={AvatarBaseSize.Lg} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -270,7 +269,7 @@ export const SizeStory = (args) => ( badge={ @@ -280,7 +279,7 @@ export const SizeStory = (args) => ( {...args} name="ETH" src="" - size={Size.XL} + size={AvatarBaseSize.Xl} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -295,7 +294,7 @@ Name.args = { src: '', }; -export const Src = (args) => ( +export const Src: ComponentStory = (args) => ( @@ -324,7 +323,9 @@ ShowHalo.args = { showHalo: true, }; -export const ColorBackgroundColorAndBorderColor = (args) => ( +export const ColorBackgroundColorAndBorderColor: ComponentStory< + typeof AvatarToken +> = (args) => ( { ); }); it('should forward a ref to the root html element', () => { - const ref = React.createRef(); + const ref = React.createRef(); render(); expect(ref.current).not.toBeNull(); - expect(ref.current.nodeName).toBe('DIV'); + if (ref.current) { + expect(ref.current.nodeName).toBe('DIV'); + } }); }); diff --git a/ui/components/component-library/avatar-token/avatar-token.tsx b/ui/components/component-library/avatar-token/avatar-token.tsx new file mode 100644 index 000000000000..91991efc7355 --- /dev/null +++ b/ui/components/component-library/avatar-token/avatar-token.tsx @@ -0,0 +1,85 @@ +import React, { useState, useEffect, Ref } from 'react'; +import classnames from 'classnames'; +import { AvatarBase, AvatarBaseSize } from '../avatar-base'; +import { + DISPLAY, + AlignItems, + JustifyContent, + TextColor, + BorderColor, + BackgroundColor, +} from '../../../helpers/constants/design-system'; +import { AvatarTokenProps } from './avatar-token.types'; + +export const AvatarToken = React.forwardRef( + ( + { + size = AvatarBaseSize.Md, + name, + src, + showHalo, + color = TextColor.textDefault, + backgroundColor = BackgroundColor.backgroundAlternative, + borderColor = BorderColor.transparent, + className = '', + ...props + }: AvatarTokenProps, + ref: Ref, + ) => { + const [showFallback, setShowFallback] = useState(false); + + useEffect(() => { + setShowFallback(!src); + }, [src]); + + const handleOnError = () => { + setShowFallback(true); + }; + + const fallbackString = name?.[0] ?? '?'; + + return ( + + {showFallback ? ( + fallbackString + ) : ( + <> + {showHalo && ( + + )} + {`${name} + + )} + + ); + }, +); + +AvatarToken.displayName = 'AvatarToken'; diff --git a/ui/components/component-library/avatar-token/avatar-token.types.ts b/ui/components/component-library/avatar-token/avatar-token.types.ts new file mode 100644 index 000000000000..1a57797b00bb --- /dev/null +++ b/ui/components/component-library/avatar-token/avatar-token.types.ts @@ -0,0 +1,55 @@ +import { AvatarBaseSize } from '../avatar-base'; +import { ValidTag } from '../text'; +import type { BoxProps } from '../../ui/box/box.d'; +import { + BackgroundColor, + BorderColor, + TextColor, +} from 'ui/helpers/constants/design-system'; + +/** + * Props for the AvatarToken component + */ +export interface AvatarTokenProps extends BoxProps { + /** + * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src + */ + name?: string; + /** + * The src accepts the string of the image to be rendered + */ + src?: string; + /** + * The showHalo accepts a boolean prop to render the image with halo effect + */ + showHalo?: boolean; + /** + * The size of the AvatarToken. + * Possible values could be 'AvatarBaseSize.Xs' 16px, 'AvatarBaseSize.Sm' 24px, 'AvatarBaseSize.Md' 32px, 'AvatarBaseSize.Lg' 40px, 'AvatarBaseSize.Xl' 48px + * Defaults to AvatarBaseSize.Md + */ + size?: AvatarBaseSize; + /** + * The background color of the AvatarToken + * Defaults to Color.backgroundAlternative + */ + backgroundColor?: BackgroundColor; + /** + * The background color of the AvatarToken + * Defaults to Color.borderDefault + */ + borderColor?: BorderColor; + /** + * The color of the text inside the AvatarToken + * Defaults to Color.textDefault + */ + color?: TextColor; + /** + * Additional classNames to be added to the AvatarToken + */ + className?: string; + /** + * Changes the root html element tag of the Text component. + */ + as?: ValidTag; +} diff --git a/ui/components/component-library/avatar-token/index.js b/ui/components/component-library/avatar-token/index.js deleted file mode 100644 index 17c1e649a251..000000000000 --- a/ui/components/component-library/avatar-token/index.js +++ /dev/null @@ -1 +0,0 @@ -export { AvatarToken } from './avatar-token'; diff --git a/ui/components/component-library/avatar-token/index.ts b/ui/components/component-library/avatar-token/index.ts new file mode 100644 index 000000000000..34512e959536 --- /dev/null +++ b/ui/components/component-library/avatar-token/index.ts @@ -0,0 +1,2 @@ +export { AvatarToken } from './avatar-token'; +export type { AvatarTokenProps } from './avatar-token.types'; diff --git a/ui/components/ui/box/box.d.ts b/ui/components/ui/box/box.d.ts index 3baeba841179..6ef82f1c8949 100644 --- a/ui/components/ui/box/box.d.ts +++ b/ui/components/ui/box/box.d.ts @@ -19,7 +19,7 @@ import { export type BoxChildren = React.ReactNode | ((...args: any[]) => any); export type BoxFlexDirection = - | (typeof FLEX_DIRECTION)[keyof typeof FLEX_DIRECTION] + | typeof FLEX_DIRECTION[keyof typeof FLEX_DIRECTION] | null; export type BoxFlexDirectionArray = [ BoxFlexDirection, @@ -28,7 +28,7 @@ export type BoxFlexDirectionArray = [ BoxFlexDirection?, ]; -export type BoxFlexWrap = (typeof FLEX_WRAP)[keyof typeof FLEX_WRAP] | null; +export type BoxFlexWrap = typeof FLEX_WRAP[keyof typeof FLEX_WRAP] | null; export type BoxFlexWrapArray = [ BoxFlexWrap, BoxFlexWrap?, @@ -36,7 +36,7 @@ export type BoxFlexWrapArray = [ BoxFlexWrap?, ]; -export type BoxTextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN] | null; +export type BoxTextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN] | null; export type BoxTextAlignArray = [ BoxTextAlign, BoxTextAlign?, @@ -44,7 +44,7 @@ export type BoxTextAlignArray = [ BoxTextAlign?, ]; -export type BoxDisplay = (typeof DISPLAY)[keyof typeof DISPLAY] | null; +export type BoxDisplay = typeof DISPLAY[keyof typeof DISPLAY] | null; export type BoxDisplayArray = [ BoxDisplay, BoxDisplay?, @@ -52,10 +52,10 @@ export type BoxDisplayArray = [ BoxDisplay?, ]; -export type BoxWidth = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null; +export type BoxWidth = typeof BLOCK_SIZES[keyof typeof BLOCK_SIZES] | null; export type BoxWidthArray = [BoxWidth, BoxWidth?, BoxWidth?, BoxWidth?]; -export type BoxHeight = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null; +export type BoxHeight = typeof BLOCK_SIZES[keyof typeof BLOCK_SIZES] | null; export type BoxHeightArray = [BoxHeight, BoxHeight?, BoxHeight?, BoxHeight?]; export type SizeNumber = @@ -290,7 +290,7 @@ export interface BoxProps extends React.HTMLAttributes { * Use TEXT_ALIGN const from '../../../helpers/constants/design-system'; * Accepts responsive props in the form of an array. */ - textAlign?: BoxTextAlign | BoxTextAlignArray; + textAlign?: BoxTextAlign | BoxTextAlignArray | TextAlign; /** * The display of the Box component. * Use DISPLAY const from '../../../helpers/constants/design-system';