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

package/src/fieldExperiments.tsx

@@ -7,13 +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 {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 = ({
@@ -38,15 +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: ArrayItem,
     },
     fields: [
       typeof field === `string`
@@ -54,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',
@@ -69,9 +99,10 @@ const createExperimentType = ({
       defineField({
         name: experimentId,
         type: 'string',
+        group: 'experiments',
         components: {
           input: (props) => (
-            <ExperimentInput
+            <Input
               {...props}
               experimentNameOverride={experimentNameOverride}
               variantNameOverride={variantNameOverride}
@@ -85,6 +116,7 @@ const createExperimentType = ({
       defineField({
         name: variantArrayName,
         type: 'array',
+        group: 'experiments',
         hidden: ({parent}) => {
           return !parent?.[experimentId]
         },
@@ -112,7 +144,7 @@ const createExperimentType = ({
         experiment: experimentId,
       },
       prepare: ({base, experiment}) => {
-        const title = base?.title || base?.name || ''
+        const title = base?.title || base?.name || typeof base === 'string' ? base : ''
         const experimentTitle = experiment ? `Experiment: ${experiment}` : ''
         const media = base?.image || base?.photo || base?.media || ''
         return {
@@ -188,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}),
@@ -206,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
 

package/src/fieldPersonalization.tsx

@@ -0,0 +1,254 @@
+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/index.ts

@@ -1,3 +1,4 @@
 export * from './fieldExperiments'
+export * from './fieldPersonalization'
 export * from './types'
 export * from './utils/flattenSchemaType'

package/src/types.ts

@@ -18,7 +18,7 @@ export type ExperimentType = {
   variants: VariantType[]
 }
 
-export type FieldPluginConfig = {
+export type ExperimentFieldPluginConfig = {
   fields: (string | FieldDefinition)[]
   experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
   apiVersion?: string
@@ -29,21 +29,39 @@ export type FieldPluginConfig = {
   experimentId?: string
 }
 
+export type PersonalizationFieldPluginConfig = {
+  fields: (string | FieldDefinition)[]
+  segments: VariantType[] | ((client: SanityClient) => Promise<VariantType[]>)
+  apiVersion?: string
+  personalizationNameOverride?: string
+  segmentNameOverride?: string
+  segmentId?: string
+  segmentArrayName?: string
+}
+
 export type VariantPreviewProps = Omit<PreviewProps, 'SchemaType'> & {
   [key: string]: string
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any
 }
 
-export type ExperimentContextProps = Required<FieldPluginConfig> & {
+export type ExperimentContextProps = Required<ExperimentFieldPluginConfig> & {
   experiments: ExperimentType[]
 }
 
+export type PersonalizationContextProps = Required<PersonalizationFieldPluginConfig> & {
+  segments: VariantType[]
+}
+
 export type ArrayInputProps = ArrayOfObjectsInputProps & {
   variantName: string
   variantId: string
   experimentId: string
 }
+export type PersonalizationArrayInputProps = ArrayOfObjectsInputProps & {
+  segmentName: string
+  segmentId: string
+}
 
 export type ObjectFieldWithPath = ObjectField<SchemaType> & {path: Path}
 

package/src/utils/clearChildGroups.ts

@@ -0,0 +1,33 @@
+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: [],
+          },
+        },
+      },
+    },
+  }
+}