chore: update-eslint-to-v9

Author: tractorss

.eslintrc.json

@@ -0,0 +1,121 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import security from "eslint-plugin-security";
+import _import from "eslint-plugin-import";
+import globals from "globals";
+// eslint-disable-next-line import/no-unresolved
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ["src/assets"],
+  },
+  ...fixupConfigRules(
+    compat.extends(
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:import/recommended",
+      "plugin:import/react",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:prettier/recommended",
+      "prettier",
+      "plugin:security/recommended-legacy",
+    ),
+  ),
+  {
+    plugins: {
+      react: fixupPluginRules(react),
+      "react-hooks": fixupPluginRules(reactHooks),
+      security: fixupPluginRules(security),
+      import: fixupPluginRules(_import),
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        Atomics: "readonly",
+        SharedArrayBuffer: "readonly",
+      },
+
+      parser: tsParser,
+      ecmaVersion: 2020,
+      sourceType: "module",
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+
+    settings: {
+      react: {
+        version: "^16.12.0",
+      },
+
+      "import/resolver": {
+        parcel: {
+          rootDir: "src",
+          extensions: [".js", ".jsx", ".ts", ".tsx", ".svg", ".png", ".jpeg"],
+        },
+      },
+    },
+
+    rules: {
+      "max-len": [
+        "warn",
+        {
+          code: 80,
+        },
+      ],
+
+      "react/prop-types": 0,
+      "no-unused-vars": "off",
+
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          varsIgnorePattern: "(^_+[0-9]*$)|([iI]gnored$)|(^ignored)",
+          argsIgnorePattern: "(^_+[0-9]*$)|([iI]gnored$)|(^ignored)",
+        },
+      ],
+
+      "no-console": [
+        "error",
+        {
+          allow: ["warn", "error", "info", "debug"],
+        },
+      ],
+
+      "@typescript-eslint/no-explicit-any": ["off"],
+      "security/detect-object-injection": "off",
+      "security/detect-non-literal-fs-filename": "off",
+
+      "import/extensions": [
+        "error",
+        "ignorePackages",
+        {
+          js: "never",
+          jsx: "never",
+          ts: "never",
+          tsx: "never",
+        },
+      ],
+    },
+  },
+];

eslint.config.mjs

@@ -25,24 +25,28 @@
   "devDependencies": {
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.21.0",
     "@parcel/packager-ts": "^2.2.1",
     "@parcel/transformer-svg-react": "^2.0.1",
     "@parcel/transformer-typescript-types": "^2.2.1",
     "@tailwindcss/postcss": "^4.0.11",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "@types/styled-components": "^5.1.20",
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
+    "@typescript-eslint/eslint-plugin": "^8.26.0",
+    "@typescript-eslint/parser": "^8.26.0",
     "babel-plugin-styled-components": "^2.0.2",
-    "eslint": "^8",
+    "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-import-resolver-parcel": "^1.10.6",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-security": "^3.0.1",
+    "globals": "^16.0.0",
     "husky": "^7.0.0",
     "lint-staged": "^12.1.2",
     "parcel": "^2.13.3",
@@ -51,7 +55,7 @@
     "process": "^0.11.10",
     "styled-components": "^5.3.3",
     "tailwindcss": "^4.0.11",
-    "typescript": "^4.5.4"
+    "typescript": "^5.8.2"
   },
   "peerDependencies": {
     "@tailwindcss/postcss": "^4.0.11",

package.json

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
 //! type
-//eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 function useFocusOutside(ref: any, callback: Function) {
   useEffect(() => {
     function handleEvent(event: any) {

src/hooks/use-focus-outside.tsx

@@ -26,15 +26,12 @@ export function useElementSize<T extends HTMLElement = HTMLDivElement>(): [
       width: ref?.offsetWidth || 0,
       height: ref?.offsetHeight || 0,
     });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ref?.offsetHeight, ref?.offsetWidth]);
 
   useEventListener("resize", handleSize);
 
   useIsomorphicLayoutEffect(() => {
     handleSize();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ref?.offsetHeight, ref?.offsetWidth]);
 
   useResizeObserver<T>(ref, handleSize);

src/hooks/useElementSize.ts

@@ -38,7 +38,7 @@ const ActiveElement = styled(Content)`
 
 interface BreadcrumbProps {
   items: { text: string; value: any }[];
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   callback?: Function;
   clickable?: boolean;
   className?: string;

src/lib/breadcrumb.tsx

@@ -43,7 +43,7 @@ const StyledArrow = styled(({ ignoredIsOpen, ...props }) => (
 interface DropdownButtonProps {
   node: ReactNode;
   isOpen: boolean;
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   setIsOpen: Function;
 }
 

src/lib/dropdown/button.tsx

@@ -66,7 +66,7 @@ const StyledArrow = styled(({ ignoredIsOpen, ignoredSmall, ...props }) => (
 interface DropdownButtonProps {
   text: string;
   isOpen: boolean;
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   setIsOpen: Function;
   small?: boolean;
 }

src/lib/dropdown/simple-button.tsx

@@ -77,7 +77,7 @@ const Message = styled.div<VariantProp>`
 `;
 
 interface FileUploaderProps extends VariantProp {
-  //eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   callback: Function;
   msg?: string;
   info?: boolean;
@@ -129,9 +129,8 @@ const FileUploader: React.FC<FileUploaderProps> = ({
         ref={fileInputRef}
         type="file"
         onChange={(event) => {
-          //eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           setFileSelected(event.target.files![0]);
-          //eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
           callback(event.target.files![0]);
         }}
         {...props}

src/lib/form/file-uploader.tsx

@@ -52,7 +52,7 @@ interface HandleProps extends LabelProps, RCHandleProps {
 const Handle: React.FC<HandleProps> = ({ label, dragging, ...props }) => (
   <Wrapper>
     <Label offset={props.offset}>{label}</Label>
-    {/*eslint-disable-next-line @typescript-eslint/no-non-null-assertion*/}
+    {}
     <StyledHandle dragging={dragging!.toString()} {...props} />
   </Wrapper>
 );