feat: Upgrade react to 19 and apply codemods

Author: cephalization

app/package.json

@@ -42,10 +42,10 @@
     "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
     "polished": "^4.3.1",
-    "react": "~18.3.1",
+    "react": "19.2.0",
     "react-aria": "^3.44.0",
     "react-aria-components": "^1.13.0",
-    "react-dom": "~18.3.1",
+    "react-dom": "19.2.0",
     "react-error-boundary": "^4.1.2",
     "react-hook-form": "^7.62.0",
     "react-hotkeys-hook": "^4.6.2",
@@ -85,15 +85,15 @@
     "@types/json-schema": "^7.0.15",
     "@types/lodash": "^4.17.20",
     "@types/node": "^22.17.0",
-    "@types/react": "18.3.10",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "19.2.0",
+    "@types/react-dom": "19.2.0",
     "@types/react-relay": "^18.2.1",
     "@types/recharts": "^1.8.29",
-    "@types/relay-runtime": "^19.0.2",
+    "@types/relay-runtime": "^19.0.3",
     "@types/three": "^0.149.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^5.0.4",
     "babel-plugin-relay": "^19.0.0",
     "chromatic": "^11.29.0",
     "cpy-cli": "^5.0.0",

app/pnpm-lock.yaml

@@ -25,7 +25,7 @@ export type CopyToClipboardButtonProps = Omit<
   /**
    * The text to copy to the clipboard
    */
-  text: string | RefObject<string>;
+  text: string | RefObject<string | null>;
 };
 
 const copyToClipboardButtonCSS = css`

app/src/components/CopyToClipboardButton.tsx

@@ -20,6 +20,8 @@ import {
 } from "@phoenix/schemas/toolChoiceSchemas";
 import { assertUnreachable, isObject } from "@phoenix/typeUtils";
 
+import type { JSX } from "react";
+
 /**
  * The "default" tool choices for each provider
  * Default just means choices we an always render without knowing any tool names

app/src/components/generative/ToolChoiceSelector.tsx

@@ -77,7 +77,7 @@ function ListBox<T extends object>(
 
 type ListBoxComponent = <T extends object>(
   props: ListBoxProps<T> & React.RefAttributes<HTMLDivElement>
-) => React.ReactElement | null;
+) => React.ReactElement<any> | null;
 
 const _ListBox = forwardRef(ListBox) as ListBoxComponent;
 export { _ListBox as ListBox };

app/src/components/listbox/ListBox.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Ref } from "react";
+import { forwardRef, Ref, type JSX } from "react";
 import { TagList as AriaTagList, TagListProps } from "react-aria-components";
 import { css } from "@emotion/react";
 

app/src/components/tag/TagList.tsx

@@ -12,7 +12,7 @@ type MaybeDimensions = Dimensions | null;
  * @param ref - The ref of the element
  * @returns The dimensions of the element
  */
-export const useDimensions = (ref: React.RefObject<HTMLElement>) => {
+export const useDimensions = (ref: React.RefObject<HTMLElement | null>) => {
   const [dimensions, setDimensions] = useState<MaybeDimensions>(null);
 
   useEffect(() => {

app/src/hooks/useDimensions.ts

@@ -708,7 +708,7 @@ function TableBody<T>({
   tableContainerRef,
 }: {
   table: Table<T>;
-  tableContainerRef: RefObject<HTMLDivElement>;
+  tableContainerRef: RefObject<HTMLDivElement | null>;
 }) {
   const rows = table.getRowModel().rows;
   const virtualizer = useVirtualizer({

app/src/pages/experiment/ExperimentCompareTable.tsx

@@ -11,7 +11,7 @@ const meta: Meta = {
 export default meta;
 
 function IconsGrid() {
-  const iconsArray: ReactElement[] = [];
+  const iconsArray: ReactElement<unknown>[] = [];
 
   Object.keys(Icons).forEach((name) => {
     const iconKey = name as keyof typeof Icons;