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

package/templates/shopify/docs/features.md

@@ -0,0 +1,158 @@
+# Studio features
+
+## Shopify friendly content schema types
+
+This studio is built to accommodate both collections and products coming from a Shopify Store.
+
+You can use the official [Sanity Connect app on Shopify][sanity-shopify] to sync your Shopify collection and products with your dataset. All your data will be available over APIs that you can access with [`@sanity/client`][docs-js-client] or the [HTTP API][docs-http-api].
+
+Inside `/schemaTypes` you'll find schema definitions for all the content types. They are organized in folders:
+
+- `/schemaTypes/annotations/`: Annotations let editors mark up inline text in the block content editor with rich objects. These can be used to augment editorial content with product information.
+- `/schemaTypes/documents/`: Document types determines the shape of the JSON documents that's stored in your content lake. This is where you define the content forms for things like collections, products, product variants, as well as articles.
+- `/schemaTypes/objects/`: General purpose & re-usable content structures, such as links, custom product options and modules.
+
+## Structure
+
+Sanity Studio will automatically list all your [document types][docs-document-types] out of the box. Sometimes you want a more streamlined editor experience. That's why you'll find a custom [structure][docs-structure] that's defined in `/structure`. It does the following things:
+
+- Groups product information and variants by individual products for more convenient editing
+- Creates a singleton document for controlling a homepage with custom editorial modules.
+- Creates a singleton document for settings to control navigation and global content
+- Lists general purpose pages for other editorial content
+
+## Custom modules
+
+### Call to action
+
+<p><img width="600" src="https://user-images.githubusercontent.com/209129/173630522-1251875d-175d-430a-bdc7-8923ebe08044.png"></p>
+
+`/schemaTypes/objects/module/callToAction.tsx`
+
+### Callout
+
+<p><img width="600"src="https://user-images.githubusercontent.com/209129/173630517-003a6942-b45e-48d4-8ec6-d87365e957c7.png"></p>
+
+`/schemaTypes/objects/module/callout.tsx`
+
+### Collection
+
+<p><img width="600" src="https://user-images.githubusercontent.com/209129/173630535-73eab084-f424-435f-b426-7fbc9baed152.png"></p>
+
+`/schemaTypes/objects/module/collection.tsx`
+
+### Image
+
+<p><img width="600" src="https://user-images.githubusercontent.com/209129/174492490-aefa1a0d-40ea-473d-be73-ba6326d66ee8.png"></p>
+
+`/schemaTypes/objects/module/image.ts`
+
+### Instagram
+
+<p><img width="600" src="https://user-images.githubusercontent.com/209129/173630524-b8b7253f-704a-4935-9b66-1c5673477b1c.png"></p>
+
+`/schemaTypes/objects/module/instagram.ts`
+
+### Product
+
+<p><img width="600" src="https://user-images.githubusercontent.com/209129/173630533-b4a202bd-6385-4eef-a7e2-c67ba596dad1.png"></p>
+
+`/schemaTypes/objects/module/product.tsx`
+
+## Custom document actions
+
+Custom document actions let you override the default behavior of the publish button. The included document actions adds to the menu that you can find by pushing the chevron right to a document's publish button.
+
+You can find these in `/plugins/customDocumentActions/`.
+
+Read more about [document actions][docs-document-actions].
+
+### Delete product and variants
+
+<p><img width="400" src="https://user-images.githubusercontent.com/209129/173621376-66dc614d-a8ef-4d05-9e23-56806bf63a60.png"></p>
+
+`/plugins/customDocumentActions/shopifyDelete.tsx`
+
+Delete a product document including all its associated variants in your Sanity Content Lake. Without this document action, one would have to delete all variant documents one-by-one.
+
+### Edit in Shopify shortcut
+
+<p><img width="280" src="https://user-images.githubusercontent.com/209129/173621897-cfe069e9-4719-4433-b78b-f932d079fce3.png"></p>
+
+`/plugins/customDocumentActions/shopifyLink.ts`
+
+A shortcut to edit the current product or product variant in Shopify in a new window. You'll need to set your Shopify admin domain in `constants.ts`.
+
+## Custom input and preview components
+
+### Placeholder string input
+
+<p><img width="450" alt="image" src="https://user-images.githubusercontent.com/209129/173622133-30b1c1c4-f512-404b-a28f-56ce456e33c8.png"></p>
+
+`/components/inputs/PlaceholderString.tsx`
+
+A simple wrapper around a regular [string input](string-input) that uses the value of another field as a placeholder.
+
+**Usage:**
+
+```javascript
+defineField({
+  name: 'title',
+  type: 'placeholderString',
+  options: { field: 'store.title' }
+}),
+```
+
+### Shopify document status (for collections, products and product variants)
+
+<p><img width="476" src="https://user-images.githubusercontent.com/209129/141304763-8b08d0d8-93d6-4c26-bde3-224857d45468.png" /></p>
+
+`/components/inputs/CollectionHidden.tsx`
+`/components/inputs/ProductHidden.tsx`
+`/components/inputs/ProductVariantHidden.tsx`
+
+Display-only input fields that show the corresponding document's status in Shopify.
+
+For instance, if a product has been deleted from Shopify or has its status set to `draft` or `active`.
+
+### Proxy string input
+
+<p><img width="450" src="https://user-images.githubusercontent.com/209129/173626714-1e18da84-27ce-46aa-8fc6-b286797544e4.png"></p>
+
+`/components/inputs/ProxyString.tsx`
+
+A simple wrapper around a regular [String input field](string-input) that displays the value of another field as a read-only input.
+
+Since we are using certain product fields from Shopify as the source of truth (such as product title, slug and preview images) and store these in a separate `store` object, these proxy string inputs are used to better surface deeply nested fields to editors.
+
+**Usage**
+
+```javascript
+defineField({
+  title: 'Slug',
+  name: 'slugProxy',
+  type: 'proxyString',
+  options: {field: 'store.slug.current'},
+})
+```
+
+### Shopify document status (preview component)
+
+<p><img width="320" alt="image 5" src="https://user-images.githubusercontent.com/209129/173627554-91c60bb4-dac7-460b-b5c6-de45d3cfa9b0.png"></p>
+
+`/components/media/ShopifyDocumentStatus.tsx`
+
+A custom preview component that will display collection, product and product variant images defined in `store.previewImageUrl`.
+
+By default, Sanity Connect will populate these fields with the default image from Shopify. These images are not re-uploaded into your dataset and instead reference Shopify's CDN directly.
+
+This preview component also has visual states for when a product is _unavailable_ in Shopify (e.g. if it has a non-active status), or if it's been removed from Shopify altogether.
+
+Sanity Connect will never delete your collection, product and product variant documents.
+
+[docs-structure]: https://www.sanity.io/docs/structure-builder
+[docs-document-actions]: https://www.sanity.io/docs/document-actions
+[docs-document-types]: https://www.sanity.io/docs/schema-types
+[docs-http-api]: https://www.sanity.io/docs/http-api
+[docs-js-client]: https://www.sanity.io/docs/js-client
+[sanity-shopify]: https://apps.shopify.com/sanity-connect

package/templates/shopify/plugins/customDocumentActions/index.ts

@@ -0,0 +1,55 @@
+import {
+  definePlugin,
+  DocumentActionComponent,
+  DocumentActionsResolver,
+  NewDocumentOptionsResolver,
+} from 'sanity'
+import shopifyDelete from './shopifyDelete'
+import shopifyLink from './shopifyLink'
+
+import {LOCKED_DOCUMENT_TYPES, SHOPIFY_DOCUMENT_TYPES} from '../../constants'
+
+export const resolveDocumentActions: DocumentActionsResolver = (prev, {schemaType}) => {
+  if (LOCKED_DOCUMENT_TYPES.includes(schemaType)) {
+    prev = prev.filter(
+      (previousAction: DocumentActionComponent) =>
+        previousAction.action === 'publish' || previousAction.action === 'discardChanges',
+    )
+  }
+
+  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 (
+      !LOCKED_DOCUMENT_TYPES.includes(previousOption.templateId) &&
+      !SHOPIFY_DOCUMENT_TYPES.includes(previousOption.templateId)
+    )
+  })
+
+  return options
+}
+
+export const customDocumentActions = definePlugin({
+  name: 'custom-document-actions',
+  document: {
+    actions: resolveDocumentActions,
+    newDocumentOptions: resolveNewDocumentOptions,
+  },
+})

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,
+      }
+    },
+  },
+})