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

package/templates/shopify/schemaTypes/portableText/portableTextSimpleType.tsx

@@ -0,0 +1,45 @@
+import {defineArrayMember, defineField} from 'sanity'
+
+export const portableTextSimpleType = defineField({
+  name: 'portableTextSimple',
+  type: 'array',
+  of: [
+    defineArrayMember({
+      lists: [
+        {title: 'Bullet', value: 'bullet'},
+        {title: 'Numbered', value: 'number'},
+      ],
+      marks: {
+        decorators: [
+          {
+            title: 'Italic',
+            value: 'em',
+          },
+          {
+            title: 'Strong',
+            value: 'strong',
+          },
+        ],
+        annotations: [
+          {
+            name: 'linkProduct',
+            type: 'linkProduct',
+          },
+          {
+            name: 'linkEmail',
+            type: 'linkEmail',
+          },
+          {
+            name: 'linkInternal',
+            type: 'linkInternal',
+          },
+          {
+            name: 'linkExternal',
+            type: 'linkExternal',
+          },
+        ],
+      },
+      type: 'block',
+    }),
+  ],
+})

package/templates/shopify/schemaTypes/portableText/portableTextType.tsx

@@ -0,0 +1,52 @@
+import {defineArrayMember, defineField} from 'sanity'
+
+export const portableTextType = defineField({
+  name: 'portableText',
+  type: 'array',
+  of: [
+    defineArrayMember({
+      lists: [
+        {title: 'Bullet', value: 'bullet'},
+        {title: 'Numbered', value: 'number'},
+      ],
+      marks: {
+        decorators: [
+          {
+            title: 'Italic',
+            value: 'em',
+          },
+          {
+            title: 'Strong',
+            value: 'strong',
+          },
+        ],
+        annotations: [
+          {
+            name: 'linkProduct',
+            type: 'linkProduct',
+          },
+          {
+            name: 'linkEmail',
+            type: 'linkEmail',
+          },
+          {
+            name: 'linkInternal',
+            type: 'linkInternal',
+          },
+          {
+            name: 'linkExternal',
+            type: 'linkExternal',
+          },
+        ],
+      },
+      type: 'block',
+    }),
+    defineArrayMember({type: 'accordion'}),
+    defineArrayMember({type: 'callout'}),
+    defineArrayMember({type: 'grid'}),
+    defineArrayMember({type: 'images'}),
+    defineArrayMember({type: 'imageWithProductHotspots', title: 'Image with Hotspots'}),
+    defineArrayMember({type: 'instagram'}),
+    defineArrayMember({type: 'products'}),
+  ],
+})

package/templates/shopify/schemaTypes/singletons/homeType.ts

@@ -0,0 +1,49 @@
+import {HomeIcon} from '@sanity/icons'
+import {defineArrayMember, defineField} from 'sanity'
+import {GROUPS} from '../../constants'
+
+const TITLE = 'Home'
+
+export const homeType = defineField({
+  name: 'home',
+  title: TITLE,
+  type: 'document',
+  icon: HomeIcon,
+  groups: GROUPS,
+  fields: [
+    defineField({
+      name: 'hero',
+      type: 'hero',
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'modules',
+      type: 'array',
+      of: [
+        defineArrayMember({type: 'accordion'}),
+        defineArrayMember({type: 'callout'}),
+        defineArrayMember({type: 'grid'}),
+        defineArrayMember({type: 'images'}),
+        defineArrayMember({type: 'imageWithProductHotspots', title: 'Image with Hotspots'}),
+        defineArrayMember({type: 'instagram'}),
+        defineArrayMember({type: 'products'}),
+      ],
+      group: 'editorial',
+    }),
+    defineField({
+      name: 'seo',
+      title: 'SEO',
+      type: 'seo',
+      group: 'seo',
+    }),
+  ],
+  preview: {
+    prepare() {
+      return {
+        media: HomeIcon,
+        subtitle: 'Index',
+        title: TITLE,
+      }
+    },
+  },
+})

package/templates/shopify/schemaTypes/singletons/settingsType.ts

@@ -0,0 +1,96 @@
+import {CogIcon, ControlsIcon, ErrorOutlineIcon, MenuIcon, SearchIcon} from '@sanity/icons'
+import {defineType, defineField} from 'sanity'
+
+const TITLE = 'Settings'
+interface ProductOptions {
+  title: string
+}
+
+export const settingsType = defineType({
+  name: 'settings',
+  title: TITLE,
+  type: 'document',
+  icon: CogIcon,
+  groups: [
+    {
+      default: true,
+      name: 'navigation',
+      title: 'Navigation',
+      icon: MenuIcon,
+    },
+    {
+      name: 'productOptions',
+      title: 'Product options',
+      icon: ControlsIcon,
+    },
+    {
+      name: 'notFoundPage',
+      title: '404 page',
+      icon: ErrorOutlineIcon,
+    },
+    {
+      name: 'seo',
+      title: 'SEO',
+      icon: SearchIcon,
+    },
+  ],
+  fields: [
+    defineField({
+      name: 'menu',
+      type: 'menu',
+      group: 'navigation',
+    }),
+    defineField({
+      name: 'footer',
+      type: 'footerSettings',
+      group: 'navigation',
+    }),
+    defineField({
+      name: 'customProductOptions',
+      type: 'array',
+      group: 'productOptions',
+      of: [
+        {
+          name: 'customProductOption.color',
+          type: 'customProductOption.color',
+        },
+        {
+          name: 'customProductOption.size',
+          type: 'customProductOption.size',
+        },
+      ],
+      validation: (Rule) =>
+        Rule.custom((options: ProductOptions[] | undefined) => {
+          // Each product option type 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 type must have a unique title'
+            }
+          }
+          return true
+        }),
+    }),
+    // Not found page
+    defineField({
+      name: 'notFoundPage',
+      title: '404 page',
+      type: 'notFoundPage',
+      group: 'notFoundPage',
+    }),
+    // SEO
+    defineField({
+      name: 'seo',
+      title: 'SEO',
+      type: 'seo',
+      group: 'seo',
+    }),
+  ],
+  preview: {
+    prepare() {
+      return {
+        title: TITLE,
+      }
+    },
+  },
+})

package/templates/shopify/static/.gitkeep

@@ -0,0 +1 @@
+Files placed here will be served by the Sanity server under the `/static`-prefix

package/templates/shopify/structure/collectionStructure.ts

@@ -0,0 +1,9 @@
+import {ListItemBuilder} from 'sanity/structure'
+import defineStructure from '../utils/defineStructure'
+
+export default defineStructure<ListItemBuilder>((S) =>
+  S.listItem()
+    .title('Collections')
+    .schemaType('collection')
+    .child(S.documentTypeList('collection')),
+)

package/templates/shopify/structure/colorThemeStructure.ts

@@ -0,0 +1,9 @@
+import {ListItemBuilder} from 'sanity/structure'
+import defineStructure from '../utils/defineStructure'
+
+export default defineStructure<ListItemBuilder>((S) =>
+  S.listItem()
+    .title('Color themes')
+    .schemaType('colorTheme')
+    .child(S.documentTypeList('colorTheme')),
+)

package/templates/shopify/structure/homeStructure.ts

@@ -0,0 +1,9 @@
+import {ListItemBuilder} from 'sanity/structure'
+import defineStructure from '../utils/defineStructure'
+
+export default defineStructure<ListItemBuilder>((S) =>
+  S.listItem()
+    .title('Home')
+    .schemaType('home')
+    .child(S.editor().title('Home').schemaType('home').documentId('home')),
+)

package/templates/shopify/structure/index.ts

@@ -0,0 +1,57 @@
+import {ListItemBuilder, StructureResolver} from 'sanity/structure'
+import collections from './collectionStructure'
+import colorThemes from './colorThemeStructure'
+import home from './homeStructure'
+import pages from './pageStructure'
+import products from './productStructure'
+import settings from './settingStructure'
+
+/**
+ * Structure overrides
+ *
+ * Sanity Studio automatically lists document types out of the box.
+ * With this custom structure we achieve things like showing the `home`
+ * and `settings` document types as singletons, and grouping product details
+ * and variants for easy editorial access.
+ *
+ * You can customize this even further as your schema types progress.
+ * To learn more about structure builder, visit our docs:
+ * https://www.sanity.io/docs/overview-structure-builder
+ */
+
+// If you add document types to structure manually, you can add them to this function to prevent duplicates in the root pane
+const hiddenDocTypes = (listItem: ListItemBuilder) => {
+  const id = listItem.getId()
+
+  if (!id) {
+    return false
+  }
+
+  return ![
+    'collection',
+    'colorTheme',
+    'home',
+    'media.tag',
+    'page',
+    'product',
+    'productVariant',
+    'settings',
+  ].includes(id)
+}
+
+export const structure: StructureResolver = (S, context) =>
+  S.list()
+    .title('Content')
+    .items([
+      home(S, context),
+      pages(S, context),
+      S.divider(),
+      collections(S, context),
+      products(S, context),
+      S.divider(),
+      colorThemes(S, context),
+      S.divider(),
+      settings(S, context),
+      S.divider(),
+      ...S.documentTypeListItems().filter(hiddenDocTypes),
+    ])

package/templates/shopify/structure/pageStructure.ts

@@ -0,0 +1,11 @@
+import {DocumentsIcon} from '@sanity/icons'
+import {ListItemBuilder} from 'sanity/structure'
+import defineStructure from '../utils/defineStructure'
+
+export default defineStructure<ListItemBuilder>((S) =>
+  S.listItem()
+    .title('Pages')
+    .icon(DocumentsIcon)
+    .schemaType('page')
+    .child(S.documentTypeList('page')),
+)

package/templates/shopify/structure/productStructure.ts

@@ -0,0 +1,51 @@
+import {InfoOutlineIcon} from '@sanity/icons'
+import {ListItemBuilder} from 'sanity/structure'
+import defineStructure from '../utils/defineStructure'
+
+export default defineStructure<ListItemBuilder>((S) =>
+  S.listItem()
+    .title('Products')
+    .schemaType('product')
+    .child(
+      S.documentTypeList('product')
+        // .defaultLayout('detail')
+        .child(async (id) =>
+          S.list()
+            .title('Product')
+            .canHandleIntent(
+              (intentName, params) => intentName === 'edit' && params.type === 'product',
+            )
+            .items([
+              // Details
+              S.listItem()
+                .title('Details')
+                .icon(InfoOutlineIcon)
+                .schemaType('product')
+                .id(id)
+                .child(S.document().schemaType('product').documentId(id)),
+              // Product variants
+              S.listItem()
+                .title('Variants')
+                .schemaType('productVariant')
+                .child(
+                  S.documentList()
+                    .title('Variants')
+                    .schemaType('productVariant')
+                    .filter(
+                      `
+                      _type == "productVariant"
+                      && store.productId == $productId
+                    `,
+                    )
+                    .params({
+                      productId: Number(id.replace('shopifyProduct-', '')),
+                    })
+                    .canHandleIntent(
+                      (intentName, params) =>
+                        intentName === 'edit' && params.type === 'productVariant',
+                    ),
+                ),
+            ]),
+        ),
+    ),
+)

package/templates/shopify/structure/settingStructure.ts

@@ -0,0 +1,9 @@
+import {ListItemBuilder} from 'sanity/structure'
+import defineStructure from '../utils/defineStructure'
+
+export default defineStructure<ListItemBuilder>((S) =>
+  S.listItem()
+    .title('Settings')
+    .schemaType('settings')
+    .child(S.editor().title('Settings').schemaType('settings').documentId('settings')),
+)

package/templates/shopify/utils/blocksToText.ts

@@ -0,0 +1,20 @@
+import type {PortableTextBlock} from '@portabletext/types'
+
+const defaults = {nonTextBehavior: 'remove'}
+
+export default function (blocks: PortableTextBlock[] = [], opts = {}) {
+  if (typeof blocks === 'string') {
+    return blocks
+  }
+
+  const options = Object.assign({}, defaults, opts)
+  return blocks
+    .map((block) => {
+      if (block._type !== 'block' || !block.children) {
+        return options.nonTextBehavior === 'remove' ? '' : `[${block._type} block]`
+      }
+
+      return block.children.map((child) => child.text).join('')
+    })
+    .join('\n\n')
+}

package/templates/shopify/utils/defineStructure.ts

@@ -0,0 +1,11 @@
+import {ConfigContext} from 'sanity'
+import {StructureBuilder} from 'sanity/structure'
+
+/**
+ * Helper for creating and typing composable structure parts.
+ */
+export default function defineStructure<StructureType>(
+  factory: (S: StructureBuilder, context: ConfigContext) => StructureType,
+) {
+  return factory
+}

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