fix: eslint issues and reconfiguring (#3891)

* fix: eslint fixes

---------

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

packages/editor/core/package.json

@@ -59,8 +59,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "^7.32.0",
-    "eslint-config-next": "13.2.4",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
     "tsconfig": "*",

packages/editor/document-editor/package.json

@@ -37,7 +37,6 @@
     "@tiptap/extension-placeholder": "^2.1.13",
     "@tiptap/pm": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
-    "eslint-config-next": "13.2.4",
     "lucide-react": "^0.309.0",
     "react-popper": "^2.3.0",
     "tippy.js": "^6.3.7",
@@ -47,7 +46,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "8.36.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
     "tsconfig": "*",

packages/editor/document-editor/src/ui/components/content-browser.tsx

@@ -15,7 +15,7 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
   const handleOnClick = (marking: IMarking) => {
     scrollSummary(editor, marking);
     if (setSidePeekVisible) setSidePeekVisible(false);
-  }
+  };
 
   return (
     <div className="flex h-full flex-col overflow-hidden">

packages/editor/document-editor/src/ui/components/summary-popover.tsx

@@ -33,8 +33,9 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       <button
         type="button"
         ref={setReferenceElement}
-        className={`grid h-7 w-7 place-items-center rounded ${sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
-          }`}
+        className={`grid h-7 w-7 place-items-center rounded ${
+          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
+        }`}
         onClick={() => setSidePeekVisible(!sidePeekVisible)}
       >
         <List className="h-4 w-4" />

packages/editor/document-editor/src/ui/extensions/index.tsx

@@ -26,4 +26,3 @@ export const DocumentEditorExtensions = (
   }),
   IssueWidgetPlaceholder(),
 ];
-

packages/editor/extensions/package.json

@@ -33,7 +33,6 @@
     "@tiptap/pm": "^2.1.13",
     "@tiptap/react": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
-    "eslint-config-next": "13.2.4",
     "lucide-react": "^0.294.0",
     "tippy.js": "^6.3.7"
   },
@@ -41,7 +40,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "8.36.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
     "tsconfig": "*",

packages/editor/lite-text-editor/package.json

@@ -36,10 +36,9 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
-    "eslint-config-custom": "*",
     "tsconfig": "*",
     "tsup": "^7.2.0",
     "typescript": "4.9.5"

packages/editor/rich-text-editor/package.json

@@ -39,7 +39,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "react": "^18.2.0",
     "tailwind-config-custom": "*",

packages/eslint-config-custom/index.js

@@ -1,22 +1,43 @@
 module.exports = {
-  extends: ["next", "turbo", "prettier"],
+  extends: [
+    "next",
+    "turbo",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+  ],
   parser: "@typescript-eslint/parser",
-  plugins: ["react", "@typescript-eslint"],
+  parserOptions: {
+    ecmaVersion: 2021, // Or the ECMAScript version you are using
+    sourceType: "module", // Or 'script' if you're using CommonJS or other modules
+  },
+  plugins: ["react", "@typescript-eslint", "import"],
   settings: {
     next: {
       rootDir: ["web/", "space/", "packages/*/"],
     },
   },
   rules: {
-    "@next/next/no-html-link-for-pages": "off",
-    "react/jsx-key": "off",
     "prefer-const": "error",
     "no-irregular-whitespace": "error",
     "no-trailing-spaces": "error",
     "no-duplicate-imports": "error",
     "arrow-body-style": ["error", "as-needed"],
-    "react/self-closing-comp": ["error", { component: true, html: true }],
+    "@next/next/no-html-link-for-pages": "off",
     "@next/next/no-img-element": "off",
-    "@typescript-eslint/no-unused-vars": ["warn"],
+    "react/jsx-key": "error",
+    "react/self-closing-comp": ["error", { component: true, html: true }],
+    "react/jsx-boolean-value": "error",
+    "react/jsx-no-duplicate-props": "error",
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-useless-empty-export": "error",
+    "@typescript-eslint/prefer-ts-expect-error": "error",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        selector: ["function", "variable"],
+        format: ["camelCase", "snake_case", "UPPER_CASE", "PascalCase"],
+      },
+    ],
   },
 };

packages/eslint-config-custom/package.json

@@ -4,18 +4,16 @@
   "version": "0.16.0",
   "main": "index.js",
   "license": "MIT",
+  "devDependencies": {},
   "dependencies": {
-    "eslint": "^7.23.0",
-    "eslint-config-next": "13.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-turbo": "latest",
-    "eslint-plugin-react": "7.31.8"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "typescript": "^4.7.4"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-turbo": "^1.12.4",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.33.2",
+    "typescript": "^5.3.3"
   }
 }

packages/types/src/pages.d.ts

@@ -1,5 +1,10 @@
 // types
-import { TIssue, IIssueLabel, IWorkspaceLite, IProjectLite } from "@plane/types";
+import {
+  TIssue,
+  IIssueLabel,
+  IWorkspaceLite,
+  IProjectLite,
+} from "@plane/types";
 
 export interface IPage {
   access: number;

packages/types/src/state.d.ts

@@ -1,6 +1,11 @@
 import { IProject, IProjectLite, IWorkspaceLite } from "@plane/types";
 
-export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
+export type TStateGroups =
+  | "backlog"
+  | "unstarted"
+  | "started"
+  | "completed"
+  | "cancelled";
 
 export interface IState {
   readonly id: string;

packages/types/src/views.d.ts

@@ -1,4 +1,8 @@
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "./view-props";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+} from "./view-props";
 
 export interface IProjectView {
   id: string;

packages/ui/src/badge/helper.tsx

@@ -122,14 +122,14 @@ export const badgeStyling: IBadgeStyling = {
 };
 
 export const getBadgeStyling = (variant: TBadgeVariant, size: TBadgeSizes, disabled: boolean = false): string => {
-  let _variant: string = ``;
+  let tempVariant: string = ``;
   const currentVariant = badgeStyling[variant];
 
-  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover}`;
+  tempVariant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover}`;
 
-  let _size: string = ``;
-  if (size) _size = badgeSizeStyling[size];
-  return `${_variant} ${_size}`;
+  let tempSize: string = ``;
+  if (size) tempSize = badgeSizeStyling[size];
+  return `${tempVariant} ${tempSize}`;
 };
 
 export const getIconStyling = (size: TBadgeSizes): string => {

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -29,13 +29,10 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
             <React.Fragment key={index}>
               {index > 0 && !isSmallScreen && (
                 <div className="flex items-center gap-2.5">
-                  <ChevronRight
-                    className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
-                    aria-hidden="true"
-                  />
+                  <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
                 </div>
               )}
-              <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? 'hidden sm:flex' : 'flex'}`}>
+              <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? "hidden sm:flex" : "flex"}`}>
                 {child}
               </div>
             </React.Fragment>
@@ -46,7 +43,11 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
       {isSmallScreen && childrenArray.length > 1 && (
         <>
           <div className="flex items-center gap-2.5">
-            {onBack && <span onClick={onBack} className="text-custom-text-200">...</span>}
+            {onBack && (
+              <span onClick={onBack} className="text-custom-text-200">
+                ...
+              </span>
+            )}
             <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
           </div>
           <div className="flex items-center gap-2.5">{childrenArray[childrenArray.length - 1]}</div>
@@ -70,4 +71,4 @@ const BreadcrumbItem: React.FC<Props> = (props) => {
 
 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
 
-export { Breadcrumbs, BreadcrumbItem };
+export { Breadcrumbs, BreadcrumbItem };

packages/ui/src/button/helper.tsx

@@ -100,16 +100,16 @@ export const buttonStyling: IButtonStyling = {
 };
 
 export const getButtonStyling = (variant: TButtonVariant, size: TButtonSizes, disabled: boolean = false): string => {
-  let _variant: string = ``;
+  let tempVariant: string = ``;
   const currentVariant = buttonStyling[variant];
 
-  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
+  tempVariant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
     currentVariant.pressed
   }`;
 
-  let _size: string = ``;
-  if (size) _size = buttonSizeStyling[size];
-  return `${_variant} ${_size}`;
+  let tempSize: string = ``;
+  if (size) tempSize = buttonSizeStyling[size];
+  return `${tempVariant} ${tempSize}`;
 };
 
 export const getIconStyling = (size: TButtonSizes): string => {

packages/ui/src/control-link/control-link.tsx

@@ -12,7 +12,7 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
   const { href, onClick, children, target = "_self", disabled = false, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
-  const _onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+  const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     const clickCondition = (event.metaKey || event.ctrlKey) && event.button === LEFT_CLICK_EVENT_CODE;
     if (!clickCondition) {
       event.preventDefault();
@@ -23,7 +23,7 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
   if (disabled) return <>{children}</>;
 
   return (
-    <a href={href} target={target} onClick={_onClick} {...rest}>
+    <a href={href} target={target} onClick={handleOnClick} {...rest}>
       {children}
     </a>
   );