@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.51

package/dist/components/New/SchemaRenderer/SchemaRenderer.js

@@ -0,0 +1,164 @@
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import { useMemo as b, useState as L, useCallback as Q, useEffect as U } from "react";
+import { DEFAULT_SCHEMA_TEXTS as W } from "../../../constants/schema-renderer.js";
+import { DIAL_KIT_CLASS as Y } from "../../../constants/public-class-names.js";
+import { SchemaRendererVariant as c } from "../../../types/json-schema.js";
+import { extractDefaults as Z, sortByPropertyOrder as $, resolveRef as P, toFieldLabel as R, validateRequired as y, isMissingRequiredValue as k } from "../../../utils/json-schema.js";
+import { mergeClasses as ee } from "../../../utils/merge-classes.js";
+import { SchemaField as re } from "./components/SchemaField.js";
+import { SchemaFieldContent as q } from "./components/SchemaFieldContent.js";
+import { SchemaJsonEditor as te } from "./components/SchemaJsonEditor.js";
+import { SchemaSection as T } from "./components/SchemaSection.js";
+import { SchemaRendererContext as oe, isPathTouched as le } from "./context.js";
+const F = "dial-small-semi-text text-primary", ge = ({
+  schema: t,
+  defaultValue: f,
+  texts: p,
+  className: N,
+  readonly: j = !1,
+  defaultExpanded: m = !0,
+  inputClassName: A,
+  variant: d = c.Sections,
+  onChange: M,
+  onPropertyChange: O,
+  onDefaultValues: _,
+  renderField: D,
+  skipUntouched: S = !1,
+  acceptableResourceTypes: E
+}) => {
+  const H = b(
+    () => ({ ...W, ...p }),
+    [p]
+  ), g = b(() => f || (Z(t, t) ?? {}), []), [n, K] = L(g), [C, V] = L(
+    () => /* @__PURE__ */ new Set()
+  ), w = Q((e) => {
+    V(
+      (r) => r.has(e) ? r : /* @__PURE__ */ new Set([...r, e])
+    );
+  }, []);
+  U(() => {
+    _?.(g);
+  }, []);
+  const v = (e, r) => {
+    const o = { ...n, [e]: r };
+    K(o), M?.(o), O?.(e, r);
+  }, I = new Set(Object.keys(t.properties ?? {})), B = Object.keys(n).filter(
+    (e) => !I.has(e)
+  ), J = $(
+    Object.entries(t.properties ?? {}).filter(
+      ([, e]) => !P(e, t).isHidden
+    )
+  ), X = t.required ?? [];
+  return /* @__PURE__ */ l(
+    oe.Provider,
+    {
+      value: {
+        rootSchema: t,
+        texts: H,
+        readonly: j,
+        defaultExpanded: m,
+        inputClassName: A,
+        acceptableResourceTypes: E,
+        renderField: D,
+        touchedPaths: C,
+        markTouched: w,
+        skipUntouched: S
+      },
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          className: ee(
+            "flex flex-col gap-4",
+            N,
+            Y.schemaRenderer
+          ),
+          children: [
+            J.map(([e, r]) => {
+              const o = P(r, t), s = o.title ?? r.title ?? R(e), a = X.includes(e), i = n[e], u = (G) => v(e, G);
+              if (d === c.Flat)
+                return /* @__PURE__ */ l(
+                  re,
+                  {
+                    schema: r,
+                    value: i,
+                    onChange: u,
+                    path: [e],
+                    level: 0,
+                    required: a,
+                    label: s
+                  },
+                  e
+                );
+              if (d === c.FlatSections)
+                return /* @__PURE__ */ h("section", { className: "flex flex-col gap-3", children: [
+                  /* @__PURE__ */ l("h2", { className: F, children: s }),
+                  /* @__PURE__ */ l(
+                    q,
+                    {
+                      schema: r,
+                      value: i,
+                      onChange: u,
+                      path: [e],
+                      level: 0,
+                      required: a,
+                      ariaLabel: s
+                    }
+                  )
+                ] }, e);
+              const x = y(i, o, t, e), z = a && k(i) ? Math.max(x.length, 1) : x.length;
+              return /* @__PURE__ */ l(
+                T,
+                {
+                  title: s,
+                  description: o.description,
+                  level: 0,
+                  defaultExpanded: m,
+                  errorCount: le(e, C, S, !0) ? z : 0,
+                  children: /* @__PURE__ */ l(
+                    q,
+                    {
+                      schema: r,
+                      value: i,
+                      onChange: u,
+                      path: [e],
+                      level: 1,
+                      required: a,
+                      ariaLabel: s
+                    }
+                  )
+                },
+                e
+              );
+            }),
+            B.map((e) => {
+              const r = R(e), o = /* @__PURE__ */ l(
+                te,
+                {
+                  value: n[e],
+                  onChange: (s) => v(e, s),
+                  ariaLabel: r
+                }
+              );
+              return d === c.Sections ? /* @__PURE__ */ l(
+                T,
+                {
+                  title: r,
+                  level: 0,
+                  defaultExpanded: m,
+                  children: o
+                },
+                e
+              ) : /* @__PURE__ */ h("section", { className: "flex flex-col gap-3", children: [
+                /* @__PURE__ */ l("h2", { className: F, children: r }),
+                o
+              ] }, e);
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ge as SchemaRenderer
+};

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

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

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

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

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

@@ -0,0 +1,83 @@
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import { useId as F } from "react";
+import { ErrorText as R } from "../../CaptionText/CaptionText.js";
+import { Label as T } from "../../Label/Label.js";
+import { JsonSchemaType as E } from "../../../../types/json-schema.js";
+import { resolveRef as I, isObjectType as L, validateRequired as b, buildSummary as C, isMissingRequiredValue as M, toRequiredMessage as N } from "../../../../utils/json-schema.js";
+import { useSchemaContext as P, isPathTouched as u } from "../context.js";
+import { SchemaFieldContent as x } from "./SchemaFieldContent.js";
+import { SchemaSection as k } from "./SchemaSection.js";
+const B = ({
+  schema: S,
+  value: r,
+  onChange: d,
+  path: o,
+  level: c = 0,
+  required: i,
+  label: s
+}) => {
+  const a = F(), {
+    rootSchema: m,
+    defaultExpanded: y = !0,
+    touchedPaths: p,
+    skipUntouched: l
+  } = P(), e = I(S, m), n = o.join(".");
+  if (L(e) || e.type === E.Array) {
+    const j = b(r, e, m, n), f = s ?? e.title ?? o[o.length - 1] ?? "Section";
+    return /* @__PURE__ */ t(
+      k,
+      {
+        title: f,
+        description: e.description,
+        level: c,
+        summary: C(r, e, m),
+        errorCount: u(n, p, l, !0) ? j.length : 0,
+        defaultExpanded: y,
+        children: /* @__PURE__ */ t(
+          x,
+          {
+            schema: e,
+            value: r,
+            onChange: d,
+            path: o,
+            level: c + 1,
+            required: i,
+            ariaLabel: f
+          }
+        )
+      }
+    );
+  }
+  const g = u(n, p, l) && i && M(r) ? N(s ?? "Field") : void 0;
+  return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ t(
+      T,
+      {
+        htmlFor: a,
+        label: s,
+        required: i,
+        caption: e.description
+      }
+    ),
+    /* @__PURE__ */ h("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ t(
+        x,
+        {
+          schema: e,
+          value: r,
+          onChange: d,
+          path: o,
+          level: c,
+          required: i,
+          suppressInlineError: !0,
+          fieldId: a,
+          ariaLabel: s
+        }
+      ),
+      /* @__PURE__ */ t(R, { text: g })
+    ] })
+  ] });
+};
+export {
+  B as SchemaField
+};

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

@@ -0,0 +1,72 @@
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+import { ErrorText as v } from "../../CaptionText/CaptionText.js";
+import { JsonSchemaType as f } from "../../../../types/json-schema.js";
+import { resolveRef as C, isObjectType as F, isMissingRequiredValue as T, toRequiredMessage as A } from "../../../../utils/json-schema.js";
+import { useSchemaContext as k, isPathTouched as M } from "../context.js";
+import { SchemaAnyOfEditor as R } from "./SchemaAnyOfEditor.js";
+import { SchemaArrayEditor as q } from "./SchemaArrayEditor.js";
+import { SchemaJsonEditor as J } from "./SchemaJsonEditor.js";
+import { SchemaKeyValueEditor as N } from "./SchemaKeyValueEditor.js";
+import { SchemaObjectEditor as V } from "./SchemaObjectEditor.js";
+import { SchemaOneOfEditor as B } from "./SchemaOneOfEditor.js";
+import { SchemaPrimitiveField as K } from "./SchemaPrimitiveField.js";
+const Z = ({
+  schema: h,
+  value: m,
+  onChange: S,
+  path: d,
+  level: y,
+  required: P,
+  suppressInlineError: g = !1,
+  fieldId: a,
+  ariaLabel: r
+}) => {
+  const { rootSchema: u, renderField: l, markTouched: x, touchedPaths: E, skipUntouched: O } = k(), e = C(h, u), p = d.join("."), c = (i) => {
+    x?.(p), S(i);
+  }, s = {
+    schema: e,
+    value: m,
+    onChange: c,
+    path: d,
+    level: y
+  };
+  let o;
+  if (e.oneOf)
+    o = /* @__PURE__ */ t(B, { ...s, ariaLabel: r });
+  else if (e.anyOf && e.type !== f.Object)
+    o = /* @__PURE__ */ t(R, { ...s, ariaLabel: r });
+  else if (F(e)) {
+    const i = e.additionalProperties != null && e.additionalProperties !== !1, n = !e.properties || Object.keys(e.properties).length === 0;
+    i && n ? o = /* @__PURE__ */ t(N, { ...s }) : n && e.additionalProperties !== !1 ? o = /* @__PURE__ */ t(
+      J,
+      {
+        value: m,
+        onChange: c,
+        id: a,
+        ariaLabel: r
+      }
+    ) : o = /* @__PURE__ */ t(V, { ...s });
+  } else if (e.type === f.Array)
+    o = /* @__PURE__ */ t(q, { ...s });
+  else {
+    const i = M(p, E, O) && !!P && T(m), n = !g && i ? A(e.title ?? r ?? "Field") : void 0;
+    o = /* @__PURE__ */ j("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ t(
+        K,
+        {
+          schema: e,
+          value: m,
+          onChange: c,
+          invalid: i,
+          id: a,
+          ariaLabel: r
+        }
+      ),
+      /* @__PURE__ */ t(v, { text: n })
+    ] });
+  }
+  return l ? l(d, e, o) : o;
+};
+export {
+  Z as SchemaFieldContent
+};

package/dist/components/New/SchemaRenderer/components/SchemaJsonEditor.js

@@ -0,0 +1,41 @@
+import { jsx as h } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Textarea as d, TextareaResize as f } from "../../Textarea/Textarea.js";
+import { useSchemaContext as u } from "../context.js";
+const t = (e) => {
+  try {
+    return JSON.parse(e), !0;
+  } catch {
+    return !1;
+  }
+}, x = ({
+  value: e,
+  onChange: s,
+  id: n,
+  ariaLabel: i
+}) => {
+  const { readonly: l, texts: c } = u(), [a, m] = p(
+    () => JSON.stringify(e, null, 2) ?? ""
+  ), o = !t(a);
+  return /* @__PURE__ */ h(
+    d,
+    {
+      id: n,
+      "aria-label": i,
+      value: a,
+      onChange: (r) => {
+        m(r), t(r) && s(JSON.parse(r));
+      },
+      readOnly: l,
+      invalid: o,
+      error: o ? c.invalidJsonError : void 0,
+      spellCheck: !1,
+      rows: 10,
+      resize: f.Vertical,
+      className: "font-mono !whitespace-pre"
+    }
+  );
+};
+export {
+  x as SchemaJsonEditor
+};