fix: removed unused packages and upgraded to next 14 (#2944)

* fix: upgrading next package and removed unused deps

* chore: unused variable removed

* chore: next image icon fix

* chore: unused component removed

* chore: next image icon fix

* chore: replace use-debounce with lodash debounce

* chore: unused component removed

* resolved: fixed issue with next link component

* fix: updates in next config

* fix: updating types pages

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>

web/components/project/card-list.tsx

@@ -4,12 +4,10 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProjectCard } from "components/project";
-import { EmptyState } from "components/project/empty-state";
 import { Loader } from "@plane/ui";
 // images
 import emptyProject from "public/empty-state/empty_project.webp";
 // icons
-import { Plus } from "lucide-react";
 import { NewEmptyState } from "components/common/new-empty-state";
 
 export interface IProjectCardList {

web/components/project/empty-state.tsx

@@ -28,7 +28,7 @@ export const EmptyState: React.FC<Props> = ({
 }) => (
   <div className="flex items-center lg:p-20 md:px-10 px-5 justify-center h-full w-full">
     <div className="relative h-full w-full max-w-6xl">
-      <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} layout="fill" />
+      <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text ?? ""} layout="fill" />
     </div>
     <div className="absolute pt-[30vh] md:pt-[35vh] lg:pt-[45vh] text-center flex flex-col items-center w-full">
       <h6 className="text-xl font-semibold mt-6">{title}</h6>

web/components/project/member-list-item.tsx

@@ -76,27 +76,27 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
         <div className="flex items-center gap-x-4 gap-y-2">
           {memberDetails.avatar && memberDetails.avatar !== "" ? (
             <Link href={`/${workspaceSlug}/profile/${memberDetails.id}`}>
-              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
+              <span className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
                 <img
                   src={memberDetails.avatar}
                   alt={memberDetails.display_name || memberDetails.email}
                   className="absolute top-0 left-0 h-full w-full object-cover rounded"
                 />
-              </a>
+              </span>
             </Link>
           ) : (
             <Link href={`/${workspaceSlug}/profile/${memberDetails.id}`}>
-              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize bg-gray-700 text-white">
+              <span className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize bg-gray-700 text-white">
                 {(memberDetails.display_name ?? memberDetails.email ?? "?")[0]}
-              </a>
+              </span>
             </Link>
           )}
 
           <div>
             <Link href={`/${workspaceSlug}/profile/${memberDetails.id}`}>
-              <a className="text-sm font-medium">
+              <span className="text-sm font-medium">
                 {memberDetails.first_name} {memberDetails.last_name}
-              </a>
+              </span>
             </Link>
             <div className="flex items-center">
               <p className="text-xs text-custom-text-300">{memberDetails.display_name}</p>

web/components/project/send-project-invitation-modal.tsx

@@ -12,8 +12,6 @@ import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
 import { ProjectMemberService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
-// helpers
-import { trackEvent } from "helpers/event-tracker.helper";
 // types
 import { IProjectMember, TUserProjectRole } from "types";
 // constants
@@ -58,7 +56,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
   const {
     user: { currentProjectRole },
     workspaceMember: { workspaceMembers },
-    trackEvent: { postHogEventTracker }
+    trackEvent: { postHogEventTracker },
   } = useMobxStore();
 
   const {
@@ -94,22 +92,16 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
           type: "success",
           message: "Member added successfully",
         });
-        postHogEventTracker(
-          'PROJECT_MEMBER_INVITE',
-          {
-            ...res,
-            state: "SUCCESS"
-          }
-        );
+        postHogEventTracker("PROJECT_MEMBER_INVITE", {
+          ...res,
+          state: "SUCCESS",
+        });
       })
       .catch((error) => {
         console.log(error);
-        postHogEventTracker(
-          'PROJECT_MEMBER_INVITE',
-          {
-            state: "FAILED",
-          }
-        );
+        postHogEventTracker("PROJECT_MEMBER_INVITE", {
+          state: "FAILED",
+        });
       })
       .finally(() => {
         reset(defaultValues);

web/components/project/sidebar-list-item.tsx

@@ -75,7 +75,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
   // store
-  const { project: projectStore, theme: themeStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    project: projectStore,
+    theme: themeStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -308,7 +312,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
 
                   return (
                     <Link key={item.name} href={item.href}>
-                      <a className="block w-full">
+                      <span className="block w-full">
                         <Tooltip
                           tooltipContent={`${project?.name}: ${item.name}`}
                           position="right"
@@ -326,7 +330,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                             {!isCollapsed && item.name}
                           </div>
                         </Tooltip>
-                      </a>
+                      </span>
                     </Link>
                   );
                 })}