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

package/templates/ecommerce/README.md

@@ -0,0 +1,11 @@
+# Sanity Ecommerce Content Studio
+
+Congratulations, you have now installed the Sanity Content Studio, an open-source real-time content editing environment connected to the Sanity backend.
+
+Now you can do the following things:
+
+- [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme)
+- Check out the example frontend: [Vue/Nuxt.js](https://github.com/sanity-io/example-ecommerce-snipcart-vue)
+- [Read the blog post about this template](https://www.sanity.io/blog/e-commerce-vue-nuxt-snipcart?uutm_source=readme)
+- [Join the Sanity community](https://www.sanity.io/community/join?utm_source=readme)
+- [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)

package/templates/ecommerce/plugins/.gitkeep

@@ -0,0 +1 @@
+User-specific packages can be placed here

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

@@ -0,0 +1,62 @@
+// Copied from packages/@sanity/cli/templates/ecommerce/plugins/barcode-input/BarcodeInput.js
+
+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'
+
+const BarcodeRoot = styled(Box)`
+  svg {
+    display: block;
+    margin: 1em auto;
+    max-width: 100%;
+  }
+`
+
+const FieldWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-gap: 1em;
+`
+
+const ErrorMessage = styled(Text)`
+  color: #e66666;
+  text-align: center;
+  padding: 1em;
+`
+
+export const BarcodeInput = function BarcodeInput(props) {
+  const {value, renderInput, renderItem, renderPreview, renderField, members} = props
+  const [valid, setValid] = useState(true)
+
+  const memberFields = members.filter((member) => member.kind === 'field')
+
+  return (
+    <>
+      <BarcodeRoot>
+        {value && value.barcode && (
+          <Barcode
+            textAlign="center"
+            value={value.barcode}
+            format={value.format || ''}
+            valid={setValid}
+          />
+        )}
+        {!valid && <ErrorMessage>Not a valid {value?.format}</ErrorMessage>}
+      </BarcodeRoot>
+      <FieldWrapper>
+        {memberFields.map((member) => (
+          <MemberField
+            key={member.key}
+            member={member}
+            renderInput={renderInput}
+            renderField={renderField}
+            renderItem={renderItem}
+            renderPreview={renderPreview}
+          />
+        ))}
+      </FieldWrapper>
+    </>
+  )
+}

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

@@ -0,0 +1,9 @@
+import {definePlugin} from 'sanity'
+import {barcodeSchemaType} from './schemaType'
+
+export const barcodeInput = definePlugin({
+  name: 'barcode-input',
+  schema: {
+    types: [barcodeSchemaType],
+  },
+})

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

@@ -0,0 +1,60 @@
+// Copied from packages/@sanity/cli/templates/ecommerce/plugins/barcode-input/BarcodeType.js
+
+import {defineField, defineType} from 'sanity'
+import {BarcodeInput} from './BarcodeInput'
+
+export const barcodeSchemaType = defineType({
+  name: 'barcode',
+  title: 'Barcode',
+  type: 'object',
+
+  components: {
+    input: BarcodeInput,
+  },
+
+  preview: {
+    select: {
+      title: 'barcode',
+      subtitle: 'format',
+    },
+  },
+
+  fields: [
+    defineField({
+      name: 'barcode',
+      title: 'Barcode',
+      type: 'string',
+    }),
+
+    defineField({
+      name: 'format',
+      title: 'Barcode Format',
+      type: 'string',
+      options: {
+        list: [
+          'CODE39',
+          'CODE128',
+          'CODE128A',
+          'CODE128B',
+          'CODE128C',
+          'EAN13',
+          'EAN8',
+          'EAN5',
+          'EAN2',
+          'UPC',
+          'UPCE',
+          'ITF14',
+          'ITF',
+          'MSI',
+          'MSI10',
+          'MSI11',
+          'MSI1010',
+          'MSI1110',
+          'pharmacode',
+          'codabar',
+          'GenericBarcode',
+        ],
+      },
+    }),
+  ],
+})

package/templates/ecommerce/schemaTypes/blockContent.js

@@ -0,0 +1,67 @@
+import {defineArrayMember, defineType} from 'sanity'
+
+/**
+ * This is the schema definition for the rich text fields used for
+ * for this blog studio. When you import it in schemas.js it can be
+ * reused in other parts of the studio with:
+ *  {
+ *    name: 'someName',
+ *    title: 'Some title',
+ *    type: 'blockContent'
+ *  }
+ */
+export default defineType({
+  title: 'Block Content',
+  name: 'blockContent',
+  type: 'array',
+  of: [
+    defineArrayMember({
+      title: 'Block',
+      type: 'block',
+      // Styles let you set what your user can mark up blocks with. These
+      // correspond with HTML tags, but you can set any title or value
+      // you want and decide how you want to deal with it where you want to
+      // use your content.
+      styles: [
+        {title: 'Normal', value: 'normal'},
+        {title: 'H1', value: 'h1'},
+        {title: 'H2', value: 'h2'},
+        {title: 'H3', value: 'h3'},
+        {title: 'H4', value: 'h4'},
+        {title: 'Quote', value: 'blockquote'},
+      ],
+      lists: [{title: 'Bullet', value: 'bullet'}],
+      // Marks let you mark up inline text in the block editor.
+      marks: {
+        // Decorators usually describe a single property – e.g. a typographic
+        // preference or highlighting by editors.
+        decorators: [
+          {title: 'Strong', value: 'strong'},
+          {title: 'Emphasis', value: 'em'},
+        ],
+        // Annotations can be any object structure – e.g. a link or a footnote.
+        annotations: [
+          {
+            title: 'URL',
+            name: 'link',
+            type: 'object',
+            fields: [
+              {
+                title: 'URL',
+                name: 'href',
+                type: 'url',
+              },
+            ],
+          },
+        ],
+      },
+    }),
+    // You can add additional types here. Note that you can't use
+    // primitive types such as 'string' and 'number' in the same array
+    // as a block type.
+    defineArrayMember({
+      type: 'image',
+      options: {hotspot: true},
+    }),
+  ],
+})

package/templates/ecommerce/schemaTypes/category.js

@@ -0,0 +1,39 @@
+import {defineArrayMember, defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'category',
+  title: 'Category',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    }),
+    defineField({
+      name: 'slug',
+      title: 'Slug',
+      type: 'slug',
+      options: {
+        source: 'title',
+        maxLength: 96,
+      },
+    }),
+    defineField({
+      name: 'description',
+      title: 'Description',
+      type: 'text',
+    }),
+    defineField({
+      name: 'parents',
+      title: 'Parent categories',
+      type: 'array',
+      of: [
+        defineArrayMember({
+          type: 'reference',
+          to: [{type: 'category'}],
+        }),
+      ],
+    }),
+  ],
+})

package/templates/ecommerce/schemaTypes/index.js

@@ -0,0 +1,23 @@
+import blockContent from './blockContent'
+import category from './category'
+import product from './product'
+import vendor from './vendor'
+import productVariant from './productVariant'
+
+import localeString from './locale/localeString'
+import localeText from './locale/localeText'
+import localeBlockContent from './locale/localeBlockContent'
+
+export const schemaTypes = [
+  // Document types
+  product,
+  vendor,
+  category,
+
+  // Other types
+  blockContent,
+  localeText,
+  localeBlockContent,
+  localeString,
+  productVariant,
+]

package/templates/ecommerce/schemaTypes/locale/localeBlockContent.js

@@ -0,0 +1,19 @@
+import supportedLanguages from './supportedLanguages'
+
+export default {
+  name: 'localeBlockContent',
+  type: 'object',
+  fieldsets: [
+    {
+      title: 'Translations',
+      name: 'translations',
+      options: {collapsible: true},
+    },
+  ],
+  fields: supportedLanguages.map((lang) => ({
+    title: lang.title,
+    name: lang.id,
+    type: 'blockContent',
+    fieldset: lang.isDefault ? null : 'translations',
+  })),
+}

package/templates/ecommerce/schemaTypes/locale/localeString.js

@@ -0,0 +1,19 @@
+import supportedLanguages from './supportedLanguages'
+
+export default {
+  name: 'localeString',
+  type: 'object',
+  fieldsets: [
+    {
+      title: 'Translations',
+      name: 'translations',
+      options: {collapsible: true},
+    },
+  ],
+  fields: supportedLanguages.map((lang) => ({
+    title: lang.title,
+    name: lang.id,
+    type: 'string',
+    fieldset: lang.isDefault ? null : 'translations',
+  })),
+}

package/templates/ecommerce/schemaTypes/locale/localeText.js

@@ -0,0 +1,19 @@
+import supportedLanguages from './supportedLanguages'
+
+export default {
+  name: 'localeText',
+  type: 'object',
+  fieldsets: [
+    {
+      title: 'Translations',
+      name: 'translations',
+      options: {collapsible: true},
+    },
+  ],
+  fields: supportedLanguages.map((lang) => ({
+    title: lang.title,
+    name: lang.id,
+    type: 'text',
+    fieldset: lang.isDefault ? null : 'translations',
+  })),
+}

package/templates/ecommerce/schemaTypes/locale/supportedLanguages.js

@@ -0,0 +1,5 @@
+export default [
+  {id: 'en', title: 'English', isDefault: true},
+  {id: 'es', title: 'Spanish'},
+  {id: 'nb', title: 'Norwegian'},
+]

package/templates/ecommerce/schemaTypes/product.js

@@ -0,0 +1,83 @@
+import {defineArrayMember, defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'product',
+  title: 'Product',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    }),
+    defineField({
+      name: 'slug',
+      title: 'Slug',
+      type: 'slug',
+      options: {
+        source: 'title',
+        maxLength: 96,
+      },
+    }),
+    defineField({
+      title: 'Default variant',
+      name: 'defaultProductVariant',
+      type: 'productVariant',
+    }),
+    defineField({
+      title: 'Variants',
+      name: 'variants',
+      type: 'array',
+      of: [
+        defineArrayMember({
+          title: 'Variant',
+          type: 'productVariant',
+        }),
+      ],
+    }),
+    defineField({
+      title: 'Tags',
+      name: 'tags',
+      type: 'array',
+      of: [defineArrayMember({type: 'string'})],
+      options: {
+        layout: 'tags',
+      },
+    }),
+    defineField({
+      name: 'vendor',
+      title: 'Vendor',
+      type: 'reference',
+      to: {type: 'vendor'},
+    }),
+    defineField({
+      name: 'blurb',
+      title: 'Blurb',
+      type: 'localeString',
+    }),
+    defineField({
+      name: 'categories',
+      title: 'Categories',
+      type: 'array',
+      of: [
+        defineArrayMember({
+          type: 'reference',
+          to: {type: 'category'},
+        }),
+      ],
+    }),
+    defineField({
+      name: 'body',
+      title: 'Body',
+      type: 'localeBlockContent',
+    }),
+  ],
+
+  preview: {
+    select: {
+      title: 'title',
+      manufactor: 'manufactor.title',
+      media: 'defaultProductVariant.images[0]',
+    },
+  },
+})

package/templates/ecommerce/schemaTypes/productVariant.js

@@ -0,0 +1,52 @@
+import {defineArrayMember, defineField, defineType} from 'sanity'
+
+export default defineType({
+  title: 'Product variant',
+  name: 'productVariant',
+  type: 'object',
+  fields: [
+    defineField({
+      title: 'Title',
+      name: 'title',
+      type: 'string',
+    }),
+    defineField({
+      title: 'Weight in grams',
+      name: 'grams',
+      type: 'number',
+    }),
+    defineField({
+      title: 'Price',
+      name: 'price',
+      type: 'number',
+    }),
+    defineField({
+      title: 'SKU',
+      name: 'sku',
+      type: 'string',
+    }),
+    defineField({
+      title: 'Taxable',
+      name: 'taxable',
+      type: 'boolean',
+    }),
+    defineField({
+      name: 'images',
+      title: 'Images',
+      type: 'array',
+      of: [
+        defineArrayMember({
+          type: 'image',
+          options: {
+            hotspot: true,
+          },
+        }),
+      ],
+    }),
+    defineField({
+      title: 'Bar code',
+      name: 'barcode',
+      type: 'barcode',
+    }),
+  ],
+})

package/templates/ecommerce/schemaTypes/vendor.js

@@ -0,0 +1,39 @@
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'vendor',
+  title: 'Vendor',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    }),
+    defineField({
+      name: 'slug',
+      title: 'Slug',
+      type: 'slug',
+      options: {
+        source: 'title',
+        maxLength: 96,
+      },
+    }),
+    defineField({
+      name: 'logo',
+      title: 'logo',
+      type: 'image',
+    }),
+    defineField({
+      name: 'description',
+      title: 'Description',
+      type: 'blockContent',
+    }),
+  ],
+  preview: {
+    select: {
+      title: 'title',
+      media: 'logo',
+    },
+  },
+})

package/templates/ecommerce/static/.gitkeep

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

package/templates/get-started/README.md

@@ -0,0 +1,9 @@
+# Sanity Clean Content Studio
+
+Congratulations, you have now installed the Sanity Content Studio, an open-source real-time content editing environment connected to the Sanity backend.
+
+Now you can do the following things:
+
+- [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme)
+- [Join the Sanity community](https://www.sanity.io/community/join?utm_source=readme)
+- [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)

package/templates/get-started/plugins/.gitkeep

@@ -0,0 +1 @@
+User-specific packages can be placed here

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import {LayoutProps, useCurrentUser} from 'sanity'
+import {GetStartedTutorial} from './GetStartedTutorial'
+
+export function CustomDefaultLayout(props: LayoutProps) {
+  const user = useCurrentUser()
+
+  const showTutorial = Boolean(user?.roles?.length)
+
+  return (
+    <>
+      {showTutorial && <GetStartedTutorial />}
+      {props.renderDefault(props)}
+    </>
+  )
+}

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

@@ -0,0 +1,104 @@
+import React, {useState} from 'react'
+import {
+  Card,
+  Container,
+  Button,
+  Flex,
+  Label,
+  Heading,
+  Text,
+  Stack,
+  useElementSize,
+  useTheme,
+} from '@sanity/ui'
+import {CloseIcon} from '@sanity/icons'
+import {css, styled} from 'styled-components'
+
+const BlueColor = css`
+  color: ${({theme}) => theme.sanity.color.muted.primary.enabled.fg};
+`
+
+const LabelContainer = styled(Label)`
+  ${BlueColor}
+`
+
+const TextContainer = styled(Text)`
+  ${BlueColor}
+`
+
+export const GetStartedTutorial = () => {
+  const [hideTutorial, setShowTutorial] = useState(
+    window.localStorage.getItem('getstarted_closedTutorial') !== null,
+  )
+
+  const {sanity} = useTheme()
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const rect = useElementSize(rootElement)
+  const width = rect?.content?.width
+  const isSmallScreen = width ? width < sanity.media[1] : false
+  const isProdEnv = process.env.NODE_ENV !== 'development'
+
+  const onClose = () => {
+    window.localStorage.setItem('getstarted_closedTutorial', 'true')
+    setShowTutorial(true)
+  }
+
+  if (hideTutorial || isProdEnv) {
+    return null
+  }
+
+  return (
+    <div ref={setRootElement}>
+      <Card tone="primary" padding={isSmallScreen ? 3 : 5} paddingBottom={isSmallScreen ? 4 : 6}>
+        <Flex justify={isSmallScreen ? 'space-between' : 'flex-end'} align="center">
+          {isSmallScreen && (
+            <LabelContainer forwardedAs="p">Your Sanity Studio is all set up!</LabelContainer>
+          )}
+
+          <Button
+            aria-label="Close dialog"
+            icon={CloseIcon}
+            mode="bleed"
+            onClick={onClose}
+            padding={isSmallScreen ? undefined : 3}
+          />
+        </Flex>
+        <Stack space={5}>
+          {!isSmallScreen && (
+            <>
+              <LabelContainer forwardedAs="p" align="center">
+                Get started with sanity
+              </LabelContainer>
+
+              <Heading as="h1" size={4} align="center">
+                Your Sanity Studio is all set up!
+              </Heading>
+            </>
+          )}
+
+          <Container width={1}>
+            <TextContainer
+              forwardedAs="p"
+              size={isSmallScreen ? 1 : undefined}
+              align={isSmallScreen ? 'left' : 'center'}
+            >
+              Next, our docs will guide you through building schema types, adding content, and
+              connecting a frontend. You’ll see updates reflected in your Studio below.
+            </TextContainer>
+          </Container>
+
+          <Flex justify={isSmallScreen ? 'flex-start' : 'center'}>
+            <Button
+              as="a"
+              href="https://www.sanity.io/docs/create-a-schema-and-configure-sanity-studio"
+              target="_blank"
+              padding={isSmallScreen ? undefined : 4}
+              tone="primary"
+              text="Build a schema"
+            />
+          </Flex>
+        </Stack>
+      </Card>
+    </div>
+  )
+}

package/templates/get-started/plugins/sanity-plugin-tutorial/index.ts

@@ -0,0 +1,11 @@
+import {definePlugin} from 'sanity'
+import {CustomDefaultLayout} from './CustomDefaultLayout'
+
+export const getStartedPlugin = definePlugin({
+  name: 'sanity-plugin-tutorial',
+  studio: {
+    components: {
+      layout: CustomDefaultLayout,
+    },
+  },
+})

package/templates/get-started/schemaTypes/index.ts

@@ -0,0 +1 @@
+export const schemaTypes = []

package/templates/get-started/static/.gitkeep

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