sanity-plugin-shopify-assets 1.0.0

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "sanity-plugin-shopify-assets",
+  "version": "1.0.0",
+  "description": "Choose assets from your Shopify store in your Sanity Studio",
+  "keywords": [
+    "sanity",
+    "sanity-plugin",
+    "images",
+    "shopify",
+    "assets",
+    "source"
+  ],
+  "homepage": "https://github.com/sanity-io/sanity-plugin-shopify-assets#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/sanity-plugin-shopify-assets/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:sanity-io/sanity-plugin-shopify-assets.git"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.esm.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
+  "scripts": {
+    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "clean": "rimraf dist",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "prepublishOnly": "run-s build",
+    "watch": "pkg-utils watch --strict"
+  },
+  "dependencies": {
+    "@sanity/icons": "^2.2.2",
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/ui": "^1.0.14",
+    "axios": "^1.2.2",
+    "pretty-bytes": "^6.0.0",
+    "pretty-ms": "^8.0.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-photo-album": "^2.0.0",
+    "rxjs": "^7.8.0",
+    "video.js": "^7.20.3"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.4.2",
+    "@commitlint/config-conventional": "^17.4.2",
+    "@sanity/pkg-utils": "^2.2.1",
+    "@sanity/plugin-kit": "^3.1.3",
+    "@sanity/semantic-release-preset": "^3.0.2",
+    "@types/react": "^18.0.26",
+    "@types/styled-components": "^5.1.26",
+    "@types/video.js": "^7.3.50",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.2",
+    "prettier-plugin-packagejson": "^2.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rimraf": "^4.0.4",
+    "sanity": "^3.2.3",
+    "styled-components": "^5.3.6",
+    "typescript": "^4.9.4"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "sanity": "^3"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}

package/sanity.json

@@ -0,0 +1,8 @@
+{
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

package/src/components/AssetDiff.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {DiffFromTo} from 'sanity'
+import {Asset} from '../types'
+import {Flex, Text, Stack} from '@sanity/ui'
+
+type Props = {
+  value: Asset | undefined
+}
+
+const CloudinaryDiffPreview = ({value}: Props) => {
+  if (!value) {
+    return null
+  }
+
+  if (value?.preview?.url) {
+    return (
+      <Flex justify="center" align="center" height="fill" width="fill">
+        <Stack space={2}>
+          <img
+            alt="preview"
+            src={value?.preview?.url}
+            style={{
+              objectFit: 'contain',
+              margin: 'auto',
+              maxWidth: '100%',
+              maxHeight: '100%',
+            }}
+          />
+          <Text size={1}>{value.type.charAt(0).toUpperCase() + value.type.slice(1)}</Text>
+        </Stack>
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex justify="center" align="center" height="fill" width="fill">
+      <div>(no image)</div>
+    </Flex>
+  )
+}
+
+type DiffProps = {
+  diff: any
+  schemaType: any
+}
+
+const AssetDiff = ({diff, schemaType}: DiffProps) => {
+  return (
+    <DiffFromTo
+      diff={diff}
+      schemaType={schemaType}
+      previewComponent={CloudinaryDiffPreview}
+      layout={'grid'}
+    />
+  )
+}
+
+export default AssetDiff

package/src/components/AssetPreview.tsx

@@ -0,0 +1,82 @@
+import {Box, Flex, Text, Theme, useTheme} from '@sanity/ui'
+import {DurationLine, InfoLine} from './File.styled'
+
+import {Asset} from '../types'
+import React from 'react'
+import VideoPlayer from './VideoPlayer'
+import prettyBytes from 'pretty-bytes'
+import prettyMilliseconds from 'pretty-ms'
+import styled from 'styled-components'
+
+type SanityTheme = Theme['sanity']
+
+interface Style {
+  studioTheme: SanityTheme
+}
+
+interface ComponentProps {
+  value: Asset
+}
+
+export const StyledBox = styled(Box)`
+  background-color: ${({studioTheme}: Style) => studioTheme?.color?.card?.enabled?.bg2};
+  border: ${({studioTheme}: Style) => `1px solid ${studioTheme?.color?.card?.enabled?.border}`};
+  display: flex;
+  justify-content: center;
+  margin-bottom: ${({studioTheme}: Style) => studioTheme.space[4]};
+  position: relative;
+`
+
+const RenderAsset = ({value, url}: {value: Asset; url: string}) => {
+  switch (value.type) {
+    case 'video':
+      return <VideoPlayer src={url} kind="player" />
+    default:
+      return (
+        <Flex justify="center">
+          <img
+            alt="preview"
+            src={value?.preview?.url}
+            style={{
+              maxWidth: '100%',
+              height: 'auto',
+              display: 'block',
+              maxHeight: '30vh',
+            }}
+          />
+        </Flex>
+      )
+  }
+}
+
+const AssetPreview = ({value}: ComponentProps) => {
+  const url = value && value.url
+  const theme = useTheme().sanity
+
+  if (!value || !url) {
+    return null
+  }
+
+  const {filename, meta} = value
+  const {fileSize, duration} = meta
+
+  return (
+    <StyledBox studioTheme={theme} marginBottom={2}>
+      <RenderAsset value={value} url={url} />
+      <InfoLine padding={2} radius={2} margin={2} studioTheme={theme}>
+        <Text size={1} title={`Select ${filename}`}>
+          {filename} {fileSize && `(${prettyBytes(fileSize)})`}
+        </Text>
+      </InfoLine>
+      {duration && (
+        <DurationLine padding={2} radius={2} margin={2} studioTheme={theme}>
+          <Text size={1} title={`Video duration: ${filename}`}>
+            {prettyMilliseconds(duration, {colonNotation: true, secondsDecimalDigits: 0})}
+          </Text>
+        </DurationLine>
+      )}
+    </StyledBox>
+  )
+}
+
+export default AssetPreview

package/src/components/DialogHeader.tsx

@@ -0,0 +1,45 @@
+import {useCallback} from 'react'
+import {Box, Flex, Button} from '@sanity/ui'
+import {LaunchIcon} from '@sanity/icons'
+import React from 'react'
+
+interface Props {
+  title: string
+  shopifyDomain: string
+}
+
+const DialogHeader = (props: Props) => {
+  const {title, shopifyDomain} = props
+
+  const handleOpenInNewTab = useCallback(() => {
+    window.open(`https://${shopifyDomain}/admin/settings/files`, '_blank')
+  }, [shopifyDomain])
+
+  return (
+    <Flex align="center">
+      {title}
+      {/*
+        HACK: Sanity UI will attempt to focus the first 'focusable' descendant of any dialog.
+        Typically this is fine, but since our first focusable element is a button with a tooltip, this
+        default behaviour causes the tooltip to appear whenever the dialog is opened, which we don't want!
+
+        To get around this, we include a pseudo-hidden input to ensure our tooltip-enabled button remains
+        unfocused on initial mount.
+        */}
+      <input style={{opacity: 0}} tabIndex={-1} type="button" />
+      <Box style={{position: 'absolute', right: '-1.5em'}}>
+        <Box className="button-large">
+          <Button
+            fontSize={1}
+            icon={LaunchIcon}
+            mode="bleed"
+            onClick={handleOpenInNewTab}
+            text="Add New"
+          />
+        </Box>
+      </Box>
+    </Flex>
+  )
+}
+
+export default DialogHeader

package/src/components/File.styled.tsx

@@ -0,0 +1,66 @@
+import {Card, Theme} from '@sanity/ui'
+import styled from 'styled-components'
+
+type SanityTheme = Theme['sanity']
+
+interface Style {
+  studioTheme: SanityTheme
+}
+
+export const Root = styled.div`
+  overflow: hidden;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  background-clip: border-box;
+  background-size: cover;
+  background-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.bg2};
+  position: relative;
+  outline: none !important;
+  border: ${({studioTheme}: Style) => `1px solid ${studioTheme.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);
+  }
+`
+
+export const InfoLine = styled(Card)`
+  ${({studioTheme}: Style) => `
+    --infoline-fg: ${studioTheme.color.card.enabled.fg};
+    --infoline-bg: ${studioTheme.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);
+  }
+`
+
+export const DurationLine = styled(Card)`
+  ${({studioTheme}: Style) => `
+    --durationline-fg: ${studioTheme.color.card.enabled.bg};
+    --durationline-bg: ${studioTheme.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);
+  }
+`

package/src/components/File.tsx

@@ -0,0 +1,56 @@
+import {Asset, ShopifyFile} from '../types'
+import {DurationLine, InfoLine, Root} from './File.styled'
+import React, {useCallback, useRef} from 'react'
+import {Text, useTheme} from '@sanity/ui'
+
+import {extractName} from '../utils/helpers'
+import prettyBytes from 'pretty-bytes'
+import prettyMilliseconds from 'pretty-ms'
+
+type Props = {
+  data: ShopifyFile
+  width: number
+  height: number
+  onClick: (file: Asset) => void
+}
+
+export default function File(props: Props) {
+  const {onClick, data, width, height} = props
+  const rootElm = useRef<HTMLDivElement>(null)
+
+  const {preview, meta} = data
+  const filename = extractName(data.url)
+
+  const handleClick = useCallback(() => {
+    onClick({...data, filename})
+  }, [onClick, data, filename])
+
+  const theme = useTheme().sanity
+  return (
+    <Root
+      ref={rootElm}
+      studioTheme={theme}
+      title={`${filename}`}
+      tabIndex={0}
+      style={{
+        width: `${width}px`,
+        height: `${height}px`,
+        backgroundImage: `url("${preview?.url}")`,
+      }}
+      onClick={handleClick}
+    >
+      <InfoLine padding={2} radius={2} margin={2} studioTheme={theme}>
+        <Text size={1} title={`Select ${filename}`}>
+          {filename} {meta.fileSize && `(${prettyBytes(meta.fileSize)})`}
+        </Text>
+      </InfoLine>
+      {meta.duration && (
+        <DurationLine padding={2} radius={2} margin={2} studioTheme={theme}>
+          <Text size={1} title={`Video duration: ${filename}`}>
+            {prettyMilliseconds(meta.duration, {colonNotation: true, secondsDecimalDigits: 0})}
+          </Text>
+        </DurationLine>
+      )}
+    </Root>
+  )
+}

package/src/components/ShopifyAssetInput.styled.tsx

@@ -0,0 +1,13 @@
+import {Stack} from '@sanity/ui'
+import styled from 'styled-components'
+
+export const Search = styled(Stack)`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`
+
+export const Scroller = styled.div`
+  overflow-y: auto;
+  max-height: 80vh;
+`

package/src/components/ShopifyAssetInput.tsx

@@ -0,0 +1,84 @@
+import {Button, Card, Flex, Grid, Inline, Stack, Text} from '@sanity/ui'
+import {ObjectInputProps, PatchEvent, unset} from 'sanity'
+import {useCallback, useState} from 'react'
+
+import {Asset} from '../types'
+import AssetPreview from './AssetPreview'
+import {ErrorOutlineIcon} from '@sanity/icons'
+import React from 'react'
+import ShopifyAssetPicker from './ShopifyAssetPicker'
+import ShopifyIcon from './ShopifyIcon'
+
+export default function ShopifyAssetInput(props: ObjectInputProps) {
+  const {onChange, readOnly, value, schemaType} = props
+  const {options} = schemaType
+  const {shopifyDomain} = options
+
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const removeValue = useCallback(() => {
+    onChange(PatchEvent.from([unset()]))
+  }, [onChange])
+
+  const onOpen = useCallback(() => {
+    setDialogOpen(true)
+  }, [setDialogOpen])
+
+  const onClose = useCallback(() => {
+    setDialogOpen(false)
+  }, [setDialogOpen])
+
+  if (!shopifyDomain) {
+    return (
+      <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}>
+              You need to configure your *.myshopify.com domain in the plugin / field options to
+              enable Shopify Assets.
+            </Text>
+          </Inline>
+        </Flex>
+      </Card>
+    )
+  }
+
+  return (
+    <>
+      {dialogOpen && (
+        <ShopifyAssetPicker
+          {...props}
+          shopifyDomain={shopifyDomain}
+          isOpen={dialogOpen}
+          onClose={onClose}
+          value={value as Asset}
+        />
+      )}
+      <Stack>
+        <AssetPreview value={value as Asset} />
+
+        <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
+          <Button
+            disabled={readOnly}
+            mode="ghost"
+            icon={ShopifyIcon}
+            title="Select an asset"
+            onClick={onOpen}
+            text="Select…"
+          />
+          <Button
+            disabled={readOnly || !value}
+            tone="critical"
+            mode="ghost"
+            title="Remove asset"
+            text="Remove"
+            onClick={removeValue}
+          />
+        </Grid>
+      </Stack>
+    </>
+  )
+}