@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/FormViewer/components/fields/ChoiceField/ChoiceField.js

@@ -0,0 +1,135 @@
+import { jsx as n, jsxs as R } from "react/jsx-runtime";
+import { useMemo as O } from "react";
+import { useTranslation as D } from "react-i18next";
+import { arrayMove as V } from "@dnd-kit/sortable";
+import { Stack as _, TextInput as B, Box as M, InputError as N } from "@mantine/core";
+import { STATIC_CLASSES as g } from "../../../helpers/staticClasses.js";
+import { getRandomId as j } from "../../../helpers/steps.js";
+import { useSteps as k } from "../../../hooks/useCreateFormContext.js";
+import { useInterpolate as z } from "../../../hooks/useInterpolateText.js";
+import { useFormViewerStore as F } from "../../../store/formStore.js";
+import { AddOptionButton as P } from "../AddOptionButton.js";
+import { DragOptions as U } from "../DragOptions/DragOptions.js";
+import { ChoiceCard as x } from "./ChoiceCard.js";
+const to = ({
+  control: v,
+  step: e,
+  theme: s
+}) => {
+  const { t: p } = D("forms"), { form: f } = k(), { id: i, options: t, showInput: m, otherOption: I } = v, { useStore: b, api: d } = F(), a = b((o) => o.editing), C = f.errors[i], c = f.values[i], S = (o) => {
+    const { active: r, over: l } = o;
+    if (r.id !== l?.id && t) {
+      const T = t.findIndex((u) => u.id === r.id), A = t.findIndex((u) => u.id === l?.id), L = V(t, T, A);
+      d.updateControl(e.id, i, {
+        options: L
+      });
+    }
+  }, h = z(), E = O(() => [
+    ...(t || []).map((o) => ({
+      id: o.id || "",
+      element: /* @__PURE__ */ n(
+        x,
+        {
+          ...o,
+          label: a ? o.label : h(o.label),
+          controlId: i,
+          showInput: m,
+          theme: s,
+          onUpdate: a ? (r) => {
+            d.updateControl(e.id, i, {
+              options: t.map(
+                (l) => l.id === o.id ? { ...l, ...r } : l
+              )
+            });
+          } : void 0,
+          onRemove: a ? () => {
+            d.updateControl(e.id, i, {
+              options: t.filter((r) => r.id !== o.id)
+            });
+          } : void 0
+        }
+      )
+    })),
+    ...I ? [
+      {
+        id: "other",
+        element: /* @__PURE__ */ n(
+          x,
+          {
+            label: p("otherOption"),
+            controlId: i,
+            showInput: m,
+            theme: s,
+            id: "other"
+          }
+        )
+      }
+    ] : []
+  ], [
+    d,
+    a,
+    i,
+    h,
+    t,
+    I,
+    m,
+    e.id,
+    p,
+    s
+  ]), w = O(() => t?.find((o) => o.id === c)?.label, [c, t]);
+  return /* @__PURE__ */ R(
+    _,
+    {
+      gap: 8,
+      w: "fit-content",
+      "data-control-id": i,
+      className: g.BLOCK_MULTIPLE_CHOICE,
+      children: [
+        /* @__PURE__ */ n(
+          U,
+          {
+            editable: a,
+            options: E,
+            onDragEnd: S,
+            align: s?.align
+          }
+        ),
+        c === "other" && /* @__PURE__ */ n(
+          B,
+          {
+            size: s?.size,
+            value: w,
+            onChange: (o) => {
+              d.updateControl(e.id, i, {
+                options: t.map(
+                  (r) => r.id === "other" ? { ...r, label: o.target.value } : r
+                )
+              });
+            },
+            placeholder: p("otherOptionPlaceholder")
+          }
+        ),
+        a && /* @__PURE__ */ n(M, { mx: -8, children: /* @__PURE__ */ n(
+          P,
+          {
+            onClick: () => {
+              d.updateControl(e.id, i, {
+                options: [
+                  ...t || [],
+                  {
+                    id: j(),
+                    label: p("newOption")
+                  }
+                ]
+              });
+            }
+          }
+        ) }),
+        C && /* @__PURE__ */ n(N, { className: g.VALIDATION_ERROR, children: C })
+      ]
+    }
+  );
+};
+export {
+  to as ChoiceField
+};

package/dist/components/FormViewer/components/fields/ChoiceField/PictureChoiceCard.js

@@ -0,0 +1,37 @@
+import { jsx as u } from "react/jsx-runtime";
+import { memo as p } from "react";
+import { useSteps as f } from "../../../hooks/useCreateFormContext.js";
+import { PictureSelectableCard as C } from "../SelectableCard/PictureSelectableCard.js";
+const P = p(
+  ({
+    label: i,
+    showInput: r,
+    onUpdate: l,
+    onRemove: c,
+    image: a,
+    controlId: e,
+    id: t,
+    theme: s
+  }) => {
+    const { form: m, setValue: n } = f(), o = m.values[e] === t;
+    return /* @__PURE__ */ u(
+      C,
+      {
+        label: i,
+        hasInput: r,
+        inputType: "radio",
+        active: o,
+        onClick: () => {
+          n(e, o ? null : t);
+        },
+        onUpdate: l,
+        onRemove: c,
+        image: a,
+        theme: s
+      }
+    );
+  }
+);
+export {
+  P as PictureChoiceCard
+};

package/dist/components/FormViewer/components/fields/ChoiceField/PictureChoiceField.js

@@ -0,0 +1,93 @@
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { useMemo as h } from "react";
+import { useTranslation as A } from "react-i18next";
+import { arrayMove as L } from "@dnd-kit/sortable";
+import { Stack as R, Box as T, InputError as D } from "@mantine/core";
+import { STATIC_CLASSES as u } from "../../../helpers/staticClasses.js";
+import { getRandomId as _ } from "../../../helpers/steps.js";
+import { useSteps as B } from "../../../hooks/useCreateFormContext.js";
+import { useInterpolate as M } from "../../../hooks/useInterpolateText.js";
+import { useFormViewerStore as N } from "../../../store/formStore.js";
+import { AddOptionButton as P } from "../AddOptionButton.js";
+import { DragOptions as j } from "../DragOptions/DragOptions.js";
+import { PictureChoiceCard as k } from "./PictureChoiceCard.js";
+const Y = ({
+  control: I,
+  step: d,
+  theme: m
+}) => {
+  const { t: C } = A("forms"), { id: r, options: i, showInput: l } = I, { api: s, useStore: g } = N(), t = g((o) => o.editing), { form: x } = B(), c = x.errors[r], O = (o) => {
+    const { active: n, over: e } = o;
+    if (n.id !== e?.id && i) {
+      const E = i.findIndex((p) => p.id === n.id), v = i.findIndex((p) => p.id === e?.id), w = L(i, E, v);
+      s.updateControl(d.id, r, {
+        options: w
+      });
+    }
+  }, f = M(), S = h(() => i?.map((o) => ({
+    id: o.id || "",
+    element: /* @__PURE__ */ a(
+      k,
+      {
+        ...o,
+        label: t ? o.label : f(o.label),
+        controlId: r,
+        showInput: l,
+        theme: m,
+        onUpdate: t ? (n) => {
+          s.updateControl(d.id, r, {
+            options: i.map(
+              (e) => e.id === o.id ? { ...e, ...n } : e
+            )
+          });
+        } : void 0,
+        onRemove: t ? () => {
+          s.updateControl(d.id, r, {
+            options: i.filter((n) => n.id !== o.id)
+          });
+        } : void 0
+      }
+    )
+  })), [s, t, r, f, i, l, d.id, m]);
+  return /* @__PURE__ */ b(
+    R,
+    {
+      gap: 8,
+      w: "100%",
+      "data-control-id": r,
+      className: u.BLOCK_MULTIPLE_CHOICE,
+      children: [
+        /* @__PURE__ */ a(
+          j,
+          {
+            editable: t,
+            options: S,
+            onDragEnd: O,
+            isGrid: !0,
+            align: m?.align
+          }
+        ),
+        t && /* @__PURE__ */ a(T, { mx: -8, children: /* @__PURE__ */ a(
+          P,
+          {
+            onClick: () => {
+              s.updateControl(d.id, r, {
+                options: [
+                  ...i || [],
+                  {
+                    id: _(),
+                    label: C("newOption")
+                  }
+                ]
+              });
+            }
+          }
+        ) }),
+        c && /* @__PURE__ */ a(D, { className: u.VALIDATION_ERROR, children: c })
+      ]
+    }
+  );
+};
+export {
+  Y as PictureChoiceField
+};

package/dist/components/FormViewer/components/fields/ConfirmButton.js

@@ -0,0 +1,49 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useTranslation as u } from "react-i18next";
+import { Flex as p, Button as f } from "@mantine/core";
+import { ProjectIcon as c } from "../../../ProjectIcon/ProjectIcon.js";
+import { STATIC_CLASSES as d } from "../../helpers/staticClasses.js";
+import { useFormViewerStore as i } from "../../store/formStore.js";
+import { EditableContent as w } from "./EditableContent/EditableContent.js";
+const I = ({
+  step: a,
+  control: t,
+  theme: m
+}) => {
+  const { t: o } = u("forms"), { api: l } = i(), { useStore: s } = i(), n = s((e) => e.editing);
+  return t.showButton ? /* @__PURE__ */ r(
+    p,
+    {
+      justify: "var(--align)",
+      gap: 8,
+      wrap: "wrap",
+      direction: m?.align === "start" ? "row" : "row-reverse",
+      children: /* @__PURE__ */ r(
+        f,
+        {
+          className: d.SUBMIT_BUTTON,
+          leftSection: t.buttonIcon ? /* @__PURE__ */ r(c, { icon: t.buttonIcon }) : null,
+          ...!n && t.link ? {
+            component: "a",
+            href: t.link,
+            target: "_blank"
+          } : {},
+          children: n ? /* @__PURE__ */ r(
+            w,
+            {
+              value: t.label?.trim() || o("createYourOwnForm"),
+              onChange: (e) => {
+                l.updateControl(a.id, t.id, {
+                  label: e
+                });
+              }
+            }
+          ) : t.label?.trim() || o("createYourOwnForm")
+        }
+      )
+    }
+  ) : null;
+};
+export {
+  I as ConfirmButton
+};

package/dist/components/FormViewer/components/fields/ConfirmField.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Flex as m } from "@mantine/core";
+import { alignRelation as n } from "../../helpers/themeUtils.js";
+import { ConfirmButton as a } from "./ConfirmButton.js";
+const d = ({
+  control: r,
+  step: o,
+  theme: t
+}) => /* @__PURE__ */ i(
+  m,
+  {
+    justify: n[t?.align || "center"],
+    gap: 8,
+    wrap: "wrap",
+    "data-control-id": r.id,
+    children: /* @__PURE__ */ i(a, { step: o, control: r })
+  }
+);
+export {
+  d as ConfirmField
+};

package/dist/components/FormViewer/components/fields/DateField.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import { DateInput as s } from "@mantine/dates";
+import { ProjectIcon as d } from "../../../ProjectIcon/ProjectIcon.js";
+import { controlsDataMap as f } from "../../helpers/controls.js";
+import { useSteps as D } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as u } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as x } from "../../store/formStore.js";
+const y = ({ control: e }) => {
+  const { form: n } = D(), { id: t, minDate: o, maxDate: r, placeholder: p } = e, { useStore: m } = x(), i = m((l) => l.editing), c = u(p, i);
+  return /* @__PURE__ */ a(
+    s,
+    {
+      w: "100%",
+      "data-control-id": t,
+      leftSection: e.icon ? /* @__PURE__ */ a(d, { icon: e.icon }) : f[e.controlType].icon,
+      clearable: !0,
+      minDate: o ? new Date(o) : void 0,
+      maxDate: r ? new Date(r) : void 0,
+      placeholder: c,
+      readOnly: i,
+      popoverProps: {
+        withinPortal: !1,
+        floatingStrategy: "fixed"
+      },
+      ...n.getInputProps(t)
+    }
+  );
+};
+export {
+  y as DateField
+};

package/dist/components/FormViewer/components/fields/DragOptions/DragOptions.js

@@ -0,0 +1,81 @@
+import { jsx as e, Fragment as g } from "react/jsx-runtime";
+import { Fragment as d } from "react";
+import { useSensors as u, useSensor as S, PointerSensor as h, DndContext as p, closestCenter as y } from "@dnd-kit/core";
+import { restrictToParentElement as b } from "@dnd-kit/modifiers";
+import { SortableContext as C, rectSortingStrategy as x, useSortable as v } from "@dnd-kit/sortable";
+import { CSS as D } from "@dnd-kit/utilities";
+import { alignRelation as c } from "../../../helpers/themeUtils.js";
+import { useFormViewerStore as F } from "../../../store/formStore.js";
+import f from "./DragOptions.module.css.js";
+const j = ({ id: r, children: a }) => {
+  const {
+    attributes: m,
+    listeners: i,
+    setNodeRef: n,
+    transform: l,
+    transition: o,
+    isDragging: s
+  } = v({ id: r }), t = {
+    transform: D.Translate.toString(l),
+    transition: o,
+    opacity: s ? 0.5 : 1,
+    zIndex: s ? 1e3 : "auto"
+  };
+  return /* @__PURE__ */ e("div", { ref: n, style: t, ...m, ...i, children: a });
+}, E = ({
+  options: r,
+  onDragEnd: a,
+  editable: m,
+  isGrid: i,
+  align: n
+}) => {
+  const { useStore: l } = F(), o = l((t) => t.isMobile), s = u(
+    S(h, {
+      activationConstraint: {
+        distance: 10
+      }
+    })
+  );
+  return /* @__PURE__ */ e(g, { children: m ? /* @__PURE__ */ e(
+    p,
+    {
+      sensors: s,
+      collisionDetection: y,
+      onDragEnd: a,
+      modifiers: [b],
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          "data-mobile": o,
+          className: f.dragOptions,
+          "data-grid": i,
+          style: {
+            justifyContent: c[n || "start"]
+          },
+          children: /* @__PURE__ */ e(
+            C,
+            {
+              items: r?.map((t) => t.id).filter(Boolean) || [],
+              strategy: x,
+              children: r?.map((t) => t.id === "other" ? /* @__PURE__ */ e(d, { children: t.element }, t.id) : /* @__PURE__ */ e(j, { id: t.id, children: t.element }, t.id))
+            }
+          )
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      "data-mobile": o,
+      className: f.dragOptions,
+      "data-grid": i,
+      style: {
+        justifyContent: c[n || "start"]
+      },
+      children: r?.map((t) => /* @__PURE__ */ e(d, { children: t.element }, t.id))
+    }
+  ) });
+};
+export {
+  E as DragOptions
+};

package/dist/components/FormViewer/components/fields/DragOptions/DragOptions.module.css.js

@@ -0,0 +1,7 @@
+const s = "_dragOptions_1a1vw_1", t = {
+  dragOptions: s
+};
+export {
+  t as default,
+  s as dragOptions
+};

package/dist/components/FormViewer/components/fields/DropdownField/DropdownField.js

@@ -0,0 +1,117 @@
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import { useTranslation as I } from "react-i18next";
+import { Flex as S, Box as u, Select as v, Stack as O } from "@mantine/core";
+import { IconTrash as h } from "@tabler/icons-react";
+import { ProjectIcon as j } from "../../../../ProjectIcon/ProjectIcon.js";
+import { controlsDataMap as T } from "../../../helpers/controls.js";
+import { getRandomId as k } from "../../../helpers/steps.js";
+import { useSteps as z } from "../../../hooks/useCreateFormContext.js";
+import { useInterpolate as F, useInterpolateText as P } from "../../../hooks/useInterpolateText.js";
+import { useFormViewerStore as R } from "../../../store/formStore.js";
+import { AddOptionButton as B } from "../AddOptionButton.js";
+import { EditableContent as D } from "../EditableContent/EditableContent.js";
+import M from "./DropdownField.module.css.js";
+const Y = ({
+  control: l,
+  step: a,
+  theme: r
+}) => {
+  const { t: f } = I("forms"), { api: d, useStore: C } = R(), { form: b } = z(), { id: e, options: t, placeholder: w } = l, i = C((o) => o.editing), c = F(), y = P(w, i), x = g(() => t?.map((o) => ({
+    id: o.id || "",
+    element: /* @__PURE__ */ m(
+      S,
+      {
+        w: "100%",
+        justify: "space-between",
+        style: { color: r?.primaryColor },
+        children: [
+          /* @__PURE__ */ n(
+            D,
+            {
+              value: i ? o.label : c(o.label),
+              placeholder: "Option",
+              onChange: (p) => {
+                i && d.updateControl(a.id, e, {
+                  options: t.map(
+                    (s) => s.id === o.id ? { ...s, label: p } : s
+                  )
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ n(
+            h,
+            {
+              color: "red",
+              size: 16,
+              opacity: 0.6,
+              cursor: "pointer",
+              onClick: i ? () => {
+                d.updateControl(a.id, e, {
+                  options: t.filter((p) => p.id !== o.id)
+                });
+              } : void 0
+            }
+          )
+        ]
+      },
+      o.id
+    )
+  })), [t, r?.primaryColor, i, d, a.id, e, c]);
+  return /* @__PURE__ */ m(u, { w: "100%", children: [
+    /* @__PURE__ */ n(
+      v,
+      {
+        size: r?.size,
+        radius: r?.borderRadius,
+        color: r?.primaryColor,
+        "data-control-id": e,
+        w: "100%",
+        leftSection: l.icon ? /* @__PURE__ */ n(j, { icon: l.icon }) : T[l.controlType].icon,
+        dropdownOpened: i ? !1 : void 0,
+        data: t?.map((o) => ({
+          label: o.label,
+          value: o.id
+        })),
+        placeholder: y,
+        ...b.getInputProps(e)
+      }
+    ),
+    i && /* @__PURE__ */ m(
+      O,
+      {
+        mt: 8,
+        gap: 8,
+        w: "100%",
+        "data-radius": r?.borderRadius,
+        style: {
+          "--dropdown-border-color": r?.primaryColor
+        },
+        className: M.optionsContainer,
+        children: [
+          x?.map((o) => o.element),
+          /* @__PURE__ */ n(u, { mx: -8, children: /* @__PURE__ */ n(
+            B,
+            {
+              onClick: () => {
+                d.updateControl(a.id, e, {
+                  options: [
+                    ...t || [],
+                    {
+                      id: k(),
+                      label: f("newOption")
+                    }
+                  ]
+                });
+              }
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Y as DropdownField
+};

package/dist/components/FormViewer/components/fields/DropdownField/DropdownField.module.css.js

@@ -0,0 +1,7 @@
+const o = "_optionsContainer_1xro2_1", n = {
+  optionsContainer: o
+};
+export {
+  n as default,
+  o as optionsContainer
+};

package/dist/components/FormViewer/components/fields/EditableContent/EditableContent.js

@@ -0,0 +1,70 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useRef as g, useEffect as x } from "react";
+import y from "./EditableContent.module.css.js";
+const D = ({
+  value: r,
+  onChange: c,
+  placeholder: i,
+  allowNewLines: l = !1
+}) => {
+  const s = g(null);
+  x(() => {
+    const t = s.current;
+    if (!t || document.activeElement === t) return;
+    const e = r ?? "";
+    t.innerHTML !== e && (t.innerHTML = e), t.setAttribute("data-empty", String(!(e && e.trim())));
+  }, [r]);
+  const m = (t) => {
+    const n = t.currentTarget.innerHTML || "";
+    c?.(n.trim());
+  }, d = () => {
+  }, u = (t) => {
+    if (t.key === "Enter") {
+      if (!l) {
+        t.preventDefault();
+        return;
+      }
+      t.preventDefault();
+      const e = window.getSelection();
+      if (!e || !e.rangeCount) {
+        try {
+          document.execCommand("insertHTML", !1, "<br><br>");
+        } catch {
+          document.execCommand("insertLineBreak");
+        }
+        return;
+      }
+      const n = e.getRangeAt(0), o = document.createElement("br");
+      n.deleteContents(), n.insertNode(o);
+      const a = document.createElement("br");
+      o.parentNode?.insertBefore(a, o.nextSibling), n.setStartAfter(a), n.setEndAfter(a), e.removeAllRanges(), e.addRange(n);
+    }
+  }, f = (t) => {
+    const e = t.currentTarget, n = !(e.innerHTML && e.innerHTML.trim());
+    e.setAttribute("data-empty", String(n));
+  }, p = async (t) => {
+    t.preventDefault();
+    const e = await t.clipboardData.getData("text/plain");
+    document.execCommand("insertText", !1, e);
+  };
+  return /* @__PURE__ */ b(
+    "span",
+    {
+      ref: s,
+      "data-empty": String(!r),
+      onInput: f,
+      onKeyDown: u,
+      onBlur: m,
+      onFocus: d,
+      onPaste: p,
+      "data-placeholder": i,
+      className: y.editableContent,
+      role: "textbox",
+      contentEditable: !0,
+      suppressContentEditableWarning: !0
+    }
+  );
+};
+export {
+  D as EditableContent
+};

package/dist/components/FormViewer/components/fields/EditableContent/EditableContent.module.css.js

@@ -0,0 +1,7 @@
+const t = "_editableContent_a0zig_1", e = {
+  editableContent: t
+};
+export {
+  e as default,
+  t as editableContent
+};

package/dist/components/FormViewer/components/fields/EmailField.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { TextInput as a } from "@mantine/core";
+import { ProjectIcon as s } from "../../../ProjectIcon/ProjectIcon.js";
+import { controlsDataMap as l } from "../../helpers/controls.js";
+import { STATIC_CLASSES as d } from "../../helpers/staticClasses.js";
+import { useSteps as f } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as u } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as S } from "../../store/formStore.js";
+const E = ({ control: o }) => {
+  const { form: r } = f(), { useStore: i } = S(), m = i((c) => c.editing), { id: t, placeholder: n } = o, p = u(n, m);
+  return /* @__PURE__ */ e(
+    a,
+    {
+      "data-control-id": t,
+      w: "100%",
+      variant: "default",
+      className: d.BLOCK_INPUT_EMAIL,
+      leftSection: o.icon ? /* @__PURE__ */ e(s, { icon: o.icon }) : l[o.controlType].icon,
+      placeholder: p,
+      ...r.getInputProps(t)
+    }
+  );
+};
+export {
+  E as EmailField
+};