@abhi1693/medusa-extra-images 0.0.0-stage → 0.0.2

package/.medusa/server/src/admin/index.js

@@ -0,0 +1,356 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const adminSdk = require("@medusajs/admin-sdk");
+const reactQuery = require("@tanstack/react-query");
+const Medusa = require("@medusajs/js-sdk");
+const icons = require("@medusajs/icons");
+const ui = require("@medusajs/ui");
+const react = require("react");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
+const sdk = new Medusa__default.default({
+  baseUrl: typeof __BACKEND_URL__ === "string" ? __BACKEND_URL__ : "/",
+  auth: {
+    type: typeof __AUTH_TYPE__ === "string" ? __AUTH_TYPE__ : "session",
+    jwtTokenStorageKey: typeof __JWT_TOKEN_STORAGE_KEY__ === "string" ? __JWT_TOKEN_STORAGE_KEY__ : void 0
+  }
+});
+function ExistingMediaPicker({
+  kind,
+  id,
+  busy,
+  onSelect,
+  onClose
+}) {
+  const [search, setSearch] = react.useState(""), [offset, setOffset] = react.useState(0);
+  const products = reactQuery.useQuery({
+    queryKey: ["catalog-artwork-media", kind, id, search, offset],
+    queryFn: () => sdk.client.fetch(
+      `/admin/catalog-images/${kind}/${id}/media`,
+      { query: { q: search, offset } }
+    ),
+    retry: false
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Existing product media",
+      className: "flex flex-col gap-6",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: kind + "-artwork-media-search", children: "Find product media" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              id: kind + "-artwork-media-search",
+              type: "search",
+              value: search,
+              disabled: busy,
+              onChange: (event) => {
+                setSearch(event.target.value);
+                setOffset(0);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
+            "Images from products in this ",
+            kind,
+            "."
+          ] })
+        ] }),
+        products.isPending ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Loading media…" }) : products.isError ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { role: "alert", children: "Could not load product media. Product view permission is required." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          products.data.products.length ? products.data.products.map((product) => {
+            const images = [...product.images || []];
+            if (product.thumbnail && !images.some((image) => image.url === product.thumbnail))
+              images.unshift({
+                id: product.id + "-thumbnail",
+                url: product.thumbnail
+              });
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "plus", children: product.title }),
+              images.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4", children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: busy,
+                  "aria-label": `Select ${product.title} image ${index + 1}`,
+                  onClick: () => onSelect(image.url, product.id),
+                  className: "relative aspect-square overflow-hidden rounded-[8px] shadow-elevation-card-rest hover:shadow-elevation-card-hover focus-visible:ring-2 focus-visible:ring-ui-border-interactive",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: image.url,
+                      alt: "",
+                      className: "size-full object-cover"
+                    }
+                  )
+                },
+                image.id
+              )) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted", children: "No media on this product." })
+            ] }, product.id);
+          }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "No products match this search." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                size: "small",
+                variant: "secondary",
+                disabled: busy || !offset,
+                onClick: () => setOffset(Math.max(0, offset - 12)),
+                children: "Previous media"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                size: "small",
+                variant: "secondary",
+                disabled: busy || offset + 12 >= products.data.count,
+                onClick: () => setOffset(offset + 12),
+                children: "Next media"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            size: "small",
+            variant: "secondary",
+            disabled: busy,
+            onClick: onClose,
+            children: "Cancel"
+          }
+        )
+      ]
+    }
+  );
+}
+function CatalogArtwork({
+  kind,
+  id
+}) {
+  const cache = reactQuery.useQueryClient(), key = ["catalog-artwork", kind, id], endpoint = `/admin/catalog-images/${kind}/${id}`;
+  const query = reactQuery.useQuery({
+    queryKey: key,
+    queryFn: () => sdk.client.fetch(endpoint),
+    retry: false
+  });
+  const [editing, setEditing] = react.useState(false), [selected, setSelected] = react.useState(false), [busy, setBusy] = react.useState(false), [error, setError] = react.useState("");
+  const current = query.data?.image, label = kind === "collection" ? "Collection" : "Category";
+  async function save(url, productId) {
+    setBusy(true);
+    setError("");
+    try {
+      const result = await sdk.client.fetch(endpoint, {
+        method: "POST",
+        body: {
+          url,
+          revision: current.revision,
+          ...productId ? { product_id: productId } : {}
+        }
+      });
+      cache.setQueryData(key, result);
+      await cache.invalidateQueries({
+        queryKey: [kind === "category" ? "product_categories" : "collections"]
+      });
+      setSelected(false);
+      setEditing(false);
+      ui.toast.success("Image saved");
+    } catch (error2) {
+      setError(
+        error2 instanceof Error ? error2.message : "Could not save image. Check your edit permission."
+      );
+      await cache.invalidateQueries({ queryKey: key });
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Media" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.IconButton,
+            {
+              size: "small",
+              variant: "transparent",
+              "aria-label": label + " media actions",
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisHorizontal, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.DropdownMenu.Item,
+            {
+              disabled: busy || !current,
+              onClick: () => setEditing(true),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {}),
+                "Edit image"
+              ]
+            }
+          ) })
+        ] })
+      ] }),
+      query.isPending ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "px-6 py-4", children: "Loading media…" }) : query.isError ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { role: "alert", className: "px-6 py-4", children: "Could not load media. Check your catalog view permission." }) : current && (current.url ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative aspect-square size-full overflow-hidden rounded-[8px] shadow-elevation-card-rest transition-fg hover:shadow-elevation-card-hover", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `absolute right-2 top-2 z-10 transition-fg ${selected ? "visible opacity-100" : "invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100 focus-within:visible focus-within:opacity-100"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Checkbox,
+              {
+                "aria-label": "Select " + kind + " image",
+                checked: selected,
+                disabled: busy,
+                onCheckedChange: () => setSelected((value) => !value)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Change " + kind + " image",
+            className: "size-full focus-visible:ring-2",
+            disabled: busy,
+            onClick: () => setEditing(true),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: current.url,
+                alt: label + " image",
+                className: "size-full object-cover"
+              }
+            )
+          }
+        )
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", className: "text-ui-fg-subtle", children: "No images" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-muted", children: [
+            "Select an image from products in this ",
+            kind,
+            "."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            size: "small",
+            variant: "secondary",
+            onClick: () => setEditing(true),
+            children: "Add image"
+          }
+        )
+      ] })),
+      error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { role: "alert", className: "px-6 py-3 text-ui-fg-error", children: error })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.CommandBar, { open: selected, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CommandBar.Bar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.CommandBar.Value, { children: "1 selected" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.CommandBar.Seperator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.CommandBar.Command,
+        {
+          label: "Remove",
+          shortcut: "d",
+          action: () => save(null)
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal, { open: editing, onOpenChange: setEditing, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.FocusModal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Heading, { level: "h2", children: [
+        "Select ",
+        kind,
+        " image"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Body, { className: "overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-6 p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ExistingMediaPicker,
+          {
+            kind,
+            id,
+            busy,
+            onSelect: save,
+            onClose: () => setEditing(false)
+          }
+        ),
+        error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { role: "alert", className: "text-ui-fg-error", children: error })
+      ] }) })
+    ] }) })
+  ] });
+}
+function FeatureArtwork({
+  kind,
+  id
+}) {
+  const config = reactQuery.useQuery({
+    queryKey: ["extra-images-config"],
+    queryFn: () => sdk.client.fetch(
+      "/admin/catalog-images/config"
+    ),
+    retry: false
+  });
+  if (!(kind === "category" ? config.data?.categories : config.data?.collections))
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(CatalogArtwork, { kind, id });
+}
+function CategoryArtwork({
+  data
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FeatureArtwork, { kind: "category", id: data.id }, data.id);
+}
+adminSdk.defineWidgetConfig({
+  zone: "product_category.details.side",
+  id: "extra-images:category-artwork"
+});
+function CollectionArtwork({
+  data
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FeatureArtwork, { kind: "collection", id: data.id }, data.id);
+}
+adminSdk.defineWidgetConfig({
+  zone: "product_collection.details",
+  id: "extra-images:collection-artwork"
+});
+const widgetModule = { widgets: [
+  {
+    Component: CategoryArtwork,
+    zone: ["product_category.details.side"],
+    widgetId: "extra-images:category-artwork"
+  },
+  {
+    Component: CollectionArtwork,
+    zone: ["product_collection.details"],
+    widgetId: "extra-images:collection-artwork"
+  }
+] };
+const routeModule = {
+  routes: []
+};
+const menuItemModule = {
+  menuItems: []
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: {} };
+const cellRendererModule = {};
+const layoutModule = { layouts: [] };
+const searchEntityModule = {};
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule,
+  cellRendererModule,
+  layoutModule,
+  searchEntityModule
+};
+module.exports = plugin;