@plugable-io/react 0.0.1 → 0.0.3

package/dist/index.js

@@ -0,0 +1,708 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Dropzone: () => Dropzone,
+  FileImage: () => FileImage,
+  FileList: () => FileList,
+  FilePreview: () => FilePreview,
+  PlugableProvider: () => PlugableProvider,
+  clearImageCache: () => clearImageCache,
+  useFiles: () => useFiles,
+  usePlugable: () => usePlugable
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PlugableProvider.tsx
+var import_react = require("react");
+var import_js = require("@plugable-io/js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PlugableContext = (0, import_react.createContext)(null);
+function createAuthTokenGetter(authProvider, clerkJWTTemplate) {
+  switch (authProvider) {
+    case "clerk":
+      return async () => {
+        if (typeof window !== "undefined" && window.Clerk) {
+          const session = await window.Clerk.session;
+          if (!session) {
+            throw new Error("No active Clerk session found");
+          }
+          const template = clerkJWTTemplate || void 0;
+          return await session.getToken({ template });
+        }
+        throw new Error(
+          "Clerk not found. Please ensure @clerk/clerk-react is installed and ClerkProvider wraps your app, or provide a custom getToken function."
+        );
+      };
+    case "supabase":
+      return async () => {
+        if (typeof window !== "undefined" && window.supabase) {
+          const { data, error } = await window.supabase.auth.getSession();
+          if (error || !data.session) {
+            throw new Error("No active Supabase session found");
+          }
+          return data.session.access_token;
+        }
+        throw new Error(
+          "Supabase client not found. Please ensure @supabase/supabase-js is installed and initialized, or provide a custom getToken function."
+        );
+      };
+    case "firebase":
+      return async () => {
+        if (typeof window !== "undefined" && window.firebase?.auth) {
+          const user = window.firebase.auth().currentUser;
+          if (!user) {
+            throw new Error("No active Firebase user found");
+          }
+          return await user.getIdToken();
+        }
+        throw new Error(
+          "Firebase not found. Please ensure firebase is installed and initialized, or provide a custom getToken function."
+        );
+      };
+    default:
+      throw new Error(
+        `Unknown auth provider: ${authProvider}. Please provide either a valid authProvider or a custom getToken function.`
+      );
+  }
+}
+function PlugableProvider({
+  bucketId,
+  children,
+  getToken,
+  authProvider,
+  clerkJWTTemplate,
+  baseUrl
+}) {
+  const listenersRef = (0, import_react.useRef)({});
+  const client = (0, import_react.useMemo)(() => {
+    if (!getToken && !authProvider) {
+      throw new Error(
+        "Either getToken function or authProvider must be provided to PlugableProvider"
+      );
+    }
+    const tokenGetter = getToken || createAuthTokenGetter(authProvider, clerkJWTTemplate);
+    const client_ = new import_js.BucketClient({
+      bucketId,
+      getToken: tokenGetter,
+      baseUrl
+    });
+    return { client: client_, tokenGetter };
+  }, [bucketId, getToken, authProvider, clerkJWTTemplate, baseUrl]);
+  const on = (0, import_react.useCallback)((event, handler) => {
+    if (!listenersRef.current[event]) {
+      listenersRef.current[event] = /* @__PURE__ */ new Set();
+    }
+    listenersRef.current[event].add(handler);
+    return () => {
+      listenersRef.current[event]?.delete(handler);
+    };
+  }, []);
+  const emit = (0, import_react.useCallback)((event, data) => {
+    listenersRef.current[event]?.forEach((handler) => handler(data));
+  }, []);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      client: client.client,
+      bucketId,
+      on,
+      emit,
+      getToken: client.tokenGetter,
+      baseUrl
+    }),
+    [client, bucketId, on, emit, baseUrl]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlugableContext.Provider, { value, children });
+}
+function usePlugable() {
+  const context = (0, import_react.useContext)(PlugableContext);
+  if (!context) {
+    throw new Error("usePlugable must be used within a PlugableProvider");
+  }
+  return context;
+}
+
+// src/components/Dropzone.tsx
+var import_react2 = __toESM(require("react"));
+var import_js2 = require("@plugable-io/js");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Dropzone({
+  bucketId: _bucketId,
+  metadata,
+  onUploadComplete,
+  onUploadError,
+  onProgressUpdate,
+  accept,
+  maxFiles,
+  children,
+  className,
+  style
+}) {
+  const { client: defaultClient, emit, getToken, baseUrl } = usePlugable();
+  const client = import_react2.default.useMemo(() => {
+    if (_bucketId) {
+      return new import_js2.BucketClient({
+        bucketId: _bucketId,
+        getToken,
+        baseUrl
+      });
+    }
+    return defaultClient;
+  }, [_bucketId, defaultClient, getToken, baseUrl]);
+  const [isDragActive, setIsDragActive] = (0, import_react2.useState)(false);
+  const [isUploading, setIsUploading] = (0, import_react2.useState)(false);
+  const [uploadProgress, setUploadProgress] = (0, import_react2.useState)({});
+  const [uploadedFiles, setUploadedFiles] = (0, import_react2.useState)([]);
+  const fileInputRef = import_react2.default.useRef(null);
+  const uploadFiles = (0, import_react2.useCallback)(
+    async (files) => {
+      const fileArray = Array.from(files);
+      const filesToUpload = maxFiles ? fileArray.slice(0, maxFiles) : fileArray;
+      setIsUploading(true);
+      setUploadProgress({});
+      const uploadPromises = filesToUpload.map(async (file) => {
+        const options = {
+          metadata,
+          onProgress: (progress) => {
+            setUploadProgress((prev) => ({
+              ...prev,
+              [file.name]: progress
+            }));
+            onProgressUpdate?.(file.name, progress);
+          }
+        };
+        try {
+          const uploadedFile = await client.upload(file, options);
+          return uploadedFile;
+        } catch (error) {
+          console.error(`Failed to upload ${file.name}:`, error);
+          onUploadError?.(error);
+          return null;
+        }
+      });
+      const results = await Promise.all(uploadPromises);
+      const successfulUploads = results.filter((f) => f !== null);
+      setUploadedFiles((prev) => [...prev, ...successfulUploads]);
+      setIsUploading(false);
+      setUploadProgress({});
+      if (successfulUploads.length > 0) {
+        successfulUploads.forEach((file) => emit("file.uploaded", file));
+        onUploadComplete?.(successfulUploads);
+      }
+    },
+    [client, metadata, maxFiles, onUploadComplete, onUploadError, onProgressUpdate, emit]
+  );
+  const handleDrop = (0, import_react2.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragActive(false);
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        uploadFiles(e.dataTransfer.files);
+      }
+    },
+    [uploadFiles]
+  );
+  const handleDragOver = (0, import_react2.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  }, []);
+  const handleDragLeave = (0, import_react2.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+  }, []);
+  const handleFileInputChange = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        uploadFiles(e.target.files);
+      }
+    },
+    [uploadFiles]
+  );
+  const openFileDialog = (0, import_react2.useCallback)(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const renderProps = {
+    isDragActive,
+    isUploading,
+    uploadProgress,
+    openFileDialog,
+    uploadedFiles
+  };
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        className,
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: !maxFiles || maxFiles > 1,
+              accept,
+              onChange: handleFileInputChange,
+              style: { display: "none" }
+            }
+          ),
+          children(renderProps)
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onClick: openFileDialog,
+      className,
+      style: {
+        border: `2px dashed ${isDragActive ? "#0070f3" : "#ccc"}`,
+        borderRadius: "8px",
+        padding: "40px 20px",
+        textAlign: "center",
+        cursor: "pointer",
+        backgroundColor: isDragActive ? "#f0f8ff" : "#fafafa",
+        transition: "all 0.2s ease",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: !maxFiles || maxFiles > 1,
+            accept,
+            onChange: handleFileInputChange,
+            style: { display: "none" }
+          }
+        ),
+        isUploading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: 0, fontWeight: "bold", color: "#333" }, children: "Uploading..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: "16px" }, children: Object.entries(uploadProgress).map(([fileName, progress]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: "14px", color: "#666", marginBottom: "4px" }, children: [
+              fileName,
+              ": ",
+              progress,
+              "%"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: "8px",
+                  backgroundColor: "#e0e0e0",
+                  borderRadius: "4px",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: `${progress}%`,
+                      height: "100%",
+                      backgroundColor: "#0070f3",
+                      transition: "width 0.3s ease"
+                    }
+                  }
+                )
+              }
+            )
+          ] }, fileName)) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: 0, fontWeight: "bold", fontSize: "16px", color: "#333" }, children: isDragActive ? "Drop files here" : "Drag and drop files here" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "8px 0 0 0", fontSize: "14px", color: "#666" }, children: "or click to select files" }),
+          maxFiles && maxFiles > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { margin: "4px 0 0 0", fontSize: "12px", color: "#999" }, children: [
+            "(Maximum ",
+            maxFiles,
+            " files)"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/hooks/useFiles.ts
+var import_react3 = require("react");
+function useFiles({
+  metadata,
+  startPage = 1,
+  perPage = 20,
+  mediaType,
+  autoLoad = true,
+  orderBy,
+  orderDirection
+} = {}) {
+  const { client, on } = usePlugable();
+  const [files, setFiles] = (0, import_react3.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
+  const [page, setPage] = (0, import_react3.useState)(startPage);
+  const [hasNext, setHasNext] = (0, import_react3.useState)(false);
+  const metadataKey = JSON.stringify(metadata);
+  const stableMetadata = (0, import_react3.useMemo)(() => metadata, [metadataKey]);
+  const loadedParamsRef = (0, import_react3.useRef)(null);
+  const paramsKeyWithPage = (0, import_react3.useMemo)(() => JSON.stringify({
+    metadata: stableMetadata,
+    mediaType,
+    perPage,
+    orderBy,
+    orderDirection,
+    page
+  }), [stableMetadata, mediaType, perPage, orderBy, orderDirection, page]);
+  const fetchFiles = (0, import_react3.useCallback)(async (pageNum) => {
+    setIsLoading(true);
+    try {
+      const options = {
+        metadata: stableMetadata,
+        media_type: mediaType,
+        page: pageNum,
+        per_page: perPage,
+        with_download_url: true,
+        order_by: orderBy,
+        order_direction: orderDirection
+      };
+      const response = await client.list(options);
+      setFiles(response.files);
+      setHasNext(response.paging.has_next_page);
+      const currentParamsKey = JSON.stringify({
+        metadata: stableMetadata,
+        mediaType,
+        perPage,
+        orderBy,
+        orderDirection,
+        page: pageNum
+      });
+      loadedParamsRef.current = currentParamsKey;
+    } catch (err) {
+      console.error("Failed to load files:", err);
+      setFiles([]);
+      setHasNext(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection]);
+  (0, import_react3.useEffect)(() => {
+    const hasLoadedForParams = loadedParamsRef.current === paramsKeyWithPage;
+    const shouldLoad = autoLoad || !hasLoadedForParams && files.length === 0 && !isLoading;
+    if (shouldLoad) {
+      fetchFiles(page);
+    }
+  }, [fetchFiles, page, autoLoad, paramsKeyWithPage, isLoading]);
+  (0, import_react3.useEffect)(() => {
+    const unsubscribe = on("file.uploaded", () => {
+      fetchFiles(page);
+    });
+    return unsubscribe;
+  }, [on, fetchFiles, page]);
+  const loadNextPage = (0, import_react3.useCallback)(() => {
+    if (hasNext) {
+      setPage((p) => p + 1);
+    }
+  }, [hasNext]);
+  const loadPreviousPage = (0, import_react3.useCallback)(() => {
+    setPage((p) => Math.max(1, p - 1));
+  }, []);
+  const refresh = (0, import_react3.useCallback)(async () => {
+    await fetchFiles(page);
+  }, [fetchFiles, page]);
+  return {
+    files,
+    isLoading,
+    pagination: {
+      current: page,
+      hasNext,
+      hasPrevious: page > 1,
+      loadNextPage,
+      loadPreviousPage
+    },
+    setPage,
+    refresh
+  };
+}
+
+// src/components/FileList.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FileList({
+  metadata,
+  mediaType,
+  perPage = 20,
+  autoLoad = true,
+  startPage = 1,
+  children
+}) {
+  const { files, isLoading, pagination, refresh } = useFiles({
+    metadata,
+    mediaType,
+    perPage,
+    autoLoad,
+    startPage
+  });
+  const renderProps = {
+    files,
+    isLoading,
+    hasMore: pagination.hasNext,
+    loadMore: pagination.loadNextPage,
+    refresh,
+    error: null,
+    pagination
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children(renderProps) });
+}
+
+// src/components/FileImage.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var imageCache = /* @__PURE__ */ new Map();
+function FileImage({
+  file,
+  width,
+  height,
+  objectFit = "cover",
+  borderRadius,
+  alt,
+  className,
+  style,
+  onLoad,
+  onError
+}) {
+  const [imageSrc, setImageSrc] = (0, import_react4.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
+  const [error, setError] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    let isMounted = true;
+    let objectUrl = null;
+    const loadImage = async () => {
+      try {
+        const cacheKey = `${file.id}-${file.checksum}`;
+        const cached = imageCache.get(cacheKey);
+        if (cached) {
+          if (isMounted) {
+            setImageSrc(cached);
+            setIsLoading(false);
+          }
+          return;
+        }
+        if (file.download_url) {
+          const response = await fetch(file.download_url, {
+            headers: {
+              "Cache-Control": "private, max-age=31536000",
+              "If-None-Match": file.checksum
+            }
+          });
+          if (!response.ok) {
+            throw new Error(`Failed to fetch image: ${response.statusText}`);
+          }
+          const blob = await response.blob();
+          objectUrl = URL.createObjectURL(blob);
+          imageCache.set(cacheKey, objectUrl);
+          if (isMounted) {
+            setImageSrc(objectUrl);
+            setIsLoading(false);
+          }
+        } else {
+          throw new Error("No download URL available for file");
+        }
+      } catch (err) {
+        const error2 = err;
+        if (isMounted) {
+          setError(error2);
+          setIsLoading(false);
+          onError?.(error2);
+        }
+        console.error("Failed to load image:", err);
+      }
+    };
+    loadImage();
+    return () => {
+      isMounted = false;
+    };
+  }, [file.id, file.checksum, file.download_url, onError]);
+  const handleLoad = () => {
+    setIsLoading(false);
+    onLoad?.();
+  };
+  const handleError = () => {
+    const err = new Error("Image failed to load");
+    setError(err);
+    setIsLoading(false);
+    onError?.(err);
+  };
+  const imageStyle = {
+    width: width || "100%",
+    height: height || "auto",
+    objectFit,
+    borderRadius: borderRadius || 0,
+    ...style
+  };
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className,
+        style: {
+          ...imageStyle,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f0f0f0",
+          color: "#999",
+          fontSize: "14px"
+        },
+        children: "Failed to load image"
+      }
+    );
+  }
+  if (isLoading || !imageSrc) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className,
+        style: {
+          ...imageStyle,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f0f0f0"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                width: "40px",
+                height: "40px",
+                border: "3px solid #e0e0e0",
+                borderTop: "3px solid #0070f3",
+                borderRadius: "50%",
+                animation: "spin 1s linear infinite"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+            @keyframes spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+          ` })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "img",
+    {
+      src: imageSrc,
+      alt: alt || file.name,
+      className,
+      style: imageStyle,
+      onLoad: handleLoad,
+      onError: handleError
+    }
+  );
+}
+function clearImageCache() {
+  imageCache.forEach((url) => URL.revokeObjectURL(url));
+  imageCache.clear();
+}
+
+// src/components/FilePreview.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function FilePreview({
+  file,
+  width = 80,
+  height = 80,
+  className,
+  style,
+  objectFit = "cover",
+  showExtension = true,
+  renderNonImage
+}) {
+  const isImage = file.content_type.startsWith("image/");
+  const containerStyle = {
+    width,
+    height,
+    borderRadius: 4,
+    overflow: "hidden",
+    backgroundColor: "#f5f5f5",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "1px solid #eee",
+    ...style
+  };
+  if (isImage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      FileImage,
+      {
+        file,
+        width,
+        height,
+        objectFit,
+        className,
+        style,
+        borderRadius: 4
+      }
+    );
+  }
+  if (renderNonImage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style: containerStyle, children: renderNonImage(file) });
+  }
+  const extension = file.name.split(".").pop()?.toUpperCase() || "FILE";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style: containerStyle, children: showExtension && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: {
+    fontSize: "12px",
+    fontWeight: "bold",
+    color: "#666",
+    textTransform: "uppercase"
+  }, children: extension }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dropzone,
+  FileImage,
+  FileList,
+  FilePreview,
+  PlugableProvider,
+  clearImageCache,
+  useFiles,
+  usePlugable
+});