sanity-plugin-shopify-assets 1.2.0 → 1.2.2

package/README.md

@@ -1,7 +1,5 @@
 # sanity-plugin-shopify-assets
 
-> This is a **Sanity Studio v3** plugin.
-
 Select assets from your Shopify store in the context of your Sanity Studio. This plugin allows you to serve assets from the Shopify CDN in your frontends.
 
 ## Installation

package/dist/index.esm.js

@@ -1,6 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { useProjectId, useDataset, PatchEvent, set, unset, DiffFromTo, defineType, defineField, definePlugin } from 'sanity';
+import { useProjectId, useDataset, useClient, PatchEvent, set, unset, DiffFromTo, defineType, defineField, definePlugin } from 'sanity';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { LaunchIcon, ErrorOutlineIcon } from '@sanity/icons';
 import { Card, Box, Text, Flex, Button, Stack, Dialog, Inline, TextInput, Spinner, Grid } from '@sanity/ui';
@@ -14,29 +12,81 @@ import PhotoAlbum from 'react-photo-album';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { withLatestFrom, debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs/operators';
 import axios from 'axios';
-const Root = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  background-origin: content-box;\n  background-repeat: no-repeat;\n  background-clip: border-box;\n  background-size: cover;\n  background-color: ", ";\n  position: relative;\n  outline: none !important;\n  border: ", ";\n  box-sizing: content-box;\n  user-drag: none;\n\n  &:hover {\n    opacity: 0.85;\n  }\n\n  &:focus,\n  &:active {\n    border: 1px solid var(--input-border-color-focus);\n    box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n  }\n"])), _ref => {
+const Root = styled.div`
+  overflow: hidden;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  background-clip: border-box;
+  background-size: cover;
+  background-color: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.sanity.color.card.enabled.bg2;
-}, _ref2 => {
+}};
+  position: relative;
+  outline: none !important;
+  border: ${_ref2 => {
   let {
     theme
   } = _ref2;
-  return "1px solid ".concat(theme.sanity.color.card.enabled.border);
-});
-const InfoLine = styled(Card)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  user-drag: none;\n  position: absolute;\n  background-color: var(--infoline-bg);\n  top: 0;\n  left: 0;\n  max-width: 65%;\n  overflow-wrap: break-word;\n\n  [data-ui='Text'] {\n    color: var(--infoline-fg);\n  }\n"])), _ref3 => {
+  return `1px solid ${theme.sanity.color.card.enabled.border}`;
+}};
+  box-sizing: content-box;
+  user-drag: none;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &:focus,
+  &:active {
+    border: 1px solid var(--input-border-color-focus);
+    box-shadow: inset 0 0 0 3px var(--input-border-color-focus);
+  }
+`;
+const InfoLine = styled(Card)`
+  ${_ref3 => {
   let {
     theme
   } = _ref3;
-  return "\n    --infoline-fg: ".concat(theme.sanity.color.card.enabled.fg, ";\n    --infoline-bg: ").concat(theme.sanity.color.card.enabled.bg, ";\n  ");
-});
-const DurationLine = styled(Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  user-drag: none;\n  position: absolute;\n  background-color: var(--durationline-bg);\n  top: 0;\n  right: 0;\n\n  [data-ui='Text'] {\n    color: var(--durationline-fg);\n  }\n"])), _ref4 => {
+  return `
+    --infoline-fg: ${theme.sanity.color.card.enabled.fg};
+    --infoline-bg: ${theme.sanity.color.card.enabled.bg};
+  `;
+}};
+  user-drag: none;
+  position: absolute;
+  background-color: var(--infoline-bg);
+  top: 0;
+  left: 0;
+  max-width: 65%;
+  overflow-wrap: break-word;
+
+  [data-ui='Text'] {
+    color: var(--infoline-fg);
+  }
+`;
+const DurationLine = styled(Card)`
+  ${_ref4 => {
   let {
     theme
   } = _ref4;
-  return "\n    --durationline-fg: ".concat(theme.sanity.color.card.enabled.bg, ";\n    --durationline-bg: ").concat(theme.sanity.color.card.enabled.fg, ";\n  ");
-});
+  return `
+    --durationline-fg: ${theme.sanity.color.card.enabled.bg};
+    --durationline-bg: ${theme.sanity.color.card.enabled.fg};
+  `;
+}};
+  user-drag: none;
+  position: absolute;
+  background-color: var(--durationline-bg);
+  top: 0;
+  right: 0;
+
+  [data-ui='Text'] {
+    color: var(--durationline-fg);
+  }
+`;
 const VideoPlayer = _ref5 => {
   let {
     src,
@@ -45,8 +95,7 @@ const VideoPlayer = _ref5 => {
   const videoNode = React.useRef(null);
   const player = React.useRef();
   useEffect(() => {
-    var _a;
-    player.current = videojs((_a = videoNode.current) != null ? _a : "", {
+    player.current = videojs(videoNode.current ?? "", {
       sources: [{
         src
       }],
@@ -81,30 +130,34 @@ const VideoPlayer = _ref5 => {
     })]
   });
 };
-const StyledBox = styled(Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border: ", ";\n  display: flex;\n  justify-content: center;\n  margin-bottom: ", ";\n  position: relative;\n"])), _ref6 => {
+const StyledBox = styled(Box)`
+  background-color: ${_ref6 => {
   let {
     theme
   } = _ref6;
-  var _a, _b, _c;
-  return (_c = (_b = (_a = theme.sanity.color) == null ? void 0 : _a.card) == null ? void 0 : _b.enabled) == null ? void 0 : _c.bg2;
-}, _ref7 => {
+  return theme.sanity.color?.card?.enabled?.bg2;
+}};
+  border: ${_ref7 => {
   let {
     theme
   } = _ref7;
-  var _a, _b, _c, _d;
-  return "1px solid ".concat((_d = (_c = (_b = (_a = theme.sanity) == null ? void 0 : _a.color) == null ? void 0 : _b.card) == null ? void 0 : _c.enabled) == null ? void 0 : _d.border);
-}, _ref8 => {
+  return `1px solid ${theme.sanity?.color?.card?.enabled?.border}`;
+}};
+  display: flex;
+  justify-content: center;
+  margin-bottom: ${_ref8 => {
   let {
     theme
   } = _ref8;
   return theme.sanity.space[4];
-});
+}};
+  position: relative;
+`;
 const RenderAsset = _ref9 => {
   let {
     value,
     url
   } = _ref9;
-  var _a;
   switch (value.type) {
     case "video":
       return /* @__PURE__ */jsx(VideoPlayer, {
@@ -116,7 +169,7 @@ const RenderAsset = _ref9 => {
         justify: "center",
         children: /* @__PURE__ */jsx("img", {
           alt: "preview",
-          src: (_a = value == null ? void 0 : value.preview) == null ? void 0 : _a.url,
+          src: value?.preview?.url,
           style: {
             maxWidth: "100%",
             height: "auto",
@@ -127,10 +180,10 @@ const RenderAsset = _ref9 => {
       });
   }
 };
-const AssetPreview = _ref10 => {
+const AssetPreview = _ref0 => {
   let {
     value
-  } = _ref10;
+  } = _ref0;
   const url = value && value.url;
   if (!value || !url) {
     return null;
@@ -154,8 +207,8 @@ const AssetPreview = _ref10 => {
       margin: 2,
       children: /* @__PURE__ */jsxs(Text, {
         size: 1,
-        title: "Select ".concat(filename),
-        children: [filename, " ", fileSize && "(".concat(prettyBytes(fileSize), ")")]
+        title: `Select ${filename}`,
+        children: [filename, " ", fileSize && `(${prettyBytes(fileSize)})`]
       })
     }), duration && /* @__PURE__ */jsx(DurationLine, {
       padding: 2,
@@ -163,7 +216,7 @@ const AssetPreview = _ref10 => {
       margin: 2,
       children: /* @__PURE__ */jsx(Text, {
         size: 1,
-        title: "Video duration: ".concat(filename),
+        title: `Video duration: ${filename}`,
         children: prettyMilliseconds(duration, {
           colonNotation: true,
           secondsDecimalDigits: 0
@@ -179,12 +232,16 @@ const fetchSearch = props => {
     shop,
     query,
     cursor,
-    resultsPerPage
+    resultsPerPage,
+    token
   } = props;
   return defer(() => {
-    return axios.get("https://".concat(projectId, ".api.sanity.io/v1/shopify/assets/").concat(dataset, "?shop=").concat(shop, "&query=").concat(encodeURIComponent(query)).concat(cursor && "&cursor=".concat(cursor), "&limit=").concat(resultsPerPage), {
+    return axios.get(`https://${projectId}.api.sanity.io/v1/shopify/assets/${dataset}?shop=${shop}&query=${encodeURIComponent(query)}${cursor && `&cursor=${cursor}`}&limit=${resultsPerPage}`, {
       withCredentials: true,
-      method: "GET"
+      method: "GET",
+      headers: token ? {
+        Authorization: `Bearer ${token}`
+      } : {}
     });
   }).pipe(map(result => result.data));
 };
@@ -194,11 +251,15 @@ const fetchList = props => {
     dataset,
     shop,
     cursor,
-    resultsPerPage
+    resultsPerPage,
+    token
   } = props;
-  return defer(() => axios.get("https://".concat(projectId, ".api.sanity.io/v1/shopify/assets/").concat(dataset, "?shop=").concat(shop).concat(cursor && "&cursor=".concat(cursor), "&limit=").concat(resultsPerPage), {
+  return defer(() => axios.get(`https://${projectId}.api.sanity.io/v1/shopify/assets/${dataset}?shop=${shop}${cursor && `&cursor=${cursor}`}&limit=${resultsPerPage}`, {
     withCredentials: true,
-    method: "GET"
+    method: "GET",
+    headers: token ? {
+      Authorization: `Bearer ${token}`
+    } : {}
   })).pipe(map(result => result.data));
 };
 const search = props => {
@@ -208,10 +269,11 @@ const search = props => {
     shop,
     query,
     cursor,
-    resultsPerPage
+    resultsPerPage,
+    token
   } = props;
-  return concat(query.pipe(withLatestFrom(cursor), debounceTime(500), distinctUntilChanged(), switchMap(_ref11 => {
-    let [q, c] = _ref11;
+  return concat(query.pipe(withLatestFrom(cursor), debounceTime(500), distinctUntilChanged(), switchMap(_ref1 => {
+    let [q, c] = _ref1;
     if (q) {
       return fetchSearch({
         projectId,
@@ -219,7 +281,8 @@ const search = props => {
         shop,
         query: q,
         cursor: c,
-        resultsPerPage
+        resultsPerPage,
+        token
       }).pipe(distinctUntilChanged());
     }
     return fetchList({
@@ -227,7 +290,8 @@ const search = props => {
       dataset,
       shop,
       cursor: c,
-      resultsPerPage
+      resultsPerPage,
+      token
     });
   })));
 };
@@ -237,7 +301,7 @@ const DialogHeader = props => {
     shopifyDomain
   } = props;
   const handleOpenInNewTab = useCallback(() => {
-    window.open("https://".concat(shopifyDomain, "/admin/settings/files"), "_blank");
+    window.open(`https://${shopifyDomain}/admin/settings/files`, "_blank");
   }, [shopifyDomain]);
   return /* @__PURE__ */jsxs(Flex, {
     align: "center",
@@ -265,10 +329,7 @@ const DialogHeader = props => {
     })]
   });
 };
-const extractName = name => {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = name == null ? void 0 : name.split("/")) == null ? void 0 : _a.pop()) == null ? void 0 : _b.split("?")[0]) != null ? _c : "";
-};
+const extractName = name => name?.split("/")?.pop()?.split("?")[0] ?? "";
 function File(props) {
   const {
     onClick,
@@ -290,12 +351,12 @@ function File(props) {
   }, [onClick, data, filename]);
   return /* @__PURE__ */jsxs(Root, {
     ref: rootElm,
-    title: "".concat(filename),
+    title: `${filename}`,
     tabIndex: 0,
     style: {
-      width: "".concat(width, "px"),
-      height: "".concat(height, "px"),
-      backgroundImage: "url(\"".concat(preview == null ? void 0 : preview.url, "\")")
+      width: `${width}px`,
+      height: `${height}px`,
+      backgroundImage: `url("${preview?.url}")`
     },
     onClick: handleClick,
     children: [/* @__PURE__ */jsx(InfoLine, {
@@ -304,8 +365,8 @@ function File(props) {
       margin: 2,
       children: /* @__PURE__ */jsxs(Text, {
         size: 1,
-        title: "Select ".concat(filename),
-        children: [filename, " ", meta.fileSize && "(".concat(prettyBytes(meta.fileSize), ")")]
+        title: `Select ${filename}`,
+        children: [filename, " ", meta.fileSize && `(${prettyBytes(meta.fileSize)})`]
       })
     }), meta.duration && /* @__PURE__ */jsx(DurationLine, {
       padding: 2,
@@ -313,7 +374,7 @@ function File(props) {
       margin: 2,
       children: /* @__PURE__ */jsx(Text, {
         size: 1,
-        title: "Video duration: ".concat(filename),
+        title: `Video duration: ${filename}`,
         children: prettyMilliseconds(meta.duration, {
           colonNotation: true,
           secondsDecimalDigits: 0
@@ -322,8 +383,15 @@ function File(props) {
     })]
   });
 }
-const Search = styled(Stack)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n"])));
-styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  max-height: 80vh;\n"])));
+const Search = styled(Stack)`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`;
+styled.div`
+  overflow-y: auto;
+  max-height: 80vh;
+`;
 const RESULTS_PER_PAGE = 42;
 const PHOTO_SPACING = 2;
 const PHOTO_PADDING = 1;
@@ -338,6 +406,10 @@ function ShopifyAssetPicker(props) {
   } = props;
   const projectId = useProjectId();
   const dataset = useDataset();
+  const client = useClient({
+    apiVersion: "2021-06-07"
+  });
+  const token = client.config().token;
   const [error, setError] = useState("");
   const [query, setQuery] = useState("");
   const [searchResults, setSearchResults] = useState([]);
@@ -355,7 +427,8 @@ function ShopifyAssetPicker(props) {
       shop: shopifyDomain,
       query: searchSubject$,
       cursor: cursorSubject$,
-      resultsPerPage: RESULTS_PER_PAGE
+      resultsPerPage: RESULTS_PER_PAGE,
+      token
     }).subscribe({
       next: results => {
         setSearchResults(prevResults => [...prevResults, ...results.assets]);
@@ -363,11 +436,11 @@ function ShopifyAssetPicker(props) {
         setIsLoading(false);
       },
       error: err => {
-        setError("".concat(err.response.data.message || err.message || "An error occurred", " - check plugin configuration"));
+        setError(`${err.response?.data?.message || err.message || "An error occurred"} - check plugin configuration`);
       }
     });
     return () => searchSubscription.unsubscribe();
-  }, [searchSubject$, cursorSubject$, shopifyDomain, projectId, dataset]);
+  }, [searchSubject$, cursorSubject$, shopifyDomain, projectId, dataset, token]);
   const handleSearchTermChanged = useCallback(event => {
     const newQuery = event.currentTarget.value;
     setQuery(newQuery);
@@ -383,11 +456,11 @@ function ShopifyAssetPicker(props) {
     searchSubject$.next(query);
   }, [cursorSubject$, pageInfo, searchSubject$, query]);
   const handleSelect = useCallback(file => {
-    file._key = value == null ? void 0 : value._key;
+    file._key = value?._key;
     file._type = schemaType.name;
     onChange(PatchEvent.from([set(file)]));
     onClose();
-  }, [onChange, onClose, schemaType.name, value == null ? void 0 : value._key]);
+  }, [onChange, onClose, schemaType.name, value?._key]);
   const renderFile = useCallback(fileProps => {
     const {
       photo,
@@ -458,7 +531,7 @@ function ShopifyAssetPicker(props) {
         }), /* @__PURE__ */jsx(InfiniteScroll, {
           dataLength: searchResults.length,
           next: handleScollerLoadMore,
-          hasMore: pageInfo ? pageInfo == null ? void 0 : pageInfo.hasNextPage : true,
+          hasMore: pageInfo ? pageInfo?.hasNextPage : true,
           scrollThreshold: 0.99,
           height: "60vh",
           loader: /* @__PURE__ */jsx(Flex, {
@@ -484,21 +557,18 @@ function ShopifyAssetPicker(props) {
             spacing: PHOTO_SPACING,
             padding: PHOTO_PADDING,
             targetRowHeight: handleWidth,
-            photos: searchResults.map(file => {
-              var _a, _b, _c;
-              return {
-                src: (_a = file == null ? void 0 : file.preview) == null ? void 0 : _a.url,
-                width: ((_b = file == null ? void 0 : file.preview) == null ? void 0 : _b.width) || 2048,
-                height: ((_c = file == null ? void 0 : file.preview) == null ? void 0 : _c.height) || 2048,
-                key: file.id,
-                data: file
-              };
-            }),
+            photos: searchResults.map(file => ({
+              src: file?.preview?.url,
+              width: file?.preview?.width || 2048,
+              height: file?.preview?.height || 2048,
+              key: file.id,
+              data: file
+            })),
             renderPhoto: renderFile,
             componentsProps: {
               containerProps: {
                 style: {
-                  marginBottom: "".concat(PHOTO_SPACING, "px")
+                  marginBottom: `${PHOTO_SPACING}px`
                 }
               }
             }
@@ -607,15 +677,14 @@ function ShopifyAssetInput(props) {
     })]
   });
 }
-const CloudinaryDiffPreview = _ref12 => {
+const CloudinaryDiffPreview = _ref10 => {
   let {
     value
-  } = _ref12;
-  var _a, _b;
+  } = _ref10;
   if (!value) {
     return null;
   }
-  if ((_a = value == null ? void 0 : value.preview) == null ? void 0 : _a.url) {
+  if (value?.preview?.url) {
     return /* @__PURE__ */jsx(Flex, {
       justify: "center",
       align: "center",
@@ -625,7 +694,7 @@ const CloudinaryDiffPreview = _ref12 => {
         space: 2,
         children: [/* @__PURE__ */jsx("img", {
           alt: "preview",
-          src: (_b = value == null ? void 0 : value.preview) == null ? void 0 : _b.url,
+          src: value?.preview?.url,
           style: {
             objectFit: "contain",
             margin: "auto",
@@ -649,11 +718,11 @@ const CloudinaryDiffPreview = _ref12 => {
     })
   });
 };
-const AssetDiff = _ref13 => {
+const AssetDiff = _ref11 => {
   let {
     diff,
     schemaType
-  } = _ref13;
+  } = _ref11;
   return /* @__PURE__ */jsx(DiffFromTo, {
     diff,
     schemaType,
@@ -712,14 +781,14 @@ const shopifyAssetSchema = config => {
         filename: "filename",
         type: "type"
       },
-      prepare(_ref14) {
+      prepare(_ref12) {
         let {
           url,
           meta,
           preview,
           filename,
           type
-        } = _ref14;
+        } = _ref12;
         return {
           title: filename,
           subtitle: type,