Update react monorepo to v19 (major) (#141)

* Update react monorepo to v19
* Fix issues in the build post upgrade of react.

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Gerben Jongerius <g.jongerius@jong-soft.com>

Author: renovate[bot]

package.json

@@ -12,31 +12,31 @@
     "chartjs-adapter-spacetime": "^1.0.1",
     "cra-template": "1.2.0",
     "jwt-decode": "^4.0.0",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-chartjs-2": "^5.3.0",
     "react-datepicker": "^7.5.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.53.1",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "spacetime": "^7.6.2"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.3.0",
-    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/dom": "^10.2.0",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.3.12",
     "@types/jest": "^29.5.14",
-    "typescript-eslint": "8.19.0",
+    "@types/react": "^19.0.0",
     "eslint": "^9.14.0",
     "jest": "^29.7.0",
     "prop-types": "^15.8.1",
     "sass": "^1.83.0",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.3",
+    "typescript-eslint": "8.19.0",
     "web-vitals": "^4.2.4"
   },
   "scripts": {
@@ -61,14 +61,12 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "last 1 version",
+      "> 1%",
+      "not dead"
     ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "last 1 version"
     ]
   },
   "packageManager": "yarn@1.22.22"

src/components/form/input/ToggleInput.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { useInputField } from "./InputGroup";
-import PropTypes from "prop-types";
 
 type ToggleInputProps = {
     id: string,
@@ -35,10 +34,3 @@ export const ToggleInput = (props: ToggleInputProps) => {
         </div>
     )
 }
-ToggleInput.propTypes = {
-    id: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.bool,
-    className: PropTypes.string
-}
-

src/components/layout/card.component.tsx

@@ -15,10 +15,9 @@ type CardProps = Attributes & {
 /**
  * A basic card that has borders, an optional title bar and options to add buttons to the header and footer.
  *
- * @returns {JSX.Element}
  * @constructor
  */
-const Card: FC<CardProps> = ({ title, actions, buttons, children, className = '', message }): JSX.Element => {
+const Card: FC<CardProps> = ({ title, actions, buttons, children, className = '', message }) => {
     const hasHeader = (title || actions || message) !== undefined
 
     return (

src/components/layout/popup/confirm.component.tsx

@@ -24,7 +24,7 @@ const ConfirmComponent = (props: ConfirmProps) => {
     const onCloseClick = () => dialogRef.current?.close()
 
     return <>
-        <Button { ...openButton.props } onClick={ onOpenClick }/>
+        <Button { ...(openButton.props as any) } onClick={ onOpenClick }/>
         <Popup ref={ dialogRef }
                { ...props }
                actions={ [

src/components/layout/popup/dialog.component.tsx

@@ -1,5 +1,5 @@
 import { mdiCancel } from "@mdi/js";
-import { LegacyRef, ReactElement, useEffect, useRef } from "react";
+import {LegacyRef, ReactElement, Ref, useEffect, useRef} from "react";
 import { Button } from "../button";
 
 import Popup, { PopupCallbacks, PopupProps } from "./popup.component";
@@ -13,7 +13,7 @@ type DialogProps = PopupProps & {
 }
 
 export const Dialog = ({ control, openButton, title, actions = [], className = '', children }: DialogProps) => {
-    const dialogRef: LegacyRef<PopupCallbacks> = useRef(null)
+    const dialogRef: Ref<PopupCallbacks> = useRef(null)
 
     useEffect(() => {
         if (control) {
@@ -32,7 +32,7 @@ export const Dialog = ({ control, openButton, title, actions = [], className = '
                                                   icon={ mdiCancel }/>]
 
     return <>
-        { openButton && <Button { ...openButton.props } onClick={ open }/> }
+        { openButton && <Button { ...(openButton.props as any) } onClick={ open }/> }
         <Popup title={ title }
                className={ className }
                ref={ dialogRef }

src/pages/account/default/index.tsx

@@ -1,5 +1,4 @@
 import { mdiDotsVertical, mdiPlus, mdiSquareEditOutline, mdiTrashCanOutline } from "@mdi/js";
-import PropTypes from "prop-types";
 import React, { Attributes, useEffect, useState } from "react";
 import { NavLink, useRouteLoaderData } from "react-router-dom";
 import BalanceComponent from "../../../components/balance.component";
@@ -73,10 +72,6 @@ const AccountRow = ({ account, deleteCallback }: AccountRowProps) => {
         </tr>
     )
 }
-AccountRow.propTypes = {
-    account: EntityShapes.Account,
-    deleteCallback: PropTypes.func.isRequired
-}
 
 const AccountOverview = () => {
     const [accounts, setAccounts] = useState<Account[] | undefined>(undefined)

src/pages/setting/currency/index.tsx

@@ -1,5 +1,4 @@
 import { mdiPlus, mdiSquareEditOutline } from "@mdi/js";
-import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 import BreadCrumbItem from "../../../components/breadcrumb/breadcrumb-item.component";
 import BreadCrumbs from "../../../components/breadcrumb/breadcrumb.component";
@@ -37,9 +36,6 @@ const CurrencyRow = ({ currency }: { currency: Currency }) => {
         </tr>
     )
 }
-CurrencyRow.propTypes = {
-    currency: PropTypes.any
-}
 
 const _ = () => {
     const [currencies, setCurrencies] = useState<Currency[]>([])

yarn.lock

@@ -2574,11 +2574,6 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
   integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
 
-"@types/prop-types@*":
-  version "15.7.14"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
-  integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
-
 "@types/q@^1.5.1":
   version "1.5.8"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.8.tgz#95f6c6a08f2ad868ba230ead1d2d7f7be3db3837"
@@ -2594,12 +2589,11 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react@^18.3.12":
-  version "18.3.18"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.18.tgz#9b382c4cd32e13e463f97df07c2ee3bbcd26904b"
-  integrity sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==
+"@types/react@^19.0.0":
+  version "19.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.2.tgz#9363e6b3ef898c471cb182dd269decc4afc1b4f6"
+  integrity sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==
   dependencies:
-    "@types/prop-types" "*"
     csstype "^3.0.2"
 
 "@types/resolve@1.17.1":
@@ -7609,7 +7603,7 @@ lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9072,13 +9066,12 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
-  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+react-dom@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
   dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.2"
+    scheduler "^0.25.0"
 
 react-error-overlay@^6.0.11:
   version "6.0.11"
@@ -9180,12 +9173,10 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
-  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
-  dependencies:
-    loose-envify "^1.1.0"
+react@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
 
 read-cache@^1.0.0:
   version "1.0.0"
@@ -9526,12 +9517,10 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.23.2:
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
-  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
-  dependencies:
-    loose-envify "^1.1.0"
+scheduler@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
 
 schema-utils@2.7.0:
   version "2.7.0"