sanity-plugin-shopify-assets 1.0.1 → 1.1.0

package/README.md

@@ -14,45 +14,45 @@ npm install sanity-plugin-shopify-assets
 
 Add it as a plugin in sanity.config.ts (or .js):
 
-```
- import {defineConfig} from 'sanity'
- import {shopifyAssets} from 'sanity-plugin-shopify-assets'
-
- export const defineConfig({
-     //...
-     plugins: [
-         shopifyAssets({
-            shopifyDomain: '*.myshopify.com'
-         })
-     ]
- })
+```ts
+import {defineConfig} from 'sanity'
+import {shopifyAssets} from 'sanity-plugin-shopify-assets'
+
+export const defineConfig({
+    //...
+    plugins: [
+        shopifyAssets({
+          shopifyDomain: '*.myshopify.com'
+        })
+    ]
+})
 ```
 
 Simply update the `shopifyDomain` to your store URL. You'll need to install the [Sanity Connect](https://www.sanity.io/docs/sanity-connect-for-shopify) app on your store to handle authorisation. You'll need to ensure the Liquid sync option is enabled within the Sanity Connect app.
 
 Then you can enable the asset selector on a field:
 
-```
+```ts
 import {defineType, defineField} from 'sanity'
 
 export const myDocumentSchema = defineType({
-  type: "document",
-  name: "article",
+  type: 'document',
+  name: 'article',
   fields: [
     defineField({
-      type: "shopify.asset",
-      name: "shopifyAsset",
+      type: 'shopify.asset',
+      name: 'shopifyAsset',
     }),
-  ]
+  ],
 })
 ```
 
 It's also possible to define the Shopify domain on the field level, which allows you to retrieve assets from different stores. Each store must be connected to your Sanity project via the Sanity Connect app. In order to do this, simply declare the `shopifyDomain` on the field:
 
-```
+```ts
 defineField({
-  type: "shopify.asset",
-  name: "shopifyAsset",
+  type: 'shopify.asset',
+  name: 'shopifyAsset',
   options: {
     shopifyDomain: '*.myshopify.com'
   }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import {ObjectSchemaType} from 'sanity'
+import type {ObjectSchemaType} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
 
 export declare interface Asset extends ShopifyFile {

package/dist/index.esm.js

@@ -1,16 +1,16 @@
 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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { LaunchIcon, ErrorOutlineIcon } from '@sanity/icons';
 import { Card, Box, useTheme, Text, Flex, Button, Stack, Dialog, Inline, TextInput, Spinner, Grid } from '@sanity/ui';
-import { useProjectId, useDataset, PatchEvent, set, unset, DiffFromTo, defineType, defineField, definePlugin } from 'sanity';
 import r, { useRef, useDebugValue, useContext, createElement, useEffect, useCallback, useState, useMemo } from 'react';
-import videojs from 'video.js';
 import prettyBytes from 'pretty-bytes';
 import prettyMilliseconds from 'pretty-ms';
-import { LaunchIcon, ErrorOutlineIcon } from '@sanity/icons';
+import videojs from 'video.js';
 import { concat, defer, BehaviorSubject } from 'rxjs';
-import InfiniteScroll from 'react-infinite-scroll-component';
 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';
 var reactIsExports$1 = {};
@@ -2106,6 +2106,65 @@ const AssetPreview = _ref10 => {
     })]
   });
 };
+const fetchSearch = props => {
+  const {
+    projectId,
+    dataset,
+    shop,
+    query,
+    cursor,
+    resultsPerPage
+  } = 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), {
+      withCredentials: true,
+      method: "GET"
+    });
+  }).pipe(map(result => result.data));
+};
+const fetchList = props => {
+  const {
+    projectId,
+    dataset,
+    shop,
+    cursor,
+    resultsPerPage
+  } = 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), {
+    withCredentials: true,
+    method: "GET"
+  })).pipe(map(result => result.data));
+};
+const search = props => {
+  const {
+    projectId,
+    dataset,
+    shop,
+    query,
+    cursor,
+    resultsPerPage
+  } = props;
+  return concat(query.pipe(withLatestFrom(cursor), debounceTime(500), distinctUntilChanged(), switchMap(_ref11 => {
+    let [q, c] = _ref11;
+    if (q) {
+      return fetchSearch({
+        projectId,
+        dataset,
+        shop,
+        query: q,
+        cursor: c,
+        resultsPerPage
+      }).pipe(distinctUntilChanged());
+    }
+    return fetchList({
+      projectId,
+      dataset,
+      shop,
+      cursor: c,
+      resultsPerPage
+    });
+  })));
+};
 const DialogHeader = props => {
   const {
     title,
@@ -2203,65 +2262,6 @@ 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 fetchSearch = props => {
-  const {
-    projectId,
-    dataset,
-    shop,
-    query,
-    cursor,
-    resultsPerPage
-  } = props;
-  return defer(() => {
-    return axios.get("https://".concat(projectId, ".api.sanity.work/v1/shopify/assets/").concat(dataset, "?shop=").concat(shop, "&query=").concat(encodeURIComponent(query)).concat(cursor && "&cursor=".concat(cursor), "&limit=").concat(resultsPerPage), {
-      withCredentials: true,
-      method: "GET"
-    });
-  }).pipe(map(result => result.data));
-};
-const fetchList = props => {
-  const {
-    projectId,
-    dataset,
-    shop,
-    cursor,
-    resultsPerPage
-  } = props;
-  return defer(() => axios.get("https://".concat(projectId, ".api.sanity.work/v1/shopify/assets/").concat(dataset, "?shop=").concat(shop).concat(cursor && "&cursor=".concat(cursor), "&limit=").concat(resultsPerPage), {
-    withCredentials: true,
-    method: "GET"
-  })).pipe(map(result => result.data));
-};
-const search = props => {
-  const {
-    projectId,
-    dataset,
-    shop,
-    query,
-    cursor,
-    resultsPerPage
-  } = props;
-  return concat(query.pipe(withLatestFrom(cursor), debounceTime(500), distinctUntilChanged(), switchMap(_ref11 => {
-    let [q, c] = _ref11;
-    if (q) {
-      return fetchSearch({
-        projectId,
-        dataset,
-        shop,
-        query: q,
-        cursor: c,
-        resultsPerPage
-      }).pipe(distinctUntilChanged());
-    }
-    return fetchList({
-      projectId,
-      dataset,
-      shop,
-      cursor: c,
-      resultsPerPage
-    });
-  })));
-};
 const RESULTS_PER_PAGE = 42;
 const PHOTO_SPACING = 2;
 const PHOTO_PADDING = 1;
@@ -2612,48 +2612,28 @@ const shopifyAssetSchema = config => {
     },
     fields: [defineField({
       type: "string",
-      name: "filename"
+      name: "filename",
+      title: "Filename"
     }), defineField({
       type: "string",
-      name: "id"
+      name: "id",
+      title: "ID"
     }), defineField({
-      type: "object",
+      type: "shopify.assetMetadata",
       name: "meta",
-      fields: [defineField({
-        type: "string",
-        name: "alt"
-      }), defineField({
-        type: "number",
-        name: "duration"
-      }), defineField({
-        type: "number",
-        name: "fileSize"
-      }), defineField({
-        type: "number",
-        name: "height"
-      }), defineField({
-        type: "number",
-        name: "width"
-      })]
+      title: "Metadata"
     }), defineField({
-      type: "object",
+      type: "shopify.assetPreview",
       name: "preview",
-      fields: [defineField({
-        type: "number",
-        name: "height"
-      }), defineField({
-        type: "number",
-        name: "width"
-      }), defineField({
-        type: "url",
-        name: "url"
-      })]
+      title: "Preview"
     }), defineField({
       type: "string",
-      name: "type"
+      name: "type",
+      title: "Type"
     }), defineField({
       type: "url",
-      name: "url"
+      name: "url",
+      title: "URL"
     })],
     ...{
       components: {
@@ -2692,11 +2672,55 @@ const shopifyAssetSchema = config => {
     }
   });
 };
+const shopifyAssetPreviewSchema = defineType({
+  type: "object",
+  name: "shopify.assetPreview",
+  title: "Asset preview",
+  fields: [defineField({
+    type: "number",
+    name: "height",
+    title: "Height"
+  }), defineField({
+    type: "number",
+    name: "width",
+    title: "Width"
+  }), defineField({
+    type: "url",
+    name: "url",
+    title: "URL"
+  })]
+});
+const shopifyAssetMetadataSchema = defineType({
+  type: "object",
+  name: "shopify.assetMetadata",
+  title: "Asset metadata",
+  fields: [defineField({
+    type: "string",
+    name: "alt",
+    title: "Alternative text"
+  }), defineField({
+    type: "number",
+    name: "duration",
+    title: "Duration"
+  }), defineField({
+    type: "number",
+    name: "fileSize",
+    title: "File size"
+  }), defineField({
+    type: "number",
+    name: "height",
+    title: "Height"
+  }), defineField({
+    type: "number",
+    name: "width",
+    title: "Width"
+  })]
+});
 const shopifyAssets = definePlugin(config => {
   return {
     name: "shopify-asset-schema",
     schema: {
-      types: [shopifyAssetSchema(config)]
+      types: [shopifyAssetPreviewSchema, shopifyAssetMetadataSchema, shopifyAssetSchema(config)]
     }
   };
 });