@sanity/cli 3.36.4 → 3.36.5-canary.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/cli",
-  "version": "3.36.4",
+  "version": "3.36.5-canary.34+48b8553cb5",
   "description": "Sanity CLI tool for managing Sanity installations, managing plugins, schemas and datasets",
   "keywords": [
     "sanity",
@@ -22,24 +22,20 @@
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
+  "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./lib/dts/src/index.d.ts",
       "source": "./src/index.ts",
+      "import": "./lib/index.mjs",
       "require": "./lib/index.js",
-      "node": {
-        "module": "./lib/index.esm.js",
-        "import": "./lib/index.cjs.mjs"
-      },
-      "import": "./lib/index.esm.js",
-      "default": "./lib/index.esm.js"
+      "default": "./lib/index.js"
     },
     "./package.json": "./package.json"
   },
   "main": "./lib/index.js",
   "module": "./lib/index.esm.js",
   "source": "./src/index.ts",
-  "types": "./lib/dts/src/index.d.ts",
+  "types": "./lib/index.d.ts",
   "bin": {
     "sanity": "./bin/sanity"
   },
@@ -51,26 +47,27 @@
     "templates"
   ],
   "scripts": {
-    "prebuild": "run-s clean",
-    "build": "pkg-utils build --tsconfig tsconfig.lib.json",
-    "postbuild": "run-s check:package",
-    "check:package": "pkg-utils --strict --tsconfig tsconfig.lib.json",
+    "build": "run-s clean && pkg-utils build --strict",
+    "check:package": "pkg-utils --strict",
+    "check:types": "tsc",
     "clean": "rimraf lib",
     "lint": "eslint .",
     "test": "jest",
     "ts": "node -r esbuild-register",
-    "watch": "pkg-utils watch --tsconfig tsconfig.lib.json"
+    "watch": "pkg-utils watch"
   },
   "dependencies": {
     "@babel/traverse": "^7.23.5",
-    "@sanity/codegen": "3.36.4",
+    "@sanity/client": "^6.15.9",
+    "@sanity/codegen": "3.36.5-canary.34+48b8553cb5",
     "@sanity/telemetry": "^0.7.6",
-    "@sanity/util": "3.36.4",
+    "@sanity/util": "3.36.5-canary.34+48b8553cb5",
     "chalk": "^4.1.2",
+    "debug": "^4.3.4",
     "decompress": "^4.2.0",
     "esbuild": "^0.20.0",
     "esbuild-register": "^3.4.1",
-    "get-it": "^8.4.16",
+    "get-it": "^8.4.17",
     "golden-fleece": "^1.0.9",
     "groq-js": "^1.7.0",
     "node-machine-id": "^1.1.12",
@@ -80,11 +77,12 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
+    "@repo/package.config": "0.0.0",
     "@rexxars/gitconfiglocal": "^3.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@sanity/client": "^6.15.7",
     "@sanity/eslint-config-studio": "^3.0.1",
     "@sanity/generate-help-url": "^3.0.0",
+    "@sanity/types": "3.36.5-canary.34+48b8553cb5",
     "@types/babel__traverse": "^7.20.5",
     "@types/configstore": "^5.0.1",
     "@types/cpx": "^1.5.2",
@@ -106,7 +104,6 @@
     "clean-stack": "^3.0.0",
     "configstore": "^5.0.1",
     "cpx": "^1.5.0",
-    "debug": "^4.3.4",
     "deep-sort-object": "^1.0.1",
     "dotenv": "^16.0.3",
     "dotenv-expand": "^9.0.0",
@@ -132,12 +129,12 @@
     "semver": "^7.3.5",
     "semver-compare": "^1.0.0",
     "tar": "^6.1.11",
-    "vite": "^4.5.2",
+    "vite": "^4.5.3",
     "which": "^2.0.2",
     "xdg-basedir": "^4.0.0"
   },
   "engines": {
     "node": ">=18"
   },
-  "gitHead": "719f300471dc79a6b5c7aa3c0352fde537a78041"
+  "gitHead": "48b8553cb5172cc0d3eecca352cb4afa391bb29b"
 }

package/src/actions/init-project/templates/shopify.ts

@@ -12,6 +12,7 @@ import {colorInput} from '@sanity/color-input'
 import {imageHotspotArrayPlugin} from 'sanity-plugin-hotspot-array'
 import {media, mediaAssetSource} from 'sanity-plugin-media'
 import {customDocumentActions} from './plugins/customDocumentActions'
+import Navbar from './components/studio/Navbar'
 
 const devOnlyPlugins = [visionTool()]
 
@@ -47,6 +48,12 @@ export default defineConfig({
       },
     },
   },
+
+  studio: {
+    components: {
+      navbar: Navbar,
+    },
+  },
 })`
 
 const shopifyTemplate: ProjectTemplate = {

package/src/util/journeyConfig.ts

@@ -1,13 +1,13 @@
+import {
+  type BaseSchemaDefinition,
+  type DocumentDefinition,
+  type ObjectDefinition,
+} from '@sanity/types'
 import fs from 'fs/promises'
 import path from 'path'
 import {format} from 'prettier'
 import {Worker} from 'worker_threads'
 
-import {
-  type BaseSchemaDefinition,
-  type DocumentDefinition,
-  type ObjectDefinition,
-} from '../../../types'
 import {type CliApiClient} from '../types'
 import {getCliWorkerPath} from './cliWorker'
 

package/templates/ecommerce/plugins/barcode-input/BarcodeInput.js

@@ -4,7 +4,7 @@ import React, {useState} from 'react'
 import {Box, Text} from '@sanity/ui'
 import Barcode from 'react-barcode'
 import {MemberField} from 'sanity'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 const BarcodeRoot = styled(Box)`
   svg {

package/templates/get-started/plugins/sanity-plugin-tutorial/GetStartedTutorial.tsx

@@ -12,7 +12,7 @@ import {
   useTheme,
 } from '@sanity/ui'
 import {CloseIcon} from '@sanity/icons'
-import styled, {css} from 'styled-components'
+import {css, styled} from 'styled-components'
 
 const BlueColor = css`
   color: ${({theme}) => theme.sanity.color.muted.primary.enabled.fg};

package/templates/shared/tsconfig.json

@@ -7,10 +7,8 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
+    "module": "Preserve",
+    "moduleDetection": "force",
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true

package/templates/shopify/README.md

@@ -1,6 +1,6 @@
 # Sanity Studio for Shopify Projects
 
-<p><img src="https://user-images.githubusercontent.com/209129/173606241-ae6694f7-57f0-4ed7-9d05-60c563c4233b.png" width="800" /></p>
+<img width="1072" alt="Sanity Studio with Shopify products" src="https://github.com/sanity-io/learn/assets/9684022/13aed6ff-a028-4c3f-bc4b-15bf9ba4c6ff">
 
 ## About
 
@@ -8,11 +8,11 @@ This Sanity Studio is configured for headless Shopify projects that use the offi
 
 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 our [Hydrogen starter][hydrogen-demo], your frontend, or anywhere else you want your e-commerce content to go.
+This studio can be used with any front end, or anywhere else you want your e-commerce content to go.
 
 ## 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.
+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.
 

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 import {PreviewLayoutKey, SchemaType, useSchema} from 'sanity'
 import {Box} from '@sanity/ui'
 import {HotspotTooltipProps} from 'sanity-plugin-hotspot-array'

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

@@ -1,4 +1,4 @@
-import React from 'react'
+
 
 const ShopifyIcon = () => {
   return (

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

@@ -1,4 +1,4 @@
-import React from 'react'
+
 import {WarningOutlineIcon} from '@sanity/icons'
 import {StringFieldProps} from 'sanity'
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 interface Props {
   background?: string

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

@@ -1,4 +1,8 @@
 // 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'
 
@@ -26,6 +30,32 @@ export const PAGE_REFERENCES = [
 export const SANITY_API_VERSION = '2022-10-25'
 
 // Your Shopify store ID.
-// This is your unique store URL (e.g. 'my-store-name.myshopify.com').
+// 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

@@ -73,7 +73,7 @@ Read more about [document actions][docs-document-actions].
 
 `/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 document one-by-one.
+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
 
@@ -96,12 +96,11 @@ A simple wrapper around a regular [string input](string-input) that uses the val
 **Usage:**
 
 ```javascript
-{
+defineField({
   name: 'title',
-  title: 'Title',
   type: 'placeholderString',
   options: { field: 'store.title' }
-},
+}),
 ```
 
 ### Shopify document status (for collections, products and product variants)
@@ -129,12 +128,12 @@ Since we are using certain product fields from Shopify as the source of truth (s
 **Usage**
 
 ```javascript
-{
+defineField({
   title: 'Slug',
   name: 'slugProxy',
   type: 'proxyString',
-  options: { field: 'store.slug.current' }
-}
+  options: {field: 'store.slug.current'},
+})
 ```
 
 ### Shopify document status (preview component)

package/templates/shopify/schemaTypes/documents/collection.tsx

@@ -1,41 +1,19 @@
-import React from 'react'
-import {defineField, defineType} from 'sanity'
+
+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 ShopifyIcon from '../../components/icons/Shopify'
 import ShopifyDocumentStatus from '../../components/media/ShopifyDocumentStatus'
+import { GROUPS } from '../../constants'
 
-const GROUPS = [
-  {
-    name: 'theme',
-    title: 'Theme',
-  },
-  {
-    default: true,
-    name: 'editorial',
-    title: 'Editorial',
-  },
-  {
-    name: 'shopifySync',
-    title: 'Shopify sync',
-    icon: ShopifyIcon,
-  },
-  {
-    name: 'seo',
-    title: 'SEO',
-  },
-]
-
-export default defineType({
+export const collectionType = defineType({
   name: 'collection',
   title: 'Collection',
   type: 'document',
   icon: PackageIcon,
   groups: GROUPS,
   fields: [
-    // Product hidden status
     defineField({
       name: 'hidden',
       type: 'string',
@@ -47,29 +25,24 @@ export default defineType({
         return !isDeleted
       },
     }),
-    // Title (proxy)
     defineField({
       name: 'titleProxy',
       title: 'Title',
       type: 'proxyString',
       options: {field: 'store.title'},
     }),
-    // Slug (proxy)
     defineField({
       name: 'slugProxy',
       title: 'Slug',
       type: 'proxyString',
       options: {field: 'store.slug.current'},
     }),
-    // Color theme
     defineField({
       name: 'colorTheme',
-      title: 'Color theme',
       type: 'reference',
       to: [{type: 'colorTheme'}],
       group: 'theme',
     }),
-    // Vector
     defineField({
       name: 'vector',
       title: 'Vector artwork',
@@ -93,37 +66,30 @@ export default defineType({
           return true
         }),
     }),
-    // Show hero
     defineField({
       name: 'showHero',
-      title: 'Show hero',
       type: 'boolean',
       description: 'If disabled, page title will be displayed instead',
       group: 'editorial',
     }),
-    // Hero
     defineField({
       name: 'hero',
-      title: 'Hero',
-      type: 'hero.collection',
+      type: 'hero',
       hidden: ({document}) => !document?.showHero,
       group: 'editorial',
     }),
-    // Modules
     defineField({
       name: 'modules',
-      title: 'Modules',
       type: 'array',
       description: 'Editorial modules to associate with this collection',
       of: [
-        {type: 'module.callout'},
-        {type: 'module.callToAction'},
-        {type: 'module.image'},
-        {type: 'module.instagram'},
+        defineArrayMember({type: 'callout'}),
+        defineArrayMember({type: 'callToAction'}),
+        defineArrayMember({type: 'image'}),
+        defineArrayMember({type: 'instagram'}),
       ],
       group: 'editorial',
     }),
-    // Shopify collection
     defineField({
       name: 'store',
       title: 'Shopify',
@@ -131,11 +97,10 @@ export default defineType({
       description: 'Collection data from Shopify (read-only)',
       group: 'shopifySync',
     }),
-    // SEO
     defineField({
       name: 'seo',
       title: 'SEO',
-      type: 'seo.shopify',
+      type: 'seo',
       group: 'seo',
     }),
   ],
@@ -158,8 +123,7 @@ export default defineType({
       rules: 'store.rules',
       title: 'store.title',
     },
-    prepare(selection) {
-      const {imageUrl, isDeleted, rules, title} = selection
+    prepare({imageUrl, isDeleted, rules, title}) {
       const ruleCount = rules?.length || 0
 
       return {

package/templates/shopify/schemaTypes/documents/colorTheme.tsx

@@ -1,40 +1,27 @@
 import {IceCreamIcon} from '@sanity/icons'
-import React from 'react'
 import {defineField, defineType} from 'sanity'
 
 import ColorTheme from '../../components/media/ColorTheme'
 
-export default defineType({
+export const colorThemeType = defineType({
   name: 'colorTheme',
   title: 'Color theme',
   type: 'document',
   icon: IceCreamIcon,
-  groups: [
-    {
-      name: 'shopifySync',
-      title: 'Shopify sync',
-    },
-  ],
   fields: [
-    // Title
     defineField({
       name: 'title',
-      title: 'Title',
       type: 'string',
       validation: (Rule) => Rule.required(),
     }),
-    // Text color
     defineField({
       name: 'text',
-      title: 'Text',
       type: 'color',
       options: {disableAlpha: true},
       validation: (Rule) => Rule.required(),
     }),
-    // Background color
     defineField({
       name: 'background',
-      title: 'Background',
       type: 'color',
       options: {disableAlpha: true},
       validation: (Rule) => Rule.required(),
@@ -46,9 +33,7 @@ export default defineType({
       textColor: 'text.hex',
       title: 'title',
     },
-    prepare(selection) {
-      const {backgroundColor, textColor, title} = selection
-
+    prepare({backgroundColor, textColor, title}) {
       return {
         media: <ColorTheme background={backgroundColor} text={textColor} />,
         subtitle: `${textColor || '(No color)'} / ${backgroundColor || '(No color)'}`,

package/templates/shopify/schemaTypes/documents/page.ts

@@ -2,94 +2,67 @@ import {DocumentIcon} from '@sanity/icons'
 import {defineField} from 'sanity'
 
 import {validateSlug} from '../../utils/validateSlug'
+import { GROUPS } from '../../constants'
 
-export default defineField({
+export const pageType = defineField({
   name: 'page',
   title: 'Page',
   type: 'document',
   icon: DocumentIcon,
-  groups: [
-    {
-      name: 'theme',
-      title: 'Theme',
-    },
-    {
-      default: true,
-      name: 'editorial',
-      title: 'Editorial',
-    },
-    {
-      name: 'seo',
-      title: 'SEO',
-    },
-  ],
+  groups: GROUPS,
   fields: [
-    // Title
     defineField({
       name: 'title',
-      title: 'Title',
+      group: 'editorial',
       type: 'string',
       validation: (Rule) => Rule.required(),
     }),
-    // Slug
     defineField({
       name: 'slug',
+      group: 'editorial',
       type: 'slug',
       options: {source: 'title'},
-      // @ts-ignore - TODO - fix this TS error
       validation: validateSlug,
     }),
-    // Color theme
     defineField({
       name: 'colorTheme',
-      title: 'Color theme',
       type: 'reference',
       to: [{type: 'colorTheme'}],
       group: 'theme',
     }),
-    // Show hero
     defineField({
       name: 'showHero',
-      title: 'Show hero',
       type: 'boolean',
       description: 'If disabled, page title will be displayed instead',
       initialValue: false,
       group: 'editorial',
     }),
-    // Hero
     defineField({
       name: 'hero',
-      title: 'Hero',
-      type: 'hero.page',
+      type: 'hero',
       hidden: ({document}) => !document?.showHero,
       group: 'editorial',
     }),
-    // Body
     defineField({
       name: 'body',
-      title: 'Body',
-      type: 'body',
+      type: 'portableText',
       group: 'editorial',
     }),
-    // SEO
     defineField({
       name: 'seo',
       title: 'SEO',
-      type: 'seo.page',
+      type: 'seo',
       group: 'seo',
     }),
   ],
   preview: {
     select: {
-      active: 'active',
       seoImage: 'seo.image',
       title: 'title',
     },
-    prepare(selection) {
-      const {seoImage, title} = selection
-
+    prepare({seoImage, title}) {
       return {
-        media: seoImage,
+        media: seoImage ?? DocumentIcon,
         title,
       }
     },