feat: establish TypeScript-aware frontend tooling

eslint.config.js

@@ -1,6 +1,10 @@
+import babelParser from "@babel/eslint-parser";
 import eslint from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
 import globals from "globals";
 
+const sourceExtensions = "{js,jsx,mjs,ts,tsx,mts}";
+
 const layerPatterns = {
   domain: [
     "**/application/**",
@@ -27,6 +31,38 @@ function restrictedImports(patterns) {
   return ["error", { patterns }];
 }
 
+const commonLanguageOptions = {
+  ecmaVersion: "latest",
+  sourceType: "module",
+  globals: {
+    ...globals.browser,
+    ...globals.node,
+  },
+};
+
+const commonSecurityRules = {
+  "no-eval": "error",
+  "no-new-func": "error",
+  "no-script-url": "error",
+  "no-restricted-syntax": [
+    "error",
+    {
+      selector: "JSXAttribute[name.name='dangerouslySetInnerHTML']",
+      message: "Raw HTML injection is prohibited by FE-OC-019.",
+    },
+    {
+      selector:
+        "CallExpression[callee.object.name='document'][callee.property.name='createElement'][arguments.0.value='script']",
+      message: "Runtime script construction is prohibited by FE-OC-019.",
+    },
+  ],
+};
+
+const hookRules = {
+  "react-hooks/rules-of-hooks": "error",
+  "react-hooks/exhaustive-deps": "error",
+};
+
 export default [
   {
     ignores: [
@@ -40,47 +76,103 @@ export default [
   },
   eslint.configs.recommended,
   {
-    files: ["**/*.{js,jsx,mjs}"],
+    files: [`**/*.${sourceExtensions}`],
     languageOptions: {
-      ecmaVersion: "latest",
-      sourceType: "module",
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-      },
+      ...commonLanguageOptions,
       parserOptions: {
         ecmaFeatures: { jsx: true },
       },
     },
+    plugins: {
+      "react-hooks": reactHooks,
+    },
+    rules: {
+      ...commonSecurityRules,
+      ...hookRules,
+    },
   },
   {
-    files: ["src/domain/**/*.{js,jsx}"],
+    files: ["**/*.{ts,mts}"],
+    languageOptions: {
+      ...commonLanguageOptions,
+      parser: babelParser,
+      parserOptions: {
+        requireConfigFile: false,
+        babelOptions: {
+          plugins: [
+            ["@babel/plugin-syntax-typescript", { isTSX: false }],
+          ],
+        },
+      },
+    },
+    rules: {
+      "no-undef": "off",
+      "no-unused-vars": "off",
+    },
+  },
+  {
+    files: ["**/*.tsx"],
+    languageOptions: {
+      ...commonLanguageOptions,
+      parser: babelParser,
+      parserOptions: {
+        requireConfigFile: false,
+        babelOptions: {
+          plugins: [
+            [
+              "@babel/plugin-syntax-typescript",
+              { allExtensions: true, isTSX: true },
+            ],
+            "@babel/plugin-syntax-jsx",
+          ],
+        },
+      },
+    },
+    rules: {
+      "no-undef": "off",
+      "no-unused-vars": "off",
+    },
+  },
+  {
+    files: [`src/domain/**/*.${sourceExtensions}`],
     rules: {
       "no-restricted-imports": restrictedImports(layerPatterns.domain),
-      "no-restricted-globals": ["error", "window", "document", "localStorage", "fetch"],
+      "no-restricted-globals": [
+        "error",
+        "window",
+        "document",
+        "localStorage",
+        "fetch",
+      ],
     },
   },
   {
-    files: ["src/application/**/*.{js,jsx}"],
+    files: [`src/application/**/*.${sourceExtensions}`],
     rules: {
       "no-restricted-imports": restrictedImports(layerPatterns.application),
-      "no-restricted-globals": ["error", "window", "document", "localStorage", "fetch"],
+      "no-restricted-globals": [
+        "error",
+        "window",
+        "document",
+        "localStorage",
+        "fetch",
+      ],
     },
   },
   {
-    files: ["src/presentation/**/*.{js,jsx}"],
+    files: [`src/presentation/**/*.${sourceExtensions}`],
     rules: {
       "no-restricted-imports": restrictedImports(layerPatterns.presentation),
     },
   },
   {
-    files: ["src/adapters/**/*.{js,jsx}"],
+    files: [`src/adapters/**/*.${sourceExtensions}`],
     rules: {
       "no-restricted-imports": restrictedImports(layerPatterns.adapters),
     },
   },
   {
-    files: ["tests/**/*.{js,jsx}"],
+    files: [`tests/**/*.${sourceExtensions}`],
     languageOptions: {
       globals: {
         ...globals.browser,
@@ -89,7 +181,9 @@ export default [
     },
   },
   {
-    files: ["tests/fixtures/architecture/forbidden/**/*.{js,jsx}"],
+    files: [
+      `tests/fixtures/architecture/forbidden/**/*.${sourceExtensions}`,
+    ],
     rules: {
       "no-restricted-imports": restrictedImports([
         "**/adapters/**",
@@ -99,24 +193,4 @@ export default [
       ]),
     },
   },
-  {
-    files: ["**/*.{js,jsx}"],
-    rules: {
-      "no-eval": "error",
-      "no-new-func": "error",
-      "no-script-url": "error",
-      "no-restricted-syntax": [
-        "error",
-        {
-          selector: "JSXAttribute[name.name='dangerouslySetInnerHTML']",
-          message: "Raw HTML injection is prohibited by FE-OC-019.",
-        },
-        {
-          selector:
-            "CallExpression[callee.object.name='document'][callee.property.name='createElement'][arguments.0.value='script']",
-          message: "Runtime script construction is prohibited by FE-OC-019.",
-        },
-      ],
-    },
-  },
 ];