refactor: primitive tests and stories

frontend/src/components/Board/Timer/index.tsx

@@ -46,7 +46,7 @@ const Timer: React.FC<TimerProps> = ({ boardId, isAdmin, emitEvent, listenEvent
       type="button"
       variant="transparentHover"
       onClick={onClick}
-      size="xs"
+      size="xxs"
     >
       <TimeButtonTitle>{action}</TimeButtonTitle>
     </Button>
@@ -66,8 +66,14 @@ const Timer: React.FC<TimerProps> = ({ boardId, isAdmin, emitEvent, listenEvent
     buildTimePanel(seconds, incrementDurationSeconds, decrementDurationSeconds);
 
   const buildControlButton = (action: string, onClick: any) => (
-    <Button onClick={onClick} size="xs" variant="transparent" disabled={!isAdmin}>
-      <Icon name={`timer-${action}`} size={28} />
+    <Button
+      onClick={onClick}
+      size="xs"
+      variant="transparent"
+      css={{ px: '$1', py: '$1' }}
+      disabled={!isAdmin}
+    >
+      <Icon name={`timer-${action}`} css={{ height: '$28 !important', width: '$28 !important' }} />
     </Button>
   );
   const buildStartButton = () => buildControlButton('start', startTimer);

frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.spec.tsx

@@ -1,17 +1,18 @@
-import { renderWithProviders } from '@/utils/testing/renderWithProviders';
 import AlertBox, { AlertBoxProps } from '@/components/Primitives/Alerts/AlertBox/AlertBox';
-import Button from '../../Inputs/Button/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import { renderWithProviders } from '@/utils/testing/renderWithProviders';
 
-const render = (props: AlertBoxProps, children?: React.ReactNode) =>
-  renderWithProviders(<AlertBox {...props}>{children}</AlertBox>);
+const render = ({ children, ...props }: Partial<AlertBoxProps> = {}) =>
+  renderWithProviders(
+    <AlertBox type="info" title="Title" text="Text" {...props}>
+      {children}
+    </AlertBox>,
+  );
 
 describe('Components/Primitives/Alerts/AlertBox', () => {
   it('should render correctly', () => {
-    // Arrange
-    const alertBoxProps: AlertBoxProps = { type: 'info' };
-
     // Act
-    const { getByTestId } = render(alertBoxProps);
+    const { getByTestId } = render();
 
     // Assert
     expect(getByTestId('alertBox')).toBeInTheDocument();
@@ -42,11 +43,10 @@ describe('Components/Primitives/Alerts/AlertBox', () => {
 
   it('should render children', () => {
     // Arrange
-    const alertBoxProps: AlertBoxProps = { type: 'error', title: 'Title', text: 'This is Text' };
     const alertBoxChild = <Button>Button</Button>;
 
     // Act
-    const { getByTestId, getByText } = render(alertBoxProps, alertBoxChild);
+    const { getByTestId, getByText } = render({ children: alertBoxChild });
 
     // Assert
     expect(getByTestId('alertBox')).toBeInTheDocument();

frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
-
 import dedent from 'ts-dedent';
 
 import AlertBox from '@/components/Primitives/Alerts/AlertBox/AlertBox';
@@ -17,9 +16,7 @@ export default {
         An alert box that is displayed on the screen to inform or warn the user of something.
 
         **File Path:**
-        \`@/components/Primitives/Alerts/AlertBox/AlertBox.tsx\`
-        ${JSON.stringify(import.meta)}
-        `,
+        \`@/components/Primitives/Alerts/AlertBox/AlertBox.tsx\``,
       },
     },
   },
@@ -50,12 +47,12 @@ export default {
   },
 };
 
-const Template: ComponentStory<typeof AlertBox> = ({ ...args }) => <AlertBox {...args} />;
+const Template: ComponentStory<typeof AlertBox> = (args) => <AlertBox {...args} />;
 
 export const Default = Template.bind({});
 Default.storyName = 'Basic Usage';
 
-export const WithButton: ComponentStory<typeof AlertBox> = ({ ...args }) => (
+export const WithButton: ComponentStory<typeof AlertBox> = (args) => (
   <AlertBox {...args}>
     <Button size="sm">Lorem Ipsum</Button>
   </AlertBox>

frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.tsx

@@ -12,30 +12,34 @@ const AlertStyle = styled(Flex, Box, {
   borderRadius: '$12',
   variants: {
     type: {
+      success: {
+        backgroundColor: '$successLightest',
+        borderColor: '$colors$successBase',
+      },
       warning: {
         backgroundColor: '$warningLightest',
-        border: '1px solid $colors$warningBase',
+        borderColor: '$colors$warningBase',
       },
       error: {
         backgroundColor: '$dangerLightest',
-        border: '1px solid $colors$highlight4Base',
+        borderColor: '$colors$dangerBase',
       },
       info: {
         backgroundColor: '$infoLightest',
-        border: '1px solid $colors$infoBase',
+        borderColor: '$colors$infoBase',
       },
     },
   },
 });
 
 export type AlertBoxProps = CSSProps & {
-  type: 'warning' | 'info' | 'error';
+  type: 'success' | 'warning' | 'info' | 'error';
   children?: React.ReactNode;
   title?: string;
   text?: string;
 };
 
-const AlertBox = ({ type, title = undefined, text = undefined, children, css }: AlertBoxProps) => (
+const AlertBox = ({ type, title, text, children, css }: AlertBoxProps) => (
   <AlertStyle
     align="center"
     justify="between"

frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.spec.tsx

@@ -8,10 +8,10 @@ import {
   AlertDialogProps,
   AlertDialogTrigger,
 } from '@/components/Primitives/Alerts/AlertDialog/AlertDialog';
-import Button from '../../Inputs/Button/Button';
-import Flex from '../../Layout/Flex/Flex';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
 
-const render = ({ children, ...props }: AlertDialogProps) =>
+const render = ({ children, ...props }: Partial<AlertDialogProps> = {}) =>
   renderWithProviders(
     <AlertDialog>
       {/* Button to Open the Dialog */}
@@ -20,7 +20,12 @@ const render = ({ children, ...props }: AlertDialogProps) =>
       </AlertDialogTrigger>
 
       {/* Actual Dialog */}
-      <AlertDialogContent {...props} data-testid="alertDialog">
+      <AlertDialogContent
+        title="Title"
+        handleClose={jest.fn()}
+        {...props}
+        data-testid="alertDialog"
+      >
         {children}
         <Flex justify="end" gap="16">
           <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
@@ -33,15 +38,15 @@ const render = ({ children, ...props }: AlertDialogProps) =>
 describe('Components/Primitives/Alerts/AlertDialog', () => {
   it('should render the trigger correctly', () => {
     // Act
-    const { getByTestId } = render({});
+    const { getByTestId } = render();
 
     // Assert
     expect(getByTestId('alertDialogTrigger')).toBeInTheDocument();
   });
 
   it('should open the alert dialog when trigger is clicked', async () => {
     // Act
-    const { getByTestId } = render({});
+    const { getByTestId } = render();
     fireEvent.click(getByTestId('alertDialogTrigger'));
 
     // Assert
@@ -51,38 +56,29 @@ describe('Components/Primitives/Alerts/AlertDialog', () => {
   });
 
   it('should render the title', async () => {
-    // Arrange
-    const alertDialogProps = {
-      title: 'Title',
-    };
-
     // Act
-    const { getByText, getByTestId } = render(alertDialogProps);
+    const { getByText, getByTestId } = render();
     fireEvent.click(getByTestId('alertDialogTrigger'));
 
     // Assert
     await waitFor(() => {
       expect(getByTestId('alertDialog')).toBeInTheDocument();
-      expect(getByText(alertDialogProps.title)).toBeInTheDocument();
+      expect(getByText('Title')).toBeInTheDocument();
     });
   });
 
   it('should close the dialog when the x is clicked', async () => {
     // Arrange
-    const mockCloseFn = jest.fn();
-    const alertDialogProps = {
-      title: 'Title',
-      handleClose: mockCloseFn,
-    };
+    const handleClose = jest.fn();
 
     // Act
-    const { getByTestId } = render(alertDialogProps);
+    const { getByTestId } = render({ handleClose });
     fireEvent.click(getByTestId('alertDialogTrigger'));
     fireEvent.click(getByTestId('alertDialog').querySelector('svg')!);
 
     // Assert
     await waitFor(() => {
-      expect(mockCloseFn).toBeCalled();
+      expect(handleClose).toBeCalled();
     });
   });
 });

frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.stories.tsx

@@ -23,8 +23,7 @@ export default {
         A modal dialog that interrupts the user with important content and expects a response.
 
         **File Path:**
-        \`@/components/Primitives/Alerts/AlertDialog/AlertDialog.tsx\`
-        `,
+        \`@/components/Primitives/Alerts/AlertDialog/AlertDialog.tsx\``,
       },
     },
   },

frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.tsx

@@ -4,11 +4,11 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { CSS, styled } from '@/styles/stitches/stitches.config';
 import { overlayShow } from '@/animations/DialogShow';
 
-import Button from '../../Inputs/Button/Button';
-import Flex from '../../Layout/Flex/Flex';
-import Text from '../../Text/Text';
-import Icon from '../../Icons/Icon/Icon';
-import Separator from '../../Separator/Separator';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Separator from '@/components/Primitives/Separator/Separator';
 
 const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
   backdropFilter: 'blur(3px)',

frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.spec.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import ConfirmationDialog, {
   ConfirmationDialogProps,
 } from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
-import Button from '../../Inputs/Button/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 const render = (props: Partial<ConfirmationDialogProps> = {}) =>
   renderWithProviders(

frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.stories.tsx

@@ -17,8 +17,7 @@ export default {
         A modal dialog that interrupts the user requesting some type of confirmation.
 
         **File Path:**
-        \`@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.tsx\`
-        `,
+        \`@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.tsx\``,
       },
     },
   },

frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.tsx

@@ -5,9 +5,9 @@ import {
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogTrigger,
-} from '../AlertDialog/AlertDialog';
-import Flex from '../../Layout/Flex/Flex';
-import Tooltip from '../../Tooltips/Tooltip/Tooltip';
+} from '@/components/Primitives/Alerts/AlertDialog/AlertDialog';
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 
 export type ConfirmationDialogProps = {
   description: string | React.ReactNode;

frontend/src/components/Primitives/Avatars/Avatar/Avatar.stories.tsx

@@ -13,8 +13,7 @@ export default {
         An image element with a fallback for representing the user.
 
         **File Path:**
-        \`@/components/Primitives/Avatars/Avatar/Avatar.tsx\`
-        `,
+        \`@/components/Primitives/Avatars/Avatar/Avatar.tsx\``,
       },
     },
   },
@@ -58,7 +57,7 @@ export default {
   },
 };
 
-const Template: ComponentStory<typeof Avatar> = ({ children, ...args }) => <Avatar {...args} />;
+const Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />;
 
 export const Default = Template.bind({});
 Default.storyName = 'Basic Usage';

frontend/src/components/Primitives/Avatars/Avatar/Avatar.tsx

@@ -69,15 +69,14 @@ type AvatarType = {
   colors?: AvatarColor;
   src?: string;
   size?: number;
-  isClickable?: boolean;
   id?: string;
   isDefaultColor?: boolean;
   isBoardPage?: boolean;
 };
 
 type AvatarProps = AvatarType & React.ComponentProps<typeof AvatarRoot>;
 
-const Avatar: React.FC<AvatarProps> = ({
+const Avatar = ({
   src,
   size,
   colors = undefined,
@@ -86,7 +85,7 @@ const Avatar: React.FC<AvatarProps> = ({
   id,
   isDefaultColor,
   isBoardPage = false,
-}) => {
+}: AvatarProps) => {
   const avatarColor = useAvatarColor(id, isDefaultColor);
   if (colors === undefined) colors = avatarColor;
   if (fallbackText.includes('undefined')) {