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

package/src/components/experiment/index.ts

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

package/src/components/personalization/Array.tsx

@@ -1,59 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

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

package/src/fieldPersonalization.tsx

@@ -1,254 +0,0 @@
-import {
-  ArrayOfObjectsInputProps,
-  defineField,
-  definePlugin,
-  defineType,
-  FieldDefinition,
-  isObjectInputProps,
-} from 'sanity'
-
-import {ArrayItem} from './components/ArrayItem'
-import {
-  ArrayInput,
-  CONFIG_DEFAULT,
-  Field,
-  PersonalizationProvider,
-  SegmentInput,
-  SegmentPreview,
-} from './components/personalization'
-import {PersonalizationFieldPluginConfig} from './types'
-import {flattenSchemaType} from './utils/flattenSchemaType'
-
-const createPersonalizationType = ({
-  field,
-  personalizationNameOverride,
-  segmentNameOverride,
-  segmentId,
-  segmentArrayName,
-}: {
-  field: string | FieldDefinition
-  personalizationNameOverride: string
-  segmentNameOverride: string
-  segmentId: string
-  segmentArrayName: string
-}) => {
-  const typeName = typeof field === `string` ? field : field.name
-  const usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1)
-  const segmentName = `${segmentNameOverride}${usedName}`
-
-  return defineType({
-    name: `${personalizationNameOverride}${usedName}`,
-    type: 'object',
-    groups: [
-      {
-        name: 'default',
-        title: 'Default',
-        hidden: ({parent}) => {
-          return !Array.isArray(parent)
-        },
-      },
-      {
-        name: 'personalization',
-        title: 'Personalization options',
-        hidden: ({parent}) => {
-          return !Array.isArray(parent)
-        },
-      },
-      {
-        name: 'all-fields',
-        title: 'All fields',
-        hidden: ({parent}) => {
-          return Array.isArray(parent)
-        },
-      },
-    ],
-    components: {
-      field: (props) => (
-        <Field
-          {...props}
-          personalizationNameOverride={personalizationNameOverride}
-          segmentNameOverride={segmentNameOverride}
-        />
-      ),
-      item: ArrayItem,
-    },
-    fields: [
-      typeof field === `string`
-        ? // Define a simple field if all we have is the name as a string
-          defineField({
-            name: 'default',
-            type: field,
-            group: 'default',
-          })
-        : // Pass in the configured options, but overwrite the name
-          {
-            ...field,
-            name: 'default',
-            group: 'default',
-          },
-      defineField({
-        name: 'active',
-        type: 'boolean',
-        hidden: true,
-        initialValue: false,
-      }),
-      defineField({
-        name: segmentArrayName,
-        type: 'array',
-        hidden: ({parent}) => {
-          return !parent?.active
-        },
-        group: 'personalization',
-        components: {
-          input: (props: ArrayOfObjectsInputProps) => (
-            <ArrayInput {...props} segmentName={segmentName} segmentId={segmentId} />
-          ),
-        },
-        of: [
-          defineField({
-            name: segmentName,
-            type: segmentName,
-          }),
-        ],
-      }),
-    ],
-    preview: {
-      select: {
-        base: 'default',
-      },
-      prepare: ({base}) => {
-        const title = base?.title || base?.name || typeof base === 'string' ? base : ''
-        const media = base?.image || base?.photo || base?.media || ''
-        return {
-          title: title,
-          media,
-        }
-      },
-    },
-  })
-}
-
-const createSegmentType = ({
-  field,
-  segmentNameOverride,
-  segmentId,
-}: {
-  field: string | FieldDefinition
-  segmentNameOverride: string
-  segmentId: string
-}) => {
-  const typeName = typeof field === `string` ? field : field.name
-  const usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1)
-  return defineType({
-    name: `${segmentNameOverride}${usedName}`,
-    title: `${segmentNameOverride} array ${usedName}`,
-    type: 'object',
-    components: {
-      preview: SegmentPreview,
-      input: SegmentInput,
-    },
-    fields: [
-      {
-        type: 'string',
-        name: segmentId,
-        readOnly: true,
-      },
-      typeof field === `string`
-        ? // Define a simple field if all we have is the name as a string
-          defineField({
-            name: 'value',
-            type: field,
-            // hidden: ({parent}) => !parent?.[`${objectNameOverride}Id`],
-          })
-        : // Pass in the configured options, but overwrite the name
-          {
-            ...field,
-            name: 'value',
-            // hidden: ({parent}) => !parent?.[`${objectNameOverride}Id`],
-          },
-    ],
-    preview: {
-      select: {
-        segment: segmentId,
-        value: 'value',
-      },
-    },
-  })
-}
-
-const fieldSchema = ({
-  fields,
-  personalizationNameOverride,
-  segmentNameOverride,
-  segmentId,
-  segmentArrayName,
-}: Required<Omit<PersonalizationFieldPluginConfig, 'apiVersion' | 'segments'>>) => {
-  return [
-    ...fields.map((field) => createSegmentType({field, segmentNameOverride, segmentId})),
-    ...fields.map((field) =>
-      createPersonalizationType({
-        field,
-        personalizationNameOverride,
-        segmentNameOverride,
-        segmentId,
-        segmentArrayName,
-      }),
-    ),
-  ]
-}
-
-export const fieldLevelPersonalization = definePlugin<PersonalizationFieldPluginConfig>(
-  (config) => {
-    const pluginConfig = {...CONFIG_DEFAULT, ...config}
-    const {fields, personalizationNameOverride, segmentNameOverride} = pluginConfig
-
-    const segmentArrayName = `${segmentNameOverride}s`
-    const segmentId = `${segmentNameOverride}Id`
-
-    const fieldSchemaConfig = fieldSchema({
-      fields,
-      personalizationNameOverride,
-      segmentNameOverride,
-      segmentId,
-      segmentArrayName,
-    })
-    return {
-      name: 'sanity-personalistaion-plugin-field-level-personalization',
-      schema: {
-        types: fieldSchemaConfig,
-      },
-      form: {
-        components: {
-          input: (props) => {
-            const isRootInput = props.id === 'root' && isObjectInputProps(props)
-
-            if (!isRootInput) {
-              return props.renderDefault(props)
-            }
-
-            const flatFields = flattenSchemaType(props.schemaType)
-            const hasPersonalization = flatFields.some(
-              (field) =>
-                field.type.name.startsWith(personalizationNameOverride) ||
-                field.name.startsWith(personalizationNameOverride),
-            )
-
-            if (!hasPersonalization) {
-              return props.renderDefault(props)
-            }
-
-            const providerProps = {
-              ...props,
-              personalizationFieldPluginConfig: {
-                ...pluginConfig,
-                segmentId,
-                segmentArrayName,
-              },
-            }
-            return PersonalizationProvider(providerProps)
-          },
-        },
-      },
-    }
-  },
-)

package/src/utils/clearChildGroups.ts

@@ -1,33 +0,0 @@
-import {ObjectFieldProps} from 'sanity'
-
-/**
- * Safely updates deeply nested children props to clear groups array
- * This prevents field grouping UI conflicts in personalization mode
- */
-export const clearChildrenGroups = (props: ObjectFieldProps): ObjectFieldProps => {
-  // Type assertion is needed here because Sanity's ObjectFieldProps children
-  // typing doesn't account for the nested structure we need to manipulate
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const children = props.children as any
-
-  if (!children || typeof children !== 'object' || !children.props) {
-    return props
-  }
-
-  return {
-    ...props,
-    children: {
-      ...children,
-      props: {
-        ...children.props,
-        children: {
-          ...children.props.children,
-          props: {
-            ...children.props.children?.props,
-            groups: [],
-          },
-        },
-      },
-    },
-  }
-}