sanity-plugin-shopify-assets 1.0.0

package/src/components/ShopifyAssetPicker.tsx

@@ -0,0 +1,202 @@
+import {Asset, PageInfo, ShopifyAPIResponse, ShopifyFile} from '../types'
+import {BehaviorSubject, Subscription} from 'rxjs'
+import {Card, Dialog, Flex, Inline, Spinner, Stack, Text, TextInput} from '@sanity/ui'
+import {PatchEvent, set, useProjectId, ObjectInputProps} from 'sanity'
+import React, {useCallback, useEffect, useMemo, useState} from 'react'
+
+import DialogHeader from './DialogHeader'
+import {ErrorOutlineIcon} from '@sanity/icons'
+import File from './File'
+import InfiniteScroll from 'react-infinite-scroll-component'
+import PhotoAlbum from 'react-photo-album'
+import {Search} from './ShopifyAssetInput.styled'
+import {search} from '../datastores/shopify'
+
+const RESULTS_PER_PAGE = 42
+const PHOTO_SPACING = 2
+const PHOTO_PADDING = 1
+
+export interface AssetPickerProps extends ObjectInputProps<Asset> {
+  shopifyDomain: string
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function ShopifyAssetPicker(props: AssetPickerProps) {
+  const {isOpen, onClose, shopifyDomain, onChange, schemaType, value} = props
+  const projectId = useProjectId()
+
+  const [error, setError] = useState('')
+  const [query, setQuery] = useState('')
+  const [searchResults, setSearchResults] = useState<any[]>([])
+  const [pageInfo, setPageInfo] = useState<PageInfo>()
+  const [isLoading, setIsLoading] = useState(true)
+
+  const searchSubject$ = useMemo(() => new BehaviorSubject(''), [])
+  const cursorSubject$ = useMemo(() => new BehaviorSubject(''), [])
+
+  useEffect(() => {
+    if (!shopifyDomain) setError('Please configure your Shopify domain in the plugin config')
+  }, [shopifyDomain])
+
+  useEffect(() => {
+    const searchSubscription: Subscription = search(
+      projectId,
+      shopifyDomain,
+      searchSubject$,
+      cursorSubject$,
+      RESULTS_PER_PAGE
+    ).subscribe({
+      next: (results: ShopifyAPIResponse) => {
+        setSearchResults((prevResults) => [...prevResults, ...results.assets])
+        setPageInfo(results.pageInfo)
+        setIsLoading(false)
+      },
+      error: (err) => {
+        setError(
+          `${
+            err.response.data.message || err.message || 'An error occurred'
+          } - check plugin configuration`
+        )
+      },
+    })
+
+    return () => searchSubscription.unsubscribe()
+  }, [searchSubject$, cursorSubject$, shopifyDomain, projectId])
+
+  const handleSearchTermChanged = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newQuery = event.currentTarget.value
+      setQuery(newQuery)
+      setSearchResults([])
+      setPageInfo(undefined)
+      setIsLoading(true)
+
+      cursorSubject$.next('')
+      searchSubject$.next(newQuery)
+    },
+    [cursorSubject$, searchSubject$]
+  )
+
+  const handleScollerLoadMore = useCallback(() => {
+    setIsLoading(true)
+    if (pageInfo) cursorSubject$.next(pageInfo.cursor)
+    searchSubject$.next(query)
+  }, [cursorSubject$, pageInfo, searchSubject$, query])
+
+  const handleSelect = useCallback(
+    (file: Asset) => {
+      file._key = value?._key
+      file._type = schemaType.name
+      onChange(PatchEvent.from([set(file)]))
+      onClose()
+    },
+    [onChange, onClose, schemaType.name, value?._key]
+  )
+
+  const renderFile = useCallback(
+    (fileProps: any) => {
+      const {photo, layout} = fileProps
+      return (
+        <File
+          onClick={handleSelect}
+          data={photo.data}
+          width={layout.width}
+          height={layout.height}
+        />
+      )
+    },
+    [handleSelect]
+  )
+
+  const handleWidth = useCallback((width: number) => {
+    if (width < 300) return 150
+    else if (width < 600) return 200
+    return 300
+  }, [])
+
+  return (
+    <Dialog
+      id="shopify-asset-source"
+      header={<DialogHeader title="Shopify Assets" shopifyDomain={shopifyDomain} />}
+      onClose={onClose}
+      open={isOpen}
+      width={4}
+    >
+      <Stack space={3} padding={4}>
+        {error ? (
+          <Card overflow="hidden" padding={4} radius={2} shadow={1} tone="critical">
+            <Flex align="center" gap={3}>
+              <Text size={2}>
+                <ErrorOutlineIcon />
+              </Text>
+              <Inline space={2}>
+                <Text size={1}>{error}</Text>
+              </Inline>
+            </Flex>
+          </Card>
+        ) : (
+          <>
+            <Card>
+              <Search space={3}>
+                <Text size={1} weight="semibold">
+                  Search Shopify for assets
+                </Text>
+                <TextInput
+                  label="Search Images"
+                  placeholder="filename.jpg"
+                  value={query}
+                  onChange={handleSearchTermChanged}
+                />
+              </Search>
+            </Card>
+            {!isLoading && searchResults.length === 0 && (
+              <Text size={1} muted>
+                No results found
+              </Text>
+            )}
+            <InfiniteScroll
+              dataLength={searchResults.length} // This is important field to render the next data
+              next={handleScollerLoadMore}
+              hasMore={pageInfo ? pageInfo?.hasNextPage : true}
+              scrollThreshold={0.99}
+              height="60vh"
+              loader={
+                <Flex align="center" justify="center" padding={3}>
+                  <Spinner muted />
+                </Flex>
+              }
+              endMessage={
+                <Flex align="center" justify="center" padding={3}>
+                  <Text size={1} muted>
+                    No more results
+                  </Text>
+                </Flex>
+              }
+            >
+              {searchResults && (
+                <PhotoAlbum
+                  layout="rows"
+                  spacing={PHOTO_SPACING}
+                  padding={PHOTO_PADDING}
+                  targetRowHeight={handleWidth}
+                  photos={searchResults.map((file: ShopifyFile) => ({
+                    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: `${PHOTO_SPACING}px`}},
+                  }}
+                />
+              )}
+            </InfiniteScroll>
+          </>
+        )}
+      </Stack>
+    </Dialog>
+  )
+}

package/src/components/ShopifyIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const ShopifyIcon = () => {
+  return (
+    <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.3269 3.85113C15.3132 3.75015 15.2258 3.69411 15.1531 3.688C15.081 3.6819 13.6693 3.66026 13.6693 3.66026C13.6693 3.66026 12.4887 2.50392 12.3722 2.38628C12.2555 2.26865 12.0277 2.30417 11.9392 2.3308C11.9381 2.33135 11.7175 2.40016 11.3461 2.51612C11.2839 2.31304 11.1927 2.06335 11.0622 1.81255C10.6419 1.00356 10.0263 0.575752 9.2825 0.574642C9.28142 0.574642 9.28092 0.574642 9.27975 0.574642C9.22808 0.574642 9.17692 0.579636 9.12517 0.584074C9.10317 0.557441 9.08117 0.531362 9.05808 0.505838C8.73408 0.156272 8.31869 -0.0140727 7.82082 0.000908712C6.86027 0.0286521 5.90357 0.72834 5.12787 1.97124C4.58212 2.84572 4.16677 3.94435 4.04904 4.79497C2.94601 5.13953 2.17471 5.38035 2.15766 5.3859C1.60091 5.56235 1.58331 5.57955 1.51069 6.10889C1.45677 6.50895 0 17.8704 0 17.8704L12.2082 20L17.4994 18.6733C17.4994 18.6733 15.3407 3.95212 15.3269 3.85113ZM10.7349 2.707C10.4537 2.79467 10.1342 2.89454 9.78758 3.00274C9.78042 2.51224 9.72267 1.82975 9.496 1.23992C10.2249 1.3792 10.5836 2.21095 10.7349 2.707ZM9.14883 3.20249C8.509 3.40225 7.81091 3.62031 7.11058 3.83892C7.30753 3.0782 7.68107 2.32081 8.13989 1.8242C8.31044 1.63943 8.54917 1.43358 8.832 1.31594C9.09767 1.87525 9.15542 2.66705 9.14883 3.20249ZM7.84007 0.645665C8.06562 0.640671 8.25542 0.690609 8.41775 0.798253C8.15805 0.9342 7.90718 1.12951 7.67172 1.38419C7.06162 2.04448 6.594 3.06932 6.4075 4.0581C5.826 4.23954 5.25715 4.41766 4.73342 4.58078C5.06405 3.02438 6.35743 0.688944 7.84007 0.645665Z"
+        fill="#95BF47"
+      />
+      <path
+        d="M9.276 6.43238L8.66142 8.75117C8.66142 8.75117 7.97598 8.43658 7.16342 8.48817C5.97181 8.56417 5.95916 9.32217 5.97126 9.51242C6.03618 10.5495 8.74125 10.7759 8.89308 13.2051C9.01242 15.1161 7.88796 16.4233 6.26779 16.5265C4.32303 16.6502 3.25246 15.4933 3.25246 15.4933L3.66452 13.7256C3.66452 13.7256 4.74224 14.5457 5.60487 14.4907C6.16821 14.4547 6.36957 13.9924 6.34921 13.6657C6.26448 12.3128 4.06172 12.3927 3.92253 10.17C3.80536 8.29951 5.02337 6.40408 7.71081 6.23318C8.74617 6.16604 9.276 6.43238 9.276 6.43238Z"
+        fill="white"
+      />
+      <path
+        d="M15.1536 3.68853C15.0815 3.68243 13.6698 3.66078 13.6698 3.66078C13.6698 3.66078 12.4893 2.50444 12.3726 2.38681C12.3292 2.34298 12.2703 2.32023 12.2087 2.31079L12.2093 19.9994L17.4999 18.6733C17.4999 18.6733 15.3412 3.95264 15.3274 3.85166C15.3137 3.75068 15.2257 3.69463 15.1536 3.68853Z"
+        fill="#5E8E3E"
+      />
+    </svg>
+  )
+}
+
+export default ShopifyIcon

package/src/components/VideoPlayer.tsx

@@ -0,0 +1,50 @@
+import React, {CSSProperties, useCallback, useEffect, MouseEvent} from 'react'
+import videojs, {VideoJsPlayer} from 'video.js'
+
+type PlayerKind = 'player' | 'diff'
+
+interface VideoProps {
+  src: string
+  kind: PlayerKind
+}
+
+const VideoPlayer = ({src, kind}: VideoProps) => {
+  const videoNode = React.useRef<HTMLVideoElement>(null)
+  const player = React.useRef<VideoJsPlayer>()
+
+  useEffect(() => {
+    player.current = videojs(videoNode.current ?? '', {
+      sources: [{src}],
+      controls: true,
+    })
+
+    player.current.src({src})
+  }, [src])
+
+  const stopPropagation = useCallback((event: MouseEvent) => {
+    event.stopPropagation()
+  }, [])
+
+  const className: Record<PlayerKind, string> = {
+    player: 'video-js vjs-16-9 vjs-big-play-centered',
+    diff: 'video-js vjs-layout-tiny vjs-fluid',
+  }
+
+  const style: CSSProperties = {position: 'relative'}
+
+  return (
+    <div>
+      <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
+      <div data-vjs-player>
+        <video
+          onClick={stopPropagation}
+          style={kind === 'diff' ? style : {}}
+          className={className[kind]}
+          ref={videoNode}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default VideoPlayer

package/src/datastores/shopify.ts

@@ -0,0 +1,66 @@
+import {BehaviorSubject, Observable, concat, defer} from 'rxjs'
+import {debounceTime, distinctUntilChanged, map, switchMap, withLatestFrom} from 'rxjs/operators'
+
+import axios from 'axios'
+
+type SearchSubject = BehaviorSubject<string>
+type CursorSubject = BehaviorSubject<any>
+
+const fetchSearch = (
+  projectId: string,
+  shop: string,
+  query: string,
+  cursor: string,
+  perPage: number
+): Observable<any> =>
+  defer(() =>
+    axios.get(
+      `https://${projectId}.api.sanity.io/v1/shopify/assets/production?shop=${shop}&query=${encodeURIComponent(
+        query
+      )}${cursor && `&cursor=${cursor}`}&limit=${perPage}`,
+      {
+        withCredentials: true,
+        method: 'GET',
+      }
+    )
+  ).pipe(map((result) => result.data))
+
+const fetchList = (
+  projectId: string,
+  shop: string,
+  cursor: string,
+  perPage: number
+): Observable<any> =>
+  defer(() =>
+    axios.get(
+      `https://${projectId}.api.sanity.io/v1/shopify/assets/production?shop=${shop}${
+        cursor && `&cursor=${cursor}`
+      }&limit=${perPage}`,
+      {
+        withCredentials: true,
+        method: 'GET',
+      }
+    )
+  ).pipe(map((result) => result.data))
+
+export const search = (
+  projectId: string,
+  shop: string,
+  query: SearchSubject,
+  cursor: CursorSubject,
+  resultsPerPage: number
+): Observable<any> => {
+  return concat(
+    query.pipe(
+      withLatestFrom(cursor),
+      debounceTime(500),
+      distinctUntilChanged(),
+      switchMap(([q, c]) => {
+        if (q) {
+          return fetchSearch(projectId, shop, q, c, resultsPerPage).pipe(distinctUntilChanged())
+        }
+        return fetchList(projectId, shop, c, resultsPerPage)
+      })
+    )
+  )
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+import {shopifyAssetSchema} from './schema/shopifyAssetSchema'
+import {definePlugin, ObjectDefinition} from 'sanity'
+import {PluginConfig} from './types'
+
+export * from './types'
+
+// enables autocompletion and validation of document options
+declare module 'sanity' {
+  export namespace Schema {
+    // here we type up our custom schema definition
+    export type ShopifyAssetTypeDef = Omit<ObjectDefinition, 'type' | 'fields'> & {
+      type: 'shopify.asset'
+      options: {
+        shopifyDomain: string
+      }
+    }
+    // Adds 'extension-type' as an intrinsic type
+    export interface IntrinsicTypeDefinition {
+      'shopify.asset': ShopifyAssetTypeDef
+    }
+  }
+}
+
+export const shopifyAssets = definePlugin<PluginConfig>((config) => {
+  return {
+    name: 'shopify-asset-schema',
+    schema: {
+      types: [shopifyAssetSchema(config)],
+    },
+  }
+})

package/src/schema/shopifyAssetSchema.ts

@@ -0,0 +1,118 @@
+/* eslint-disable */
+import ShopifyAssetInput from '../components/ShopifyAssetInput'
+import AssetDiff from '../components/AssetDiff'
+import AssetPreview from '../components/AssetPreview'
+import {defineField, defineType} from 'sanity'
+
+interface ObjectConfig {
+  shopifyDomain: string
+}
+
+declare module 'sanity' {
+  interface ObjectOptions {
+    shopifyDomain?: string
+  }
+}
+
+export const shopifyAssetSchema = (config: ObjectConfig) => {
+  const {shopifyDomain} = config
+
+  return defineType({
+    type: 'object',
+    name: 'shopify.asset',
+    title: 'Shopify Asset',
+    options: {
+      shopifyDomain,
+    },
+    fields: [
+      defineField({
+        type: 'string',
+        name: 'filename',
+      }),
+      defineField({
+        type: 'string',
+        name: 'id',
+      }),
+      defineField({
+        type: 'object',
+        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',
+          }),
+        ],
+      }),
+      defineField({
+        type: 'object',
+        name: 'preview',
+        fields: [
+          defineField({
+            type: 'number',
+            name: 'height',
+          }),
+          defineField({
+            type: 'number',
+            name: 'width',
+          }),
+          defineField({
+            type: 'url',
+            name: 'url',
+          }),
+        ],
+      }),
+      defineField({
+        type: 'string',
+        name: 'type',
+      }),
+      defineField({
+        type: 'url',
+        name: 'url',
+      }),
+    ],
+    ...({
+      components: {
+        input: ShopifyAssetInput,
+        diff: AssetDiff,
+        preview: AssetPreview,
+      },
+    } as {}),
+    preview: {
+      select: {
+        meta: 'meta',
+        preview: 'preview',
+        url: 'url',
+        filename: 'filename',
+        type: 'type',
+      },
+      prepare({url, meta, preview, filename, type}) {
+        return {
+          title: filename,
+          subtitle: type,
+          value: {
+            url,
+            meta,
+            preview,
+            filename,
+          },
+        }
+      },
+    },
+  })
+}

package/src/types.ts

@@ -0,0 +1,54 @@
+import {ObjectSchemaType} from 'sanity'
+
+export interface PluginConfig {
+  /**
+   * Your *.myshopify.com domain. Do not include https:// or any path.
+   */
+  shopifyDomain: string
+}
+
+export interface ObjectSchemaWithOptions extends ObjectSchemaType {
+  options: {
+    shopifyDomain: string
+  }
+}
+
+type PossibleFileTypes = 'file' | 'image' | 'video'
+
+export interface AssetPreviewImage {
+  height: number
+  url: string
+  width: number
+}
+
+export interface AssetMeta {
+  alt?: string
+  duration?: number
+  fileSize?: number
+  height?: number
+  width?: number
+}
+
+export interface ShopifyFile {
+  meta: AssetMeta
+  preview: AssetPreviewImage
+  id: string
+  type: PossibleFileTypes
+  url: string
+}
+
+export interface Asset extends ShopifyFile {
+  _type?: string
+  _key?: string
+  filename?: string
+}
+
+export interface PageInfo {
+  hasNextPage: boolean
+  cursor: string
+}
+
+export interface ShopifyAPIResponse {
+  pageInfo: PageInfo
+  assets: ShopifyFile[]
+}

package/src/utils/helpers.ts

@@ -0,0 +1 @@
+export const extractName = (name: string): string => name?.split('/')?.pop()?.split('?')[0] ?? ''

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})