chore: add initial page-building test studio (#6735)

This is just some initial test studio code to get us going on page building.
Nothing is set in stone.

dev/page-building-studio/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@sanity/eslint-config-studio"
+}

dev/page-building-studio/.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# Compiled Sanity Studio
+/dist
+
+# Temporary Sanity runtime, generated by the CLI on every dev server start
+/.sanity
+
+# Logs
+/logs
+*.log
+
+# Coverage directory used by testing tools
+/coverage
+
+# Misc
+.DS_Store
+*.pem
+
+# Typescript
+*.tsbuildinfo
+
+# Dotenv and similar local-only files
+*.local

dev/page-building-studio/README.md

@@ -0,0 +1 @@
+# Page Building Studio

dev/page-building-studio/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "sanity-page-building-studio",
+  "version": "3.43.0",
+  "private": true,
+  "license": "MIT",
+  "author": "Sanity.io <[email protected]>",
+  "scripts": {
+    "build": "../.bin/sanity build",
+    "clean": "rimraf .sanity dist",
+    "dev": "../.bin/sanity dev",
+    "lint": "eslint .",
+    "start": "../.bin/sanity start"
+  },
+  "dependencies": {
+    "@sanity/vision": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
+    "sanity": "workspace:*",
+    "styled-components": "^6.1.8"
+  }
+}

dev/page-building-studio/sanity.cli.ts

@@ -0,0 +1,8 @@
+import {defineCliConfig} from 'sanity/cli'
+
+export default defineCliConfig({
+  api: {
+    projectId: 'ppsg7ml5',
+    dataset: 'page-building',
+  },
+})

dev/page-building-studio/sanity.config.ts

@@ -0,0 +1,19 @@
+import {visionTool} from '@sanity/vision'
+import {defineConfig} from 'sanity'
+import {structureTool} from 'sanity/structure'
+
+import {schemaTypes} from './schemaTypes'
+
+export default defineConfig({
+  name: 'page-building',
+  title: 'Page Building',
+
+  projectId: 'ppsg7ml5',
+  dataset: 'page-building',
+
+  plugins: [structureTool(), visionTool()],
+
+  schema: {
+    types: schemaTypes,
+  },
+})

dev/page-building-studio/schemaTypes/hero.ts

@@ -0,0 +1,33 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import {MdMonitor} from 'react-icons/md'
+import {defineField, defineType} from 'sanity'
+
+export const hero = defineType({
+  type: 'object',
+  name: 'hero',
+  title: 'Hero',
+  fields: [
+    defineField({
+      type: 'string',
+      name: 'title',
+      title: 'Title',
+    }),
+    defineField({
+      type: 'string',
+      name: 'lead',
+      title: 'Lead',
+    }),
+  ],
+  preview: {
+    select: {
+      title: 'title',
+    },
+    prepare({title}) {
+      return {
+        title,
+        subtitle: 'Hero',
+        media: MdMonitor,
+      }
+    },
+  },
+})

dev/page-building-studio/schemaTypes/index.ts

@@ -0,0 +1,6 @@
+import {hero} from './hero'
+import {logoCarousel} from './logoCarousel'
+import {page} from './page'
+import {testimonial, testimonials} from './testimonials'
+
+export const schemaTypes = [page, hero, logoCarousel, testimonial, testimonials]

dev/page-building-studio/schemaTypes/logoCarousel.ts

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import {FaArrowsRotate} from 'react-icons/fa6'
+import {defineField, defineType} from 'sanity'
+
+export const logoCarousel = defineType({
+  type: 'object',
+  name: 'logo-carousel',
+  title: 'Logos',
+  description: 'Logo carousel',
+  fields: [
+    defineField({
+      type: 'array',
+      name: 'logos',
+      title: 'Logos',
+      of: [{type: 'image'}],
+    }),
+  ],
+  preview: {
+    select: {},
+    prepare() {
+      return {
+        title: 'Logos',
+        subtitle: 'Logo carousel',
+        media: FaArrowsRotate,
+      }
+    },
+  },
+})

dev/page-building-studio/schemaTypes/page.ts

@@ -0,0 +1,20 @@
+import {defineField, defineType} from 'sanity'
+
+export const page = defineType({
+  type: 'document',
+  name: 'page',
+  title: 'Page',
+  fields: [
+    defineField({
+      type: 'string',
+      name: 'title',
+      title: 'Title',
+    }),
+    defineField({
+      name: 'blocks',
+      title: 'Blocks',
+      type: 'array',
+      of: [{type: 'hero'}, {type: 'logo-carousel'}, {type: 'testimonials'}],
+    }),
+  ],
+})

dev/page-building-studio/schemaTypes/testimonials.ts

@@ -0,0 +1,65 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import {SlSpeech} from 'react-icons/sl'
+import {defineField, defineType} from 'sanity'
+
+export const testimonials = defineType({
+  type: 'object',
+  name: 'testimonials',
+  title: 'Testimonials',
+  fields: [
+    defineField({
+      type: 'array',
+      name: 'testimonials',
+      title: 'Testimonials',
+      of: [
+        {
+          type: 'reference',
+          to: [{type: 'testimonial'}],
+        },
+      ],
+    }),
+  ],
+  preview: {
+    select: {
+      testimonials: 'testimonials',
+      quotee0: 'testimonials.0.quotee',
+      quotee1: 'testimonials.1.quotee',
+      quotee2: 'testimonials.2.quotee',
+    },
+    prepare({quotee0, quotee1, quotee2}) {
+      const quotees = [quotee0, quotee1].filter(Boolean)
+      const subtitle = quotees.length > 0 ? quotees.join(', ') : ''
+      const hasMore = Boolean(quotee2)
+
+      return {
+        title: 'Testimonials',
+        subtitle: hasMore ? `${subtitle}...` : subtitle,
+        media: SlSpeech,
+      }
+    },
+  },
+})
+
+export const testimonial = defineType({
+  type: 'document',
+  name: 'testimonial',
+  title: 'Testimonial',
+  fields: [
+    defineField({
+      type: 'array',
+      name: 'quote',
+      title: 'Quote',
+      of: [{type: 'block'}],
+    }),
+    defineField({
+      type: 'string',
+      name: 'quotee',
+      title: 'Quotee',
+    }),
+    defineField({
+      type: 'string',
+      name: 'jobTitle',
+      title: 'Job Title',
+    }),
+  ],
+})

dev/page-building-studio/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["../tsconfig.dev"]
+}

package.json

@@ -35,6 +35,7 @@
     "dev:embedded-studio": "pnpm --filter embedded-studio dev",
     "dev:i18n": "SANITY_STUDIO_DEBUG_I18N=triangles pnpm start",
     "dev:i18n:reverse": "SANITY_STUDIO_DEBUG_I18N=reverse pnpm start",
+    "dev:page-building-studio": "pnpm --filter sanity-page-building-studio dev",
     "dev:starter-studio": "pnpm --filter sanity-starter-studio dev",
     "dev:strict-studio": "pnpm --filter sanity-strict-studio dev",
     "dev:test-studio": "pnpm --filter sanity-test-studio dev",