@commercetools-demo/puck-image-picker 0.2.2

package/dist/index.mjs

@@ -0,0 +1,714 @@
+// src/ImagePickerField.tsx
+import {
+  useCallback as useCallback2,
+  useEffect,
+  useRef,
+  useState as useState2
+} from "react";
+
+// src/hooks/useMediaLibrary.ts
+import { useCallback, useState } from "react";
+
+// src/api/media-library.api.ts
+var fetchMediaLibraryApi = async (baseURL, projectKey, businessUnitKey, jwtToken, extensions = [], page = 1, limit = 20) => {
+  const params = new URLSearchParams();
+  if (extensions.length > 0) params.set("extensions", extensions.join(","));
+  params.set("page", String(page));
+  params.set("limit", String(limit));
+  const headers = {
+    "x-project-key": projectKey
+  };
+  if (jwtToken) headers["Authorization"] = `Bearer ${jwtToken}`;
+  const res = await fetch(
+    `${baseURL}/${businessUnitKey}/media-library?${params}`,
+    { headers }
+  );
+  if (!res.ok) {
+    const body = await res.text();
+    throw new Error(`[puck-image-picker] HTTP ${res.status}: ${body || res.statusText}`);
+  }
+  return res.json();
+};
+var uploadMediaFileApi = async (baseURL, projectKey, businessUnitKey, jwtToken, file, title, description) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  if (title) formData.append("title", title);
+  if (description) formData.append("description", description);
+  const res = await fetch(
+    `${baseURL}/${businessUnitKey}/upload-file`,
+    {
+      method: "POST",
+      headers: {
+        "x-project-key": projectKey,
+        Authorization: `Bearer ${jwtToken}`
+      },
+      body: formData
+    }
+  );
+  if (!res.ok) {
+    const body = await res.text();
+    throw new Error(`[puck-image-picker] HTTP ${res.status}: ${body || res.statusText}`);
+  }
+  return res.json();
+};
+
+// src/context/ImagePickerContext.tsx
+import { createContext, useContext } from "react";
+var ImagePickerContext = createContext(null);
+var useImagePickerContext = () => {
+  const ctx = useContext(ImagePickerContext);
+  if (!ctx) {
+    throw new Error(
+      "useImagePickerContext must be used inside <ImagePickerProvider>. Wrap your component tree with <ImagePickerProvider>."
+    );
+  }
+  return ctx;
+};
+
+// src/hooks/useMediaLibrary.ts
+var initialPagination = {
+  totalItems: 0,
+  totalPages: 0,
+  currentPage: 1,
+  limit: 20
+};
+var useMediaLibrary = () => {
+  const { baseURL, projectKey, businessUnitKey, jwtToken } = useImagePickerContext();
+  const [state, setState] = useState({
+    files: [],
+    pagination: initialPagination,
+    loading: false,
+    uploading: false,
+    error: null
+  });
+  const fetchMedia = useCallback(
+    async (extensions = [], page = 1, limit = 20) => {
+      setState((s) => ({ ...s, loading: true, error: null }));
+      try {
+        const result = await fetchMediaLibraryApi(
+          baseURL,
+          projectKey,
+          businessUnitKey,
+          jwtToken,
+          extensions,
+          page,
+          limit
+        );
+        setState((s) => ({
+          ...s,
+          files: result.files,
+          pagination: result.pagination,
+          loading: false
+        }));
+      } catch (err) {
+        setState((s) => ({
+          ...s,
+          loading: false,
+          error: err.message
+        }));
+      }
+    },
+    [baseURL, projectKey, businessUnitKey, jwtToken]
+  );
+  const uploadFile = useCallback(
+    async (file, title, description) => {
+      if (!jwtToken) throw new Error("jwtToken is required to upload files");
+      setState((s) => ({ ...s, uploading: true, error: null }));
+      try {
+        const result = await uploadMediaFileApi(
+          baseURL,
+          projectKey,
+          businessUnitKey,
+          jwtToken,
+          file,
+          title,
+          description
+        );
+        const mediaFile = {
+          url: result.url,
+          name: file.name,
+          title: title ?? file.name,
+          description,
+          isImage: file.type.startsWith("image/"),
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          size: file.size
+        };
+        setState((s) => ({
+          ...s,
+          files: [mediaFile, ...s.files],
+          pagination: {
+            ...s.pagination,
+            totalItems: s.pagination.totalItems + 1
+          },
+          uploading: false
+        }));
+        return mediaFile;
+      } catch (err) {
+        setState((s) => ({
+          ...s,
+          uploading: false,
+          error: err.message
+        }));
+        throw err;
+      }
+    },
+    [baseURL, projectKey, businessUnitKey, jwtToken]
+  );
+  const loadNextPage = useCallback(
+    async (extensions = []) => {
+      const next = state.pagination.currentPage + 1;
+      if (next <= state.pagination.totalPages) {
+        await fetchMedia(extensions, next, state.pagination.limit);
+      }
+    },
+    [fetchMedia, state.pagination]
+  );
+  const loadPreviousPage = useCallback(
+    async (extensions = []) => {
+      const prev = state.pagination.currentPage - 1;
+      if (prev >= 1) {
+        await fetchMedia(extensions, prev, state.pagination.limit);
+      }
+    },
+    [fetchMedia, state.pagination]
+  );
+  const hasNextPage = useCallback(
+    () => state.pagination.currentPage < state.pagination.totalPages,
+    [state.pagination]
+  );
+  const hasPreviousPage = useCallback(
+    () => state.pagination.currentPage > 1,
+    [state.pagination]
+  );
+  return {
+    files: state.files,
+    pagination: state.pagination,
+    loading: state.loading,
+    uploading: state.uploading,
+    error: state.error,
+    fetchMedia,
+    uploadFile,
+    loadNextPage,
+    loadPreviousPage,
+    hasNextPage,
+    hasPreviousPage
+  };
+};
+
+// src/ImagePickerField.tsx
+import PrimaryButton from "@commercetools-uikit/primary-button";
+import SecondaryButton from "@commercetools-uikit/secondary-button";
+import FlatButton from "@commercetools-uikit/flat-button";
+import SecondaryIconButton from "@commercetools-uikit/secondary-icon-button";
+import TextInput from "@commercetools-uikit/text-input";
+import Label from "@commercetools-uikit/label";
+import LoadingSpinner from "@commercetools-uikit/loading-spinner";
+import Spacings from "@commercetools-uikit/spacings";
+import Text from "@commercetools-uikit/text";
+import { CloseIcon } from "@commercetools-uikit/icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var UploadModal = ({
+  uploading,
+  error,
+  imagesOnly,
+  onUpload,
+  onClose
+}) => {
+  const [file, setFile] = useState2(null);
+  const [title, setTitle] = useState2("");
+  const [description, setDescription] = useState2("");
+  const [dragging, setDragging] = useState2(false);
+  const inputRef = useRef(null);
+  const handleFile = (f) => {
+    setFile(f);
+    if (!title) setTitle(f.name);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    const f = e.dataTransfer.files[0];
+    if (f) handleFile(f);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0,0,0,0.5)",
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      onClick: (e) => e.target === e.currentTarget && onClose(),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            borderRadius: "8px",
+            width: "640px",
+            maxWidth: "95vw",
+            maxHeight: "85vh",
+            display: "flex",
+            flexDirection: "column",
+            boxShadow: "0 20px 60px rgba(0,0,0,0.3)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "16px 20px",
+                  borderBottom: "1px solid #e5e7eb"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Text.Subheadline, { as: "h4", isBold: true, children: "Upload a file" }),
+                  /* @__PURE__ */ jsx(
+                    SecondaryIconButton,
+                    {
+                      icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+                      label: "Close",
+                      onClick: onClose,
+                      size: "small"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", padding: "20px" }, children: /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "m", children: [
+              /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "xs", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "upload-title", children: "Title" }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    id: "upload-title",
+                    value: title,
+                    onChange: (e) => setTitle(e.target.value),
+                    placeholder: "File title"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "xs", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "upload-description", children: "Description" }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    id: "upload-description",
+                    value: description,
+                    onChange: (e) => setDescription(e.target.value),
+                    placeholder: "Optional description"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    border: dragging ? "2px dashed #3b82f6" : "2px dashed #d1d5db",
+                    borderRadius: "6px",
+                    padding: "24px",
+                    textAlign: "center",
+                    cursor: "pointer",
+                    color: dragging ? "#3b82f6" : "#6b7280",
+                    fontSize: "13px",
+                    transition: "border-color .2s"
+                  },
+                  onClick: () => inputRef.current?.click(),
+                  onDragOver: (e) => {
+                    e.preventDefault();
+                    setDragging(true);
+                  },
+                  onDragLeave: () => setDragging(false),
+                  onDrop: handleDrop,
+                  children: [
+                    file ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        "\u{1F4CE} ",
+                        file.name
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", marginTop: "4px", color: "#9ca3af" }, children: [
+                        (file.size / 1024).toFixed(0),
+                        " KB"
+                      ] })
+                    ] }) : /* @__PURE__ */ jsx("div", { children: "\u{1F4C1} Click or drag & drop to select a file" }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        type: "file",
+                        accept: imagesOnly ? "image/*" : "*/*",
+                        style: { display: "none" },
+                        onChange: (e) => {
+                          const f = e.target.files?.[0];
+                          if (f) handleFile(f);
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              error && /* @__PURE__ */ jsx(Text.Body, { tone: "negative", children: error })
+            ] }) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  padding: "12px 20px",
+                  borderTop: "1px solid #e5e7eb",
+                  gap: "12px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Text.Detail, { tone: "secondary", truncate: true, children: file?.name ?? "No file selected" }),
+                  /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "s", children: [
+                    /* @__PURE__ */ jsx(SecondaryButton, { label: "Cancel", onClick: onClose }),
+                    /* @__PURE__ */ jsx(
+                      PrimaryButton,
+                      {
+                        label: uploading ? "Uploading\u2026" : "Upload",
+                        isDisabled: !file || uploading,
+                        onClick: () => file && onUpload(file, title, description)
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var LibraryModal = ({
+  files,
+  pagination,
+  loading,
+  error,
+  onNextPage,
+  onPrevPage,
+  onSelect,
+  onClose
+}) => {
+  const [selected, setSelected] = useState2(null);
+  const handleConfirm = () => {
+    if (selected) onSelect(selected);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0,0,0,0.5)",
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      onClick: (e) => e.target === e.currentTarget && onClose(),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            borderRadius: "8px",
+            width: "640px",
+            maxWidth: "95vw",
+            maxHeight: "85vh",
+            display: "flex",
+            flexDirection: "column",
+            boxShadow: "0 20px 60px rgba(0,0,0,0.3)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "16px 20px",
+                  borderBottom: "1px solid #e5e7eb"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Text.Subheadline, { as: "h4", isBold: true, children: "Select from Media Library" }),
+                  /* @__PURE__ */ jsx(
+                    SecondaryIconButton,
+                    {
+                      icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+                      label: "Close",
+                      onClick: onClose,
+                      size: "small"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "20px" }, children: [
+              loading ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: /* @__PURE__ */ jsx(LoadingSpinner, {}) }) : files.length === 0 ? /* @__PURE__ */ jsx(Text.Body, { tone: "secondary", children: "No files found." }) : /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "m", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
+                      gap: "12px"
+                    },
+                    children: files.map((file) => /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          cursor: "pointer",
+                          border: `2px solid ${selected?.url === file.url ? "#3b82f6" : "transparent"}`,
+                          borderRadius: "6px",
+                          padding: "6px",
+                          background: selected?.url === file.url ? "rgba(59,130,246,0.07)" : "#f9fafb"
+                        },
+                        onClick: () => setSelected(file),
+                        title: file.title ?? file.name,
+                        children: [
+                          file.isImage ? /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              src: file.url,
+                              alt: file.name,
+                              style: { width: "80px", height: "80px", objectFit: "cover", borderRadius: "4px", background: "#e5e7eb" }
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                width: "80px",
+                                height: "80px",
+                                borderRadius: "4px",
+                                background: "#e5e7eb",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontSize: "28px"
+                              },
+                              children: "\u{1F4C4}"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                marginTop: "6px",
+                                fontSize: "11px",
+                                textAlign: "center",
+                                maxWidth: "100%",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                color: "#374151"
+                              },
+                              children: file.title ?? file.name
+                            }
+                          )
+                        ]
+                      },
+                      file.url
+                    ))
+                  }
+                ),
+                pagination.totalPages > 1 && /* @__PURE__ */ jsxs(Spacings.Inline, { alignItems: "center", justifyContent: "center", scale: "s", children: [
+                  /* @__PURE__ */ jsx(
+                    SecondaryButton,
+                    {
+                      label: "\u2190 Prev",
+                      isDisabled: pagination.currentPage <= 1,
+                      onClick: onPrevPage,
+                      size: "small"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Text.Detail, { tone: "secondary", children: [
+                    pagination.currentPage,
+                    " / ",
+                    pagination.totalPages
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    SecondaryButton,
+                    {
+                      label: "Next \u2192",
+                      isDisabled: pagination.currentPage >= pagination.totalPages,
+                      onClick: onNextPage,
+                      size: "small"
+                    }
+                  )
+                ] })
+              ] }),
+              error && /* @__PURE__ */ jsx(Text.Body, { tone: "negative", children: error })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  padding: "12px 20px",
+                  borderTop: "1px solid #e5e7eb",
+                  gap: "12px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Text.Detail, { tone: "secondary", truncate: true, children: selected ? selected.title ?? selected.name : "Nothing selected" }),
+                  /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "s", children: [
+                    /* @__PURE__ */ jsx(SecondaryButton, { label: "Cancel", onClick: onClose }),
+                    /* @__PURE__ */ jsx(
+                      PrimaryButton,
+                      {
+                        label: "Select",
+                        isDisabled: !selected,
+                        onClick: handleConfirm
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var ImagePickerField = ({
+  value,
+  onChange,
+  imagesOnly = true
+}) => {
+  const {
+    files,
+    pagination,
+    loading,
+    uploading,
+    error,
+    fetchMedia,
+    uploadFile,
+    loadNextPage,
+    loadPreviousPage
+  } = useMediaLibrary();
+  const [showUpload, setShowUpload] = useState2(false);
+  const [showLibrary, setShowLibrary] = useState2(false);
+  const extensions = imagesOnly ? ["jpg", "jpeg", "png", "gif", "webp", "svg"] : [];
+  const openLibrary = useCallback2(() => {
+    void fetchMedia(extensions, 1, 20);
+    setShowLibrary(true);
+  }, [fetchMedia, extensions]);
+  const handleUpload = useCallback2(
+    async (file, title, description) => {
+      const mediaFile = await uploadFile(file, title, description);
+      onChange(mediaFile.url);
+      setShowUpload(false);
+    },
+    [uploadFile, onChange]
+  );
+  const handleSelect = useCallback2(
+    (file) => {
+      onChange(file.url);
+      setShowLibrary(false);
+    },
+    [onChange]
+  );
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setShowUpload(false);
+        setShowLibrary(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  return /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "s", children: [
+    value ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "10px",
+          padding: "8px",
+          border: "1px solid #d1d5db",
+          borderRadius: "6px",
+          background: "#f9fafb"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: value,
+              alt: "",
+              style: { width: "48px", height: "48px", objectFit: "cover", borderRadius: "4px", flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(Text.Detail, { tone: "secondary", truncate: true, children: value }) }),
+          /* @__PURE__ */ jsx(FlatButton, { tone: "critical", label: "Remove", onClick: () => onChange("") })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(Text.Detail, { tone: "secondary", children: "No image selected" }),
+    /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "s", children: [
+      /* @__PURE__ */ jsx(SecondaryButton, { label: "Upload", onClick: () => setShowUpload(true) }),
+      /* @__PURE__ */ jsx(PrimaryButton, { label: "Media Library", onClick: openLibrary })
+    ] }),
+    showUpload && /* @__PURE__ */ jsx(
+      UploadModal,
+      {
+        uploading,
+        error,
+        imagesOnly,
+        onUpload: (file, title, desc) => void handleUpload(file, title, desc),
+        onClose: () => setShowUpload(false)
+      }
+    ),
+    showLibrary && /* @__PURE__ */ jsx(
+      LibraryModal,
+      {
+        files,
+        pagination,
+        loading,
+        error,
+        onNextPage: () => void loadNextPage(extensions),
+        onPrevPage: () => void loadPreviousPage(extensions),
+        onSelect: handleSelect,
+        onClose: () => setShowLibrary(false)
+      }
+    )
+  ] });
+};
+
+// src/context/ImagePickerProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ImagePickerProvider = ({
+  children,
+  baseURL,
+  projectKey,
+  businessUnitKey,
+  jwtToken
+}) => {
+  return /* @__PURE__ */ jsx2(
+    ImagePickerContext.Provider,
+    {
+      value: { baseURL, projectKey, businessUnitKey, jwtToken },
+      children
+    }
+  );
+};
+export {
+  ImagePickerField,
+  ImagePickerProvider,
+  useMediaLibrary
+};
+//# sourceMappingURL=index.mjs.map