upgrade to react 19

app/package.json

@@ -36,9 +36,10 @@
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-liquid": "^6.2.1",
-    "@hello-pangea/dnd": "^17.0.0",
+    "@hello-pangea/dnd": "^18.0.1",
     "@libsql/client": "^0.14.0",
-    "@mantine/core": "^7.13.4",
+    "@mantine/core": "^7.17.1",
+    "@mantine/hooks": "^7.17.1",
     "@sinclair/typebox": "^0.32.34",
     "@tanstack/react-form": "^1.0.5",
     "@uiw/react-codemirror": "^4.23.6",
@@ -63,18 +64,20 @@
     "@aws-sdk/client-s3": "^3.613.0",
     "@bluwy/giget-core": "^0.1.2",
     "@dagrejs/dagre": "^1.1.4",
-    "@mantine/modals": "^7.13.4",
-    "@mantine/notifications": "^7.13.4",
     "@hono/typebox-validator": "^0.2.6",
     "@hono/vite-dev-server": "^0.17.0",
     "@hono/zod-validator": "^0.4.1",
     "@hookform/resolvers": "^3.9.1",
     "@libsql/kysely-libsql": "^0.4.1",
+    "@mantine/modals": "^7.17.1",
+    "@mantine/notifications": "^7.17.1",
     "@rjsf/core": "5.22.2",
     "@tabler/icons-react": "3.18.0",
     "@types/node": "^22.10.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
@@ -105,8 +108,8 @@
     "@hono/node-server": "^1.13.7"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": "^19.x",
+    "react-dom": "^19.x"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -228,4 +231,4 @@
     "bun",
     "node"
   ]
-}
+}

app/src/ui/client/BkndProvider.tsx

@@ -41,7 +41,7 @@ export function BkndProvider({
       useState<Pick<BkndContext, "version" | "schema" | "config" | "permissions" | "fallback">>();
    const [fetched, setFetched] = useState(false);
    const [error, setError] = useState<boolean>();
-   const errorShown = useRef<boolean>();
+   const errorShown = useRef<boolean>(false);
    const fetching = useRef<Fetching>(Fetching.None);
    const [local_version, set_local_version] = useState(0);
    const api = useApi();

app/src/ui/components/canvas/Canvas.tsx

@@ -19,7 +19,7 @@ type CanvasProps = ReactFlowProps & {
    externalProvider?: boolean;
    backgroundStyle?: "lines" | "dots";
    minimap?: boolean | MiniMapProps;
-   children?: JSX.Element | ReactNode;
+   children?: Element | ReactNode;
    onDropNewNode?: (base: any) => any;
    onDropNewEdge?: (base: any) => any;
 };

app/src/ui/components/form/json-schema/templates/ArrayFieldTemplate.tsx

@@ -74,6 +74,7 @@ export default function ArrayFieldTemplate<
                {items.map(
                   ({ key, children, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => {
                      const newChildren = cloneElement(children, {
+                        // @ts-ignore
                         ...children.props,
                         name: undefined,
                         title: undefined,

app/src/ui/components/overlay/Dropdown.tsx

@@ -4,6 +4,7 @@ import {
    type ComponentPropsWithoutRef,
    Fragment,
    type ReactElement,
+   type ReactNode,
    cloneElement,
    useState,
 } from "react";
@@ -11,7 +12,7 @@ import { twMerge } from "tailwind-merge";
 import { useEvent } from "ui/hooks/use-event";
 
 export type DropdownItem =
-   | (() => JSX.Element)
+   | (() => ReactNode)
    | {
         label: string | ReactElement;
         icon?: any;

app/src/ui/elements/media/Dropzone.tsx

@@ -2,6 +2,7 @@ import type { DB } from "core";
 import {
    type ComponentPropsWithRef,
    type ComponentPropsWithoutRef,
+   type ReactNode,
    type RefObject,
    memo,
    useEffect,
@@ -27,7 +28,7 @@ export type FileState = {
 export type FileStateWithData = FileState & { data: DB["media"] };
 
 export type DropzoneRenderProps = {
-   wrapperRef: RefObject<HTMLDivElement>;
+   wrapperRef: RefObject<HTMLDivElement | null>;
    inputProps: ComponentPropsWithRef<"input">;
    state: {
       files: FileState[];
@@ -59,7 +60,7 @@ export type DropzoneProps = {
       show?: boolean;
       text?: string;
    };
-   children?: (props: DropzoneRenderProps) => JSX.Element;
+   children?: (props: DropzoneRenderProps) => ReactNode;
 };
 
 function handleUploadError(e: unknown) {
@@ -459,7 +460,7 @@ const UploadPlaceholder = ({ onClick, text = "Upload files" }) => {
 
 export type PreviewComponentProps = {
    file: FileState;
-   fallback?: (props: { file: FileState }) => JSX.Element;
+   fallback?: (props: { file: FileState }) => ReactNode;
    className?: string;
    onClick?: () => void;
    onTouchStart?: () => void;
@@ -486,7 +487,7 @@ type PreviewProps = {
    handleUpload: (file: FileState) => Promise<void>;
    handleDelete: (file: FileState) => Promise<void>;
 };
-const Preview: React.FC<PreviewProps> = ({ file, handleUpload, handleDelete }) => {
+const Preview = ({ file, handleUpload, handleDelete }: PreviewProps) => {
    const dropdownItems = [
       ["initial", "uploaded"].includes(file.state) && {
          label: "Delete",

app/src/ui/layouts/AppShell/Breadcrumbs2.tsx

@@ -1,4 +1,3 @@
-import { ucFirstAllSnakeToPascalWithSpaces } from "core/utils";
 import { useMemo } from "react";
 import { TbArrowLeft, TbDots } from "react-icons/tb";
 import { Link, useLocation } from "wouter";
@@ -7,7 +6,7 @@ import { Dropdown } from "../../components/overlay/Dropdown";
 import { useEvent } from "../../hooks/use-event";
 
 type Breadcrumb = {
-   label: string | JSX.Element;
+   label: string | Element;
    onClick?: () => void;
    href?: string;
 };

app/src/ui/modules/data/components/EntityForm.tsx

@@ -1,4 +1,5 @@
 import type { FieldApi, ReactFormExtendedApi } from "@tanstack/react-form";
+import type { JSX } from "react";
 import {
    type Entity,
    type EntityData,

app/src/ui/modules/data/components/schema/create-modal/templates/register.ts

@@ -1,5 +1,6 @@
 import type { IconType } from "react-icons";
 import { TemplateMediaComponent, TemplateMediaMeta } from "./media";
+import type { ReactNode } from "react";
 
 export type StepTemplate = {
    id: string;
@@ -8,8 +9,6 @@ export type StepTemplate = {
    Icon: IconType;
 };
 
-const Templates: [() => JSX.Element, StepTemplate][] = [
-   [TemplateMediaComponent, TemplateMediaMeta],
-];
+const Templates: [() => ReactNode, StepTemplate][] = [[TemplateMediaComponent, TemplateMediaMeta]];
 
 export default Templates;

biome.json

@@ -8,8 +8,7 @@
   },
   "formatter": {
     "enabled": true,
-    "indentStyle": "space",
-    "ignore": ["**/package.json"]
+    "indentStyle": "space"
   },
   "javascript": {
     "formatter": {
@@ -23,6 +22,13 @@
       "indentWidth": 3
     }
   },
+  "json": {
+    "formatter": {
+      "indentWidth": 2,
+      "lineWidth": 80,
+      "indentStyle": "space"
+    }
+  },
   "files": {
     "ignore": [
       "**/node_modules/**",