@layers-app/shared 0.1.5 → 0.2.1

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

@@ -0,0 +1,34 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import { Button as u } from "@mantine/core";
+import { ProjectIcon as c } from "../../../ProjectIcon/ProjectIcon.js";
+import { STATIC_CLASSES as f } from "../../helpers/staticClasses.js";
+import { useSteps as l } from "../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as S } from "../../store/formStore.js";
+import { EditableContent as d } from "./EditableContent/EditableContent.js";
+const x = ({
+  control: t,
+  stepId: i
+}) => {
+  const { t: e } = p("forms"), { handleNext: m } = l(), { useStore: a, api: s } = S(), n = a((o) => o.editing);
+  return /* @__PURE__ */ r(
+    u,
+    {
+      className: f.SUBMIT_BUTTON,
+      leftSection: t.buttonIcon && t.showIconButton ? /* @__PURE__ */ r(c, { variant: "transparent", icon: t.buttonIcon }) : void 0,
+      onClick: n ? void 0 : m,
+      children: n ? /* @__PURE__ */ r(
+        d,
+        {
+          value: t.label?.trim() || e("start"),
+          onChange: (o) => {
+            s.updateControl(i, t.id, { label: o });
+          }
+        }
+      ) : t.label?.trim() || e("start")
+    }
+  );
+};
+export {
+  x as StartButton
+};

package/dist/components/FormViewer/components/fields/StartField.d.ts

@@ -4,3 +4,4 @@ export declare const StartField: ({ control, step, theme, }: {
     step: StepData;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=StartField.d.ts.map

package/dist/components/FormViewer/components/fields/StartField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/StartField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGrE,eAAO,MAAM,UAAU,GAAI,2BAIxB;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,mDAaA,CAAC"}

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

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

package/dist/components/FormViewer/components/fields/TextField.d.ts

@@ -2,3 +2,4 @@ import { TextControl } from '../../types/form';
 export declare const TextField: ({ control }: {
     control: TextControl;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextField.d.ts.map

package/dist/components/FormViewer/components/fields/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/TextField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,eAAO,MAAM,SAAS,GAAI,aAAa;IAAE,OAAO,EAAE,WAAW,CAAA;CAAE,4CA+B9D,CAAC"}

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

@@ -0,0 +1,31 @@
+import { jsx as r } from "react/jsx-runtime";
+import { TextInput as d } from "@mantine/core";
+import { ProjectIcon as f } from "../../../ProjectIcon/ProjectIcon.js";
+import { controlsDataMap as l } from "../../helpers/controls.js";
+import { STATIC_CLASSES as u } from "../../helpers/staticClasses.js";
+import { DEFAULT_MAX as T, DEFAULT_MIN as L } from "../../helpers/steps.js";
+import { useSteps as S } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as g } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as h } from "../../store/formStore.js";
+const M = ({ control: t }) => {
+  const { form: n } = S(), { useStore: i } = h(), o = i((s) => s.editing), { id: e, minLength: m, maxLength: a, placeholder: p } = t, c = g(p, o);
+  return /* @__PURE__ */ r(
+    d,
+    {
+      "data-control-id": e,
+      w: "100%",
+      variant: "default",
+      className: u.BLOCK_INPUT_TEXT,
+      leftSection: t.icon ? /* @__PURE__ */ r(f, { icon: t.icon }) : l[t.controlType].icon,
+      minLength: m || L,
+      maxLength: a || T,
+      "data-autofocus": !0,
+      readOnly: o,
+      placeholder: c,
+      ...n.getInputProps(e)
+    }
+  );
+};
+export {
+  M as TextField
+};

package/dist/components/FormViewer/components/fields/UploadField/UploadField.d.ts

@@ -28,3 +28,4 @@ export declare const UploadField: ({ control, theme, }: {
     control: UploadControl;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UploadField.d.ts.map

package/dist/components/FormViewer/components/fields/UploadField/UploadField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/UploadField/UploadField.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA2B,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1E,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAK/D,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,qBAIzB;IACD,OAAO,EAAE,aAAa,CAAC;IAEvB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAwNA,CAAC"}

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

@@ -0,0 +1,155 @@
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import { useCallback as S, useMemo as D } from "react";
+import { useTranslation as V } from "react-i18next";
+import { useMantineTheme as W, parseThemeColor as A, alpha as _, Stack as M, Group as $, Box as G, Text as L, InputError as X } from "@mantine/core";
+import { Dropzone as h } from "@mantine/dropzone";
+import { showNotification as f } from "@mantine/notifications";
+import { IconUpload as q, IconX as H, IconCloudUpload as J } from "@tabler/icons-react";
+import { formatBytes as C } from "../../../../../helpers/formatBytes.js";
+import { useEvent as K } from "../../../../../hooks/useEvent.js";
+import { getRandomId as P } from "../../../helpers/steps.js";
+import { useSteps as Q } from "../../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as Y } from "../../../store/formStore.js";
+import { UploadFile as Z } from "./UploadFile/UploadFile.js";
+import ee from "../../../FormViewer.module.css.js";
+const oe = 25 * 1024 * 1024, ye = ({
+  control: r,
+  theme: d
+}) => {
+  const { t: o } = V("forms"), { form: a } = Q(), { id: s } = r, T = a.values[s], I = a.errors[s], m = r.maxSize || oe, t = r.maxFiles ?? 1, y = r.minFiles ?? 0, E = !!r.multiple || t > 1, l = r.accept && r.accept.length ? r.accept : void 0, { useStore: g } = Y(), R = g((e) => e.editing), U = g((e) => e.preview), b = W(), O = A({
+    color: d?.primaryColor || "",
+    theme: b
+  }), j = g((e) => e.uploadFileFn), F = K((e) => {
+    const c = a.values[s]?.findIndex(
+      (u) => u.id === e.id
+    );
+    c !== -1 && a.setFieldValue(`${s}.${c}`, e);
+  }), k = S(
+    (e) => {
+      if (e.some(
+        (p) => p.errors.some((n) => n.code === "file-invalid-type")
+      )) {
+        f({
+          color: "blue",
+          message: l ? o("uploadOption.typeNotSupportedWithList", {
+            types: l.join(", ")
+          }) : o("uploadOption.typeNotSupported")
+        });
+        return;
+      }
+      if (e.some(
+        (p) => p.errors.some((n) => n.code === "file-too-large")
+      )) {
+        f({
+          message: o("uploadOption.fileTooLarge", {
+            size: C(m)
+          })
+        });
+        return;
+      }
+      if (e.some(
+        (p) => p.errors.some((n) => n.code === "too-many-files")
+      )) {
+        f({
+          message: o("uploadOption.tooManyFiles", { count: t })
+        });
+        return;
+      }
+    },
+    [l, m, t, o]
+  ), x = S(
+    (e) => {
+      j?.(e).then((c) => {
+        F({
+          ...e,
+          url: c,
+          isError: !1,
+          isLoading: !1,
+          isSuccess: !0
+        });
+      }).catch(() => {
+        F({
+          ...e,
+          isError: !0,
+          isLoading: !1,
+          isSuccess: !1
+        });
+      });
+    },
+    [F, j]
+  ), w = S(
+    (e) => {
+      const c = a.values[s]?.length || 0, u = typeof t == "number" ? Math.max(0, t - c) : 1 / 0;
+      if (u === 0) {
+        f({
+          message: o("uploadOption.tooManyFiles", { count: t })
+        });
+        return;
+      }
+      const z = e.slice(0, u);
+      z.forEach((p) => {
+        const n = {
+          id: P(),
+          file: p,
+          isError: !1,
+          isLoading: !0,
+          isSuccess: !1
+        };
+        a.insertListItem(s, n), x(n);
+      }), z.length < e.length && f({
+        message: o("uploadOption.tooManyFiles", { count: t })
+      });
+    },
+    [a, x, s, t, o]
+  ), N = D(() => [
+    o("uploadOption.maxSize", { size: C(m) }),
+    y ? o("uploadOption.minFilesWithCount", { count: y }) : "",
+    t ? o("uploadOption.maxFilesWithCount", { count: t }) : "",
+    l ? o("uploadOption.accept", { types: l.join(", ") }) : ""
+  ].filter(Boolean).join(" · "), [y, t, l, o, m]), B = {
+    "--primary-color": O.value,
+    "--primary-color-hover": _(O.value, 0.05)
+  };
+  return /* @__PURE__ */ v(M, { gap: 8, "data-control-id": s, w: "100%", children: [
+    (T?.length ?? 0) < t && /* @__PURE__ */ i(
+      h,
+      {
+        radius: d?.borderRadius,
+        __size: d?.size,
+        disabled: R || U,
+        onDrop: w,
+        onReject: k,
+        maxFiles: t,
+        maxSize: m,
+        accept: l,
+        multiple: E,
+        unstyled: !0,
+        className: ee.dropzone,
+        style: B,
+        children: /* @__PURE__ */ i($, { justify: "center", py: 24, children: /* @__PURE__ */ v(M, { justify: "center", align: "center", gap: 8, children: [
+          /* @__PURE__ */ v(G, { c: "var(--primary-color)", children: [
+            /* @__PURE__ */ i(h.Accept, { children: /* @__PURE__ */ i(q, { size: 70, stroke: 1.2 }) }),
+            /* @__PURE__ */ i(h.Reject, { children: /* @__PURE__ */ i(H, { size: 70, stroke: 1.2 }) }),
+            /* @__PURE__ */ i(h.Idle, { children: /* @__PURE__ */ i(J, { size: 70, stroke: 1.2 }) })
+          ] }),
+          /* @__PURE__ */ i(L, { size: "xl", inline: !0, ta: "center", c: d?.title?.color, children: o("uploadOption.title") }),
+          /* @__PURE__ */ i(L, { size: "sm", c: d?.description?.color, mt: 4, children: N })
+        ] }) })
+      }
+    ),
+    T?.map((e) => /* @__PURE__ */ i(
+      Z,
+      {
+        file: e,
+        id: s,
+        onReload: x,
+        theme: d
+      },
+      e.id
+    )),
+    I && /* @__PURE__ */ i(X, { children: I })
+  ] });
+};
+export {
+  ye as UploadField
+};

package/dist/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.d.ts

@@ -6,3 +6,4 @@ export declare const UploadFile: ({ file, id, onReload, theme, }: {
     onReload?: (fileData: UploadFileData) => void;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UploadFile.d.ts.map

package/dist/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIhD,eAAO,MAAM,UAAU,GAAI,gCAKxB;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAqEA,CAAC"}

package/dist/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.js

@@ -0,0 +1,62 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useTranslation as g } from "react-i18next";
+import { Card as v, ThemeIcon as a, Box as w, Text as d, Loader as y, Tooltip as m, ActionIcon as u, Divider as T } from "@mantine/core";
+import { IMAGE_MIME_TYPE as b } from "@mantine/dropzone";
+import { IconFileText as C, IconCheck as k, IconReload as A, IconTrash as E } from "@tabler/icons-react";
+import { formatBytes as B } from "../../../../../../helpers/formatBytes.js";
+import { useSteps as L } from "../../../../hooks/useCreateFormContext.js";
+import M from "./UploadFile.module.css.js";
+const N = ({
+  file: r,
+  id: o,
+  onReload: h,
+  theme: i
+}) => {
+  const { t } = g("forms"), { form: l } = L(), { isError: p, isLoading: f, isSuccess: n, url: s } = r, x = l.values[o].findIndex((z) => z.id === r.id), I = () => {
+    l.removeListItem(o, x);
+  };
+  return /* @__PURE__ */ c(
+    v,
+    {
+      withBorder: !0,
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12
+      },
+      children: [
+        n && s && b.includes(r.file.type) ? /* @__PURE__ */ e(
+          "div",
+          {
+            className: M.image,
+            style: {
+              backgroundImage: `url(${window.location.origin}/v1/attachments/${s.id})`
+            },
+            "data-radius": i?.borderRadius
+          }
+        ) : /* @__PURE__ */ e(a, { size: 40, variant: "light", children: /* @__PURE__ */ e(C, { size: "50%" }) }),
+        /* @__PURE__ */ c(w, { miw: 0, flex: 1, children: [
+          /* @__PURE__ */ e(d, { truncate: !0, size: i?.size, children: r.file.name }),
+          /* @__PURE__ */ e(d, { c: "dimmed", size: "xs", children: B(r.file.size) })
+        ] }),
+        f && /* @__PURE__ */ e(y, { color: i?.primaryColor, size: 28 }),
+        n && /* @__PURE__ */ e(a, { color: "green", radius: "xl", children: /* @__PURE__ */ e(k, { size: 16 }) }),
+        p && /* @__PURE__ */ e(m, { label: t("retry"), withArrow: !0, children: /* @__PURE__ */ e(
+          u,
+          {
+            color: "red",
+            radius: "xl",
+            onClick: () => h?.(r),
+            children: /* @__PURE__ */ e(A, { size: 16 })
+          }
+        ) }),
+        /* @__PURE__ */ e(T, { orientation: "vertical" }),
+        /* @__PURE__ */ e(m, { label: t("delete"), withArrow: !0, children: /* @__PURE__ */ e(u, { color: "red", variant: "subtle", onClick: I, children: /* @__PURE__ */ e(E, { size: 18 }) }) })
+      ]
+    }
+  );
+};
+export {
+  N as UploadFile
+};

package/dist/components/FormViewer/components/fields/UploadField/UploadFile/UploadFile.module.css.js

@@ -0,0 +1,7 @@
+const a = "_image_ta8bx_1", e = {
+  image: a
+};
+export {
+  e as default,
+  a as image
+};

package/dist/components/FormViewer/components/fields/YesNoField.d.ts

@@ -2,3 +2,4 @@ import { YesNoControl } from '../../types/form';
 export declare const YesNoField: ({ control }: {
     control: YesNoControl;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=YesNoField.d.ts.map

package/dist/components/FormViewer/components/fields/YesNoField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YesNoField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/YesNoField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,eAAO,MAAM,UAAU,GAAI,aAAa;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,4CAgChE,CAAC"}

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

@@ -0,0 +1,37 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useTranslation as u } from "react-i18next";
+import { Stack as h, Flex as p, Button as a, InputError as g } from "@mantine/core";
+import { IconCheck as k, IconX as v } from "@tabler/icons-react";
+import { isNil as f } from "lodash-es";
+import { useSteps as x } from "../../hooks/useCreateFormContext.js";
+const z = ({ control: o }) => {
+  const { t: i } = u("forms"), { setValue: l, form: n } = x(), r = n.values[o.id], { id: e, yesLabel: d, noLabel: m } = o, s = n.errors[e];
+  return /* @__PURE__ */ c(h, { gap: 8, "data-control-id": e, children: [
+    /* @__PURE__ */ c(p, { gap: 8, children: [
+      /* @__PURE__ */ t(
+        a,
+        {
+          leftSection: /* @__PURE__ */ t(k, { size: 16 }),
+          variant: f(r) ? "light" : r ? "filled" : "light",
+          onClick: () => l(e, !0),
+          fullWidth: !0,
+          children: d || i("yes")
+        }
+      ),
+      /* @__PURE__ */ t(
+        a,
+        {
+          leftSection: /* @__PURE__ */ t(v, { size: 16 }),
+          variant: f(r) || r ? "light" : "filled",
+          onClick: () => l(e, !1),
+          fullWidth: !0,
+          children: m || i("no")
+        }
+      )
+    ] }),
+    s && /* @__PURE__ */ t(g, { children: s })
+  ] });
+};
+export {
+  z as YesNoField
+};

package/dist/components/FormViewer/constants/defaultTheme.d.ts

@@ -1,2 +1,3 @@
 import { RequiredThemeData } from '../types/form';
 export declare const DEFAULT_THEME: RequiredThemeData;
+//# sourceMappingURL=defaultTheme.d.ts.map

package/dist/components/FormViewer/constants/defaultTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/constants/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,eAAO,MAAM,aAAa,EAAE,iBAqC3B,CAAC"}

package/dist/components/FormViewer/constants/defaultTheme.js

@@ -0,0 +1,41 @@
+const o = {
+  align: "start",
+  listStyle: "disc",
+  input: {},
+  customCSS: "",
+  primaryColor: "#228BE6",
+  size: "md",
+  borderRadius: "md",
+  font: { fontFamily: "Roboto", fontWeight: 400 },
+  title: {
+    fontFamily: "Roboto",
+    fontWeight: 400,
+    fontSize: 20,
+    color: "var(--mantine-color-bright)"
+  },
+  description: {
+    fontFamily: "Roboto",
+    fontWeight: 400,
+    fontSize: 14,
+    color: "var(--mantine-color-bright)"
+  },
+  container: {
+    opacity: 1,
+    blur: 0,
+    color: "transparent",
+    shadowSize: 0,
+    shadowColor: "transparent"
+  },
+  background: {
+    color: "transparent",
+    image: void 0,
+    blur: 0,
+    brightness: 100,
+    opacity: 1,
+    fit: "cover",
+    blendMode: "normal"
+  }
+};
+export {
+  o as DEFAULT_THEME
+};