fix: eslint issues and reconfiguring (#3891)

* fix: eslint fixes

---------

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

web/components/dropdowns/buttons.tsx

@@ -1,10 +1,10 @@
 // helpers
+import { Tooltip } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
+import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS } from "./constants";
 import { TButtonVariants } from "./types";
 // constants
-import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS } from "./constants";
-import { Tooltip } from "@plane/ui";
 
 export type DropdownButtonProps = {
   children: React.ReactNode;
@@ -31,8 +31,8 @@ export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
   const ButtonToRender: React.FC<ButtonProps> = BORDER_BUTTON_VARIANTS.includes(variant)
     ? BorderButton
     : BACKGROUND_BUTTON_VARIANTS.includes(variant)
-    ? BackgroundButton
-    : TransparentButton;
+      ? BackgroundButton
+      : TransparentButton;
 
   return (
     <ButtonToRender

web/components/dropdowns/cycle/cycle-options.tsx

@@ -1,16 +1,16 @@
-import { useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
-import { observer } from "mobx-react";
-//components
-import { ContrastIcon, CycleGroupIcon } from "@plane/ui";
-//store
-import { useApplication, useCycle } from "hooks/store";
-//hooks
-import { usePopper } from "react-popper";
-//icon
-import { Check, Search } from "lucide-react";
-//types
+import { FC, useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+// components
+import { Combobox } from "@headlessui/react";
+// icon
+import { Check, Search } from "lucide-react";
+// ui
+import { ContrastIcon, CycleGroupIcon } from "@plane/ui";
+// store hooks
+import { useApplication, useCycle } from "hooks/store";
+// types
 import { TCycleGroups } from "@plane/types";
 
 type DropdownOptions =
@@ -21,14 +21,14 @@ type DropdownOptions =
     }[]
   | undefined;
 
-interface Props {
+type CycleOptionsProps = {
   projectId: string;
   referenceElement: HTMLButtonElement | null;
   placement: Placement | undefined;
   isOpen: boolean;
-}
+};
 
-export const CycleOptions = observer((props: any) => {
+export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
   const { projectId, isOpen, referenceElement, placement } = props;
 
   //state hooks

web/components/dropdowns/cycle/index.tsx

@@ -3,19 +3,19 @@ import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { ChevronDown } from "lucide-react";
 // hooks
+import { ContrastIcon } from "@plane/ui";
+import { cn } from "helpers/common.helper";
 import { useCycle } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "../buttons";
 // icons
-import { ContrastIcon } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
 import { TDropdownProps } from "../types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
 import { CycleOptions } from "./cycle-options";
 
 type Props = TDropdownProps & {

web/components/dropdowns/date-range.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
-import { usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
 import { DateRange, DayPicker, Matcher } from "react-day-picker";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
 import { ArrowRight, CalendarDays } from "lucide-react";
 // hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 // components
-import { DropdownButton } from "./buttons";
 // ui
 import { Button } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 import { renderFormattedDate } from "helpers/date-time.helper";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { DropdownButton } from "./buttons";
 // types
 import { TButtonVariants } from "./types";
 

web/components/dropdowns/date.tsx

@@ -1,20 +1,20 @@
 import React, { useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
 import { DayPicker, Matcher } from "react-day-picker";
 import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
 import { CalendarDays, X } from "lucide-react";
 // hooks
+import { cn } from "helpers/common.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   clearIconClassName?: string;

web/components/dropdowns/estimate.tsx

@@ -1,21 +1,21 @@
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
-import { observer } from "mobx-react-lite";
-import { Combobox } from "@headlessui/react";
-import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search, Triangle } from "lucide-react";
 import sortBy from "lodash/sortBy";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search, Triangle } from "lucide-react";
 // hooks
+import { cn } from "helpers/common.helper";
 import { useApplication, useEstimate } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;

web/components/dropdowns/member/avatar.tsx

@@ -1,8 +1,8 @@
 import { observer } from "mobx-react-lite";
 // hooks
+import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui";
 import { useMember } from "hooks/store";
 // ui
-import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui";
 
 type AvatarProps = {
   showTooltip: boolean;

web/components/dropdowns/member/index.tsx

@@ -3,19 +3,19 @@ import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { ChevronDown } from "lucide-react";
 // hooks
+import { cn } from "helpers/common.helper";
 import { useMember } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { ButtonAvatars } from "./avatar";
 import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import { ButtonAvatars } from "./avatar";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { MemberOptions } from "./member-options";
 import { MemberDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
-import { MemberOptions } from "./member-options";
 
 type Props = {
   projectId?: string;

web/components/dropdowns/member/member-options.tsx

@@ -1,16 +1,16 @@
 import { useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
 //components
+import { Check, Search } from "lucide-react";
 import { Avatar } from "@plane/ui";
 //store
 import { useApplication, useMember, useUser } from "hooks/store";
 //hooks
-import { usePopper } from "react-popper";
 //icon
-import { Check, Search } from "lucide-react";
 //types
-import { Placement } from "@popperjs/core";
 
 interface Props {
   projectId?: string;

web/components/dropdowns/module/index.tsx

@@ -3,19 +3,19 @@ import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { ChevronDown, X } from "lucide-react";
 // hooks
+import { DiceIcon, Tooltip } from "@plane/ui";
+import { cn } from "helpers/common.helper";
 import { useModule } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "../buttons";
 // icons
-import { DiceIcon, Tooltip } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
 import { TDropdownProps } from "../types";
 // constants
-import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
 import { ModuleOptions } from "./module-options";
 
 type Props = TDropdownProps & {
@@ -71,7 +71,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
         {showCount ? (
           <div className="relative flex items-center gap-1">
             {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
-            <div className="flex-grow truncate max-w-40">
+            <div className="max-w-40 flex-grow truncate">
               {value.length > 0
                 ? value.length === 1
                   ? `${getModuleById(value[0])?.name || "module"}`
@@ -80,18 +80,18 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
             </div>
           </div>
         ) : value.length > 0 ? (
-          <div className="flex items-center gap-2 py-0.5 max-w-full flex-grow truncate flex-wrap">
+          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5">
             {value.map((moduleId) => {
               const moduleDetails = getModuleById(moduleId);
               return (
                 <div
                   key={moduleId}
-                  className="flex items-center gap-1 max-w-full bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1"
+                  className="flex max-w-full items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-custom-text-200"
                 >
                   {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
                   {!hideText && (
                     <Tooltip tooltipHeading="Title" tooltipContent={moduleDetails?.name}>
-                      <span className="text-xs font-medium flex-grow truncate max-w-40">{moduleDetails?.name}</span>
+                      <span className="max-w-40 flex-grow truncate text-xs font-medium">{moduleDetails?.name}</span>
                     </Tooltip>
                   )}
                   {!disabled && (
@@ -266,8 +266,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
                 placeholder={placeholder}
                 showCount={showCount}
                 value={value}
-                // @ts-ignore
-                onChange={onChange}
+                onChange={onChange as any}
               />
             </DropdownButton>
           </button>

web/components/dropdowns/module/module-options.tsx

@@ -1,17 +1,17 @@
 import { useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
 //components
+import { Check, Search } from "lucide-react";
 import { DiceIcon } from "@plane/ui";
 //store
+import { cn } from "helpers/common.helper";
 import { useApplication, useModule } from "hooks/store";
 //hooks
-import { usePopper } from "react-popper";
-import { cn } from "helpers/common.helper";
 //icon
-import { Check, Search } from "lucide-react";
 //types
-import { Placement } from "@popperjs/core";
 
 type DropdownOptions =
   | {

web/components/dropdowns/priority.tsx

@@ -1,21 +1,21 @@
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
-import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search } from "lucide-react";
 import { useTheme } from "next-themes";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
+import { PriorityIcon, Tooltip } from "@plane/ui";
+import { ISSUE_PRIORITIES } from "constants/issue";
+import { cn } from "helpers/common.helper";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // icons
-import { PriorityIcon, Tooltip } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
 import { TIssuePriorities } from "@plane/types";
+import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { ISSUE_PRIORITIES } from "constants/issue";
-import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -342,8 +342,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
     ? BorderButton
     : BACKGROUND_BUTTON_VARIANTS.includes(buttonVariant)
-    ? BackgroundButton
-    : TransparentButton;
+      ? BackgroundButton
+      : TransparentButton;
 
   useEffect(() => {
     if (isOpen && inputRef.current) {

web/components/dropdowns/project.tsx

@@ -1,21 +1,21 @@
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
+import { cn } from "helpers/common.helper";
+import { renderEmoji } from "helpers/emoji.helper";
 import { useProject } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
 // helpers
-import { cn } from "helpers/common.helper";
-import { renderEmoji } from "helpers/emoji.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -81,8 +81,8 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
             {projectDetails?.emoji
               ? renderEmoji(projectDetails?.emoji)
               : projectDetails?.icon_prop
-              ? renderEmoji(projectDetails?.icon_prop)
-              : null}
+                ? renderEmoji(projectDetails?.icon_prop)
+                : null}
           </span>
           <span className="flex-grow truncate">{projectDetails?.name}</span>
         </div>
@@ -174,8 +174,8 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                   {selectedProject?.emoji
                     ? renderEmoji(selectedProject?.emoji)
                     : selectedProject?.icon_prop
-                    ? renderEmoji(selectedProject?.icon_prop)
-                    : null}
+                      ? renderEmoji(selectedProject?.icon_prop)
+                      : null}
                 </span>
               )}
               {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (

web/components/dropdowns/state.tsx

@@ -1,22 +1,22 @@
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
+import { StateGroupIcon } from "@plane/ui";
+import { cn } from "helpers/common.helper";
 import { useApplication, useProjectState } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
 // icons
-import { StateGroupIcon } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;