chore: Upgrade to React 19

Author: steverydz

package.json

@@ -48,8 +48,8 @@
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.14",
     "@types/randomstring": "1.3.0",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.0",
     "@types/react-redux": "7.1.34",
     "@types/react-router-dom": "5.3.3",
     "@types/topojson-client": "3.1.5",
@@ -81,10 +81,10 @@
     "prop-types": "15.8.1",
     "randomstring": "1.3.0",
     "raven-js": "3.27.2",
-    "react": "18.3.1",
+    "react": "19.1.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.1.0",
     "react-hook-form": "7.54.2",
     "react-joyride": "2.9.3",
     "react-query": "3.39.3",
@@ -134,9 +134,5 @@
     "stylelint-config-standard-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "ts-jest": "29.2.5"
-  },
-  "resolutions": {
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5"
   }
 }

static/js/publisher/components/AppPagination/AppPagination.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect } from "react";
 import { Button, Icon, Input, Select } from "@canonical/react-components";
 
 import type {
@@ -19,7 +19,7 @@ function AppPagination<T extends ItemType>({
   keyword,
   items,
   setItemsToShow,
-}: Props<T>): ReactNode {
+}: Props<T>): React.JSX.Element {
   const paginationOptions = [
     {
       label: "25/page",

static/js/publisher/components/Filter/Filter.tsx

@@ -1,15 +1,14 @@
 import { useSearchParams } from "react-router-dom";
 import { RecoilState, useSetRecoilState } from "recoil";
 import { Button, Icon } from "@canonical/react-components";
-import { ReactNode } from "react";
 
 type Props = {
   state: RecoilState<string>;
   label: string;
   placeholder: string;
 };
 
-function Filter({ state, label, placeholder }: Props): ReactNode {
+function Filter({ state, label, placeholder }: Props): React.JSX.Element {
   const [searchParams, setSearchParams] = useSearchParams();
   const setFilter = useSetRecoilState(state);
 

static/js/publisher/components/Logo/Logo.tsx

@@ -1,4 +1,4 @@
-function Logo(): JSX.Element {
+function Logo(): React.JSX.Element {
   return (
     <a href="/" className="p-panel__logo tag-logo">
       <img

static/js/publisher/components/Navigation/Logo.tsx

@@ -1,6 +1,4 @@
-import { ReactNode } from "react";
-
-function Logo(): ReactNode {
+function Logo(): React.JSX.Element {
   return (
     <a href="/" className="p-panel__logo">
       <img

static/js/publisher/components/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { useParams, NavLink } from "react-router-dom";
 import { Icon } from "@canonical/react-components";
@@ -16,7 +16,7 @@ function Navigation({
   sectionName,
 }: {
   sectionName: string | null;
-}): ReactNode {
+}): React.JSX.Element {
   const brandStoresList = useRecoilValue(brandStoresState);
   const { id } = useParams();
   const { data: brand } = useBrand(id);

static/js/publisher/components/PrimaryNav/PrimaryNav.tsx

@@ -18,7 +18,7 @@ function PrimaryNav({
 }: {
   collapseNavigation: boolean;
   setCollapseNavigation: (value: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const location = useLocation();
   const { data: publisherData } = usePublisher();
   const { data: validationSetsData } = useValidationSets();

static/js/publisher/components/StoreSelector/StoreSelector.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { useParams, NavLink } from "react-router-dom";
 
@@ -10,7 +10,7 @@ type Props = {
   nativeNavLink?: boolean;
 };
 
-function StoreSelector({ nativeNavLink }: Props): ReactNode {
+function StoreSelector({ nativeNavLink }: Props): React.JSX.Element {
   const { id } = useParams();
   const brandStoresList = useRecoilValue(brandStoresState);
   const [showStoreSelector, setShowStoreSelector] = useState<boolean>(false);

static/js/publisher/components/Tour/Tour.tsx

@@ -8,7 +8,7 @@ type Props = {
   steps: {
     target: string;
     title: string;
-    content: JSX.Element;
+    content: React.JSX.Element;
     disableBeacon?: boolean;
   }[];
 };

static/js/publisher/pages/AccountDetails/AccountDetails.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, SyntheticEvent, ReactNode } from "react";
+import { useState, useEffect, SyntheticEvent } from "react";
 import { useRecoilValue } from "recoil";
 import {
   Row,
@@ -13,7 +13,7 @@ import Navigation from "../../components/Navigation";
 
 import { publisherState } from "../../state/publisherState";
 
-function AccountDetails(): ReactNode {
+function AccountDetails(): React.JSX.Element {
   const [subscriptionPreferencesChanged, setSubscriptionPreferencesChanged] =
     useState(false);
   const [subscribeToNewsletter, setSubscribeToNewsletter] = useState(false);