@sanity/personalization-plugin 2.1.0-growthbook.1 → 2.2.0-growthbook.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.1.0-growthbook.1",
+  "version": "2.2.0-growthbook.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

@@ -14,71 +14,127 @@ 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 = useCallback(() => {
+    onChange([set(!active, ['active'])])
+  }, [onChange, 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
+      variantNameOverride: string
+    },
 ): DocumentFieldActionItem => {
-  const patchActiveEvent = useMemo(() => {
-    const activeId = ['active']
-    return set(false, activeId)
-  }, [])
+  const {onChange, active, experimentId, experimentNameOverride, variantNameOverride} = props
 
-  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])
+  const handleClearAction = useCallback(() => {
+    const activeId = ['active']
+    const experiment = [experimentId]
+    const variants = [`${variantNameOverride}s`]
+    onChange([set(!active, activeId), unset(experiment), unset(variants)])
+  }, [onChange, active, experimentId, variantNameOverride])
 
   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 createActions = ({
+  onChange,
+  inputId,
+  active,
+  experimentNameOverride,
+  experimentId,
+  variantNameOverride,
+}: PatchStuff & {
+  active?: boolean
+  experimentNameOverride: string
+  experimentId: string
+  variantNameOverride: string
+}) => {
+  const removeAction = defineDocumentFieldAction({
+    name: `Remove ${experimentNameOverride}`,
+    useAction: (props) =>
+      useRemoveExperimentAction({
+        ...props,
+        active: true,
+        onChange,
+        inputId,
+        experimentNameOverride,
+        experimentId,
+        variantNameOverride,
+      }),
+  })
+  const addAction = defineDocumentFieldAction({
+    name: `Add ${experimentNameOverride}`,
+    useAction: (props) =>
+      useAddExperimentAction({
+        ...props,
+        active: false,
+        onChange,
+        inputId,
+        experimentNameOverride,
+        experimentId,
+      }),
+  })
+  return active ? removeAction : addAction
+}
 
-export const ExperimentField = (props: ObjectFieldProps) => {
+export const ExperimentField = (
+  props: ObjectFieldProps & {
+    experimentNameOverride: string
+    experimentId: string
+    variantNameOverride: string
+  },
+) => {
   const {onChange} = props.inputProps
-  const {inputId} = props
+  const {inputId, experimentNameOverride, experimentId, variantNameOverride} = props
   const active = props.value?.active as boolean | undefined
 
-  const oldActions = props.actions || []
+  const actionProps = useMemo(
+    () => ({
+      onChange,
+      inputId,
+      active,
+      experimentNameOverride,
+      experimentId,
+      variantNameOverride,
+    }),
+    [onChange, inputId, active, experimentNameOverride, experimentId, variantNameOverride],
+  )
+
+  const memoizedActions = useMemo(() => {
+    const oldActions = props.actions || []
+    return [createActions(actionProps), ...oldActions]
+  }, [actionProps, props.actions])
+
+  const withActionProps = useMemo(
+    () => ({
+      ...props,
+      actions: memoizedActions,
+    }),
+    [props, memoizedActions],
+  )
 
-  const withActionProps = {
-    ...props,
-    actions: [newActions({onChange, inputId, active}), ...oldActions],
-  }
   return props.renderDefault(withActionProps)
 }

package/src/components/ExperimentInput.tsx

@@ -20,13 +20,16 @@ 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 subValues = useFormValue(aditionalChangePath)
+  const aditionalChangePath = useMemo(
+    () => [...props.path.slice(0, -1), `${props.variantNameOverride}s`],
+    [props.variantNameOverride, props.path],
+  )
 
+  const subValues = useFormValue(aditionalChangePath)
   const {patch} = useDocumentOperation(id.replace('drafts.', ''), props.schemaType.name)
 
   const handleChange = useCallback(

package/src/components/VariantInput.tsx

@@ -1,71 +1,18 @@
-import {FormEvent, useCallback} from 'react'
-import {
-  FormPatch,
-  PatchEvent,
-  set,
-  StringInputProps,
-  unset,
-  useDocumentOperation,
-  useFormValue,
-} from 'sanity'
-
-import {VariantType} from '../types'
-import {useExperimentContext} from './ExperimentContext'
-import {Select} from './Select'
-
-const formatlistOptions = (varants: VariantType[]) =>
-  varants.map((variant) => ({
-    title: variant.label,
-    value: variant.id,
-  }))
-
-export const VariantInput = (props: StringInputProps) => {
-  const experimentPath = props.path.slice(0, -3)
-
-  const experimentValue = useFormValue([...experimentPath, 'experimentValue'])
-
-  const id = useFormValue(['_id']) as string
-
-  const {patch} = useDocumentOperation(id.replace('drafts.', ''), props.schemaType.name)
-
-  const {experiments} = useExperimentContext()
-
-  const handleChange = useCallback(
-    (
-      event: FormEvent<Element>,
-      onChange: (patchchange: FormPatch | FormPatch[] | PatchEvent) => void,
-    ) => {
-      const target = event.currentTarget as HTMLSelectElement
-      const inputValue = target.value
-      const variantExperimentId = props.id.replace('variantId', 'experimentId')
-
-      if (inputValue) {
-        onChange(set(inputValue))
-        const patchEvent = {
-          set: {[variantExperimentId]: experimentValue},
-        }
-        patch.execute([patchEvent])
-      } else {
-        onChange(unset())
-        const patchEvent = {
-          unset: [variantExperimentId],
-        }
-        patch.execute([patchEvent])
-      }
-    },
-    [experimentValue, patch, props.id],
-  )
-
-  const filteredVariants =
-    experiments.find((option) => {
-      return option.id === experimentValue
-    })?.variants || []
-
+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 handleClick = () => {
+    props.onChange(set(defaultValue, ['value']))
+  }
   return (
-    <Select
-      {...props}
-      listOptions={formatlistOptions(filteredVariants)}
-      handleChange={handleChange}
-    />
+    <Stack space={3}>
+      {props.renderDefault(props)}
+
+      <Inline space={1}>
+        <Button text="Copy default" mode="ghost" onClick={() => handleClick()} />
+      </Inline>
+    </Stack>
   )
 }

package/src/fieldExperiments.tsx

@@ -5,34 +5,48 @@ import {
   defineType,
   FieldDefinition,
   isObjectInputProps,
-  SanityClient,
 } 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 {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, secret?: string) => 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}
+          variantNameOverride={variantNameOverride}
+        />
+      ),
     },
     fields: [
       typeof field === `string`
@@ -52,31 +66,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,
           }),
         ],
       }),
@@ -84,30 +104,36 @@ 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,
+      input: VariantInput,
     },
     fields: [
       {
         type: 'string',
-        name: 'variantId',
+        name: variantId,
         readOnly: true,
       },
       {
         type: 'string',
-        name: 'experimentId',
+        name: experimentId,
         hidden: true,
       },
       typeof field === `string`
@@ -115,36 +141,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: {
@@ -162,12 +218,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

@@ -25,11 +25,15 @@ export type FieldPluginConfig = {
     | ExperimentType[]
     | ((client: SanityClient, secret?: string) => 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
 }
@@ -41,15 +45,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
 }
 
@@ -57,11 +62,15 @@ 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
 }
 
 export type GrowthbookExperiment = {