public commit

app/src/ui/routes/test/tests/schema-test.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { useBknd } from "../../../client/BkndProvider";
+import { JsonSchemaForm } from "../../../components/form/json-schema/JsonSchemaForm";
+import { Scrollable } from "../../../layouts/AppShell/AppShell";
+
+function useSchema() {
+   const [schema, setSchema] = useState<any>();
+
+   useEffect(() => {
+      if (schema) return;
+
+      fetch("/api/system/schema")
+         .then((res) => res.json())
+         .then((data) => setSchema(data));
+   }, []);
+
+   return schema;
+}
+
+const uiSchema = {
+   auth: {
+      jwt: {
+         basepath: {
+            "ui:options": {
+               label: false
+            }
+         },
+         fields: {
+            "ui:options": {
+               label: false,
+               orderable: false
+            }
+         }
+      },
+      strategies: {
+         additionalProperties: {
+            "ui:widget": "select",
+            type: {
+               "ui:widget": "hidden"
+            }
+         },
+         type: {
+            "ui:widget": "hidden"
+         }
+      }
+   },
+   server: {
+      cors: {
+         allow_methods: {
+            "ui:widget": "checkboxes"
+         },
+         allow_headers: {
+            "ui:options": {
+               orderable: false
+            }
+         }
+      }
+   },
+   media: {
+      adapter: {
+         "ui:options": {
+            label: false
+         },
+         type: {
+            "ui:widget": "hidden"
+         }
+      }
+   }
+};
+
+export default function SchemaTest() {
+   const { app, schema } = useBknd();
+   const keys = ["auth", "server", "media", "data"] as const;
+   const [tab, setTab] = useState(keys[0]);
+   console.log("schema", schema, app.config);
+
+   if (!schema) return;
+
+   const current = {
+      key: tab,
+      schema: schema[tab],
+      uiSchema: uiSchema[tab] || {},
+      config: app.config[tab]
+   };
+   console.log("current", current);
+
+   return (
+      <Scrollable>
+         <div className="flex flex-col gap-2 p-3">
+            <div className="flex flex-row gap-2">
+               {keys.map((key) => (
+                  <button
+                     key={key}
+                     role="button"
+                     className={twMerge("flex py-2 px-3", key === tab && "bg-primary/5")}
+                     onClick={() => setTab(key as any)}
+                  >
+                     {key}
+                  </button>
+               ))}
+            </div>
+            <JsonSchemaForm
+               schema={current.schema}
+               formData={current.config}
+               uiSchema={current.uiSchema}
+               onChange={console.log}
+               className="legacy"
+            />
+         </div>
+      </Scrollable>
+   );
+}