@layers-app/shared 0.2.5 → 0.2.7

package/dist/components/FilePicker/FilePicker.js

@@ -1,120 +1,141 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { useState as x, useMemo as y } from "react";
-import { useTranslation as q } from "react-i18next";
-import { ImageAdd02Icon as C } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as F } from "@hugeicons/react";
-import { Flex as n, ActionIcon as E, Button as P, Text as J, Popover as u, Tabs as g, Stack as K } from "@mantine/core";
-import { useMenu as Q } from "../../hooks/useMenu.js";
-import { FilePickerGallery as W } from "./FilePickerGallery.js";
-import { FilePickerGiphy as X } from "./FilePickerGiphy.js";
-import { FilePickerLink as Y } from "./FilePickerLink.js";
-import { FilePickerUnsplash as Z } from "./FilePickerUnsplash.js";
-import { FilePickerUpload as _ } from "./FilePickerUpload.js";
-import z from "./FilePicker.module.css.js";
-const $ = [
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useState as F, useMemo as M } from "react";
+import { useTranslation as Q } from "react-i18next";
+import { ImageAdd02Icon as P } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as S } from "@hugeicons/react";
+import { Flex as r, ActionIcon as W, Button as z, Text as X, Popover as g, Tabs as v, Stack as Y } from "@mantine/core";
+import { isFeature as Z } from "../../helpers/feature.js";
+import { useMenu as _ } from "../../hooks/useMenu.js";
+import { MediaLibraryBrowser as $ } from "../MediaLibrary/MediaLibraryBrowser.js";
+import { FilePickerGallery as T } from "./FilePickerGallery.js";
+import { FilePickerGiphy as D } from "./FilePickerGiphy.js";
+import { FilePickerLink as ee } from "./FilePickerLink.js";
+import { FilePickerUnsplash as ne } from "./FilePickerUnsplash.js";
+import { FilePickerGoogleDrive as ie } from "./FilePickerGoogleDrive.js";
+import { FilePickerUpload as le } from "./FilePickerUpload.js";
+import y from "./FilePicker.module.css.js";
+const re = [
   "gallery",
   "upload",
   "link",
   "unsplash",
-  "giphy"
-], me = ({
-  onChange: L,
-  onRemove: j,
-  onUpload: p,
-  uploading: G = !1,
-  showTabs: r = $,
-  children: M,
-  width: S = 610,
-  position: A = "bottom-end",
-  readOnly: B = !1,
-  hasImage: I,
-  giphyToken: t,
-  unsplashClientId: o,
-  type: f = "image",
-  galleryCollection: c = [],
+  "giphy",
+  "googleDrive",
+  "media"
+], xe = ({
+  onChange: B,
+  onRemove: G,
+  onUpload: f,
+  uploading: I = !1,
+  showTabs: s = re,
+  children: V,
+  width: j = 610,
+  position: L = "bottom-end",
+  readOnly: A = !1,
+  hasImage: E,
+  giphyToken: d,
+  unsplashClientId: m,
+  type: b = "image",
+  galleryCollection: u = [],
   isValidMediaUrl: N,
   popoverProps: U,
-  dropZoneProps: V,
-  targetProps: w,
-  onOpenedChange: D
+  dropZoneProps: H,
+  targetProps: O,
+  onOpenedChange: R,
+  googleDrive: i,
+  mediaLibrary: a
 }) => {
-  const { t: l } = q("ui"), [v, m] = x(!1), { isMobile: b } = Q(), d = y(
+  const { t: l } = Q("ui"), [k, h] = F(!1), { isMobile: C } = _(), p = M(
     () => [
       {
         value: "gallery",
-        label: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("span", { children: l("changeCover.gallery") }) }),
-        visible: r.includes("gallery") && !!c.length
+        label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: l("changeCover.gallery") }) }),
+        visible: s.includes("gallery") && !!u.length
       },
       {
         value: "upload",
-        label: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("span", { children: l("changeCover.upload") }) }),
-        visible: r.includes("upload") && !!p
+        label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: l("changeCover.upload") }) }),
+        visible: s.includes("upload") && !!f
       },
       {
         value: "link",
-        label: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("span", { children: l("changeCover.link") }) }),
-        visible: r.includes("link")
+        label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: l("changeCover.link") }) }),
+        visible: s.includes("link")
       },
       {
         value: "unsplash",
-        label: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("span", { children: l("changeCover.searchImages") }) }),
-        visible: r.includes("unsplash") && o
+        label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: l("changeCover.searchImages") }) }),
+        visible: s.includes("unsplash") && m
       },
       {
         value: "giphy",
-        label: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("span", { children: "GIFs" }) }),
-        visible: r.includes("giphy") && t
+        label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: "GIFs" }) }),
+        visible: s.includes("giphy") && d
+      },
+      {
+        value: "googleDrive",
+        label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: l("changeCover.googleDrive", {
+          defaultValue: "Google Drive"
+        }) }) }),
+        visible: s.includes("googleDrive") && !!i
+      },
+      {
+        value: "media",
+        label: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("span", { children: l("changeCover.media", { defaultValue: "Media" }) }) }),
+        visible: s.includes("media") && !!a && Z()
       }
-    ].filter((i) => i.visible),
+    ].filter((n) => n.visible),
     [
-      r,
-      o,
-      t,
+      s,
+      m,
+      d,
       l,
-      c.length,
-      p
+      u.length,
+      f,
+      i,
+      a
     ]
-  ), [a, H] = x(() => {
-    if (d[0]) return d[0].value;
-    const i = d.find((T) => T.visible);
-    return i ? i.value : "";
-  }), O = (i) => {
-    p?.(i, m);
-  }, h = (i) => {
-    L?.(i), m(!1);
-  }, R = y(() => b ? /* @__PURE__ */ s(E, { size: "lg", children: [
-    /* @__PURE__ */ e(F, { icon: C, size: 22 }),
+  ), [o, q] = F(() => {
+    if (p[0]) return p[0].value;
+    const n = p.find((K) => K.visible);
+    return n ? n.value : "";
+  }), w = (n) => {
+    f?.(n, h);
+  }, c = (n) => {
+    B?.(n), h(!1);
+  }, J = M(() => C ? /* @__PURE__ */ t(W, { size: "lg", children: [
+    /* @__PURE__ */ e(S, { icon: P, size: 22 }),
     " "
   ] }) : /* @__PURE__ */ e(
-    P,
+    z,
     {
       variant: "default",
       size: "xs",
-      leftSection: /* @__PURE__ */ e(F, { icon: C, size: 16 }),
-      children: /* @__PURE__ */ e(J, { fw: 600, size: "sm", children: l("changeCover.change") })
+      leftSection: /* @__PURE__ */ e(S, { icon: P, size: 16 }),
+      children: /* @__PURE__ */ e(X, { fw: 600, size: "sm", children: l("changeCover.change") })
     }
-  ), [l, b]), k = (i) => {
-    m(i), D?.(i);
+  ), [l, C]), x = (n) => {
+    h(n), R?.(n);
   };
-  return /* @__PURE__ */ s(
-    u,
+  return /* @__PURE__ */ t(
+    g,
     {
-      width: S,
+      width: j,
       radius: "var(--mantine-spacing-sm)",
-      position: A,
+      position: L,
       shadow: "md",
-      opened: v,
-      onChange: k,
+      opened: k,
+      onChange: x,
       withinPortal: !0,
       ...U || {},
       children: [
-        /* @__PURE__ */ e(u.Target, { children: /* @__PURE__ */ e(n, { onClick: () => k(!v), ...w, children: M ?? R }) }),
-        /* @__PURE__ */ s(u.Dropdown, { p: 0, children: [
-          /* @__PURE__ */ e(n, { justify: "space-between", align: "center", children: /* @__PURE__ */ e(
-            g,
+        /* @__PURE__ */ e(g.Target, { children: /* @__PURE__ */ e(r, { onClick: () => x(!k), ...O, children: V ?? J }) }),
+        /* @__PURE__ */ t(g.Dropdown, { p: 0, children: [
+          /* @__PURE__ */ e(r, { justify: "space-between", align: "center", children: /* @__PURE__ */ e(
+            v,
             {
               defaultValue: "gallery",
-              value: a,
+              value: o,
               styles: {
                 list: {
                   alignItems: "center",
@@ -122,8 +143,8 @@ const $ = [
                 }
               },
               w: "100%",
-              children: /* @__PURE__ */ s(
-                g.List,
+              children: /* @__PURE__ */ t(
+                v.List,
                 {
                   style: {
                     gap: "4px"
@@ -131,21 +152,21 @@ const $ = [
                   px: 8,
                   h: 54,
                   children: [
-                    d.map((i) => /* @__PURE__ */ e(
-                      g.Tab,
+                    p.map((n) => /* @__PURE__ */ e(
+                      v.Tab,
                       {
-                        className: z.originalTab,
-                        disabled: B,
+                        className: y.originalTab,
+                        disabled: A,
                         h: "100%",
                         p: 0,
-                        value: i.value,
-                        onClick: () => H(i.value),
-                        children: /* @__PURE__ */ e(n, { className: z.customTab, px: "sm", h: 36, children: i.label })
+                        value: n.value,
+                        onClick: () => q(n.value),
+                        children: /* @__PURE__ */ e(r, { className: y.customTab, px: "sm", h: 36, children: n.label })
                       },
-                      i.value
+                      n.value
                     )),
-                    I && /* @__PURE__ */ e(
-                      P,
+                    E && /* @__PURE__ */ e(
+                      z,
                       {
                         variant: "subtle",
                         fz: "sm",
@@ -153,7 +174,7 @@ const $ = [
                         fw: 500,
                         px: "sm",
                         size: "30px",
-                        onClick: j,
+                        onClick: G,
                         color: "var(--mantine-color-gray-light-color)",
                         style: { marginLeft: "auto" },
                         children: l("remove")
@@ -164,39 +185,69 @@ const $ = [
               )
             }
           ) }),
-          /* @__PURE__ */ s(K, { gap: 0, px: 8, pb: 8, pt: "sm", children: [
-            a === "gallery" && !!c.length && /* @__PURE__ */ e(
-              W,
+          /* @__PURE__ */ t(Y, { gap: 0, px: 8, pb: 8, pt: "sm", children: [
+            o === "gallery" && !!u.length && /* @__PURE__ */ e(
+              T,
               {
-                galleryCollection: c,
-                onChange: h
+                galleryCollection: u,
+                onChange: c
               }
             ),
-            a === "upload" && /* @__PURE__ */ e(
-              _,
+            o === "upload" && /* @__PURE__ */ e(
+              le,
               {
-                type: f || "image",
-                uploading: G,
-                dropZoneProps: V,
-                onUpload: O
+                type: b || "image",
+                uploading: I,
+                dropZoneProps: H,
+                onUpload: w
               }
             ),
-            a === "link" && /* @__PURE__ */ e(
-              Y,
+            o === "link" && /* @__PURE__ */ e(
+              ee,
               {
-                type: f || "image",
-                onChange: h,
+                type: b || "image",
+                onChange: c,
                 isValidMediaUrl: N
               }
             ),
-            a === "unsplash" && o && /* @__PURE__ */ e(
-              Z,
+            o === "unsplash" && m && /* @__PURE__ */ e(
+              ne,
+              {
+                clientId: m,
+                onChange: c
+              }
+            ),
+            o === "giphy" && d && /* @__PURE__ */ e(D, { token: d, onChange: c }),
+            o === "googleDrive" && i && /* @__PURE__ */ e(
+              ie,
               {
-                clientId: o,
-                onChange: h
+                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: (n) => {
+                  i.onSelect(n, c);
+                },
+                error: i.error
               }
             ),
-            a === "giphy" && t && /* @__PURE__ */ e(X, { token: t, onChange: h })
+            o === "media" && a && /* @__PURE__ */ e(
+              $,
+              {
+                items: a.items,
+                isLoading: a.isLoading,
+                breadcrumbs: a.breadcrumbs,
+                onFolderClick: a.onFolderClick,
+                onBreadcrumbClick: a.onBreadcrumbClick,
+                onSelect: (n) => {
+                  a.onSelect?.(n), h(!1);
+                }
+              }
+            )
           ] })
         ] })
       ]
@@ -204,5 +255,5 @@ const $ = [
   );
 };
 export {
-  me as FilePicker
+  xe as FilePicker
 };

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

@@ -1,13 +1,15 @@
-const t = "_itemImage_3fqzc_1", o = "_originalTab_3fqzc_14", a = "_customTab_3fqzc_20", c = "_button_3fqzc_28", _ = {
+const t = "_itemImage_1me1c_1", o = "_imageAuthor_1me1c_14", a = "_originalTab_1me1c_22", e = "_customTab_1me1c_28", m = "_button_1me1c_36", _ = {
   itemImage: t,
-  originalTab: o,
-  customTab: a,
-  button: c
+  imageAuthor: o,
+  originalTab: a,
+  customTab: e,
+  button: m
 };
 export {
-  c as button,
-  a as customTab,
+  m as button,
+  e as customTab,
   _ as default,
+  o as imageAuthor,
   t as itemImage,
-  o as originalTab
+  a as originalTab
 };

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

@@ -0,0 +1,22 @@
+interface GoogleDriveFile {
+    id: string;
+    name: string;
+    mimeType: string;
+    thumbnailLink?: string;
+    iconLink?: string;
+}
+interface FilePickerGoogleDriveProps {
+    isConnected: boolean;
+    connectedEmail?: string;
+    files: GoogleDriveFile[];
+    isLoading: boolean;
+    hasMore: boolean;
+    isImporting: boolean;
+    onSearch: (query: string) => void;
+    onLoadMore: () => void;
+    onSelect: (file: GoogleDriveFile) => void;
+    error: string | null;
+}
+export declare const FilePickerGoogleDrive: ({ isConnected, files, isLoading, hasMore, isImporting, onSearch, onLoadMore, onSelect, error, }: FilePickerGoogleDriveProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilePickerGoogleDrive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePickerGoogleDrive.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerGoogleDrive.tsx"],"names":[],"mappings":"AA6BA,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,0BAA0B;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,GAAI,iGAUnC,0BAA0B,4CAmH5B,CAAC"}

package/dist/components/FilePicker/FilePickerGoogleDrive.js

@@ -0,0 +1,86 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useState as C, useRef as D, useEffect as y, useCallback as I } from "react";
+import { useTranslation as T } from "react-i18next";
+import { Search01Icon as G } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as R } from "@hugeicons/react";
+import { Center as h, Stack as a, Loader as g, Text as l, TextInput as V, Box as p, SimpleGrid as F, AspectRatio as L, Button as P } from "@mantine/core";
+import { useDebouncedValue as j } from "@mantine/hooks";
+import { NoData as w } from "../NoData/NoData.js";
+import { FilePickerSkeletonLoader as B } from "./FilePickerSkeletonLoader.js";
+import N from "./FilePicker.module.css.js";
+const O = ({
+  isConnected: f,
+  files: o,
+  isLoading: n,
+  hasMore: v,
+  isImporting: x,
+  onSearch: c,
+  onLoadMore: k,
+  onSelect: b,
+  error: s
+}) => {
+  const { t } = T("ui"), [m, S] = C(""), [u] = j(m, 800), d = D(c);
+  d.current = c, y(() => {
+    d.current(u);
+  }, [u]);
+  const z = I(
+    (r) => {
+      S(r.currentTarget.value);
+    },
+    []
+  );
+  return x ? /* @__PURE__ */ e(h, { h: 200, children: /* @__PURE__ */ i(a, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ e(g, { size: "sm" }),
+    /* @__PURE__ */ e(l, { size: "sm", c: "dimmed", children: t("externalDrive.importing", {
+      defaultValue: "Importing file..."
+    }) })
+  ] }) }) : f ? /* @__PURE__ */ i(a, { gap: "sm", children: [
+    s && /* @__PURE__ */ e(l, { size: "xs", c: "red", children: s }),
+    /* @__PURE__ */ e(
+      V,
+      {
+        leftSection: n ? /* @__PURE__ */ e(g, { size: 16 }) : /* @__PURE__ */ e(R, { size: 16, icon: G }),
+        maxLength: 50,
+        placeholder: t("externalDrive.searchFiles", {
+          defaultValue: "Search Google Drive"
+        }),
+        "data-autofocus": !0,
+        value: m,
+        onChange: z
+      }
+    ),
+    /* @__PURE__ */ i(p, { mah: 300, w: "100%", style: { overflowY: "auto" }, children: [
+      !!o.length && /* @__PURE__ */ i(a, { gap: 8, children: [
+        /* @__PURE__ */ e(F, { cols: 4, spacing: 10, children: o.map((r) => /* @__PURE__ */ e(
+          L,
+          {
+            onClick: () => b(r),
+            ratio: 120 / 65,
+            className: N.itemImage,
+            style: {
+              backgroundImage: r.thumbnailLink ? `url(${r.thumbnailLink})` : void 0,
+              backgroundColor: r.thumbnailLink ? void 0 : "var(--mantine-color-gray-light)"
+            }
+          },
+          r.id
+        )) }),
+        v && /* @__PURE__ */ e(P, { variant: "subtle", loading: n, onClick: k, children: t("loadMore") })
+      ] }),
+      !o.length && !n && /* @__PURE__ */ e(p, { pb: 16, children: /* @__PURE__ */ e(
+        w,
+        {
+          size: 120,
+          illustration: "noImage",
+          description: t("changeCover.noResult"),
+          titleProps: { size: "xs", c: "dimmed" }
+        }
+      ) }),
+      !o.length && n && /* @__PURE__ */ e(B, {})
+    ] })
+  ] }) : /* @__PURE__ */ e(h, { h: 200, children: /* @__PURE__ */ e(a, { align: "center", gap: "sm", children: /* @__PURE__ */ e(l, { size: "sm", c: "dimmed", ta: "center", children: t("externalDrive.goToSettings", {
+    defaultValue: "Connect Google Drive in Settings to import files"
+  }) }) }) });
+};
+export {
+  O as FilePickerGoogleDrive
+};

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

@@ -1 +1 @@
-{"version":3,"file":"FilePickerUnsplash.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerUnsplash.tsx"],"names":[],"mappings":"AAmCA,eAAO,MAAM,kBAAkB,GAAI,yBAGhC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,4CAwGA,CAAC"}
+{"version":3,"file":"FilePickerUnsplash.d.ts","sourceRoot":"","sources":["../../../src/components/FilePicker/FilePickerUnsplash.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,kBAAkB,GAAI,yBAGhC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,4CAwHA,CAAC"}