@sanity/personalization-plugin 2.4.2 → 2.5.0-field-level-personalization.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.4.2",
+  "version": "2.5.0-field-level-personalization.1",
   "description": "Plugin to help with personalization, a/b testing when using Sanity",
   "keywords": [
     "sanity",

package/src/components/{ExperimentItem.tsx → ArrayItem.tsx}

@@ -1,10 +1,9 @@
 import {ObjectItem, ObjectItemProps, set} from 'sanity'
 
-export const ExperimentItem = (props: ObjectItemProps) => {
+export const ArrayItem = (props: ObjectItemProps) => {
   const {active} = props.value as ObjectItem & {active: boolean}
   if (!active) {
     props.inputProps.onChange(set(true, ['active']))
   }
-
   return props.renderDefault(props)
 }

package/src/components/Select.tsx

@@ -2,7 +2,7 @@ import {Select as SanitySelect} from '@sanity/ui'
 import {FormEvent} from 'react'
 import {FormPatch, PatchEvent, Path, StringInputProps} from 'sanity'
 
-import {SelectOption} from './ExperimentInput'
+import {SelectOption} from './experiment/Input'
 
 export const Select = (
   props: StringInputProps & {

package/src/components/{Array.tsx → experiment/Array.tsx}

@@ -3,8 +3,8 @@ import {uuid} from '@sanity/uuid'
 import {useCallback} from 'react'
 import {useFormValue} from 'sanity'
 
-import {ArrayInputProps, VariantType} from '../types'
-import {useExperimentContext} from './ExperimentContext'
+import {ArrayInputProps, VariantType} from '../../types'
+import {useExperimentContext} from './Context'
 
 export const ArrayInput = (props: ArrayInputProps) => {
   const fieldPath = props.path.slice(0, -1)

package/src/components/{ExperimentContext.tsx → experiment/Context.tsx}

@@ -3,7 +3,7 @@ import {createContext, useContext, useMemo} from 'react'
 import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
 import {suspend} from 'suspend-react'
 
-import {ExperimentContextProps, FieldPluginConfig} from '../types'
+import {ExperimentContextProps, ExperimentFieldPluginConfig} from '../../types'
 
 // This provider makes the plugin config available to all components in the document form
 // But with experiments resolved
@@ -28,7 +28,7 @@ export function useExperimentContext() {
 }
 
 type ExperimentProps = ObjectInputProps & {
-  experimentFieldPluginConfig: Required<FieldPluginConfig>
+  experimentFieldPluginConfig: Required<ExperimentFieldPluginConfig>
 }
 
 export function ExperimentProvider(props: ExperimentProps) {

package/src/components/{ExperimentField.tsx → experiment/Field.tsx}

@@ -11,6 +11,8 @@ import {
   set,
   unset,
 } from 'sanity'
+
+import {clearChildrenGroups} from '../../utils/clearChildGroups'
 type PatchStuff = {onChange: (patch: FormPatch | FormPatch[] | PatchEvent) => void; inputId: string}
 
 const useAddExperimentAction = (
@@ -99,7 +101,7 @@ const createActions = ({
   return active ? removeAction : addAction
 }
 
-export const ExperimentField = (
+export const Field = (
   props: ObjectFieldProps & {
     experimentNameOverride: string
     experimentId: string
@@ -127,12 +129,13 @@ export const ExperimentField = (
     return [createActions(actionProps), ...oldActions]
   }, [actionProps, props.actions])
 
-  const withActionProps = useMemo(
-    () => ({
-      ...props,
+  const enhancedProps = useMemo(() => {
+    const propsWithClearedGroups = clearChildrenGroups(props)
+    return {
+      ...propsWithClearedGroups,
       actions: memoizedActions,
-    }),
-    [props, memoizedActions],
-  )
-  return props.renderDefault(withActionProps)
+    }
+  }, [props, memoizedActions])
+
+  return props.renderDefault(enhancedProps)
 }

package/src/components/{ExperimentInput.tsx → experiment/Input.tsx}

@@ -11,9 +11,9 @@ import {
   useFormValue,
 } from 'sanity'
 
-import {ExperimentType} from '..'
-import {useExperimentContext} from './ExperimentContext'
-import {Select} from './Select'
+import {ExperimentType} from '../..'
+import {Select} from '../Select'
+import {useExperimentContext} from './Context'
 
 export type SelectOption = {title: string; value: string}
 const formatlistOptions = (experiments: ExperimentType[]): SelectOption[] =>
@@ -22,7 +22,7 @@ const formatlistOptions = (experiments: ExperimentType[]): SelectOption[] =>
     value: experiment.id,
   }))
 
-export const ExperimentInput = (
+export const Input = (
   props: StringInputProps & {variantNameOverride: string; experimentNameOverride: string},
 ) => {
   const {experiments} = useExperimentContext()

package/src/components/{VariantPreview.tsx → experiment/VariantPreview.tsx}

@@ -8,8 +8,8 @@ import {
   useClient,
 } from 'sanity'
 
-import {VariantPreviewProps} from '../types'
-import {useExperimentContext} from './ExperimentContext'
+import {VariantPreviewProps} from '../../types'
+import {useExperimentContext} from './Context'
 
 export const VariantPreview = (props: PreviewProps) => {
   const [subtitle, setSubtitle] = useState<string | undefined>(undefined)

package/src/components/experiment/index.ts

@@ -0,0 +1,6 @@
+export * from './Array'
+export * from './Context'
+export * from './Field'
+export * from './Input'
+export * from './VariantInput'
+export * from './VariantPreview'

package/src/components/personalization/Array.tsx

@@ -0,0 +1,59 @@
+import {Button, Inline, Stack} from '@sanity/ui'
+import {uuid} from '@sanity/uuid'
+import {useCallback} from 'react'
+
+import {PersonalizationArrayInputProps, VariantType} from '../../types'
+import {usePersonalizationContext} from './Context'
+
+export const ArrayInput = (props: PersonalizationArrayInputProps) => {
+  const {onItemAppend, segmentName, segmentId} = props
+
+  const {segments} = usePersonalizationContext()
+
+  const handleClick = useCallback(
+    async (segment: VariantType) => {
+      const item = {
+        _key: uuid(),
+        [segmentId]: segment.id,
+        _type: segmentName,
+      }
+
+      // Patch the document
+      onItemAppend(item)
+    },
+    [segmentId, segmentName, onItemAppend],
+  )
+
+  type Value = {
+    value?: unknown
+    [key: string]: string | unknown
+    segmentId: string
+    _key: string
+    _type: string
+  }
+
+  // there is probably some better was of getting the type of this?
+  const values = (props.value as Value[]) || []
+
+  const usedSegments = values?.map((segment) => segment[segmentId])
+
+  return (
+    <Stack space={3}>
+      {props.renderDefault({...props, arrayFunctions: () => null})}
+
+      <Inline space={1}>
+        {segments.map((segment) => {
+          return (
+            <Button
+              key={`${segment.id}`}
+              text={`Add ${segment.label}`}
+              mode="ghost"
+              disabled={usedSegments?.includes(segment.id)}
+              onClick={() => handleClick(segment)}
+            />
+          )
+        })}
+      </Inline>
+    </Stack>
+  )
+}

package/src/components/personalization/Context.tsx

@@ -0,0 +1,61 @@
+import equal from 'fast-deep-equal'
+import {createContext, useContext, useMemo} from 'react'
+import {ObjectInputProps, useClient, useWorkspace} from 'sanity'
+import {suspend} from 'suspend-react'
+
+import {PersonalizationContextProps, PersonalizationFieldPluginConfig} from '../../types'
+
+export const CONFIG_DEFAULT = {
+  fields: [],
+  apiVersion: '2024-11-07',
+  personalizationNameOverride: 'personalization',
+  segmentNameOverride: 'segment',
+  segmentId: 'segmentId',
+  segmentArrayName: 'segments',
+}
+
+export const PersonalizationContext = createContext<PersonalizationContextProps>({
+  ...CONFIG_DEFAULT,
+  segments: [],
+})
+
+export function usePersonalizationContext() {
+  return useContext(PersonalizationContext)
+}
+
+type PersonalizationProps = ObjectInputProps & {
+  personalizationFieldPluginConfig: Required<PersonalizationFieldPluginConfig>
+}
+
+export function PersonalizationProvider(props: PersonalizationProps) {
+  const {personalizationFieldPluginConfig} = props
+
+  const client = useClient({apiVersion: personalizationFieldPluginConfig.apiVersion})
+  const workspace = useWorkspace()
+
+  // Fetch or return experiments
+  const segments = Array.isArray(personalizationFieldPluginConfig.segments)
+    ? personalizationFieldPluginConfig.segments
+    : suspend(
+        // eslint-disable-next-line require-await
+        async () => {
+          if (typeof personalizationFieldPluginConfig.segments === 'function') {
+            return personalizationFieldPluginConfig.segments(client)
+          }
+          return personalizationFieldPluginConfig.segments
+        },
+        [workspace],
+        {equal},
+      )
+
+  const context = useMemo(
+    () => ({...personalizationFieldPluginConfig, segments}),
+    [personalizationFieldPluginConfig, segments],
+  )
+
+  return (
+    <PersonalizationContext.Provider value={context}>
+      {props.renderDefault(props)}
+    </PersonalizationContext.Provider>
+  )
+}

package/src/components/personalization/Field.tsx

@@ -0,0 +1,134 @@
+import {CloseIcon} from '@sanity/icons'
+import React, {useCallback, useMemo} from 'react'
+import {IoMdPeople} from 'react-icons/io'
+import {
+  defineDocumentFieldAction,
+  DocumentFieldActionItem,
+  DocumentFieldActionProps,
+  FormPatch,
+  ObjectFieldProps,
+  PatchEvent,
+  set,
+  unset,
+} from 'sanity'
+
+import {clearChildrenGroups} from '../../utils/clearChildGroups'
+
+type PatchStuff = {onChange: (patch: FormPatch | FormPatch[] | PatchEvent) => void; inputId: string}
+
+const useAddExperimentAction = (
+  props: DocumentFieldActionProps &
+    PatchStuff & {personalizationNameOverride: string; active: boolean},
+): DocumentFieldActionItem => {
+  const {onChange, active, personalizationNameOverride} = props
+
+  const handleAddAction = useCallback(() => {
+    onChange([set(!active, ['active'])])
+  }, [onChange, active])
+
+  return {
+    title: `Add ${personalizationNameOverride}`,
+    type: 'action',
+    icon: IoMdPeople,
+    onAction: handleAddAction,
+    renderAsButton: true,
+  }
+}
+
+const useRemoveExperimentAction = (
+  props: DocumentFieldActionProps &
+    PatchStuff & {
+      personalizationNameOverride: string
+      active: boolean
+      segmentNameOverride: string
+    },
+): DocumentFieldActionItem => {
+  const {onChange, active, personalizationNameOverride, segmentNameOverride} = props
+  const handleClearAction = useCallback(() => {
+    const activeId = ['active']
+    const segments = [`${segmentNameOverride}s`]
+    onChange([set(!active, activeId), unset(segments)])
+  }, [onChange, active, segmentNameOverride])
+
+  return {
+    title: `Remove ${personalizationNameOverride}`,
+    type: 'action',
+    icon: CloseIcon,
+    onAction: handleClearAction,
+    renderAsButton: true,
+  }
+}
+
+const createActions = ({
+  onChange,
+  inputId,
+  active,
+  personalizationNameOverride,
+  segmentNameOverride,
+}: PatchStuff & {
+  active?: boolean
+  personalizationNameOverride: string
+  segmentNameOverride: string
+}) => {
+  const removeAction = defineDocumentFieldAction({
+    name: `Remove ${personalizationNameOverride}`,
+    useAction: (props) =>
+      useRemoveExperimentAction({
+        ...props,
+        active: true,
+        onChange,
+        inputId,
+        personalizationNameOverride,
+        segmentNameOverride,
+      }),
+  })
+  const addAction = defineDocumentFieldAction({
+    name: `Add ${personalizationNameOverride}`,
+    useAction: (props) =>
+      useAddExperimentAction({
+        ...props,
+        active: false,
+        onChange,
+        inputId,
+        personalizationNameOverride,
+      }),
+  })
+  return active ? removeAction : addAction
+}
+
+export const Field = (
+  props: ObjectFieldProps & {
+    personalizationNameOverride: string
+    segmentNameOverride: string
+  },
+): React.ReactElement => {
+  const {onChange} = props.inputProps
+  const {inputId, personalizationNameOverride, segmentNameOverride} = props
+  const active = props.value?.active as boolean | undefined
+
+  const actionProps = useMemo(
+    () => ({
+      onChange,
+      inputId,
+      active,
+      personalizationNameOverride,
+      segmentNameOverride,
+    }),
+    [onChange, inputId, active, personalizationNameOverride, segmentNameOverride],
+  )
+
+  const memoizedActions = useMemo(() => {
+    const oldActions = props.actions || []
+    return [createActions(actionProps), ...oldActions]
+  }, [actionProps, props.actions])
+
+  const enhancedProps = useMemo(() => {
+    const propsWithClearedGroups = clearChildrenGroups(props)
+    return {
+      ...propsWithClearedGroups,
+      actions: memoizedActions,
+    }
+  }, [props, memoizedActions])
+
+  return props.renderDefault(enhancedProps)
+}

package/src/components/personalization/SegmentInput.tsx

@@ -0,0 +1,19 @@
+import {Button, Inline, Stack} from '@sanity/ui'
+import {ObjectInputProps, set, useFormValue} from 'sanity'
+
+export const SegmentInput = (props: ObjectInputProps) => {
+  const personalizationPath = props.path.slice(0, -2)
+  const defaultValue = useFormValue([...personalizationPath, 'default'])
+  const handleClick = () => {
+    props.onChange(set(defaultValue, ['value']))
+  }
+  return (
+    <Stack space={3}>
+      {props.renderDefault(props)}
+
+      <Inline space={1}>
+        <Button text="Copy default" mode="ghost" onClick={() => handleClick()} />
+      </Inline>
+    </Stack>
+  )
+}

package/src/components/personalization/SegmentPreview.tsx

@@ -0,0 +1,71 @@
+import {useEffect, useState} from 'react'
+import {
+  isImage,
+  isReference,
+  ObjectSchemaType,
+  PreviewProps,
+  ReferenceSchemaType,
+  useClient,
+} from 'sanity'
+
+import {VariantPreviewProps} from '../../types'
+import {usePersonalizationContext} from './Context'
+
+export const SegmentPreview = (props: PreviewProps) => {
+  const [subtitle, setSubtitle] = useState<string | undefined>(undefined)
+  const [title, setTitle] = useState<string | undefined>(undefined)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [media, setMedia] = useState<any>(undefined)
+  const client = useClient({apiVersion: '2025-01-01'})
+  const {segments} = usePersonalizationContext()
+
+  const {segment, value} = props as VariantPreviewProps
+
+  const selectedSegment = segments.find((segmentItem) => {
+    return segmentItem.id === segment
+  })
+
+  useEffect(() => {
+    const getSubtitle = async () => {
+      setTitle(`${selectedSegment?.label}`)
+      if (typeof value === 'string') {
+        return setSubtitle(value)
+      }
+      if (isReference(value)) {
+        const doc = await client.getDocument(value._ref)
+        const type = props.schemaType as ObjectSchemaType
+        const valueField = type.fields.find((field) => field.name === 'value') as ObjectSchemaType
+        const referenceField = valueField?.type as ReferenceSchemaType
+        const referenceType = referenceField.to.find((field) => field.type?.name === doc?._type)
+
+        const selectFields = {} as Record<string, unknown>
+        const previewFields = referenceType?.preview?.select || {}
+        Object.keys(previewFields).forEach((key) => {
+          const valueKey = referenceType?.preview?.select?.[key]
+          selectFields[key] =
+            valueKey && doc
+              ? valueKey?.split('.').reduce((acc, index) => acc[index], doc)
+              : undefined
+        })
+
+        const previewContent = referenceType?.preview?.prepare?.(selectFields)
+        setMedia(previewContent?.media || selectFields.media)
+        return setSubtitle(previewContent?.title || (selectFields?.title as string))
+      }
+      if (isImage(value)) {
+        setMedia(value)
+      }
+      return ''
+    }
+    getSubtitle()
+  }, [value, client, selectedSegment?.label, props.schemaType])
+
+  const previewProps = {
+    ...props,
+    title: title,
+    subtitle: subtitle,
+    media: media,
+  }
+
+  return props.renderDefault(previewProps)
+}

package/src/components/personalization/index.ts

@@ -0,0 +1,5 @@
+export * from './Array'
+export * from './Context'
+export * from './Field'
+export * from './SegmentInput'
+export * from './SegmentPreview'

package/src/fieldExperiments.tsx

@@ -7,14 +7,17 @@ import {
   isObjectInputProps,
 } from 'sanity'
 
-import {ArrayInput} from './components/Array'
-import {CONFIG_DEFAULT, ExperimentProvider} from './components/ExperimentContext'
-import {ExperimentField} from './components/ExperimentField'
-import {ExperimentInput} from './components/ExperimentInput'
-import {ExperimentItem} from './components/ExperimentItem'
-import {VariantInput} from './components/VariantInput'
-import {VariantPreview} from './components/VariantPreview'
-import {FieldPluginConfig} from './types'
+import {ArrayItem} from './components/ArrayItem'
+import {
+  ArrayInput,
+  CONFIG_DEFAULT,
+  ExperimentProvider,
+  Field,
+  Input,
+  VariantInput,
+  VariantPreview,
+} from './components/experiment'
+import {ExperimentFieldPluginConfig} from './types'
 import {flattenSchemaType} from './utils/flattenSchemaType'
 
 const createExperimentType = ({
@@ -39,16 +42,39 @@ const createExperimentType = ({
   return defineType({
     name: `${experimentNameOverride}${usedName}`,
     type: 'object',
+    groups: [
+      {
+        name: 'default',
+        title: 'Default',
+        hidden: ({parent}) => {
+          return !Array.isArray(parent)
+        },
+      },
+      {
+        name: 'experiments',
+        title: 'Experiments',
+        hidden: ({parent}) => {
+          return !Array.isArray(parent)
+        },
+      },
+      {
+        name: 'all-fields',
+        title: 'All fields',
+        hidden: ({parent}) => {
+          return Array.isArray(parent)
+        },
+      },
+    ],
     components: {
       field: (props) => (
-        <ExperimentField
+        <Field
           {...props}
           experimentId={experimentId}
           experimentNameOverride={experimentNameOverride}
           variantNameOverride={variantNameOverride}
         />
       ),
-      item: ExperimentItem,
+      item: ArrayItem,
     },
     fields: [
       typeof field === `string`
@@ -56,11 +82,13 @@ const createExperimentType = ({
           defineField({
             name: 'default',
             type: field,
+            group: 'default',
           })
         : // Pass in the configured options, but overwrite the name
           {
             ...field,
             name: 'default',
+            group: 'default',
           },
       defineField({
         name: 'active',
@@ -71,9 +99,10 @@ const createExperimentType = ({
       defineField({
         name: experimentId,
         type: 'string',
+        group: 'experiments',
         components: {
           input: (props) => (
-            <ExperimentInput
+            <Input
               {...props}
               experimentNameOverride={experimentNameOverride}
               variantNameOverride={variantNameOverride}
@@ -87,6 +116,7 @@ const createExperimentType = ({
       defineField({
         name: variantArrayName,
         type: 'array',
+        group: 'experiments',
         hidden: ({parent}) => {
           return !parent?.[experimentId]
         },
@@ -190,7 +220,7 @@ const fieldSchema = ({
   variantId,
   variantArrayName,
   experimentId,
-}: Required<Omit<FieldPluginConfig, 'apiVersion' | 'experiments'>>) => {
+}: Required<Omit<ExperimentFieldPluginConfig, 'apiVersion' | 'experiments'>>) => {
   return [
     ...fields.map((field) =>
       createVariantType({field, variantNameOverride, variantId, experimentId}),
@@ -208,7 +238,7 @@ const fieldSchema = ({
   ]
 }
 
-export const fieldLevelExperiments = definePlugin<FieldPluginConfig>((config) => {
+export const fieldLevelExperiments = definePlugin<ExperimentFieldPluginConfig>((config) => {
   const pluginConfig = {...CONFIG_DEFAULT, ...config}
   const {fields, experimentNameOverride, variantNameOverride} = pluginConfig