chore: migrate React components to TypeScript (#82)

eslint.config.mjs

@@ -4,6 +4,8 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import js from '@eslint/js';
 import { FlatCompat } from '@eslint/eslintrc';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -17,7 +19,8 @@ export default [
   ...compat.extends(
     'eslint:recommended',
     'plugin:react/recommended',
-    'plugin:jasmine/recommended'
+    'plugin:jasmine/recommended',
+    'plugin:@typescript-eslint/recommended'
   ),
   {
     ignores: [
@@ -27,9 +30,10 @@ export default [
     ],
   },
   {
-    files: ['**/*.{js,jsx,mjs}'],
+    files: ['**/*.{js,jsx,mjs,ts,tsx}'],
     plugins: {
       jasmine,
+      '@typescript-eslint': tseslint,
     },
 
     settings: {
@@ -39,6 +43,7 @@ export default [
     },
 
     languageOptions: {
+      parser: tsparser,
       globals: {
         ...globals.browser,
         ...globals.jasmine,
@@ -47,10 +52,8 @@ export default [
         SharedArrayBuffer: 'readonly',
         React: 'readonly',
       },
-
       ecmaVersion: 'latest',
       sourceType: 'module',
-
       parserOptions: {
         ecmaFeatures: {
           jsx: true,
@@ -60,6 +63,8 @@ export default [
 
     rules: {
       'react/prop-types': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
     },
   }
 ];

package.json

@@ -12,13 +12,19 @@
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.23.3",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.14.0",
+    "@types/chrome": "^0.0.260",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "babel-loader": "^9.2.1",
     "classnames": "^2.5.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
-    "eslint": "^9.14.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-jasmine": "^4.2.2",
     "eslint-plugin-react": "^7.37.2",
     "globals": "^15.12.0",
@@ -32,6 +38,7 @@
     "sass": "^1.81.0",
     "sass-loader": "^16.0.3",
     "style-loader": "^0.23.1",
+    "typescript": "^5.3.3",
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-merge": "^6.0.1"

src/assets/js/components/popup-spinner.jsx → src/assets/js/components/popup-spinner.tsx

@@ -1,4 +1,4 @@
-export const PopupSpinner = () => {
+export const PopupSpinner: React.FC = () => {
   return (
     <div
       className="page"
@@ -14,5 +14,4 @@ export const PopupSpinner = () => {
       </div>
     </div>
   );
-};
-
+};