LLM-powered Vite & React upgrade

eslint.config.mjs

@@ -0,0 +1,138 @@
+/*
+ * Copyright 2025 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { fixupPluginRules } from '@eslint/compat';
+import js from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import notice from 'eslint-plugin-notice';
+import pluginPromise from 'eslint-plugin-promise';
+import react from 'eslint-plugin-react';
+import hooksPlugin from 'eslint-plugin-react-hooks';
+import testingLibrary from 'eslint-plugin-testing-library';
+import vitest from 'eslint-plugin-vitest';
+import path from 'path';
+import ts from 'typescript-eslint';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default ts.config(
+  {
+    ignores: [
+      '**/build/**',
+      '**/coverage/**',
+      '**/i18next-parser.config.js',
+      '**/*test.ts.snap',
+      'scripts/prepack.js',
+      'scripts/postpack.js',
+      'scripts/publishAllPackages.js',
+    ],
+  },
+  {
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  pluginPromise.configs['flat/recommended'],
+  {
+    plugins: {
+      notice,
+    },
+    rules: {
+      'notice/notice': [
+        'error',
+        {
+          templateFile: path.resolve(__dirname, './scripts/license-header.txt'),
+          onNonMatchingHeader: 'replace',
+          templateVars: { NAME: 'Nordeck IT + Consulting GmbH' },
+          varRegexps: { NAME: /.+/ },
+        },
+      ],
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'react-dom/test-utils',
+              importNames: ['act'],
+              message: 'Please import "act" from "react" instead',
+            },
+          ],
+        },
+      ],
+      // Disable for the migration to prevent a lot of errors.
+      // Should be revisisted
+      '@typescript-eslint/ban-types': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      // Allow unused vars starting with _
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+  {
+    ...react.configs.flat.recommended,
+    plugins: {
+      ...react.configs.flat.recommended.plugins,
+      'react-hooks': fixupPluginRules(hooksPlugin),
+    },
+    rules: {
+      ...hooksPlugin.configs.recommended.rules,
+      ...react.configs.flat.recommended.rules,
+      'react/display-name': 'off',
+      'react/no-unescaped-entities': 'off',
+      // Disabled to avoid weird error messages
+      // https://github.com/jsx-eslint/eslint-plugin-react/issues?q=is%3Aissue+is%3Aopen+forwardRef
+      'react/prop-types': 'off',
+      // Disabled because it would conflict with removing unused imports
+      'react/react-in-jsx-scope': 'off',
+    },
+  },
+  // Test-specific configuration
+  {
+    files: ['**/*.test.*'],
+    plugins: {
+      // See https://github.com/testing-library/eslint-plugin-testing-library/issues/899#issuecomment-2121272355 and
+      // https://github.com/testing-library/eslint-plugin-testing-library/issues/924
+      'testing-library': fixupPluginRules({
+        rules: testingLibrary.rules,
+      }),
+      vitest,
+    },
+    rules: {
+      ...testingLibrary.configs['flat/react'].rules,
+      ...vitest.configs.recommended.rules,
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      'react/display-name': 'off',
+    },
+  },
+  eslintConfigPrettier,
+);

i18next-parser.config.js

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
-module.exports = {
+const i18NextParserConfig = {
   locales: ['en', 'de'],
   output: 'public/locales/$LOCALE/$NAMESPACE.json',
   sort: true,
   resetDefaultValueLocale: 'en',
 };
+
+export default i18NextParserConfig;

index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="A widget for organizing barcamps in matrix chat rooms"
+    />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Matrix BarCamp Widget</title>
+
+    <!--#echo var="__INJECT_SCRIPT_TAG__" encoding="none"-->
+
+    <script nonce='<!--#echo var="cspNonce"-->'>
+      __webpack_nonce__ = '<!--#echo var="cspNonce"-->';
+      // Set global for compatibility reason.
+      // globalThis ?? window is required to make with work in  all environments (dev / prod).
+      global = globalThis ?? window;
+    </script>
+
+    <script nonce='<!--#echo var="cspNonce"-->' type="module">
+      // Copy environment variables to process.env for backward compatibility with CRA.
+      window.process = window.process ?? {};
+      window.process.env = import.meta.env;
+    </script>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package.json

@@ -5,47 +5,57 @@
   "license": "Apache-2.0",
   "version": "1.2.0",
   "private": true,
+  "type": "module",
   "dependencies": {
-    "@matrix-widget-toolkit/api": "^3.2.2",
-    "@matrix-widget-toolkit/react": "^1.0.6",
-    "@matrix-widget-toolkit/semantic-ui": "^1.0.8",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.0",
+    "@matrix-widget-toolkit/api": "^5.0.2",
+    "@matrix-widget-toolkit/mui": "^2.2.0",
+    "@matrix-widget-toolkit/react": "^2.1.0",
     "@react-hookz/web": "^14.2.2",
-    "@reduxjs/toolkit": "^1.9.3",
+    "@reduxjs/toolkit": "^2.6.0",
+    "@vitejs/plugin-basic-ssl": "^2.1.0",
+    "@vitejs/plugin-react-swc": "^4.0.1",
     "cross-fetch": "^4.0.0",
     "i18next": "^23.7.11",
+    "i18next-browser-languagedetector": "^8.2.0",
     "i18next-chained-backend": "^4.6.2",
-    "i18next-http-backend": "^2.4.2",
+    "i18next-http-backend": "^2.7.3",
     "immer": "^9.0.19",
     "joi": "^17.12.1",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
     "luxon": "^3.3.0",
     "matrix-widget-api": "^1.1.1",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-focus-lock": "^2.9.6",
     "react-focus-on": "^3.9.1",
-    "react-redux": "^8.0.5",
+    "react-is": "^18.3.0",
+    "react-redux": "^9.2.0",
     "react-use": "^17.5.0",
     "rfc4648": "^1.5.3",
-    "rxjs": "^7.8.0",
-    "semantic-ui-react": "^2.1.5",
+    "rxjs": "^7.8.2",
     "styled-components": "^5.3.6"
   },
   "engines": {
     "node": ">=20.0.0",
     "yarn": ">=1.22.1 <2.0.0"
   },
   "scripts": {
-    "start": "cross-env HTTPS=true BROWSER=none WDS_SOCKET_PORT=0 craco start",
-    "dev": "cross-env BROWSER=none ESLINT_NO_DEV_ERRORS=true TSC_COMPILE_ON_ERROR=true WDS_SOCKET_PORT=0 craco start",
-    "build": "cross-env GENERATE_SOURCEMAP=false INLINE_RUNTIME_CHUNK=false craco build",
-    "lint": "eslint . --max-warnings=0",
-    "test": "craco test",
-    "test:all": "craco test --coverage --watchAll=false",
+    "dev": "vite",
+    "dev:https": "VITE_DEV_SSL=true vite",
+    "preview": "vite preview",
+    "preview:https": "VITE_DEV_SSL=true vite preview",
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "test:all": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "tsc": "tsc --noEmit",
     "deduplicate": "yarn-deduplicate",
-    "depcheck": "depcheck --ignores=@types/jest,@types/node,prettier-plugin-organize-imports,typescript,i18next-parser,@changesets/cli",
+    "depcheck": "depcheck --ignores=@types/node,@vitest/coverage-v8,@types/node,prettier-plugin-organize-imports,typescript,i18next-parser,@changesets/cli,vitest,@vitest/ui,jsdom",
     "translate": "i18next \"src/**/*.{ts,tsx}\"",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write .",
@@ -86,23 +96,27 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.6.0",
     "@changesets/cli": "^2.27.1",
-    "@craco/craco": "^7.1.0",
-    "@matrix-widget-toolkit/testing": "^2.3.2",
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.37.0",
+    "@matrix-widget-toolkit/testing": "^3.0.0",
     "@playwright/test": "^1.30.0",
-    "@semantic-ui-react/craco-less": "^3.0.0",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.202",
     "@types/luxon": "^3.2.0",
     "@types/node": "^20.11.1",
-    "@types/react": "^17.0.52",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^17.0.18",
+    "@types/react": "^18.3.12",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-dom": "^18.3.1",
     "@types/react-i18next": "^8.1.0",
+    "@types/react-redux": "^7.1.34",
     "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^5.0.2",
+    "@vitest/ui": "^3.2.4",
     "cross-env": "^7.0.3",
     "depcheck": "^1.4.7",
     "eslint": "^8.55.0",
@@ -111,16 +125,28 @@
     "eslint-plugin-notice": "^0.9.10",
     "eslint-plugin-playwright": "^0.12.0",
     "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-testing-library": "^7.13.3",
+    "eslint-plugin-vitest": "^0.5.4",
+    "happy-dom": "^19.0.2",
     "husky": "^9.1.6",
-    "i18next-parser": "8.12.0",
+    "i18next-parser": "^9.3.0",
+    "jsdom": "^26.1.0",
     "lint-staged": "^15.2.0",
     "nanoid": "^3.3.4",
     "prettier": "^2.8.4",
     "prettier-plugin-organize-imports": "^3.2.4",
     "react-i18next": "^12.1.4",
-    "react-scripts": "5.0.1",
     "testcontainers": "^10.5.0",
-    "typescript": "~4.6.4",
+    "typescript": "5.7.3",
+    "typescript-eslint": "^8.46.1",
+    "vite": "^7.1.4",
+    "vite-plugin-checker": "^0.10.3",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4",
     "yarn-deduplicate": "^6.0.2"
-  }
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }