@layers-app/shared 0.1.5 → 0.2.0

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

@@ -0,0 +1,27 @@
+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 d } from "../../helpers/controls.js";
+import { DEFAULT_MAX as f, DEFAULT_MIN as l } from "../../helpers/steps.js";
+import { useSteps as u } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as g } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as h } from "../../store/formStore.js";
+const M = ({ control: o }) => {
+  const { form: r } = u(), { useStore: i } = h(), n = i((c) => c.editing), { id: t, placeholder: m } = o, p = g(m, n);
+  return /* @__PURE__ */ e(
+    a,
+    {
+      "data-control-id": t,
+      w: "100%",
+      variant: "default",
+      placeholder: p,
+      leftSection: o.icon ? /* @__PURE__ */ e(s, { icon: o.icon }) : d[o.controlType].icon,
+      minLength: l,
+      maxLength: f,
+      ...r.getInputProps(t)
+    }
+  );
+};
+export {
+  M as LocationField
+};

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

@@ -0,0 +1,48 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Textarea as d } from "@mantine/core";
+import { ProjectIcon as g } from "../../../ProjectIcon/ProjectIcon.js";
+import { controlsDataMap as T } from "../../helpers/controls.js";
+import { STATIC_CLASSES as x } from "../../helpers/staticClasses.js";
+import { DEFAULT_MAX as u, DEFAULT_MIN as L } from "../../helpers/steps.js";
+import { useSteps as S } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as h } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as A } from "../../store/formStore.js";
+const v = ({ control: o }) => {
+  const { form: a } = S(), { useStore: s } = A(), i = s((t) => t.editing), { id: n, minLength: p, maxLength: l, placeholder: c } = o;
+  let e = p ?? L, r = l ?? u;
+  if (e > r) {
+    const t = e;
+    e = r, r = t;
+  }
+  const f = h(c, i);
+  return /* @__PURE__ */ m(
+    d,
+    {
+      "data-control-id": n,
+      className: x.BLOCK_TEXTAREA,
+      w: "100%",
+      variant: "default",
+      autosize: !0,
+      minRows: 3,
+      maxRows: 12,
+      leftSection: o.icon ? /* @__PURE__ */ m(g, { icon: o.icon }) : T[o.controlType].icon,
+      minLength: e,
+      maxLength: r,
+      styles: {
+        section: {
+          alignItems: "flex-start",
+          marginTop: "0.35rem"
+        }
+      },
+      placeholder: f,
+      readOnly: i,
+      onKeyDown: (t) => {
+        t.key === "Enter" && t.stopPropagation();
+      },
+      ...a.getInputProps(n)
+    }
+  );
+};
+export {
+  v as LongTextField
+};

package/dist/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceCard.js

@@ -0,0 +1,38 @@
+import { jsx as C } from "react/jsx-runtime";
+import { memo as h, useCallback as d } from "react";
+import { isNumber as n } from "lodash-es";
+import { useSteps as k } from "../../../hooks/useCreateFormContext.js";
+import { SelectableCard as v } from "../SelectableCard/SelectableCard.js";
+const y = h(
+  ({
+    label: c,
+    showInput: a,
+    maxOptions: l,
+    onUpdate: u,
+    onRemove: f,
+    controlId: e,
+    id: t,
+    theme: p
+  }) => {
+    const { form: i } = k(), s = i.values[e], r = s?.indexOf(t), o = s?.includes(t), m = !!(n(l) && !o && s && s.length >= l), b = d(() => {
+      m || !n(r) || (o ? i.removeListItem(e, r) : i.insertListItem(e, t));
+    }, [e, i, r, o, m, t]);
+    return /* @__PURE__ */ C(
+      v,
+      {
+        theme: p,
+        label: c,
+        hasInput: a,
+        inputType: "checkbox",
+        active: o,
+        disabled: m,
+        onClick: b,
+        onUpdate: u,
+        onRemove: f
+      }
+    );
+  }
+);
+export {
+  y as MultipleChoiceCard
+};

package/dist/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceField.js

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

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

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import { NumberInput as f } from "@mantine/core";
+import { ProjectIcon as l } from "../../../ProjectIcon/ProjectIcon.js";
+import { controlsDataMap as d } from "../../helpers/controls.js";
+import { STATIC_CLASSES as u } from "../../helpers/staticClasses.js";
+import { DEFAULT_MAX as S, DEFAULT_MIN as I } from "../../helpers/steps.js";
+import { useSteps as T } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as N } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as x } from "../../store/formStore.js";
+const h = ({ control: o }) => {
+  const { form: e } = T(), { useStore: m } = x(), i = m((a) => a.editing), { id: r, min: n, max: p, placeholder: c } = o, s = N(c, i);
+  return /* @__PURE__ */ t(
+    f,
+    {
+      w: "100%",
+      "data-control-id": r,
+      className: u.BLOCK_INPUT_NUMBER,
+      leftSection: o.icon ? /* @__PURE__ */ t(l, { icon: o.icon }) : d[o.controlType].icon,
+      min: n || I,
+      max: p || S,
+      placeholder: s,
+      ...e.getInputProps(r)
+    }
+  );
+};
+export {
+  h as NumberField
+};

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

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

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

@@ -0,0 +1,30 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Progress as n } from "@mantine/core";
+import { useActiveStep as i } from "../../hooks/useActiveStep.js";
+import { useFormViewerStore as p } from "../../store/formStore.js";
+import { stepsReselect as c } from "../../store/selectors.js";
+function u(e, t) {
+  return e / t * 100;
+}
+const S = () => {
+  const e = i(), { useStore: t } = p(), r = t(c);
+  return e?.isEnd ? null : /* @__PURE__ */ s(
+    n,
+    {
+      radius: 0,
+      value: u(
+        r.currentSteps.findIndex((o) => o.id === e?.id) + 1,
+        r.currentSteps.length
+      ),
+      pos: "absolute",
+      top: 0,
+      w: "100%",
+      style: {
+        zIndex: 100
+      }
+    }
+  );
+};
+export {
+  S as ProgressLine
+};

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

@@ -0,0 +1,33 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { Box as l, Rating as d, InputError as u } from "@mantine/core";
+import { clamp as a } from "lodash-es";
+import { useSteps as f } from "../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as x } from "../../store/formStore.js";
+const S = ({
+  control: i,
+  theme: t
+}) => {
+  const { form: o } = f(), { id: r, count: s } = i, { useStore: n } = x(), m = n((p) => p.editing);
+  return /* @__PURE__ */ c(l, { flex: 1, w: "100%", pb: 12, "data-control-id": r, children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        styles: {
+          root: {
+            width: "100%",
+            justifyContent: "space-between"
+          }
+        },
+        color: t?.primaryColor,
+        size: "xl",
+        count: a(s || 5, 1, 10),
+        readOnly: m,
+        ...o.getInputProps(r)
+      }
+    ),
+    o.errors[r] && /* @__PURE__ */ e(u, { size: t?.size, mt: 4, children: o.errors[r] })
+  ] });
+};
+export {
+  S as RatingField
+};

package/dist/components/FormViewer/components/fields/SelectableCard/PictureSelectableCard.js

@@ -0,0 +1,154 @@
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { memo as y, useMemo as N } from "react";
+import { useMantineTheme as _, parseThemeColor as L, Radio as x, alpha as I, Checkbox as z, Flex as D, ActionIcon as P } from "@mantine/core";
+import { IconTrash as A, IconPhoto as B } from "@tabler/icons-react";
+import { combineClasses as p, STATIC_CLASSES as a } from "../../../helpers/staticClasses.js";
+import { useFormViewerStore as H } from "../../../store/formStore.js";
+import { EditableContent as M } from "../EditableContent/EditableContent.js";
+import m from "./SelectableCard.module.css.js";
+import { FilePicker as X } from "../../../../FilePicker/FilePicker.js";
+const w = "a2SNktIFgNCvXITBZgpup1T8mtSdJIM6TIZlndbRuRg", F = "TBp2lqNzl0orFQtaXgwymH4UDM0kbAVe", $ = y(
+  ({
+    label: s,
+    active: r,
+    disabled: i,
+    hasInput: C,
+    image: c,
+    onClick: g,
+    inputType: d,
+    onUpdate: n,
+    onRemove: u,
+    theme: e
+  }) => {
+    const { useStore: O } = H(), S = O((t) => t.editing), b = _(), l = L({
+      color: e?.primaryColor || "",
+      theme: b
+    }), f = N(() => d === "radio" ? /* @__PURE__ */ o(
+      x,
+      {
+        style: {
+          "--color": l.value,
+          "--color-shadow": I(l.value, 0.5)
+        },
+        classNames: {
+          radio: p(
+            m.radio,
+            a.RADIO,
+            r ? a.RADIO_SELECTED : ""
+          )
+        },
+        disabled: i,
+        size: e?.size,
+        color: e?.primaryColor,
+        checked: r,
+        readOnly: !0,
+        radius: "xl"
+      }
+    ) : /* @__PURE__ */ o(
+      z,
+      {
+        styles: {
+          input: {
+            "--color": l.value,
+            "--color-shadow": I(l.value, 0.5)
+          }
+        },
+        classNames: {
+          input: p(
+            m.checkbox,
+            a.CHECKBOX,
+            r ? a.CHECKBOX_SELECTED : ""
+          )
+        },
+        disabled: i,
+        size: e?.size,
+        color: e?.primaryColor,
+        checked: r,
+        readOnly: !0
+      }
+    ), [
+      r,
+      l.value,
+      i,
+      d,
+      e?.primaryColor,
+      e?.size
+    ]), k = {
+      "--text-color": l.value,
+      "--border-color": l.value,
+      "--bg-color": I(l.value, 0.05)
+    }, h = n || u, v = p(
+      m.card,
+      d === "radio" ? a.MULTIPLE_CHOICE_OPTION : a.CHECKBOX,
+      r ? d === "radio" ? a.MULTIPLE_CHOICE_OPTION_SELECTED : a.CHECKBOX_SELECTED : ""
+    );
+    return /* @__PURE__ */ E(
+      "div",
+      {
+        style: k,
+        className: v,
+        "data-active": r,
+        "data-disabled": i,
+        onClick: h ? void 0 : g,
+        "data-radius": e?.borderRadius,
+        children: [
+          S ? /* @__PURE__ */ o(
+            K,
+            {
+              hasImage: !!c,
+              onUpdate: (t) => n?.({ image: t.image }),
+              onRemove: () => n?.({ image: void 0 }),
+              children: /* @__PURE__ */ o(T, { image: c })
+            }
+          ) : /* @__PURE__ */ o(T, { image: c }),
+          /* @__PURE__ */ E("div", { className: m.controls, children: [
+            C && f,
+            h ? /* @__PURE__ */ E(D, { miw: 0, flex: 1, children: [
+              n && /* @__PURE__ */ o(
+                M,
+                {
+                  value: s,
+                  placeholder: "Option",
+                  onChange: (t) => {
+                    n?.({ label: t });
+                  }
+                }
+              ),
+              u && /* @__PURE__ */ o(P, { color: "red", variant: "subtle", onClick: u, children: /* @__PURE__ */ o(A, { size: "1em" }) })
+            ] }) : s
+          ] })
+        ]
+      }
+    );
+  }
+), T = ({ image: s }) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: m.image,
+    style: {
+      backgroundImage: `url(${s})`
+    },
+    children: !s && /* @__PURE__ */ o(B, { size: 32, color: "var(--primary-color)" })
+  }
+), K = ({
+  children: s,
+  onUpdate: r,
+  onRemove: i,
+  hasImage: C
+}) => /* @__PURE__ */ o(
+  X,
+  {
+    hasImage: C,
+    onChange: (c) => r?.({
+      image: c
+    }),
+    unsplashClientId: w,
+    giphyToken: F,
+    onRemove: i,
+    children: s
+  }
+);
+export {
+  $ as PictureSelectableCard,
+  K as UploadOptionImageButton
+};

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

@@ -0,0 +1,110 @@
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { memo as L, useMemo as S } from "react";
+import { useMantineTheme as _, parseThemeColor as b, Radio as v, alpha as t, Checkbox as y, Flex as k, ActionIcon as z } from "@mantine/core";
+import { IconTrash as H } from "@tabler/icons-react";
+import { combineClasses as E, STATIC_CLASSES as e } from "../../../helpers/staticClasses.js";
+import { EditableContent as N } from "../EditableContent/EditableContent.js";
+import i from "./SelectableCard.module.css.js";
+const D = L(
+  ({
+    label: d,
+    active: l,
+    disabled: s,
+    hasInput: O,
+    onClick: h,
+    inputType: c,
+    onUpdate: C,
+    onRemove: n,
+    theme: o
+  }) => {
+    const p = _(), m = C || n, r = b({
+      color: o?.primaryColor || "",
+      theme: p
+    }), T = S(() => c === "radio" ? /* @__PURE__ */ a(
+      v,
+      {
+        style: {
+          "--color": r.value,
+          "--color-shadow": t(r.value, 0.5)
+        },
+        classNames: {
+          radio: i.radio
+        },
+        disabled: s,
+        size: o?.size,
+        color: o?.primaryColor,
+        checked: l,
+        readOnly: !0,
+        radius: "xl"
+      }
+    ) : /* @__PURE__ */ a(
+      y,
+      {
+        styles: {
+          input: {
+            "--color": r.value,
+            "--color-shadow": t(r.value, 0.5)
+          }
+        },
+        radius: "md",
+        classNames: {
+          input: E(
+            i.checkbox,
+            e.CHECKBOX,
+            l ? e.CHECKBOX_SELECTED : ""
+          )
+        },
+        disabled: s,
+        size: o?.size,
+        color: o?.primaryColor,
+        checked: l,
+        readOnly: !0
+      }
+    ), [
+      l,
+      r.value,
+      s,
+      c,
+      o?.primaryColor,
+      o?.size
+    ]), f = {
+      "--text-color": r.value,
+      "--border-color": r.value,
+      "--bg-color": t(r.value, 0.05)
+    }, x = E(
+      i.card,
+      c === "radio" ? e.MULTIPLE_CHOICE_OPTION : e.CHECKBOX,
+      l ? c === "radio" ? e.MULTIPLE_CHOICE_OPTION_SELECTED : e.CHECKBOX_SELECTED : ""
+    );
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        onClick: m || s ? void 0 : h,
+        style: f,
+        className: x,
+        "data-active": l,
+        "data-disabled": s,
+        "data-radius": o?.borderRadius,
+        children: /* @__PURE__ */ u("div", { className: i.controls, children: [
+          O && T,
+          m ? /* @__PURE__ */ u(k, { miw: 0, flex: 1, children: [
+            C && /* @__PURE__ */ a(
+              N,
+              {
+                value: d,
+                placeholder: "Option",
+                onChange: (I) => {
+                  C?.({ label: I });
+                }
+              }
+            ),
+            n && /* @__PURE__ */ a(z, { color: "red", variant: "subtle", onClick: n, children: /* @__PURE__ */ a(H, { size: "1em" }) })
+          ] }) : d
+        ] })
+      }
+    );
+  }
+);
+export {
+  D as SelectableCard
+};

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

@@ -0,0 +1,15 @@
+const o = "_card_aspur_1", c = "_image_aspur_48", s = "_controls_aspur_60", a = "_radio_aspur_82", r = "_checkbox_aspur_87", _ = {
+  card: o,
+  image: c,
+  controls: s,
+  radio: a,
+  checkbox: r
+};
+export {
+  o as card,
+  r as checkbox,
+  s as controls,
+  _ as default,
+  c as image,
+  a as radio
+};