feat(@sanity/presets): adds image preset with image, alt text and caption fields (#824)

* feat(@sanity/presets): adds image preset with image, alt text and caption fields

* fix(@sanity/presets): dynamic preview title based on enabled fields

* refactor(@sanity/presets): use destructuring defaults for image preset config

Author: jordanl17

dev/test-studio/src/presets/index.tsx

@@ -1,6 +1,8 @@
 import {
   CTA_TYPE_NAME,
   ctaType,
+  IMAGE_TYPE_NAME,
+  imageType,
   LINK_TYPE_NAME,
   linkType,
   PAGE_TYPE_NAME,
@@ -35,6 +37,11 @@ const corePresetsTest = defineType({
       title: 'CTA',
       type: CTA_TYPE_NAME,
     },
+    {
+      name: 'featuredImage',
+      title: 'Featured image',
+      type: IMAGE_TYPE_NAME,
+    },
   ],
 })
 
@@ -45,6 +52,16 @@ export const presetsWorkspace = definePlugin(() => ({
         internalTypes: [PAGE_TYPE_NAME],
       }),
       ctaType(),
+      imageType({
+        map: {
+          fields: (fields = []) =>
+            fields.map((field) =>
+              field.name === 'caption'
+                ? {...field, name: 'description', title: 'Description'}
+                : field,
+            ),
+        },
+      }),
       pageType({
         pageBuilderBlocks: ['blockquote'],
       }),

plugins/@sanity/presets/src/__snapshots__/index.test.ts.snap

@@ -4,10 +4,12 @@ exports[`package exports 1`] = `
 {
   ".": {
     "CTA_TYPE_NAME": "string",
+    "IMAGE_TYPE_NAME": "string",
     "LINK_TYPE_NAME": "string",
     "PAGE_TYPE_NAME": "string",
     "SEO_TYPE_NAME": "string",
     "ctaType": "function",
+    "imageType": "function",
     "linkType": "function",
     "pageType": "function",
     "presets": "function",

plugins/@sanity/presets/src/index.ts

@@ -1,7 +1,9 @@
 export {presets} from './composer'
 export {linkType, LINK_TYPE_NAME} from './presets/link-type'
 export {ctaType, CTA_TYPE_NAME} from './presets/cta-type'
+export {imageType, IMAGE_TYPE_NAME} from './presets/image-type'
 export {pageType, PAGE_TYPE_NAME} from './presets/page-type'
 export {seoType, SEO_TYPE_NAME} from './presets/seo-type'
+export type {ImageTypeConfig} from './presets/image-type'
 export type {LinkTypeConfig} from './presets/link-type'
 export type {PresetResult} from './types'

plugins/@sanity/presets/src/presets/image-type/constants.ts

@@ -0,0 +1 @@
+export const IMAGE_TYPE_NAME = 'core.presets.image'

plugins/@sanity/presets/src/presets/image-type/image-type.test.ts

@@ -0,0 +1,146 @@
+import type {FieldDefinition} from 'sanity'
+import {describe, expect, test} from 'vitest'
+
+import {IMAGE_TYPE_NAME} from './constants'
+import {imageType} from './index'
+
+function getFields(result: ReturnType<typeof imageType>): FieldDefinition[] {
+  const typeDef = result[0]?.type
+  if (!typeDef || !('fields' in typeDef) || !typeDef.fields) {
+    throw new Error('Expected an object type definition with fields')
+  }
+  return typeDef.fields
+}
+
+function getField(fields: FieldDefinition[], name: string): FieldDefinition {
+  const field = fields.find((entry) => entry.name === name)
+  if (!field) {
+    throw new Error(`Field "${name}" not found`)
+  }
+  return field
+}
+
+describe('imageType', () => {
+  test('returns one type named core.presets.image', () => {
+    const result = imageType()
+
+    expect(result).toHaveLength(1)
+    expect(result[0]?.type?.name).toBe(IMAGE_TYPE_NAME)
+  })
+
+  test('default config includes image, altText, and caption fields', () => {
+    const fields = getFields(imageType())
+
+    expect(fields).toHaveLength(3)
+
+    const fieldNames = fields.map((field) => field.name)
+    expect(fieldNames).toEqual(['image', 'altText', 'caption'])
+  })
+
+  test('altText: false excludes the altText field', () => {
+    const fields = getFields(imageType({altText: false}))
+
+    expect(fields).toHaveLength(2)
+
+    const fieldNames = fields.map((field) => field.name)
+    expect(fieldNames).toEqual(['image', 'caption'])
+  })
+
+  test('caption: false excludes the caption field', () => {
+    const fields = getFields(imageType({caption: false}))
+
+    expect(fields).toHaveLength(2)
+
+    const fieldNames = fields.map((field) => field.name)
+    expect(fieldNames).toEqual(['image', 'altText'])
+  })
+
+  test('both altText and caption disabled leaves only the image field', () => {
+    const fields = getFields(imageType({altText: false, caption: false}))
+
+    expect(fields).toHaveLength(1)
+
+    const fieldNames = fields.map((field) => field.name)
+    expect(fieldNames).toEqual(['image'])
+  })
+
+  test('hotspot is enabled by default', () => {
+    const fields = getFields(imageType())
+    const imageField = getField(fields, 'image')
+
+    expect(imageField).toHaveProperty('options.hotspot', true)
+  })
+
+  test('hotspot: false disables hotspot on the image field', () => {
+    const fields = getFields(imageType({hotspot: false}))
+    const imageField = getField(fields, 'image')
+
+    expect(imageField).toHaveProperty('options.hotspot', false)
+  })
+
+  test('user-provided fields are appended', () => {
+    const result = imageType({
+      fields: [{name: 'credit', type: 'string', title: 'Credit'}],
+    })
+    const fields = getFields(result)
+
+    expect(fields).toHaveLength(4)
+
+    const fieldNames = fields.map((field) => field.name)
+    expect(fieldNames).toEqual(['image', 'altText', 'caption', 'credit'])
+  })
+})
+
+describe('imageType map hooks', () => {
+  test('map.fields can rename the caption field', () => {
+    const result = imageType({
+      map: {
+        fields: (fields = []) =>
+          fields.map((field) =>
+            field.name === 'caption'
+              ? {...field, name: 'description', title: 'Description'}
+              : field,
+          ),
+      },
+    })
+    const fields = getFields(result)
+
+    const fieldNames = fields.map((field) => field.name)
+    expect(fieldNames).toEqual(['image', 'altText', 'description'])
+    expect(getField(fields, 'image').type).toBe('image')
+    expect(getField(fields, 'altText').type).toBe('string')
+    expect(getField(fields, 'description').title).toBe('Description')
+  })
+})
+
+describe('imageType preview.select', () => {
+  test('selects altText as title by default', () => {
+    const typeDef = imageType()[0]?.type
+    const select = typeDef && 'preview' in typeDef ? typeDef.preview?.select : undefined
+
+    expect(select).toEqual({
+      title: 'altText',
+      media: 'image',
+    })
+  })
+
+  test('selects caption as title when altText is disabled', () => {
+    const typeDef = imageType({altText: false})[0]?.type
+    const select = typeDef && 'preview' in typeDef ? typeDef.preview?.select : undefined
+
+    expect(select).toEqual({
+      title: 'caption',
+      media: 'image',
+    })
+  })
+
+  test('selects filename as title when altText and caption are disabled', () => {
+    const typeDef = imageType({altText: false, caption: false})[0]?.type
+    const select = typeDef && 'preview' in typeDef ? typeDef.preview?.select : undefined
+
+    expect(select).toEqual({
+      title: 'image.asset.originalFilename',
+      media: 'image',
+    })
+  })
+})

plugins/@sanity/presets/src/presets/image-type/index.ts

@@ -0,0 +1,62 @@
+import {defineField, defineType} from 'sanity'
+
+import {definePresetType} from '../../definePresetType'
+import {IMAGE_TYPE_NAME} from './constants'
+
+export {IMAGE_TYPE_NAME} from './constants'
+
+export interface ImageTypeConfig {
+  altText?: boolean
+  caption?: boolean
+  hotspot?: boolean
+}
+
+export const imageType = definePresetType<ImageTypeConfig, 'object', 'preview'>((context) => {
+  const {altText = true, caption = true, hotspot = true, fields, ...objectConfig} = context ?? {}
+
+  return {
+    name: IMAGE_TYPE_NAME,
+    schemaType: defineType({
+      name: IMAGE_TYPE_NAME,
+      title: 'Image',
+      ...objectConfig,
+      type: 'object',
+      fields: [
+        defineField({
+          name: 'image',
+          title: 'Image',
+          type: 'image',
+          options: {
+            hotspot,
+          },
+        }),
+        ...(altText
+          ? [
+              defineField({
+                name: 'altText',
+                title: 'Alt text',
+                type: 'string',
+                validation: (rule) => rule.warning('Alt text improves accessibility.'),
+              }),
+            ]
+          : []),
+        ...(caption
+          ? [
+              defineField({
+                name: 'caption',
+                title: 'Caption',
+                type: 'text',
+              }),
+            ]
+          : []),
+        ...(fields ?? []),
+      ],
+      preview: {
+        select: {
+          title: altText ? 'altText' : caption ? 'caption' : 'image.asset.originalFilename',
+          media: 'image',
+        },
+      },
+    }),
+  }
+})