@layers-app/shared 0.2.8 → 0.3.1

package/dist/components/FilePicker/FilePicker.js

@@ -1,21 +1,23 @@
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import { useState as j, useMemo as h, useEffect as ne } from "react";
-import { useTranslation as ie } from "react-i18next";
-import { ImageAdd02Icon as A } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as E } from "@hugeicons/react";
-import { Flex as a, ActionIcon as le, Button as L, Text as re, Tabs as F, Box as ae, Popover as y, Stack as te } from "@mantine/core";
-import { isFeature as oe } from "../../helpers/feature.js";
-import { useMenu as se } from "../../hooks/useMenu.js";
-import { MediaLibraryBrowser as ce } from "../MediaLibrary/MediaLibraryBrowser.js";
-import { FilePickerGallery as de } from "./FilePickerGallery.js";
-import { FilePickerGiphy as ue } from "./FilePickerGiphy.js";
-import { FilePickerLink as he } from "./FilePickerLink.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useState as E, useMemo as u, useEffect as ne } from "react";
+import { useTranslation as le } from "react-i18next";
+import { ImageAdd02Icon as V } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as j } from "@hugeicons/react";
+import { Flex as r, ActionIcon as ie, Button as A, Text as re, Tabs as x, Box as ae, Popover as F, Stack as oe } from "@mantine/core";
+import { getEnvConfig as L } from "../../config/envConfig.js";
+import { isFeature as se } from "../../helpers/feature.js";
+import { useMenu as te } from "../../hooks/useMenu.js";
+import { usePlatform as ce } from "../../hooks/usePlatform.js";
+import { MediaLibraryBrowser as de } from "../MediaLibrary/MediaLibraryBrowser.js";
+import { FilePickerGallery as ue } from "./FilePickerGallery.js";
+import { FilePickerGiphy as he } from "./FilePickerGiphy.js";
+import { FilePickerLink as pe } from "./FilePickerLink.js";
 import { FilePickerUnsplash as me } from "./FilePickerUnsplash.js";
-import { FilePickerGoogleDrive as pe } from "./FilePickerGoogleDrive.js";
-import { FilePickerUpload as fe } from "./FilePickerUpload.js";
-import { coverCollections as ge } from "./coverCollections.js";
+import { FilePickerGoogleDrive as fe } from "./FilePickerGoogleDrive.js";
+import { FilePickerUpload as ge } from "./FilePickerUpload.js";
+import { coverCollections as ve } from "./coverCollections.js";
 import w from "./FilePicker.module.css.js";
-const ve = [
+const be = [
   "gallery",
   "upload",
   "link",
@@ -23,176 +25,166 @@ const ve = [
   "giphy",
   "googleDrive",
   "media"
-], Ee = ({
+], _e = ({
   onChange: N,
   onRemove: U,
   onUpload: b,
-  uploading: H = !1,
-  showTabs: o = ve,
-  children: O,
-  width: R = 610,
-  position: $ = "bottom-end",
-  readOnly: q = !1,
-  hasImage: J,
-  giphyToken: S,
-  unsplashClientId: M,
-  type: P = "image",
-  galleryCollection: m = [],
-  isValidMediaUrl: K,
-  popoverProps: Q,
-  dropZoneProps: W,
-  targetProps: X,
-  onOpenedChange: Y,
-  googleDrive: i,
-  mediaLibrary: t,
-  inline: c = !1,
-  tab: k
+  uploading: _ = !1,
+  showTabs: o = be,
+  children: H,
+  width: O = 610,
+  position: R = "bottom-end",
+  readOnly: $ = !1,
+  hasImage: q,
+  giphyToken: Ce,
+  unsplashClientId: ke,
+  type: S = "image",
+  galleryCollection: h = [],
+  isValidMediaUrl: J,
+  popoverProps: K,
+  dropZoneProps: Q,
+  targetProps: W,
+  onOpenedChange: X,
+  googleDrive: l,
+  mediaLibrary: a,
+  inline: p = !1,
+  tab: C
 }) => {
-  const { t: l } = ie("ui"), [z, p] = j(!1), { isMobile: G } = se(), f = h(() => m.length > 0 ? m : c ? ge.map((e) => ({
-    ...e,
-    title: l(`coverGroups.${e.id}`, { defaultValue: e.id })
-  })) : m, [m, c, l]), r = h(() => [
+  const { t: i } = le("ui"), [T, m] = E(!1), { isMobile: I } = te(), M = ce(), f = u(() => h.length > 0 ? h : p ? ve.map((n) => ({
+    ...n,
+    title: i(`coverGroups.${n.id}`, { defaultValue: n.id })
+  })) : h, [h, p, i]), s = u(() => [
     {
       value: "gallery",
-      label: /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n("span", { children: l("changeCover.gallery") }) }),
+      label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: i("changeCover.gallery") }) }),
       visible: o.includes("gallery") && !!f.length
     },
     {
       value: "upload",
-      label: /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n("span", { children: l("changeCover.upload") }) }),
+      label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: i("changeCover.upload") }) }),
       visible: o.includes("upload") && !!b
     },
     {
       value: "link",
-      label: /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n("span", { children: l("changeCover.link") }) }),
+      label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: i("changeCover.link") }) }),
       visible: o.includes("link")
     },
     {
       value: "unsplash",
-      label: /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n("span", { children: l("changeCover.searchImages") }) }),
-      visible: o.includes("unsplash") && M
+      label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: i("changeCover.searchImages") }) }),
+      visible: o.includes("unsplash") && L().media?.unsplashEnabled !== !1
     },
     {
       value: "giphy",
-      label: /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n("span", { children: "GIFs" }) }),
-      visible: o.includes("giphy") && S
+      label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: "GIFs" }) }),
+      visible: o.includes("giphy") && M.has("giphy") && L().media?.giphyEnabled !== !1
     },
     {
       value: "googleDrive",
-      label: /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n("span", { children: l("changeCover.googleDrive", {
+      label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: i("changeCover.googleDrive", {
         defaultValue: "Google Drive"
       }) }) }),
-      visible: o.includes("googleDrive") && !!i
+      visible: o.includes("googleDrive") && !!l
     },
     {
       value: "media",
-      label: /* @__PURE__ */ n(a, { children: /* @__PURE__ */ n("span", { children: l("changeCover.media", { defaultValue: "Media" }) }) }),
-      visible: o.includes("media") && !!t && oe()
+      label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: i("changeCover.media", { defaultValue: "Media" }) }) }),
+      visible: o.includes("media") && !!a && se()
     }
-  ].filter((e) => e.visible), [
+  ].filter((y) => y.visible), [
     o,
-    l,
+    M,
+    i,
     f.length,
     b,
-    i,
-    t
-  ]), g = k !== void 0, [Z, I] = j(() => {
-    if (k !== void 0) return "";
-    if (r[0]) return r[0].value;
-    const e = r.find((x) => x.visible);
-    return e ? e.value : "";
-  });
+    l,
+    a
+  ]), g = C !== void 0, [Y, P] = E(() => C !== void 0 ? "" : s[0]?.value ?? "");
   ne(() => {
-    g || r.length && I((e) => e && r.some((x) => x.value === e) ? e : r[0].value);
-  }, [r, g]);
-  const C = h(() => r.map((e) => e.value), [r]), v = g ? k : Z, s = h(() => v && C.includes(v) ? v : C[0] ?? "", [v, C]), B = (e) => {
-    g || I(e);
-  }, _ = (e) => {
-    b?.(e, p);
-  }, d = (e) => {
-    N?.(e), c || p(!1);
-  }, D = h(() => G ? /* @__PURE__ */ u(le, { size: "lg", children: [
-    /* @__PURE__ */ n(E, { icon: A, size: 22 }),
+    g || s.length && P((n) => n && s.some((y) => y.value === n) ? n : s[0].value);
+  }, [s, g]);
+  const k = u(() => s.map((n) => n.value), [s]), v = g ? C : Y, t = u(() => v && k.includes(v) ? v : k[0] ?? "", [v, k]), z = (n) => {
+    g || P(n);
+  }, Z = (n) => {
+    b?.(n, m);
+  }, c = (n) => {
+    N?.(n), p || m(!1);
+  }, D = u(() => I ? /* @__PURE__ */ d(ie, { size: "lg", children: [
+    /* @__PURE__ */ e(j, { icon: V, size: 22 }),
     " "
-  ] }) : /* @__PURE__ */ n(
-    L,
+  ] }) : /* @__PURE__ */ e(
+    A,
     {
       variant: "default",
       size: "xs",
-      leftSection: /* @__PURE__ */ n(E, { icon: A, size: 16 }),
-      children: /* @__PURE__ */ n(re, { fw: 600, size: "sm", children: l("changeCover.change") })
+      leftSection: /* @__PURE__ */ e(j, { icon: V, size: 16 }),
+      children: /* @__PURE__ */ e(re, { fw: 600, size: "sm", children: i("changeCover.change") })
     }
-  ), [l, G]), V = (e) => {
-    p(e), Y?.(e);
-  }, T = /* @__PURE__ */ u(te, { gap: 0, px: 8, pb: 8, pt: "sm", children: [
-    s === "gallery" && !!f.length && /* @__PURE__ */ n(
-      de,
+  ), [i, I]), G = (n) => {
+    m(n), X?.(n);
+  }, B = /* @__PURE__ */ d(oe, { gap: 0, px: 8, pb: 8, pt: "sm", children: [
+    t === "gallery" && !!f.length && /* @__PURE__ */ e(
+      ue,
       {
         galleryCollection: f,
-        onChange: d
+        onChange: c
       }
     ),
-    s === "upload" && /* @__PURE__ */ n(
-      fe,
+    t === "upload" && /* @__PURE__ */ e(
+      ge,
       {
-        type: P || "image",
-        uploading: H,
-        dropZoneProps: W,
-        onUpload: _
+        type: S || "image",
+        uploading: _,
+        dropZoneProps: Q,
+        onUpload: Z
       }
     ),
-    s === "link" && /* @__PURE__ */ n(
-      he,
-      {
-        type: P || "image",
-        onChange: d,
-        isValidMediaUrl: K
-      }
-    ),
-    s === "unsplash" && /* @__PURE__ */ n(
-      me,
+    t === "link" && /* @__PURE__ */ e(
+      pe,
       {
-        clientId: M,
-        onChange: d
+        type: S || "image",
+        onChange: c,
+        isValidMediaUrl: J
       }
     ),
-    s === "giphy" && /* @__PURE__ */ n(ue, { token: S, onChange: d }),
-    s === "googleDrive" && i && /* @__PURE__ */ n(
-      pe,
+    t === "unsplash" && /* @__PURE__ */ e(me, { onChange: c }),
+    t === "giphy" && /* @__PURE__ */ e(he, { onChange: c }),
+    t === "googleDrive" && l && /* @__PURE__ */ e(
+      fe,
       {
-        isConnected: i.isConnected,
-        connectedEmail: i.connectedEmail,
-        files: i.files,
-        isLoading: i.isLoading,
-        hasMore: i.hasMore,
-        isImporting: i.isImporting,
-        onSearch: i.onSearch,
-        onLoadMore: i.onLoadMore,
-        onSelect: (e) => {
-          i.onSelect(e, d);
+        isConnected: l.isConnected,
+        connectedEmail: l.connectedEmail,
+        files: l.files,
+        isLoading: l.isLoading,
+        hasMore: l.hasMore,
+        isImporting: l.isImporting,
+        onSearch: l.onSearch,
+        onLoadMore: l.onLoadMore,
+        onSelect: (n) => {
+          l.onSelect(n, c);
         },
-        error: i.error
+        error: l.error
       }
     ),
-    s === "media" && t && /* @__PURE__ */ n(
-      ce,
+    t === "media" && a && /* @__PURE__ */ e(
+      de,
       {
-        items: t.items,
-        isLoading: t.isLoading,
-        breadcrumbs: t.breadcrumbs,
-        onFolderClick: t.onFolderClick,
-        onBreadcrumbClick: t.onBreadcrumbClick,
-        onSelect: (e) => {
-          t.onSelect?.(e), c || p(!1);
+        items: a.items,
+        isLoading: a.isLoading,
+        breadcrumbs: a.breadcrumbs,
+        onFolderClick: a.onFolderClick,
+        onBreadcrumbClick: a.onBreadcrumbClick,
+        onSelect: (n) => {
+          a.onSelect?.(n), m(!1);
         }
       }
     )
-  ] }), ee = /* @__PURE__ */ n(a, { justify: "space-between", align: "center", children: /* @__PURE__ */ n(
-    F,
+  ] }), ee = /* @__PURE__ */ e(r, { justify: "space-between", align: "center", children: /* @__PURE__ */ e(
+    x,
     {
       defaultValue: "gallery",
-      value: s,
-      onChange: (e) => e && B(e),
+      value: t,
+      onChange: (n) => n && z(n),
       styles: {
         list: {
           alignItems: "center",
@@ -200,8 +192,8 @@ const ve = [
         }
       },
       w: "100%",
-      children: /* @__PURE__ */ u(
-        F.List,
+      children: /* @__PURE__ */ d(
+        x.List,
         {
           style: {
             gap: "4px"
@@ -209,21 +201,21 @@ const ve = [
           px: 8,
           h: 54,
           children: [
-            r.map((e) => /* @__PURE__ */ n(
-              F.Tab,
+            s.map((n) => /* @__PURE__ */ e(
+              x.Tab,
               {
                 className: w.originalTab,
-                disabled: q,
+                disabled: $,
                 h: "100%",
                 p: 0,
-                value: e.value,
-                onClick: () => B(e.value),
-                children: /* @__PURE__ */ n(a, { className: w.customTab, px: "sm", h: 36, children: e.label })
+                value: n.value,
+                onClick: () => z(n.value),
+                children: /* @__PURE__ */ e(r, { className: w.customTab, px: "sm", h: 36, children: n.label })
               },
-              e.value
+              n.value
             )),
-            J && /* @__PURE__ */ n(
-              L,
+            q && /* @__PURE__ */ e(
+              A,
               {
                 variant: "subtle",
                 fz: "sm",
@@ -234,7 +226,7 @@ const ve = [
                 onClick: U,
                 color: "var(--mantine-color-gray-light-color)",
                 style: { marginLeft: "auto" },
-                children: l("remove")
+                children: i("remove")
               }
             )
           ]
@@ -242,36 +234,36 @@ const ve = [
       )
     }
   ) });
-  return c ? /* @__PURE__ */ n(
+  return p ? /* @__PURE__ */ e(
     ae,
     {
       "data-file-picker-inline": !0,
       bdrs: 8,
       p: 12,
       bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-7))",
-      children: T
+      children: B
     }
-  ) : /* @__PURE__ */ u(
-    y,
+  ) : /* @__PURE__ */ d(
+    F,
     {
-      width: R,
+      width: O,
       radius: "var(--mantine-spacing-sm)",
-      position: $,
+      position: R,
       shadow: "md",
-      opened: z,
-      onChange: V,
+      opened: T,
+      onChange: G,
       withinPortal: !0,
-      ...Q || {},
+      ...K || {},
       children: [
-        /* @__PURE__ */ n(y.Target, { children: /* @__PURE__ */ n(a, { onClick: () => V(!z), ...X, children: O ?? D }) }),
-        /* @__PURE__ */ u(y.Dropdown, { p: 0, children: [
+        /* @__PURE__ */ e(F.Target, { children: /* @__PURE__ */ e(r, { onClick: () => G(!T), ...W, children: H ?? D }) }),
+        /* @__PURE__ */ d(F.Dropdown, { p: 0, children: [
           ee,
-          T
+          B
         ] })
       ]
     }
   );
 };
 export {
-  Ee as FilePicker
+  _e as FilePicker
 };

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

@@ -1,17 +1,17 @@
-const o = "_itemImage_5y6cx_1", t = "_imageAuthor_5y6cx_14", c = "_originalTab_5y6cx_22", e = "_customTab_5y6cx_28", _ = "_button_5y6cx_36", a = "_pickerDropZone_5y6cx_46", n = {
+const o = "_itemImage_7zb8o_1", t = "_imageAuthor_7zb8o_27", e = "_originalTab_7zb8o_43", _ = "_customTab_7zb8o_55", a = "_button_7zb8o_71", n = "_pickerDropZone_7zb8o_91", b = {
   itemImage: o,
   imageAuthor: t,
-  originalTab: c,
-  customTab: e,
-  button: _,
-  pickerDropZone: a
+  originalTab: e,
+  customTab: _,
+  button: a,
+  pickerDropZone: n
 };
 export {
-  _ as button,
-  e as customTab,
-  n as default,
+  a as button,
+  _ as customTab,
+  b as default,
   t as imageAuthor,
   o as itemImage,
-  c as originalTab,
-  a as pickerDropZone
+  e as originalTab,
+  n as pickerDropZone
 };

package/dist/components/FilePicker/FilePickerGallery.js

@@ -3,26 +3,26 @@ import { useState as d, useMemo as f } from "react";
 import { useTranslation as x } from "react-i18next";
 import { Search01Icon as $ } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as v } from "@hugeicons/react";
-import { Stack as m, FocusTrap as g, TextInput as w, Text as u, SimpleGrid as C, AspectRatio as I } from "@mantine/core";
+import { Stack as m, FocusTrap as g, TextInput as I, Text as u, SimpleGrid as w, AspectRatio as C } from "@mantine/core";
 import S from "./FilePicker.module.css.js";
-const F = ({
-  galleryCollection: s,
+const G = ({
+  galleryCollection: n,
   onChange: p
 }) => {
   const { t: a } = x("ui"), [i, h] = d(""), l = f(() => {
     const e = i.trim().toLowerCase();
-    return e ? s.map((t) => ({
+    return e ? n.map((t) => ({
       ...t,
-      items: t.items.filter((n) => `${t.title} ${t.id} ${t.path} ${n}`.toLowerCase().includes(e))
-    })).filter((t) => t.items.length > 0) : s;
-  }, [s, i]);
+      items: t.items.filter((s) => `${t.title} ${t.id} ${t.path} ${s}`.toLowerCase().includes(e))
+    })).filter((t) => t.items.length > 0) : n;
+  }, [n, i]);
   return /* @__PURE__ */ c(m, { gap: "sm", children: [
     /* @__PURE__ */ r(g, { active: !0, children: /* @__PURE__ */ r(
-      w,
+      I,
       {
         leftSection: /* @__PURE__ */ r(v, { size: 16, icon: $ }),
         maxLength: 50,
-        placeholder: a("changeCover.searchGifs"),
+        placeholder: a("changeCover.searchImage"),
         "data-autofocus": !0,
         value: i,
         onChange: (e) => h(e.currentTarget.value)
@@ -41,10 +41,10 @@ const F = ({
           children: e.title
         }
       ) }),
-      /* @__PURE__ */ r(C, { spacing: 10, cols: 4, children: e.items.map((t, n) => {
+      /* @__PURE__ */ r(w, { spacing: 10, cols: 4, children: e.items.map((t, s) => {
         const o = "/images/covers/" + e.path + t;
         return /* @__PURE__ */ r(
-          I,
+          C,
           {
             onClick: () => p?.(o),
             ratio: 120 / 65,
@@ -53,12 +53,12 @@ const F = ({
               backgroundImage: `url(${o})`
             }
           },
-          `${e.id}-${t}-${n}`
+          `${e.id}-${t}-${s}`
         );
       }) })
     ] }, e.id)) })
   ] });
 };
 export {
-  F as FilePickerGallery
+  G as FilePickerGallery
 };

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

@@ -1,4 +1,4 @@
-export declare const FilePickerGiphy: ({ token, onChange, }: {
+export declare const FilePickerGiphy: ({ onChange, }: {
     token?: string;
     onChange?: (v: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilePicker/FilePickerGiphy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilePickerGiphy.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerGiphy.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,eAAe,GAAI,sBAG7B;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,4CAsGA,CAAC"}
+{"version":3,"file":"FilePickerGiphy.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerGiphy.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,eAAe,GAAI,eAE7B;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,4CAqGA,CAAC"}