@sanity/cli 6.0.0-alpha.5 → 6.0.0-alpha.7

package/templates/shopify/utils/getPriceRange.ts

@@ -0,0 +1,24 @@
+import {DEFAULT_CURRENCY_CODE} from '../constants'
+
+type PriceObject = {
+  minVariantPrice: number
+  maxVariantPrice: number
+}
+
+const formatNumber = (val: number) => {
+  return new Intl.NumberFormat('en', {
+    currency: DEFAULT_CURRENCY_CODE,
+    style: 'currency',
+  }).format(val)
+}
+
+export const getPriceRange = (price: PriceObject) => {
+  if (!price || typeof price?.minVariantPrice === 'undefined') {
+    return 'No price found'
+  }
+  if (price.maxVariantPrice && price.minVariantPrice !== price.maxVariantPrice) {
+    return `${formatNumber(price.minVariantPrice)} – ${formatNumber(price.maxVariantPrice)}`
+  }
+
+  return formatNumber(price.minVariantPrice)
+}

package/templates/shopify/utils/shopifyUrls.ts

@@ -0,0 +1,22 @@
+import {SHOPIFY_STORE_ID} from '../constants'
+
+export const collectionUrl = (collectionId: number) => {
+  if (!SHOPIFY_STORE_ID) {
+    return null
+  }
+  return `https://admin.shopify.com/store/${SHOPIFY_STORE_ID}/collections/${collectionId}`
+}
+
+export const productUrl = (productId: number) => {
+  if (!SHOPIFY_STORE_ID) {
+    return null
+  }
+  return `https://admin.shopify.com/store/${SHOPIFY_STORE_ID}/products/${productId}`
+}
+
+export const productVariantUrl = (productId: number, productVariantId: number) => {
+  if (!SHOPIFY_STORE_ID) {
+    return null
+  }
+  return `https://admin.shopify.com/store/${SHOPIFY_STORE_ID}/products/${productId}/variants/${productVariantId}`
+}

package/templates/shopify/utils/validateSlug.ts

@@ -0,0 +1,18 @@
+import {SlugRule} from 'sanity'
+
+const MAX_LENGTH = 96
+
+export const validateSlug = (Rule: SlugRule) => {
+  return Rule.required().custom((value) => {
+    const currentSlug = value && value.current
+    if (!currentSlug) {
+      return true
+    }
+
+    if (currentSlug.length >= MAX_LENGTH) {
+      return `Must be less than ${MAX_LENGTH} characters`
+    }
+
+    return true
+  })
+}

package/templates/shopify-online-storefront/README.md

@@ -0,0 +1,54 @@
+# Sanity Studio for Shopify Storefronts
+
+## About
+
+This Sanity Studio is configured for Shopify storefronts that use the official [Sanity Connect app](https://apps.shopify.com/sanity-connect) to sync content from Sanity to Shopify.
+
+It contains examples of customizing your [structure](https://www.sanity.io/docs/structure-builder), [document actions](https://www.sanity.io/docs/document-actions) and [input components](https://www.sanity.io/docs/custom-input-widgets).
+
+If you're building a headless storefront, you may want to check out our [starter Studio for headless storefronts](https://github.com/sanity-io/sanity-shopify-studio), which has a richer content model.
+
+## Features
+
+This studio comes preconfigured with Shopify-friendly content schema types and a whole host of customizations to make managing Shopify data in your Sanity studio easier. It also comes bundled with our [Shopify asset plugin](https://github.com/sanity-io/sanity-plugin-shopify-assets), which enables you to choose assets from your Shopify store in your Sanity Studio.
+
+Once you have sync'd content to your Shopify store, you can follow our documentation on how to [display content in Liquid](https://www.sanity.io/docs/displaying-sanity-content-in-liquid).
+
+## Setup
+
+If you're reading this on GitHub, chances are you haven't initialized the studio locally yet. To do so, run the following shell command:
+
+```sh
+# run a one-off initializing script:
+npx @sanity/cli init --template shopify-online-storefront
+```
+
+Make sure to run the tagged release! (`@sanity/cli`)
+
+You'll need install [Sanity Connect](https://apps.shopify.com/sanity-connect) to your Shopify store, and [enable the sync to your Shopify store](https://www.sanity.io/docs/sanity-connect-for-shopify#1bcb10c66c21). to update `SHOPIFY_STORE_ID` in `constants.ts` to reflect your Shopify domain.
+
+## Local Development
+
+### Starting development server
+
+```sh
+npm run dev
+```
+
+### Deploying the studio
+
+```sh
+npm run deploy
+```
+
+### Upgrading Sanity Studio
+
+```sh
+npm run upgrade
+```
+
+If you have the [Sanity CLI](https://www.sanity.io/docs/cli) installed, you can also run this with `sanity start|deploy|upgrade`. It comes with additional useful functionality.
+
+## License
+
+This repository is published under the [MIT](license) license.

package/templates/shopify-online-storefront/components/icons/Shopify.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/templates/shopify-online-storefront/components/inputs/CollectionHidden.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import {WarningOutlineIcon} from '@sanity/icons'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+
+export default function CollectionHiddenInput() {
+  return (
+    <Card padding={4} radius={2} shadow={1} tone="critical">
+      <Flex align="flex-start">
+        <Text>
+          <WarningOutlineIcon />
+        </Text>
+        <Box flex={1} marginLeft={3}>
+          <Box>
+            <Text weight="semibold">This collection is hidden</Text>
+          </Box>
+          <Stack marginTop={4} space={2}>
+            <Text size={1}>It has been deleted from Shopify.</Text>
+          </Stack>
+        </Box>
+      </Flex>
+    </Card>
+  )
+}

package/templates/shopify-online-storefront/components/inputs/PlaceholderString.tsx

@@ -0,0 +1,25 @@
+import {
+  type SanityDocument,
+  type StringInputProps,
+  type StringSchemaType,
+  useFormValue,
+} from 'sanity'
+import get from 'lodash.get'
+
+type Props = StringInputProps<StringSchemaType & {options?: {field?: string}}>
+
+const PlaceholderStringInput = (props: Props) => {
+  const {schemaType} = props
+
+  const path = schemaType?.options?.field
+  const doc = useFormValue([]) as SanityDocument
+
+  const proxyValue = path ? (get(doc, path) as string) : ''
+
+  return props.renderDefault({
+    ...props,
+    elementProps: {placeholder: proxyValue, ...props.elementProps},
+  })
+}
+
+export default PlaceholderStringInput

package/templates/shopify-online-storefront/components/inputs/ProductHidden.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import {WarningOutlineIcon} from '@sanity/icons'
+import {type StringFieldProps, useFormValue} from 'sanity'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+
+import {productUrl} from '../../utils/shopifyUrls'
+
+type Store = {
+  id: number
+  status: string
+  isDeleted: boolean
+}
+
+export default function ProductHiddenInput(props: StringFieldProps) {
+  const store: Store = useFormValue(['store']) as Store
+
+  if (!store) {
+    return <></>
+  }
+
+  const shopifyProductUrl = productUrl(store?.id)
+  const isActive = store?.status === 'active'
+  const isDeleted = store?.isDeleted
+
+  let message
+  if (!isActive) {
+    message = (
+      <>
+        It does not have an <code>active</code> status in Shopify.
+      </>
+    )
+  }
+  if (isDeleted) {
+    message = 'It has been deleted from Shopify.'
+  }
+
+  return (
+    <Card padding={4} radius={2} shadow={1} tone="critical">
+      <Flex align="flex-start">
+        <Text size={2}>
+          <WarningOutlineIcon />
+        </Text>
+        <Box flex={1} marginLeft={3}>
+          <Box>
+            <Text size={2} weight="semibold">
+              This product is hidden
+            </Text>
+          </Box>
+          <Stack marginTop={4} space={2}>
+            <Text size={1}>{message}</Text>
+          </Stack>
+          {!isDeleted && shopifyProductUrl && (
+            <Box marginTop={4}>
+              <Text size={1}>
+                →{' '}
+                <a href={shopifyProductUrl} target="_blank" rel="noreferrer">
+                  View this product on Shopify
+                </a>
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Flex>
+    </Card>
+  )
+}

package/templates/shopify-online-storefront/components/inputs/ProductVariantHidden.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {WarningOutlineIcon} from '@sanity/icons'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+
+export default function ProductVariantHiddenInput() {
+  return (
+    <Card padding={4} radius={2} shadow={1} tone="critical">
+      <Flex align="flex-start">
+        <Text size={2}>
+          <WarningOutlineIcon />
+        </Text>
+        <Box flex={1} marginLeft={3}>
+          <Box>
+            <Text size={2} weight="semibold">
+              This variant is hidden
+            </Text>
+          </Box>
+          <Stack marginTop={4} space={2}>
+            <Text size={1}>It has been deleted from Shopify</Text>
+          </Stack>
+        </Box>
+      </Flex>
+    </Card>
+  )
+}

package/templates/shopify-online-storefront/components/inputs/ProxyString.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import {LockIcon} from '@sanity/icons'
+import {Box, Text, TextInput, Tooltip} from '@sanity/ui'
+import {
+  type SanityDocument,
+  type StringInputProps,
+  type StringSchemaType,
+  useFormValue,
+} from 'sanity'
+import get from 'lodash.get'
+
+type Props = StringInputProps<StringSchemaType & {options?: {field?: string}}>
+
+const ProxyString = (props: Props) => {
+  const {schemaType} = props
+
+  const path = schemaType?.options?.field
+  const doc = useFormValue([]) as SanityDocument
+
+  const proxyValue = path ? (get(doc, path) as string) : ''
+
+  return (
+    <Tooltip
+      content={
+        <Box padding={2}>
+          <Text muted size={1}>
+            This value is set in Shopify (<code>{path}</code>)
+          </Text>
+        </Box>
+      }
+      portal
+    >
+      <TextInput iconRight={LockIcon} readOnly={true} value={proxyValue} />
+    </Tooltip>
+  )
+}
+
+export default ProxyString

package/templates/shopify-online-storefront/components/media/ShopifyDocumentStatus.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import {CloseIcon, ImageIcon, LinkRemovedIcon} from '@sanity/icons'
+import {forwardRef, useState} from 'react'
+
+type Props = {
+  isActive?: boolean
+  isDeleted: boolean
+  type: 'collection' | 'product' | 'productVariant'
+  url: string
+  title: string
+}
+
+const ShopifyDocumentStatus = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const {isActive, isDeleted, title, type, url} = props
+
+  const [imageVisible, setImageVisible] = useState(true)
+
+  // Hide image on error / 404
+  const handleImageError = () => setImageVisible(false)
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        alignItems: 'center',
+        borderRadius: 'inherit',
+        display: 'flex',
+        height: '100%',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        width: '100%',
+      }}
+    >
+      {imageVisible && url ? (
+        <img
+          onError={handleImageError}
+          src={`${url}&width=400`}
+          style={{
+            height: '100%',
+            left: 0,
+            objectFit: 'contain',
+            position: 'absolute',
+            top: 0,
+            width: '100%',
+          }}
+          alt={`${title} preview`}
+        />
+      ) : (
+        <ImageIcon style={{position: 'absolute'}} />
+      )}
+
+      {/* Item has been deleted */}
+      {isDeleted ? (
+        <CloseIcon
+          style={{
+            background: 'rgba(255, 0, 0, 0.7)',
+            color: 'rgba(255, 255, 255, 0.85)',
+            height: '100%',
+            position: 'relative',
+            width: '100%',
+          }}
+        />
+      ) : (
+        <>
+          {/* Products only: item is no longer active */}
+          {type === 'product' && !isActive && (
+            <LinkRemovedIcon
+              style={{
+                background: 'rgba(0, 0, 0, 0.7)',
+                color: 'rgba(255, 255, 255, 0.85)',
+                height: '100%',
+                position: 'relative',
+                width: '100%',
+              }}
+            />
+          )}
+        </>
+      )}
+    </div>
+  )
+})
+
+export default ShopifyDocumentStatus

package/templates/shopify-online-storefront/constants.ts

@@ -0,0 +1,18 @@
+// Currency code (ISO 4217) to use when displaying prices in the studio
+// https://en.wikipedia.org/wiki/ISO_4217
+export const DEFAULT_CURRENCY_CODE = 'USD'
+
+// Document types which:
+// - cannot be created in the 'new document' menu
+// - cannot be duplicated, unpublished or deleted
+// - are from the Sanity Connect Shopify app - and can be linked to on Shopify
+export const SHOPIFY_DOCUMENT_TYPES = ['product', 'productVariant', 'collection']
+
+// API version to use when using the Sanity client within the studio
+// https://www.sanity.io/help/studio-client-specify-api-version
+export const SANITY_API_VERSION = '2023-02-07'
+
+// Your Shopify store ID.
+// This is your unique store URL (e.g. 'my-store-name.myshopify.com').
+// Set this to enable helper links in document status banners and shortcut links on products and collections.
+export const SHOPIFY_STORE_ID = '*.myshopify.com'

package/templates/shopify-online-storefront/plugins/shopifyDocumentActions/index.ts

@@ -0,0 +1,45 @@
+import {
+  definePlugin,
+  DocumentActionComponent,
+  DocumentActionsResolver,
+  NewDocumentOptionsResolver,
+} from 'sanity'
+import shopifyDelete from './shopifyDelete'
+import shopifyLink from './shopifyLink'
+
+import {SHOPIFY_DOCUMENT_TYPES} from '../../constants'
+
+export const resolveDocumentActions: DocumentActionsResolver = (prev, {schemaType}) => {
+  if (SHOPIFY_DOCUMENT_TYPES.includes(schemaType)) {
+    prev = prev.filter(
+      (previousAction: DocumentActionComponent) =>
+        previousAction.action === 'publish' ||
+        previousAction.action === 'unpublish' ||
+        previousAction.action === 'discardChanges',
+    )
+
+    return [
+      ...prev,
+      shopifyDelete as DocumentActionComponent,
+      shopifyLink as DocumentActionComponent,
+    ]
+  }
+
+  return prev
+}
+
+export const resolveNewDocumentOptions: NewDocumentOptionsResolver = (prev) => {
+  const options = prev.filter((previousOption) => {
+    return !SHOPIFY_DOCUMENT_TYPES.includes(previousOption.templateId)
+  })
+
+  return options
+}
+
+export const shopifyDocumentActions = definePlugin({
+  name: 'custom-document-actions',
+  document: {
+    actions: resolveDocumentActions,
+    newDocumentOptions: resolveNewDocumentOptions,
+  },
+})

package/templates/shopify-online-storefront/plugins/shopifyDocumentActions/shopifyDelete.tsx

@@ -0,0 +1,144 @@
+import React, {useState} from 'react'
+import {TrashIcon} from '@sanity/icons'
+import {Stack, Text, useToast} from '@sanity/ui'
+import {
+  type DocumentActionDescription,
+  type DocumentActionConfirmDialogProps,
+  useClient,
+} from 'sanity'
+import {useRouter} from 'sanity/router'
+import type {ShopifyDocument, ShopifyDocumentActionProps} from './types'
+import {SANITY_API_VERSION} from '../../constants'
+
+export default (props: ShopifyDocumentActionProps): DocumentActionDescription | undefined => {
+  const {
+    draft,
+    type,
+    published,
+  }: {
+    draft: ShopifyDocument
+    published: ShopifyDocument
+    type: string
+  } = props
+
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const router = useRouter()
+  const toast = useToast()
+  const client = useClient({apiVersion: SANITY_API_VERSION})
+
+  let dialog: DocumentActionConfirmDialogProps | null = null
+
+  if (type === 'product') {
+    dialog = {
+      message: (
+        <Stack space={4}>
+          <Text>Delete the current product and all associated variants in your dataset.</Text>
+          <Text weight="medium">No content on Shopify will be deleted.</Text>
+        </Stack>
+      ),
+      onCancel: () => setDialogOpen(false),
+      onConfirm: async () => {
+        const productId = published?.store?.id
+
+        // Find product variant documents with matching Shopify Product ID
+        let productVariantIds: string[] = []
+        if (productId) {
+          productVariantIds = await client.fetch(
+            `*[
+                _type == "productVariant"
+                && store.productId == $productId
+              ]._id`,
+            {productId},
+          )
+        }
+
+        // Delete current document (including draft)
+        const transaction = client.transaction()
+        if (published?._id) {
+          transaction.delete(published._id)
+        }
+        if (draft?._id) {
+          transaction.delete(draft._id)
+        }
+
+        // Delete all product variants with matching IDs
+        productVariantIds?.forEach((documentId) => {
+          if (documentId) {
+            transaction.delete(documentId)
+            transaction.delete(`drafts.${documentId}`)
+          }
+        })
+
+        try {
+          await transaction.commit()
+          // Navigate back to products root
+          router.navigateUrl({path: '/structure/products'})
+        } catch (err) {
+          let message = 'Unknown Error'
+          if (err instanceof Error) message = err.message
+
+          toast.push({
+            status: 'error',
+            title: message,
+          })
+        } finally {
+          setDialogOpen(false)
+        }
+      },
+      type: 'confirm',
+    }
+  }
+
+  if (type === 'collection') {
+    dialog = {
+      message: (
+        <Stack space={4}>
+          <Text>Delete the current collection in your dataset.</Text>
+          <Text weight="medium">No content on Shopify will be deleted.</Text>
+        </Stack>
+      ),
+      onCancel: () => setDialogOpen(false),
+      onConfirm: async () => {
+        // Delete current document (including draft)
+        const transaction = client.transaction()
+        if (published?._id) {
+          transaction.delete(published._id)
+        }
+        if (draft?._id) {
+          transaction.delete(draft._id)
+        }
+
+        try {
+          await transaction.commit()
+          // Navigate back to collections root
+          router.navigateUrl({path: '/structure/collections'})
+        } catch (err) {
+          let message = 'Unknown Error'
+          if (err instanceof Error) message = err.message
+
+          toast.push({
+            status: 'error',
+            title: message,
+          })
+        } finally {
+          setDialogOpen(false)
+        }
+      },
+      type: 'confirm',
+    }
+  }
+
+  if (!dialog) {
+    return
+  }
+
+  return {
+    tone: 'critical',
+    dialog: dialogOpen && dialog,
+    icon: TrashIcon,
+    label: 'Delete',
+    onHandle: () => setDialogOpen(true),
+    shortcut: 'Ctrl+Alt+D',
+  }
+}

package/templates/shopify-online-storefront/plugins/shopifyDocumentActions/shopifyLink.ts

@@ -0,0 +1,39 @@
+import {EarthGlobeIcon} from '@sanity/icons'
+import {type DocumentActionDescription} from 'sanity'
+import {collectionUrl, productUrl, productVariantUrl} from '../../utils/shopifyUrls'
+import type {ShopifyDocument, ShopifyDocumentActionProps} from './types'
+
+export default (props: ShopifyDocumentActionProps): DocumentActionDescription | undefined => {
+  const {published, type}: {published: ShopifyDocument; type: string} = props
+
+  if (!published || published?.store?.isDeleted) {
+    return
+  }
+
+  let url: string | null = null
+
+  if (type === 'collection') {
+    url = collectionUrl(published?.store?.id)
+  }
+  if (type === 'product') {
+    url = productUrl(published?.store?.id)
+  }
+  if (type === 'productVariant') {
+    url = productVariantUrl(published?.store?.productId, published?.store?.id)
+  }
+
+  if (!url) {
+    return
+  }
+
+  if (published && !published?.store?.isDeleted) {
+    return {
+      label: 'Edit in Shopify',
+      icon: EarthGlobeIcon,
+      onHandle: () => {
+        url ? window.open(url) : void 'No URL'
+      },
+      shortcut: 'Ctrl+Alt+E',
+    }
+  }
+}

package/templates/shopify-online-storefront/plugins/shopifyDocumentActions/types.ts

@@ -0,0 +1,14 @@
+import {type DocumentActionProps, type SanityDocument} from 'sanity'
+
+export type ShopifyDocument = SanityDocument & {
+  store: {
+    id: number
+    productId: number
+    isDeleted: boolean
+  }
+}
+
+export interface ShopifyDocumentActionProps extends DocumentActionProps {
+  published: ShopifyDocument
+  draft: ShopifyDocument
+}