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

package/templates/shopify/components/inputs/CollectionHidden.tsx

@@ -0,0 +1,23 @@
+import {WarningOutlineIcon} from '@sanity/icons'
+import {StringFieldProps} from 'sanity'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+
+export default function CollectionHiddenInput(props: StringFieldProps) {
+  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/components/inputs/PlaceholderString.tsx

@@ -0,0 +1,20 @@
+import {StringInputProps, useFormValue, SanityDocument, StringSchemaType} 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: {...props.elementProps, placeholder: proxyValue},
+  })
+}
+
+export default PlaceholderStringInput

package/templates/shopify/components/inputs/ProductHidden.tsx

@@ -0,0 +1,64 @@
+import {WarningOutlineIcon} from '@sanity/icons'
+import {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
+
+  let message
+  if (!store) {
+    return <></>
+  } else {
+    const shopifyProductUrl = productUrl(store?.id)
+    const isActive = store?.status === 'active'
+    const isDeleted = store?.isDeleted
+
+    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/components/inputs/ProductVariantHidden.tsx

@@ -0,0 +1,24 @@
+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/components/inputs/ProxyString.tsx

@@ -0,0 +1,32 @@
+import {LockIcon} from '@sanity/icons'
+import {Box, Text, TextInput, Tooltip} from '@sanity/ui'
+import {StringInputProps, useFormValue, SanityDocument, StringSchemaType} 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/components/media/ColorTheme.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import {css, styled} from 'styled-components'
+
+interface Props {
+  background?: string
+  text?: string
+}
+
+interface StyledSpanProps {
+  background?: string
+}
+
+const StyledSpan = styled.span<StyledSpanProps>(({background}) => {
+  const bg = background || 'white'
+
+  return css`
+    align-items: center;
+    background-color: ${bg};
+    border-radius: inherit;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    overflow: hidden;
+    width: 100%;
+  `
+})
+
+const ColorThemePreview = (props: Props) => {
+  const {background, text} = props
+
+  return (
+    <StyledSpan background={background}>
+      {text && <span style={{color: text, fontSize: '1.5em', fontWeight: 600}}>T</span>}
+    </StyledSpan>
+  )
+}
+
+export default ColorThemePreview

package/templates/shopify/components/media/ShopifyDocumentStatus.tsx

@@ -0,0 +1,82 @@
+import {CloseIcon, ImageIcon, LinkRemovedIcon} from '@sanity/icons'
+import React, {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, type, url, title} = 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/components/studio/Navbar.tsx

@@ -0,0 +1,29 @@
+import {Box, Button, Card, Flex} from '@sanity/ui'
+import type {NavbarProps} from 'sanity'
+
+import {SHOPIFY_STORE_ID} from '../../constants'
+import ShopifyIcon from '../icons/Shopify'
+
+export default function Navbar(props: NavbarProps) {
+  if (!SHOPIFY_STORE_ID) return props.renderDefault(props)
+
+  return (
+    <Card>
+      <Flex align="center">
+        <Box flex={1}>{props.renderDefault(props)}</Box>
+        <Card paddingY={2} paddingRight={2} borderBottom={true}>
+          <Button
+            as="a"
+            href={`https://admin.shopify.com/store/${SHOPIFY_STORE_ID}`}
+            mode="bleed"
+            title="Open Shopify Admin"
+            target="_blank"
+            padding={1}
+          >
+            <ShopifyIcon />
+          </Button>
+        </Card>
+      </Flex>
+    </Card>
+  )
+}

package/templates/shopify/constants.ts

@@ -0,0 +1,61 @@
+// Currency code (ISO 4217) to use when displaying prices in the studio
+
+import ShopifyIcon from './components/icons/Shopify'
+import {ColorWheelIcon, ComposeIcon, SearchIcon} from '@sanity/icons'
+
+// 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
+export const LOCKED_DOCUMENT_TYPES = ['settings', 'home', 'media.tag']
+
+// 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']
+
+// References to include in 'internal' links
+export const PAGE_REFERENCES = [
+  {type: 'collection'},
+  {type: 'home'},
+  {type: 'page'},
+  {type: 'product'},
+]
+
+// 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 = '2022-10-25'
+
+// Your Shopify store ID.
+// This is the ID in your Shopify admin URL (e.g. 'my-store-name' in https://admin.shopify.com/store/my-store-name).
+// You only need to provide the ID, not the full URL.
+// Set this to enable helper links in document status banners and shortcut links on products and collections.
+export const SHOPIFY_STORE_ID = ''
+
+// Field groups used through schema types
+export const GROUPS = [
+  {
+    name: 'theme',
+    title: 'Theme',
+    icon: ColorWheelIcon,
+  },
+  {
+    default: true,
+    name: 'editorial',
+    title: 'Editorial',
+    icon: ComposeIcon,
+  },
+  {
+    name: 'shopifySync',
+    title: 'Shopify sync',
+    icon: ShopifyIcon,
+  },
+  {
+    name: 'seo',
+    title: 'SEO',
+    icon: SearchIcon,
+  },
+]

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