Review some and clean up in the interfaces (#133) (#134)

* moved avatar interface to global

* removed unused import

* moved IDefaultAvatar to global, and renamed from DefaultAvatarProps

* Typoghraphy constants: Update avatar component typography constants

* Add typography constants

* Add typography constants

---------

Co-authored-by: triple iii <[email protected]>

src/component/avatar/avatar-default.tsx

@@ -1,7 +1,7 @@
 import { FC, forwardRef } from 'react'
 import { useTheme } from '@mui/material/styles'
 import { Badge, Avatar, Typography } from '@mui/material'
-import { KEY, SizeType } from 'constant'
+import { KEY, TYPOGRAPHY, FONTWEIGHT } from 'constant'
 
 const getCharAtName = (name: string) => name && name.charAt(0).toUpperCase()
 const getCharAtSecondName = (name: string) => name && name.split(' ')[1]?.charAt(0).toUpperCase()
@@ -15,18 +15,10 @@ const getColorByName = (name: string) => {
   return KEY.DEFAULT
 }
 
-interface DefaultAvatarProps {
-  color?: COLOR
-  firstName?: string
-  lastName?: string
-  extension?: string
-  isLarge?: boolean
-  children?: React.ReactNode
-  BadgeProps?: object
-  sx?: object
-}
+const { H4, OVERLINE } = TYPOGRAPHY
+const { BOLD, NORMAL } = FONTWEIGHT
 
-const DefaultAvatar: FC<DefaultAvatarProps> = forwardRef<HTMLDivElement, DefaultAvatarProps>(
+const DefaultAvatar: FC<IDefaultAvatar> = forwardRef<HTMLDivElement, IDefaultAvatar>(
   ({ color, firstName = '', lastName = '', BadgeProps, children, extension, isLarge, sx, ...other }, ref) => {
     const theme = useTheme()
     const charAtName = lastName ? getCharAtName(firstName) + getCharAtName(lastName) : getCharAtName(firstName)
@@ -61,10 +53,10 @@ const DefaultAvatar: FC<DefaultAvatarProps> = forwardRef<HTMLDivElement, Default
           }}
           {...other}>
           <Typography
-            variant={isLarge ? 'h4' : 'overline'}
+            variant={isLarge ? H4 : OVERLINE}
             color={theme.palette[colr].contrastText}
             sx={{
-              fontWeight: isLarge ? 'bold' : 'normal'
+              fontWeight: isLarge ? BOLD : NORMAL
             }}>
             {firstName && charAtName}
           </Typography>

src/component/avatar/avatar.tsx

@@ -2,7 +2,6 @@ import { FC, forwardRef } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { Box, Link } from '@mui/material'
 import { GLOBAL } from 'config'
-import DefaultAvatar from './avatar-default'
 
 interface AvatarProps {
   disabledLink?: boolean

src/constant/index.ts

@@ -12,5 +12,6 @@ export { default as MENU_POPOVER_ARROW } from './menu-popover-arrow'
 export { default as TITLE } from './title'
 export { default as ARIA } from './aria'
 export { BUTTON } from './button'
+export * from './typography'
 export * from './size'
 export * from './color'

src/constant/typography.ts

@@ -0,0 +1,27 @@
+export enum TYPOGRAPHY {
+  H0 = 'h0',
+  H1 = 'h1',
+  H2 = 'h2',
+  H3 = 'h3',
+  H4 = 'h4',
+  H5 = 'h5',
+  H6 = 'h6',
+  H7 = 'h7',
+  BODY1 = 'body1',
+  BODY2 = 'body2',
+  SUBTITLE1 = 'subtitle1',
+  SUBTITLE2 = 'subtitle2',
+  OVERLINE = 'overline',
+  CAPTION = 'caption',
+  BUTTON = 'button',
+  PARAGRAPH = 'paragraph'
+}
+
+export enum FONTWEIGHT {
+  NORMAL = 'normal',
+  LIGHT = 'light',
+  REGULAR = 'regular',
+  MEDIUM = 'medium',
+  BOLD = 'bold',
+  BLACK = 'black'
+}

src/types/global.d.ts

@@ -90,6 +90,18 @@ declare global {
     xl?: number
   }
 
+  interface IDefaultAvatar {
+    color?: COLOR
+    firstName?: string
+    lastName?: string
+    extension?: string
+    isLarge?: boolean
+    children?: React.ReactNode
+    BadgeProps?: object
+    sx?: object
+  }
+
+
   interface EndpointBuilder {
     /**
      *