chore(frontend): Upgrade to React 19 (All-Hands-AI#5835)

mamoodi · Dec 27, 2024 · 9d984aa · 9d984aa
1 parent 5ed80b5
commit 9d984aa
Show file tree

Hide file tree

Showing 25 changed files with 127 additions and 155 deletions.
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -1,14 +1,13 @@
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Layout from "@theme/Layout";
-import { HomepageHeader } from "../components/HomepageHeader/HomepageHeader";
-import { Welcome } from "../components/Welcome/Welcome";
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import { HomepageHeader } from '../components/HomepageHeader/HomepageHeader';
 import { translate } from '@docusaurus/Translate';
 
 export function Header({ title, summary }): JSX.Element {
   return (
     <div>
       <h1>{title}</h1>
-      <h2 style={{ fontSize: "3rem" }}>{summary}</h2>
+      <h2 style={{ fontSize: '3rem' }}>{summary}</h2>
     </div>
   );
 }
@@ -23,7 +22,7 @@ export default function Home(): JSX.Element {
         message: 'Code Less, Make More',
       })}
     >
-    <HomepageHeader />
+      <HomepageHeader />
     </Layout>
   );
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,7 +7,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@monaco-editor/react": "^4.6.0",
+    "@monaco-editor/react": "^4.7.0-rc.0",
     "@nextui-org/react": "^2.6.10",
     "@react-router/node": "^7.1.1",
     "@react-router/serve": "^7.1.1",
@@ -27,8 +27,8 @@
     "jose": "^5.9.4",
     "monaco-editor": "^0.52.2",
     "posthog-js": "^1.203.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-highlight": "^0.15.0",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^15.2.0",
@@ -83,8 +83,8 @@
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/react-highlight": "^0.12.8",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/ws": "^8.5.12",

diff --git a/frontend/src/assets/arrow.tsx b/frontend/src/assets/arrow.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-function ArrowIcon(): JSX.Element {
+function ArrowIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/src/assets/cog-tooth.tsx b/frontend/src/assets/cog-tooth.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-function CogTooth(): JSX.Element {
+function CogTooth() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/src/assets/confirm.tsx b/frontend/src/assets/confirm.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-function ConfirmIcon(): JSX.Element {
+function ConfirmIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/src/assets/pause.tsx b/frontend/src/assets/pause.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-function PauseIcon(): JSX.Element {
+function PauseIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/src/assets/play.tsx b/frontend/src/assets/play.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-function PlayIcon(): JSX.Element {
+function PlayIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/src/assets/reject.tsx b/frontend/src/assets/reject.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-function RejectIcon(): JSX.Element {
+function RejectIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/src/assets/stop.tsx b/frontend/src/assets/stop.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-function StopIcon(): JSX.Element {
+function StopIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/frontend/src/components/extension-icon-map.constant.tsx b/frontend/src/components/extension-icon-map.constant.tsx
@@ -8,7 +8,7 @@ import {
   FaPython,
 } from "react-icons/fa";
 
-export const EXTENSION_ICON_MAP: Record<string, JSX.Element> = {
+export const EXTENSION_ICON_MAP: Record<string, React.ReactNode> = {
   js: <DiJavascript />,
   ts: <DiJavascript />,
   py: <FaPython />,

diff --git a/frontend/src/components/features/context-menu/context-menu.tsx b/frontend/src/components/features/context-menu/context-menu.tsx
@@ -2,21 +2,25 @@ import React from "react";
 import { cn } from "#/utils/utils";
 
 interface ContextMenuProps {
+  ref: React.RefObject<HTMLUListElement | null>;
   testId?: string;
   children: React.ReactNode;
   className?: React.HTMLAttributes<HTMLUListElement>["className"];
 }
 
-export const ContextMenu = React.forwardRef<HTMLUListElement, ContextMenuProps>(
-  ({ testId, children, className }, ref) => (
+export function ContextMenu({
+  testId,
+  children,
+  className,
+  ref,
+}: ContextMenuProps) {
+  return (
     <ul
       data-testid={testId}
       ref={ref}
       className={cn("bg-[#404040] rounded-md w-[224px]", className)}
     >
       {children}
     </ul>
-  ),
-);
-
-ContextMenu.displayName = "ContextMenu";
+  );
+}
diff --git a/frontend/src/components/features/file-explorer/folder-icon.tsx b/frontend/src/components/features/file-explorer/folder-icon.tsx
@@ -4,7 +4,7 @@ interface FolderIconProps {
   isOpen: boolean;
 }
 
-export function FolderIcon({ isOpen }: FolderIconProps): JSX.Element {
+export function FolderIcon({ isOpen }: FolderIconProps) {
   return isOpen ? (
     <FaFolderOpen color="D9D3D0" className="icon" />
   ) : (