@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/FilePicker/FilePickerUpload.js

@@ -0,0 +1,86 @@
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { useCallback as l } from "react";
+import { Image02Icon as g } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as x } from "@hugeicons/react";
+import { Stack as c, Text as a } from "@mantine/core";
+import { Dropzone as u, IMAGE_MIME_TYPE as F } from "@mantine/dropzone";
+import { showNotification as f } from "@mantine/notifications";
+import { showErrorNotification as y } from "../../helpers/showNotifications.js";
+import "@mantine/dropzone/styles.css";
+const C = ({
+  locales: e,
+  uploading: d,
+  dropZoneProps: n,
+  onUpload: s
+}) => {
+  const p = l(
+    (t) => {
+      if (t.filter(
+        (r) => r.errors.some((o) => o.code === "file-invalid-type")
+      ).length > 0) {
+        f({
+          color: "blue",
+          message: e.errors.typeIsNotAllowed
+        });
+        return;
+      }
+      if (t.some((r) => r.errors.some((o) => o.code === "file-too-large"))) {
+        y({
+          title: e.error,
+          message: e.errors.shouldNotExceed
+        });
+        return;
+      }
+      if (t.filter(
+        (r) => r.errors.some((o) => o.code === "too-many-files")
+      ).length > 0) {
+        f({
+          color: "blue",
+          message: e.errors.doNotUploadMoreThanSingleFile
+        });
+        return;
+      }
+    },
+    [e]
+  ), h = l(s, [s]);
+  return /* @__PURE__ */ i(
+    u,
+    {
+      loading: d,
+      onDrop: h,
+      onReject: p,
+      maxFiles: n?.maxFiles || 1,
+      accept: F,
+      px: 60,
+      py: "xl",
+      ...n || {},
+      children: /* @__PURE__ */ m(
+        c,
+        {
+          justify: "center",
+          gap: "var(--mantine-font-size-xs",
+          align: "center",
+          mih: 89,
+          style: { pointerEvents: "none" },
+          children: [
+            /* @__PURE__ */ i(
+              x,
+              {
+                size: 32,
+                color: "var(--mantine-color-bright)",
+                icon: g
+              }
+            ),
+            /* @__PURE__ */ m(c, { gap: 8, align: "center", children: [
+              /* @__PURE__ */ i(a, { fw: 500, fz: "sm", c: "bright", lh: "sm", ta: "center", children: e.dragOrClickToChoose }),
+              /* @__PURE__ */ i(a, { fz: "xs", fw: 400, lh: "140%", c: "dimmed", ta: "center", children: e.maxFileSize })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  C as FilePickerUpload
+};

package/dist/components/FilePicker/api/giphyApi.js

@@ -0,0 +1,26 @@
+import { useQuery as h } from "@tanstack/react-query";
+import p from "query-string";
+const y = "TBp2lqNzl0orFQtaXgwymH4UDM0kbAVe", g = async (o, n = 1, i) => {
+  const s = o.q ? "/gifs/search" : "/gifs/trending", a = await fetch(
+    `https://api.giphy.com/v1${s}?${p.stringify({
+      ...o,
+      api_key: i || y
+    })}`
+  );
+  if (!a.ok)
+    throw new Error("Failed to fetch Giphy photos");
+  const t = await a.json(), e = t.data, r = Math.ceil(t.pagination.total_count / 12), c = t.pagination.total_count % 12 === 0 || t.pagination.total_count > t.pagination.count + t.pagination.offset;
+  return {
+    items: e,
+    page: n,
+    totalPages: r,
+    hasMore: c
+  };
+}, d = (o, n, i) => h({
+  queryKey: ["giphyPhotos", o, n],
+  queryFn: () => g(o, n, i)
+});
+export {
+  g as fetchGiphyPhotos,
+  d as useGiphyPhotos
+};

package/dist/components/FilePicker/api/unsplashApi.js

@@ -0,0 +1,29 @@
+import { useQuery as i } from "@tanstack/react-query";
+import p from "query-string";
+const u = "a2SNktIFgNCvXITBZgpup1T8mtSdJIM6TIZlndbRuRg", c = async (t, e, o) => {
+  const h = t.query ? "/search/photos" : "/photos", n = await fetch(
+    `https://api.unsplash.com${h}?${p.stringify(t)}`,
+    {
+      headers: {
+        Authorization: `Client-ID ${e || u}`
+      }
+    }
+  );
+  if (!n.ok)
+    throw new Error("Failed to fetch Unsplash photos");
+  const s = await n.json(), r = s && "results" in s ? s.results : s, a = s && "total_pages" in s ? s.total_pages : 999;
+  return {
+    items: o ? [...o.items, ...r] : r,
+    page: t.page || 1,
+    totalPages: a,
+    hasMore: a > (t.page || 1)
+  };
+}, f = (t, e, o) => i({
+  queryKey: ["unsplashPhotos", t],
+  queryFn: () => c(t, e),
+  ...o
+});
+export {
+  c as fetchUnsplashPhotos,
+  f as useUnsplashPhotos
+};

package/dist/components/FilePicker/types.d.ts

@@ -14,6 +14,7 @@ export type FilePickerLocales = {
     uploadFile?: string;
     change?: string;
     remove?: string;
+    save?: string;
     dragOrClickToChoose?: string;
     maxFileSize?: string;
     pasteLink?: string;

package/dist/components/FormViewer/FormViewer.js

@@ -0,0 +1,42 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useState as u, useRef as f } from "react";
+import { useMantineColorScheme as h, MantineProvider as p } from "@mantine/core";
+import { AllSlidesLayout as S } from "./components/AllSlidesLayout.js";
+import { OneSlideLayout as y } from "./components/OneSlideLayput.js";
+import { getRandomId as v } from "./helpers/steps.js";
+import { useFormGlobalTheme as w } from "./hooks/useFormGlobalTheme.js";
+import { useFormViewerStore as x } from "./store/formStore.js";
+import C from "./FormViewer.module.css.js";
+const V = ({
+  NoStepSlot: r = () => null,
+  copyright: m
+}) => {
+  const [o] = u(() => v()), { colorScheme: t } = h(), { useStore: i } = x(), s = i((c) => c.layout), { mantineTheme: n, customStyles: a } = w({ innerId: o }), l = f(null);
+  return /* @__PURE__ */ d(
+    p,
+    {
+      theme: n,
+      getRootElement: () => l.current ?? void 0,
+      forceColorScheme: t === "auto" ? void 0 : t,
+      classNamesPrefix: "layers",
+      withGlobalClasses: !1,
+      withStaticClasses: !0,
+      cssVariablesSelector: `#forms-provider-${o}`,
+      children: [
+        /* @__PURE__ */ e("style", { dangerouslySetInnerHTML: { __html: a } }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            ref: l,
+            id: `forms-provider-${o}`,
+            className: C.themeProvider,
+            children: s === "one-slide" ? /* @__PURE__ */ e(y, { NoStepSlot: r, copyright: m }) : s === "all-slides" ? /* @__PURE__ */ e(S, { NoStepSlot: r }) : null
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as FormViewer
+};

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

@@ -0,0 +1,37 @@
+const t = "_themeProvider_13pry_1", o = "_root_13pry_7", e = "_container_13pry_36", n = "_media_13pry_42", _ = "_background_13pry_46", r = "_stepRoot_13pry_59", s = "_content_13pry_104", c = "_mediaInner_13pry_169", p = "_stepTitle_13pry_332", i = "_stepDescription_13pry_355", a = "_stepIndicator_13pry_369", d = "_stepIndicatorIcon_13pry_386", l = "_focusBox_13pry_405", y = "_dropzone_13pry_414", u = "_allSlidesLayout_13pry_432", I = "_allSlidesLayoutStep_13pry_438", m = {
+  themeProvider: t,
+  root: o,
+  container: e,
+  media: n,
+  background: _,
+  stepRoot: r,
+  content: s,
+  mediaInner: c,
+  stepTitle: p,
+  stepDescription: i,
+  stepIndicator: a,
+  stepIndicatorIcon: d,
+  focusBox: l,
+  dropzone: y,
+  allSlidesLayout: u,
+  allSlidesLayoutStep: I
+};
+export {
+  u as allSlidesLayout,
+  I as allSlidesLayoutStep,
+  _ as background,
+  e as container,
+  s as content,
+  m as default,
+  y as dropzone,
+  l as focusBox,
+  n as media,
+  c as mediaInner,
+  o as root,
+  i as stepDescription,
+  a as stepIndicator,
+  d as stepIndicatorIcon,
+  r as stepRoot,
+  p as stepTitle,
+  t as themeProvider
+};

package/dist/components/FormViewer/components/AllSlidesLayout.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Stack as l } from "@mantine/core";
+import { useFormViewerStore as m } from "../store/formStore.js";
+import { stepsReselect as p, startStepReselect as c } from "../store/selectors.js";
+import { Step as n } from "./Step.js";
+import i from "../FormViewer.module.css.js";
+const L = ({ NoStepSlot: o }) => {
+  const { useStore: e } = m(), { currentSteps: s } = e(p);
+  return e(c) ? /* @__PURE__ */ t("div", { className: i.allSlidesLayout, children: s.map((r) => /* @__PURE__ */ t("div", { className: i.allSlidesLayoutStep, children: /* @__PURE__ */ t(n, { step: r }, r.id) })) }) : /* @__PURE__ */ t(
+    l,
+    {
+      align: "center",
+      justify: "center",
+      gap: 4,
+      w: "100%",
+      h: "100%",
+      p: 16,
+      children: /* @__PURE__ */ t(o, {})
+    }
+  );
+};
+export {
+  L as AllSlidesLayout
+};

package/dist/components/FormViewer/components/Container.js

@@ -0,0 +1,27 @@
+import { jsx as n } from "react/jsx-runtime";
+import { memo as t } from "react";
+import { useFormViewerStore as e } from "../store/formStore.js";
+import c from "../FormViewer.module.css.js";
+const u = t(
+  ({ children: r, theme: o }) => {
+    const { useStore: i } = e(), a = i((s) => s.isMobile);
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        className: c.container,
+        "data-size": o?.size,
+        "data-mobile": a,
+        style: {
+          "--border-radius": `var(--mantine-radius-${o?.borderRadius})`,
+          "--blur": `${o?.container?.blur ?? 0}px`,
+          "--color": o?.container?.color,
+          "--shadow": `0 0 ${o?.container?.shadowSize || 0}px ${o?.container?.shadowColor || "transparent"}`
+        },
+        children: r
+      }
+    );
+  }
+);
+export {
+  u as Container
+};

package/dist/components/FormViewer/components/ListFocusBox.js

@@ -0,0 +1,22 @@
+import { jsx as o, Fragment as i } from "react/jsx-runtime";
+import { useActiveControl as u } from "../hooks/useActiveControl.js";
+import { useActiveStep as a } from "../hooks/useActiveStep.js";
+import { useFormViewerStore as f } from "../store/formStore.js";
+import p from "../FormViewer.module.css.js";
+const l = ({
+  controlId: r,
+  children: t
+}) => {
+  const { useStore: s } = f(), m = s((n) => n.editing), e = a(), c = u();
+  return !m || e?.id !== "list" ? /* @__PURE__ */ o(i, { children: t }) : c?.id === r ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: p.focusBox,
+      "data-radius": e?.theme?.borderRadius,
+      children: t
+    }
+  ) : /* @__PURE__ */ o(i, { children: t });
+};
+export {
+  l as ListFocusBox
+};

package/dist/components/FormViewer/components/NavControls.js

@@ -0,0 +1,58 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useCallback as a } from "react";
+import { useTranslation as d } from "react-i18next";
+import { Flex as S, Button as h } from "@mantine/core";
+import { useMediaQuery as C, useWindowEvent as g } from "@mantine/hooks";
+import { IconCornerDownLeft as w } from "@tabler/icons-react";
+import { STATIC_CLASSES as b } from "../helpers/staticClasses.js";
+import { useSteps as E } from "../hooks/useCreateFormContext.js";
+import { useInterpolateText as x } from "../hooks/useInterpolateText.js";
+import { useFormViewerStore as c } from "../store/formStore.js";
+import { EditableContent as T } from "./fields/EditableContent/EditableContent.js";
+const F = ({ data: e }) => {
+  const { t: n } = d("forms"), { handleNext: i } = E(), { api: l } = c(), s = C("(max-width: 992px)"), { useStore: m } = c(), r = m((o) => o.editing), p = m((o) => o.config.settings), f = a(
+    (o) => {
+      r || e.isEnd || s || o.code !== "Enter" || i();
+    },
+    [e.isEnd, r, i, s]
+  );
+  g("keydown", f);
+  const u = x(
+    e.confirmLabel,
+    r
+  );
+  return e.isStart || e.isEnd ? null : /* @__PURE__ */ t(
+    S,
+    {
+      justify: "var(--align)",
+      gap: 8,
+      wrap: "wrap",
+      direction: e.theme?.align === "start" ? "row" : "row-reverse",
+      children: /* @__PURE__ */ t(
+        h,
+        {
+          color: e.theme?.primaryColor,
+          size: e.theme?.size,
+          radius: e.theme?.borderRadius,
+          className: b.SUBMIT_BUTTON,
+          onClick: r ? void 0 : i,
+          leftSection: p.enterIndicator && /* @__PURE__ */ t(w, { size: "1em" }),
+          children: r ? /* @__PURE__ */ t(
+            T,
+            {
+              value: e.confirmLabel?.trim() || n("continue"),
+              onChange: (o) => {
+                l.updateStep(e.id, {
+                  confirmLabel: o
+                });
+              }
+            }
+          ) : u || n("continue")
+        }
+      )
+    }
+  );
+};
+export {
+  F as NavControls
+};

package/dist/components/FormViewer/components/Navigation/Navigation.js

@@ -0,0 +1,37 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useTranslation as f } from "react-i18next";
+import { ActionIcon as n, Tooltip as c } from "@mantine/core";
+import { useMediaQuery as v } from "@mantine/hooks";
+import { IconChevronUp as u, IconChevronLeft as g, IconChevronDown as S, IconChevronRight as C } from "@tabler/icons-react";
+import { useActiveStep as x } from "../../hooks/useActiveStep.js";
+import { useSteps as z } from "../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as b } from "../../store/formStore.js";
+import { stepsReselect as I } from "../../store/selectors.js";
+const T = () => {
+  const { useStore: i } = b(), { handleNext: m, handlePrev: p } = z(), o = x(), a = i(I), t = i((r) => r.config.settings), { t: s } = f("forms"), d = v("(max-width: 768px)"), l = i((r) => r.editing);
+  return a.currentSteps.length < 2 || o?.isEnd || d ? null : /* @__PURE__ */ h(n.Group, { children: [
+    t.freeNav && /* @__PURE__ */ e(c, { label: s("prevStep"), children: /* @__PURE__ */ e(
+      n,
+      {
+        disabled: o?.isStart,
+        size: "lg",
+        color: o?.theme?.primaryColor,
+        onClick: l ? void 0 : p,
+        children: t.slideAnimation === "vertical" ? /* @__PURE__ */ e(u, { size: 18 }) : /* @__PURE__ */ e(g, { size: 18 })
+      }
+    ) }),
+    /* @__PURE__ */ e(c, { label: s("nextStep"), children: /* @__PURE__ */ e(
+      n,
+      {
+        disabled: o?.isEnd,
+        size: "lg",
+        color: o?.theme?.primaryColor,
+        onClick: l ? void 0 : m,
+        children: t.slideAnimation === "vertical" ? /* @__PURE__ */ e(S, { size: 18 }) : /* @__PURE__ */ e(C, { size: 18 })
+      }
+    ) })
+  ] });
+};
+export {
+  T as Navigation
+};

package/dist/components/FormViewer/components/OneSlideLayput.js

@@ -0,0 +1,133 @@
+import { jsx as e, jsxs as s, Fragment as c } from "react/jsx-runtime";
+import { memo as d } from "react";
+import { createPortal as h } from "react-dom";
+import { Stack as u, Flex as b } from "@mantine/core";
+import { AnimatePresence as y, motion as k } from "framer-motion";
+import { Copyright as S } from "../../Copyright/index.js";
+import { animations as w } from "../helpers/slides.js";
+import { useFormViewerStore as p } from "../store/formStore.js";
+import { startStepReselect as v, themeReselect as F } from "../store/selectors.js";
+import { Navigation as x } from "./Navigation/Navigation.js";
+import { getImageFilter as $, Step as R } from "./Step.js";
+import { ProgressLine as A } from "./fields/ProgressLine.js";
+import g from "../FormViewer.module.css.js";
+import { useSteps as C } from "../hooks/useCreateFormContext.js";
+import { useFormMobile as j } from "../hooks/useFormMobile.js";
+import { useActiveStep as N } from "../hooks/useActiveStep.js";
+const T = ({
+  NoStepSlot: m,
+  copyright: l
+}) => {
+  const { useStore: a } = p();
+  return a(v) ? /* @__PURE__ */ e(P, { copyright: l }) : /* @__PURE__ */ e(
+    u,
+    {
+      align: "center",
+      justify: "center",
+      gap: 4,
+      w: "100%",
+      h: "100%",
+      p: 16,
+      children: /* @__PURE__ */ e(m, {})
+    }
+  );
+}, P = d(({ copyright: m }) => {
+  const { anim: l } = C(), { ref: a } = j(), { useStore: n } = p(), i = n((r) => r.config.settings), f = n((r) => r.editing), t = n(F), o = N();
+  return /* @__PURE__ */ s(c, { children: [
+    h(
+      /* @__PURE__ */ s(c, { children: [
+        /* @__PURE__ */ e(
+          "link",
+          {
+            rel: "stylesheet",
+            href: `https://fonts.googleapis.com/css2?family=${t.title?.fontFamily || "Roboto"}:wght@${t.title?.fontWeight || 400}&display=swap`
+          }
+        ),
+        /* @__PURE__ */ e(
+          "link",
+          {
+            rel: "stylesheet",
+            href: `https://fonts.googleapis.com/css2?family=${t.description?.fontFamily || "Roboto"}:wght@${t.description?.fontWeight || 400}&display=swap`
+          }
+        ),
+        /* @__PURE__ */ e(
+          "link",
+          {
+            rel: "stylesheet",
+            href: `https://fonts.googleapis.com/css2?family=${t.font?.fontFamily || "Roboto"}:wght@${t.font?.fontWeight || 400}&display=swap`
+          }
+        )
+      ] }),
+      document.head
+    ),
+    /* @__PURE__ */ s("div", { ref: a, className: g.root, children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: g.background,
+          style: {
+            "--bg-blend": t.background?.blendMode,
+            "--bg-fit": t.background?.fit || "cover",
+            "--bg-image": t.background?.image ? `url(${t.background.image})` : "none",
+            "--bg-color": t.background?.color || "none",
+            "--bg-image-filter": $({
+              brightness: t.background?.brightness || 100,
+              blur: t.background?.blur,
+              layout: "background"
+            })
+          }
+        }
+      ),
+      /* @__PURE__ */ e(y, { mode: "wait", children: o && /* @__PURE__ */ e(
+        k.div,
+        {
+          style: {
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0
+          },
+          transition: {
+            duration: 0.25
+          },
+          ...w[i.slideAnimation][l],
+          animate: { opacity: 1, y: 0, x: 0 },
+          children: /* @__PURE__ */ e(
+            R,
+            {
+              step: o,
+              theme: o.theme
+            },
+            o.id
+          )
+        },
+        o.id
+      ) })
+    ] }),
+    /* @__PURE__ */ s(
+      b,
+      {
+        pos: "absolute",
+        bottom: 24,
+        right: 24,
+        onClick: f ? (r) => r.preventDefault() : void 0,
+        children: [
+          i.copyright && /* @__PURE__ */ e(
+            S,
+            {
+              size: "sm",
+              color: o?.theme?.primaryColor,
+              title: m
+            }
+          ),
+          i.navArrows && i.layout === "slides" && /* @__PURE__ */ e(x, {})
+        ]
+      }
+    ),
+    i.progressBar && /* @__PURE__ */ e(A, {})
+  ] });
+});
+export {
+  T as OneSlideLayout
+};