Update eslint configuration and fix errors

Add remix-development-tools integration

.eslintrc.cjs

@@ -1,4 +1,80 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-    extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node", "prettier"],
+    root: true,
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    env: {
+        browser: true,
+        commonjs: true,
+        es6: true,
+    },
+    ignorePatterns: ["!**/.server", "!**/.client"],
+
+    // Base config
+    extends: ["eslint:recommended", "prettier"],
+
+    overrides: [
+        // React
+        {
+            files: ["**/*.{js,jsx,ts,tsx}"],
+            plugins: ["react", "jsx-a11y"],
+            extends: [
+                "plugin:react/recommended",
+                "plugin:react/jsx-runtime",
+                "plugin:react-hooks/recommended",
+                "plugin:jsx-a11y/recommended",
+            ],
+            settings: {
+                "react": {
+                    version: "detect",
+                },
+                "formComponents": ["Form"],
+                "linkComponents": [
+                    { name: "Link", linkAttribute: "to" },
+                    { name: "NavLink", linkAttribute: "to" },
+                ],
+                "import/resolver": {
+                    typescript: {},
+                },
+            },
+        },
+
+        // Typescript
+        {
+            files: ["**/*.{ts,tsx}"],
+            plugins: ["@typescript-eslint", "import"],
+            parser: "@typescript-eslint/parser",
+            settings: {
+                "import/internal-regex": "^~/",
+                "import/resolver": {
+                    node: {
+                        extensions: [".ts", ".tsx"],
+                    },
+                    typescript: {
+                        alwaysTryTypes: true,
+                    },
+                },
+            },
+            extends: ["plugin:@typescript-eslint/recommended", "plugin:import/recommended", "plugin:import/typescript"],
+        },
+
+        // Node
+        {
+            files: [".eslintrc.cjs"],
+            env: {
+                node: true,
+            },
+        },
+    ],
 };

app/clients/grpc.server.ts

@@ -9,17 +9,10 @@ import { StateStoreService } from "@proto/state/v1beta/store_connect";
 
 invariant(process.env.GOMMERCE_GRPC_ENDPOINT, "environment variable GOMMERCE_GRPC_ENDPOINT is required.");
 
-declare global {
-    namespace NodeJS {
-        interface ProcessEnv {
-            GOMMERCE_GRPC_ENDPOINT: string;
-        }
-    }
-}
-
+export const endpoint = process.env.GOMMERCE_GRPC_ENDPOINT;
 export const transport = singleton("grpc_transport", () => {
     return createGrpcTransport({
-        baseUrl: process.env.GOMMERCE_GRPC_ENDPOINT,
+        baseUrl: endpoint,
         useBinaryFormat: true,
         httpVersion: "2",
         interceptors: [],

app/partials/layout.tsx

@@ -49,6 +49,7 @@ export default function Frame(props: { context?: unknown }) {
                             <IconChevronDown size="1em" />
                         </div>
                         <ul
+                            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                             tabIndex={0}
                             className="menu dropdown-content w-52 rounded-box border border-base-content/5 bg-base-100 bg-opacity-95 shadow-2xl"
                         >
@@ -62,7 +63,11 @@ export default function Frame(props: { context?: unknown }) {
                                 <Form action="/logout" method="post" className="hidden">
                                     <input id="navbar-logout-submit" type="submit" />
                                 </Form>
-                                <label htmlFor="navbar-logout-submit" role="button">
+                                <label
+                                    htmlFor="navbar-logout-submit"
+                                    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+                                    role="button"
+                                >
                                     <IconLogout size="1em" />
                                     Logout
                                 </label>

app/secure.server.ts

@@ -66,7 +66,7 @@ export const LoginForm = z.object({
 
 export type LoginFormType = z.infer<typeof LoginForm>;
 
-export async function login(request: Request, redirectTo: string = "/") {
+export async function login(request: Request, redirectTo = "/") {
     const formData = await request.formData();
     const { username, password } = LoginForm.parse(Object.fromEntries(formData));
     const { accessToken, refreshToken, expiresIn } = await tokens.createToken(
@@ -90,7 +90,7 @@ export async function login(request: Request, redirectTo: string = "/") {
     return redirect(redirectTo, { headers });
 }
 
-export async function logout(request: Request, redirectTo: string = "/") {
+export async function logout(request: Request, redirectTo = "/") {
     const session = await getSession(request.headers.get("Cookie"));
     session.unset("refresh_token");
     const headers = new Headers();

app/singleton.server.ts

@@ -1,4 +1,5 @@
 declare global {
+    // eslint-disable-next-line no-var
     var __singletons__: {
         [name: string]: unknown;
     };

app/utils/forms.ts

@@ -6,10 +6,12 @@ import { BadRequest } from "@proto/rpc/error_details_pb";
 type validateError<T> = {
     formErrors: string[];
     fieldErrors: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         [P in T extends any ? keyof T : never]?: string[];
     };
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function parseError<F = any>(error: ZodError<F> | ConnectError): validateError<F> | null {
     if (error instanceof ZodError) {
         return error.flatten<string>();
@@ -19,6 +21,7 @@ export function parseError<F = any>(error: ZodError<F> | ConnectError): validate
         const br = error.findDetails(BadRequest);
         if (br && br.length > 0) {
             return br[0].fieldViolations.reduce((acc, cur) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const field = cur.field as F extends any ? keyof F : never;
                 if (field) {
                     acc.fieldErrors[field] ??= [];

package.json

@@ -31,7 +31,6 @@
   },
   "devDependencies": {
     "@remix-run/dev": "~2.8.1",
-    "@remix-run/eslint-config": "~2.8.1",
     "@tailwindcss/typography": "~0.5.12",
     "@types/react": "~18.2.73",
     "@types/react-dom": "~18.2.23",
@@ -40,11 +39,18 @@
     "daisyui": "~4.9.0",
     "eslint": "~8.57.0",
     "eslint-config-prettier": "~9.1.0",
+    "eslint-import-resolver-typescript": "~3.6.1",
+    "eslint-plugin-import": "~2.29.1",
+    "eslint-plugin-jsx-a11y": "~6.8.0",
+    "eslint-plugin-react": "~7.34.1",
+    "eslint-plugin-react-hooks": "~4.6.0",
     "postcss": "~8.4.38",
     "prettier": "~3.2.5",
     "prettier-plugin-tailwindcss": "~0.5.13",
+    "remix-development-tools": "~4.1.4",
     "tailwindcss": "~3.4.3",
     "typescript": "~5.4.3",
+    "typescript-eslint": "~7.4.0",
     "vite-tsconfig-paths": "~4.3.2"
   },
   "engines": {