[DEPENDENCY] Eslint => 9.8 (#28)

* [DEPENDENCY] Eslint => 9.8

* update set-pr-title to avoid failing job

.github/workflows/set-pr-title.yml

@@ -16,30 +16,34 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
-            const { owner, repo, number: pull_number } = context.issue;
-            const pr = context.payload.pull_request;
-            const body = pr.body;
-            const branchName = pr.head.ref;
-            const [type, id, description] = branchName.split('/');
-            const title = `[${type.toUpperCase()}][${id}] ${ description ? description?.split("-").join(' ') : null}`;
+            try {
+              const { owner, repo, number: pull_number } = context.issue;
+              const pr = context.payload.pull_request;
+              const body = pr.body;
+              const branchName = pr.head.ref;
+              const [type, id, description] = branchName.split('/');
+              const title = `[${type.toUpperCase()}][${id}] ${ description ? description?.split("-").join(' ') : null}`;
 
-            const format = (str, ...args) => {
-              return str.replace(/{(\d+)}/g, (match, number) => {
-                return typeof args[number] !== 'undefined' ? args[number] : match;
-              });
-            };
+              const format = (str, ...args) => {
+                return str.replace(/{(\d+)}/g, (match, number) => {
+                  return typeof args[number] !== 'undefined' ? args[number] : match;
+                });
+              };
 
-            const templateTitle = description.split("-").join(' ').replace(/\b\w/g, function(l){ return l.toUpperCase() });
-            const taskCode = id.split("CU-").join('');
-            const isFeature = type === 'feature' ? 'x' : ' ';
-            const isBugfix = ["bugfix", "hotfix"].includes(type) ? 'x' : ' ';
+              const templateTitle = description.split("-").join(' ').replace(/\b\w/g, function(l){ return l.toUpperCase() });
+              const taskCode = id.split("CU-").join('');
+              const isFeature = type === 'feature' ? 'x' : ' ';
+              const isBugfix = ["bugfix", "hotfix"].includes(type) ? 'x' : ' ';
 
-            const updatedBody = format(body, templateTitle, id, taskCode, isFeature, isBugfix);
+              const updatedBody = format(body, templateTitle, id, taskCode, isFeature, isBugfix);
 
-            await github.rest.pulls.update({
-              owner,
-              repo,
-              pull_number,
-              title,
-              body: updatedBody
-            });
+              await github.rest.pulls.update({
+                owner,
+                repo,
+                pull_number,
+                title,
+                body: updatedBody
+              });
+            } catch (error) {
+              console.log("Error setting PR title: ", error);
+            }

.nvmrc

@@ -1 +1 @@
-18.17.1
+20.9.0

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": true
   },
+  "eslint.validate": ["javascript"],
   "editor.formatOnType": false,
   "editor.formatOnPaste": true,
   "editor.formatOnSave": true,

eslint.config.js

@@ -0,0 +1,12 @@
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default [
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

package.json

@@ -2,7 +2,7 @@
   "name": "fe-boilerplate",
   "private": true,
   "engines": {
-    "node": ">=v18.17.1"
+    "node": ">=v20.9.0"
   },
   "packageManager": "[email protected]",
   "version": "0.0.1",
@@ -50,6 +50,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@eslint/js": "^9.8.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-actions": "^7.6.17",
@@ -67,29 +68,20 @@
     "@storybook/theming": "^7.6.17",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@tanstack/eslint-plugin-query": "^5.20.1",
-    "@types/eslint": "^8.56.5",
     "@types/node": "^20.11.25",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.10",
     "@types/uuid": "^9.0.8",
     "@types/yargs": "^17.0.32",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.18",
     "dotenv-cli": "^7.4.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint": "^9.8",
+    "eslint-plugin-react": "^7.35.0",
+    "globals": "^15.8.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "plop": "^4.0.1",
@@ -100,6 +92,7 @@
     "storybook": "^7.6.17",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.2",
+    "typescript-eslint": "^7.17.0",
     "vite": "^5.1.7",
     "yargs": "^17.7.2"
   },
@@ -113,8 +106,7 @@
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [
-      "pretty-quick --staged",
-      "eslint --fix"
+      "pretty-quick --staged"
     ]
   }
 }

prettier.config.mjs

@@ -7,7 +7,7 @@ const config = {
   arrowParens: "always",
   printWidth: 80,
   singleQuote: false,
-  jsxSingleQuote: false,
+  jsxSingleQuote: true,
   semi: true,
   trailingComma: "all",
   tabWidth: 2,

src/env.ts

@@ -15,14 +15,13 @@ type EnvValues = z.infer<typeof envSchema>;
 
 // IDEA: trigger a toast message on dev instead of just a console error
 function logEnvError(errors: ZodError<EnvValues>) {
-  const { _errors, ...formattedErrors } = errors.format();
+  const { ...formattedErrors } = errors.format();
 
   console.error("<");
   console.error("ENVIRONMENT VARIABLES ERRORS:");
   console.error("----");
-  Object.entries(formattedErrors).forEach(([name, { _errors }]) => {
-    const errMsg = _errors.join(", ");
-    console.error(`"${name}": ${errMsg}`);
+  Object.entries(formattedErrors).forEach(([name]) => {
+    console.error(name);
   });
   console.error("----");
   console.error(">");

src/main.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+import React, { StrictMode } from "react";
 // import * as Sentry from "@sentry/react";
 import {
   QueryCache,

src/router/router.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import type { Location } from "react-router-dom";
 
@@ -35,7 +36,7 @@ export const Router = () => {
           <Route element={<Layout />}>
             <Route element={<Home />} path={ROUTES.home} />
           </Route>
-          <Route path="*" element={<NotFound />} />
+          <Route path='*' element={<NotFound />} />
         </>
       )}
     </Routes>

src/router/useNavigateModal.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import type { NavigateOptions } from "react-router-dom";
 import { useLocation, useNavigate } from "react-router-dom";
 
@@ -29,7 +30,7 @@ export const useNavigateModal = () => {
   ) => {
     navigate(to, {
       ...options,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
       state: {
         ...options?.state,
         previousLocation: previousLocation ?? location,