sanity-plugin-shopify-assets 1.2.2 → 2.0.0

package/src/components/ShopifyAssetPicker.tsx

@@ -1,207 +0,0 @@
-import {BehaviorSubject, Subscription} from 'rxjs'
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {Card, Dialog, Flex, Inline, Spinner, Stack, Text, TextInput} from '@sanity/ui'
-import {PatchEvent, set, useProjectId, ObjectInputProps, useDataset, useClient} from 'sanity'
-import React, {useCallback, useEffect, useMemo, useState} from 'react'
-import PhotoAlbum from 'react-photo-album'
-import InfiniteScroll from 'react-infinite-scroll-component'
-
-import {search} from '../datastores/shopify'
-import type {Asset, PageInfo, ShopifyAPIResponse, ShopifyFile} from '../types'
-import DialogHeader from './DialogHeader'
-import File from './File'
-import {Search} from './ShopifyAssetInput.styled'
-
-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 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<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,
-      dataset,
-      shop: shopifyDomain,
-      query: searchSubject$,
-      cursor: cursorSubject$,
-      resultsPerPage: RESULTS_PER_PAGE,
-      token,
-    }).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, dataset, token])
-
-  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

@@ -1,22 +0,0 @@
-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

@@ -1,50 +0,0 @@
-import React, {type CSSProperties, type MouseEvent, useCallback, useEffect} from 'react'
-import videojs, {type 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

@@ -1,93 +0,0 @@
-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>
-
-interface fetchProps {
-  projectId: string
-  dataset: string
-  shop: string
-  query: SearchSubject
-  cursor: CursorSubject
-  resultsPerPage: number
-  token?: string
-}
-
-interface searchProps extends Omit<fetchProps, 'query' | 'cursor'> {
-  query: string
-  cursor: string
-}
-interface listProps extends Omit<fetchProps, 'query' | 'cursor'> {
-  cursor: string
-}
-
-const fetchSearch = (props: searchProps): Observable<any> => {
-  const {projectId, dataset, shop, query, cursor, resultsPerPage, token} = props
-
-  return defer(() => {
-    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',
-        headers: token
-          ? {
-              Authorization: `Bearer ${token}`,
-            }
-          : {},
-      }
-    )
-  }).pipe(map((result) => result.data))
-}
-
-const fetchList = (props: listProps): Observable<any> => {
-  const {projectId, dataset, shop, cursor, resultsPerPage, token} = props
-
-  return defer(() =>
-    axios.get(
-      `https://${projectId}.api.sanity.io/v1/shopify/assets/${dataset}?shop=${shop}${
-        cursor && `&cursor=${cursor}`
-      }&limit=${resultsPerPage}`,
-      {
-        withCredentials: true,
-        method: 'GET',
-        headers: token
-          ? {
-              Authorization: `Bearer ${token}`,
-            }
-          : {},
-      }
-    )
-  ).pipe(map((result) => result.data))
-}
-
-export const search = (props: fetchProps): Observable<any> => {
-  const {projectId, dataset, shop, query, cursor, resultsPerPage, token} = props
-
-  return concat(
-    query.pipe(
-      withLatestFrom(cursor),
-      debounceTime(500),
-      distinctUntilChanged(),
-      switchMap(([q, c]) => {
-        if (q) {
-          return fetchSearch({
-            projectId,
-            dataset,
-            shop,
-            query: q,
-            cursor: c,
-            resultsPerPage,
-            token,
-          }).pipe(distinctUntilChanged())
-        }
-        return fetchList({projectId, dataset, shop, cursor: c, resultsPerPage, token})
-      })
-    )
-  )
-}

package/src/index.ts

@@ -1,33 +0,0 @@
-import {definePlugin, type ObjectDefinition} from 'sanity'
-import {shopifyAssetSchema} from './schema/shopifyAssetSchema'
-import {shopifyAssetPreviewSchema} from './schema/shopifyAssetPreviewSchema'
-import {shopifyAssetMetadataSchema} from './schema/shopifyAssetMetadataSchema'
-import type {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: [shopifyAssetPreviewSchema, shopifyAssetMetadataSchema, shopifyAssetSchema(config)],
-    },
-  }
-})

package/src/sanity-ui.d.ts

@@ -1,6 +0,0 @@
-import {type Theme} from '@sanity/ui'
-
-declare module 'styled-components' {
-  // eslint-disable-next-line
-  interface DefaultTheme extends Theme {}
-}

package/src/schema/shopifyAssetMetadataSchema.ts

@@ -1,34 +0,0 @@
-import {defineField, defineType} from 'sanity'
-
-export 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',
-    }),
-  ],
-})

package/src/schema/shopifyAssetPreviewSchema.ts

@@ -1,24 +0,0 @@
-import {defineField, defineType} from 'sanity'
-
-export 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',
-    }),
-  ],
-})

package/src/schema/shopifyAssetSchema.ts

@@ -1,88 +0,0 @@
-/* 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',
-        title: 'Filename',
-      }),
-      defineField({
-        type: 'string',
-        name: 'id',
-        title: 'ID',
-      }),
-      defineField({
-        type: 'shopify.assetMetadata',
-        name: 'meta',
-        title: 'Metadata',
-      }),
-      defineField({
-        type: 'shopify.assetPreview',
-        name: 'preview',
-        title: 'Preview',
-      }),
-      defineField({
-        type: 'string',
-        name: 'type',
-        title: 'Type',
-      }),
-      defineField({
-        type: 'url',
-        name: 'url',
-        title: '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

@@ -1,54 +0,0 @@
-import type {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

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

package/v2-incompatible.js

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