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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.2.0",
+  "version": "2.3.0-growthbook.1",
   "description": "Plugin to help with personalization, a/b testing when using Sanity",
   "keywords": [
     "sanity",
@@ -24,6 +24,11 @@
       "import": "./dist/index.mjs",
       "default": "./dist/index.js"
     },
+    "./growthbook": {
+      "source": "./src/growthbook/index.ts",
+      "import": "./dist/growthbook/index.mjs",
+      "default": "./dist/growthbook/index.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
@@ -45,6 +50,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/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

@@ -28,11 +28,11 @@ export const ExperimentInput = (
 
   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/fieldExperiments.tsx

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

package/src/growthbook/Components/GrowthbookContext.tsx

@@ -0,0 +1,38 @@
+import {createContext, useContext, useMemo, useState} from 'react'
+import {ObjectInputProps} from 'sanity'
+
+import {GrowthbookABConfig, GrowthbookContextProps} from '../types'
+import {Secrets} from './Secrets'
+
+export const GROWTHBOOK_CONFIG_DEFAULT = {
+  baseUrl: 'https://api.growthbook.io/api/v1',
+}
+
+export const GrowthbookContext = createContext<GrowthbookContextProps>({
+  setSecret: () => undefined,
+  secret: undefined,
+})
+
+export function useGrowthbookContext() {
+  return useContext(GrowthbookContext)
+}
+
+type GrowthbookProps = ObjectInputProps & {
+  growthbookFieldPluginConfig: GrowthbookABConfig
+}
+
+export function GrowthbookProvider(props: GrowthbookProps) {
+  const {growthbookFieldPluginConfig} = props
+  const [secret, setSecret] = useState<string | undefined>()
+
+  const context = useMemo(
+    () => ({...growthbookFieldPluginConfig, secret, setSecret}),
+    [growthbookFieldPluginConfig, secret, setSecret],
+  )
+
+  return (
+    <GrowthbookContext.Provider value={context}>
+      <Secrets {...props} />
+    </GrowthbookContext.Provider>
+  )
+}

package/src/growthbook/Components/Secrets.tsx

@@ -0,0 +1,47 @@
+import {SettingsView, useSecrets} from '@sanity/studio-secrets'
+import {useEffect, useState} from 'react'
+import {ObjectInputProps} from 'sanity'
+
+import {useGrowthbookContext} from './GrowthbookContext'
+
+export const namespace = 'growthbook'
+
+export 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} = useGrowthbookContext()
+  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/growthbook/index.ts

@@ -0,0 +1,52 @@
+import {definePlugin, isObjectInputProps} from 'sanity'
+
+import {fieldLevelExperiments as baseFieldLevelExperiments} from '../fieldExperiments'
+import {flattenSchemaType} from '../utils/flattenSchemaType'
+import {GROWTHBOOK_CONFIG_DEFAULT, GrowthbookProvider} from './Components/GrowthbookContext'
+import {GrowthbookABConfig} from './types'
+import {getExperiments} from './utils'
+
+export const fieldLevelExperiments = definePlugin<GrowthbookABConfig>((config) => {
+  const pluginConfig = {...GROWTHBOOK_CONFIG_DEFAULT, ...config}
+  const {fields, environment, project, convertBooleans, baseUrl, tags} = pluginConfig
+  return {
+    name: 'sanity-growthbook-personalistaion-plugin-field-level-experiments',
+    plugins: [
+      baseFieldLevelExperiments({
+        fields,
+        experiments: (client) =>
+          getExperiments({client, environment, baseUrl, project, convertBooleans, tags}),
+      }),
+    ],
+
+    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)
+          }
+
+          const providerProps = {
+            ...props,
+            growthbookFieldPluginConfig: {
+              ...pluginConfig,
+            },
+          }
+          return GrowthbookProvider(providerProps)
+        },
+      },
+    },
+  }
+})

package/src/growthbook/types.ts

@@ -0,0 +1,15 @@
+import {FieldDefinition} from 'sanity'
+
+export type GrowthbookABConfig = {
+  fields: (string | FieldDefinition)[]
+  environment: string
+  baseUrl?: string
+  project?: string
+  convertBooleans?: boolean
+  tags?: string[]
+}
+
+export type GrowthbookContextProps = {
+  setSecret: (secret: string | undefined) => void
+  secret: string | undefined
+}

package/src/growthbook/utils.ts

@@ -0,0 +1,94 @@
+import {SanityClient} from 'sanity'
+
+import {ExperimentType, GrowthbookFeature, VariantType} from '../types'
+import {namespace, pluginConfigKeys} from './Components/Secrets'
+import {GrowthbookABConfig} from './types'
+
+const getBooleanConversion = (value: string) => {
+  // control is false
+  if (value === 'true') {
+    return 'variant'
+  } else if (value === 'false') {
+    return 'control'
+  }
+  return value
+}
+
+export const getExperiments = async ({
+  client,
+  environment,
+  baseUrl,
+  project,
+  convertBooleans,
+  tags,
+}: Omit<GrowthbookABConfig, 'fields' | 'baseUrl'> & {
+  client: SanityClient
+  baseUrl: string
+}): Promise<ExperimentType[]> => {
+  const query = `*[_id == 'secrets.${namespace}'][0].secrets.${pluginConfigKeys[0].key}`
+
+  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}/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
+      }
+      if (tags && feature.tags && !feature.tags.some((tag) => tags.includes(tag))) {
+        return undefined
+      }
+
+      const experiments = feature.environments[environment]?.rules.filter(
+        (experiment) => experiment.type === 'experiment-ref' || experiment.type === 'experiment',
+      )
+
+      if (!experiments) {
+        return undefined
+      }
+
+      const variations: VariantType[] = []
+      const uniqueValues = new Set<string>()
+
+      experiments.forEach((experiment) => {
+        experiment?.variations.forEach((variant) => {
+          const value = convertBooleans ? getBooleanConversion(variant.value) : variant.value
+          if (!uniqueValues.has(value)) {
+            uniqueValues.add(value)
+            variations.push({
+              id: value,
+              label: value,
+            })
+          }
+        })
+      })
+      const value = {id: feature.id, label: feature.id, variants: variations}
+
+      featureExperiments.push(value)
+      return undefined
+    })
+  }
+  const sortedFeatureExperiments = featureExperiments.sort((a, b) => a.id.localeCompare(b.id))
+  return sortedFeatureExperiments
+}

package/src/types.ts

@@ -20,7 +20,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
@@ -67,3 +69,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
+  }
+}