feat: add paginated table example, update example project (#16)

* feat: add paginated table example

* chore: fix types

* chore: add comments

* feat: add new example dataset, update examples

* chore!: remove previous example studio

Author: colepeters

studio-sdk-examples/.gitignore renamed to sdk-examples-movies/.gitignore

@@ -1,9 +1,10 @@
-# Sanity Clean Content Studio
+# Sanity Movies 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 one of the example frontends: [React](https://github.com/sanity-io/example-frontend-next-js) | [React Native](https://github.com/sanity-io/example-app-react-native) | [Vue](https://github.com/sanity-io/example-frontend-vue-js) | [PHP](https://github.com/sanity-io/example-frontend-silex-twig)
 - [Join the community Slack](https://slack.sanity.io/?utm_source=readme)
 - [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme)

studio-sdk-examples/README.md renamed to sdk-examples-movies/README.md

@@ -1,5 +1,5 @@
 {
-  "name": "sdk-examples",
+  "name": "sdk-examples-movies",
   "private": true,
   "version": "1.0.0",
   "main": "package.json",
@@ -15,14 +15,15 @@
     "sanity"
   ],
   "dependencies": {
-    "@sanity/vision": "^3.71.2",
+    "@sanity/vision": "^3.80.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sanity": "^3.71.2",
+    "react-icons": "^3.11.0",
+    "sanity": "^3.80.1",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {
-    "@sanity/eslint-config-studio": "^5.0.1",
+    "@sanity/eslint-config-studio": "^5.0.2",
     "@types/react": "^18.0.25",
     "eslint": "^9.9.0",
     "prettier": "^3.0.2",

studio-sdk-examples/eslint.config.mjs renamed to sdk-examples-movies/eslint.config.mjs

@@ -2,7 +2,7 @@ import {defineCliConfig} from 'sanity/cli'
 
 export default defineCliConfig({
   api: {
-    projectId: 'flahoy03',
+    projectId: 'v28v5k8m',
     dataset: 'production'
   },
   /**

studio-sdk-examples/package.json renamed to sdk-examples-movies/package.json

@@ -5,12 +5,15 @@ import {schemaTypes} from './schemaTypes'
 
 export default defineConfig({
   name: 'default',
-  title: 'sdk-examples',
+  title: 'sdk-examples-movies',
 
-  projectId: 'flahoy03',
+  projectId: 'v28v5k8m',
   dataset: 'production',
 
-  plugins: [structureTool(), visionTool()],
+  plugins: [
+    structureTool(),
+    visionTool(),
+  ],
 
   schema: {
     types: schemaTypes,

studio-sdk-examples/pnpm-lock.yaml renamed to sdk-examples-movies/pnpm-lock.yaml

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

studio-sdk-examples/sanity.cli.ts renamed to sdk-examples-movies/sanity.cli.ts

@@ -0,0 +1,37 @@
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'castMember',
+  title: 'Cast Member',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'characterName',
+      title: 'Character Name',
+      type: 'string',
+    }),
+    defineField({
+      name: 'person',
+      title: 'Actor',
+      type: 'reference',
+      to: [{type: 'person'}],
+    }),
+    defineField({
+      name: 'externalId',
+      title: 'External ID',
+      type: 'number',
+    }),
+    defineField({
+      name: 'externalCreditId',
+      title: 'External Credit ID',
+      type: 'string',
+    }),
+  ],
+  preview: {
+    select: {
+      subtitle: 'characterName',
+      title: 'person.name',
+      media: 'person.image',
+    },
+  },
+})

studio-sdk-examples/sanity.config.ts renamed to sdk-examples-movies/sanity.config.ts

@@ -0,0 +1,52 @@
+// @ts-check
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'crewMember',
+  title: 'Crew Member',
+  type: 'object',
+  fields: [
+    defineField({
+      name: 'department',
+      title: 'Department',
+      type: 'string',
+    }),
+    defineField({
+      name: 'job',
+      title: 'Job',
+      type: 'string',
+    }),
+    defineField({
+      name: 'person',
+      title: 'Person',
+      type: 'reference',
+      to: [{type: 'person'}],
+    }),
+    defineField({
+      name: 'externalId',
+      title: 'External ID',
+      type: 'number',
+    }),
+    defineField({
+      name: 'externalCreditId',
+      title: 'External Credit ID',
+      type: 'string',
+    }),
+  ],
+  preview: {
+    select: {
+      name: 'person.name',
+      job: 'job',
+      department: 'department',
+      media: 'person.image',
+    },
+    prepare(selection) {
+      const {name, job, department, media} = selection
+      return {
+        title: name,
+        subtitle: `${job} [${department}]`,
+        media,
+      }
+    },
+  },
+})