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

Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from "react";
+import type { JSX, PropsWithChildren } from "react";
 import { notFound } from "next/navigation";
 import { AppShellMain } from "@mantine/core";
 import { TRPCError } from "@trpc/server";

apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx

@@ -13,7 +13,7 @@ import classes from "./terminal.module.css";
 export const TerminalComponent = () => {
   const ref = useRef<HTMLDivElement>(null);
 
-  const terminalRef = useRef<Terminal>();
+  const terminalRef = useRef<Terminal>(null);
   clientApi.log.subscribe.useSubscription(undefined, {
     onData(data) {
       terminalRef.current?.writeln(`${data.timestamp} ${data.level} ${data.message}`);

apps/nextjs/src/components/board/sections/gridstack/gridstack-item.tsx

@@ -17,7 +17,7 @@ interface Props extends BoxProps {
   height: number;
   minWidth?: number;
   minHeight?: number;
-  innerRef: React.RefObject<GridItemHTMLElement> | undefined;
+  innerRef: React.RefObject<GridItemHTMLElement | null> | undefined;
 }
 
 export const GridStackItem = ({

apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, RefObject } from "react";
+import type { RefObject } from "react";
 
 import type { GridItemHTMLElement } from "@homarr/gridstack";
 import { GridStack } from "@homarr/gridstack";
@@ -9,9 +9,9 @@ interface InitializeGridstackProps {
   section: Omit<Section, "items">;
   itemIds: string[];
   refs: {
-    wrapper: RefObject<HTMLDivElement>;
-    items: MutableRefObject<Record<string, RefObject<GridItemHTMLElement>>>;
-    gridstack: MutableRefObject<GridStack | undefined>;
+    wrapper: RefObject<HTMLDivElement | null>;
+    items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
+    gridstack: RefObject<GridStack | null>;
   };
   sectionColumnCount: number;
 }

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject, RefObject } from "react";
+import type { RefObject } from "react";
 import { createRef, useCallback, useEffect, useRef } from "react";
 import { useElementSize } from "@mantine/hooks";
 
@@ -11,9 +11,9 @@ import { useSectionActions } from "../section-actions";
 import { initializeGridstack } from "./init-gridstack";
 
 export interface UseGridstackRefs {
-  wrapper: RefObject<HTMLDivElement>;
-  items: MutableRefObject<Record<string, RefObject<GridItemHTMLElement>>>;
-  gridstack: MutableRefObject<GridStack | undefined>;
+  wrapper: RefObject<HTMLDivElement | null>;
+  items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
+  gridstack: RefObject<GridStack | null>;
 }
 
 interface UseGristackReturnType {
@@ -60,9 +60,9 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
   // define reference for wrapper - is used to calculate the width of the wrapper
   const { ref: wrapperRef, width, height } = useElementSize<HTMLDivElement>();
   // references to the diffrent items contained in the gridstack
-  const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement>>>({});
+  const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement | null>>>({});
   // reference of the gridstack object for modifications after initialization
-  const gridRef = useRef<GridStack>();
+  const gridRef = useRef<GridStack>(null);
 
   const board = useRequiredBoard();
 

apps/nextjs/src/components/layout/navigation.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import { AppShellNavbar, AppShellSection, ScrollArea } from "@mantine/core";
 
 import type { TablerIcon } from "@homarr/ui";