test: add sanity-plugin-hotspot-array (#6401)

dev/test-studio/package.json

@@ -63,6 +63,7 @@
     "refractor": "^3.6.0",
     "rxjs": "^7.8.0",
     "sanity": "workspace:*",
+    "sanity-plugin-hotspot-array": "^2.0.0",
     "sanity-plugin-mux-input": "^2.2.1",
     "styled-components": "^6.1.0",
     "three": "^0.157.0",

dev/test-studio/sanity.config.ts

@@ -14,6 +14,7 @@ import {visionTool} from '@sanity/vision'
 import {defineConfig, definePlugin, type WorkspaceOptions} from 'sanity'
 import {presentationTool} from 'sanity/presentation'
 import {structureTool} from 'sanity/structure'
+import {imageHotspotArrayPlugin} from 'sanity-plugin-hotspot-array'
 import {muxInput} from 'sanity-plugin-mux-input'
 
 import {imageAssetSource} from './assetSources'
@@ -133,6 +134,7 @@ const sharedSettings = definePlugin({
     }),
     // eslint-disable-next-line camelcase
     muxInput({mp4_support: 'standard'}),
+    imageHotspotArrayPlugin(),
     presenceTool(),
     routerDebugTool(),
     tsdoc(),

dev/test-studio/schema/index.ts

@@ -82,6 +82,7 @@ import playlistTrack from './playlistTrack'
 import code from './plugins/code'
 import color from './plugins/color'
 import geopoint from './plugins/geopoint'
+import {hotspot, hotspotArrayTest} from './plugins/hotspotArray'
 import species from './species'
 import arrays, {topLevelArrayType, topLevelPrimitiveArrayType} from './standard/arrays'
 import booleans from './standard/booleans'
@@ -253,6 +254,8 @@ export const schemaTypes = [
   codeInputType,
   color,
   geopoint,
+  hotspot,
+  hotspotArrayTest,
 
   // Test documents with 3rd party plugin inputs
   markdown,

dev/test-studio/schema/plugins/hotspotArray.tsx

@@ -0,0 +1,61 @@
+import {defineField, defineType, type Rule} from 'sanity'
+
+export const hotspot = defineType({
+  name: 'hotspot',
+  type: 'object',
+  fieldsets: [{name: 'position', options: {columns: 2}}],
+  fields: [
+    {name: 'details', type: 'text', rows: 2},
+    {
+      name: 'x',
+      type: 'number',
+      readOnly: true,
+      fieldset: 'position',
+      initialValue: 50,
+      validation: (Rule: Rule) => Rule.required().min(0).max(100),
+    },
+    {
+      name: 'y',
+      type: 'number',
+      readOnly: true,
+      fieldset: 'position',
+      initialValue: 50,
+      validation: (Rule: Rule) => Rule.required().min(0).max(100),
+    },
+  ],
+  preview: {
+    select: {
+      title: 'details',
+      x: 'x',
+      y: 'y',
+    },
+    prepare({title, x, y}: any) {
+      return {
+        title,
+        subtitle: x && y ? `${x}% x ${y}%` : `No position set`,
+      }
+    },
+  },
+})
+
+export const hotspotArrayTest = defineType({
+  name: 'hotspotArrayTest',
+  type: 'document',
+  fields: [
+    defineField({name: 'title', type: 'string'}),
+    defineField({name: 'featureImage', type: 'image'}),
+    defineField({
+      name: 'hotspots',
+      type: 'array',
+      of: [{type: 'hotspot'}],
+      options: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore nbd
+        imageHotspot: {
+          imagePath: 'featureImage',
+          descriptionPath: 'details',
+        },
+      },
+    }),
+  ],
+})

dev/test-studio/structure/constants.ts

@@ -29,6 +29,7 @@ export const PLUGIN_INPUT_TYPES = [
   'codeTest',
   'colorTest',
   'geopointTest',
+  'hotspotArrayTest',
   //'orderableCategory',
   //'orderableTag',
 ]