@satoshibits/react-json-schema-builder 1.0.0 → 1.0.1

package/dist/index.es3.js

@@ -1,90 +1,91 @@
 import { j as e } from "./index.es9.js";
-import { useState as a, useEffect as q, Fragment as le } from "react";
-import { useSchema as oe } from "./index.es2.js";
-import { Button as c } from "./index.es11.js";
-import { Breadcrumb as ae, BreadcrumbList as ce, BreadcrumbItem as V, BreadcrumbLink as $, BreadcrumbSeparator as de } from "./index.es12.js";
-import { Switch as me } from "./index.es13.js";
-import { Select as F, SelectTrigger as O, SelectValue as L, SelectContent as U, SelectItem as i } from "./index.es14.js";
-import { Label as H } from "./index.es15.js";
-import { a as _ } from "./index.es10.js";
-import { usePluginSystem as he, useConstraints as ue } from "./index.es4.js";
-import { EditPropertyDialog as je } from "./index.es16.js";
-import { AlertDialog as xe, AlertDialogContent as fe, AlertDialogHeader as pe, AlertDialogTitle as ge, AlertDialogDescription as ve, AlertDialogFooter as be, AlertDialogCancel as ye, AlertDialogAction as Ce } from "./index.es17.js";
-import { Alert as De, AlertTitle as Ae, AlertDescription as Se } from "./index.es18.js";
-import { validateSchema as Pe } from "./index.es19.js";
-import Ne from "ajv";
+import { useState as c, useEffect as $, Fragment as ce } from "react";
+import { useSchema as de } from "./index.es2.js";
+import { Button as d } from "./index.es11.js";
+import { Breadcrumb as me, BreadcrumbList as he, BreadcrumbItem as F, BreadcrumbLink as L, BreadcrumbSeparator as ue } from "./index.es12.js";
+import { Switch as je } from "./index.es13.js";
+import { Select as O, SelectTrigger as U, SelectValue as H, SelectContent as _, SelectItem as o } from "./index.es14.js";
+import { Label as G } from "./index.es15.js";
+import { a as J } from "./index.es10.js";
+import { usePluginSystem as xe, useConstraints as fe } from "./index.es4.js";
+import { EditPropertyDialog as pe } from "./index.es16.js";
+import { AlertDialog as ge, AlertDialogContent as ve, AlertDialogHeader as ye, AlertDialogTitle as be, AlertDialogDescription as Ce, AlertDialogFooter as De, AlertDialogCancel as Pe, AlertDialogAction as Se } from "./index.es17.js";
+import { Alert as Ae, AlertTitle as Ne, AlertDescription as Ee } from "./index.es18.js";
+import { validateSchema as we } from "./index.es19.js";
+import Be from "ajv";
 import { DebouncedInput as C } from "./index.es20.js";
-import { AddPropertyDialog as we } from "./index.es21.js";
-import Ee from "./index.es22.js";
-import Te from "./index.es23.js";
-import Be from "./index.es24.js";
-import ze from "./index.es25.js";
-import Ke from "./index.es26.js";
-const tr = (s) => {
-  const [G, g] = a(!1), [J, v] = a(!1), [M, h] = a(!1), [u, b] = a(), [D, A] = a(), [S, P] = a(), [j, x] = a(null);
-  he(s.plugins ?? []);
+import { AddPropertyDialog as Te } from "./index.es21.js";
+import { cn as D } from "./index.es22.js";
+import ze from "./index.es23.js";
+import Ke from "./index.es24.js";
+import Re from "./index.es25.js";
+import Ie from "./index.es26.js";
+import qe from "./index.es27.js";
+const at = (i) => {
+  const [M, u] = c(!1), [Q, v] = c(!1), [W, j] = c(!1), [x, y] = c(), [P, S] = c(), [A, N] = c(), [f, p] = c(null);
+  xe(i.plugins ?? []);
   const {
-    getCurrentSchema: N,
-    setPath: f,
-    path: d,
+    getCurrentSchema: E,
+    setPath: m,
+    path: a,
     schema: w,
-    handleAddProperty: E,
+    handleAddProperty: B,
     handlePropertyChange: l,
     handleKeyChange: T,
-    handleDeleteProperty: Q,
-    setSchema: W,
-    isPropertyRequired: y
-  } = oe(), { getConstraintDefinitionsForType: X } = ue();
-  q(() => {
-    if (s.schema)
+    handleDeleteProperty: X,
+    setSchema: Y,
+    isPropertyRequired: b
+  } = de(), { getConstraintDefinitionsForType: Z } = fe();
+  $(() => {
+    if (i.initialSchema)
       try {
-        Pe(s.schema), W(_(s.schema)), x(null);
-      } catch (r) {
-        r instanceof Error ? x(r.message) : r instanceof Ne.ValidationError ? x(`Schema validation error: ${r.message}`) : x("Unknown schema validation error");
+        we(i.initialSchema), Y(J(i.initialSchema)), p(null);
+      } catch (t) {
+        t instanceof Error ? p(t.message) : t instanceof Be.ValidationError ? p(`Schema validation error: ${t.message}`) : p("Unknown schema validation error");
       }
-  }, [s.schema]), q(() => {
-    !j && s.onSchemaChange && s.onSchemaChange(w);
-  }, [w, j, s.onSchemaChange]);
-  const Y = N(), B = (r) => {
-    f([...d, r]);
-  }, Z = () => {
-    f(d.slice(0, -1));
-  }, k = (r, t) => {
-    A(r), P(t), v(!0);
-  }, z = (r) => {
-    b(r), h(!0);
-  }, ee = () => {
-    u && (Q(u), b(void 0)), h(!1);
+  }, [i.initialSchema]), $(() => {
+    !f && i.onSchemaChange && i.onSchemaChange(w);
+  }, [w, f, i.onSchemaChange]);
+  const k = E(), z = (t) => {
+    m([...a, t]);
+  }, K = () => {
+    m(a.slice(0, -1));
+  }, ee = (t, r) => {
+    S(t), N(r), v(!0);
+  }, R = (t) => {
+    y(t), j(!0);
+  }, te = () => {
+    x && (X(x), y(void 0)), j(!1);
   }, re = () => {
-    b(void 0), h(!1);
-  }, K = (r) => {
-    const t = N().properties;
-    if (!t || typeof t[r] == "boolean")
+    y(void 0), j(!1);
+  }, I = (t) => {
+    const r = E().properties;
+    if (!r || typeof r[t] == "boolean")
       return;
-    const n = t[r], m = `${r}_copy`, p = _(n), o = E(
-      m,
-      p,
-      y(r)
+    const n = r[t], h = `${t}_copy`, g = J(n), s = B(
+      h,
+      g,
+      b(t)
     );
-    o.status === "error" ? s.onPropertyAddError?.(o) : s.onPropertyAddSuccess?.(o);
-  }, te = (...r) => {
-    const t = E(...r);
-    t.status === "error" ? s.onPropertyAddError?.(t) : t.status === "success" && s.onPropertyAddSuccess?.(t), g(!1);
-  }, R = s.propertyComponent, ne = (r, t) => R ? /* @__PURE__ */ e.jsx(
-    R,
+    s.status === "error" ? i.onPropertyAddError?.(s) : i.onPropertyAddSuccess?.(s);
+  }, ne = (...t) => {
+    const r = B(...t);
+    r.status === "error" ? i.onPropertyAddError?.(r) : r.status === "success" && i.onPropertyAddSuccess?.(r), u(!1);
+  }, q = i.propertyComponent, ie = (t, r) => q ? /* @__PURE__ */ e.jsx(
+    q,
     {
       property: {
-        key: r,
-        schema: t,
-        isRequired: y(r)
+        key: t,
+        schema: r,
+        isRequired: b(t)
       },
       onPropertyChange: l,
       onKeyChange: T,
-      onDelete: z,
-      onDuplicate: K,
-      onNavigate: t.type === "object" || t.type === "array" && typeof t.items == "object" && t.items.type === "object" ? B : void 0
+      onDelete: R,
+      onDuplicate: I,
+      onNavigate: r.type === "object" || r.type === "array" && typeof r.items == "object" && r.items.type === "object" ? z : void 0
     },
-    r
+    t
   ) : /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -93,43 +94,43 @@ const tr = (s) => {
         /* @__PURE__ */ e.jsx("div", { className: "", children: /* @__PURE__ */ e.jsx(
           C,
           {
-            value: r,
-            onDebounce: (n) => T(r, n),
+            value: t,
+            onDebounce: (n) => T(t, n),
             placeholder: "Property Key",
-            "aria-label": `Property key for ${r}`,
+            "aria-label": `Property key for ${t}`,
             delay: 500
           }
         ) }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ e.jsx(
-            me,
+            je,
             {
-              checked: y(r),
-              onCheckedChange: (n) => l(r, { isRequired: n }),
+              checked: b(t),
+              onCheckedChange: (n) => l(t, { isRequired: n }),
               "aria-label": "Required"
             }
           ),
-          /* @__PURE__ */ e.jsx(H, { htmlFor: `required-${r}`, children: "Required" })
+          /* @__PURE__ */ e.jsx(G, { htmlFor: `required-${t}`, children: "Required" })
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "", children: /* @__PURE__ */ e.jsxs(
-          F,
+          O,
           {
-            value: typeof t == "object" && !Array.isArray(t.type) ? t.type : void 0,
-            onValueChange: (n) => l(r, {
+            value: typeof r == "object" && !Array.isArray(r.type) ? r.type : void 0,
+            onValueChange: (n) => l(t, {
               type: n
             }),
             "aria-label": "Type",
             children: [
-              /* @__PURE__ */ e.jsx(O, { className: "w-full", "aria-label": "Select type", children: /* @__PURE__ */ e.jsx(L, {}) }),
-              /* @__PURE__ */ e.jsxs(U, { children: [
-                /* @__PURE__ */ e.jsx(i, { value: "string", children: "string" }),
-                /* @__PURE__ */ e.jsx(i, { value: "number", children: "number" }),
-                /* @__PURE__ */ e.jsx(i, { value: "integer", children: "integer" }),
-                /* @__PURE__ */ e.jsx(i, { value: "boolean", children: "boolean" }),
-                /* @__PURE__ */ e.jsx(i, { value: "object", children: "object" }),
-                /* @__PURE__ */ e.jsx(i, { value: "array", children: "array" }),
-                /* @__PURE__ */ e.jsx(i, { value: "null", children: "null" }),
-                /* @__PURE__ */ e.jsx(i, { value: "enum", children: "enum" })
+              /* @__PURE__ */ e.jsx(U, { className: "w-full", "aria-label": "Select type", children: /* @__PURE__ */ e.jsx(H, {}) }),
+              /* @__PURE__ */ e.jsxs(_, { children: [
+                /* @__PURE__ */ e.jsx(o, { value: "string", children: "string" }),
+                /* @__PURE__ */ e.jsx(o, { value: "number", children: "number" }),
+                /* @__PURE__ */ e.jsx(o, { value: "integer", children: "integer" }),
+                /* @__PURE__ */ e.jsx(o, { value: "boolean", children: "boolean" }),
+                /* @__PURE__ */ e.jsx(o, { value: "object", children: "object" }),
+                /* @__PURE__ */ e.jsx(o, { value: "array", children: "array" }),
+                /* @__PURE__ */ e.jsx(o, { value: "null", children: "null" }),
+                /* @__PURE__ */ e.jsx(o, { value: "enum", children: "enum" })
               ] })
             ]
           }
@@ -137,201 +138,227 @@ const tr = (s) => {
         /* @__PURE__ */ e.jsx("div", { className: "", children: /* @__PURE__ */ e.jsx(
           C,
           {
-            value: typeof t == "object" ? t.title : void 0,
-            onDebounce: (n) => l(r, { title: n }),
+            value: typeof r == "object" ? r.title : void 0,
+            onDebounce: (n) => l(t, { title: n }),
             placeholder: "Title"
           }
         ) }),
         /* @__PURE__ */ e.jsx("div", { className: "", children: /* @__PURE__ */ e.jsx(
           C,
           {
-            value: typeof t == "object" ? t.description : void 0,
-            onDebounce: (n) => l(r, { description: n }),
+            value: typeof r == "object" ? r.description : void 0,
+            onDebounce: (n) => l(t, { description: n }),
             placeholder: "Description"
           }
         ) }),
         /* @__PURE__ */ e.jsxs("div", { className: "order-last md:order-none flex gap-2", children: [
           /* @__PURE__ */ e.jsx(
-            c,
+            d,
             {
               variant: "outline",
               size: "sm",
-              onClick: () => z(r),
+              onClick: () => R(t),
               "aria-label": "Delete",
               className: "block!",
-              children: /* @__PURE__ */ e.jsx(Te, { size: 16, className: "text-destructive" })
+              children: /* @__PURE__ */ e.jsx(Ke, { size: 16, className: "text-destructive" })
             }
           ),
           /* @__PURE__ */ e.jsx(
-            c,
+            d,
             {
               variant: "outline",
               size: "sm",
-              onClick: () => K(r),
+              onClick: () => I(t),
               "aria-label": "Duplicate",
               className: "block!",
-              children: /* @__PURE__ */ e.jsx(Be, { size: 16 })
+              children: /* @__PURE__ */ e.jsx(Re, { size: 16 })
             }
           ),
-          se(r, t),
-          I(r, t)
+          ae(t, r),
+          V(t, r)
         ] }),
-        ie(r, t)
+        oe(t, r)
       ]
     },
-    r
-  ), ie = (r, t) => {
-    if (typeof t != "object" || t.type !== "array")
+    t
+  ), oe = (t, r) => {
+    if (typeof r != "object" || r.type !== "array")
       return null;
-    const n = t.items, m = !Array.isArray(n) && typeof n == "object" && typeof n.type == "string" ? n?.type : "string";
+    const n = r.items, h = !Array.isArray(n) && typeof n == "object" && typeof n.type == "string" ? n?.type : "string";
     return /* @__PURE__ */ e.jsxs("div", { className: "col-span-full flex items-center gap-4 pl-8 mt-2 bg-gray-50 p-2 rounded-md", children: [
-      /* @__PURE__ */ e.jsx(H, { children: "Items of type:" }),
+      /* @__PURE__ */ e.jsx(G, { children: "Items of type:" }),
       /* @__PURE__ */ e.jsxs(
-        F,
+        O,
         {
-          value: m,
-          onValueChange: (p) => {
-            const o = {
+          value: h,
+          onValueChange: (g) => {
+            const s = {
               ...typeof n == "object" ? n : {},
-              type: p
+              type: g
             };
-            p === "object" && (o.properties = o.properties ?? {}), l(r, { items: o });
+            g === "object" && (s.properties = s.properties ?? {}), l(t, { items: s });
           },
           children: [
             /* @__PURE__ */ e.jsx(
-              O,
+              U,
               {
                 className: "w-[200px]",
                 "aria-label": "Select items of type",
-                children: /* @__PURE__ */ e.jsx(L, {})
+                children: /* @__PURE__ */ e.jsx(H, {})
               }
             ),
-            /* @__PURE__ */ e.jsxs(U, { children: [
-              /* @__PURE__ */ e.jsx(i, { value: "string", children: "string" }),
-              /* @__PURE__ */ e.jsx(i, { value: "number", children: "number" }),
-              /* @__PURE__ */ e.jsx(i, { value: "integer", children: "integer" }),
-              /* @__PURE__ */ e.jsx(i, { value: "boolean", children: "boolean" }),
-              /* @__PURE__ */ e.jsx(i, { value: "object", children: "object" }),
-              /* @__PURE__ */ e.jsx(i, { value: "array", children: "array" }),
-              /* @__PURE__ */ e.jsx(i, { value: "null", children: "null" })
+            /* @__PURE__ */ e.jsxs(_, { children: [
+              /* @__PURE__ */ e.jsx(o, { value: "string", children: "string" }),
+              /* @__PURE__ */ e.jsx(o, { value: "number", children: "number" }),
+              /* @__PURE__ */ e.jsx(o, { value: "integer", children: "integer" }),
+              /* @__PURE__ */ e.jsx(o, { value: "boolean", children: "boolean" }),
+              /* @__PURE__ */ e.jsx(o, { value: "object", children: "object" }),
+              /* @__PURE__ */ e.jsx(o, { value: "array", children: "array" }),
+              /* @__PURE__ */ e.jsx(o, { value: "null", children: "null" })
             ] })
           ]
         }
       ),
-      I(r, n)
+      V(t, n)
     ] });
-  }, se = (r, t) => {
-    if (typeof t != "object") return null;
-    const n = X(
-      typeof t.type == "string" ? t.type : ""
-    ), m = Array.isArray(t?.enum);
-    return n.length || m ? /* @__PURE__ */ e.jsx(
-      c,
+  }, ae = (t, r) => {
+    if (typeof r != "object") return null;
+    const n = Z(
+      typeof r.type == "string" ? r.type : ""
+    ), h = Array.isArray(r?.enum);
+    return n.length || h ? /* @__PURE__ */ e.jsx(
+      d,
       {
         variant: "outline",
         size: "sm",
-        onClick: () => k(r, t),
+        onClick: () => ee(t, r),
         "aria-label": "Edit constraints",
-        children: /* @__PURE__ */ e.jsx(ze, { size: 16 })
+        children: /* @__PURE__ */ e.jsx(Ie, { size: 16 })
       }
     ) : null;
-  }, I = (r, t) => !Array.isArray(t) && typeof t == "object" && t?.type === "object" ? /* @__PURE__ */ e.jsxs(
-    c,
+  }, V = (t, r) => !Array.isArray(r) && typeof r == "object" && r?.type === "object" ? /* @__PURE__ */ e.jsxs(
+    d,
     {
       variant: "outline",
       size: "sm",
-      onClick: () => B(r),
+      onClick: () => z(t),
       "aria-label": "Navigate",
       children: [
         /* @__PURE__ */ e.jsx("span", { className: "sr-only", children: "Navigate" }),
-        /* @__PURE__ */ e.jsx(Ke, { size: 16 })
+        /* @__PURE__ */ e.jsx(qe, { size: 16 })
       ]
     }
-  ) : null;
-  return /* @__PURE__ */ e.jsxs("div", { children: [
-    j && /* @__PURE__ */ e.jsxs(De, { variant: "destructive", children: [
-      /* @__PURE__ */ e.jsx(Ae, { children: "Schema Error" }),
-      /* @__PURE__ */ e.jsx(Se, { children: j })
-    ] }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
+  ) : null, le = () => {
+    const t = i.navigationComponent;
+    return t ? /* @__PURE__ */ e.jsx(
+      t,
+      {
+        currentPath: a,
+        onNavigateUp: K,
+        onNavigateTo: m,
+        isRootPath: a.length === 0
+      }
+    ) : /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-4", children: [
       /* @__PURE__ */ e.jsx(
-        c,
+        d,
         {
           variant: "outline",
           size: "sm",
-          onClick: Z,
-          disabled: d.length === 0,
+          onClick: K,
+          disabled: a.length === 0,
+          className: D(i.backButtonClassName),
           children: "Back"
         }
       ),
-      /* @__PURE__ */ e.jsx(ae, { children: /* @__PURE__ */ e.jsxs(ce, { children: [
-        /* @__PURE__ */ e.jsx(V, { children: /* @__PURE__ */ e.jsx($, { href: "#", onClick: () => f([]), children: "Root" }) }),
-        d.map((r, t) => /* @__PURE__ */ e.jsxs(le, { children: [
-          /* @__PURE__ */ e.jsx(de, {}),
-          /* @__PURE__ */ e.jsx(V, { children: /* @__PURE__ */ e.jsx(
-            $,
+      /* @__PURE__ */ e.jsx(me, { children: /* @__PURE__ */ e.jsxs(he, { children: [
+        /* @__PURE__ */ e.jsx(F, { children: /* @__PURE__ */ e.jsx(L, { href: "#", onClick: () => m([]), children: "Root" }) }),
+        a.map((r, n) => /* @__PURE__ */ e.jsxs(ce, { children: [
+          /* @__PURE__ */ e.jsx(ue, {}),
+          /* @__PURE__ */ e.jsx(F, { children: /* @__PURE__ */ e.jsx(
+            L,
             {
               href: "#",
-              onClick: () => f(d.slice(0, t + 1)),
+              onClick: () => m(a.slice(0, n + 1)),
               children: r
             }
           ) })
-        ] }, `path-${t}`))
+        ] }, `path-${n}`))
       ] }) })
-    ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "mt-6 overflow-x-hidden min-w-dvw", children: Object.entries(Y.properties ?? {}).map(
-      ([r, t]) => typeof t == "boolean" ? null : ne(r, t)
-    ) }),
-    /* @__PURE__ */ e.jsxs(
-      c,
+    ] });
+  }, se = () => {
+    const t = i.addPropertyButtonComponent;
+    return t ? /* @__PURE__ */ e.jsx(
+      t,
+      {
+        onClick: () => u(!0)
+      }
+    ) : /* @__PURE__ */ e.jsxs(
+      d,
       {
-        className: "self-center",
+        className: D("self-center", i.addPropertyButtonClassName),
         onClick: () => {
-          g(!0);
+          u(!0);
         },
         children: [
-          /* @__PURE__ */ e.jsx(Ee, { className: "h-4 w-4 mr-2" }),
+          /* @__PURE__ */ e.jsx(ze, { className: "h-4 w-4 mr-2" }),
           "Add Property"
         ]
       }
+    );
+  };
+  return /* @__PURE__ */ e.jsxs("div", { children: [
+    f && /* @__PURE__ */ e.jsxs(Ae, { variant: "destructive", children: [
+      /* @__PURE__ */ e.jsx(Ne, { children: "Schema Error" }),
+      /* @__PURE__ */ e.jsx(Ee, { children: f })
+    ] }),
+    le(),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: D("mt-6 overflow-x-hidden", i.propertiesListClassName),
+        children: Object.entries(k.properties ?? {}).map(
+          ([t, r]) => typeof r == "boolean" ? null : ie(t, r)
+        )
+      }
     ),
+    se(),
     /* @__PURE__ */ e.jsx(
-      we,
+      Te,
       {
-        open: G,
-        onOpenChange: g,
-        onSubmit: te
+        open: M,
+        onOpenChange: u,
+        onSubmit: ne
       }
     ),
-    D && S && /* @__PURE__ */ e.jsx(
-      je,
+    P && A && /* @__PURE__ */ e.jsx(
+      pe,
       {
-        propertyKey: D,
-        property: S,
-        open: J,
+        propertyKey: P,
+        property: A,
+        open: Q,
         onOpenChange: v,
-        onSubmit: (r) => {
-          l(...r), A(void 0), P(void 0), v(!1);
+        onSubmit: (t) => {
+          l(...t), S(void 0), N(void 0), v(!1);
         }
       }
     ),
-    /* @__PURE__ */ e.jsx(xe, { open: M, onOpenChange: h, children: /* @__PURE__ */ e.jsxs(fe, { children: [
-      /* @__PURE__ */ e.jsxs(pe, { children: [
-        /* @__PURE__ */ e.jsx(ge, { children: "Are you sure?" }),
-        /* @__PURE__ */ e.jsxs(ve, { children: [
+    /* @__PURE__ */ e.jsx(ge, { open: W, onOpenChange: j, children: /* @__PURE__ */ e.jsxs(ve, { children: [
+      /* @__PURE__ */ e.jsxs(ye, { children: [
+        /* @__PURE__ */ e.jsx(be, { children: "Are you sure?" }),
+        /* @__PURE__ */ e.jsxs(Ce, { children: [
           "This action cannot be undone. This will permanently delete the property",
-          u ? ` "${u}"` : "",
+          x ? ` "${x}"` : "",
           " from the schema."
         ] })
       ] }),
-      /* @__PURE__ */ e.jsxs(be, { children: [
-        /* @__PURE__ */ e.jsx(ye, { onClick: re, children: "Cancel" }),
-        /* @__PURE__ */ e.jsx(Ce, { onClick: ee, children: "Delete" })
+      /* @__PURE__ */ e.jsxs(De, { children: [
+        /* @__PURE__ */ e.jsx(Pe, { onClick: re, children: "Cancel" }),
+        /* @__PURE__ */ e.jsx(Se, { onClick: te, children: "Delete" })
       ] })
     ] }) })
   ] });
 };
 export {
-  tr as SchemaBuilder
+  at as SchemaBuilder
 };
 //# sourceMappingURL=index.es3.js.map