@epam/ai-dial-ui-kit 0.14.0-dev.3 → 0.14.0-dev.32

package/dist/components/SchemaRenderer/components/SchemaAdditionalPropertiesEditor.js

@@ -0,0 +1,41 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as n, useEffect as f } from "react";
+import { useSchemaContext as u } from "../context.js";
+import { EditorThemes as x } from "../../../types/editor.js";
+const g = ({ value: i, onChange: s, theme: d = x.dark, height: a = 240 }) => {
+  const { readonly: m } = u(), [t, c] = n(null), [p, l] = n(
+    () => JSON.stringify(i, null, 2)
+  );
+  f(() => {
+    typeof window < "u" && import("../../JsonEditor/JsonEditor.js").then((e) => {
+      c(() => e.DialJsonEditor);
+    });
+  }, []);
+  const h = (e) => {
+    const o = e ?? "";
+    l(o);
+    try {
+      s(JSON.parse(o));
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "border border-primary rounded",
+      style: { height: `${a}px` },
+      children: t && /* @__PURE__ */ r(
+        t,
+        {
+          value: p,
+          currentTheme: d,
+          onChange: h,
+          options: { readOnly: m }
+        }
+      )
+    }
+  );
+};
+export {
+  g as SchemaAdditionalPropertiesEditor
+};

package/dist/components/SchemaRenderer/components/SchemaAnyOfEditor.js

@@ -0,0 +1,74 @@
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { DialSelect as x } from "../../Select/Select.js";
+import { JsonSchemaType as a } from "../types.js";
+import { useSchemaContext as N } from "../context.js";
+import { getOptionLabel as k, detectAnyOfVariant as O, resolveRef as d, extractDefaults as w } from "../utils.js";
+import { SchemaFieldContent as A } from "./SchemaFieldContent.js";
+const J = ({
+  schema: f,
+  value: n,
+  onChange: e,
+  path: p,
+  level: u
+}) => {
+  const { rootSchema: s, readonly: S = !1 } = N(), l = f.anyOf ?? [], b = l.map((t, r) => ({
+    value: String(r),
+    label: k(t, s)
+  })), i = O(n, l, s), o = l[i], y = d(o, s).type === a.Null, h = (t) => {
+    const r = d(l[t], s);
+    if (r.type === a.Null) {
+      e(null);
+      return;
+    }
+    const m = w(r, s);
+    if (m !== void 0) {
+      e(m);
+      return;
+    }
+    switch (r.type) {
+      case a.Array:
+        e([]);
+        break;
+      case a.String:
+        e("");
+        break;
+      case a.Boolean:
+        e(!1);
+        break;
+      case a.Integer:
+      case a.Number:
+        e(0);
+        break;
+      default:
+        e({});
+        break;
+    }
+  };
+  return /* @__PURE__ */ v("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ c("div", { className: "flex-1 max-w-[280px]", children: /* @__PURE__ */ c(
+      x,
+      {
+        options: b,
+        value: String(i),
+        disabled: S,
+        onChange: (t) => {
+          const r = typeof t == "string" ? t : t[0];
+          h(Number(r));
+        }
+      }
+    ) }),
+    !y && o && /* @__PURE__ */ c("div", { className: "pl-3 border-l-2 border-secondary", children: /* @__PURE__ */ c(
+      A,
+      {
+        schema: o,
+        value: n,
+        onChange: e,
+        path: p,
+        level: u
+      }
+    ) })
+  ] });
+};
+export {
+  J as SchemaAnyOfEditor
+};

package/dist/components/SchemaRenderer/components/SchemaArrayEditor.js

@@ -0,0 +1,118 @@
+import { jsx as a, jsxs as x } from "react/jsx-runtime";
+import { useState as k, useMemo as p } from "react";
+import { IconPlus as w } from "@tabler/icons-react";
+import { DialSelect as B } from "../../Select/Select.js";
+import { DialGhostButton as E } from "../../Button/ButtonWrappers.js";
+import { useSchemaContext as L } from "../context.js";
+import { resolveRef as g, getItemTitle as O, buildSummary as P, validateRequired as q, extractDefaults as A, getSchemaDefault as z } from "../utils.js";
+import { SchemaSection as F } from "./SchemaSection.js";
+import { SchemaFieldContent as G } from "./SchemaFieldContent.js";
+const W = ({
+  schema: I,
+  value: h,
+  onChange: f,
+  path: u,
+  level: y
+}) => {
+  const {
+    rootSchema: r,
+    texts: m,
+    readonly: v = !1,
+    defaultExpanded: T = !0
+  } = L(), n = Array.isArray(h) ? h : [], i = I.items, [S, N] = k(
+    void 0
+  );
+  if (!i)
+    return /* @__PURE__ */ a("p", { className: "dial-tiny-text text-secondary italic", children: m.noItemSchema });
+  const l = p(
+    () => g(i, r),
+    [i, r]
+  ), o = p(
+    () => l.discriminator,
+    [l]
+  ), b = p(
+    () => o?.propertyName,
+    [o]
+  ), c = p(
+    () => o ? Object.keys(o.mapping).map((e) => ({
+      value: e,
+      label: e
+    })) : [],
+    [o]
+  ), C = () => {
+    const e = S ?? c[0]?.value;
+    let t;
+    if (o && e) {
+      const s = g(
+        { $ref: o.mapping[e] },
+        r
+      );
+      t = { ...A(s, r) ?? {}, [o.propertyName]: e };
+    } else
+      t = A(l, r) ?? z(l);
+    f([...n, t]);
+  }, j = (e) => {
+    f(n.filter((t, s) => s !== e));
+  }, D = (e, t) => {
+    f(n.map((s, d) => d === e ? t : s));
+  };
+  return /* @__PURE__ */ x("div", { className: "flex flex-col gap-3", children: [
+    n.length === 0 && /* @__PURE__ */ a("p", { className: "dial-tiny-text text-secondary italic", children: m.noItemsYet }),
+    n.map((e, t) => {
+      const s = O(e, b, t), d = P(e, l, r), R = q(
+        e,
+        l,
+        r,
+        `${u.join(".")}[${t}]`
+      );
+      return /* @__PURE__ */ a(
+        F,
+        {
+          title: s,
+          level: y,
+          summary: d,
+          errorCount: R.length,
+          onRemove: v ? void 0 : () => j(t),
+          defaultExpanded: T,
+          removeItemAriaLabel: m.removeItemAriaLabel,
+          children: /* @__PURE__ */ a(
+            G,
+            {
+              schema: i,
+              value: e,
+              onChange: ($) => D(t, $),
+              path: [...u, String(t)],
+              level: y + 1
+            }
+          )
+        },
+        t
+      );
+    }),
+    !v && /* @__PURE__ */ x("div", { className: "flex items-center gap-2 pt-1", children: [
+      c.length > 0 && /* @__PURE__ */ a("div", { className: "flex-1 max-w-[280px]", children: /* @__PURE__ */ a(
+        B,
+        {
+          options: c,
+          value: S ?? c[0]?.value,
+          placeholder: m.selectTypeToAdd,
+          onChange: (e) => {
+            const t = typeof e == "string" ? e : e[0];
+            N(t);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ a(
+        E,
+        {
+          label: m.addItem,
+          iconBefore: /* @__PURE__ */ a(w, { size: 16, stroke: 2 }),
+          onClick: C
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  W as SchemaArrayEditor
+};

package/dist/components/SchemaRenderer/components/SchemaField.js

@@ -0,0 +1,78 @@
+import { jsx as i } from "react/jsx-runtime";
+import { DialFormItem as g } from "../../FormItem/FormItem.js";
+import { JsonSchemaType as A } from "../types.js";
+import { useSchemaContext as C } from "../context.js";
+import { resolveRef as E, isObjectType as I, buildSummary as O, validateRequired as b, isMissingRequiredValue as k } from "../utils.js";
+import { SchemaSection as w } from "./SchemaSection.js";
+import { SchemaFieldContent as u } from "./SchemaFieldContent.js";
+const q = ({
+  schema: f,
+  value: t,
+  onChange: d,
+  path: e,
+  level: s = 0,
+  required: r,
+  label: n
+}) => {
+  const {
+    rootSchema: c,
+    defaultExpanded: S = !0,
+    touchedPaths: m = /* @__PURE__ */ new Set(),
+    skipUntouched: h = !1
+  } = C(), o = E(f, c), a = I(o), l = o.type === A.Array;
+  if (a || l) {
+    const j = O(t, o, c), x = b(
+      t,
+      o,
+      c,
+      e.join(".")
+    ), p = e.join("."), T = p + ".", F = !h || m.has(p) || [...m].some((R) => R.startsWith(T));
+    return /* @__PURE__ */ i(
+      w,
+      {
+        title: n ?? o.title ?? e[e.length - 1] ?? "Section",
+        description: o.description,
+        level: s,
+        summary: j,
+        errorCount: F ? x.length : 0,
+        defaultExpanded: S,
+        children: /* @__PURE__ */ i(
+          u,
+          {
+            schema: o,
+            value: t,
+            onChange: d,
+            path: e,
+            level: s + 1,
+            required: r
+          }
+        )
+      }
+    );
+  }
+  const y = (!h || m.has(e.join("."))) && r && k(t) ? `${n ?? "Field"} is required` : void 0;
+  return /* @__PURE__ */ i(
+    g,
+    {
+      label: n,
+      required: r,
+      description: o.description,
+      error: y,
+      children: /* @__PURE__ */ i(
+        u,
+        {
+          schema: o,
+          value: t,
+          onChange: d,
+          path: e,
+          level: s,
+          required: r,
+          suppressInlineError: !0
+        }
+      )
+    }
+  );
+};
+export {
+  q as SchemaField
+};

package/dist/components/SchemaRenderer/components/SchemaFieldContent.js

@@ -0,0 +1,114 @@
+import { jsx as t, jsxs as O, Fragment as P } from "react/jsx-runtime";
+import { DialErrorText as x } from "../../CaptionText/CaptionText.js";
+import { JsonSchemaType as c } from "../types.js";
+import { useSchemaContext as F } from "../context.js";
+import { resolveRef as T, isObjectType as u, isMissingRequiredValue as A } from "../utils.js";
+import { SchemaObjectEditor as b } from "./SchemaObjectEditor.js";
+import { SchemaArrayEditor as k } from "./SchemaArrayEditor.js";
+import { SchemaOneOfEditor as q } from "./SchemaOneOfEditor.js";
+import { SchemaAnyOfEditor as M } from "./SchemaAnyOfEditor.js";
+import { SchemaKeyValueEditor as R } from "./SchemaKeyValueEditor.js";
+import { SchemaPrimitiveField as V } from "./SchemaPrimitiveField.js";
+import { SchemaAdditionalPropertiesEditor as w } from "./SchemaAdditionalPropertiesEditor.js";
+const Q = ({
+  schema: h,
+  value: i,
+  onChange: f,
+  path: r,
+  level: m,
+  required: p,
+  suppressInlineError: l = !1
+}) => {
+  const {
+    rootSchema: g,
+    renderField: d,
+    markTouched: S = () => {
+    },
+    touchedPaths: y = /* @__PURE__ */ new Set(),
+    skipUntouched: C = !1,
+    jsonEditorTheme: E
+  } = F(), e = T(h, g), s = (n) => {
+    S(r.join(".")), f(n);
+  }, j = !C || y.has(r.join("."));
+  let o;
+  if (e.oneOf)
+    o = /* @__PURE__ */ t(
+      q,
+      {
+        schema: e,
+        value: i,
+        onChange: s,
+        path: r,
+        level: m
+      }
+    );
+  else if (e.anyOf && e.type !== c.Object)
+    o = /* @__PURE__ */ t(
+      M,
+      {
+        schema: e,
+        value: i,
+        onChange: s,
+        path: r,
+        level: m
+      }
+    );
+  else if (u(e)) {
+    const n = e.additionalProperties != null && e.additionalProperties !== !1, a = !e.properties || Object.keys(e.properties).length === 0;
+    n && a ? o = /* @__PURE__ */ t(
+      R,
+      {
+        schema: e,
+        value: i,
+        onChange: s,
+        path: r,
+        level: m
+      }
+    ) : a && e.additionalProperties !== !1 ? o = /* @__PURE__ */ t(
+      w,
+      {
+        value: i,
+        onChange: s,
+        theme: E
+      }
+    ) : o = /* @__PURE__ */ t(
+      b,
+      {
+        schema: e,
+        value: i,
+        onChange: s,
+        path: r,
+        level: m
+      }
+    );
+  } else if (e.type === c.Array)
+    o = /* @__PURE__ */ t(
+      k,
+      {
+        schema: e,
+        value: i,
+        onChange: s,
+        path: r,
+        level: m
+      }
+    );
+  else {
+    const n = j && p && A(i), a = !l && n ? `${e.title ?? "Field"} is required` : void 0;
+    o = /* @__PURE__ */ O(P, { children: [
+      /* @__PURE__ */ t(
+        V,
+        {
+          schema: e,
+          value: i,
+          onChange: s,
+          invalid: n
+        }
+      ),
+      /* @__PURE__ */ t(x, { text: a })
+    ] });
+  }
+  return d ? d(r, e, o) : o;
+};
+export {
+  Q as SchemaFieldContent
+};

package/dist/components/SchemaRenderer/components/SchemaKeyValueEditor.js

@@ -0,0 +1,184 @@
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import { useState as T } from "react";
+import { IconPlus as K } from "@tabler/icons-react";
+import { DialInput as A } from "../../Input/Input.js";
+import { DialErrorText as V } from "../../CaptionText/CaptionText.js";
+import { DialGhostButton as z } from "../../Button/ButtonWrappers.js";
+import { DialRemoveButton as H } from "../../RemoveButton/RemoveButton.js";
+import { ElementSize as q } from "../../../types/size.js";
+import { JsonSchemaType as L } from "../types.js";
+import { useSchemaContext as E } from "../context.js";
+import { resolveRef as G, isObjectType as J, buildSummary as M, validateRequired as U, extractDefaults as Y, getSchemaDefault as _ } from "../utils.js";
+import { SchemaPrimitiveField as $ } from "./SchemaPrimitiveField.js";
+import { SchemaSection as Q } from "./SchemaSection.js";
+import { SchemaFieldContent as W } from "./SchemaFieldContent.js";
+const R = (n, i) => ({
+  id: Math.random().toString(36).slice(2),
+  key: n,
+  value: i
+}), F = (n) => !!(n.oneOf || n.anyOf || n.type === L.Array || J(n)), X = ({
+  pairId: n,
+  pairKey: i,
+  pairValue: s,
+  valueSchema: c,
+  onKeyChange: k,
+  onValueChange: p,
+  onRemove: d,
+  keyInputPlaceholder: x,
+  removeFieldAriaLabel: C,
+  path: m,
+  level: h,
+  readonly: l = !1,
+  inputClassName: u
+}) => {
+  const {
+    rootSchema: f,
+    texts: g,
+    defaultExpanded: N = !0,
+    touchedPaths: S = /* @__PURE__ */ new Set(),
+    markTouched: b = () => {
+    },
+    skipUntouched: P = !1
+  } = E(), [e, t] = T(i), o = F(c), r = [...m, n, "key"].join("."), w = (!P || S.has(r)) && i === "", j = /* @__PURE__ */ y("div", { className: "flex gap-2 items-start", children: [
+    /* @__PURE__ */ y("div", { className: o ? "flex-1 min-w-0" : "w-2/5 min-w-0", children: [
+      /* @__PURE__ */ a(
+        A,
+        {
+          value: e,
+          disabled: l,
+          invalid: w,
+          onChange: (I) => t(I ?? ""),
+          onBlur: () => {
+            b(r), e !== i && k(e);
+          },
+          placeholder: x,
+          containerClassName: u
+        }
+      ),
+      /* @__PURE__ */ a(
+        V,
+        {
+          text: w ? `${g.keyColumnHeader} is required` : void 0
+        }
+      )
+    ] }),
+    !o && /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ a(
+      $,
+      {
+        schema: c,
+        value: s,
+        onChange: p
+      }
+    ) }),
+    !l && /* @__PURE__ */ a(
+      H,
+      {
+        size: q.Small,
+        onClick: d,
+        "aria-label": C,
+        className: "shrink-0 p-1"
+      }
+    )
+  ] });
+  if (!o) return j;
+  const D = [...m, i], O = M(s, c, f), B = U(
+    s,
+    c,
+    f,
+    D.join(".")
+  );
+  return /* @__PURE__ */ y("div", { className: "flex flex-col gap-2", children: [
+    j,
+    /* @__PURE__ */ a(
+      Q,
+      {
+        title: i,
+        level: h,
+        summary: O,
+        errorCount: B.length + (w ? 1 : 0),
+        defaultExpanded: N,
+        children: /* @__PURE__ */ a(
+          W,
+          {
+            schema: c,
+            value: s,
+            onChange: p,
+            path: D,
+            level: h + 1
+          }
+        )
+      }
+    )
+  ] });
+}, fe = ({
+  schema: n,
+  value: i,
+  onChange: s,
+  path: c,
+  level: k
+}) => {
+  const {
+    rootSchema: p,
+    texts: d,
+    readonly: x = !1,
+    inputClassName: C
+  } = E(), m = n.additionalProperties === !0 || n.additionalProperties == null ? { type: "string" } : typeof n.additionalProperties == "object" ? G(n.additionalProperties, p) : { type: "string" }, h = F(m), [l, u] = T(
+    () => Object.entries(i ?? {}).map(
+      ([e, t]) => R(e, t)
+    )
+  ), f = (e) => Object.fromEntries(
+    e.filter((t) => t.key !== "").map((t) => [t.key, t.value])
+  ), g = (e, t) => {
+    const o = l.map(
+      (r, v) => v === e ? { ...r, key: t } : r
+    );
+    u(o), s(f(o));
+  }, N = (e, t) => {
+    const o = l.map(
+      (r, v) => v === e ? { ...r, value: t } : r
+    );
+    u(o), s(f(o));
+  }, S = () => h ? Y(m, p) ?? _(m) : "", b = () => {
+    u((e) => [...e, R("", S())]);
+  }, P = (e) => {
+    const t = l.filter((o, r) => r !== e);
+    u(t), s(f(t));
+  };
+  return /* @__PURE__ */ y("div", { className: "flex flex-col gap-2", children: [
+    l.length === 0 && /* @__PURE__ */ a("p", { className: "dial-tiny-text text-secondary italic", children: d.noFieldsYet }),
+    l.length > 0 && !h && /* @__PURE__ */ y("div", { className: "flex gap-2 mb-1 pr-7", children: [
+      /* @__PURE__ */ a("span", { className: "w-2/5 dial-tiny-text text-secondary font-medium", children: d.keyColumnHeader }),
+      /* @__PURE__ */ a("span", { className: "flex-1 dial-tiny-text text-secondary font-medium", children: d.valueColumnHeader })
+    ] }),
+    l.map((e, t) => /* @__PURE__ */ a(
+      X,
+      {
+        pairId: e.id,
+        pairKey: e.key,
+        pairValue: e.value,
+        valueSchema: m,
+        onKeyChange: (o) => g(t, o),
+        onValueChange: (o) => N(t, o),
+        onRemove: () => P(t),
+        keyInputPlaceholder: d.keyInputPlaceholder,
+        removeFieldAriaLabel: d.removeFieldAriaLabel,
+        path: c,
+        level: k,
+        readonly: x,
+        inputClassName: C
+      },
+      e.id
+    )),
+    !x && /* @__PURE__ */ a("div", { className: "pt-1", children: /* @__PURE__ */ a(
+      z,
+      {
+        label: d.addField,
+        iconBefore: /* @__PURE__ */ a(K, { size: 16, stroke: 2 }),
+        onClick: b
+      }
+    ) })
+  ] });
+};
+export {
+  fe as SchemaKeyValueEditor
+};

package/dist/components/SchemaRenderer/components/SchemaObjectEditor.js

@@ -0,0 +1,36 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useSchemaContext as v } from "../context.js";
+import { resolveRef as i, sortByPropertyOrder as g, toFieldLabel as j } from "../utils.js";
+import { SchemaField as q } from "./SchemaField.js";
+const N = ({
+  schema: c,
+  value: a,
+  onChange: d,
+  path: p,
+  level: m
+}) => {
+  const { rootSchema: r, texts: u } = v(), s = i(c, r), l = g(
+    Object.entries(s.properties ?? {}).filter(
+      ([, e]) => !i(e, r).isHidden
+    )
+  ), f = s.required ?? [], n = a ?? {};
+  return l.length === 0 ? /* @__PURE__ */ o("p", { className: "dial-tiny-text text-secondary italic", children: u.noConfigurableProperties }) : /* @__PURE__ */ o("div", { className: "flex flex-col gap-4", children: l.map(([e, t]) => {
+    const h = i(t, r).title ?? t.title ?? j(e), x = f.includes(e);
+    return /* @__PURE__ */ o(
+      q,
+      {
+        schema: t,
+        value: n[e],
+        onChange: (b) => d({ ...n, [e]: b }),
+        path: [...p, e],
+        level: m,
+        required: x,
+        label: h
+      },
+      e
+    );
+  }) });
+};
+export {
+  N as SchemaObjectEditor
+};