@devtron-labs/devtron-fe-common-lib 1.5.2-beta-1 → 1.5.2-beta-2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.5.2-beta-1",
+    "version": "1.5.2-beta-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -43,6 +43,7 @@
         "@tippyjs/react": "^4.2.0",
         "@typeform/embed-react": "2.20.0",
         "@types/dompurify": "^3.0.5",
+        "@types/json-schema": "^7.0.15",
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
@@ -60,10 +61,9 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "glob": "^10.3.3",
         "husky": "^7.0.4",
+        "json-schema": "^0.4.0",
         "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
-        "monaco-editor": "0.44.0",
-        "monaco-yaml": "5.1.1",
         "prettier": "^3.1.1",
         "react-ga4": "^1.4.1",
         "react-toastify": "9.1.3",
@@ -95,17 +95,23 @@
         "yaml": "^2.4.1"
     },
     "dependencies": {
+        "@codemirror/lang-json": "6.0.1",
+        "@codemirror/lang-yaml": "6.1.2",
+        "@codemirror/legacy-modes": "6.4.2",
         "@types/react-dates": "^21.8.6",
+        "@uiw/codemirror-theme-github": "^4.23.7",
+        "@uiw/react-codemirror": "4.23.7",
         "ansi_up": "^5.2.1",
+        "codemirror-json-schema": "0.8.0",
         "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
         "framer-motion": "^6.5.1",
         "jsonpath-plus": "^10.0.0",
         "marked": "^13.0.3",
         "nanoid": "^3.3.8",
+        "react-codemirror-merge": "4.23.6",
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
-        "react-monaco-editor": "^0.54.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",
         "tslib": "2.7.0"
@@ -116,9 +122,6 @@
             "react": "^17.0.2",
             "react-dom": "^17.0.2"
         },
-        "react-monaco-editor": {
-            "monaco-editor": "0.44.0"
-        },
         "vite-plugin-svgr": {
             "vite": "5.4.11"
         },

package/dist/@common-rjsf-DO7kJLDu.js

@@ -1,516 +0,0 @@
-import { j as t, J as $ } from "./@vendor-CwAQS8iU.js";
-import A, { forwardRef as E } from "react";
-import L, { getDefaultRegistry as D } from "@rjsf/core";
-import H from "@rjsf/validator-ajv8";
-import { T as v, c as U, a as k, i as J, b as w, d as S } from "./@code-editor-ZZG6aOfw.js";
-import M, { components as B } from "react-select";
-import { ReactComponent as W } from "./assets/ic-chevron-down.fc70d7a7.svg";
-import { getUiOptions as C, getTemplate as I, getSubmitButtonOptions as V, ADDITIONAL_PROPERTY_FLAG as P, errorId as q, englishStringTranslator as K, TranslatableString as Y, titleId as z, canExpand as G, deepEquals as Q } from "@rjsf/utils";
-import { ReactComponent as X } from "./assets/ic-add.cfaa779b.svg";
-import { ReactComponent as Z } from "./assets/ic-cross.01e03666.svg";
-import { ReactComponent as ee } from "./assets/ic-warning.10bcf8bd.svg";
-import './assets/@common-rjsf.css';const T = {
-  SELECT: "Please select an option",
-  INPUT: "Please enter an input",
-  OBJECT_KEY: "Please enter a value for the key"
-}, te = "Key not available", Ae = {
-  "ui:submitButtonOptions": {
-    norender: !0
-  }
-}, g = ({
-  showLabel: n,
-  label: e,
-  required: s,
-  children: a,
-  id: r,
-  rawDescription: o,
-  shouldAlignCenter: i = !0
-}) => /* @__PURE__ */ t.jsxs(
-  "div",
-  {
-    className: n ? `display-grid dc__gap-12 rjsf-form-template__field ${i ? "flex-align-center" : ""}` : "",
-    children: [
-      n && /* @__PURE__ */ t.jsxs("label", { className: "cn-7 fs-13 lh-20 fw-4 flexbox mb-0", htmlFor: r, children: [
-        /* @__PURE__ */ t.jsx(v, { alwaysShowTippyOnHover: !!o, content: o, children: /* @__PURE__ */ t.jsx("span", { className: `dc__ellipsis-right ${o ? "text-underline-dashed-300" : ""}`, children: e || te }) }),
-        s && /* @__PURE__ */ t.jsx("span", { className: "cr-5", children: " *" })
-      ] }),
-      a
-    ]
-  }
-), F = ({ label: n, canAdd: e, onAddClick: s, disabled: a, readonly: r, uiSchema: o, registry: i }) => {
-  const {
-    ButtonTemplates: { AddButton: c }
-  } = i.templates;
-  return e && /* @__PURE__ */ t.jsx(
-    c,
-    {
-      label: n,
-      onClick: s,
-      disabled: a || r,
-      uiSchema: o,
-      registry: i
-    }
-  );
-}, ne = ({
-  canAdd: n,
-  className: e,
-  disabled: s,
-  idSchema: a,
-  uiSchema: r,
-  items: o,
-  onAddClick: i,
-  readonly: c,
-  registry: l,
-  required: d,
-  title: f
-}) => {
-  const p = C(r), h = I("ArrayFieldItemTemplate", l, p), m = p.title || f;
-  return /* @__PURE__ */ t.jsx("fieldset", { className: e, id: a.$id, children: o.length ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    o.map(({ key: _, ...x }, j) => {
-      const u = {
-        ...x.children,
-        props: {
-          ...x.children.props
-        }
-      };
-      return /* @__PURE__ */ t.jsx(h, { ...x, children: u }, _);
-    }),
-    /* @__PURE__ */ t.jsx(
-      F,
-      {
-        label: m,
-        canAdd: n,
-        onAddClick: i,
-        disabled: s,
-        readonly: c,
-        uiSchema: r,
-        registry: l
-      }
-    )
-  ] }) : /* @__PURE__ */ t.jsx(g, { label: m, required: d, showLabel: !0, id: a.$id, children: /* @__PURE__ */ t.jsx(
-    F,
-    {
-      label: m,
-      canAdd: n,
-      onAddClick: i,
-      disabled: s,
-      readonly: c,
-      uiSchema: r,
-      registry: l
-    }
-  ) }) });
-}, se = ({
-  children: n,
-  disabled: e,
-  hasToolbar: s,
-  hasRemove: a,
-  index: r,
-  onDropIndexClick: o,
-  readonly: i,
-  registry: c,
-  uiSchema: l
-}) => {
-  const { RemoveButton: d } = c.templates.ButtonTemplates;
-  return /* @__PURE__ */ t.jsxs("div", { className: "dc__position-rel display-grid rjsf-form-template__array-field-item flex-align-center", children: [
-    n,
-    /* @__PURE__ */ t.jsx("div", { className: "dc__position-abs remove-btn__container", style: { right: "-28px", top: "9px" }, children: s && a && /* @__PURE__ */ t.jsx(
-      d,
-      {
-        disabled: e || i,
-        onClick: o(r),
-        uiSchema: l,
-        registry: c
-      }
-    ) })
-  ] });
-}, {
-  templates: { BaseInputTemplate: ae }
-} = D(), re = ({ placeholder: n, ...e }) => /* @__PURE__ */ t.jsx(
-  ae,
-  {
-    placeholder: n || T.INPUT,
-    ...e,
-    className: "form__input cn-9 fs-13 lh-20 fw-4"
-  }
-), R = ({
-  label: n,
-  icon: e,
-  iconType: s,
-  registry: a,
-  uiSchema: r,
-  ...o
-}) => {
-  const i = `Add ${n}`;
-  return /* @__PURE__ */ t.jsx("div", { className: "flexbox flex-justify-start", children: /* @__PURE__ */ t.jsxs(
-    "button",
-    {
-      ...o,
-      type: "button",
-      className: "dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor dc__mxw-250",
-      title: "Add",
-      children: [
-        /* @__PURE__ */ t.jsx(X, { className: "icon-dim-16 fcb-5" }),
-        /* @__PURE__ */ t.jsx(v, { placement: "right", content: i, children: /* @__PURE__ */ t.jsx("span", { className: "cb-5 fs-13 lh-34 dc__truncate", children: i }) })
-      ]
-    }
-  ) });
-}, oe = ({ icon: n, iconType: e, registry: s, uiSchema: a, ...r }) => /* @__PURE__ */ t.jsx("button", { ...r, type: "button", className: "dc__outline-none-imp p-0 dc__transparent flex cursor", title: "Remove", children: /* @__PURE__ */ t.jsx(Z, { className: "icon-dim-16 fcn-6" }) }), ie = ({ uiSchema: n }) => {
-  const { submitText: e, norender: s, props: a = {} } = V(n);
-  return s ? null : /* @__PURE__ */ t.jsx("div", { className: "flexbox flex-justify-end", children: /* @__PURE__ */ t.jsx("button", { type: "submit", ...a, className: `cta ${a.className || ""}`, children: e }) });
-}, N = ({
-  id: n,
-  title: e,
-  required: s,
-  description: a
-}) => /* @__PURE__ */ t.jsxs("legend", { className: "fs-13 fw-6 cn-9 lh-20 dc__no-border pb-9 mb-0", id: n, children: [
-  /* @__PURE__ */ t.jsx(v, { alwaysShowTippyOnHover: !!a, content: a, children: /* @__PURE__ */ t.jsx("span", { className: `${a ? "text-underline-dashed-300" : ""}`, children: e }) }),
-  s && /* @__PURE__ */ t.jsx("span", { className: "cr-5", children: " *" })
-] }), le = (n) => {
-  const {
-    id: e,
-    label: s,
-    children: a,
-    errors: r,
-    hidden: o,
-    required: i,
-    displayLabel: c,
-    registry: l,
-    uiSchema: d,
-    classNames: f,
-    schema: p,
-    rawDescription: h
-  } = n, m = C(d), _ = I(
-    "WrapIfAdditionalTemplate",
-    l,
-    m
-  ), x = P in p, j = (c || p.type === "boolean") && !x, u = p.type === "array";
-  return o ? /* @__PURE__ */ t.jsx("div", { className: "hidden", children: a }) : (
-    // NOTE: need to override the margins of default rjsf css
-    /* @__PURE__ */ t.jsxs("div", { className: `${f} mb-0`, children: [
-      u && /* @__PURE__ */ t.jsx(
-        N,
-        {
-          id: e,
-          title: s,
-          required: i,
-          registry: l,
-          uiSchema: d,
-          schema: p,
-          description: h
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        g,
-        {
-          label: s,
-          showLabel: j,
-          id: e,
-          required: i,
-          rawDescription: h,
-          children: /* @__PURE__ */ t.jsx(_, { ...n, children: a })
-        }
-      ),
-      r
-    ] })
-  );
-}, ce = ({ errors: n = [], idSchema: e }) => {
-  const s = q(e);
-  return n.length > 0 && /* @__PURE__ */ t.jsx("span", { className: "display-grid rjsf-form-template__field--error dc__gap-12", id: s, children: n.filter((a) => !!a).map((a, r) => /* @__PURE__ */ t.jsxs(A.Fragment, { children: [
-    /* @__PURE__ */ t.jsx("span", {}),
-    /* @__PURE__ */ t.jsxs("span", { className: "form__error", children: [
-      /* @__PURE__ */ t.jsx(ee, { className: "form__icon form__icon--error" }),
-      a
-    ] })
-  ] }, r)) });
-}, de = (n, e) => {
-  switch (n) {
-    case Y.NewStringDefault:
-      return "";
-    default:
-      return K(n, e);
-  }
-}, Ee = (n) => {
-  try {
-    const e = new URL(n).origin === window.location.origin;
-    return {
-      href: n,
-      target: e ? "_self" : "_blank",
-      rel: e ? void 0 : "external noreferrer",
-      url: n
-    };
-  } catch {
-    return {
-      href: n,
-      target: "_blank",
-      url: `${n} (Invalid URL)`
-    };
-  }
-}, Le = (n) => {
-  const e = typeof n;
-  switch (e) {
-    case "boolean":
-    case "string":
-    case "number":
-      return e;
-    case "object":
-      return Array.isArray(n) ? "array" : n === null ? "null" : e;
-    default:
-      return "null";
-  }
-}, y = (n) => {
-  if (!n)
-    return "";
-  const e = n.trim();
-  return e.match(/^\w+(\/\w+)*$/g) ? `/${e}` : e.match(/^\w+(\.\w+)*$/g) ? `/${e.replaceAll(/\./g, "/")}` : e;
-}, O = {
-  value: !1,
-  path: ""
-}, pe = (n) => {
-  if (!n)
-    return null;
-  const e = structuredClone(n);
-  return typeof e == "string" ? {
-    value: !0,
-    path: y(e)
-  } : typeof e != "object" ? structuredClone(O) : Object.hasOwn(e, "condition") && "condition" in e && Object.hasOwn(e, "value") && "value" in e ? {
-    value: e.condition,
-    path: y(e.value)
-  } : Object.hasOwn(e, "value") && "value" in e && Object.hasOwn(e, "path") && "path" in e ? {
-    value: e.value,
-    path: y(e.path)
-  } : structuredClone(O);
-}, me = ({
-  disabled: n,
-  formData: e,
-  idSchema: s,
-  onAddClick: a,
-  properties: r,
-  readonly: o,
-  registry: i,
-  required: c,
-  schema: l,
-  title: d,
-  uiSchema: f,
-  formContext: p
-}) => {
-  const h = !!l.additionalProperties, m = G(l, f, e) && /* @__PURE__ */ t.jsx(
-    R,
-    {
-      label: d,
-      className: "object-property-expand",
-      onClick: a(l),
-      disabled: n || o,
-      uiSchema: f,
-      registry: i
-    }
-  ), _ = r.filter((x) => {
-    const j = l.properties?.[x.name]?.hidden;
-    if (!j)
-      return !0;
-    try {
-      const u = pe(j);
-      if (!u.path)
-        throw new Error("Empty path property of hidden descriptor field");
-      if (!u.path.match(/^\/\w+(\/\w+)*$/g))
-        throw new Error("Provided path is not a valid JSON pointer");
-      const b = $({
-        path: U(u.path),
-        json: p
-      })?.[0];
-      return !(b === void 0 || Q(u.value, b));
-    } catch {
-      return !0;
-    }
-  }).sort((x) => l.properties?.[x.name]?.type === "boolean" ? -1 : 1).map((x) => x.content);
-  return h ? r.length ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(
-      g,
-      {
-        label: d,
-        required: c,
-        showLabel: !0,
-        id: s.$id,
-        shouldAlignCenter: !1,
-        children: /* @__PURE__ */ t.jsx("div", { children: _ })
-      }
-    ),
-    m
-  ] }) : /* @__PURE__ */ t.jsx(g, { label: d, required: c, showLabel: !0, id: s.$id, children: m }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    _,
-    m
-  ] });
-}, ue = (n) => {
-  const { idSchema: e, registry: s, required: a, schema: r, title: o, uiSchema: i, description: c } = n, l = !!r.additionalProperties, d = o && !l;
-  return /* @__PURE__ */ t.jsxs("fieldset", { id: e.$id, children: [
-    d && /* @__PURE__ */ t.jsx(
-      N,
-      {
-        id: z(e),
-        title: o,
-        required: a,
-        schema: r,
-        uiSchema: i,
-        registry: s,
-        description: c
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      "div",
-      {
-        className: `${r.properties && !l && e.$id !== "root" ? "dc__border-left pl-12" : ""} ${e.$id === "root" ? "dc__separated-flexbox dc__separated-flexbox--vertical" : "flexbox-col dc__gap-8"}`,
-        children: /* @__PURE__ */ t.jsx(me, { ...n })
-      }
-    )
-  ] });
-}, he = ({
-  id: n,
-  disabled: e,
-  label: s,
-  onKeyChange: a,
-  onDropPropertyClick: r,
-  readonly: o,
-  schema: i,
-  children: c,
-  uiSchema: l,
-  registry: d
-}) => {
-  const { templates: f } = d, { RemoveButton: p } = f.ButtonTemplates, h = P in i;
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: h ? /* @__PURE__ */ t.jsxs("div", { className: "dc__position-rel rjsf-form-template__additional-fields display-grid dc__gap-8 flex-align-center", children: [
-    /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-      "input",
-      {
-        type: "text",
-        className: "form__input cn-9 fs-13 lh-20 fw-4",
-        id: `${n}-key`,
-        onBlur: (m) => a(m.target.value),
-        placeholder: T.OBJECT_KEY,
-        defaultValue: s
-      }
-    ) }),
-    /* @__PURE__ */ t.jsx("div", { children: c }),
-    /* @__PURE__ */ t.jsx("div", { className: "dc__position-abs remove-btn__container", style: { right: "-28px", top: "9px" }, children: /* @__PURE__ */ t.jsx(
-      p,
-      {
-        disabled: e || o,
-        onClick: r(s),
-        uiSchema: l,
-        registry: d
-      }
-    ) })
-  ] }) : c });
-}, fe = ({
-  id: n,
-  onChange: e,
-  value: s,
-  required: a,
-  disabled: r,
-  readonly: o,
-  autofocus: i,
-  onBlur: c,
-  onFocus: l
-}) => {
-  const d = (p, h) => {
-    const { id: m, checked: _ } = p.target;
-    h === "blur" ? c(m, _) : h === "focus" && l(m, _);
-  }, f = J(s) ? !1 : s;
-  return /* @__PURE__ */ t.jsxs("div", { children: [
-    /* @__PURE__ */ t.jsx(
-      k,
-      {
-        selected: f,
-        onSelect: e,
-        id: n,
-        name: n,
-        required: a,
-        disabled: r || o,
-        autoFocus: i,
-        rootClassName: "w-32 mb-0 dc__height-inherit",
-        onBlur: (p) => d(p, "blur"),
-        onFocus: (p) => d(p, "focus")
-      }
-    ),
-    /* @__PURE__ */ t.jsx("span", { className: "dc__capitalize ml-8", children: f.toString() })
-  ] });
-}, xe = ({ children: n, ...e }) => /* @__PURE__ */ t.jsx(B.MenuList, { ...e, children: Array.isArray(n) ? n.slice(0, 20) : n }), je = (n) => /* @__PURE__ */ t.jsx(B.DropdownIndicator, { ...n, children: /* @__PURE__ */ t.jsx(W, { className: "icon-dim-20 icon-n5", "data-testid": "overview-project-edit-dropdown" }) }), _e = (n) => {
-  const {
-    id: e,
-    multiple: s = !1,
-    options: a,
-    value: r,
-    disabled: o,
-    readonly: i,
-    autofocus: c = !1,
-    onChange: l,
-    onBlur: d,
-    onFocus: f,
-    placeholder: p
-  } = n, { enumOptions: h = [] } = a, m = s ? [] : "", _ = (j) => {
-    l(s ? j.map((u) => u.value) : j.value);
-  }, x = (j) => s ? h.filter((u) => j.some((b) => S(b, u.value))) : h.find((u) => S(j, u.value));
-  return /* @__PURE__ */ t.jsx(
-    M,
-    {
-      id: e,
-      name: e,
-      isMulti: s,
-      value: typeof r > "u" ? m : x(r),
-      autoFocus: c,
-      onChange: _,
-      options: h,
-      onBlur: () => d(e, r),
-      onFocus: () => f(e, r),
-      placeholder: p || T.SELECT,
-      isDisabled: o || i,
-      styles: {
-        ...w,
-        control: (j, u) => ({
-          ...w.control(j, u),
-          height: "36px"
-        })
-      },
-      components: {
-        IndicatorSeparator: null,
-        DropdownIndicator: je,
-        MenuList: xe
-      },
-      menuPlacement: "auto"
-    }
-  );
-}, be = {
-  CheckboxWidget: fe,
-  SelectWidget: _e
-}, ge = {
-  ArrayFieldItemTemplate: se,
-  ArrayFieldTemplate: ne,
-  BaseInputTemplate: re,
-  ButtonTemplates: { AddButton: R, RemoveButton: oe, SubmitButton: ie },
-  FieldTemplate: le,
-  FieldErrorTemplate: ce,
-  ObjectFieldTemplate: ue,
-  TitleFieldTemplate: N,
-  WrapIfAdditionalTemplate: he
-}, ye = L, ve = H, De = E((n, e) => /* @__PURE__ */ t.jsx(
-  ye,
-  {
-    noHtml5Validate: !0,
-    showErrorList: !1,
-    autoComplete: "off",
-    ...n,
-    className: `rjsf-form-template__container ${n.className || ""}`,
-    validator: ve,
-    templates: {
-      ...ge,
-      ...n.templates
-    },
-    formContext: n.formData,
-    widgets: { ...be, ...n.widgets },
-    translateString: de,
-    ref: e
-  }
-));
-export {
-  Ae as H,
-  De as R,
-  Ee as a,
-  Le as g
-};