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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.1.0",
+  "version": "2.2.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/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'
 
@@ -21,6 +21,8 @@ export const CONFIG_DEFAULT = {
 export const ExperimentContext = createContext<ExperimentContextProps>({
   ...CONFIG_DEFAULT,
   experiments: [],
+  setSecret: () => undefined,
+  secret: undefined,
 })
 
 export function useExperimentContext() {
@@ -33,6 +35,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 +47,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,
@@ -18,9 +19,9 @@ const useAddExperimentAction = (
 ): DocumentFieldActionItem => {
   const {onChange, active, experimentNameOverride} = props
 
-  const handleAddAction = () => {
+  const handleAddAction = useCallback(() => {
     onChange([set(!active, ['active'])])
-  }
+  }, [onChange, active])
 
   return {
     title: `Add ${experimentNameOverride}`,
@@ -33,23 +34,22 @@ const useAddExperimentAction = (
 
 const useRemoveExperimentAction = (
   props: DocumentFieldActionProps &
-    PatchStuff & {experimentNameOverride: string; experimentId: string; active: boolean},
+    PatchStuff & {
+      experimentNameOverride: string
+      experimentId: string
+      active: boolean
+      variantNameOverride: string
+    },
 ): DocumentFieldActionItem => {
-  const {onChange, active, experimentId, experimentNameOverride} = props
-  const patchActiveFalseEvent = () => {
+  const {onChange, active, experimentId, experimentNameOverride, variantNameOverride} = props
+
+  const handleClearAction = useCallback(() => {
     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])
-  }
+    const variants = [`${variantNameOverride}s`]
+    onChange([set(!active, activeId), unset(experiment), unset(variants)])
+  }, [onChange, active, experimentId, variantNameOverride])
+
   return {
     title: `Remove ${experimentNameOverride}`,
     type: 'action',
@@ -59,13 +59,19 @@ const useRemoveExperimentAction = (
   }
 }
 
-const newActions = ({
+const createActions = ({
   onChange,
   inputId,
   active,
   experimentNameOverride,
   experimentId,
-}: PatchStuff & {active?: boolean; experimentNameOverride: string; experimentId: string}) => {
+  variantNameOverride,
+}: PatchStuff & {
+  active?: boolean
+  experimentNameOverride: string
+  experimentId: string
+  variantNameOverride: string
+}) => {
   const removeAction = defineDocumentFieldAction({
     name: `Remove ${experimentNameOverride}`,
     useAction: (props) =>
@@ -76,6 +82,7 @@ const newActions = ({
         inputId,
         experimentNameOverride,
         experimentId,
+        variantNameOverride,
       }),
   })
   const addAction = defineDocumentFieldAction({
@@ -90,27 +97,44 @@ const newActions = ({
         experimentId,
       }),
   })
-  if (active) {
-    return removeAction
-  }
-  return addAction
+  return active ? removeAction : addAction
 }
 
 export const ExperimentField = (
-  props: ObjectFieldProps & {experimentNameOverride: string; experimentId: string},
+  props: ObjectFieldProps & {
+    experimentNameOverride: string
+    experimentId: string
+    variantNameOverride: string
+  },
 ) => {
   const {onChange} = props.inputProps
-  const {inputId, experimentNameOverride, experimentId} = 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, experimentNameOverride, experimentId}),
-      ...oldActions,
-    ],
-  }
   return props.renderDefault(withActionProps)
 }

package/src/components/ExperimentInput.tsx

@@ -25,11 +25,11 @@ export const ExperimentInput = (props: StringInputProps & {variantNameOverride:
 
   const id = useFormValue(['_id']) as string
   const aditionalChangePath = useMemo(
-    () => [...props.path.slice(0, -1), props.variantNameOverride],
+    () => [...props.path.slice(0, -1), `${props.variantNameOverride}s`],
     [props.variantNameOverride, props.path],
   )
-  const subValues = useFormValue(aditionalChangePath)
 
+  const subValues = useFormValue(aditionalChangePath)
   const {patch} = useDocumentOperation(id.replace('drafts.', ''), props.schemaType.name)
 
   const handleChange = useCallback(

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

@@ -44,6 +44,7 @@ const createExperimentType = ({
           {...props}
           experimentId={experimentId}
           experimentNameOverride={experimentNameOverride}
+          variantNameOverride={variantNameOverride}
         />
       ),
     },

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'

package/src/types.ts

@@ -1,3 +1,4 @@
+import {Dispatch, SetStateAction} from 'react'
 import {
   ArrayOfObjectsInputProps,
   FieldDefinition,
@@ -20,7 +21,9 @@ export type ExperimentType = {
 
 export type FieldPluginConfig = {
   fields: (string | FieldDefinition)[]
-  experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
+  experiments:
+    | ExperimentType[]
+    | ((client: SanityClient, secret?: string) => Promise<ExperimentType[]>)
   apiVersion?: string
   experimentNameOverride?: string
   variantNameOverride?: string
@@ -37,6 +40,8 @@ export type VariantPreviewProps = Omit<PreviewProps, 'SchemaType'> & {
 
 export type ExperimentContextProps = Required<FieldPluginConfig> & {
   experiments: ExperimentType[]
+  setSecret: Dispatch<SetStateAction<string | undefined>>
+  secret: string | undefined
 }
 
 export type ArrayInputProps = ArrayOfObjectsInputProps & {
@@ -67,3 +72,179 @@ export type ExperimentGeneric<T> = {
     | T
     | undefined
 }
+
+export type GrowthbookExperiment = {
+  id: string
+  dateCreated: string
+  dateUpdated: string
+  name: string
+  project: string
+  hypothesis: string
+  description: string
+  tags: [string]
+  owner: string
+  archived: boolean
+  status: string
+  autoRefresh: boolean
+  hashAttribute: string
+  fallbackAttribute: string
+  hashVersion: number
+  disableStickyBucketing: boolean
+  bucketVersion: number
+  minBucketVersion: number
+  variations: [
+    {
+      variationId: string
+      key: string
+      name: string
+      description: string
+      screenshots: [string]
+    },
+  ]
+  phases: [
+    {
+      name: string
+      dateStarted: string
+      dateEnded: string
+      reasonForStopping: string
+      seed: string
+      coverage: 0
+      trafficSplit: [
+        {
+          variationId: string
+          weight: 0
+        },
+      ]
+      namespace: {
+        namespaceId: string
+        range: []
+      }
+      targetingCondition: string
+      savedGroupTargeting: [
+        {
+          matchType: string
+          savedGroups: [string]
+        },
+      ]
+    },
+  ]
+  settings: {
+    datasourceId: string
+    assignmentQueryId: string
+    experimentId: string
+    segmentId: string
+    queryFilter: string
+    inProgressConversions: string
+    attributionModel: string
+    statsEngine: string
+    regressionAdjustmentEnabled: boolean
+    goals: [
+      {
+        metricId: string
+        overrides: {
+          delayHours: 0
+          windowHours: 0
+          window: string
+          winRiskThreshold: 0
+          loseRiskThreshold: 0
+        }
+      },
+    ]
+    secondaryMetrics: [
+      {
+        metricId: string
+        overrides: {
+          delayHours: 0
+          windowHours: 0
+          window: string
+          winRiskThreshold: 0
+          loseRiskThreshold: 0
+        }
+      },
+    ]
+    guardrails: [
+      {
+        metricId: string
+        overrides: {
+          delayHours: 0
+          windowHours: 0
+          window: string
+          winRiskThreshold: 0
+          loseRiskThreshold: 0
+        }
+      },
+    ]
+    activationMetric: {
+      metricId: string
+      overrides: {
+        delayHours: 0
+        windowHours: 0
+        window: string
+        winRiskThreshold: 0
+        loseRiskThreshold: 0
+      }
+    }
+  }
+  resultSummary: {
+    status: string
+    winner: string
+    conclusions: string
+    releasedVariationId: string
+    excludeFromPayload: boolean
+  }
+}
+
+export type GrowthbookFeature = {
+  id: string
+  dateCreated: string
+  dateUpdated: string
+  archived: boolean
+  description: string
+  owner: string
+  project: string
+  valueType: string
+  defaultValue: string
+  tags: string[]
+  environments: {
+    [key: string]: {
+      enabled: boolean
+      defaultValue: string
+      rules: {
+        description: string
+        condition: string
+        savedGroupTargeting: {matchType: string; savedGroups: string[]}[]
+        id: string
+        enabled: boolean
+        type: string
+        value: string
+        variations: {value: string; variationId: string}[]
+      }[]
+      definition: string
+      draft: {
+        enabled: boolean
+        defaultValue: string
+        rules: {
+          description: string
+          condition: string
+          savedGroupTargeting: {matchType: string; savedGroups: string[]}[]
+          id: string
+          enabled: boolean
+          type: string
+          value: string
+          variations: {value: string; variationId: string}[]
+        }[]
+        definition: string
+      }
+    }
+  }
+  prerequisites: {
+    parentId: string
+    parentCondition: string
+  }[]
+  revision: {
+    version: number
+    comment: string
+    date: string
+    publishedBy: string
+  }
+}

package/src/utils/growthbook.ts

@@ -0,0 +1,78 @@
+import {SanityClient} from 'sanity'
+
+import {GrowthbookABConfig} from '../growthbookFieldExperiments'
+import {ExperimentType, GrowthbookFeature, VariantType} from '../types'
+
+const getBooleanConversion = (value: string) => {
+  // this way or the other way around?
+  if (value === 'true') {
+    return 'variant'
+  } else if (value === 'false') {
+    return 'control'
+  }
+  return value
+}
+
+export const getExperiments = async ({
+  client,
+  environment,
+  baseUrl,
+  project,
+  convertBooleans,
+}: Omit<GrowthbookABConfig, 'fields'> & {client: SanityClient}): Promise<ExperimentType[]> => {
+  const query = `*[_id == 'secrets.growthbook'][0].secrets.apiKey`
+
+  const secret = await client.fetch(query) // secret is stored in the content lake using @sanity/studio-secrets
+  if (!secret) return []
+
+  const featureExperiments: ExperimentType[] = []
+  let hasMore = true
+  let offset = 0
+  const url = new URL(baseUrl ?? 'https://api.growthbook.io/api/v1/features')
+  if (project) {
+    url.searchParams.set('projectId', project)
+  }
+
+  while (hasMore) {
+    url.searchParams.set('offset', offset.toString())
+    const response = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${secret}`,
+      },
+    })
+
+    const {features, hasMore: responseHasMore, nextOffset} = await response.json()
+
+    hasMore = responseHasMore
+    offset = nextOffset
+    if (!features) continue
+
+    features.forEach((feature: GrowthbookFeature) => {
+      if (feature.archived) {
+        return undefined
+      }
+      const experiments = feature.environments[environment]?.rules.filter(
+        (experiment) => experiment.type === 'experiment-ref' || experiment.type === 'experiment',
+      )
+
+      if (!experiments) {
+        return undefined
+      }
+
+      const variations = new Set<VariantType>()
+      experiments.forEach((experiment) => {
+        experiment?.variations.forEach((variant) => {
+          variations.add({
+            id: convertBooleans ? getBooleanConversion(variant.value) : variant.value,
+            label: convertBooleans ? getBooleanConversion(variant.value) : variant.value,
+          })
+        })
+      })
+      const value = {id: feature.id, label: feature.id, variants: [...variations]}
+
+      featureExperiments.push(value)
+      return undefined
+    })
+  }
+  return featureExperiments
+}