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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.0.0",
+  "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/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'
 
@@ -16,6 +16,8 @@ export const CONFIG_DEFAULT = {
 export const ExperimentContext = createContext<ExperimentContextProps>({
   ...CONFIG_DEFAULT,
   experiments: [],
+  setSecret: () => undefined,
+  secret: undefined,
 })
 
 export function useExperimentContext() {
@@ -28,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()
@@ -39,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/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

@@ -20,7 +20,9 @@ const createFieldType = ({
   field,
 }: {
   field: string | FieldDefinition
-  experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
+  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)

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
 }
 
@@ -33,6 +36,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 & {
@@ -58,3 +63,179 @@ export type ExperimentGeneric<T> = {
     } & VariantGeneric<T>
   >
 }
+
+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
+}