@sanity/personalization-plugin 2.0.0 → 2.1.0-field-names.1

package/package.json

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

package/src/components/Array.tsx

@@ -8,44 +8,43 @@ import {useExperimentContext} from './ExperimentContext'
 
 export const ArrayInput = (props: ArrayInputProps) => {
   const fieldPath = props.path.slice(0, -1)
-  const experimentId = useFormValue([...fieldPath, 'experimentId'])
+  const {onItemAppend, variantName, variantId, experimentId} = props
+  const experimentValue = useFormValue([...fieldPath, experimentId])
 
   const {experiments} = useExperimentContext()
 
-  const {onItemAppend, objectName} = props
-
   const handleClick = useCallback(
     async (variant: VariantType) => {
       const item = {
         _key: uuid(),
-        variantId: variant.id,
-        experimentId: experimentId,
-        _type: objectName,
+        [variantId]: variant.id,
+        [experimentId]: experimentValue,
+        _type: variantName,
       }
 
       // Patch the document
       onItemAppend(item)
     },
-    [experimentId, objectName, onItemAppend],
+    [variantId, experimentId, experimentValue, variantName, onItemAppend],
   )
 
   const filteredVariants =
     experiments.find((option) => {
-      return option.id === experimentId
+      return option.id === experimentValue
     })?.variants || []
 
   type Value = {
-    experimentId: string
     value?: unknown
+    [key: string]: string | unknown
     variantId: string
     _key: string
     _type: string
   }
 
   // there is probably some better was of getting the type of this?
-  const values = props.value as Value[] | []
+  const values = (props.value as Value[]) || []
 
-  const usedVariants = values?.map((variant) => variant.variantId)
+  const usedVariants = values?.map((variant) => variant[variantId])
 
   return (
     <Stack space={3}>
@@ -55,7 +54,7 @@ export const ArrayInput = (props: ArrayInputProps) => {
         {filteredVariants.map((variant) => {
           return (
             <Button
-              key={`${experimentId}-${variant.id}`}
+              key={`${experimentValue}-${variant.id}`}
               text={`Add ${variant.label}`}
               mode="ghost"
               disabled={usedVariants?.includes(variant.id)}

package/src/components/ExperimentContext.tsx

@@ -11,6 +11,11 @@ import {ExperimentContextProps, FieldPluginConfig} from '../types'
 export const CONFIG_DEFAULT = {
   fields: [],
   apiVersion: '2024-11-07',
+  experimentNameOverride: 'experiment',
+  variantNameOverride: 'variant',
+  variantId: 'variantId',
+  variantArrayName: 'variants',
+  experimentId: 'experimentId',
 }
 
 export const ExperimentContext = createContext<ExperimentContextProps>({

package/src/components/ExperimentField.tsx

@@ -1,5 +1,4 @@
 import {CloseIcon} from '@sanity/icons'
-import {useCallback, useMemo} from 'react'
 import {GiSoapExperiment} from 'react-icons/gi'
 import {
   defineDocumentFieldAction,
@@ -14,71 +13,105 @@ import {
 type PatchStuff = {onChange: (patch: FormPatch | FormPatch[] | PatchEvent) => void; inputId: string}
 
 const useAddExperimentAction = (
-  props: DocumentFieldActionProps & PatchStuff,
+  props: DocumentFieldActionProps &
+    PatchStuff & {experimentNameOverride: string; experimentId: string; active: boolean},
 ): DocumentFieldActionItem => {
-  const patchActiveEvent = useMemo(() => {
-    return set(true, ['active'])
-  }, [])
-  const handleAction = useCallback(() => {
-    props.onChange([patchActiveEvent])
-  }, [patchActiveEvent, props])
+  const {onChange, active, experimentNameOverride} = props
+
+  const handleAddAction = () => {
+    // console.log('showing experiment', patchActiveTrueEvent)
+    onChange([set(!active, ['active'])])
+  }
 
   return {
-    title: 'Add experiment',
+    title: `Add ${experimentNameOverride}`,
     type: 'action',
     icon: GiSoapExperiment,
-    onAction: handleAction,
+    onAction: handleAddAction,
     renderAsButton: true,
   }
 }
 
 const useRemoveExperimentAction = (
-  props: DocumentFieldActionProps & PatchStuff,
+  props: DocumentFieldActionProps &
+    PatchStuff & {experimentNameOverride: string; experimentId: string; active: boolean},
 ): DocumentFieldActionItem => {
-  const patchActiveEvent = useMemo(() => {
+  const {onChange, active, experimentId, experimentNameOverride} = props
+  const patchActiveFalseEvent = () => {
     const activeId = ['active']
-    return set(false, activeId)
-  }, [])
-
-  const patchClearEvent = useMemo(() => {
-    const experimentId = ['experimentId'] // `${props.inputId}.experimentId`
-    const variants = ['variants'] //`${props.inputId}.variants`
-    return [unset(experimentId), unset(variants)]
-  }, [])
-  const handleAction = useCallback(() => {
-    props.onChange([patchActiveEvent, ...patchClearEvent])
-  }, [patchActiveEvent, patchClearEvent, props])
-
+    return set(!active, activeId)
+  }
+  const patchClearEvent = () => {
+    const experiment = [experimentId]
+    const variants = [experimentNameOverride]
+    return [unset(experiment), unset(variants)]
+  }
+  const handleClearAction = () => {
+    const clearEvents = patchClearEvent()
+    const activeEvent = patchActiveFalseEvent()
+    onChange([activeEvent, ...clearEvents])
+  }
   return {
-    title: 'Remove experiment',
+    title: `Remove ${experimentNameOverride}`,
     type: 'action',
     icon: CloseIcon,
-    onAction: handleAction,
+    onAction: handleClearAction,
     renderAsButton: true,
   }
 }
 
-const newActions = ({onChange, inputId, active}: PatchStuff & {active?: boolean}) =>
-  active
-    ? defineDocumentFieldAction({
-        name: 'Experiment',
-        useAction: (props) => useRemoveExperimentAction({...props, onChange, inputId}),
-      })
-    : defineDocumentFieldAction({
-        name: 'Experiment',
-        useAction: (props) => useAddExperimentAction({...props, onChange, inputId}),
-      })
+const newActions = ({
+  onChange,
+  inputId,
+  active,
+  experimentNameOverride,
+  experimentId,
+}: PatchStuff & {active?: boolean; experimentNameOverride: string; experimentId: string}) => {
+  const removeAction = defineDocumentFieldAction({
+    name: `Remove ${experimentNameOverride}`,
+    useAction: (props) =>
+      useRemoveExperimentAction({
+        ...props,
+        active: true,
+        onChange,
+        inputId,
+        experimentNameOverride,
+        experimentId,
+      }),
+  })
+  const addAction = defineDocumentFieldAction({
+    name: `Add ${experimentNameOverride}`,
+    useAction: (props) =>
+      useAddExperimentAction({
+        ...props,
+        active: false,
+        onChange,
+        inputId,
+        experimentNameOverride,
+        experimentId,
+      }),
+  })
+  if (active) {
+    return removeAction
+  }
+  return addAction
+}
 
-export const ExperimentField = (props: ObjectFieldProps) => {
+export const ExperimentField = (
+  props: ObjectFieldProps & {experimentNameOverride: string; experimentId: string},
+) => {
   const {onChange} = props.inputProps
-  const {inputId} = props
+  const {inputId, experimentNameOverride, experimentId} = props
   const active = props.value?.active as boolean | undefined
 
   const oldActions = props.actions || []
 
   const withActionProps = {
     ...props,
-    actions: [newActions({onChange, inputId, active}), ...oldActions],
+    actions: [
+      newActions({onChange, inputId, active, experimentNameOverride, experimentId}),
+      ...oldActions,
+    ],
   }
   return props.renderDefault(withActionProps)
 }

package/src/components/ExperimentInput.tsx

@@ -20,11 +20,14 @@ const formatlistOptions = (experiments: ExperimentType[]): SelectOption[] =>
     value: experiment.id,
   }))
 
-export const ExperimentInput = (props: StringInputProps) => {
+export const ExperimentInput = (props: StringInputProps & {variantNameOverride: string}) => {
   const {experiments} = useExperimentContext()
 
   const id = useFormValue(['_id']) as string
-  const aditionalChangePath = useMemo(() => [...props.path.slice(0, -1), 'variants'], [props.path])
+  const aditionalChangePath = useMemo(
+    () => [...props.path.slice(0, -1), props.variantNameOverride],
+    [props.variantNameOverride, props.path],
+  )
   const subValues = useFormValue(aditionalChangePath)
 
   const {patch} = useDocumentOperation(id.replace('drafts.', ''), props.schemaType.name)

package/src/fieldExperiments.tsx

@@ -5,7 +5,6 @@ import {
   defineType,
   FieldDefinition,
   isObjectInputProps,
-  SanityClient,
 } from 'sanity'
 
 import {ArrayInput} from './components/Array'
@@ -13,24 +12,39 @@ import {CONFIG_DEFAULT, ExperimentProvider} from './components/ExperimentContext
 import {ExperimentField} from './components/ExperimentField'
 import {ExperimentInput} from './components/ExperimentInput'
 import {VariantPreview} from './components/VariantPreview'
-import {ExperimentType, FieldPluginConfig} from './types'
+import {FieldPluginConfig} from './types'
 import {flattenSchemaType} from './utils/flattenSchemaType'
 
-const createFieldType = ({
+const createExperimentType = ({
   field,
+  experimentNameOverride,
+  variantNameOverride,
+  variantId,
+  variantArrayName,
+  experimentId,
 }: {
   field: string | FieldDefinition
-  experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
+  experimentNameOverride: string
+  variantNameOverride: string
+  variantId: string
+  variantArrayName: string
+  experimentId: string
 }) => {
   const typeName = typeof field === `string` ? field : field.name
   const usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1)
-  const objectName = `variant${usedName}`
+  const variantName = `${variantNameOverride}${usedName}`
 
   return defineType({
-    name: `experiment${usedName}`,
+    name: `${experimentNameOverride}${usedName}`,
     type: 'object',
     components: {
-      field: ExperimentField,
+      field: (props) => (
+        <ExperimentField
+          {...props}
+          experimentId={experimentId}
+          experimentNameOverride={experimentNameOverride}
+        />
+      ),
     },
     fields: [
       typeof field === `string`
@@ -50,31 +64,37 @@ const createFieldType = ({
         hidden: true,
       }),
       defineField({
-        title: 'Experiment',
-        name: 'experimentId',
+        name: experimentId,
         type: 'string',
         components: {
-          input: ExperimentInput,
+          input: (props) => (
+            <ExperimentInput {...props} variantNameOverride={variantNameOverride} />
+          ),
         },
         hidden: ({parent}) => {
           return !parent?.active
         },
       }),
       defineField({
-        name: 'variants',
+        name: variantArrayName,
         type: 'array',
         hidden: ({parent}) => {
-          return !parent?.experimentId
+          return !parent?.[experimentId]
         },
         components: {
           input: (props: ArrayOfObjectsInputProps) => (
-            <ArrayInput {...props} objectName={objectName} />
+            <ArrayInput
+              {...props}
+              variantName={variantName}
+              variantId={variantId}
+              experimentId={experimentId}
+            />
           ),
         },
         of: [
           defineField({
-            name: objectName,
-            type: objectName,
+            name: variantName,
+            type: variantName,
           }),
         ],
       }),
@@ -82,17 +102,22 @@ const createFieldType = ({
   })
 }
 
-const createFieldObjectType = ({
+const createVariantType = ({
   field,
+  variantNameOverride,
+  variantId,
+  experimentId,
 }: {
   field: string | FieldDefinition
-  experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
+  variantNameOverride: string
+  variantId: string
+  experimentId: string
 }) => {
   const typeName = typeof field === `string` ? field : field.name
   const usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1)
   return defineType({
-    name: `variant${usedName}`,
-    title: `Experiment array ${usedName}`,
+    name: `${variantNameOverride}${usedName}`,
+    title: `${variantNameOverride} array ${usedName}`,
     type: 'object',
     components: {
       preview: VariantPreview,
@@ -100,12 +125,12 @@ const createFieldObjectType = ({
     fields: [
       {
         type: 'string',
-        name: 'variantId',
+        name: variantId,
         readOnly: true,
       },
       {
         type: 'string',
-        name: 'experimentId',
+        name: experimentId,
         hidden: true,
       },
       typeof field === `string`
@@ -113,36 +138,66 @@ const createFieldObjectType = ({
           defineField({
             name: 'value',
             type: field,
-            hidden: ({parent}) => !parent?.variantId,
+            // hidden: ({parent}) => !parent?.[`${objectNameOverride}Id`],
           })
         : // Pass in the configured options, but overwrite the name
           {
             ...field,
             name: 'value',
-            hidden: ({parent}) => !parent?.variantId,
+            // hidden: ({parent}) => !parent?.[`${objectNameOverride}Id`],
           },
     ],
     preview: {
       select: {
-        variant: 'variantId',
-        experiment: 'experimentId',
+        variant: variantId,
+        experiment: experimentId,
         value: 'value',
       },
     },
   })
 }
 
-const fieldSchema = ({fields, experiments}: FieldPluginConfig) => {
+const fieldSchema = ({
+  fields,
+  experimentNameOverride,
+  variantNameOverride,
+  variantId,
+  variantArrayName,
+  experimentId,
+}: Required<Omit<FieldPluginConfig, 'apiVersion' | 'experiments'>>) => {
   return [
-    ...fields.map((field) => createFieldObjectType({field, experiments})),
-    ...fields.map((field) => createFieldType({field, experiments})),
+    ...fields.map((field) =>
+      createVariantType({field, variantNameOverride, variantId, experimentId}),
+    ),
+    ...fields.map((field) =>
+      createExperimentType({
+        field,
+        experimentNameOverride,
+        variantNameOverride,
+        variantId,
+        variantArrayName,
+        experimentId,
+      }),
+    ),
   ]
 }
 
 export const fieldLevelExperiments = definePlugin<FieldPluginConfig>((config) => {
   const pluginConfig = {...CONFIG_DEFAULT, ...config}
-  const {fields, experiments} = pluginConfig
-  const fieldSchemaConfig = fieldSchema({fields, experiments})
+  const {fields, experimentNameOverride, variantNameOverride} = pluginConfig
+
+  const experimentId = `${experimentNameOverride}Id`
+  const variantArrayName = `${variantNameOverride}s`
+  const variantId = `${variantNameOverride}Id`
+
+  const fieldSchemaConfig = fieldSchema({
+    fields,
+    experimentNameOverride,
+    variantNameOverride,
+    variantId,
+    variantArrayName,
+    experimentId,
+  })
   return {
     name: 'sanity-personalistaion-plugin-field-level-experiments',
     schema: {
@@ -160,12 +215,22 @@ export const fieldLevelExperiments = definePlugin<FieldPluginConfig>((config) =>
           const flatFieldTypeNames = flattenSchemaType(props.schemaType).map(
             (field) => field.type.name,
           )
-          const hasExperiment = flatFieldTypeNames.some((name) => name.startsWith('experiment'))
+          const hasExperiment = flatFieldTypeNames.some((name) =>
+            name.startsWith(experimentNameOverride),
+          )
 
           if (!hasExperiment) {
             return props.renderDefault(props)
           }
-          const providerProps = {...props, experimentFieldPluginConfig: pluginConfig}
+          const providerProps = {
+            ...props,
+            experimentFieldPluginConfig: {
+              ...pluginConfig,
+              variantId,
+              variantArrayName,
+              experimentId,
+            },
+          }
           return ExperimentProvider(providerProps)
         },
       },

package/src/types.ts

@@ -22,11 +22,15 @@ export type FieldPluginConfig = {
   fields: (string | FieldDefinition)[]
   experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
   apiVersion?: string
+  experimentNameOverride?: string
+  variantNameOverride?: string
+  variantId?: string
+  variantArrayName?: string
+  experimentId?: string
 }
 
 export type VariantPreviewProps = Omit<PreviewProps, 'SchemaType'> & {
-  experiment: string
-  variant: string
+  [key: string]: string
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any
 }
@@ -36,15 +40,16 @@ export type ExperimentContextProps = Required<FieldPluginConfig> & {
 }
 
 export type ArrayInputProps = ArrayOfObjectsInputProps & {
-  objectName: string
+  variantName: string
+  variantId: string
+  experimentId: string
 }
 
 export type ObjectFieldWithPath = ObjectField<SchemaType> & {path: Path}
 
 export type VariantGeneric<T> = {
+  [key: string]: string | T | undefined
   _type: string
-  variantId?: string
-  experimentId?: string
   value?: T
 }
 
@@ -52,9 +57,13 @@ export type ExperimentGeneric<T> = {
   _type: string
   default?: T
   experimentValue?: string
-  variants?: Array<
-    {
-      _key: string
-    } & VariantGeneric<T>
-  >
+  [key: string]:
+    | Array<
+        {
+          _key: string
+        } & VariantGeneric<T>
+      >
+    | string
+    | T
+    | undefined
 }