Upgrade to ChakraUI V3

apps/server/src/assigned-group/assigned-group.service.spec.ts

@@ -7,7 +7,7 @@ import { PositionsService } from '../positions/positions.service';
 import { AssignedGroupService } from './assigned-group.service';
 import { ConnectEmployeeDto } from './dto/create-assigned-group.dto';
 
-let assignedGroupPositionSigner = {
+const assignedGroupPositionSigner = {
   id: 'assignedGroup-id',
   formInstanceId: 'form-instance-id',
   signerType: SignerType.POSITION,
@@ -19,7 +19,7 @@ let assignedGroupPositionSigner = {
   updatedAt: new Date(1672531200),
 };
 
-let assignedGroupDepartmentSigner = {
+const assignedGroupDepartmentSigner = {
   id: 'assignedGroup-id',
   formInstanceId: 'form-instance-id',
   signerType: SignerType.DEPARTMENT,
@@ -35,7 +35,7 @@ const db = {
   assignedGroup: {
     findFirstOrThrow: jest.fn().mockResolvedValue(assignedGroupPositionSigner),
     update: jest.fn().mockImplementation((args) => {
-      let val = {
+      const val = {
         ...assignedGroupPositionSigner,
         ...args.data,
       };
@@ -129,7 +129,7 @@ describe('AssignedGroupService', () => {
           signerDepartmentId: undefined,
           signerEmployeeId: undefined,
         };
-        let updatedSignature = await service.updateSigner(
+        const updatedSignature = await service.updateSigner(
           'assignedGroup-id',
           updateSignatureSignerDto,
         );
@@ -151,7 +151,7 @@ describe('AssignedGroupService', () => {
           signerDepartmentId: 'department-id',
           signerEmployeeId: undefined,
         };
-        let updatedSignature = await service.updateSigner(
+        const updatedSignature = await service.updateSigner(
           'assignedGroup-id',
           updateSignatureSignerDto,
         );
@@ -173,7 +173,7 @@ describe('AssignedGroupService', () => {
           signerDepartmentId: undefined,
           signerEmployeeId: 'employee-id',
         };
-        let updatedSignature = await service.updateSigner(
+        const updatedSignature = await service.updateSigner(
           'assignedGroup-id',
           updateSignatureSignerDto,
         );
@@ -199,7 +199,7 @@ describe('AssignedGroupService', () => {
             { id: 'employee-id-2' },
           ],
         };
-        let updatedSignature = await service.updateSigner(
+        const updatedSignature = await service.updateSigner(
           'assignedGroup-id',
           updateSignatureSignerDto,
         );

apps/web/next.config.js → apps/web/next.config.mjs

@@ -6,6 +6,7 @@ const nextConfig = {
       '.js': ['.tsx', '.ts', '.jsx', '.js'],
     },
     turbo: {},
+    optimizePackageImports: ['@chakra-ui/react'],
   },
   reactStrictMode: true,
   env: {
@@ -17,4 +18,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;

apps/web/package.json

@@ -2,6 +2,7 @@
   "name": "web",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
@@ -17,30 +18,28 @@
     "@azure/msal-browser": "3.24.0",
     "@azure/msal-react": "2.1.0",
     "@azure/storage-blob": "12.17.0",
-    "@chakra-ui/icons": "2.1.1",
-    "@chakra-ui/react": "2.5.5",
-    "@emotion/react": "11.10.5",
-    "@emotion/styled": "11.10.5",
+    "@chakra-ui/react": "3.8.0",
+    "@emotion/react": "^11.14.0",
     "@fontsource/hanken-grotesk": "4.5.2",
     "@tanstack/react-query": "5.0.5",
     "@trpc/client": "10.38.0",
     "@trpc/server": "10.38.0",
     "@vercel/blob": "0.26.0",
     "axios": "1.5.0",
-    "chakra-react-select": "4.7.6",
+    "chakra-react-select": "6.0.1",
     "fastest-levenshtein": "1.0.16",
     "form-data": "4.x",
-    "framer-motion": "10.16.5",
+    "framer-motion": "12.4.1",
     "jwt-decode": "4.0.0",
     "next": "15.0.3",
+    "next-themes": "^0.4.4",
     "pdf-lib": "1.17.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-draggable": "4.4.6",
     "react-dropzone": "14.3.5",
-    "react-icons": "5.3.0",
+    "react-icons": "^5.4.0",
     "react-pdf": "7.7.0",
-    "react-query": "3.39.3",
     "react-rnd": "10.4.13",
     "react-router-dom": "6.8.1",
     "react-scripts": "5.0.1",

apps/web/src/client/client.gen.ts

@@ -1,6 +1,6 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-import type { ClientOptions } from './types.gen';
+import type { ClientOptions } from './types.gen.ts';
 import {
   type Config,
   type ClientOptions as DefaultClientOptions,

apps/web/src/components/AssignedAvatarGroup.tsx

@@ -0,0 +1,80 @@
+import { Avatar, Box, Group, Portal, Tooltip } from '@chakra-ui/react';
+import { AssignedGroupEntity } from '@web/client/types.gen';
+import { getNameFromAssignedGroup } from '@web/utils/formInstanceUtils';
+import { HoverableAvatar } from './HoverableAvatar';
+
+export const AssignedAvatarGroup = ({
+  assignedGroups,
+  detailed,
+}: {
+  assignedGroups: AssignedGroupEntity[];
+  detailed?: boolean;
+}) => {
+  const partition = (arr: AssignedGroupEntity[], max: number) => {
+    const items = [];
+    const overflow = [];
+    for (const item of arr.sort((a, b) => a.order - b.order)) {
+      if (items.length < max) items.push(item);
+      else overflow.push(item);
+    }
+    return { items, overflow };
+  };
+
+  const { items: displayedAssignedGroups } = partition(assignedGroups, 5);
+
+  return (
+    <Group gap="0" spaceX="2">
+      {detailed
+        ? displayedAssignedGroups.map((assignedGroup) => (
+            <HoverableAvatar
+              key={assignedGroup.id}
+              name={getNameFromAssignedGroup(assignedGroup)}
+              signed={assignedGroup.signed}
+            />
+          ))
+        : displayedAssignedGroups.map((assignedGroup, i) => (
+            <Tooltip.Root key={i}>
+              <Tooltip.Trigger asChild>
+                <Box>
+                  <Avatar.Root
+                    key={i}
+                    boxSize="32px"
+                    backgroundColor={
+                      assignedGroup.signed ? '#D1F0D4' : '#DCDCDC'
+                    }
+                    outline="1px solid #FFFFFF"
+                    color="black"
+                    fontWeight={400}
+                    fontSize="16px"
+                    size="sm"
+                  >
+                    <Avatar.Fallback
+                      name={
+                        assignedGroup.signerEmployee?.firstName +
+                        ' ' +
+                        assignedGroup.signerEmployee?.lastName
+                      }
+                    />
+                  </Avatar.Root>
+                </Box>
+              </Tooltip.Trigger>
+              <Portal>
+                <Tooltip.Positioner>
+                  <Tooltip.Content
+                    fontSize="16px"
+                    fontWeight="bold"
+                    p="5px"
+                    color="black"
+                    background="white"
+                  >
+                    {assignedGroup.signerEmployee?.firstName +
+                      ' ' +
+                      assignedGroup.signerEmployee?.lastName}
+                  </Tooltip.Content>
+                </Tooltip.Positioner>
+              </Portal>
+            </Tooltip.Root>
+          ))}
+    </Group>
+  );
+};

apps/web/src/components/AvatarMap.tsx → apps/web/src/components/AssigneeMap.tsx

@@ -1,7 +1,8 @@
-import { Avatar, Box, Flex, Text } from '@chakra-ui/react';
-import { AwaitingIcon, CheckIcon } from 'apps/web/src/static/icons';
-import { AvatarMapProps } from './types';
-import { SignerType } from '@web/client';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { AwaitingIcon, CheckIcon } from 'apps/web/src/static/icons.tsx';
+import { AvatarMapProps } from './types.ts';
+import { SignerType } from '@web/client/types.gen.ts';
+import { Avatar } from './ui/avatar.tsx';
 
 /**
  * @param assignees - an array of assignees

apps/web/src/components/AzureSignin.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@chakra-ui/react';
-import { useAuth } from '@web/hooks/useAuth';
+import { useAuth } from '@web/hooks/useAuth.ts';
 
 /**
  * @returns a button that allows users to sign in with Azure

apps/web/src/components/AzureSignout.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useMsal } from '@azure/msal-react';
-import { useAuth } from '@web/hooks/useAuth';
-import { Flex, Text } from '@chakra-ui/react';
-import { SignoutIcon } from '@web/static/icons';
+import { useAuth } from '@web/hooks/useAuth.ts';
+import { Button, Flex, Text } from '@chakra-ui/react';
+import { SignoutIcon } from '@web/static/icons.tsx';
 
 /**
  * @returns a button that allows users to sign out of Azure
@@ -33,8 +33,8 @@ export const AzureSignout: React.FC = () => {
   };
 
   return (
-    <button onClick={handleLogout}>
-      <Flex align="center">
+    <Button background="white" onClick={handleLogout} cursor="pointer">
+      <Flex alignItems="center" justifyContent="start">
         <Text
           color="#4C658A"
           fontSize="18px"
@@ -45,8 +45,8 @@ export const AzureSignout: React.FC = () => {
         >
           Sign out with Azure
         </Text>
-        <SignoutIcon />
+        <SignoutIcon boxSize="24px" />
       </Flex>
-    </button>
+    </Button>
   );
 };

apps/web/src/components/Error.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ErrorIcon } from 'apps/web/src/static/icons';
+import { ErrorIcon } from 'apps/web/src/static/icons.tsx';
 
 /**
  * @returns an error message when the page fails to load the forms

apps/web/src/components/FormCard.tsx

@@ -1,6 +1,7 @@
-import { Box, Text, Avatar, AvatarGroup, Tooltip } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
+import { useRouter } from 'next/router.js';
+import { AssignedAvatarGroup } from './AssignedAvatarGroup';
 import { AssignedGroupEntity } from '@web/client';
-import { useRouter } from 'next/router';
 
 /**
  * @param formName - the name of the form
@@ -41,52 +42,12 @@ export const FormCard = ({
             fontFamily="Hanken Grotesk"
             fontWeight={800}
             fontSize="18px"
-            isTruncated
+            truncate
           >
             {formName}
           </Text>
-          <AvatarGroup size="sm" max={5} marginTop="9px" spacing={'-3px'}>
-            {assignedGroups
-              .sort((a, b) => a.order - b.order)
-              .map((assignedGroup: AssignedGroupEntity, index: number) => {
-                return (
-                  <Tooltip
-                    bg={'white'}
-                    color={'black'}
-                    placement="bottom-start"
-                    label={
-                      <>
-                        <Text fontSize="16px" fontWeight="bold">
-                          {assignedGroup.signerEmployee?.firstName +
-                            ' ' +
-                            assignedGroup.signerEmployee?.lastName}
-                        </Text>
-                      </>
-                    }
-                    key={index}
-                  >
-                    <Avatar
-                      name={
-                        assignedGroup.signerEmployee?.firstName +
-                        ' ' +
-                        assignedGroup.signerEmployee?.lastName
-                      }
-                      key={index}
-                      boxSize="32px"
-                      backgroundColor={
-                        assignedGroup.signed ? '#D1F0D4' : '#DCDCDC'
-                      }
-                      outline="1px solid #FFFFFF"
-                      color="black"
-                      fontWeight={400}
-                      fontSize="16px"
-                      size="sm"
-                      marginRight={'-3.5px'}
-                    />
-                  </Tooltip>
-                );
-              })}
-          </AvatarGroup>
+
+          <AssignedAvatarGroup assignedGroups={assignedGroups} />
         </Box>
       </Box>
     </>

apps/web/src/components/FormImageCard.tsx

@@ -1,7 +1,7 @@
 import { Box, Text, Flex } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import { PDFDocument } from './PDFDocument';
-import { FormInstanceEntity } from '@web/client/types.gen';
+import { useRouter } from 'next/router.js';
+import { PDFDocument } from './PDFDocument.tsx';
+import { FormInstanceEntity } from '@web/client/types.gen.ts';
 
 /**
  * @param formName - the name of the form
@@ -64,7 +64,7 @@ export const FormImageCard = ({
           fontFamily="Hanken Grotesk"
           fontWeight={500}
           fontSize="15px"
-          isTruncated
+          truncate
           height="21px"
         >
           {formInstance.name}
@@ -77,7 +77,7 @@ export const FormImageCard = ({
             fontFamily="Hanken Grotesk"
             fontWeight={700}
             fontSize="12px"
-            isTruncated
+            truncate
             borderRadius="20px"
             padding="3px 12px"
           >
@@ -90,9 +90,9 @@ export const FormImageCard = ({
             fontFamily="Hanken Grotesk"
             fontWeight={500}
             fontSize="13px"
-            isTruncated
+            truncate
           >
-            Assigned {daysAgo(new Date(formInstance.createdAt), new Date())}
+            Assigned {daysAgo(new Date(), new Date(formInstance.createdAt))}
           </Text>
         </Flex>
       </Flex>