refactor: added tseslint config and added some typescript

eslint.config.js

@@ -1,9 +1,11 @@
 import babelParser from '@babel/eslint-parser';
 import js from '@eslint/js';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import globals from 'globals';
+import tseslint from 'typescript-eslint';
 
 export default [
   js.configs.recommended,
@@ -48,4 +50,28 @@ export default [
       'react-refresh/only-export-components': ['off'],
     },
   },
+  ...tseslint.configs.recommendedTypeChecked.map((config) => ({
+    ...config,
+    files: ['src/**/*.{ts,tsx}'], // We use TS config only for TS files
+  })),
+  {
+    files: ['src/**/*.{ts,tsx}'],
+
+    // This is required, see the docs
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.app.json',
+      },
+    },
+
+    // This is needed in order to specify the desired behavior for its rules
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+    },
+
+    // After defining the plugin, you can use the rules like this
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'error',
+    },
+  },
 ];

package.json

@@ -91,10 +91,22 @@
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/enzyme": "^3.10.18",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/lodash.find": "^4.6.9",
+    "@types/lodash.get": "^4.4.9",
+    "@types/lodash.maxby": "^4.6.9",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/lodash.sortby": "^4.7.9",
+    "@types/lodash.takeright": "^4.1.9",
+    "@types/lodash.takewhile": "^4.6.9",
+    "@types/lodash.uniq": "^4.5.9",
     "@types/node": "^22.7.3",
     "@types/react": "^18.2.9",
     "@types/react-dom": "^18.2.0",
+    "@types/react-redux": "^7.1.34",
     "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^2.0.0",
     "bootstrap-sass": "3.4.1",
@@ -103,8 +115,8 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^9.15.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
     "font-awesome": "4.7.0",
     "globals": "^15.12.0",
     "husky": "^9.1.7",
@@ -119,9 +131,10 @@
     "sass": "1.32.13",
     "shx": "^0.3.3",
     "typescript": "^5.7.2",
-    "vite": "^5.0.8",
+    "typescript-eslint": "^8.10.0",
+    "vite": "^5.4.9",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.0.0"
+    "vitest": "^2.1.2"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

src/forms/controls/generic-option.tsx

@@ -0,0 +1,19 @@
+interface GenericOptionProps {
+  value: string;
+  children: string;
+  className?: string;
+}
+
+function GenericOption({
+  value,
+  children,
+  className = '',
+}: Readonly<GenericOptionProps>) {
+  return (
+    <div data-value={value} className={className}>
+      {children}
+    </div>
+  );
+}
+
+export default GenericOption;

tests/setup.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});

vite.config.ts

@@ -1,10 +1,8 @@
 import react from '@vitejs/plugin-react';
-import { resolve } from 'node:path';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import { defineConfig } from 'vitest/config';
 
 // https://vite.dev/config/
-export default defineConfig({
+export default {
   plugins: [
     react(),
     tsconfigPaths({
@@ -13,16 +11,4 @@ export default defineConfig({
       ],
     }),
   ],
-  define: {
-    global: 'window',
-  },
-  test: {
-    include: ['**/*.spec.jsx'],
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['./src/setupTests.ts'],
-    coverage: {
-      reporter: ['text', 'lcov'],
-    },
-  },
-});
+};

vitest.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+
+import viteConfig from './vite.config';
+
+// https://vitest.dev/config/file.html
+export default defineConfig(
+  mergeConfig(
+    viteConfig,
+    defineConfig({
+      test: {
+        globals: true,
+        environment: 'jsdom',
+        include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+        setupFiles: ['tests/setup.ts', 'tests/setupEnzyme.ts'],
+        coverage: {
+          reporter: ['text', 'lcov'],
+        },
+      },
+    }),
+  ),
+);