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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.4.1",
+  "version": "2.5.0-field-level-personalization.1",
   "description": "Plugin to help with personalization, a/b testing when using Sanity",
   "keywords": [
     "sanity",
@@ -49,39 +49,39 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/studio-secrets": "^3.0.0",
-    "@sanity/ui": "^2.8.19",
+    "@sanity/incompatible-plugin": "^1.0.5",
+    "@sanity/studio-secrets": "^3.0.2",
+    "@sanity/ui": "^2.16.12",
     "@sanity/uuid": "^3.0.2",
     "fast-deep-equal": "^3.1.3",
-    "react-icons": "^5.4.0",
+    "react-icons": "^5.5.0",
     "suspend-react": "^0.1.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.7.1",
-    "@commitlint/config-conventional": "^19.7.1",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@sanity/pkg-utils": "^6.13.4",
     "@sanity/plugin-kit": "^4.0.19",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@types/react": "^18.3.18",
-    "@typescript-eslint/eslint-plugin": "^8.23.0",
-    "@typescript-eslint/parser": "^8.23.0",
+    "@types/react": "^18.3.23",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-config-sanity": "^7.1.4",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
-    "prettier": "^3.4.2",
-    "prettier-plugin-packagejson": "^2.5.8",
+    "prettier": "^3.6.2",
+    "prettier-plugin-packagejson": "^2.5.19",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sanity": "^3.74.1",
-    "semantic-release": "^24.2.1",
-    "styled-components": "^6.1.15",
-    "typescript": "^5.7.3"
+    "sanity": "^3.99.0",
+    "semantic-release": "^24.2.7",
+    "styled-components": "^6.1.19",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/components/ArrayItem.tsx

@@ -0,0 +1,9 @@
+import {ObjectItem, ObjectItemProps, set} from 'sanity'
+
+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/{VariantInput.tsx → experiment/VariantInput.tsx}

@@ -2,7 +2,8 @@ import {Button, Inline, Stack} from '@sanity/ui'
 import {ObjectInputProps, set, useFormValue} from 'sanity'
 
 export const VariantInput = (props: ObjectInputProps) => {
-  const defaultValue = useFormValue([props.path[0], 'default'])
+  const experimentPath = props.path.slice(0, -2)
+  const defaultValue = useFormValue([...experimentPath, 'default'])
   const handleClick = () => {
     props.onChange(set(defaultValue, ['value']))
   }

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'