fix: resolve eslint and types rules/issues

.eslintrc.json

@@ -1,30 +1,104 @@
 {
   "extends": [
     "next",
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "eslint-config-prettier",
+    "plugin:import/recommended"
   ],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "prettier"],
+  "plugins": ["@typescript-eslint", "prettier", "import"],
   "root": true,
   "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "tabWidth": 2,
-        "semi": true,
-        "endOfLine": "auto",
-        "singleQuote": false,
-        "trailingComma": "es5"
-      }
-    ],
+    "quotes": ["error", "double"],
+    "prettier/prettier": ["error", { "printWidth": 130, "singleQuote": false }],
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/no-namespace": "off",
     "array-callback-return": "error",
     "eqeqeq": "error",
     "no-alert": "error",
     "no-return-assign": "error",
+    "padding-line-between-statements": "off",
+    "@typescript-eslint/padding-line-between-statements": [
+      "error",
+      {
+        "blankLine": "always",
+        "prev": "*",
+        "next": ["interface", "type"]
+      }
+    ],
+    "react/react-in-jsx-scope": "off",
+    "max-len": ["error", { "code": 130 }],
+    "react/prop-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "no-empty-function": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "off",
+    "import/prefer-default-export": "off",
+    "import/named": "off",
+    "prefer-destructuring": [
+      "error",
+      { "array": false, "object": true },
+      { "enforceForRenamedProperties": false }
+    ],
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-nested-ternary": "warn",
+    "no-shadow": "error",
+    "eol-last": ["error", "always"],
+    "react/jsx-filename-extension": [
+      "error",
+      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
+    ],
+    "import/no-named-as-default": "off",
+    "@next/next/no-img-element": "off",
+    "import/no-unresolved": "error",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "@/**",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "always",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
     "no-restricted-syntax": [
       "error",
       {
@@ -135,5 +209,19 @@
         ]
       }
     ]
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
   }
 }

.prettierrc

@@ -1,7 +1,12 @@
 {
-  "trailingComma": "es5",
   "tabWidth": 2,
+  "useTabs": false,
   "semi": true,
-  "endOfLine": "auto",
-  "singleQuote": false
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "jsxBracketSameLine": false,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "jsxSingleQuote": false
 }

.vscode/extensions.json

@@ -3,4 +3,4 @@
     "yzhang.markdown-all-in-one",
     "DavidAnson.vscode-markdownlint"
   ]
-}
+}

.vscode/settings.json

@@ -1,9 +1,48 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": false,
+  "eslint.options": {
+    "overrideConfigFile": "./.eslintrc.json"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "json",
+    "yaml"
+  ],
+  "eslint.format.enable": true,
+  "eslint.lintTask.enable": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "always"
   },
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.run": "onSave",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "files.eol": "\n",
+  "files.insertFinalNewline": true,
+  "files.associations": {
+    "*.js": "javascriptreact",
+    "*.jsx": "javascriptreact",
+    "*.ts": "typescriptreact",
+    "*.tsx": "typescriptreact"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
   "markdown.extension.toc.levels": "2..6",
   "markdown.extension.orderedList.autoRenumber": false
 }

README.md

@@ -57,13 +57,13 @@ npx playwright install
 
    ```bash
     npx playwright test --ui
-    ```
+   ```
 
-    or
+   or
 
-    ```bash
-    npx playwright test
-    ```
+   ```bash
+   npx playwright test
+   ```
 
 ## Inspiration
 

package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "build:e2e": "cp -n example.env.local .env.local && next build",
     "start": "next start",
-    "lint": "next lint",
+    "typecheck": "./node_modules/.bin/tsc --project ./tsconfig.json",
+    "lint": "next lint && npm run typecheck",
     "prepare": "is-ci || husky",
     "release": "release-it",
     "generate:resource": "hygen generate resource",

playwright.config.ts

@@ -1,11 +1,11 @@
 import { defineConfig, devices } from "@playwright/test";
-
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-import dotenv from "dotenv";
-dotenv.config({ path: ".env.local" });
+import { config } from "dotenv";
+
+config({ path: ".env.local" });
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -75,9 +75,7 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: process.env.CI
-      ? "npm run build:e2e && npm run start"
-      : "npm run dev",
+    command: process.env.CI ? "npm run build:e2e && npm run start" : "npm run dev",
     url: "http://127.0.0.1:3000",
     reuseExistingServer: !process.env.CI,
   },

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ]
+  "extends": ["config:base"]
 }

src/app/[language]/layout.tsx

@@ -1,23 +1,24 @@
-import "../globals.css";
+import "@/app/globals.css";
 import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
+import CssBaseline from "@mui/material/CssBaseline";
+import { GoogleOAuthProvider } from "@react-oauth/google";
 import { dir } from "i18next";
-import "@/services/i18n/config";
-import { languages } from "@/services/i18n/config";
 import type { Metadata } from "next";
+
+import MainLayoutContainer from "@/components/containers/MainLayoutContainer";
 import SnackbarProvider from "@/components/snackbar-provider";
+import InitColorSchemeScript from "@/components/theme/init-color-scheme-script";
+import ThemeProvider from "@/components/theme/theme-provider";
+import { Providers } from "@/redux/store/provider";
 import { getServerTranslation } from "@/services/i18n";
+import { languages } from "@/services/i18n/config";
 import StoreLanguageProvider from "@/services/i18n/store-language-provider";
-import ThemeProvider from "@/components/theme/theme-provider";
-import QueryClientProvider from "@/services/react-query/query-client-provider";
 import queryClient from "@/services/react-query/query-client";
+import QueryClientProvider from "@/services/react-query/query-client-provider";
 import ReactQueryDevtools from "@/services/react-query/react-query-devtools";
-import InitColorSchemeScript from "@/components/theme/init-color-scheme-script";
-import MainLayoutContainer from "@/components/containers/MainLayoutContainer";
-import { GoogleOAuthProvider } from "@react-oauth/google";
-import { Providers } from "@/redux/store/provider";
 
 type Props = {
   params: { language: string };
@@ -42,23 +43,27 @@ export default function RootLayout({
   children: React.ReactNode;
   params: { language: string };
 }) {
-  const clientId = process.env.NEXT_PUBLIC_CLIENT_ID;
+  const clientId = process.env.NEXT_PUBLIC_CLIENT_ID ?? "";
 
   return (
     <html lang={language} dir={dir(language)}>
       <body>
+        <CssBaseline />
         <InitColorSchemeScript />
-        <QueryClientProvider client={queryClient}>
-          <ReactQueryDevtools initialIsOpen={false} />
-          <ThemeProvider>
-            <CssBaseline />
-            <SnackbarProvider maxSnack={3}>
-              <StoreLanguageProvider>
-                <MainLayoutContainer>{children}</MainLayoutContainer>
-              </StoreLanguageProvider>
-            </SnackbarProvider>
-          </ThemeProvider>
-        </QueryClientProvider>
+        <GoogleOAuthProvider clientId={clientId}>
+          <QueryClientProvider client={queryClient}>
+            <ReactQueryDevtools initialIsOpen={false} />
+            <Providers>
+              <ThemeProvider>
+                <SnackbarProvider maxSnack={3}>
+                  <StoreLanguageProvider>
+                    <MainLayoutContainer>{children}</MainLayoutContainer>
+                  </StoreLanguageProvider>
+                </SnackbarProvider>
+              </ThemeProvider>
+            </Providers>
+          </QueryClientProvider>
+        </GoogleOAuthProvider>
       </body>
     </html>
   );

src/app/[language]/login/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
-import { getServerTranslation } from "@/services/i18n";
+
 import LoginPage from "@/features/LoginPage";
+import { getServerTranslation } from "@/services/i18n";
 
 type Props = {
   params: { language: string };

src/app/[language]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
-import { getServerTranslation } from "@/services/i18n";
+
 import HomePage from "@/features/HomePage";
+import { getServerTranslation } from "@/services/i18n";
 
 type Props = {
   params: { language: string };