@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/FormViewer/components/Step.js

@@ -0,0 +1,225 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { memo as I, Fragment as T } from "react";
+import { Stack as N, Flex as O, Image as E } from "@mantine/core";
+import { combineClasses as l, STATIC_CLASSES as i, getPageNumberClass as M } from "../helpers/staticClasses.js";
+import { alignRelation as f } from "../helpers/themeUtils.js";
+import { useFormViewerStore as h } from "../store/formStore.js";
+import { stepByControlReselect as S, questionNumberReselect as U } from "../store/selectors.js";
+import { Container as D } from "./Container.js";
+import { ListFocusBox as R } from "./ListFocusBox.js";
+import { NavControls as B } from "./NavControls.js";
+import { StepDescription as x } from "./StepDescription.js";
+import { StepTitle as Y } from "./StepTitle.js";
+import { ButtonField as k } from "./fields/ButtonField/ButtonField.js";
+import { ChoiceField as G } from "./fields/ChoiceField/ChoiceField.js";
+import { PictureChoiceField as P } from "./fields/ChoiceField/PictureChoiceField.js";
+import { ConfirmField as v } from "./fields/ConfirmField.js";
+import { DateField as $ } from "./fields/DateField.js";
+import { DropdownField as z } from "./fields/DropdownField/DropdownField.js";
+import { EmailField as K } from "./fields/EmailField.js";
+import { LocationField as j } from "./fields/LocationField.js";
+import { LongTextField as w } from "./fields/LongTextField.js";
+import { MultipleChoiceField as H } from "./fields/MultipleChoice/MultipleChoiceField.js";
+import { NumberField as q } from "./fields/NumberField.js";
+import { PhoneField as W } from "./fields/PhoneField.js";
+import { RatingField as V } from "./fields/RatingField.js";
+import { SliderField as J } from "./fields/SliderField.js";
+import { StartField as Q } from "./fields/StartField.js";
+import { TextField as X } from "./fields/TextField.js";
+import { UploadField as Z } from "./fields/UploadField/UploadField.js";
+import { YesNoField as oo } from "./fields/YesNoField.js";
+import n from "../FormViewer.module.css.js";
+const io = (t) => t ? `brightness(${t.brightness ?? 0}%) ${t.layout === "background" ? `blur(${t.blur ?? 0}px)` : ""}` : "none", m = (t) => t ? {
+  content: i.MEDIA_LAYOUT_CONTENT,
+  left: i.MEDIA_LAYOUT_LEFT,
+  right: i.MEDIA_LAYOUT_RIGHT,
+  fullLeft: i.MEDIA_LAYOUT_FULL_LEFT,
+  fullRight: i.MEDIA_LAYOUT_FULL_RIGHT,
+  background: i.MEDIA_LAYOUT_BACKGROUND,
+  top: i.MEDIA_LAYOUT_TOP,
+  bottom: i.MEDIA_LAYOUT_BOTTOM,
+  fullTop: i.MEDIA_LAYOUT_FULL_TOP,
+  fullBottom: i.MEDIA_LAYOUT_FULL_BOTTOM
+}[t] || i.BLOCK_IMAGE : i.BLOCK_IMAGE, to = {
+  text: X,
+  date: $,
+  number: q,
+  multipleChoice: H,
+  slider: J,
+  dropdown: z,
+  choice: G,
+  upload: Z,
+  location: j,
+  phone: W,
+  email: K,
+  yesNo: oo,
+  longText: w,
+  pictureChoice: P,
+  start: Q,
+  confirm: v,
+  button: k,
+  rating: V
+}, xo = I(
+  ({ step: t, theme: r }) => {
+    const { useStore: p } = h(), L = p((a) => a.isMobile), F = p(S), b = p(U), { media: o } = t, s = t.controls?.[0];
+    let d = i.PAGE;
+    if (s)
+      if (s.controlType === "start")
+        d = i.START;
+      else if (s.controlType === "confirm")
+        d = i.END;
+      else {
+        const a = b[s.id];
+        a && (d = M(a));
+      }
+    const g = r?.align || "start";
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: l(
+          n.stepRoot,
+          i.PAGE,
+          d
+        ),
+        style: {
+          "--size": r?.size,
+          "--align": g,
+          "--media-image": o?.image ? `url(${o.image})` : "none",
+          "--media-image-filter": io(o),
+          "--bg-color": r?.background?.image ? "transparent" : r?.background?.color || "none",
+          "--bg-opacityHex": `${(r?.background?.opacity ?? 1) * 100}%`,
+          fontWeight: r?.font?.fontWeight
+        },
+        "data-mobile": L,
+        "data-align": f[g],
+        "data-media-layout": o?.layout,
+        children: [
+          o && o.layout === "background" && /* @__PURE__ */ e(
+            "div",
+            {
+              className: l(
+                m(o.layout),
+                n.media
+              )
+            }
+          ),
+          o && ["top", "fullTop", "left", "fullLeft"].includes(
+            o.layout ?? ""
+          ) && /* @__PURE__ */ e(
+            "div",
+            {
+              className: l(
+                m(o.layout),
+                n.media
+              ),
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  className: l(
+                    m(o.layout),
+                    n.mediaInner
+                  ),
+                  "data-radius": r?.borderRadius
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: l(n.content), children: !!t.controls?.length && /* @__PURE__ */ e(D, { theme: t.theme, children: t.controls.map((a, y, A) => {
+            const _ = to[a.controlType], C = y === A.length - 1, c = F[a.id];
+            return c ? /* @__PURE__ */ u(T, { children: [
+              /* @__PURE__ */ u(R, { controlId: a.id, children: [
+                /* @__PURE__ */ u(
+                  N,
+                  {
+                    gap: 4,
+                    align: f[r?.align || "start"],
+                    className: l(
+                      i.BLOCK,
+                      n.stack
+                    ),
+                    children: [
+                      /* @__PURE__ */ e(
+                        Y,
+                        {
+                          originalStepId: c.id,
+                          theme: r,
+                          control: a
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        x,
+                        {
+                          originalStepId: c.id,
+                          theme: r,
+                          control: a
+                        }
+                      )
+                    ]
+                  }
+                ),
+                o && ["content"].includes(o.layout ?? "") && /* @__PURE__ */ e(O, { justify: f[r?.align || "start"], children: /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: l(
+                      m(o.layout),
+                      n.media
+                    ),
+                    "data-radius": r?.borderRadius,
+                    style: {
+                      "--size": o.size ? `${o.size}%` : "100%"
+                    },
+                    children: /* @__PURE__ */ e(
+                      E,
+                      {
+                        src: o.image,
+                        className: l(
+                          m(o.layout),
+                          n.mediaInner
+                        )
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  _,
+                  {
+                    control: a,
+                    step: c,
+                    theme: r
+                  },
+                  a.id
+                )
+              ] }),
+              C && /* @__PURE__ */ e(B, { data: t })
+            ] }, a.id) : /* @__PURE__ */ e(T, {}, a.id);
+          }) }) }),
+          o && ["bottom", "fullBottom", "right", "fullRight"].includes(
+            o.layout ?? ""
+          ) && /* @__PURE__ */ e(
+            "div",
+            {
+              className: l(
+                m(o.layout),
+                n.media
+              ),
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  className: l(
+                    m(o.layout),
+                    n.mediaInner
+                  ),
+                  "data-radius": t.theme?.borderRadius
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  xo as Step,
+  io as getImageFilter
+};

package/dist/components/FormViewer/components/StepDescription.js

@@ -0,0 +1,73 @@
+import { jsxs as h, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { useMemo as y } from "react";
+import { createPortal as S } from "react-dom";
+import { useTranslation as T } from "react-i18next";
+import { useMantineTheme as z, parseThemeColor as C } from "@mantine/core";
+import { combineClasses as w, STATIC_CLASSES as x } from "../helpers/staticClasses.js";
+import { useInterpolateText as F } from "../hooks/useInterpolateText.js";
+import { useFormViewerStore as p } from "../store/formStore.js";
+import { EditableContent as L } from "./fields/EditableContent/EditableContent.js";
+import _ from "../FormViewer.module.css.js";
+const O = ({
+  originalStepId: l,
+  control: t,
+  theme: i
+}) => {
+  const { t: m } = T("forms"), { api: c } = p(), s = z(), { useStore: f } = p(), n = f((e) => e.editing), o = i?.description, d = y(() => {
+    const e = C({
+      color: o?.color || "",
+      theme: s
+    }), a = o?.fontSize;
+    return {
+      "--color": e.value || "auto",
+      "--font-size": a ? `${a}px` : `var(--font-size-${i?.size})`,
+      "--font-weight": o?.fontWeight,
+      "--font-family": o?.fontFamily
+    };
+  }, [
+    i?.size,
+    o?.color,
+    o?.fontFamily,
+    o?.fontSize,
+    o?.fontWeight,
+    s
+  ]), u = F(
+    t.description,
+    n
+  );
+  return !t.description && !n ? null : /* @__PURE__ */ h(g, { children: [
+    S(
+      /* @__PURE__ */ r(
+        "link",
+        {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css2?family=${o?.fontFamily}:wght@100..900&display=swap`
+        }
+      ),
+      document.head
+    ),
+    /* @__PURE__ */ r(
+      "p",
+      {
+        className: w(
+          _.stepDescription,
+          x.BLOCK_TEXT
+        ),
+        style: d,
+        "data-size": i?.size,
+        children: n ? /* @__PURE__ */ r(
+          L,
+          {
+            value: t.description,
+            placeholder: m("descriptionOptional"),
+            onChange: (e) => c.updateControl(l, t.id, { description: e }),
+            allowNewLines: !0
+          }
+        ) : /* @__PURE__ */ r("span", { dangerouslySetInnerHTML: { __html: u } })
+      }
+    )
+  ] });
+};
+export {
+  O as StepDescription
+};

package/dist/components/FormViewer/components/StepTitle.js

@@ -0,0 +1,118 @@
+import { jsxs as o, Fragment as C, jsx as r } from "react/jsx-runtime";
+import { useMemo as E } from "react";
+import { createPortal as R } from "react-dom";
+import { useTranslation as S } from "react-i18next";
+import { useMantineTheme as q, parseThemeColor as z, Flex as u } from "@mantine/core";
+import { IconArrowRight as w } from "@tabler/icons-react";
+import { motion as h } from "framer-motion";
+import { isNumber as A } from "lodash-es";
+import { combineClasses as y, STATIC_CLASSES as n } from "../helpers/staticClasses.js";
+import { useInterpolateText as F } from "../hooks/useInterpolateText.js";
+import { useFormViewerStore as D } from "../store/formStore.js";
+import { questionNumberReselect as L } from "../store/selectors.js";
+import { EditableContent as M } from "./fields/EditableContent/EditableContent.js";
+import m from "../FormViewer.module.css.js";
+const J = ({
+  originalStepId: g,
+  control: i,
+  theme: a
+}) => {
+  const { t: x } = S("forms"), l = q(), { useStore: s, api: T } = D(), I = s((t) => t.config.settings), c = s((t) => t.isMobile), p = s((t) => t.editing), f = s(L)[i.id], e = a?.title, N = E(() => {
+    const t = z({
+      color: e?.color || "",
+      theme: l
+    }), d = e?.fontSize;
+    return {
+      "--color": t.value || "auto",
+      "--font-size": d ? `${d}px` : `var(--font-size-${a?.size})`,
+      "--font-weight": e?.fontWeight,
+      "--font-family": e?.fontFamily
+    };
+  }, [
+    a?.size,
+    l,
+    e?.color,
+    e?.fontFamily,
+    e?.fontSize,
+    e?.fontWeight
+  ]), b = F(i.title, p);
+  return /* @__PURE__ */ o(C, { children: [
+    R(
+      /* @__PURE__ */ r(
+        "link",
+        {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css2?family=${e?.fontFamily}:wght@100..900&display=swap`
+        }
+      ),
+      document.head
+    ),
+    /* @__PURE__ */ o(
+      "h1",
+      {
+        className: y(m.stepTitle, n.BLOCK_TITLE),
+        style: N,
+        "data-mobile": c,
+        children: [
+          I.questionNumber && A(f) && /* @__PURE__ */ o(
+            "span",
+            {
+              className: y(
+                m.stepIndicator,
+                n.NUMBER_BADGE
+              ),
+              "data-mobile": c,
+              children: [
+                f,
+                /* @__PURE__ */ r(w, { className: m.stepIndicatorIcon })
+              ]
+            }
+          ),
+          p ? /* @__PURE__ */ o(u, { children: [
+            /* @__PURE__ */ r(
+              M,
+              {
+                value: i.title,
+                placeholder: x("stepTitlePlaceholder"),
+                onChange: (t) => {
+                  T.updateControl(g, i.id, { title: t });
+                }
+              }
+            ),
+            i.required && /* @__PURE__ */ r(
+              h.span,
+              {
+                className: n.REQUIRED_INDICATOR,
+                style: { color: "red", marginLeft: 4 },
+                initial: { opacity: 0, x: -30 },
+                animate: { opacity: 1, x: -10 },
+                exit: { opacity: 0, x: -30 },
+                transition: { duration: 0.2 },
+                children: "*"
+              },
+              "required-edit"
+            )
+          ] }) : /* @__PURE__ */ o(u, { children: [
+            b,
+            i.required && /* @__PURE__ */ r(
+              h.span,
+              {
+                className: n.REQUIRED_INDICATOR,
+                style: { color: "red", marginLeft: 4 },
+                initial: { opacity: 0, x: -10 },
+                animate: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: -10 },
+                transition: { duration: 0.2 },
+                children: "*"
+              },
+              "required-view"
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  J as StepTitle
+};

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

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useTranslation as n } from "react-i18next";
+import { Button as i } from "@mantine/core";
+const u = ({ onClick: t }) => {
+  const { t: o } = n("forms");
+  return /* @__PURE__ */ r(
+    i,
+    {
+      color: "gray",
+      variant: "subtle",
+      fullWidth: !0,
+      justify: "flex-start",
+      td: "underline",
+      w: "fit-content",
+      ml: 6,
+      px: 4,
+      onClick: t,
+      children: o("addOption")
+    }
+  );
+};
+export {
+  u as AddOptionButton
+};

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

@@ -0,0 +1,63 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useSearchParams as W } from "react-router-dom";
+import { Flex as j } from "@mantine/core";
+import { InnerButton as F } from "./InnerButton.js";
+const w = 8, $ = ({
+  control: e,
+  step: x,
+  theme: g
+}) => {
+  const [f] = W(), c = (f.get("view") || "").toLowerCase(), m = c === "mobile" || c === "m", l = (m || window.innerWidth < 992) && e.fullWidthMobile, d = l ? "column" : e.orientation ?? "row", o = d.startsWith("row"), h = (t) => t === "end" ? "flex-end" : t === "center" ? "center" : "flex-start", s = e.buttons ?? [], r = s.map((t) => Math.min(Math.max(t.width ?? 100, 1), 100)), u = r.reduce((t, i) => t + i, 0), b = o && u > 100 ? r.map((t) => t / u * 100) : r, P = 30;
+  let n = b.slice();
+  if (o && m) {
+    n = n.map((i) => Math.max(i, P));
+    const t = n.reduce((i, a) => i + a, 0);
+    if (t > 100) {
+      const i = 100 / t;
+      n = n.map((a) => a * i);
+    }
+  }
+  const M = o && s.length > 0 ? w * (s.length - 1) / s.length : 0, B = o ? { justify: h(e.alignButton), align: "stretch" } : { align: "stretch", justify: h(e.alignButton) };
+  return /* @__PURE__ */ p(
+    j,
+    {
+      direction: d,
+      wrap: "nowrap",
+      gap: w,
+      w: "100%",
+      "data-control-id": e.id,
+      ...B,
+      children: s.map((t, i) => {
+        const a = l ? 100 : n[i], S = o ? {
+          flex: `0 0 calc(${a}% - ${M}px)`,
+          minWidth: 0,
+          maxWidth: "100%",
+          alignSelf: e.alignButton ?? "stretch",
+          boxSizing: "border-box",
+          transition: "flex-basis 200ms ease"
+        } : {
+          width: `${a}%`,
+          minWidth: 0,
+          maxWidth: "100%",
+          alignSelf: e.alignButton ?? "stretch",
+          boxSizing: "border-box",
+          transition: "width 200ms ease"
+        };
+        return /* @__PURE__ */ p(
+          F,
+          {
+            control: e,
+            buttonControl: t,
+            step: x,
+            wrapperStyle: S,
+            theme: g
+          },
+          t.id
+        );
+      })
+    }
+  );
+};
+export {
+  $ as ButtonField
+};

package/dist/components/FormViewer/components/fields/ButtonField/InnerButton.js

@@ -0,0 +1,70 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Tooltip as h, Button as w } from "@mantine/core";
+import { ProjectIcon as I } from "../../../../ProjectIcon/ProjectIcon.js";
+import { STATIC_CLASSES as T } from "../../../helpers/staticClasses.js";
+import { useFormViewerStore as g } from "../../../store/formStore.js";
+import { EditableContent as v } from "../EditableContent/EditableContent.js";
+const P = ({
+  buttonControl: e,
+  control: a,
+  step: c,
+  wrapperStyle: l,
+  theme: t
+}) => {
+  const { useStore: d, api: m } = g(), s = d((i) => i.editing), r = e.label?.trim(), p = (i) => m.updateControl(c.id, a?.id ?? "", i), u = (i, f) => {
+    const S = a?.buttons?.map(
+      (n) => n.id === i ? { ...n, ...f } : n
+    );
+    p({ buttons: S });
+  };
+  return /* @__PURE__ */ o("div", { style: l, children: /* @__PURE__ */ o(
+    h,
+    {
+      label: r,
+      disabled: !e.enableTooltip,
+      withArrow: !0,
+      withinPortal: !0,
+      multiline: !0,
+      maw: 320,
+      children: /* @__PURE__ */ o(
+        w,
+        {
+          w: "100%",
+          p: r ? 8 : 0,
+          color: t?.primaryColor,
+          size: t?.size,
+          radius: t?.borderRadius,
+          styles: {
+            section: {
+              margin: r ? void 0 : 0
+            }
+          },
+          className: T.SUBMIT_BUTTON,
+          leftSection: e.buttonIcon && e.showIconButton ? /* @__PURE__ */ o(
+            I,
+            {
+              variant: "transparent",
+              icon: e.buttonIcon
+            }
+          ) : void 0,
+          ...!s && e.link ? {
+            component: "a",
+            href: e.link,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          } : {},
+          children: s && r ? /* @__PURE__ */ o(
+            v,
+            {
+              value: r,
+              onChange: (i) => u?.(e.id, { label: i })
+            }
+          ) : r
+        }
+      )
+    }
+  ) });
+};
+export {
+  P as InnerButton
+};

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

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