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

package/templates/shopify/README.md

@@ -0,0 +1,85 @@
+# Sanity Studio for Shopify Projects
+
+<img width="1072" alt="Sanity Studio with Shopify products" src="https://github.com/sanity-io/learn/assets/9684022/13aed6ff-a028-4c3f-bc4b-15bf9ba4c6ff">
+
+## About
+
+This Sanity Studio is configured for headless Shopify projects that use the official [Sanity Connect app][sanity-shopify], allowing you to extend Shopify products and collections with your own rich editorial content.
+
+It contains examples of customizing your [structure][docs-structure], [document actions][docs-document-actions] and [input components][docs-input-components].
+
+This studio can be used with any front end, or anywhere else you want your e-commerce content to go.
+
+## Features
+
+This studio comes configured 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 with several convenient layout modules which can be re-used across various pages.
+
+**[View studio features][studio-features]**
+
+## Assumptions
+
+No two custom storefronts are the same, and we've taken a few strong opinions on how we've approached this studio.
+
+- Synced Shopify data for `collection`, `product` and `productVariant` documents are stored in a read-only object, `store`
+- Shopify is the source of truth for both product titles, slugs (handles) and thumbnail images
+- Shopify is the source of truth for collections
+- Sanity is used as an additional presentational layer to add custom metadata to both Shopify collections and products
+  - For products: this includes a portable text field with support for editorial modules
+  - For collections: this includes a customizable array of editorial modules
+- Some images (such as product and cart line item thumbnails) are served by Shopify's CDN whilst other images (such as those served in editorial modules) are handled by Sanity's Image API
+- We only concern ourselves with incoming data from Shopify _collections_, _products_ and _product variants_
+
+We believe these rules work well for simpler use cases, and keeping product titles, images and slugs handled by Shopify helps keep content consistent as you navigate from your product views to the cart and ultimately checkout. Managing collections in Shopify gives you the flexibility to take full advantage of manual and automated collections.
+
+You may have differing opinions on how content best be modeled to fit your particular needs – this is normal and encouraged! Fortunately, Sanity was built with this flexibility in mind, and we've written [a guide on structured content patterns of e-commerce][structured-content-patterns] which may help inform how to tackle this challenge.
+
+## 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
+```
+
+Make sure to run the tagged release! (`@sanity/cli`)
+
+## 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][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.
+
+[docs-cli]: https://www.sanity.io/docs/cli
+[docs-custom-input-components]: https://www.sanity.io/docs/custom-input-components
+[docs-structure]: https://www.sanity.io/docs/structure-builder
+[docs-document-actions]: https://www.sanity.io/docs/document-actions
+[docs-input-components]: https://www.sanity.io/docs/custom-input-widgets
+[docs-string-input]: https://www.sanity.io/docs/string-type
+[hydrogen-demo]: https://github.com/sanity-io/hydrogen-sanity-demo
+[license]: https://github.com/sanity-io/sanity/blob/next/LICENSE
+[sanity-shopify]: https://apps.shopify.com/sanity-connect
+[structured-content-patterns]: https://www.sanity.io/guides/structured-content-patterns-for-e-commerce
+[studio-features]: docs/features.md

package/templates/shopify/components/hotspots/ProductTooltip.tsx

@@ -0,0 +1,38 @@
+import {styled} from 'styled-components'
+import {PreviewLayoutKey, SchemaType, useSchema} from 'sanity'
+import {Box} from '@sanity/ui'
+import {HotspotTooltipProps} from 'sanity-plugin-hotspot-array'
+import {useMemo} from 'react'
+
+interface HotspotFields {
+  productWithVariant?: {
+    product: {
+      _ref: string
+    }
+  }
+}
+
+const StyledBox = styled(Box)`
+  width: 200px;
+`
+
+export default function ProductPreview(props: HotspotTooltipProps<HotspotFields>) {
+  const {value, renderPreview} = props
+  const productSchemaType = useSchema().get('product')
+  const hasProduct = value?.productWithVariant?.product?._ref && productSchemaType
+
+  const previewProps = useMemo(
+    () => ({
+      value: value?.productWithVariant?.product,
+      schemaType: productSchemaType as SchemaType,
+      layout: 'default' as PreviewLayoutKey,
+    }),
+    [productSchemaType, value?.productWithVariant?.product],
+  )
+
+  return (
+    <StyledBox padding={2}>
+      {hasProduct && previewProps ? renderPreview(previewProps) : `No product selected`}
+    </StyledBox>
+  )
+}

package/templates/shopify/components/icons/Shopify.tsx

@@ -0,0 +1,20 @@
+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/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,
+  },
+]