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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.1.0-growthbook.1",
+  "version": "2.1.0",
   "description": "Plugin to help with personalization, a/b testing when using Sanity",
   "keywords": [
     "sanity",
@@ -45,7 +45,6 @@
   },
   "dependencies": {
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/studio-secrets": "^3.0.0",
     "@sanity/ui": "^2.8.19",
     "@sanity/uuid": "^3.0.2",
     "fast-deep-equal": "^3.1.3",

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

@@ -1,5 +1,5 @@
 import equal from 'fast-deep-equal'
-import {createContext, useContext, useMemo, useState} from 'react'
+import {createContext, useContext, useMemo} from 'react'
 import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
 import {suspend} from 'suspend-react'
 
@@ -11,13 +11,16 @@ 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>({
   ...CONFIG_DEFAULT,
   experiments: [],
-  setSecret: () => undefined,
-  secret: undefined,
 })
 
 export function useExperimentContext() {
@@ -30,7 +33,6 @@ type ExperimentProps = ObjectInputProps & {
 
 export function ExperimentProvider(props: ExperimentProps) {
   const {experimentFieldPluginConfig} = props
-  const [secret, setSecret] = useState<string | undefined>()
 
   const client = useClient({apiVersion: experimentFieldPluginConfig.apiVersion})
   const workspace = useWorkspace()
@@ -42,17 +44,17 @@ export function ExperimentProvider(props: ExperimentProps) {
         // eslint-disable-next-line require-await
         async () => {
           if (typeof experimentFieldPluginConfig.experiments === 'function') {
-            return experimentFieldPluginConfig.experiments(client, secret)
+            return experimentFieldPluginConfig.experiments(client)
           }
           return experimentFieldPluginConfig.experiments
         },
-        [workspace, secret],
+        [workspace],
         {equal},
       )
 
   const context = useMemo(
-    () => ({...experimentFieldPluginConfig, experiments, secret, setSecret}),
-    [experimentFieldPluginConfig, experiments, secret, setSecret],
+    () => ({...experimentFieldPluginConfig, experiments}),
+    [experimentFieldPluginConfig, experiments],
   )
 
   return (

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,104 @@ 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 = () => {
+    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/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,47 @@ 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}
+        />
+      ),
     },
     fields: [
       typeof field === `string`
@@ -52,31 +65,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 +103,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 +140,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 +217,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/index.ts

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