misc(FR-29): upgrade to React 19 stable

react/package.json

@@ -7,45 +7,41 @@
     "@ai-sdk/react": "^1.0.7",
     "@ant-design/cssinjs": "^1.22.0",
     "@ant-design/icons": "^5.5.1",
+    "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "@ant-design/x": "^1.0.4",
     "@cloudscape-design/board-components": "3.0.60",
     "@codemirror/language": "^6.10.3",
     "@melloware/react-logviewer": "^5.3.2",
     "@storybook/test": "^8.4.5",
     "@tanstack/react-query": "^5.61.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^15.0.7",
-    "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "^20.17.6",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@testing-library/react": "^16.1.0",
     "@uiw/codemirror-extensions-langs": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
     "ahooks": "^3.8.1",
     "ai": "^4.0.22",
     "ansi_up": "^6.0.2",
-    "antd": "^5.22.2",
+    "antd": "^5.23.2",
     "antd-style": "^3.7.1",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
     "gpt-tokenizer": "^2.8.1",
     "graphql": "^16.9.0",
     "i18next": "^23.16.8",
-    "i18next-http-backend": "^2.7.0",
+    "i18next-http-backend": "^3.0.1",
     "jotai": "^2.10.3",
     "jotai-effect": "^1.0.3",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.460.0",
+    "lucide-react": "^0.468.0",
     "markdown-to-jsx": "^7.7.0",
     "prettier": "^3.3.3",
     "prism-react-renderer": "^2.4.0",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-draggable": "^4.4.6",
     "react-error-boundary": "^4.1.2",
-    "react-i18next": "^14.1.3",
+    "react-i18next": "^15.1.3",
     "react-markdown": "^9.0.1",
     "react-relay": "^18.1.0",
     "react-resizable": "^3.0.5",
@@ -106,12 +102,17 @@
     "@storybook/testing-library": "^0.2.2",
     "@tanstack/eslint-plugin-query": "^5.60.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^20.17.6",
+    "@types/react": "^19.0.7",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-relay": "^16.0.6",
+    "@types/react-dom": "^19.0.3",
+    "@types/react-relay": "^18.2.0",
     "@types/react-resizable": "^3.0.8",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@types/react-test-renderer": "^18.3.0",
-    "@types/relay-runtime": "^18.1.1",
+    "@types/react-test-renderer": "^19.0.0",
+    "@types/relay-runtime": "^18.2.1",
     "@types/relay-test-utils": "^18.0.0",
     "@types/uuid": "^9.0.8",
     "ajv": "^8.17.1",
@@ -123,7 +124,7 @@
     "html-webpack-plugin": "5.6.3",
     "nodemon": "^3.1.7",
     "prop-types": "^15.8.1",
-    "react-test-renderer": "^18.3.1",
+    "react-test-renderer": "^19.0.0",
     "relay-compiler": "^18.1.0",
     "relay-test-utils": "^18.1.0",
     "storybook": "^8.4.5",
@@ -134,7 +135,7 @@
   "pnpm": {
     "patchedDependencies": {
       "@cloudscape-design/[email protected]": "patches/@[email protected]",
-      "rc-field-form@2.5.1": "patches/rc-field-form@2.5.1.patch"
+      "rc-field-form": "patches/rc-field-form.patch"
     }
   }
 }

react/src/components/BAIModal.tsx

@@ -112,6 +112,7 @@ const BAIModal: React.FC<BAIModalProps> = ({
             <Draggable
               disabled={disabled}
               bounds={bounds}
+              // @ts-expect-error
               nodeRef={draggleRef}
               onStart={(e, uiData) => handleDrag(e, uiData)}
             >

react/src/components/DefaultProviders.tsx

@@ -33,7 +33,7 @@ import React, {
   useState,
 } from 'react';
 import { useTranslation, initReactI18next } from 'react-i18next';
-import { RelayEnvironmentProvider } from 'react-relay';
+import { RelayEnvironmentProvider } from 'react-relay/hooks';
 import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';

react/src/components/ImageMetaIcon.tsx

@@ -5,10 +5,9 @@ const ImageMetaIcon: React.FC<{
   image: string | null;
   style?: React.CSSProperties;
   border?: boolean;
-  alt?: string | null;
-}> = ({ image, style = {} }, bordered, alt = '') => {
+  alt?: string;
+}> = ({ image, style = {}, alt = '' }) => {
   const [, { getImageIcon }] = useBackendAIImageMetaData();
-
   return (
     <img
       src={getImageIcon(image)}

react/src/components/ImageTags.tsx

@@ -143,7 +143,7 @@ const SessionKernelTags: React.FC<{
   image: string | null;
   style?: React.CSSProperties;
   border?: boolean;
-}> = ({ image, style = {} }, bordered) => {
+}> = ({ image, style = {} }) => {
   image = image || '';
   return (
     <>

react/src/components/SourceCodeViewer.tsx

@@ -19,7 +19,7 @@ const SourceCodeViewer: React.FC<SourceCodeViewerProps> = ({
   language,
   wordWrap,
 }) => {
-  const timerRef = useRef<number>();
+  const timerRef = useRef<number>(null);
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const { isDarkMode } = useThemeMode();
@@ -78,7 +78,7 @@ const SourceCodeViewer: React.FC<SourceCodeViewerProps> = ({
         text={children}
         onCopy={() => {
           setIsCopied(true);
-          clearTimeout(timerRef.current);
+          timerRef.current && clearTimeout(timerRef.current);
           timerRef.current = window.setTimeout(() => {
             setIsCopied(false);
           }, 2000);

react/src/components/__snapshots__/DomainSelector.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`DomainSelect default render 1`] = `
 <DocumentFragment>
   <div
-    class="ant-select ant-select-outlined css-dev-only-do-not-override-1x0dypw ant-select-focused ant-select-single ant-select-show-arrow ant-select-open"
+    class="ant-select ant-select-outlined css-dev-only-do-not-override-1htoz2s ant-select-focused ant-select-single ant-select-show-arrow ant-select-open"
     title="hello"
   >
     <div

react/src/components/lablupTalkativotUI/ChatMessageContent.tsx

@@ -17,6 +17,7 @@ const ChatMessageContent: React.FC<{
     <Markdown
       components={{
         p({ node, ...props }) {
+          // @ts-ignore
           return <p {...props} style={{ whiteSpace: 'pre-wrap' }} />;
         },
         code(props) {
@@ -61,6 +62,7 @@ const ChatMessageContent: React.FC<{
             </Card>
           ) : (
             <code {...rest} className={className}>
+              {/* @ts-ignore */}
               {children}
             </code>
           );

react/src/hooks/useControllableState.ts

@@ -106,7 +106,7 @@ function useMemoizedFn<T extends noop>(fn: T) {
 
   fnRef.current = useMemo<T>(() => fn, [fn]);
 
-  const memoizedFn = useRef<PickFunction<T>>();
+  const memoizedFn = useRef<PickFunction<T>>(null);
   if (!memoizedFn.current) {
     memoizedFn.current = function (this, ...args) {
       return fnRef.current.apply(this, args);

react/src/hooks/useIntervalValue.tsx

@@ -7,7 +7,7 @@ import { useEffect, useRef, useState } from 'react';
  * @param delay The delay (in milliseconds) between each execution of the callback function. If `null`, the interval is cleared(pause).
  */
 export function useInterval(callback: () => void, delay: number | null) {
-  const savedCallback = useRef<() => any>();
+  const savedCallback = useRef<() => any>(null);
 
   useEffect(() => {
     savedCallback.current = callback;

react/src/index.tsx

@@ -11,6 +11,8 @@ import reactToWebComponent, {
 import { useSuspendedBackendaiClient } from './hooks';
 import { useCurrentResourceGroupValue } from './hooks/useCurrentProject';
 import { ThemeModeProvider } from './hooks/useThemeMode';
+import '@ant-design/v5-patch-for-react-19';
+import '@ant-design/v5-patch-for-react-19';
 import { Tag, theme } from 'antd';
 import dayjs from 'dayjs';
 import { Provider as JotaiProvider } from 'jotai';