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

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

package/templates/shopify/schemaTypes/index.ts

@@ -0,0 +1,108 @@
+import {accordionGroupType} from './objects/module/accordionGroupType'
+import {accordionType} from './objects/module/accordionType'
+import {calloutType} from './objects/module/calloutType'
+import {callToActionType} from './objects/module/callToActionType'
+import {collectionGroupType} from './objects/collection/collectionGroupType'
+import {collectionLinksType} from './objects/collection/collectionLinksType'
+import {collectionReferenceType} from './objects/module/collectionReferenceType'
+import {collectionRuleType} from './objects/shopify/collectionRuleType'
+import {customProductOptionColorObjectType} from './objects/customProductOption/customProductOptionColorObjectType'
+import {customProductOptionColorType} from './objects/customProductOption/customProductOptionColorType'
+import {customProductOptionSizeObjectType} from './objects/customProductOption/customProductOptionSizeObjectType'
+import {customProductOptionSizeType} from './objects/customProductOption/customProductOptionSizeType'
+import {footerType} from './objects/global/footerType'
+import {gridItemType} from './objects/module/gridItemType'
+import {gridType} from './objects/module/gridType'
+import {heroType} from './objects/module/heroType'
+import {imageCallToActionType} from './objects/module/imageCallToActionType'
+import {imageFeaturesType} from './objects/module/imageFeaturesType'
+import {imageFeatureType} from './objects/module/imageFeatureType'
+import {imageWithProductHotspotsType} from './objects/hotspot/imageWithProductHotspotsType'
+import {instagramType} from './objects/module/instagramType'
+import {inventoryType} from './objects/shopify/inventoryType'
+import {linkEmailType} from './objects/link/linkEmailType'
+import {linkExternalType} from './objects/link/linkExternalType'
+import {linkInternalType} from './objects/link/linkInternalType'
+import {linkProductType} from './objects/link/linkProductType'
+import {menuLinksType} from './objects/global/menuLinksType'
+import {menuType} from './objects/global/menuType'
+import {notFoundPageType} from './objects/global/notFoundPageType'
+import {optionType} from './objects/shopify/optionType'
+import {placeholderStringType} from './objects/shopify/placeholderStringType'
+import {priceRangeType} from './objects/shopify/priceRangeType'
+import {productFeaturesType} from './objects/module/productFeaturesType'
+import {productHotspotsType} from './objects/hotspot/productHotspotsType'
+import {productReferenceType} from './objects/module/productReferenceType'
+import {productWithVariantType} from './objects/shopify/productWithVariantType'
+import {proxyStringType} from './objects/shopify/proxyStringType'
+import {seoType} from './objects/seoType'
+import {shopifyCollectionType} from './objects/shopify/shopifyCollectionType'
+import {shopifyProductType} from './objects/shopify/shopifyProductType'
+import {shopifyProductVariantType} from './objects/shopify/shopifyProductVariantType'
+import {shopType} from './objects/shopify/shopType'
+import {spotType} from './objects/hotspot/spotType'
+
+// Objects used as annotations must be imported first
+const annotations = [linkEmailType, linkExternalType, linkInternalType, linkProductType]
+
+const objects = [
+  accordionGroupType,
+  accordionType,
+  calloutType,
+  callToActionType,
+  collectionGroupType,
+  collectionLinksType,
+  collectionReferenceType,
+  collectionRuleType,
+  customProductOptionColorObjectType,
+  customProductOptionColorType,
+  customProductOptionSizeObjectType,
+  customProductOptionSizeType,
+  footerType,
+  gridItemType,
+  gridType,
+  heroType,
+  imageCallToActionType,
+  imageFeaturesType,
+  imageFeatureType,
+  imageWithProductHotspotsType,
+  instagramType,
+  inventoryType,
+  menuLinksType,
+  menuType,
+  notFoundPageType,
+  optionType,
+  placeholderStringType,
+  priceRangeType,
+  productFeaturesType,
+  productHotspotsType,
+  productReferenceType,
+  productWithVariantType,
+  proxyStringType,
+  seoType,
+  shopifyCollectionType,
+  shopifyProductType,
+  shopifyProductVariantType,
+  shopType,
+  spotType,
+]
+
+import {portableTextType} from './portableText/portableTextType'
+import {portableTextSimpleType} from './portableText/portableTextSimpleType'
+
+const blocks = [portableTextType, portableTextSimpleType]
+
+import {collectionType} from './documents/collection'
+import {colorThemeType} from './documents/colorTheme'
+import {pageType} from './documents/page'
+import {productType} from './documents/product'
+import {productVariantType} from './documents/productVariant'
+
+const documents = [collectionType, colorThemeType, pageType, productType, productVariantType]
+
+import {homeType} from './singletons/homeType'
+import {settingsType} from './singletons/settingsType'
+
+const singletons = [homeType, settingsType]
+
+export const schemaTypes = [...annotations, ...objects, ...singletons, ...blocks, ...documents]

package/templates/shopify/schemaTypes/objects/collection/collectionGroupType.ts

@@ -0,0 +1,27 @@
+import {PackageIcon} from '@sanity/icons'
+import {defineField} from 'sanity'
+
+export const collectionGroupType = defineField({
+  name: 'collectionGroup',
+  title: 'Collection group',
+  type: 'object',
+  icon: PackageIcon,
+  fields: [
+    defineField({
+      name: 'title',
+      type: 'string',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'collectionLinks',
+      type: 'collectionLinks',
+    }),
+    defineField({
+      name: 'collectionProducts',
+      type: 'reference',
+      description: 'Products from this collection will be listed',
+      weak: true,
+      to: [{type: 'collection'}],
+    }),
+  ],
+})

package/templates/shopify/schemaTypes/objects/collection/collectionLinksType.ts

@@ -0,0 +1,16 @@
+import {defineArrayMember, defineField} from 'sanity'
+
+export const collectionLinksType = defineField({
+  name: 'collectionLinks',
+  title: 'Collection links',
+  type: 'array',
+  validation: (Rule) => Rule.unique().max(4),
+  of: [
+    defineArrayMember({
+      name: 'collection',
+      type: 'reference',
+      weak: true,
+      to: [{type: 'collection'}],
+    }),
+  ],
+})

package/templates/shopify/schemaTypes/objects/customProductOption/customProductOptionColorObjectType.tsx

@@ -0,0 +1,48 @@
+import {defineField} from 'sanity'
+
+const ColorPreview = ({color}: {color: string}) => {
+  return (
+    <div
+      style={{
+        backgroundColor: color,
+        borderRadius: 'inherit',
+        display: 'flex',
+        height: '100%',
+        width: '100%',
+      }}
+    />
+  )
+}
+
+export const customProductOptionColorObjectType = defineField({
+  name: 'customProductOption.colorObject',
+  title: 'Color',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'title',
+      type: 'string',
+      description: 'Shopify product option value (case sensitive)',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'color',
+      type: 'color',
+      options: {disableAlpha: true},
+      validation: (Rule) => Rule.required(),
+    }),
+  ],
+  preview: {
+    select: {
+      color: 'color.hex',
+      title: 'title',
+    },
+    prepare({color, title}) {
+      return {
+        media: <ColorPreview color={color} />,
+        subtitle: color,
+        title,
+      }
+    },
+  },
+})

package/templates/shopify/schemaTypes/objects/customProductOption/customProductOptionColorType.tsx

@@ -0,0 +1,50 @@
+import pluralize from 'pluralize-esm'
+import {defineField} from 'sanity'
+
+interface ColorOption {
+  title: string
+}
+
+export const customProductOptionColorType = defineField({
+  name: 'customProductOption.color',
+  title: 'Color',
+  type: 'object',
+  icon: false,
+  fields: [
+    defineField({
+      name: 'title',
+      type: 'string',
+      description: 'Shopify product option name (case sensitive)',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'colors',
+      type: 'array',
+      of: [{type: 'customProductOption.colorObject'}],
+      validation: (Rule) =>
+        Rule.custom((options: ColorOption[] | undefined) => {
+          // Each size must have a unique title
+          if (options) {
+            const uniqueTitles = new Set(options.map((option) => option?.title))
+            if (options.length > uniqueTitles.size) {
+              return 'Each product option must have a unique title'
+            }
+          }
+          return true
+        }),
+    }),
+  ],
+  preview: {
+    select: {
+      colors: 'colors',
+      title: 'title',
+    },
+    prepare(selection) {
+      const {colors, title} = selection
+      return {
+        subtitle: colors.length ? pluralize('color', colors.length, true) : 'No colors',
+        title,
+      }
+    },
+  },
+})

package/templates/shopify/schemaTypes/objects/customProductOption/customProductOptionSizeObjectType.ts

@@ -0,0 +1,40 @@
+import {defineField} from 'sanity'
+
+export const customProductOptionSizeObjectType = defineField({
+  name: 'customProductOption.sizeObject',
+  title: 'Size',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'title',
+      type: 'string',
+      description: 'Shopify product option value (case sensitive)',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'width',
+      type: 'number',
+      description: 'In mm',
+      validation: (Rule) => Rule.required().precision(2),
+    }),
+    defineField({
+      name: 'height',
+      type: 'number',
+      description: 'In mm',
+      validation: (Rule) => Rule.required().precision(2),
+    }),
+  ],
+  preview: {
+    select: {
+      height: 'height',
+      title: 'title',
+      width: 'width',
+    },
+    prepare({height, title, width}) {
+      return {
+        subtitle: `${width || '??'}mm x ${height || '??'}mm`,
+        title,
+      }
+    },
+  },
+})

package/templates/shopify/schemaTypes/objects/customProductOption/customProductOptionSizeType.ts

@@ -0,0 +1,49 @@
+import pluralize from 'pluralize-esm'
+import {defineField} from 'sanity'
+
+interface SizeOption {
+  title: string
+}
+
+export const customProductOptionSizeType = defineField({
+  name: 'customProductOption.size',
+  title: 'Size',
+  type: 'object',
+  icon: false,
+  fields: [
+    defineField({
+      name: 'title',
+      type: 'string',
+      description: 'Shopify product option name (case sensitive)',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'sizes',
+      type: 'array',
+      of: [{type: 'customProductOption.sizeObject'}],
+      validation: (Rule) =>
+        Rule.custom((options: SizeOption[] | undefined) => {
+          // Each size must have a unique title
+          if (options) {
+            const uniqueTitles = new Set(options.map((option) => option.title))
+            if (options.length > uniqueTitles.size) {
+              return 'Each product option must have a unique title'
+            }
+          }
+          return true
+        }),
+    }),
+  ],
+  preview: {
+    select: {
+      sizes: 'sizes',
+      title: 'title',
+    },
+    prepare({sizes, title}) {
+      return {
+        subtitle: sizes.length > 0 ? pluralize('size', sizes.length, true) : 'No sizes',
+        title,
+      }
+    },
+  },
+})

package/templates/shopify/schemaTypes/objects/global/footerType.ts

@@ -0,0 +1,22 @@
+import {defineField} from 'sanity'
+
+export const footerType = defineField({
+  name: 'footerSettings',
+  title: 'Footer',
+  type: 'object',
+  options: {
+    collapsed: false,
+    collapsible: true,
+  },
+  fields: [
+    defineField({
+      name: 'links',
+      type: 'array',
+      of: [{type: 'linkInternal'}, {type: 'linkExternal'}],
+    }),
+    defineField({
+      name: 'text',
+      type: 'portableTextSimple',
+    }),
+  ],
+})

package/templates/shopify/schemaTypes/objects/global/menuLinksType.ts

@@ -0,0 +1,21 @@
+import {defineField} from 'sanity'
+
+export const menuLinksType = defineField({
+  name: 'menuLinks',
+  title: 'Menu Links',
+  type: 'array',
+  of: [
+    defineField({
+      name: 'collectionGroup',
+      type: 'collectionGroup',
+    }),
+    defineField({
+      name: 'linkInternal',
+      type: 'linkInternal',
+    }),
+    defineField({
+      name: 'linkExternal',
+      type: 'linkExternal',
+    }),
+  ],
+})

package/templates/shopify/schemaTypes/objects/global/menuType.ts

@@ -0,0 +1,17 @@
+import {defineField} from 'sanity'
+
+export const menuType = defineField({
+  name: 'menu',
+  title: 'Menu',
+  type: 'object',
+  options: {
+    collapsed: false,
+    collapsible: true,
+  },
+  fields: [
+    defineField({
+      name: 'links',
+      type: 'menuLinks',
+    }),
+  ],
+})

package/templates/shopify/schemaTypes/objects/global/notFoundPageType.ts

@@ -0,0 +1,37 @@
+import {defineField} from 'sanity'
+
+export const notFoundPageType = defineField({
+  name: 'notFoundPage',
+  title: '404 page',
+  type: 'object',
+  group: 'notFoundPage',
+  fields: [
+    defineField({
+      name: 'title',
+      type: 'string',
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({
+      name: 'body',
+      type: 'text',
+      rows: 2,
+    }),
+    defineField({
+      name: 'collection',
+      type: 'reference',
+      description: 'Collection products displayed on this page',
+      weak: true,
+      to: [
+        {
+          name: 'collection',
+          type: 'collection',
+        },
+      ],
+    }),
+    defineField({
+      name: 'colorTheme',
+      type: 'reference',
+      to: [{type: 'colorTheme'}],
+    }),
+  ],
+})

package/templates/shopify/schemaTypes/objects/hotspot/imageWithProductHotspotsType.ts

@@ -0,0 +1,48 @@
+import {ImageIcon} from '@sanity/icons'
+import pluralize from 'pluralize-esm'
+import {defineField} from 'sanity'
+
+export const imageWithProductHotspotsType = defineField({
+  icon: ImageIcon,
+  name: 'imageWithProductHotspots',
+  title: 'Image',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'image',
+      options: {hotspot: true},
+      type: 'image',
+      validation: (Rule) => Rule.required(),
+      // Hide original image when showHotspots is true and an image is set
+      hidden: ({value, parent}) => parent.showHotspots && value,
+    }),
+    defineField({
+      name: 'showHotspots',
+      type: 'boolean',
+      initialValue: false,
+    }),
+    defineField({
+      name: 'productHotspots',
+      type: 'productHotspots',
+      hidden: ({parent}) => !parent.showHotspots,
+    }),
+  ],
+  preview: {
+    select: {
+      fileName: 'image.asset.originalFilename',
+      hotspots: 'productHotspots',
+      image: 'image',
+      showHotspots: 'showHotspots',
+    },
+    prepare({fileName, hotspots, image, showHotspots}) {
+      return {
+        media: image,
+        subtitle:
+          showHotspots && hotspots.length > 0
+            ? `${pluralize('hotspot', hotspots.length, true)}`
+            : undefined,
+        title: fileName,
+      }
+    },
+  },
+})