chore: PiT - Update to Vaadin v24

.gitignore

@@ -9,7 +9,7 @@
 
 # The following files are generated/updated by vaadin-maven-plugin
 node_modules/
-frontend/generated/
+src/main/frontend/generated/
 pnpmfile.js
 vite.generated.ts
 

package.json

@@ -3,248 +3,103 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@polymer/polymer": "3.5.1",
-    "@vaadin/a11y-base": "24.3.13",
-    "@vaadin/accordion": "24.3.13",
-    "@vaadin/app-layout": "24.3.13",
-    "@vaadin/avatar": "24.3.13",
-    "@vaadin/avatar-group": "24.3.13",
-    "@vaadin/bundles": "24.3.13",
-    "@vaadin/button": "24.3.13",
-    "@vaadin/checkbox": "24.3.13",
-    "@vaadin/checkbox-group": "24.3.13",
-    "@vaadin/combo-box": "24.3.13",
+    "@vaadin/bundles": "24.4.0",
     "@vaadin/common-frontend": "0.0.19",
-    "@vaadin/component-base": "24.3.13",
-    "@vaadin/confirm-dialog": "24.3.13",
-    "@vaadin/context-menu": "24.3.13",
-    "@vaadin/custom-field": "24.3.13",
-    "@vaadin/date-picker": "24.3.13",
-    "@vaadin/date-time-picker": "24.3.13",
-    "@vaadin/details": "24.3.13",
-    "@vaadin/dialog": "24.3.13",
-    "@vaadin/email-field": "24.3.13",
-    "@vaadin/field-base": "24.3.13",
-    "@vaadin/field-highlighter": "24.3.13",
-    "@vaadin/form-layout": "24.3.13",
-    "@vaadin/grid": "24.3.13",
-    "@vaadin/horizontal-layout": "24.3.13",
-    "@vaadin/icon": "24.3.13",
-    "@vaadin/icons": "24.3.13",
-    "@vaadin/input-container": "24.3.13",
-    "@vaadin/integer-field": "24.3.13",
-    "@vaadin/item": "24.3.13",
-    "@vaadin/list-box": "24.3.13",
-    "@vaadin/lit-renderer": "24.3.13",
-    "@vaadin/login": "24.3.13",
-    "@vaadin/menu-bar": "24.3.13",
-    "@vaadin/message-input": "24.3.13",
-    "@vaadin/message-list": "24.3.13",
-    "@vaadin/multi-select-combo-box": "24.3.13",
-    "@vaadin/notification": "24.3.13",
-    "@vaadin/number-field": "24.3.13",
-    "@vaadin/overlay": "24.3.13",
-    "@vaadin/password-field": "24.3.13",
-    "@vaadin/polymer-legacy-adapter": "24.3.13",
-    "@vaadin/progress-bar": "24.3.13",
-    "@vaadin/radio-group": "24.3.13",
+    "@vaadin/polymer-legacy-adapter": "24.4.0",
+    "@vaadin/react-components": "24.4.0",
     "@vaadin/router": "1.7.5",
-    "@vaadin/scroller": "24.3.13",
-    "@vaadin/select": "24.3.13",
-    "@vaadin/side-nav": "24.3.13",
-    "@vaadin/split-layout": "24.3.13",
-    "@vaadin/tabs": "24.3.13",
-    "@vaadin/tabsheet": "24.3.13",
-    "@vaadin/text-area": "24.3.13",
-    "@vaadin/text-field": "24.3.13",
-    "@vaadin/time-picker": "24.3.13",
-    "@vaadin/tooltip": "24.3.13",
-    "@vaadin/upload": "24.3.13",
     "@vaadin/vaadin-development-mode-detector": "2.0.7",
-    "@vaadin/vaadin-lumo-styles": "24.3.13",
-    "@vaadin/vaadin-material-styles": "24.3.13",
-    "@vaadin/vaadin-themable-mixin": "24.3.13",
+    "@vaadin/vaadin-lumo-styles": "24.4.0",
+    "@vaadin/vaadin-material-styles": "24.4.0",
+    "@vaadin/vaadin-themable-mixin": "24.4.0",
     "@vaadin/vaadin-usage-statistics": "2.1.2",
-    "@vaadin/vertical-layout": "24.3.13",
-    "@vaadin/virtual-list": "24.3.13",
     "construct-style-sheets-polyfill": "3.1.0",
     "date-fns": "2.29.3",
-    "lit": "3.1.2"
+    "lit": "3.1.4",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "6.23.1"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "5.0.5",
+    "@babel/preset-react": "7.24.7",
+    "@rollup/plugin-replace": "5.0.7",
     "@rollup/pluginutils": "5.1.0",
-    "@vitejs/plugin-react": "4.2.1",
-    "@vitejs/plugin-react-swc": "3.5.0",
-    "async": "3.2.4",
-    "glob": "10.3.3",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "async": "3.2.5",
+    "glob": "10.4.1",
     "rollup-plugin-brotli": "3.1.0",
     "rollup-plugin-visualizer": "5.12.0",
     "strip-css-comments": "5.0.0",
     "transform-ast": "2.4.4",
-    "typescript": "5.3.3",
-    "vite": "5.1.7",
+    "typescript": "5.4.5",
+    "vite": "5.2.13",
     "vite-plugin-checker": "0.6.4",
-    "workbox-build": "7.0.0",
-    "workbox-core": "7.0.0",
-    "workbox-precaching": "7.0.0"
+    "workbox-build": "7.1.1",
+    "workbox-core": "7.1.0",
+    "workbox-precaching": "7.1.0"
   },
   "vaadin": {
     "dependencies": {
       "@polymer/polymer": "3.5.1",
-      "@vaadin/a11y-base": "24.3.13",
-      "@vaadin/accordion": "24.3.13",
-      "@vaadin/app-layout": "24.3.13",
-      "@vaadin/avatar": "24.3.13",
-      "@vaadin/avatar-group": "24.3.13",
-      "@vaadin/bundles": "24.3.13",
-      "@vaadin/button": "24.3.13",
-      "@vaadin/checkbox": "24.3.13",
-      "@vaadin/checkbox-group": "24.3.13",
-      "@vaadin/combo-box": "24.3.13",
+      "@vaadin/bundles": "24.4.0",
       "@vaadin/common-frontend": "0.0.19",
-      "@vaadin/component-base": "24.3.13",
-      "@vaadin/confirm-dialog": "24.3.13",
-      "@vaadin/context-menu": "24.3.13",
-      "@vaadin/custom-field": "24.3.13",
-      "@vaadin/date-picker": "24.3.13",
-      "@vaadin/date-time-picker": "24.3.13",
-      "@vaadin/details": "24.3.13",
-      "@vaadin/dialog": "24.3.13",
-      "@vaadin/email-field": "24.3.13",
-      "@vaadin/field-base": "24.3.13",
-      "@vaadin/field-highlighter": "24.3.13",
-      "@vaadin/form-layout": "24.3.13",
-      "@vaadin/grid": "24.3.13",
-      "@vaadin/horizontal-layout": "24.3.13",
-      "@vaadin/icon": "24.3.13",
-      "@vaadin/icons": "24.3.13",
-      "@vaadin/input-container": "24.3.13",
-      "@vaadin/integer-field": "24.3.13",
-      "@vaadin/item": "24.3.13",
-      "@vaadin/list-box": "24.3.13",
-      "@vaadin/lit-renderer": "24.3.13",
-      "@vaadin/login": "24.3.13",
-      "@vaadin/menu-bar": "24.3.13",
-      "@vaadin/message-input": "24.3.13",
-      "@vaadin/message-list": "24.3.13",
-      "@vaadin/multi-select-combo-box": "24.3.13",
-      "@vaadin/notification": "24.3.13",
-      "@vaadin/number-field": "24.3.13",
-      "@vaadin/overlay": "24.3.13",
-      "@vaadin/password-field": "24.3.13",
-      "@vaadin/polymer-legacy-adapter": "24.3.13",
-      "@vaadin/progress-bar": "24.3.13",
-      "@vaadin/radio-group": "24.3.13",
+      "@vaadin/polymer-legacy-adapter": "24.4.0",
+      "@vaadin/react-components": "24.4.0",
       "@vaadin/router": "1.7.5",
-      "@vaadin/scroller": "24.3.13",
-      "@vaadin/select": "24.3.13",
-      "@vaadin/side-nav": "24.3.13",
-      "@vaadin/split-layout": "24.3.13",
-      "@vaadin/tabs": "24.3.13",
-      "@vaadin/tabsheet": "24.3.13",
-      "@vaadin/text-area": "24.3.13",
-      "@vaadin/text-field": "24.3.13",
-      "@vaadin/time-picker": "24.3.13",
-      "@vaadin/tooltip": "24.3.13",
-      "@vaadin/upload": "24.3.13",
       "@vaadin/vaadin-development-mode-detector": "2.0.7",
-      "@vaadin/vaadin-lumo-styles": "24.3.13",
-      "@vaadin/vaadin-material-styles": "24.3.13",
-      "@vaadin/vaadin-themable-mixin": "24.3.13",
+      "@vaadin/vaadin-lumo-styles": "24.4.0",
+      "@vaadin/vaadin-material-styles": "24.4.0",
+      "@vaadin/vaadin-themable-mixin": "24.4.0",
       "@vaadin/vaadin-usage-statistics": "2.1.2",
-      "@vaadin/vertical-layout": "24.3.13",
-      "@vaadin/virtual-list": "24.3.13",
       "construct-style-sheets-polyfill": "3.1.0",
       "date-fns": "2.29.3",
-      "lit": "3.1.2"
+      "lit": "3.1.4",
+      "react": "18.3.1",
+      "react-dom": "18.3.1",
+      "react-router-dom": "6.23.1"
     },
     "devDependencies": {
-      "@rollup/plugin-replace": "5.0.5",
+      "@babel/preset-react": "7.24.7",
+      "@rollup/plugin-replace": "5.0.7",
       "@rollup/pluginutils": "5.1.0",
-      "@vitejs/plugin-react": "4.2.1",
-      "@vitejs/plugin-react-swc": "3.5.0",
-      "async": "3.2.4",
-      "glob": "10.3.3",
+      "@types/react": "18.3.3",
+      "@types/react-dom": "18.3.0",
+      "@vitejs/plugin-react": "4.3.1",
+      "async": "3.2.5",
+      "glob": "10.4.1",
       "rollup-plugin-brotli": "3.1.0",
       "rollup-plugin-visualizer": "5.12.0",
       "strip-css-comments": "5.0.0",
       "transform-ast": "2.4.4",
-      "typescript": "5.3.3",
-      "vite": "5.1.7",
+      "typescript": "5.4.5",
+      "vite": "5.2.13",
       "vite-plugin-checker": "0.6.4",
-      "workbox-build": "7.0.0",
-      "workbox-core": "7.0.0",
-      "workbox-precaching": "7.0.0"
+      "workbox-build": "7.1.1",
+      "workbox-core": "7.1.0",
+      "workbox-precaching": "7.1.0"
     },
-    "hash": "1b578191af08a883e68dfca9e08ad525b69d9824e0ec3e82a2689cdcf77b5ffe"
+    "hash": "bf7bc0be2bdf72d5f7964d9cc942c98c96eb316cc3c3e8da19d83ded177c4ce7"
   },
   "overrides": {
     "@vaadin/bundles": "$@vaadin/bundles",
-    "@vaadin/accordion": "$@vaadin/accordion",
-    "@vaadin/app-layout": "$@vaadin/app-layout",
-    "@vaadin/avatar": "$@vaadin/avatar",
-    "@vaadin/avatar-group": "$@vaadin/avatar-group",
-    "@vaadin/button": "$@vaadin/button",
-    "@vaadin/checkbox": "$@vaadin/checkbox",
-    "@vaadin/checkbox-group": "$@vaadin/checkbox-group",
-    "@vaadin/combo-box": "$@vaadin/combo-box",
-    "@vaadin/component-base": "$@vaadin/component-base",
-    "@vaadin/context-menu": "$@vaadin/context-menu",
-    "@vaadin/custom-field": "$@vaadin/custom-field",
-    "@vaadin/date-picker": "$@vaadin/date-picker",
-    "@vaadin/date-time-picker": "$@vaadin/date-time-picker",
-    "@vaadin/details": "$@vaadin/details",
-    "@vaadin/dialog": "$@vaadin/dialog",
-    "@vaadin/email-field": "$@vaadin/email-field",
-    "@vaadin/field-base": "$@vaadin/field-base",
-    "@vaadin/field-highlighter": "$@vaadin/field-highlighter",
-    "@vaadin/form-layout": "$@vaadin/form-layout",
-    "@vaadin/grid": "$@vaadin/grid",
-    "@vaadin/horizontal-layout": "$@vaadin/horizontal-layout",
-    "@vaadin/icon": "$@vaadin/icon",
-    "@vaadin/icons": "$@vaadin/icons",
-    "@vaadin/input-container": "$@vaadin/input-container",
-    "@vaadin/integer-field": "$@vaadin/integer-field",
-    "@vaadin/item": "$@vaadin/item",
-    "@vaadin/list-box": "$@vaadin/list-box",
-    "@vaadin/login": "$@vaadin/login",
-    "@vaadin/menu-bar": "$@vaadin/menu-bar",
-    "@vaadin/message-input": "$@vaadin/message-input",
-    "@vaadin/message-list": "$@vaadin/message-list",
-    "@vaadin/notification": "$@vaadin/notification",
-    "@vaadin/number-field": "$@vaadin/number-field",
-    "@vaadin/password-field": "$@vaadin/password-field",
     "@vaadin/polymer-legacy-adapter": "$@vaadin/polymer-legacy-adapter",
-    "@vaadin/progress-bar": "$@vaadin/progress-bar",
-    "@vaadin/radio-group": "$@vaadin/radio-group",
-    "@vaadin/scroller": "$@vaadin/scroller",
-    "@vaadin/select": "$@vaadin/select",
-    "@vaadin/split-layout": "$@vaadin/split-layout",
-    "@vaadin/tabs": "$@vaadin/tabs",
-    "@vaadin/text-area": "$@vaadin/text-area",
-    "@vaadin/text-field": "$@vaadin/text-field",
-    "@vaadin/time-picker": "$@vaadin/time-picker",
-    "@vaadin/upload": "$@vaadin/upload",
     "@vaadin/vaadin-development-mode-detector": "$@vaadin/vaadin-development-mode-detector",
     "@vaadin/vaadin-lumo-styles": "$@vaadin/vaadin-lumo-styles",
     "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles",
     "@vaadin/router": "$@vaadin/router",
     "@vaadin/vaadin-themable-mixin": "$@vaadin/vaadin-themable-mixin",
     "@vaadin/vaadin-usage-statistics": "$@vaadin/vaadin-usage-statistics",
-    "@vaadin/vertical-layout": "$@vaadin/vertical-layout",
-    "@vaadin/virtual-list": "$@vaadin/virtual-list",
     "@vaadin/common-frontend": "$@vaadin/common-frontend",
     "construct-style-sheets-polyfill": "$construct-style-sheets-polyfill",
     "lit": "$lit",
     "@polymer/polymer": "$@polymer/polymer",
     "date-fns": "$date-fns",
-    "@vaadin/lit-renderer": "$@vaadin/lit-renderer",
-    "@vaadin/a11y-base": "$@vaadin/a11y-base",
-    "@vaadin/confirm-dialog": "$@vaadin/confirm-dialog",
-    "@vaadin/multi-select-combo-box": "$@vaadin/multi-select-combo-box",
-    "@vaadin/overlay": "$@vaadin/overlay",
-    "@vaadin/side-nav": "$@vaadin/side-nav",
-    "@vaadin/tabsheet": "$@vaadin/tabsheet",
-    "@vaadin/tooltip": "$@vaadin/tooltip"
-  }
+    "@vaadin/react-components": "$@vaadin/react-components",
+    "react-dom": "$react-dom",
+    "react-router-dom": "$react-router-dom",
+    "react": "$react"
+  },
+  "type": "module"
 }

pom.xml

@@ -17,7 +17,7 @@
         <maven.compiler.target>17</maven.compiler.target>
         <failOnMissingWebXml>false</failOnMissingWebXml>
 
-        <vaadin.version>24.3.13</vaadin.version>
+        <vaadin.version>24.4.1</vaadin.version>
     </properties>
 
     <dependencyManagement>

src/main/frontend/views/README

@@ -0,0 +1 @@
+Place your React views or hand written templates in this folder.

tsconfig.json

@@ -4,7 +4,7 @@
 // You might want to change the configurations to fit your preferences
 // For more information about the configurations, please refer to http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
 {
-  "_version": "9",
+  "_version": "9.1",
   "compilerOptions": {
     "sourceMap": true,
     "jsx": "react-jsx",
@@ -22,18 +22,18 @@
     "noUnusedParameters": false,
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
-    "baseUrl": "frontend",
+    "baseUrl": "src/main/frontend",
     "paths": {
       "@vaadin/flow-frontend": ["generated/jar-resources"],
       "@vaadin/flow-frontend/*": ["generated/jar-resources/*"],
       "Frontend/*": ["*"]
     }
   },
   "include": [
-    "frontend/**/*",
+    "src/main/frontend/**/*",
     "types.d.ts"
   ],
   "exclude": [
-    "frontend/generated/jar-resources/**"
+    "src/main/frontend/generated/jar-resources/**"
   ]
 }

types.d.ts

@@ -3,8 +3,15 @@
 // This is needed for TypeScript compiler to declare and export as a TypeScript module.
 // It is recommended to commit this file to the VCS.
 // You might want to change the configurations to fit your preferences
-declare module '*.css' {
-  import { CSSResultGroup } from 'lit';
+declare module '*.css?inline' {
+  import type { CSSResultGroup } from 'lit';
   const content: CSSResultGroup;
   export default content;
 }
+
+// Allow any CSS Custom Properties
+declare module 'csstype' {
+  interface Properties {
+    [index: `--${string}`]: any;
+  }
+}