@sanity/cli 6.0.0-alpha.4 → 6.0.0-alpha.6

package/templates/shopify/plugins/customDocumentActions/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/plugins/customDocumentActions/shopifyLink.ts

@@ -0,0 +1,39 @@
+import {EarthGlobeIcon} from '@sanity/icons'
+import {collectionUrl, productUrl, productVariantUrl} from '../../utils/shopifyUrls'
+import {type DocumentActionDescription} from 'sanity'
+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/plugins/customDocumentActions/types.ts

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

package/templates/shopify/schemaTypes/documents/collection.tsx

@@ -0,0 +1,142 @@
+import {defineArrayMember, defineField, defineType} from 'sanity'
+import {PackageIcon} from '@sanity/icons'
+import {getExtension} from '@sanity/asset-utils'
+import pluralize from 'pluralize-esm'
+import CollectionHiddenInput from '../../components/inputs/CollectionHidden'
+import ShopifyDocumentStatus from '../../components/media/ShopifyDocumentStatus'
+import {GROUPS} from '../../constants'
+
+export const collectionType = defineType({
+  name: 'collection',
+  title: 'Collection',
+  type: 'document',
+  icon: PackageIcon,
+  groups: GROUPS,
+  fields: [
+    defineField({
+      name: 'hidden',
+      type: 'string',
+      components: {
+        field: CollectionHiddenInput,
+      },
+      hidden: ({parent}) => {
+        const isDeleted = parent?.store?.isDeleted
+        return !isDeleted
+      },
+    }),
+    defineField({
+      name: 'titleProxy',
+      title: 'Title',
+      type: 'proxyString',
+      options: {field: 'store.title'},
+    }),
+    defineField({
+      name: 'slugProxy',
+      title: 'Slug',
+      type: 'proxyString',
+      options: {field: 'store.slug.current'},
+    }),
+    defineField({
+      name: 'colorTheme',
+      type: 'reference',
+      to: [{type: 'colorTheme'}],
+      group: 'theme',
+    }),
+    defineField({
+      name: 'vector',
+      title: 'Vector artwork',
+      type: 'image',
+      description: 'Displayed in collection links using color theme',
+      options: {
+        accept: 'image/svg+xml',
+      },
+      group: 'theme',
+      validation: (Rule) =>
+        Rule.custom((image) => {
+          if (!image?.asset?._ref) {
+            return true
+          }
+
+          const format = getExtension(image.asset._ref)
+
+          if (format !== 'svg') {
+            return 'Image must be an SVG'
+          }
+          return true
+        }),
+    }),
+    defineField({
+      name: 'showHero',
+      type: 'boolean',
+      description: 'If disabled, page title will be displayed instead',
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'hero',
+      type: 'hero',
+      hidden: ({document}) => !document?.showHero,
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'modules',
+      type: 'array',
+      description: 'Editorial modules to associate with this collection',
+      of: [
+        defineArrayMember({type: 'callout'}),
+        defineArrayMember({type: 'callToAction'}),
+        defineArrayMember({type: 'image'}),
+        defineArrayMember({type: 'instagram'}),
+      ],
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'store',
+      title: 'Shopify',
+      type: 'shopifyCollection',
+      description: 'Collection data from Shopify (read-only)',
+      group: 'shopifySync',
+    }),
+    defineField({
+      name: 'seo',
+      title: 'SEO',
+      type: 'seo',
+      group: 'seo',
+    }),
+  ],
+  orderings: [
+    {
+      name: 'titleAsc',
+      title: 'Title (A-Z)',
+      by: [{field: 'store.title', direction: 'asc'}],
+    },
+    {
+      name: 'titleDesc',
+      title: 'Title (Z-A)',
+      by: [{field: 'store.title', direction: 'desc'}],
+    },
+  ],
+  preview: {
+    select: {
+      imageUrl: 'store.imageUrl',
+      isDeleted: 'store.isDeleted',
+      rules: 'store.rules',
+      title: 'store.title',
+    },
+    prepare({imageUrl, isDeleted, rules, title}) {
+      const ruleCount = rules?.length || 0
+
+      return {
+        media: (
+          <ShopifyDocumentStatus
+            isDeleted={isDeleted}
+            type="collection"
+            url={imageUrl}
+            title={title}
+          />
+        ),
+        subtitle: ruleCount > 0 ? `Automated (${pluralize('rule', ruleCount, true)})` : 'Manual',
+        title,
+      }
+    },
+  },
+})

package/templates/shopify/schemaTypes/documents/colorTheme.tsx

@@ -0,0 +1,44 @@
+import {IceCreamIcon} from '@sanity/icons'
+import {defineField, defineType} from 'sanity'
+
+import ColorTheme from '../../components/media/ColorTheme'
+
+export const colorThemeType = defineType({
+  name: 'colorTheme',
+  title: 'Color theme',
+  type: 'document',
+  icon: IceCreamIcon,
+  fields: [
+    defineField({
+      name: 'title',
+      type: 'string',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'text',
+      type: 'color',
+      options: {disableAlpha: true},
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'background',
+      type: 'color',
+      options: {disableAlpha: true},
+      validation: (Rule) => Rule.required(),
+    }),
+  ],
+  preview: {
+    select: {
+      backgroundColor: 'background.hex',
+      textColor: 'text.hex',
+      title: 'title',
+    },
+    prepare({backgroundColor, textColor, title}) {
+      return {
+        media: <ColorTheme background={backgroundColor} text={textColor} />,
+        subtitle: `${textColor || '(No color)'} / ${backgroundColor || '(No color)'}`,
+        title,
+      }
+    },
+  },
+})

package/templates/shopify/schemaTypes/documents/page.ts

@@ -0,0 +1,70 @@
+import {DocumentIcon} from '@sanity/icons'
+import {defineField} from 'sanity'
+
+import {validateSlug} from '../../utils/validateSlug'
+import {GROUPS} from '../../constants'
+
+export const pageType = defineField({
+  name: 'page',
+  title: 'Page',
+  type: 'document',
+  icon: DocumentIcon,
+  groups: GROUPS,
+  fields: [
+    defineField({
+      name: 'title',
+      group: 'editorial',
+      type: 'string',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'slug',
+      group: 'editorial',
+      type: 'slug',
+      options: {source: 'title'},
+      validation: validateSlug,
+    }),
+    defineField({
+      name: 'colorTheme',
+      type: 'reference',
+      to: [{type: 'colorTheme'}],
+      group: 'theme',
+    }),
+    defineField({
+      name: 'showHero',
+      type: 'boolean',
+      description: 'If disabled, page title will be displayed instead',
+      initialValue: false,
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'hero',
+      type: 'hero',
+      hidden: ({document}) => !document?.showHero,
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'body',
+      type: 'portableText',
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'seo',
+      title: 'SEO',
+      type: 'seo',
+      group: 'seo',
+    }),
+  ],
+  preview: {
+    select: {
+      seoImage: 'seo.image',
+      title: 'title',
+    },
+    prepare({seoImage, title}) {
+      return {
+        media: seoImage ?? DocumentIcon,
+        title,
+      }
+    },
+  },
+})

package/templates/shopify/schemaTypes/documents/product.tsx

@@ -0,0 +1,132 @@
+import {TagIcon} from '@sanity/icons'
+import pluralize from 'pluralize-esm'
+import ProductHiddenInput from '../../components/inputs/ProductHidden'
+import ShopifyDocumentStatus from '../../components/media/ShopifyDocumentStatus'
+import {defineField, defineType} from 'sanity'
+import {getPriceRange} from '../../utils/getPriceRange'
+import {GROUPS} from '../../constants'
+
+export const productType = defineType({
+  name: 'product',
+  title: 'Product',
+  type: 'document',
+  icon: TagIcon,
+  groups: GROUPS,
+  fields: [
+    defineField({
+      name: 'hidden',
+      type: 'string',
+      components: {
+        field: ProductHiddenInput,
+      },
+      group: GROUPS.map((group) => group.name),
+      hidden: ({parent}) => {
+        const isActive = parent?.store?.status === 'active'
+        const isDeleted = parent?.store?.isDeleted
+        return !parent?.store || (isActive && !isDeleted)
+      },
+    }),
+    defineField({
+      name: 'titleProxy',
+      title: 'Title',
+      type: 'proxyString',
+      options: {field: 'store.title'},
+    }),
+    defineField({
+      name: 'slugProxy',
+      title: 'Slug',
+      type: 'proxyString',
+      options: {field: 'store.slug.current'},
+    }),
+    defineField({
+      name: 'colorTheme',
+      type: 'reference',
+      to: [{type: 'colorTheme'}],
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'body',
+      type: 'portableText',
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'store',
+      type: 'shopifyProduct',
+      description: 'Product data from Shopify (read-only)',
+      group: 'shopifySync',
+    }),
+    defineField({
+      name: 'seo',
+      title: 'SEO',
+      type: 'seo',
+      group: 'seo',
+    }),
+  ],
+  orderings: [
+    {
+      name: 'titleAsc',
+      title: 'Title (A-Z)',
+      by: [{field: 'store.title', direction: 'asc'}],
+    },
+    {
+      name: 'titleDesc',
+      title: 'Title (Z-A)',
+      by: [{field: 'store.title', direction: 'desc'}],
+    },
+    {
+      name: 'priceDesc',
+      title: 'Price (Highest first)',
+      by: [{field: 'store.priceRange.minVariantPrice', direction: 'desc'}],
+    },
+    {
+      name: 'priceAsc',
+      title: 'Price (Lowest first)',
+      by: [{field: 'store.priceRange.minVariantPrice', direction: 'asc'}],
+    },
+  ],
+  preview: {
+    select: {
+      isDeleted: 'store.isDeleted',
+      options: 'store.options',
+      previewImageUrl: 'store.previewImageUrl',
+      priceRange: 'store.priceRange',
+      status: 'store.status',
+      title: 'store.title',
+      variants: 'store.variants',
+    },
+    prepare(selection) {
+      const {isDeleted, options, previewImageUrl, priceRange, status, title, variants} = selection
+
+      const optionCount = options?.length
+      const variantCount = variants?.length
+
+      let description = [
+        variantCount ? pluralize('variant', variantCount, true) : 'No variants',
+        optionCount ? pluralize('option', optionCount, true) : 'No options',
+      ]
+
+      let subtitle = getPriceRange(priceRange)
+      if (status !== 'active') {
+        subtitle = '(Unavailable in Shopify)'
+      }
+      if (isDeleted) {
+        subtitle = '(Deleted from Shopify)'
+      }
+
+      return {
+        description: description.join(' / '),
+        subtitle,
+        title,
+        media: (
+          <ShopifyDocumentStatus
+            isActive={status === 'active'}
+            isDeleted={isDeleted}
+            type="product"
+            url={previewImageUrl}
+            title={title}
+          />
+        ),
+      }
+    },
+  },
+})

package/templates/shopify/schemaTypes/documents/productVariant.tsx

@@ -0,0 +1,67 @@
+import {CopyIcon} from '@sanity/icons'
+import {defineField, defineType} from 'sanity'
+
+import ProductVariantHiddenInput from '../../components/inputs/ProductVariantHidden'
+import ShopifyDocumentStatus from '../../components/media/ShopifyDocumentStatus'
+import {GROUPS} from '../../constants'
+
+export const productVariantType = defineType({
+  name: 'productVariant',
+  title: 'Product variant',
+  type: 'document',
+  icon: CopyIcon,
+  groups: GROUPS,
+  fields: [
+    defineField({
+      name: 'hidden',
+      type: 'string',
+      components: {
+        field: ProductVariantHiddenInput,
+      },
+      hidden: ({parent}) => {
+        const isDeleted = parent?.store?.isDeleted
+
+        return !isDeleted
+      },
+    }),
+    defineField({
+      title: 'Title',
+      name: 'titleProxy',
+      type: 'proxyString',
+      options: {field: 'store.title'},
+    }),
+    defineField({
+      name: 'store',
+      title: 'Shopify',
+      description: 'Variant data from Shopify (read-only)',
+      type: 'shopifyProductVariant',
+      group: 'shopifySync',
+    }),
+  ],
+  preview: {
+    select: {
+      isDeleted: 'store.isDeleted',
+      previewImageUrl: 'store.previewImageUrl',
+      sku: 'store.sku',
+      status: 'store.status',
+      title: 'store.title',
+    },
+    prepare(selection) {
+      const {isDeleted, previewImageUrl, sku, status, title} = selection
+
+      return {
+        media: (
+          <ShopifyDocumentStatus
+            isActive={status === 'active'}
+            isDeleted={isDeleted}
+            type="productVariant"
+            url={previewImageUrl}
+            title={title}
+          />
+        ),
+        subtitle: sku,
+        title,
+      }
+    },
+  },
+})