fix: eslint issues and reconfiguring (#3891)

* fix: eslint fixes

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

web/components/ui/loader/cycle-module-board-loader.tsx

@@ -2,8 +2,11 @@ export const CycleModuleBoardLayout = () => (
   <div className="h-full w-full animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
-        {[...Array(5)].map(() => (
-          <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm">
+        {[...Array(5)].map((i) => (
+          <div
+            key={i}
+            className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm"
+          >
             <div className="flex items-center justify-between">
               <span className="h-6 w-24 bg-custom-background-80 rounded" />
               <div className="flex items-center gap-2">

web/components/ui/loader/cycle-module-list-loader.tsx

@@ -2,8 +2,11 @@ export const CycleModuleListLayout = () => (
   <div className="h-full overflow-y-auto animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="flex h-full w-full flex-col overflow-y-auto">
-        {[...Array(5)].map(() => (
-          <div className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6">
+        {[...Array(5)].map((i) => (
+          <div
+            key={i}
+            className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6"
+          >
             <div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
               <div className="relative w-full flex items-center gap-3 overflow-hidden">
                 <div className="flex items-center gap-4 truncate">

web/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 // ui
-import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 import { Loader } from "@plane/ui";
+import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
 export const InboxLayoutLoader = () => (
   <div className="relative flex h-full overflow-hidden">

web/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx

@@ -7,8 +7,8 @@ export const InboxSidebarLoader = () => (
       <span className="h-6 w-16 bg-custom-background-80 rounded" />
     </div>
     <div className="flex flex-col">
-      {[...Array(6)].map(() => (
-        <div className="flex flex-col gap-3 h-[5rem]space-y-3 border-b border-custom-border-200 px-4 py-2">
+      {[...Array(6)].map((i) => (
+        <div key={i} className="flex flex-col gap-3 h-[5rem]space-y-3 border-b border-custom-border-200 px-4 py-2">
           <div className="flex items-center justify-between gap-3">
             <span className="h-5 w-20 bg-custom-background-80 rounded" />
             <span className="h-5 w-16 bg-custom-background-80 rounded" />

web/components/ui/loader/notification-loader.tsx

@@ -1,7 +1,7 @@
 export const NotificationsLoader = () => (
   <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
-    {[...Array(3)].map(() => (
-      <div className="flex w-full items-center gap-4 p-3">
+    {[...Array(3)].map((i) => (
+      <div key={i} className="flex w-full items-center gap-4 p-3">
         <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
         <div className="flex flex-col gap-2.5 w-full">
           <span className="h-5 w-36 bg-custom-background-80 rounded" />

web/components/ui/loader/pages-loader.tsx

@@ -4,13 +4,13 @@ export const PagesLoader = () => (
       <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
     </div>
     <div className="flex items-center gap-3">
-      {[...Array(5)].map(() => (
-        <span className="h-8 w-20 bg-custom-background-80 rounded-full" />
+      {[...Array(5)].map((i) => (
+        <span key={i} className="h-8 w-20 bg-custom-background-80 rounded-full" />
       ))}
     </div>
     <div className="divide-y divide-custom-border-200">
-      {[...Array(5)].map(() => (
-        <div className="h-12 w-full flex items-center justify-between px-3">
+      {[...Array(5)].map((i) => (
+        <div key={i} className="h-12 w-full flex items-center justify-between px-3">
           <div className="flex items-center gap-1.5">
             <span className="h-5 w-5 bg-custom-background-80 rounded" />
             <span className="h-5 w-20 bg-custom-background-80 rounded" />

web/components/ui/loader/projects-loader.tsx

@@ -1,8 +1,11 @@
 export const ProjectsLoader = () => (
   <div className="h-full w-full overflow-y-auto p-8 animate-pulse">
     <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-      {[...Array(3)].map(() => (
-        <div className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100">
+      {[...Array(3)].map((i) => (
+        <div
+          key={i}
+          className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
+        >
           <div className="relative min-h-[118px] w-full rounded-t border-b border-custom-border-200 ">
             <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/20 to-transparent">
               <div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">

web/components/ui/loader/settings/activity.tsx

@@ -2,8 +2,8 @@ import { getRandomLength } from "../utils";
 
 export const ActivitySettingsLoader = () => (
   <div className="flex flex-col gap-3 animate-pulse">
-    {[...Array(10)].map(() => (
-      <div className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
+    {[...Array(10)].map((i) => (
+      <div key={i} className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
         <span className="h-6 w-6 bg-custom-background-80 rounded" />
         <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-custom-background-80 rounded`} />
       </div>

web/components/ui/loader/settings/api-token.tsx

@@ -5,8 +5,8 @@ export const APITokenSettingsLoader = () => (
       <span className="h-8 w-28 bg-custom-background-80 rounded" />
     </div>
     <div className="divide-y-[0.5px] divide-custom-border-200">
-      {[...Array(2)].map(() => (
-        <div className="flex flex-col gap-2 px-4 py-3">
+      {[...Array(2)].map((i) => (
+        <div key={i} className="flex flex-col gap-2 px-4 py-3">
           <div className="flex items-center gap-2">
             <span className="h-5 w-28 bg-custom-background-80 rounded" />
             <span className="h-5 w-16 bg-custom-background-80 rounded" />

web/components/ui/loader/settings/email.tsx

@@ -8,8 +8,8 @@ export const EmailSettingsLoader = () => (
       <div className="flex items-center py-3">
         <span className="h-7 w-32 bg-custom-background-80 rounded" />
       </div>
-      {[...Array(4)].map(() => (
-        <div className="flex items-center justify-between">
+      {[...Array(4)].map((i) => (
+        <div key={i} className="flex items-center justify-between">
           <div className="flex flex-col gap-2 py-3">
             <span className="h-6 w-28 bg-custom-background-80 rounded" />
             <span className="h-5 w-96 bg-custom-background-80 rounded" />

web/components/ui/loader/settings/import-and-export.tsx

@@ -1,7 +1,7 @@
 export const ImportExportSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
-    {[...Array(2)].map(() => (
-      <div className="flex items-center justify-between gap-2 px-4 py-3">
+    {[...Array(2)].map((i) => (
+      <div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
         <div className="flex flex-col gap-1.5">
           <div className="flex items-center gap-2">
             <span className="h-5 w-16 bg-custom-background-80 rounded" />

web/components/ui/loader/settings/integration.tsx

@@ -1,7 +1,10 @@
 export const IntegrationsSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {[...Array(2)].map(() => (
-      <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
+    {[...Array(2)].map((i) => (
+      <div
+        key={i}
+        className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
+      >
         <div className="flex items-start gap-4">
           <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
           <div className="flex flex-col gap-1">

web/components/ui/loader/settings/members.tsx

@@ -1,7 +1,7 @@
 export const MembersSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {[...Array(4)].map(() => (
-      <div className="group flex items-center justify-between px-3 py-4">
+    {[...Array(4)].map((i) => (
+      <div key={i} className="group flex items-center justify-between px-3 py-4">
         <div className="flex items-center gap-x-4 gap-y-2">
           <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
           <div className="flex flex-col gap-1">

web/components/ui/loader/view-list-loader.tsx

@@ -1,7 +1,7 @@
 export const ViewListLoader = () => (
   <div className="flex h-full w-full flex-col animate-pulse">
-    {[...Array(8)].map(() => (
-      <div className="group border-b border-custom-border-200">
+    {[...Array(8)].map((i) => (
+      <div key={i} className="group border-b border-custom-border-200">
         <div className="relative flex w-full items-center justify-between rounded p-4">
           <div className="flex items-center gap-4">
             <span className="min-h-10 min-w-10 bg-custom-background-80 rounded" />