Upgrade GovTool frontend to React 19 and React Router v8

govtool/analytics-dashboard/package.json

@@ -37,6 +37,7 @@
   },
   "overrides": {
     "@tootallnate/once": "^3.0.1",
-    "postcss": "^8.5.10"
+    "postcss": "^8.5.10",
+    "sharp": "^0.35.0"
   }
 }

govtool/frontend/.nvmrc

@@ -1 +1 @@
-22.12.0
+22.22.0

govtool/frontend/.storybook/preview.tsx

@@ -2,8 +2,8 @@ import { ThemeProvider } from "@emotion/react";
 import type { Preview } from "@storybook/react-vite";
 import React from "react";
 import { I18nextProvider } from "react-i18next";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter, Route, Routes } from "react-router";
 
 import { FeatureFlagProvider } from "../src/context/featureFlag";
 import { AppContextProvider } from "../src/context/appContext";

govtool/frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.18.1-alpine as builder
+FROM node:22.22.0-alpine as builder
 
 ENV NODE_OPTIONS="--max-old-space-size=4096"
 
@@ -29,4 +29,4 @@ COPY --from=builder /src/dist /usr/share/nginx/html
 
 COPY docker-entrypoint.sh /docker-entrypoint.sh
 RUN chmod +x /docker-entrypoint.sh
-ENTRYPOINT ["/docker-entrypoint.sh"]
+ENTRYPOINT ["/docker-entrypoint.sh"]

govtool/frontend/package.json

@@ -3,6 +3,9 @@
   "private": true,
   "version": "2.0.29",
   "type": "module",
+  "engines": {
+    "node": ">=22.22.0"
+  },
   "scripts": {
     "build": "vite build",
     "build:storybook": "storybook build",
@@ -23,19 +26,21 @@
     "tsc": "npx tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@emurgo/cardano-serialization-lib-asmjs": "^14.1.1",
-    "@hookform/resolvers": "^3.3.1",
-    "@intersect.mbo/govtool-outcomes-pillar-ui": "1.5.10",
+    "@hookform/resolvers": "^3.10.0",
+    "@intersect.mbo/govtool-outcomes-pillar-ui": "1.5.11",
     "@intersect.mbo/intersectmbo.org-icons-set": "^1.0.8",
-    "@intersect.mbo/pdf-ui": "1.0.16-beta",
-    "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.4",
+    "@intersect.mbo/pdf-ui": "1.0.18-beta",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/material": "^5.18.0",
     "@noble/ed25519": "^2.3.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/pluginutils": "^5.1.0",
-    "@sentry/react": "^7.77.0",
+    "@sentry/react": "^10.69.0",
+    "@tanstack/react-query": "^5.101.4",
+    "@tanstack/react-query-devtools": "^5.101.4",
     "@usersnap/browser": "^0.0.5",
     "axios": "^1.15.0",
     "bech32": "^2.0.0",
@@ -49,22 +54,22 @@
     "katex": "^0.16.21",
     "keen-slider": "^6.8.5",
     "patch-package": "^8.0.0",
-    "react": "^18.2.0",
+    "react": "^19.2.8",
     "react-diff-view": "^3.2.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.2.8",
     "react-gtm-module": "^2.0.11",
-    "react-hook-form": "^7.47.0",
+    "react-hook-form": "^7.84.0",
     "react-i18next": "^14.0.1",
-    "react-markdown": "^9.0.1",
-    "react-query": "^3.39.3",
-    "react-router-dom": "^6.13.0",
+    "react-markdown": "^9.1.0",
+    "react-router": "^8.3.0",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "storybook-addon-manual-mocks": "^1.0.3",
     "storybook-addon-module-mock": "^1.6.2",
     "unidiff": "^1.0.4",
-    "yup": "^1.3.2"
+    "yup": "^1.3.2",
+    "sass": "^1.102.0"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
@@ -74,16 +79,16 @@
     "@storybook/addon-onboarding": "10.4.4",
     "@storybook/react-vite": "10.4.4",
     "@storybook/test-runner": "^0.24.4",
-    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.3",
+    "@types/node": "^22.20.1",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@types/jsonld": "^1.5.13",
-    "@types/node": "^20.4.8",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.0.11",
     "@types/react-gtm-module": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.66.0",
+    "@typescript-eslint/parser": "^8.66.0",
     "@vitejs/plugin-legacy": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "@vitest/browser": "^3.0.7",
@@ -93,7 +98,7 @@
     "eslint": "^8.38.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jest": "^29.16.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",

govtool/frontend/patches/@intersect.mbo+intersectmbo.org-icons-set+1.1.0.patch → govtool/frontend/patches/@intersect.mbo+intersectmbo.org-icons-set+1.1.1.patch

@@ -1010,3 +1010,7 @@ diff --git a/node_modules/@intersect.mbo/intersectmbo.org-icons-set/IconZoomOut.
 similarity index 100%
 rename from node_modules/@intersect.mbo/intersectmbo.org-icons-set/IconZoomOut.js
 rename to node_modules/@intersect.mbo/intersectmbo.org-icons-set/IconZoomOut.jsx
+diff --git a/node_modules/@intersect.mbo/intersectmbo.org-icons-set/IconPercent.js b/node_modules/@intersect.mbo/intersectmbo.org-icons-set/IconPercent.jsx
+similarity index 100%
+rename from node_modules/@intersect.mbo/intersectmbo.org-icons-set/IconPercent.js
+rename to node_modules/@intersect.mbo/intersectmbo.org-icons-set/IconPercent.jsx

govtool/frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import { Route, Routes, useNavigate } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router";
 
 import { Modal, ScrollToTop } from "@atoms";
 import {

govtool/frontend/src/components/atoms/DrawerLink.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { MemoryRouter, Route, Routes } from "react-router";
 import { DrawerLink } from "@atoms";
 import { theme } from "@/theme";
 

govtool/frontend/src/components/atoms/DrawerLink.tsx

@@ -1,14 +1,14 @@
 import { Box, Typography } from "@mui/material";
-import { FC } from "react";
-import { NavLink } from "react-router-dom";
+import { FC, ReactElement } from "react";
+import { NavLink } from "react-router";
 
 import { theme } from "@/theme";
 
 type LinkProps = {
   label: string;
   navTo: string;
-  icon?: string | JSX.Element;
-  activeIcon?: string | JSX.Element;
+  icon?: string | ReactElement;
+  activeIcon?: string | ReactElement;
   dataTestId?: string;
   onClick?: () => void;
 };

govtool/frontend/src/components/atoms/Link.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, MouseEvent } from "react";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 import { Typography } from "@mui/material";
 import { useCardano } from "@context";
 

govtool/frontend/src/components/atoms/ScrollToManage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { PATHS } from "@/consts";
 
 export function debounce(

govtool/frontend/src/components/atoms/ScrollToTop.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 export const ScrollToTop = () => {
   const { pathname } = useLocation();

govtool/frontend/src/components/atoms/types.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent } from "react";
-import { LinkProps } from "react-router-dom";
+import { LinkProps } from "react-router";
 import {
   ButtonProps as MUIButtonProps,
   CheckboxProps as MUICheckboxProps,

govtool/frontend/src/components/molecules/Breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import { NavLink, To } from "react-router-dom";
+import { NavLink, To } from "react-router";
 import { Box } from "@mui/material";
 import Divider from "@mui/material/Divider";
 

govtool/frontend/src/components/molecules/CenteredBoxBottomButtons.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Box } from "@mui/material";
 
 import { Button } from "@atoms";

govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx

@@ -5,7 +5,7 @@ import { Background } from "@atoms";
 import { PATHS } from "@consts";
 import { DashboardTopNav, Footer } from "@organisms";
 import { useScreenDimension, useTranslation } from "@hooks";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { theme } from "@/theme";
 import { LinkWithIcon } from "./LinkWithIcon";
 

govtool/frontend/src/components/molecules/GovernanceActionCard.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { Box, Skeleton } from "@mui/material";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 
 import { Button } from "@atoms";
 import {

govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Box } from "@mui/material";
 
 import { Button } from "@atoms";

govtool/frontend/src/components/molecules/WalletInfoCard.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 import { Box, Button, Typography } from "@mui/material";
 
 import {

govtool/frontend/src/components/molecules/WalletOption.tsx

@@ -1,5 +1,5 @@
 import { FC, useCallback } from "react";
-import { To, useNavigate, useLocation } from "react-router-dom";
+import { To, useNavigate, useLocation } from "react-router";
 import { Box, CircularProgress, Typography } from "@mui/material";
 
 import {

govtool/frontend/src/components/molecules/types.ts

@@ -1,9 +1,10 @@
 import { SxProps } from "@mui/material";
+import { ReactElement } from "react";
 
 export type LinkWithIconProps = {
   label: string;
   onClick: () => void;
-  icon?: JSX.Element;
+  icon?: ReactElement;
   sx?: SxProps;
   cutWithEllipsis?: boolean;
   dataTestId?: string;

govtool/frontend/src/components/organisms/ChooseStakeKeyPanel.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Box, Button, Grid, Typography } from "@mui/material";
 
 import { StakeRadio } from "@atoms";

govtool/frontend/src/components/organisms/ControlledField/Checkbox.tsx

@@ -1,21 +1,24 @@
 import { useCallback } from "react";
-import { Controller, get } from "react-hook-form";
+import { Controller, FieldValues, get, Path } from "react-hook-form";
 
 import { Field } from "@molecules";
 
 import { ControlledCheckboxProps, RenderInputProps } from "./types";
 
-export const Checkbox = ({
+export const Checkbox = <
+  TFieldValues extends FieldValues,
+  TName extends Path<TFieldValues>,
+>({
   control,
   name,
   errors,
   rules,
   ...props
-}: ControlledCheckboxProps) => {
+}: ControlledCheckboxProps<TFieldValues, TName>) => {
   const errorMessage = get(errors, name)?.message as string;
 
   const renderInput = useCallback(
-    ({ field }: RenderInputProps) => (
+    ({ field }: RenderInputProps<TFieldValues, TName>) => (
       <Field.Checkbox
         checked={!!field.value}
         errorMessage={errorMessage}

govtool/frontend/src/components/organisms/ControlledField/Input.tsx

@@ -1,15 +1,20 @@
-import { forwardRef, useCallback } from "react";
-import { Controller, get } from "react-hook-form";
+import { forwardRef, ReactElement, Ref, useCallback } from "react";
+import { Controller, FieldValues, get } from "react-hook-form";
 
 import { Field } from "@molecules";
 
 import { ControlledInputProps, RenderInputProps } from "./types";
 
-export const Input = forwardRef<HTMLInputElement, ControlledInputProps>(
-  ({ control, name, errors, rules, ...props }, ref) => {
+const InputInner = <
+  TFieldValues extends FieldValues,
+  TName extends import("react-hook-form").Path<TFieldValues>,
+>(
+  { control, name, errors, rules, ...props }: ControlledInputProps<TFieldValues, TName>,
+  ref: Ref<HTMLInputElement>,
+) => {
     const errorMessage = get(errors, name)?.message as string;
     const renderInput = useCallback(
-      ({ field }: RenderInputProps) => (
+      ({ field }: RenderInputProps<TFieldValues, TName>) => (
         <Field.Input
           {...props}
           {...field}
@@ -28,5 +33,11 @@ export const Input = forwardRef<HTMLInputElement, ControlledInputProps>(
         render={renderInput}
       />
     );
-  },
-);
+};
+
+export const Input = forwardRef(InputInner) as <
+  TFieldValues extends FieldValues,
+  TName extends import("react-hook-form").Path<TFieldValues>,
+>(
+  props: ControlledInputProps<TFieldValues, TName> & { ref?: Ref<HTMLInputElement> },
+) => ReactElement;

govtool/frontend/src/components/organisms/ControlledField/TextArea.tsx

@@ -1,21 +1,24 @@
 import { useCallback } from "react";
-import { Controller, get } from "react-hook-form";
+import { Controller, FieldValues, get, Path } from "react-hook-form";
 
 import { Field } from "@molecules";
 
 import { ControlledTextAreaProps, RenderInputProps } from "./types";
 
-export const TextArea = ({
+export const TextArea = <
+  TFieldValues extends FieldValues,
+  TName extends Path<TFieldValues>,
+>({
   control,
   name,
   errors,
   rules,
   ...props
-}: ControlledTextAreaProps) => {
+}: ControlledTextAreaProps<TFieldValues, TName>) => {
   const errorMessage = get(errors, name)?.message as string;
 
   const renderInput = useCallback(
-    ({ field }: RenderInputProps) => (
+    ({ field }: RenderInputProps<TFieldValues, TName>) => (
       <Field.TextArea {...props} {...field} errorMessage={errorMessage} />
     ),
     [errorMessage, props],