chore: update-eslint-and-prettier

Author: tractorss

.eslintrc.json

@@ -18,21 +18,16 @@
     "plugin:react-hooks/recommended",
     "plugin:import/recommended",
     "plugin:import/react",
-    "plugin:security/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "prettier"
+    "prettier",
+    "plugin:security/recommended-legacy"
   ],
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly"
   },
-  "plugins": [
-    "react",
-    "react-hooks",
-    "security",
-    "import"
-  ],
+  "plugins": ["react", "react-hooks", "security", "import"],
   "ignorePatterns": ["src/assets"],
   "settings": {
     "react": {
@@ -41,20 +36,12 @@
     "import/resolver": {
       "parcel": {
         "rootDir": "src",
-        "extensions": [
-          ".js",
-          ".jsx",
-          ".ts",
-          ".tsx",
-          ".svg",
-          ".png",
-          ".jpeg"
-        ]
+        "extensions": [".js", ".jsx", ".ts", ".tsx", ".svg", ".png", ".jpeg"]
       }
     }
   },
   "rules": {
-    "max-len": ["warn", {"code": 80}],
+    "max-len": ["warn", { "code": 80 }],
     "react/prop-types": 0,
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": [
@@ -67,12 +54,7 @@
     "no-console": [
       "error",
       {
-        "allow": [
-          "warn",
-          "error",
-          "info",
-          "debug"
-        ]
+        "allow": ["warn", "error", "info", "debug"]
       }
     ],
     "@typescript-eslint/no-explicit-any": ["off"],

.prettierrc.json .prettierrc.prettierrc.json renamed to .prettierrc

@@ -35,18 +35,18 @@
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^5.9.1",
     "babel-plugin-styled-components": "^2.0.2",
-    "eslint": "^7",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-import-resolver-parcel": "^1.10.6",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-security": "^1.4.0",
+    "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",
     "husky": "^7.0.0",
     "lint-staged": "^12.1.2",
     "parcel": "^2.13.3",
-    "prettier": "^2.5.1",
+    "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "process": "^0.11.10",
     "styled-components": "^5.3.3",

package.json

@@ -15,7 +15,7 @@ const Input: React.FC = () => {
   const [radioValue, setRadioValue] = useState("bitcoin");
 
   const changeRadioValue: React.ChangeEventHandler<HTMLInputElement> = (
-    event
+    event,
   ) => setRadioValue(event.target.value);
 
   return (

src/examples/input.tsx

@@ -3,7 +3,7 @@ const usePagination = (
   numPages: number,
   callback: (newPage: number) => void,
   onCloseOnLastPage?: () => void,
-  numNeighbors = 2
+  numNeighbors = 2,
 ) => {
   const incrementPage = () => {
     if (currentPage === numPages && onCloseOnLastPage) {
@@ -31,14 +31,14 @@ const usePagination = (
       1,
       currentPage -
         numNeighbors -
-        Math.max(0, numNeighbors - (numPages - currentPage))
+        Math.max(0, numNeighbors - (numPages - currentPage)),
     );
     const rightBoundary = Math.min(
       numPages,
-      currentPage + numNeighbors + Math.max(0, numNeighbors - currentPage + 1)
+      currentPage + numNeighbors + Math.max(0, numNeighbors - currentPage + 1),
     );
     return [...Array(rightBoundary - leftBoundary + 1).keys()].map(
-      (i) => i + leftBoundary
+      (i) => i + leftBoundary,
     );
   };
 

src/hooks/pagination/use-pagination.tsx

@@ -9,7 +9,7 @@ interface Size {
 
 export function useElementSize<T extends HTMLElement = HTMLDivElement>(): [
   (node: T | null) => void,
-  Size
+  Size,
 ] {
   // Mutable values like 'ref.current' aren't valid dependencies
   // because mutating them doesn't re-render the component.

src/hooks/useElementSize.ts

@@ -2,7 +2,7 @@ import { useLayoutEffect } from "react";
 
 export function useResizeObserver<T extends HTMLElement>(
   element: T | null,
-  callback: (target: T, entry: ResizeObserverEntry) => void
+  callback: (target: T, entry: ResizeObserverEntry) => void,
 ) {
   useLayoutEffect(() => {
     if (!element) {

src/hooks/useResizeObserver.ts

@@ -64,7 +64,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
           </Element>
           <Separator>{"/"}</Separator>
         </React.Fragment>
-      )
+      ),
     )}
   </Wrapper>
 );

src/lib/breadcrumb.tsx

@@ -18,7 +18,7 @@ const Wrapper = styled(DropdownContainer)`
   ${mobileStyle(
     () => css`
       width: 240px;
-    `
+    `,
   )}
   border-radius: 3px;
 `;
@@ -37,7 +37,7 @@ const Container = styled.div<{ path: ILayer[]; isOpen: boolean }>`
     ${mobileStyle(
       () => css`
         overflow: auto;
-      `
+      `,
     )}
   `}
 `;
@@ -72,7 +72,7 @@ const Cascader: React.FC<ICascader> = ({
 
   const label = useMemo(
     () => (value ? findLabelByValue(items, value) : undefined),
-    [items, value]
+    [items, value],
   );
 
   return (
@@ -132,7 +132,7 @@ const Cascader: React.FC<ICascader> = ({
  */
 function findLabelByValue(
   nodes: IItem[],
-  targetValue: string | number
+  targetValue: string | number,
 ): string | undefined {
   for (const node of nodes) {
     if (node.value == targetValue) {

src/lib/dropdown/cascader/index.tsx

@@ -13,7 +13,7 @@ const Wrapper = styled.div`
   ${mobileStyle(
     () => css`
       justify-content: center;
-    `
+    `,
   )}
   justify-content: end;
   align-items: center;