upgrade js dependencies (react 19)

beszel/site/package.json

@@ -13,25 +13,25 @@
 	"dependencies": {
 		"@henrygd/queue": "^1.0.7",
 		"@henrygd/semaphore": "^0.0.2",
-		"@lingui/detect-locale": "^5.3.3",
+		"@lingui/detect-locale": "^5.4.1",
-		"@lingui/macro": "^5.3.3",
+		"@lingui/macro": "^5.4.1",
-		"@lingui/react": "^5.3.3",
+		"@lingui/react": "^5.4.1",
 		"@nanostores/react": "^0.7.3",
 		"@nanostores/router": "^0.11.0",
-		"@radix-ui/react-alert-dialog": "^1.1.14",
+		"@radix-ui/react-alert-dialog": "^1.1.15",
-		"@radix-ui/react-checkbox": "^1.3.2",
+		"@radix-ui/react-checkbox": "^1.3.3",
-		"@radix-ui/react-dialog": "^1.1.14",
+		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-direction": "^1.1.1",
-		"@radix-ui/react-dropdown-menu": "^2.1.15",
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-label": "^2.1.7",
-		"@radix-ui/react-select": "^2.2.5",
+		"@radix-ui/react-select": "^2.2.6",
 		"@radix-ui/react-separator": "^1.1.7",
-		"@radix-ui/react-slider": "^1.3.5",
+		"@radix-ui/react-slider": "^1.3.6",
 		"@radix-ui/react-slot": "^1.2.3",
-		"@radix-ui/react-switch": "^1.2.5",
+		"@radix-ui/react-switch": "^1.2.6",
-		"@radix-ui/react-tabs": "^1.1.12",
+		"@radix-ui/react-tabs": "^1.1.13",
-		"@radix-ui/react-toast": "^1.2.14",
+		"@radix-ui/react-toast": "^1.2.15",
-		"@radix-ui/react-tooltip": "^1.2.7",
+		"@radix-ui/react-tooltip": "^1.2.8",
 		"@tanstack/react-table": "^8.21.3",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
@@ -40,27 +40,27 @@
 		"lucide-react": "^0.452.0",
 		"nanostores": "^0.11.4",
 		"pocketbase": "^0.26.2",
-		"react": "^18.3.1",
+		"react": "^19.1.1",
-		"react-dom": "^18.3.1",
+		"react-dom": "^19.1.1",
 		"recharts": "^2.15.4",
 		"tailwind-merge": "^2.6.0",
 		"tailwindcss-animate": "^1.0.7",
 		"valibot": "^0.42.1"
 	},
 	"devDependencies": {
-		"@lingui/cli": "^5.3.3",
+		"@lingui/cli": "^5.4.1",
-		"@lingui/swc-plugin": "^5.5.2",
+		"@lingui/swc-plugin": "^5.6.1",
-		"@lingui/vite-plugin": "^5.3.3",
+		"@lingui/vite-plugin": "^5.4.1",
 		"@tailwindcss/container-queries": "^0.1.1",
-		"@types/bun": "^1.2.19",
+		"@types/bun": "^1.2.20",
-		"@types/react": "^18.3.23",
+		"@types/react": "^18.3.24",
 		"@types/react-dom": "^18.3.7",
 		"@vitejs/plugin-react-swc": "^3.11.0",
 		"autoprefixer": "^10.4.21",
 		"postcss": "^8.5.6",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-rtl": "^0.9.0",
-		"typescript": "^5.8.3",
+		"typescript": "^5.9.2",
 		"vite": "^6.3.5"
 	},
 	"overrides": {

beszel/site/src/components/add-system.tsx

@@ -274,7 +274,7 @@ interface CopyButtonProps {
 	text: string
 	onClick: () => void
 	dropdownItems: DropdownItem[]
-	icon?: React.ReactElement
+	icon?: React.ReactElement<any>
 }
 
 const CopyButton = memo((props: CopyButtonProps) => {

beszel/site/src/components/routes/system.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/lib/stores"
 import { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types"
 import { ChartType, Unit, Os } from "@/lib/enums"
-import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react";
 import { Card, CardHeader, CardTitle, CardDescription } from "../ui/card"
 import { useStore } from "@nanostores/react"
 import Spinner from "../spinner"

beszel/site/src/components/ui/chart.tsx

@@ -4,6 +4,8 @@ import * as RechartsPrimitive from "recharts"
 import { chartTimeData, cn } from "@/lib/utils"
 import { ChartData } from "@/types"
 
+import type { JSX } from "react";
+
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
 
@@ -41,8 +43,9 @@ const ChartContainer = React.forwardRef<
 	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 
 	return (
-		//<ChartContext.Provider value={{ config }}>
+        //<ChartContext.Provider value={{ config }}>
-		<div
+        //</ChartContext.Provider>
+        <div
 			data-chart={chartId}
 			ref={ref}
 			className={cn(
@@ -51,11 +54,10 @@ const ChartContainer = React.forwardRef<
 			)}
 			{...props}
 		>
-			{/* <ChartStyle id={chartId} config={config} /> */}
+            {/* <ChartStyle id={chartId} config={config} /> */}
-			<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+            <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
-		</div>
+        </div>
-		//</ChartContext.Provider>
+    );
-	)
 })
 ChartContainer.displayName = "Chart"
 

beszel/site/src/lib/use-intersection-observer.ts

@@ -84,7 +84,7 @@ export function useIntersectionObserver({
 		entry: undefined,
 	}))
 
-	const callbackRef = useRef<UseIntersectionObserverOptions["onChange"]>()
+	const callbackRef = useRef<UseIntersectionObserverOptions["onChange"]>(undefined)
 
 	callbackRef.current = onChange