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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.1.0-field-names.1",
+  "version": "2.1.0-growthbook.1",
   "description": "Plugin to help with personalization, a/b testing when using Sanity",
   "keywords": [
     "sanity",
@@ -45,6 +45,7 @@
   },
   "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,43 +8,44 @@ import {useExperimentContext} from './ExperimentContext'
 
 export const ArrayInput = (props: ArrayInputProps) => {
   const fieldPath = props.path.slice(0, -1)
-  const {onItemAppend, variantName, variantId, experimentId} = props
-  const experimentValue = useFormValue([...fieldPath, experimentId])
+  const experimentId = useFormValue([...fieldPath, 'experimentId'])
 
   const {experiments} = useExperimentContext()
 
+  const {onItemAppend, objectName} = props
+
   const handleClick = useCallback(
     async (variant: VariantType) => {
       const item = {
         _key: uuid(),
-        [variantId]: variant.id,
-        [experimentId]: experimentValue,
-        _type: variantName,
+        variantId: variant.id,
+        experimentId: experimentId,
+        _type: objectName,
       }
 
       // Patch the document
       onItemAppend(item)
     },
-    [variantId, experimentId, experimentValue, variantName, onItemAppend],
+    [experimentId, objectName, onItemAppend],
   )
 
   const filteredVariants =
     experiments.find((option) => {
-      return option.id === experimentValue
+      return option.id === experimentId
     })?.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}>
@@ -54,7 +55,7 @@ export const ArrayInput = (props: ArrayInputProps) => {
         {filteredVariants.map((variant) => {
           return (
             <Button
-              key={`${experimentValue}-${variant.id}`}
+              key={`${experimentId}-${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} from 'react'
+import {createContext, useContext, useMemo, useState} from 'react'
 import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
 import {suspend} from 'suspend-react'
 
@@ -11,16 +11,13 @@ 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() {
@@ -33,6 +30,7 @@ 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()
@@ -44,17 +42,17 @@ export function ExperimentProvider(props: ExperimentProps) {
         // eslint-disable-next-line require-await
         async () => {
           if (typeof experimentFieldPluginConfig.experiments === 'function') {
-            return experimentFieldPluginConfig.experiments(client)
+            return experimentFieldPluginConfig.experiments(client, secret)
           }
           return experimentFieldPluginConfig.experiments
         },
-        [workspace],
+        [workspace, secret],
         {equal},
       )
 
   const context = useMemo(
-    () => ({...experimentFieldPluginConfig, experiments}),
-    [experimentFieldPluginConfig, experiments],
+    () => ({...experimentFieldPluginConfig, experiments, secret, setSecret}),
+    [experimentFieldPluginConfig, experiments, secret, setSecret],
   )
 
   return (

package/src/components/ExperimentField.tsx

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

package/src/components/ExperimentInput.tsx

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

package/src/components/Secrets.tsx

@@ -0,0 +1,47 @@
+import {SettingsView, useSecrets} from '@sanity/studio-secrets'
+import {useEffect, useState} from 'react'
+import {ObjectInputProps} from 'sanity'
+
+import {useExperimentContext} from './ExperimentContext'
+
+const namespace = 'growthbook'
+
+const pluginConfigKeys = [
+  {
+    key: 'apiKey',
+    title: 'Your secret API key',
+  },
+]
+
+export const Secrets = (props: ObjectInputProps) => {
+  const {secrets, loading} = useSecrets(namespace) as {secrets: {apiKey: string}; loading: boolean}
+  const {setSecret} = useExperimentContext()
+  const [showSettings, setShowSettings] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (loading) return undefined
+    if (!secrets && !loading) {
+      setSecret(undefined)
+      return setShowSettings(true)
+    }
+    setSecret(secrets.apiKey)
+    return setShowSettings(false)
+  }, [secrets, loading, setSecret])
+
+  if (!showSettings) {
+    return props.renderDefault(props)
+  }
+  return (
+    <>
+      <SettingsView
+        title={'Growthbook secret'}
+        namespace={namespace}
+        keys={pluginConfigKeys}
+        onClose={() => {
+          setShowSettings(false)
+        }}
+      />
+      {props.renderDefault(props)}
+    </>
+  )
+}

package/src/fieldExperiments.tsx

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

package/src/growthbookFieldExperiments.tsx

@@ -0,0 +1,51 @@
+import {definePlugin, FieldDefinition, isObjectInputProps} from 'sanity'
+
+import {Secrets} from './components/Secrets'
+import {fieldLevelExperiments} from './fieldExperiments'
+import {flattenSchemaType} from './utils/flattenSchemaType'
+import {getExperiments} from './utils/growthbook'
+
+export type GrowthbookABConfig = {
+  fields: (string | FieldDefinition)[]
+  environment: string
+  baseUrl?: string
+  project?: string
+  convertBooleans?: boolean
+}
+
+export const growthbookFieldLevel = definePlugin<GrowthbookABConfig>((config) => {
+  const {fields, environment, project, convertBooleans, baseUrl} = config
+  return {
+    name: 'sanity-growthbook-personalistaion-plugin-field-level-experiments',
+    plugins: [
+      fieldLevelExperiments({
+        fields,
+        experiments: (client) =>
+          getExperiments({client, environment, baseUrl, project, convertBooleans}),
+      }),
+    ],
+
+    form: {
+      components: {
+        input: (props) => {
+          const isRootInput = props.id === 'root' && isObjectInputProps(props)
+
+          if (!isRootInput) {
+            return props.renderDefault(props)
+          }
+
+          const flatFieldTypeNames = flattenSchemaType(props.schemaType).map(
+            (field) => field.type.name,
+          )
+
+          const hasExperiment = flatFieldTypeNames.some((name) => name.startsWith('experiment'))
+
+          if (!hasExperiment) {
+            return props.renderDefault(props)
+          }
+          return Secrets(props)
+        },
+      },
+    },
+  }
+})

package/src/index.ts

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