fix(deps): update react monorepo to v19 (major)

apps/web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/web/next.config.mjs

@@ -10,10 +10,9 @@ const __dirname = fileURLToPath(new URL('.', import.meta.url));
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: process.env.NODE_ENV === 'production',
-  swcMinify: true,
   i18n: i18nConfig.default.i18n,
   output: 'standalone',
-  experimental: { outputFileTracingRoot: path.join(__dirname, '../../') },
+  outputFileTracingRoot: path.join(__dirname, '../../'),
   eslint: { ignoreDuringBuilds: true },
   transpilePackages: ['@ufb/ui'],
   compiler: { removeConsole: process.env.NODE_ENV === 'production' },

apps/web/package.json

@@ -60,10 +60,10 @@
     "next-i18next": "^15.3.0",
     "nuqs": "^1.17.4",
     "pino": "^9.0.0",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^7.0.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.51.3",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^15.0.0",
@@ -88,10 +88,10 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "22.10.7",
-    "@types/react": "^18.2.79",
+    "@types/react": "^19.0.0",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-datepicker": "^7.0.0",
-    "@types/react-dom": "^18.2.25",
+    "@types/react-dom": "^19.0.0",
     "@ufb/eslint-config": "workspace:*",
     "@ufb/prettier-config": "workspace:*",
     "@ufb/tsconfig": "workspace:*",

apps/web/src/pages/_app.tsx

@@ -48,6 +48,8 @@ type AppPropsWithLayout = AppProps<PageProps> & {
 };
 
 function App({ Component, pageProps }: AppPropsWithLayout) {
+  const { dehydratedState, ...otherProps } = pageProps;
+
   const [queryClient] = useState(() => new QueryClient());
 
   const getLayout = Component.getLayout ?? ((page) => page);
@@ -72,9 +74,9 @@ function App({ Component, pageProps }: AppPropsWithLayout) {
       </Head>
       <QueryClientProvider client={queryClient}>
         <OverlayProvider>
-          <HydrationBoundary state={pageProps.dehydratedState}>
+          <HydrationBoundary state={dehydratedState}>
             <TenantGuard>
-              {getLayout(<Component {...pageProps} />)}
+              {getLayout(<Component {...otherProps} />)}
               <Toaster />
             </TenantGuard>
           </HydrationBoundary>

apps/web/src/shared/types/page-with-layout.type.ts

@@ -15,6 +15,6 @@
  */
 import type { NextPage } from 'next';
 
-export type NextPageWithLayout<P = object, IP = P> = NextPage<P, IP> & {
-  getLayout?: (page: React.ReactElement) => React.ReactNode;
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: React.ReactElement<P>) => React.ReactNode;
 };

apps/web/src/shared/ui/popper.ui.tsx

@@ -45,7 +45,10 @@ const Popper: React.FC<IProps> = (props) => {
 
   return (
     <>
-      {React.cloneElement(buttonChildren, { ref: buttonRef })}
+      {React.cloneElement(
+        buttonChildren as React.ReactElement<{ ref: React.RefObject<null> }>,
+        { ref: buttonRef },
+      )}
       <MUIPopper
         open={open}
         anchorEl={buttonRef.current}

apps/web/src/widgets/feedback-table/lib/use-truncated-element.tsx

@@ -16,7 +16,11 @@
 import type { RefObject } from 'react';
 import { useEffect, useState } from 'react';
 
-const useTruncatedElement = ({ ref }: { ref: RefObject<HTMLElement> }) => {
+const useTruncatedElement = ({
+  ref,
+}: {
+  ref: RefObject<HTMLElement | null>;
+}) => {
   const [isTruncated, setIsTruncated] = useState(false);
   const [isShowingMore, setIsShowingMore] = useState(false);
 

packages/ufb-shared/package.json

@@ -20,7 +20,7 @@
     "@ufb/tsconfig": "workspace:*",
     "eslint": "catalog:",
     "prettier": "catalog:",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
     "tsup": "^8.0.2",
     "typescript": "catalog:"
   }

packages/ufb-ui/package.json

@@ -13,15 +13,15 @@
   "prettier": "@ufb/prettier-config",
   "dependencies": {
     "@floating-ui/react": "^0.27.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {
     "@swc/core": "^1.4.16",
     "@swc/jest": "^0.2.36",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@ufb/eslint-config": "workspace:*",
     "@ufb/prettier-config": "workspace:*",
     "@ufb/tailwind": "workspace:*",

packages/ufb-ui/src/Popover/Popover.tsx

@@ -151,21 +151,20 @@ export const PopoverTrigger = React.forwardRef<
   const context = usePopoverContext();
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
   const childrenRef = (children as any).ref;
-
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
 
   // `asChild` allows the user to pass any element as the anchor
   if (asChild && React.isValidElement(children)) {
     return React.cloneElement(
       children,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+
       context.getReferenceProps({
         ref,
         ...props,
-        ...children.props,
+        ...(children.props ?? {}),
         'data-state': context.open ? 'open' : 'closed',
-      }),
+      } as unknown as React.HTMLProps<HTMLElement>),
     );
   }
 

packages/ufb-ui/src/Toast/toast.tsx

@@ -13,6 +13,7 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
+import type { Toast } from 'react-hot-toast';
 import { Toaster as HotToaster, toast as reactToast } from 'react-hot-toast';
 
 import type { IconNameType } from '../Icon';
@@ -28,11 +29,17 @@ interface IToastProps {
 
 export const toast = {
   positive: (input: IToastProps) =>
-    reactToast.custom((t) => <ToastBox type="positive" {...input} t={t} />),
+    reactToast.custom((t: Toast) => (
+      <ToastBox type="positive" {...input} t={t} />
+    )),
   negative: (input: IToastProps) =>
-    reactToast.custom((t) => <ToastBox type="negative" {...input} t={t} />),
+    reactToast.custom((t: Toast) => (
+      <ToastBox type="negative" {...input} t={t} />
+    )),
   accent: (input: IToastProps) =>
-    reactToast.custom((t) => <ToastBox type="accent" {...input} t={t} />),
+    reactToast.custom((t: Toast) => (
+      <ToastBox type="accent" {...input} t={t} />
+    )),
   promise: async (
     fn: Promise<void>,
     input: {
@@ -44,7 +51,7 @@ export const toast = {
   ) => {
     const { title, description } = input;
     const id = reactToast.custom(
-      (t) => (
+      (t: Toast) => (
         <ToastPromiseBox
           {...option}
           t={t}
@@ -58,7 +65,7 @@ export const toast = {
     );
     fn.then(() => {
       reactToast.custom(
-        (t) => (
+        (t: Toast) => (
           <ToastPromiseBox
             {...option}
             t={t}
@@ -73,7 +80,7 @@ export const toast = {
       );
     }).catch(() => {
       reactToast.custom(
-        (t) => (
+        (t: Toast) => (
           <ToastPromiseBox
             {...option}
             t={t}

packages/ufb-ui/src/Tooltip/Tooltip.tsx

@@ -131,13 +131,13 @@ export const TooltipTrigger = React.forwardRef<
   if (asChild && React.isValidElement(children)) {
     return React.cloneElement(
       children,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+
       context.getReferenceProps({
         ref,
         ...props,
-        ...children.props,
+        ...(children.props ?? {}),
         'data-state': context.open ? 'open' : 'closed',
-      }),
+      } as unknown as React.HTMLProps<HTMLElement>),
     );
   }