From 1d9346830c9847d8a3cb9b2d63e8a7dc078d4fb1 Mon Sep 17 00:00:00 2001
From: v1rtl <hi@v1rtl.site>
Date: Mon, 2 Dec 2024 15:13:31 +0200
Subject: [PATCH] decrease usage of clsx and add a test case for Avatar

---
 .../components/atoms/Avatar/Avatar.test.tsx   | 14 +++++++-
 .../components/atoms/ScrollBox/ScrollBox.tsx  |  5 ++-
 .../molecules/FieldSet/FieldSet.tsx           | 19 +++++-----
 .../components/molecules/Helper/Helper.tsx    |  6 ++--
 .../components/molecules/Tooltip/Tooltip.tsx  |  2 +-
 .../components/organisms/Dialog/Dialog.tsx    | 35 ++++++++++---------
 6 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/components/src/components/atoms/Avatar/Avatar.test.tsx b/components/src/components/atoms/Avatar/Avatar.test.tsx
index 2d380b57..77192980 100644
--- a/components/src/components/atoms/Avatar/Avatar.test.tsx
+++ b/components/src/components/atoms/Avatar/Avatar.test.tsx
@@ -14,6 +14,18 @@ describe('<Avatar />', () => {
         src="https://images.mirror-media.xyz/publication-images/H-zIoEYWk4SpFkljJiwB9.png"
       />,
     )
-    await waitFor(() => expect(screen.getByRole('img')).toBeInTheDocument())
+    await waitFor(() => {
+      expect(screen.getByRole('img')).toBeInTheDocument()
+
+      expect(screen.getByRole('img')).toHaveAttribute('src', 'https://images.mirror-media.xyz/publication-images/H-zIoEYWk4SpFkljJiwB9.png')
+    })
+  })
+  it('should render placeholder if no src is provided', async () => {
+    render(
+      <Avatar label="Avatar" />,
+    )
+    await waitFor(() => {
+      expect(screen.getByAltText('Avatar')).toBeInTheDocument()
+    })
   })
 })
diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.tsx
index 27a5ac81..edfb4c4f 100644
--- a/components/src/components/atoms/ScrollBox/ScrollBox.tsx
+++ b/components/src/components/atoms/ScrollBox/ScrollBox.tsx
@@ -8,10 +8,9 @@ import type { Space } from '@/src/tokens'
 import * as styles from './styles.css'
 import type { BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'
-import clsx from 'clsx'
 
-const ScrollBoxBox = React.forwardRef<HTMLElement, BoxProps>((props, ref) => (
-  <Box className={clsx(styles.scrollBox, props.className)} ref={ref} {...props} />
+const ScrollBoxBox = React.forwardRef<HTMLElement, Pick<BoxProps, 'style' | 'children'>>((props, ref) => (
+  <Box className={styles.scrollBox} ref={ref} {...props} />
 ))
 
 const DividerBox = ({
diff --git a/components/src/components/molecules/FieldSet/FieldSet.tsx b/components/src/components/molecules/FieldSet/FieldSet.tsx
index bc0d41cc..3377efcf 100644
--- a/components/src/components/molecules/FieldSet/FieldSet.tsx
+++ b/components/src/components/molecules/FieldSet/FieldSet.tsx
@@ -17,26 +17,27 @@ const Container = (props: BoxProps) => (
   />
 )
 
-const ContainerInner = (props: BoxProps) => (
-  <Box {...props} display="flex" flexDirection="column" gap="1" px="4" />
+const ContainerInner = ({ children }: React.PropsWithChildren) => (
+  <Box display="flex" flexDirection="column" gap="1" px="4">{children}</Box>
 )
 
-const Row = (props: BoxProps) => (
+const Row = ({ children }: React.PropsWithChildren) => (
   <Box
-    {...props}
     alignItems="center"
     display="flex"
     flexDirection="row"
     gap="3"
-  />
+  >
+    {children}
+  </Box>
 )
 
-const Description = (props: BoxProps) => (
-  <Box {...props} color="textSecondary" fontSize="body" lineHeight="body" />
+const Description = ({ children }: React.PropsWithChildren) => (
+  <Box color="textSecondary" fontSize="body" lineHeight="body">{children}</Box>
 )
 
-const ChildrenContainer = (props: BoxProps) => (
-  <Box {...props} display="flex" flexDirection="column" gap="4" />
+const ChildrenContainer = ({ children }: React.PropsWithChildren) => (
+  <Box display="flex" flexDirection="column" gap="4">{children}</Box>
 )
 
 type NativeFieldSetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement>
diff --git a/components/src/components/molecules/Helper/Helper.tsx b/components/src/components/molecules/Helper/Helper.tsx
index 48627570..0f3bc316 100644
--- a/components/src/components/molecules/Helper/Helper.tsx
+++ b/components/src/components/molecules/Helper/Helper.tsx
@@ -4,7 +4,7 @@ import { AlertSVG, InfoCircleSVG } from '@/src/icons'
 
 import type { Alert } from '@/src/types'
 
-import type { BoxProps } from '../../atoms/Box/Box'
+import type { AsProp, BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
 
 import * as styles from './styles.css'
@@ -42,8 +42,8 @@ const Container = ({
   />
 )
 
-const IconElement = ({ $alert, className, ...props }: BoxProps & { $alert: Alert }) => (
-  <Box {...props} className={clsx(styles.variants({ svgAlert: $alert }), className)} wh="6" />
+const IconElement = ({ $alert, as }: { $alert: Alert, as: AsProp }) => (
+  <Box as={as} className={clsx(styles.variants({ svgAlert: $alert }))} wh="6" />
 )
 
 export const Helper: React.FC<HelperProps> = ({
diff --git a/components/src/components/molecules/Tooltip/Tooltip.tsx b/components/src/components/molecules/Tooltip/Tooltip.tsx
index 80fb3599..240e015a 100644
--- a/components/src/components/molecules/Tooltip/Tooltip.tsx
+++ b/components/src/components/molecules/Tooltip/Tooltip.tsx
@@ -13,7 +13,7 @@ import type { BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
 import { getValueForPlacement } from './utils/getValueForPlacement'
 import * as styles from './styles.css'
-import clsx from 'clsx'
+import { clsx } from 'clsx'
 import type { Color } from '@/src/tokens/color'
 
 type TooltipPopoverElementProps = {
diff --git a/components/src/components/organisms/Dialog/Dialog.tsx b/components/src/components/organisms/Dialog/Dialog.tsx
index a996e3a7..55dee77b 100644
--- a/components/src/components/organisms/Dialog/Dialog.tsx
+++ b/components/src/components/organisms/Dialog/Dialog.tsx
@@ -12,13 +12,13 @@ import type { BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
 import { Typography } from '../../atoms'
 import { Modal } from '../../molecules'
-import clsx from 'clsx'
+import { clsx } from 'clsx'
 import * as styles from './styles.css'
 
-const CloseButton = ({ className, ...props }: BoxProps) => (
+const CloseButton = ({ onClick }: Pick<BoxProps, 'onClick'>) => (
   <Box
-    {...props}
-    className={clsx(styles.closeButton, className)}
+    onClick={onClick}
+    className={styles.closeButton}
     alignItems="center"
     as="button"
     backgroundColor={{ base: 'transparent', hover: 'greySurface' }}
@@ -39,10 +39,9 @@ const CloseButton = ({ className, ...props }: BoxProps) => (
   </Box>
 )
 
-const StyledCard = ({ className, ...props }: BoxProps) => (
+const StyledCard = ({ children }: React.PropsWithChildren) => (
   <Box
-    {...props}
-    className={clsx(styles.styledCard, className)}
+    className={styles.styledCard}
     alignItems="center"
     backgroundColor="backgroundPrimary"
     borderBottomLeftRadius={{ xs: '0', sm: '3xLarge' }}
@@ -57,7 +56,9 @@ const StyledCard = ({ className, ...props }: BoxProps) => (
     padding={{ xs: '4', sm: '6' }}
     position="relative"
     width="full"
-  />
+  >
+    {children}
+  </Box>
 )
 
 type NonNullableAlert = NonNullable<WithAlert['alert']>
@@ -107,34 +108,36 @@ const FooterContainer = (props: BoxProps) => (
   />
 )
 
-const TitleContainer = (props: BoxProps) => (
+const TitleContainer = ({ children }: React.PropsWithChildren) => (
   <Box
-    {...props}
     alignItems="center"
     display="flex"
     flexDirection="column"
     gap="px"
     justifyContent="center"
-  />
+  >
+    {children}
+  </Box>
 )
 
-const StepContainer = (props: BoxProps) => (
+const StepContainer = ({ children }: React.PropsWithChildren) => (
   <Box
-    {...props}
     alignItems="center"
     display="flex"
     flexDirection="row"
     gap="2"
     justifyContent="center"
-  />
+  >
+    {children}
+  </Box>
 )
 
 export type StepType = 'notStarted' | 'inProgress' | 'completed'
 
-const StepItem = ({ $type, className, ...props }: BoxProps & { $type: StepType }) => (
+const StepItem = ({ $type, ...props }: React.PropsWithChildren<{ $type: StepType }>) => (
   <Box
     {...props}
-    className={clsx(styles.variants({ stepType: $type }), className)}
+    className={styles.variants({ stepType: $type })}
     borderRadius="full"
     borderStyle="solid"
     wh="3.5"