Merge pull request #324 from premieroctet/feature/migrate-api-route

Add api route

.changeset/big-bobcats-occur.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Add `next-themes` to handle color scheme

.changeset/chilled-llamas-grab.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Redirect useEffect

.changeset/flat-pandas-dance.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+add dist

.changeset/gentle-cooks-tickle.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Change logout system (Request or server action)

.changeset/great-bees-pump.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Fix images CORS issues

.changeset/pre.json

@@ -0,0 +1,26 @@
+{
+  "mode": "exit",
+  "tag": "rc",
+  "initialVersions": {
+    "docs": "0.0.0",
+    "example": "0.0.0",
+    "eslint-config-custom": "0.0.0",
+    "@premieroctet/next-admin": "4.4.5",
+    "tsconfig": "0.0.0"
+  },
+  "changesets": [
+    "big-bobcats-occur",
+    "chilled-llamas-grab",
+    "flat-pandas-dance",
+    "gentle-cooks-tickle",
+    "great-bees-pump",
+    "quiet-otters-study",
+    "spotty-forks-greet",
+    "stale-cycles-peel",
+    "strong-cobras-look",
+    "tricky-brooms-appear",
+    "weak-olives-call",
+    "young-maps-study",
+    "young-ties-care"
+  ]
+}

.changeset/quiet-otters-study.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Small fixes (select, dark mode, dashboard, layout, doc)

.changeset/spotty-forks-greet.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Add history on redirect `Save`

.changeset/stale-cycles-peel.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Fix date input and add time-second format

.changeset/strong-cobras-look.md

@@ -0,0 +1,128 @@
+---
+"@premieroctet/next-admin": major
+---
+
+## Major Changes
+
+- **Breaking Change**:
+
+  - New implementation of `NextAdmin`. Usage of `API route` instead of `server actions`.
+  - Configuration of `page.tsx` and `route.ts` files in the `app/admin/[[...nextadmin]]` and `app/api/[[...nextadmin]]` folders respectively.
+  - `createHandler` function now available in `appHandler` and `pageHandler` modules to configure the API route.
+  - `getNextAdminProps` function now available in `appRouter` and `pageRouter` modules to configure the page route.
+
+## Migration
+
+### API Route `[[...nextadmin]]`
+
+Create a dynamic route `[[...nextadmin]]` to handle all the API routes.
+
+<details>
+<summary>App router</summary>
+
+```tsx
+// app/api/admin/[[...nextadmin]]/route.ts
+import { prisma } from "@/prisma";
+import { createHandler } from "@premieroctet/next-admin/dist/appHandler";
+
+const { run } = createHandler({
+  apiBasePath: "/api/admin",
+  prisma,
+  /*options*/
+});
+
+export { run as DELETE, run as GET, run as POST };
+```
+
+</details>
+
+<details>
+<summary>Page router</summary>
+
+```ts copy
+  // pages/api/admin/[[...nextadmin]].ts
+  import { prisma } from "@/prisma";
+  import { createApiRouter } from "@premieroctet/next-admin/dist/pageHandler";
+  import schema from "@/prisma/json-schema/json-schema.json";
+
+  export const config = {
+    api: {
+      bodyParser: false,
+    },
+  };
+
+  const { run } = createHandler({
+    apiBasePath: "/api/admin",
+    prisma,
+    schema: schema,
+    /*options*/,
+  });
+
+  export default run;
+```
+
+</details>
+
+### Change `getPropsFromParams` to `getNextAdminProps`
+
+<details>
+<summary>App router</summary>
+
+Replace the `getPropsFromParams` function with the `getNextAdminProps` function in the `page.tsx` file.
+
+```tsx
+// app/admin/[[...nextadmin]]/page.tsx
+import { NextAdmin, PageProps } from "@premieroctet/next-admin";
+import { getNextAdminProps } from "@premieroctet/next-admin/dist/appRouter";
+import { prisma } from "@/prisma";
+
+export default async function AdminPage({ params, searchParams }: PageProps) {
+  const props = await getNextAdminProps({
+    params: params.nextadmin,
+    searchParams,
+    basePath: "/admin",
+    apiBasePath: "/api/admin",
+    prisma,
+    /*options*/
+  });
+
+  return <NextAdmin {...props} />;
+}
+```
+
+</details>
+
+<details>
+<summary>Page router</summary>
+
+Do not use `nextAdminRouter` anymore. Replace it with the `getNextAdminProps` function in the `[[...nextadmin]].ts` file for `getServerSideProps`.
+
+```tsx copy
+// pages/admin/[[...nextadmin]].tsx
+import { AdminComponentProps, NextAdmin } from "@premieroctet/next-admin";
+
+import { getNextAdminProps } from "@premieroctet/next-admin/dist/pageRouter";
+import { GetServerSideProps } from "next";
+import { prisma } from " @/prisma";
+import schema from "@/prisma/json-schema/json-schema.json";
+import "@/styles.css";
+
+export default function Admin(props: AdminComponentProps) {
+  return (
+    <NextAdmin
+      {...props}
+      /*options*/
+    />
+  );
+}
+
+export const getServerSideProps: GetServerSideProps = async ({ req }) =>
+  await getNextAdminProps({
+    basePath: "/pagerouter/admin",
+    apiBasePath: "/api/pagerouter/admin",
+    prisma,
+    schema,
+    /*options*/
+    req,
+  });
+```

.changeset/tricky-brooms-appear.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Add `isDirty` for form to submit only fields touched

.changeset/weak-olives-call.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Dependency `next-themes`

.changeset/young-maps-study.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+add URL redirect support for logout

.changeset/young-ties-care.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Merge main branch

.github/workflows/e2e.yml

@@ -20,7 +20,7 @@ jobs:
           path: ~/.cache/ms-playwright
           key: ${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }}
       - name: Start docker-compose
-        run: docker-compose up -d
+        run: docker compose up -d
       - name: Install dependencies
         run: yarn install
       - name: Run linter

apps/docs/components/OptionsTable.tsx

@@ -0,0 +1,75 @@
+interface Option {
+  name: string;
+  type?: string;
+  description: string | React.ReactNode;
+  defaultValue?: string;
+}
+
+interface HeadersLabel {
+  name: string;
+  type: string;
+  description: string;
+  defaultValue: string;
+}
+
+interface OptionsTableProps {
+  options: Option[];
+  labels?: HeadersLabel;
+}
+
+export function OptionsTable({ options, labels }: OptionsTableProps) {
+  const hasTypeColumn = options.some((option) => Boolean(option.type));
+  const hasDefaultValueColumn = options.some((option) =>
+    Boolean(option.defaultValue)
+  );
+
+  return (
+    <div className="-mx-6 mb-4 mt-6 overflow-x-auto overscroll-x-contain px-6 pb-4">
+      <table className="w-full border-collapse text-sm">
+        <thead>
+          <tr className="border-b py-4 text-left dark:border-neutral-700">
+            <th className="py-2 font-semibold">{labels?.name || "Name"}</th>
+            {hasTypeColumn && (
+              <th className="py-2 pl-6 font-semibold">
+                {labels?.type || "Type"}
+              </th>
+            )}
+            <th className="px-6 py-2 font-semibold">
+              {labels?.description || "Description"}
+            </th>
+            {hasDefaultValueColumn && (
+              <th className="px-6 py-2 font-semibold">
+                {labels?.defaultValue || "Default Value"}
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody className="align-baseline text-gray-900 dark:text-gray-100">
+          {options.map(({ name, type, description, defaultValue }) => (
+            <tr
+              key={name}
+              className="border-b border-gray-100 dark:border-neutral-700/50"
+            >
+              <td className="whitespace-pre py-2 font-mono text-xs font-semibold leading-6 text-violet-600 dark:text-violet-500">
+                {name}
+              </td>
+              {hasTypeColumn && (
+                <td className="whitespace-pre py-2 pl-6 font-mono text-xs font-semibold leading-6 text-slate-500 dark:text-slate-400">
+                  {Boolean(type) ? type : "-"}
+                </td>
+              )}
+              <td className="py-2 pl-6">{description}</td>
+              {hasDefaultValueColumn && (
+                <td className="py-2 pl-6 font-mono text-xs text-slate-500 dark:text-slate-400">
+                  {Boolean(defaultValue) ? defaultValue : "-"}
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default OptionsTable;

apps/docs/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.1",
-    "@premieroctet/next-admin": "*",
+    "@premieroctet/next-admin": "5.0.0-rc.14",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.8",
     "mini-svg-data-uri": "^1.4.4",

apps/docs/pages/_meta.json

@@ -12,6 +12,11 @@
     "type": "page",
     "display": "hidden"
   },
+  "v4": {
+    "title": "v4",
+    "type": "page",
+    "display": "hidden"
+  },
   "changelog": {
     "title": "Changelog",
     "type": "page"

apps/docs/pages/docs/_meta.json

@@ -2,7 +2,16 @@
 {
   "index": "Introduction",
   "getting-started": "Getting Started",
-  "api-docs": "API",
+  "api": {
+    "title": "API",
+    "theme": {
+      "breadcrumb": true,
+      "footer": true,
+      "sidebar": true,
+      "toc": true,
+      "pagination": true
+    }
+  },
   "i18n": "I18n",
   "theming": "Theming",
   "glossary": "Glossary",