chore: upgrade to react 19, fix serialization issues (#495)

* chore: upgrade to react 19, fix serialization issues

* fix types

* upgrade nextra, fix tests

* fix e2e

* fix click outside

.changeset/rotten-readers-fetch.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+chore: upgrade to React 19, fix some serialization issues on Page Router

apps/docs/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/docs/next.config.mjs

@@ -0,0 +1,10 @@
+import nextra from "nextra";
+
+const config = nextra({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.jsx",
+});
+
+export default config({
+  reactStrictMode: true,
+});

apps/docs/package.json

@@ -12,19 +12,19 @@
   "dependencies": {
     "@heroicons/react": "^2.1.1",
     "clsx": "^2.1.0",
-    "framer-motion": "^11.0.8",
+    "framer-motion": "^11.13.5",
     "mini-svg-data-uri": "^1.4.4",
     "next": "^15.0.3",
-    "nextra": "^2.13.2",
-    "nextra-theme-docs": "^2.13.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "nextra": "3.2.5",
+    "nextra-theme-docs": "3.2.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@types/node": "^17.0.12",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "autoprefixer": "^10.0.1",
     "eslint": "7.32.0",
     "eslint-config-custom": "workspace:*",

apps/docs/pages/_meta.ts

@@ -0,0 +1,29 @@
+export default {
+  index: {
+    type: "page",
+    title: "Next Admin",
+    display: "hidden",
+    theme: {
+      layout: "raw",
+    },
+  },
+  docs: {
+    title: " ",
+    type: "page",
+  },
+  v4: {
+    title: "v4",
+    type: "page",
+    display: "hidden",
+  },
+  changelog: {
+    title: "Changelog",
+    type: "page",
+  },
+  demo: {
+    title: "Demo",
+    type: "page",
+    href: "https://next-admin-po.vercel.app",
+    newWindow: true,
+  },
+};

apps/docs/pages/changelog/_meta.ts

@@ -0,0 +1,3 @@
+export default {
+  index: "Versions",
+};

apps/docs/pages/docs/_meta.ts

@@ -0,0 +1,20 @@
+export default {
+  index: "Introduction",
+  "getting-started": "Getting Started",
+  api: {
+    title: "API",
+    theme: {
+      breadcrumb: true,
+      footer: true,
+      sidebar: true,
+      toc: true,
+      pagination: true,
+    },
+  },
+  i18n: "I18n",
+  theming: "Theming",
+  glossary: "Glossary",
+  route: "Route name",
+  "edge-cases": "Edge cases",
+  "code-snippets": "Code snippets",
+};

apps/docs/pages/docs/api/_meta.json → apps/docs/pages/docs/api/_meta.ts

@@ -1,4 +1,4 @@
-{
+export default {
   "next-admin-component": {
     "title": "<NextAdmin/>"
   },

apps/docs/pages/docs/index.mdx

@@ -1,28 +1,38 @@
-
-
 import {
   BoltIcon,
   CodeBracketIcon,
   PlayCircleIcon,
-} from '@heroicons/react/24/outline'
-import { Callout, Card, Cards } from 'nextra/components'
+} from "@heroicons/react/24/outline";
+import { Callout, Card, Cards } from "nextra/components";
 
 # 🧞 Next Admin
+
 <Callout type="info">
   This is the documentation for the latest version of Next Admin. If you are using an older version (`<5.0.0`), please refer to the [documentation](/v4/docs)
 </Callout>
 
 <Cards>
-  <Card icon={<BoltIcon/>} title="Installation" href="/docs/getting-started" />
-  <Card icon={<PlayCircleIcon/>} title="Live demo" href="https://next-admin-po.vercel.app/admin" />
-  <Card icon={<CodeBracketIcon />} title="Source code" href="https://github.com/premieroctet/next-admin" />
+  <Cards.Card
+    icon={<BoltIcon />}
+    title="Installation"
+    href="/docs/getting-started"
+  />
+  <Cards.Card
+    icon={<PlayCircleIcon />}
+    title="Live demo"
+    href="https://next-admin-po.vercel.app/admin"
+  />
+  <Cards.Card
+    icon={<CodeBracketIcon />}
+    title="Source code"
+    href="https://github.com/premieroctet/next-admin"
+  />
 </Cards>
 
 ###### `next-admin` is a library built on top of [Prisma](https://www.prisma.io/) and [Next.js](https://nextjs.org/) that allows you to easily manage and visualize your Prisma database in a nice graphical user interface (GUI).
 
 Get started by following the [installation guide](/docs/getting-started), or check out the [live demo](https://next-admin-po.vercel.app/admin).
 
-
 ![Hello](/screenshot.png)
 
 This library is still under development. The following features are available:

apps/docs/pages/v4/_meta.js

@@ -0,0 +1,7 @@
+export default {
+  docs: {
+    title: "Documentation",
+    type: "page",
+    display: "hidden",
+  },
+};

apps/docs/pages/v4/docs/_meta.ts

@@ -0,0 +1,22 @@
+export default {
+  index: "Introduction",
+  "getting-started": "Getting Started",
+  api: {
+    title: "API",
+    theme: {
+      breadcrumb: true,
+      footer: true,
+      sidebar: true,
+      toc: true,
+      pagination: true,
+    },
+  },
+  authentication: "Authentication",
+  i18n: "I18n",
+
+  theming: "Theming",
+  glossary: "Glossary",
+  route: "Route name",
+  "edge-cases": "Edge cases",
+  "code-snippets": "Code snippets",
+};

apps/docs/pages/v4/docs/api/_meta.ts

@@ -0,0 +1,17 @@
+export default {
+  "next-admin-component": {
+    title: "<NextAdmin/>",
+  },
+  "get-props-from-params": {
+    title: "getPropsFromParams()",
+  },
+  "next-admin-router": {
+    title: "nextAdminRouter()",
+  },
+  options: {
+    title: "Options parameter",
+  },
+  "model-configuration": {
+    title: "Model configuration",
+  },
+};

apps/docs/pages/v4/docs/index.mdx

@@ -2,27 +2,39 @@ import {
   BoltIcon,
   CodeBracketIcon,
   PlayCircleIcon,
-} from '@heroicons/react/24/outline'
-import { Callout, Card, Cards } from 'nextra/components'
+} from "@heroicons/react/24/outline";
+import { Callout, Card, Cards } from "nextra/components";
 
 # 🧞 Next Admin
+
 <Callout type="default">
   This documentation covers an older version of Next Admin. If you are using the
   latest version (`>=5.0.0` and above), please refer to the [current
   documentation](/docs).
 </Callout>
 
 <Cards>
-  <Card icon={<BoltIcon/>} title="Installation" href="/v4/docs/getting-started" />
-  <Card icon={<PlayCircleIcon/>} title="Live demo" href="https://next-admin-po.vercel.app/admin" />
-  <Card icon={<CodeBracketIcon />} title="Source code" href="https://github.com/premieroctet/next-admin" />
+  <Cards.Card
+    icon={<BoltIcon />}
+    title="Installation"
+    href="/v4/docs/getting-started"
+  />
+  <Cards.Card
+    icon={<PlayCircleIcon />}
+    title="Live demo"
+    href="https://next-admin-po.vercel.app/admin"
+  />
+  <Cards.Card
+    icon={<CodeBracketIcon />}
+    title="Source code"
+    href="https://github.com/premieroctet/next-admin"
+  />
 </Cards>
 
 ###### `next-admin` is a library built on top of [Prisma](https://www.prisma.io/) and [Next.js](https://nextjs.org/) that allows you to easily manage and visualize your Prisma database in a nice graphical user interface (GUI).
 
 Get started by following the [installation guide](/v4/docs/getting-started) or check out the [live demo](https://next-admin-po.vercel.app/admin).
 
-
 ![Hello](/screenshot.png)
 
 This library is still under development. The following features are available:

apps/example/next-env.d.ts

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