@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/ErrorPage/components/Error500.js

@@ -0,0 +1,58 @@
+import { jsxs as e, Fragment as n, jsx as t } from "react/jsx-runtime";
+import { Helmet as l } from "react-helmet";
+import { useTranslation as s } from "react-i18next";
+import { Stack as m, CloseButton as c } from "@mantine/core";
+import { IconReload as p } from "@tabler/icons-react";
+import { useMenu as a } from "../../../hooks/useMenu.js";
+import { NoData as d } from "../../NoData/NoData.js";
+const k = ({ closeAction: r }) => {
+  const { t: o } = s(), { isMobile: i } = a();
+  return /* @__PURE__ */ e(n, { children: [
+    /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t("title", { children: "500" }) }),
+    /* @__PURE__ */ e(
+      m,
+      {
+        h: "100dvh",
+        p: 80,
+        gap: "sm",
+        justify: "center",
+        flex: 1,
+        align: "center",
+        children: [
+          /* @__PURE__ */ t(
+            d,
+            {
+              title: o("500.title"),
+              description: o("500.description"),
+              illustration: "500",
+              size: 150,
+              flex: "0,0,0",
+              h: "50dvh",
+              w: i ? 500 : "60%",
+              titleProps: { mt: 20 },
+              buttons: [
+                {
+                  leftSection: /* @__PURE__ */ t(p, { size: 18 }),
+                  children: o("500.reload"),
+                  onClick: () => window.location.reload()
+                }
+              ]
+            }
+          ),
+          r && /* @__PURE__ */ t(
+            c,
+            {
+              pos: "absolute",
+              top: 16,
+              right: 16,
+              onClick: r
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  k as Error500
+};

package/dist/components/ErrorPage/components/ErrorUndefined.js

@@ -0,0 +1,44 @@
+import { jsx as r, Fragment as i, jsxs as a } from "react/jsx-runtime";
+import { useTranslation as l } from "react-i18next";
+import { useNavigate as s } from "react-router-dom";
+import { Stack as d, CloseButton as c } from "@mantine/core";
+import { NoData as m } from "../../NoData/NoData.js";
+const k = ({
+  closeAction: e
+}) => {
+  const { t: o } = l(), n = s(), t = () => {
+    n("/");
+  };
+  return /* @__PURE__ */ r(i, { children: /* @__PURE__ */ a(d, { p: 80, gap: "sm", justify: "center", flex: 1, align: "center", children: [
+    /* @__PURE__ */ r(
+      m,
+      {
+        title: o("undefinedError.title"),
+        illustration: "500",
+        h: "100dvh",
+        buttons: [
+          {
+            children: o("undefinedError.reload"),
+            onClick: () => window.location.reload()
+          },
+          {
+            children: o("undefinedError.goHome"),
+            onClick: t
+          }
+        ]
+      }
+    ),
+    e && /* @__PURE__ */ r(
+      c,
+      {
+        pos: "absolute",
+        top: 16,
+        right: 16,
+        onClick: t
+      }
+    )
+  ] }) });
+};
+export {
+  k as ErrorUndefined
+};

package/dist/components/ErrorPage/index.js

@@ -0,0 +1,25 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Error403 as f } from "./components/Error403.js";
+import { ErrorUndefined as u } from "./components/ErrorUndefined.js";
+import { Error500 as e } from "./components/Error500.js";
+import { Error406 as a } from "./components/Error406.js";
+import { Error404 as o } from "./components/Error404.js";
+const x = ({ error: m, closeAction: r }) => {
+  if (m && "status" in m)
+    switch (m.status) {
+      case 404:
+        return /* @__PURE__ */ t(o, { size: 280, closeAction: r });
+      case 406:
+        return /* @__PURE__ */ t(a, { closeAction: r });
+      case 500:
+        return /* @__PURE__ */ t(e, { closeAction: r });
+      case 403:
+        return /* @__PURE__ */ t(f, { closeAction: r });
+      default:
+        return /* @__PURE__ */ t(u, { closeAction: r });
+    }
+  return /* @__PURE__ */ t(e, { closeAction: r });
+};
+export {
+  x as ErrorPage
+};

package/dist/components/FilePicker/FilePicker.js

@@ -0,0 +1,242 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { useState as b, useMemo as y } from "react";
+import { ImageAdd02Icon as x } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as F } from "@hugeicons/react";
+import { useMenu as W } from "../../hooks/useMenu.js";
+import { Flex as r, ActionIcon as H, Button as z, Text as q, Popover as g, Tabs as f, Stack as J } from "@mantine/core";
+import { FilePickerGallery as K } from "./FilePickerGallery.js";
+import { FilePickerGiphy as Q } from "./FilePickerGiphy.js";
+import { FilePickerLink as X } from "./FilePickerLink.js";
+import { FilePickerUnsplash as Y } from "./FilePickerUnsplash.js";
+import { FilePickerUpload as Z } from "./FilePickerUpload.js";
+import I from "./FilePicker.module.css.js";
+const _ = [
+  "gallery",
+  "upload",
+  "link",
+  "unsplash",
+  "giphy"
+], me = ({
+  onChange: P,
+  onRemove: L,
+  onUpload: h,
+  uploading: S = !1,
+  showTabs: a = _,
+  children: C,
+  width: M = 610,
+  position: N = "bottom-end",
+  readOnly: w = !1,
+  hasImage: A,
+  giphyToken: o,
+  unsplashClientId: d,
+  type: U = "image",
+  galleryCollection: c = [],
+  isValidMediaUrl: B,
+  popoverProps: G,
+  dropZoneProps: j,
+  targetProps: T,
+  onOpenedChange: D,
+  locales: l = {
+    gallery: "Gallery",
+    link: "Link",
+    search: "Search",
+    upload: "Upload",
+    uploadFile: "Upload file",
+    change: "Change",
+    save: "Save",
+    remove: "Remove",
+    error: "Error",
+    dragOrClickToChoose: "Drag images here or click to select files",
+    maxFileSize: "Images wider than 1600px are recommended. Maximum file size: 5MB.",
+    pasteLink: "Paste the image link...",
+    submitLink: "Apply",
+    worksWithAnyImage: "Works with any images from the Internet",
+    noImages: "No images",
+    errors: {
+      typeIsNotAllowed: "This file type is not supported",
+      shouldNotExceed: "File size should not exceed 5 MB.",
+      doNotUploadMoreThanSingleFile: "Please upload no more than one file.",
+      invalidLink: "Invalid link"
+    }
+  }
+}) => {
+  const [v, u] = b(!1), { isMobile: n } = W(), m = y(
+    () => [
+      {
+        value: "gallery",
+        label: /* @__PURE__ */ e(r, { children: !n && /* @__PURE__ */ e("span", { children: l.gallery }) }),
+        visible: a.includes("gallery") && !!c.length
+      },
+      {
+        value: "upload",
+        label: /* @__PURE__ */ e(r, { children: !n && /* @__PURE__ */ e("span", { children: l.upload }) }),
+        visible: a.includes("upload") && !!h
+      },
+      {
+        value: "link",
+        label: /* @__PURE__ */ e(r, { children: !n && /* @__PURE__ */ e("span", { children: l.link }) }),
+        visible: a.includes("link")
+      },
+      {
+        value: "unsplash",
+        label: /* @__PURE__ */ e(r, { children: !n && /* @__PURE__ */ e("span", { children: "Search image" }) }),
+        visible: a.includes("unsplash") && d
+      },
+      {
+        value: "giphy",
+        label: /* @__PURE__ */ e(r, { children: !n && /* @__PURE__ */ e("span", { children: "GIFs" }) }),
+        visible: a.includes("giphy") && o
+      }
+    ].filter((i) => i.visible),
+    [
+      n,
+      a,
+      d,
+      o,
+      l.gallery,
+      l.link,
+      l.upload,
+      c.length,
+      h
+    ]
+  ), [t, E] = b(() => {
+    if (m[0]) return m[0].value;
+    const i = m.find((V) => V.visible);
+    return i ? i.value : "";
+  }), O = (i) => {
+    h?.(i, u);
+  }, p = (i) => {
+    P?.(i), u(!1);
+  }, R = y(() => n ? /* @__PURE__ */ s(H, { size: "lg", children: [
+    /* @__PURE__ */ e(F, { icon: x, size: 22 }),
+    " "
+  ] }) : /* @__PURE__ */ e(
+    z,
+    {
+      variant: "default",
+      size: "xs",
+      leftSection: /* @__PURE__ */ e(F, { icon: x, size: 16 }),
+      children: /* @__PURE__ */ e(q, { fw: 600, size: "sm", children: l?.change })
+    }
+  ), [l, n]), k = (i) => {
+    u(i), D?.(i);
+  };
+  return /* @__PURE__ */ s(
+    g,
+    {
+      width: M,
+      radius: "var(--mantine-spacing-sm)",
+      position: N,
+      shadow: "md",
+      opened: v,
+      onChange: k,
+      withinPortal: !0,
+      ...G || {},
+      children: [
+        /* @__PURE__ */ e(g.Target, { children: /* @__PURE__ */ e(r, { onClick: () => k(!v), ...T, children: C ?? R }) }),
+        /* @__PURE__ */ s(g.Dropdown, { p: 0, children: [
+          /* @__PURE__ */ e(r, { justify: "space-between", align: "center", children: /* @__PURE__ */ e(
+            f,
+            {
+              defaultValue: "gallery",
+              value: t,
+              styles: {
+                list: {
+                  alignItems: "center",
+                  paddingRight: "var(--mantine-spacing-xs)"
+                }
+              },
+              w: "100%",
+              children: /* @__PURE__ */ s(
+                f.List,
+                {
+                  style: {
+                    gap: "4px"
+                  },
+                  px: 8,
+                  h: 54,
+                  children: [
+                    m.map((i) => /* @__PURE__ */ e(
+                      f.Tab,
+                      {
+                        className: I.originalTab,
+                        disabled: w,
+                        h: "100%",
+                        p: 0,
+                        value: i.value,
+                        onClick: () => E(i.value),
+                        children: /* @__PURE__ */ e(r, { className: I.customTab, px: "sm", h: 36, children: i.label })
+                      },
+                      i.value
+                    )),
+                    A && /* @__PURE__ */ e(
+                      z,
+                      {
+                        variant: "subtle",
+                        fz: "sm",
+                        lh: "sm",
+                        fw: 500,
+                        px: "sm",
+                        size: "30px",
+                        onClick: L,
+                        color: "var(--mantine-color-gray-light-color)",
+                        style: { marginLeft: "auto" },
+                        children: l.remove
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ s(J, { gap: 0, px: 8, pb: 8, pt: "sm", children: [
+            t === "gallery" && !!c.length && /* @__PURE__ */ e(
+              K,
+              {
+                galleryCollection: c,
+                onChange: p
+              }
+            ),
+            t === "upload" && /* @__PURE__ */ e(
+              Z,
+              {
+                locales: l,
+                uploading: S,
+                dropZoneProps: j,
+                onUpload: O
+              }
+            ),
+            t === "link" && /* @__PURE__ */ e(
+              X,
+              {
+                locales: l,
+                type: U || "image",
+                onChange: p,
+                isValidMediaUrl: B
+              }
+            ),
+            t === "unsplash" && d && /* @__PURE__ */ e(
+              Y,
+              {
+                locales: l,
+                clientId: d,
+                onChange: p
+              }
+            ),
+            t === "giphy" && o && /* @__PURE__ */ e(
+              Q,
+              {
+                locales: l,
+                token: o,
+                onChange: p
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  me as FilePicker
+};

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

@@ -0,0 +1,13 @@
+const t = "_itemImage_3fqzc_1", o = "_originalTab_3fqzc_14", a = "_customTab_3fqzc_20", c = "_button_3fqzc_28", _ = {
+  itemImage: t,
+  originalTab: o,
+  customTab: a,
+  button: c
+};
+export {
+  c as button,
+  a as customTab,
+  _ as default,
+  t as itemImage,
+  o as originalTab
+};

package/dist/components/FilePicker/FilePickerGallery.js

@@ -0,0 +1,38 @@
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { Stack as l, Text as o, SimpleGrid as p, AspectRatio as c } from "@mantine/core";
+import d from "./FilePicker.module.css.js";
+const x = ({
+  galleryCollection: s,
+  onChange: t
+}) => /* @__PURE__ */ r(l, { gap: "xs", mah: 400, w: "100%", style: { overflow: "auto" }, children: s.map((e) => /* @__PURE__ */ n(l, { gap: 4, pb: "sm", children: [
+  /* @__PURE__ */ r("a", { target: "_blank", href: e?.url || "#", children: /* @__PURE__ */ r(
+    o,
+    {
+      fz: "xs",
+      fw: 500,
+      lh: "xs",
+      c: "dimmed",
+      component: "span",
+      td: "none",
+      children: e.title
+    }
+  ) }),
+  /* @__PURE__ */ r(p, { spacing: 10, cols: 4, children: e.items.map((m, a) => {
+    const i = "/images/covers/" + e.path + m;
+    return /* @__PURE__ */ r(
+      c,
+      {
+        onClick: () => t?.(i),
+        ratio: 120 / 65,
+        className: d.itemImage,
+        style: {
+          backgroundImage: `url(${i})`
+        }
+      },
+      a
+    );
+  }) })
+] }, e.id)) });
+export {
+  x as FilePickerGallery
+};

package/dist/components/FilePicker/FilePickerGiphy.js

@@ -0,0 +1,91 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as m, useMemo as v, useEffect as b, useCallback as P } from "react";
+import { useTranslation as w } from "react-i18next";
+import { Search01Icon as z } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as L } from "@hugeicons/react";
+import { Stack as k, TextInput as T, Loader as j, Box as y, SimpleGrid as D, AspectRatio as G, Button as M } from "@mantine/core";
+import { useDebouncedValue as q, useDebouncedCallback as B } from "@mantine/hooks";
+import { NoData as F } from "../NoData/NoData.js";
+import { FilePickerSkeletonLoader as N } from "./FilePickerSkeletonLoader.js";
+import { useGiphyPhotos as Q } from "./api/giphyApi.js";
+import A from "./FilePicker.module.css.js";
+const C = (i) => (i || []).reduce((r, s) => (r[s.id] = s, r), {}), W = ({
+  locales: i,
+  token: r,
+  onChange: s
+}) => {
+  const { t: I } = w(), [l, x] = m(""), [u] = q(l, 800), [d, p] = m(1), [h, g] = m({}), { data: o, isLoading: a } = Q(
+    { q: u, limit: 24, offset: (d - 1) * 24 + 1 },
+    d,
+    r
+  ), n = v(
+    () => Object.values({ ...h, ...C(o?.items) }),
+    [h, o?.items]
+  ), f = B(() => {
+    setTimeout(() => {
+      g((e) => ({ ...e, ...C(o?.items) }));
+    }, 0);
+  }, 100);
+  b(() => {
+    f();
+  }, [o?.items, f]), b(() => {
+    g({});
+  }, [u]);
+  const S = P(
+    (e) => {
+      x(e.currentTarget.value), p(1);
+    },
+    []
+  );
+  return /* @__PURE__ */ c(k, { gap: "sm", children: [
+    /* @__PURE__ */ t(
+      T,
+      {
+        leftSection: a ? /* @__PURE__ */ t(j, { size: 16 }) : /* @__PURE__ */ t(L, { size: 16, icon: z }),
+        maxLength: 50,
+        placeholder: i.search,
+        "data-autofocus": !0,
+        value: l,
+        onChange: S
+      }
+    ),
+    /* @__PURE__ */ c(y, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
+      !!n.length && /* @__PURE__ */ c(k, { gap: 8, children: [
+        /* @__PURE__ */ t(D, { cols: 4, spacing: 10, children: n.map((e) => /* @__PURE__ */ t(
+          G,
+          {
+            onClick: () => s?.(e.images.original.url),
+            ratio: 120 / 65,
+            className: A.itemImage,
+            style: {
+              backgroundImage: `url(${e.images.preview_webp.url})`
+            }
+          },
+          e.id
+        )) }),
+        o?.hasMore && /* @__PURE__ */ t(
+          M,
+          {
+            variant: "subtle",
+            loading: a,
+            onClick: () => p((e) => e + 1),
+            children: I("loadMode")
+          }
+        )
+      ] }),
+      !n.length && !a && /* @__PURE__ */ t(y, { pb: 16, children: /* @__PURE__ */ t(
+        F,
+        {
+          size: 120,
+          illustration: "noImage",
+          description: i.noImages,
+          titleProps: { size: "xs", c: "dimmed" }
+        }
+      ) }),
+      !n.length && a && /* @__PURE__ */ t(N, {})
+    ] })
+  ] });
+};
+export {
+  W as FilePickerGiphy
+};

package/dist/components/FilePicker/FilePickerLink.js

@@ -0,0 +1,48 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { Stack as m, FocusTrap as d, TextInput as c, Flex as f, Button as p } from "@mantine/core";
+import { useForm as h } from "@mantine/form";
+import { isValidUrl as g, isImageUrl as k, isVideoUrl as v, isAudioUrl as x } from "../../helpers/validation.js";
+import F from "./FilePicker.module.css.js";
+const U = ({
+  locales: i,
+  onChange: u,
+  type: s,
+  isValidMediaUrl: a
+}) => {
+  const l = h({
+    initialValues: {
+      url: ""
+    },
+    validate: {
+      url: (r) => (r || "").trim().length > 0 && g(r) ? null : i.errors.invalidLink
+    }
+  }), n = async () => {
+    const { values: r } = l;
+    let e;
+    s === "image" ? e = await k(r.url) : s === "video" ? a && a(r.url) ? e = !0 : e = await v(r.url) : s === "audio" ? e = await x(r.url) : e = !0, e ? u?.(r.url) : l.setFieldError("url", i.errors.invalidLink);
+  };
+  return /* @__PURE__ */ o(m, { gap: "sm", children: [
+    /* @__PURE__ */ t(d, { active: !0, children: /* @__PURE__ */ t(
+      c,
+      {
+        maxLength: 500,
+        size: "sm",
+        placeholder: i.pasteLink,
+        "data-autofocus": !0,
+        ...l.getInputProps("url")
+      }
+    ) }),
+    /* @__PURE__ */ t(f, { justify: "flex-end", align: "center", children: /* @__PURE__ */ t(
+      p,
+      {
+        onClick: n,
+        className: F.button,
+        disabled: !l.values.url,
+        children: i.save
+      }
+    ) })
+  ] });
+};
+export {
+  U as FilePickerLink
+};

package/dist/components/FilePicker/FilePickerSkeletonLoader.js

@@ -0,0 +1,9 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Stack as o, SimpleGrid as c, AspectRatio as n, Skeleton as r } from "@mantine/core";
+const h = () => /* @__PURE__ */ t(o, { gap: 8, children: [
+  /* @__PURE__ */ e(c, { cols: 4, spacing: 8, children: [...new Array(12)].map((a, i) => /* @__PURE__ */ e(n, { ratio: 120 / 65, children: /* @__PURE__ */ e(r, { height: 80 }) }, i)) }),
+  /* @__PURE__ */ e(r, { height: 36 })
+] });
+export {
+  h as FilePickerSkeletonLoader
+};

package/dist/components/FilePicker/FilePickerUnsplash.js

@@ -0,0 +1,95 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as l, useMemo as v, useEffect as f, useCallback as P } from "react";
+import { useTranslation as z } from "react-i18next";
+import { Search01Icon as L } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as T } from "@hugeicons/react";
+import { Stack as b, TextInput as j, Loader as D, Box as k, SimpleGrid as M, AspectRatio as q, Button as w } from "@mantine/core";
+import { useDebouncedValue as B, useDebouncedCallback as F } from "@mantine/hooks";
+import { NoData as N } from "../NoData/NoData.js";
+import { FilePickerSkeletonLoader as Q } from "./FilePickerSkeletonLoader.js";
+import { useUnsplashPhotos as U } from "./api/unsplashApi.js";
+import _ from "./FilePicker.module.css.js";
+const y = (r) => (r || []).reduce((s, a) => (s[a.id] = a, s), {}), W = ({
+  locales: r,
+  onChange: s,
+  clientId: a
+}) => {
+  const { t: C } = z(), [m, I] = l(""), [u] = B(m, 800), [x, p] = l(1), [d, h] = l({}), { data: o, isLoading: i } = U(
+    {
+      query: u,
+      page: x,
+      per_page: 24,
+      order_by: "popular"
+    },
+    a
+  ), n = v(
+    () => Object.values({ ...d, ...y(o?.items) }),
+    [d, o?.items]
+  ), g = F(() => {
+    setTimeout(() => {
+      h((e) => ({ ...e, ...y(o?.items) }));
+    }, 0);
+  }, 100);
+  f(() => {
+    g();
+  }, [o?.items, g]), f(() => {
+    h({});
+  }, [u]);
+  const S = P(
+    (e) => {
+      I(e.currentTarget.value), p(1);
+    },
+    []
+  );
+  return /* @__PURE__ */ c(b, { gap: "sm", children: [
+    /* @__PURE__ */ t(
+      j,
+      {
+        leftSection: i ? /* @__PURE__ */ t(D, { size: 16 }) : /* @__PURE__ */ t(T, { size: 16, icon: L }),
+        maxLength: 50,
+        placeholder: r.search,
+        "data-autofocus": !0,
+        value: m,
+        onChange: S
+      }
+    ),
+    /* @__PURE__ */ c(k, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
+      !!n.length && /* @__PURE__ */ c(b, { gap: 8, children: [
+        /* @__PURE__ */ t(M, { cols: 4, spacing: 10, children: n.map((e) => /* @__PURE__ */ t(
+          q,
+          {
+            onClick: () => s?.(e.urls.regular),
+            ratio: 120 / 65,
+            className: _.itemImage,
+            style: {
+              backgroundImage: `url(${e.urls.small})`
+            }
+          },
+          e.id
+        )) }),
+        o?.hasMore && /* @__PURE__ */ t(
+          w,
+          {
+            variant: "subtle",
+            loading: i,
+            onClick: () => p((e) => e + 1),
+            children: C("loadMore")
+          }
+        )
+      ] }),
+      !n.length && !i && /* @__PURE__ */ t(k, { pb: 16, children: /* @__PURE__ */ t(
+        N,
+        {
+          size: 120,
+          illustration: "noImage",
+          description: r.noImages,
+          titleProps: { size: "xs", c: "dimmed" }
+        }
+      ) }),
+      !n.length && i && /* @__PURE__ */ t(Q, {})
+    ] })
+  ] });
+};
+export {
+  W as FilePickerUnsplash
+};