@plugable-io/react 0.0.1 → 0.0.2

package/dist/index.mjs

@@ -0,0 +1,640 @@
+// src/PlugableProvider.tsx
+import { createContext, useContext, useMemo, useCallback, useRef } from "react";
+import { BucketClient } from "@plugable-io/js";
+import { jsx } from "react/jsx-runtime";
+var PlugableContext = 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 = useRef({});
+  const client = 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 BucketClient({
+      bucketId,
+      getToken: tokenGetter,
+      baseUrl
+    });
+    return { client: client_, tokenGetter };
+  }, [bucketId, getToken, authProvider, clerkJWTTemplate, baseUrl]);
+  const on = 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 = useCallback((event, data) => {
+    listenersRef.current[event]?.forEach((handler) => handler(data));
+  }, []);
+  const value = useMemo(
+    () => ({
+      client: client.client,
+      bucketId,
+      on,
+      emit,
+      getToken: client.tokenGetter,
+      baseUrl
+    }),
+    [client, bucketId, on, emit, baseUrl]
+  );
+  return /* @__PURE__ */ jsx(PlugableContext.Provider, { value, children });
+}
+function usePlugable() {
+  const context = useContext(PlugableContext);
+  if (!context) {
+    throw new Error("usePlugable must be used within a PlugableProvider");
+  }
+  return context;
+}
+
+// src/components/Dropzone.tsx
+import React, { useCallback as useCallback2, useState } from "react";
+import { BucketClient as BucketClient2 } from "@plugable-io/js";
+import { jsx as jsx2, jsxs } from "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 = React.useMemo(() => {
+    if (_bucketId) {
+      return new BucketClient2({
+        bucketId: _bucketId,
+        getToken,
+        baseUrl
+      });
+    }
+    return defaultClient;
+  }, [_bucketId, defaultClient, getToken, baseUrl]);
+  const [isDragActive, setIsDragActive] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState({});
+  const [uploadedFiles, setUploadedFiles] = useState([]);
+  const fileInputRef = React.useRef(null);
+  const uploadFiles = useCallback2(
+    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 = useCallback2(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragActive(false);
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        uploadFiles(e.dataTransfer.files);
+      }
+    },
+    [uploadFiles]
+  );
+  const handleDragOver = useCallback2((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  }, []);
+  const handleDragLeave = useCallback2((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+  }, []);
+  const handleFileInputChange = useCallback2(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        uploadFiles(e.target.files);
+      }
+    },
+    [uploadFiles]
+  );
+  const openFileDialog = useCallback2(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const renderProps = {
+    isDragActive,
+    isUploading,
+    uploadProgress,
+    openFileDialog,
+    uploadedFiles
+  };
+  if (children) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        className,
+        style,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: !maxFiles || maxFiles > 1,
+              accept,
+              onChange: handleFileInputChange,
+              style: { display: "none" }
+            }
+          ),
+          children(renderProps)
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ 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__ */ jsx2(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: !maxFiles || maxFiles > 1,
+            accept,
+            onChange: handleFileInputChange,
+            style: { display: "none" }
+          }
+        ),
+        isUploading ? /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx2("p", { style: { margin: 0, fontWeight: "bold", color: "#333" }, children: "Uploading..." }),
+          /* @__PURE__ */ jsx2("div", { style: { marginTop: "16px" }, children: Object.entries(uploadProgress).map(([fileName, progress]) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px", color: "#666", marginBottom: "4px" }, children: [
+              fileName,
+              ": ",
+              progress,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: "8px",
+                  backgroundColor: "#e0e0e0",
+                  borderRadius: "4px",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      width: `${progress}%`,
+                      height: "100%",
+                      backgroundColor: "#0070f3",
+                      transition: "width 0.3s ease"
+                    }
+                  }
+                )
+              }
+            )
+          ] }, fileName)) })
+        ] }) : /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx2("p", { style: { margin: 0, fontWeight: "bold", fontSize: "16px", color: "#333" }, children: isDragActive ? "Drop files here" : "Drag and drop files here" }),
+          /* @__PURE__ */ jsx2("p", { style: { margin: "8px 0 0 0", fontSize: "14px", color: "#666" }, children: "or click to select files" }),
+          maxFiles && maxFiles > 1 && /* @__PURE__ */ jsxs("p", { style: { margin: "4px 0 0 0", fontSize: "12px", color: "#999" }, children: [
+            "(Maximum ",
+            maxFiles,
+            " files)"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/hooks/useFiles.ts
+import { useState as useState2, useCallback as useCallback3, useEffect, useMemo as useMemo2 } from "react";
+function useFiles({
+  metadata,
+  startPage = 1,
+  perPage = 20,
+  mediaType,
+  autoLoad = true
+} = {}) {
+  const { client, on } = usePlugable();
+  const [files, setFiles] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [page, setPage] = useState2(startPage);
+  const [hasNext, setHasNext] = useState2(false);
+  const metadataKey = JSON.stringify(metadata);
+  const stableMetadata = useMemo2(() => metadata, [metadataKey]);
+  const fetchFiles = useCallback3(async (pageNum) => {
+    setIsLoading(true);
+    try {
+      const options = {
+        metadata: stableMetadata,
+        media_type: mediaType,
+        page: pageNum,
+        per_page: perPage,
+        with_download_url: true
+      };
+      const response = await client.list(options);
+      setFiles(response.files);
+      setHasNext(response.paging.has_next_page);
+    } catch (err) {
+      console.error("Failed to load files:", err);
+      setFiles([]);
+      setHasNext(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, stableMetadata, mediaType, perPage]);
+  useEffect(() => {
+    if (autoLoad) {
+      fetchFiles(page);
+    }
+  }, [fetchFiles, page, autoLoad]);
+  useEffect(() => {
+    const unsubscribe = on("file.uploaded", () => {
+      fetchFiles(page);
+    });
+    return unsubscribe;
+  }, [on, fetchFiles, page]);
+  const loadNextPage = useCallback3(() => {
+    if (hasNext) {
+      setPage((p) => p + 1);
+    }
+  }, [hasNext]);
+  const loadPreviousPage = useCallback3(() => {
+    setPage((p) => Math.max(1, p - 1));
+  }, []);
+  const refresh = useCallback3(async () => {
+    await fetchFiles(page);
+  }, [fetchFiles, page]);
+  return {
+    files,
+    isLoading,
+    pagination: {
+      current: page,
+      hasNext,
+      hasPrevious: page > 1,
+      loadNextPage,
+      loadPreviousPage
+    },
+    setPage,
+    refresh
+  };
+}
+
+// src/components/FileList.tsx
+import { Fragment, jsx as jsx3 } from "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__ */ jsx3(Fragment, { children: children(renderProps) });
+}
+
+// src/components/FileImage.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var imageCache = /* @__PURE__ */ new Map();
+function FileImage({
+  file,
+  width,
+  height,
+  objectFit = "cover",
+  borderRadius,
+  alt,
+  className,
+  style,
+  onLoad,
+  onError
+}) {
+  const [imageSrc, setImageSrc] = useState3(null);
+  const [isLoading, setIsLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  useEffect2(() => {
+    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__ */ jsx4(
+      "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__ */ jsxs2(
+      "div",
+      {
+        className,
+        style: {
+          ...imageStyle,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f0f0f0"
+        },
+        children: [
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                width: "40px",
+                height: "40px",
+                border: "3px solid #e0e0e0",
+                borderTop: "3px solid #0070f3",
+                borderRadius: "50%",
+                animation: "spin 1s linear infinite"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx4("style", { children: `
+            @keyframes spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+          ` })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "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
+import { jsx as jsx5 } from "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__ */ jsx5(
+      FileImage,
+      {
+        file,
+        width,
+        height,
+        objectFit,
+        className,
+        style,
+        borderRadius: 4
+      }
+    );
+  }
+  if (renderNonImage) {
+    return /* @__PURE__ */ jsx5("div", { className, style: containerStyle, children: renderNonImage(file) });
+  }
+  const extension = file.name.split(".").pop()?.toUpperCase() || "FILE";
+  return /* @__PURE__ */ jsx5("div", { className, style: containerStyle, children: showExtension && /* @__PURE__ */ jsx5("span", { style: {
+    fontSize: "12px",
+    fontWeight: "bold",
+    color: "#666",
+    textTransform: "uppercase"
+  }, children: extension }) });
+}
+export {
+  Dropzone,
+  FileImage,
+  FileList,
+  FilePreview,
+  PlugableProvider,
+  clearImageCache,
+  useFiles,
+  usePlugable
+};

package/package.json

@@ -1,10 +1,17 @@
 {
     "name": "@plugable-io/react",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "React components and hooks for Plugable File Management API",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        }
+    },
     "files": [
         "dist"
     ],