Upgrade React v19 & others (#88)

* more upgrades

* react 19

* prettier

Author: nicolasfripp

package-lock.json

@@ -24,15 +24,15 @@
   "dependencies": {
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
-    "axios": "^0.21.4",
+    "axios": "^1.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "history": "^4.10.1",
-    "lucide-react": "^0.482.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "history": "^5.3.0",
+    "lucide-react": "^0.487.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-router": "^7.4.1",
-    "tailwind-merge": "^3.0.2",
+    "tailwind-merge": "^3.1.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "scripts": {
@@ -59,29 +59,30 @@
     ]
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.0.14",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^16.18.14",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@tailwindcss/vite": "^4.1.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.13.17",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^8.10.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-check-file": "^2.8.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-check-file": "^3.1.0",
     "eslint-plugin-deprecation": "^3.0.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.0.0",
-    "eslint-plugin-testing-library": "^5.10.2",
-    "jsdom": "^21.1.1",
-    "postcss": "^8.4.21",
-    "prettier": "3.1.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-testing-library": "^7.1.1",
+    "jsdom": "^26.0.0",
+    "postcss": "^8.5.3",
+    "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.0.14",
-    "typescript": "^5.5.4",
+    "tailwindcss": "^4.1.1",
+    "typescript": "^5.8.2",
     "vite": "^6.2.4",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",

package.json

@@ -2,7 +2,7 @@ const fetchVariable = (varName: string, defaultValue?: string) => {
   if (!import.meta.env[varName] && typeof defaultValue === "undefined") {
     throw new Error(`Mandatory environment variable ${varName} is not set.`);
   }
-  return String(import.meta.env[varName] || defaultValue);
+  return String(import.meta.env[varName] ?? defaultValue);
 };
 
 const nodeEnv = fetchVariable("MODE");

src/config/constants.ts

@@ -14,7 +14,10 @@ interface LayoutProps {
   layoutType: LayoutType;
 }
 
-const Layout = ({ layoutType, children }: LayoutProps): JSX.Element | null => {
+const Layout = ({
+  layoutType,
+  children,
+}: LayoutProps): React.JSX.Element | null => {
   if (layoutType === LayoutType.Default) {
     return <div>{children}</div>;
   }

src/hocs/with-layout/layout.tsx

@@ -27,9 +27,9 @@ class ApiServiceClass {
     throw new ApiError({
       // NOTE: we need to disable these rules since there's no way for us to type the `data` object.
       /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
-      code: data?.code || ErrorCode.UNEXPECTED_ERROR,
+      code: data?.code ?? ErrorCode.UNEXPECTED_ERROR,
       status: data?.status,
-      message: data?.message || "An unexpected error has occurred",
+      message: data?.message ?? "An unexpected error has occurred",
       /* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
     });
   }
@@ -40,7 +40,11 @@ class ApiServiceClass {
     config: RequestInit = {},
   ): Promise<ReturnType> {
     const updatedConfig = { ...config };
-    updatedConfig.headers = { ...this.addedHeaders, ...(config.headers ?? {}) };
+    updatedConfig.headers = Object.assign(
+      {},
+      this.addedHeaders,
+      config.headers ?? {},
+    );
     const fullURL = new URL(path, constants.apiBaseURL);
     const response = await fetch(fullURL, {
       method,

src/networking/api-service.ts

@@ -71,8 +71,6 @@ const ROUTES = [
  * This type is used to extract the type of the route params
  * from the path string.
  */
-export type RouteParams = {
-  [K in RouteName]: Route;
-} & Params;
+export type RouteParams = Record<RouteName, Route> & Params;
 
 export const routes = ROUTES.map(setPathParams);

src/routes/routes.ts

@@ -1,9 +1,9 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import type { Location } from "react-router";
 import { useLocation } from "react-router";
 
 interface ScrollToTopProps {
-  children: JSX.Element;
+  children: ReactNode;
 }
 
 const urlFromLocation = (location?: Location) =>

src/routes/scroll-to-top/scroll-to-top.tsx

@@ -1,8 +1,9 @@
 import { render } from "@testing-library/react";
+import type React from "react";
 import { BrowserRouter } from "react-router";
 
 export const renderWithRouter = (
-  component: JSX.Element,
+  component: React.JSX.Element,
   { route = "/" } = {},
 ): ReturnType<typeof render> => {
   window.history.pushState({}, "Test page", route);