Merge pull request #92 from premieroctet/feature/json-field-support

Add JSON editor in NextAdmin core
premieroctet · Feb 12, 2024 · 29ec67f · 29ec67f
2 parents 9e5e6b3 + a4de91a
commit 29ec67f
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 27 deletions.
diff --git a/.changeset/tricky-frogs-drum.md b/.changeset/tricky-frogs-drum.md
@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Add `@monaco-editor` as optionalDependencies - To use the JSON editor, install the corresponding version of `@monaco-editor/react`
diff --git a/apps/example/options.tsx b/apps/example/options.tsx
@@ -1,6 +1,5 @@
 import { NextAdminOptions } from "@premieroctet/next-admin";
 import DatePicker from "./components/DatePicker";
-import JsonEditor from "./components/JsonEditor";
 
 export const options: NextAdminOptions = {
   basePath: "/admin",
@@ -72,7 +71,7 @@ export const options: NextAdminOptions = {
             },
           },
           metadata: {
-            input: <JsonEditor />,
+            format: "json",
             validate: (value) => {
               try {
                 if (!value) {

diff --git a/apps/example/package.json b/apps/example/package.json
@@ -18,10 +18,6 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@monaco-editor/react": "^4.6.0",
-    "slate": "^0.101.5",
-    "slate-history": "^0.100.0",
-    "slate-react": "^0.101.5",
     "@picocss/pico": "^1.5.7",
     "@premieroctet/next-admin": "*",
     "@prisma/client": "^5.2.0",

diff --git a/packages/next-admin/package.json b/packages/next-admin/package.json
@@ -12,7 +12,7 @@
     "lint": "eslint \"**/*.{ts,tsx}\"",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "tsc": "tsc --noemit"
+    "tsc": "tsc --noEmit"
   },
   "peerDependencies": {
     "@prisma/client": ">=4",
@@ -69,6 +69,7 @@
     "tsup": "^6.7.0"
   },
   "optionalDependencies": {
+    "@monaco-editor/react": "^4.6.0",
     "slate": "^0.101.5",
     "slate-history": "^0.100.0",
     "slate-react": "^0.101.5"

diff --git a/packages/next-admin/src/components/DataTable.tsx b/packages/next-admin/src/components/DataTable.tsx
@@ -138,9 +138,9 @@ export function DataTable({
                     {header.isPlaceholder
                       ? null
                       : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
                   </TableHead>
                 );
               })}
@@ -155,7 +155,9 @@ export function DataTable({
                 data-state={row.getIsSelected() && "selected"}
                 className="cursor-pointer hover:bg-indigo-50"
                 onClick={() => {
-                  window.location.href = `${basePath}/${resource.toLowerCase()}/${row.original[modelIdProperty].value}`
+                  window.location.href = `${basePath}/${resource.toLowerCase()}/${
+                    row.original[modelIdProperty].value
+                  }`;
                 }}
               >
                 {row.getVisibleCells().map((cell) => (

diff --git a/packages/next-admin/src/components/Form.tsx b/packages/next-admin/src/components/Form.tsx
@@ -31,6 +31,7 @@ import CheckboxWidget from "./inputs/CheckboxWidget";
 import DateTimeWidget from "./inputs/DateTimeWidget";
 import DateWidget from "./inputs/DateWidget";
 import FileWidget from "./inputs/FileWidget";
+import JsonField from "./inputs/JsonField";
 import RichTextField from "./inputs/RichText/RichTextField";
 import SelectWidget from "./inputs/SelectWidget";
 import TextareaWidget from "./inputs/TextareaWidget";
@@ -272,6 +273,16 @@ const Form = ({
           });
         }
 
+        if (schema?.format === "json") {
+          return (
+            <JsonField
+              onChange={onChangeOverride || onTextChange}
+              readonly={readonly}
+              rawErrors={rawErrors}
+              {...props}
+            />
+          );
+        }
         if (schema?.format?.startsWith("richtext-")) {
           return (
             <RichTextField

diff --git a/apps/example/components/JsonEditor.tsx → ...admin/src/components/inputs/JsonField.tsx b/apps/example/components/JsonEditor.tsx → ...admin/src/components/inputs/JsonField.tsx
@@ -1,11 +1,11 @@
 "use client";
 import Editor from "@monaco-editor/react";
-import { CustomInputProps } from "@premieroctet/next-admin";
 import { useMemo } from "react";
+import { CustomInputProps } from "../../types";
 
 type Props = CustomInputProps;
 
-const JsonEditor = ({ value, onChange, name }: Props) => {
+const JsonField = ({ value, onChange, name }: Props) => {
   const defaultValue = useMemo(() => {
     try {
       return JSON.stringify(JSON.parse(value!), null, 2);
@@ -34,4 +34,4 @@ const JsonEditor = ({ value, onChange, name }: Props) => {
   );
 };
 
-export default JsonEditor;
+export default JsonField;
diff --git a/packages/next-admin/src/context/FormContext.tsx b/packages/next-admin/src/context/FormContext.tsx
@@ -14,8 +14,8 @@ type FormContextType = {
     [P in string]: {
       open: boolean;
       selectedValue:
-      | { value: string; label: string }
-      | { value: string; label: string }[];
+        | { value: string; label: string }
+        | { value: string; label: string }[];
     };
   };
   setOpen: (open: boolean, name: string) => void;
@@ -25,11 +25,11 @@ type FormContextType = {
 
 export const FormContext = createContext<FormContextType>({
   formData: {},
-  setFormData: (_formData: any) => { },
+  setFormData: (_formData: any) => {},
   relationState: {},
-  setOpen: (_open: boolean, _name: string) => { },
-  setSelectedValue: (_selectedValue: any, _name: string) => { },
-  toggleOpen: (_name: string) => { },
+  setOpen: (_open: boolean, _name: string) => {},
+  setSelectedValue: (_selectedValue: any, _name: string) => {},
+  toggleOpen: (_name: string) => {},
 });
 
 type Props = PropsWithChildren<{
@@ -40,8 +40,8 @@ type RelationState = {
   [P in string]: {
     open: boolean;
     selectedValue:
-    | { value: string; label: string }
-    | { value: string; label: string }[];
+      | { value: string; label: string }
+      | { value: string; label: string }[];
   };
 };
 
@@ -52,14 +52,14 @@ export const FormProvider = ({ children, initialValue }: Props) => {
     const isDirty = !isEqual(initialValue, formData);
     const onBeforeUnload = (e: any) => {
       e.preventDefault();
-      e.returnValue = true
-    }
+      e.returnValue = true;
+    };
     if (isDirty) {
-      window.addEventListener('beforeunload', onBeforeUnload)
+      window.addEventListener("beforeunload", onBeforeUnload);
     }
     return () => {
-      window.removeEventListener('beforeunload', onBeforeUnload)
-    }
+      window.removeEventListener("beforeunload", onBeforeUnload);
+    };
   }, [formData, initialValue]);
 
   const setOpen = (open: boolean, name: string) => {

diff --git a/packages/next-admin/src/types.ts b/packages/next-admin/src/types.ts
@@ -122,6 +122,7 @@ export type FormatOptions<T> = T extends string
       | "alt-date"
       | "file"
       | `richtext-${RichTextFormat}`
+      | "json"
   : never | T extends Date
     ? "date" | "date-time" | "time"
     : never | T extends number