@sanity/personalization-plugin 2.3.0-launch-darkly.2 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.3.0-launch-darkly.2",
+  "version": "2.4.0",
   "description": "Plugin to help with personalization, a/b testing when using Sanity",
   "keywords": [
     "sanity",
@@ -24,10 +24,10 @@
       "import": "./dist/index.mjs",
       "default": "./dist/index.js"
     },
-    "./launchDarkly": {
-      "source": "./src/launchDarkly/index.ts",
-      "import": "./dist/launchDarkly/index.mjs",
-      "default": "./dist/launchDarkly/index.js"
+    "./growthbook": {
+      "source": "./src/growthbook/index.ts",
+      "import": "./dist/growthbook/index.mjs",
+      "default": "./dist/growthbook/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/studio-secrets": "^3.0.1",
+    "@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

@@ -42,7 +42,6 @@ const useRemoveExperimentAction = (
     },
 ): DocumentFieldActionItem => {
   const {onChange, active, experimentId, experimentNameOverride, variantNameOverride} = props
-
   const handleClearAction = useCallback(() => {
     const activeId = ['active']
     const experiment = [experimentId]
@@ -97,10 +96,7 @@ const createActions = ({
         experimentId,
       }),
   })
-  if (active) {
-    return removeAction
-  }
-  return addAction
+  return active ? removeAction : addAction
 }
 
 export const ExperimentField = (

package/src/components/ExperimentInput.tsx

@@ -2,6 +2,7 @@ import {Card, Text} from '@sanity/ui'
 import {FormEvent, useCallback, useMemo} from 'react'
 import {
   FormPatch,
+  getPublishedId,
   PatchEvent,
   set,
   StringInputProps,
@@ -27,13 +28,13 @@ export const ExperimentInput = (
   const {experiments} = useExperimentContext()
 
   const id = useFormValue(['_id']) as string
-  const aditionalChangePath = useMemo(
+  const additionalChangePath = useMemo(
     () => [...props.path.slice(0, -1), `${props.variantNameOverride}s`],
     [props.variantNameOverride, props.path],
   )
+  const subValues = useFormValue(additionalChangePath)
 
-  const subValues = useFormValue(aditionalChangePath)
-  const {patch} = useDocumentOperation(id.replace('drafts.', ''), props.schemaType.name)
+  const {patch} = useDocumentOperation(getPublishedId(id), props.schemaType.name)
 
   const handleChange = useCallback(
     (
@@ -51,12 +52,12 @@ export const ExperimentInput = (
 
       if (subValues) {
         const patchEvent = {
-          unset: [aditionalChangePath.join('.')],
+          unset: [additionalChangePath.join('.')],
         }
         patch.execute([patchEvent])
       }
     },
-    [patch, subValues, aditionalChangePath],
+    [patch, subValues, additionalChangePath],
   )
 
   if (!experiments.length)

package/src/fieldExperiments.tsx

@@ -219,16 +219,17 @@ export const fieldLevelExperiments = definePlugin<FieldPluginConfig>((config) =>
             return props.renderDefault(props)
           }
 
-          const flatFieldTypeNames = flattenSchemaType(props.schemaType).map(
-            (field) => field.type.name,
-          )
-          const hasExperiment = flatFieldTypeNames.some((name) =>
-            name.startsWith(experimentNameOverride),
+          const flatFields = flattenSchemaType(props.schemaType)
+          const hasExperiment = flatFields.some(
+            (field) =>
+              field.type.name.startsWith(experimentNameOverride) ||
+              field.name.startsWith(experimentNameOverride),
           )
 
           if (!hasExperiment) {
             return props.renderDefault(props)
           }
+
           const providerProps = {
             ...props,
             experimentFieldPluginConfig: {

package/src/growthbook/Components/GrowthbookContext.tsx

@@ -0,0 +1,38 @@
+import {createContext, useContext, useMemo, useState} from 'react'
+import {ObjectInputProps} from 'sanity'
+
+import {GrowthbookContextProps, GrowthbookExperimentFieldPluginConfig} 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: GrowthbookExperimentFieldPluginConfig
+}
+
+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/{launchDarkly/components → growthbook/Components}/Secrets.tsx

@@ -2,10 +2,11 @@ import {SettingsView, useSecrets} from '@sanity/studio-secrets'
 import {useEffect, useState} from 'react'
 import {ObjectInputProps} from 'sanity'
 
-import {useLaunchDarklyContext} from './LaunchDarklyContext'
+import {useGrowthbookContext} from './GrowthbookContext'
 
-const namespace = 'launchdarkly'
-const pluginConfigKeys = [
+export const namespace = 'growthbook'
+
+export const pluginConfigKeys = [
   {
     key: 'apiKey',
     title: 'Your secret API key',
@@ -14,7 +15,7 @@ const pluginConfigKeys = [
 
 export const Secrets = (props: ObjectInputProps) => {
   const {secrets, loading} = useSecrets(namespace) as {secrets: {apiKey: string}; loading: boolean}
-  const {setSecret} = useLaunchDarklyContext()
+  const {setSecret} = useGrowthbookContext()
   const [showSettings, setShowSettings] = useState<boolean>(false)
 
   useEffect(() => {
@@ -33,7 +34,7 @@ export const Secrets = (props: ObjectInputProps) => {
   return (
     <>
       <SettingsView
-        title={`${namespace} api key`}
+        title={'Growthbook secret'}
         namespace={namespace}
         keys={pluginConfigKeys}
         onClose={() => {

package/src/growthbook/index.ts

@@ -0,0 +1,54 @@
+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 {GrowthbookExperimentFieldPluginConfig} from './types'
+import {getExperiments} from './utils'
+
+export const fieldLevelExperiments = definePlugin<GrowthbookExperimentFieldPluginConfig>(
+  (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 GrowthbookExperimentFieldPluginConfig = {
+  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 {GrowthbookExperimentFieldPluginConfig} 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<GrowthbookExperimentFieldPluginConfig, '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

@@ -67,3 +67,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/flattenSchemaType.ts

@@ -11,7 +11,7 @@ export function flattenSchemaType(schemaType: SchemaType): ObjectFieldWithPath[]
     return []
   }
 
-  return extractInnerFields(schemaType.fields, [], 3)
+  return extractInnerFields(schemaType.fields, [], 5)
 }
 
 function extractInnerFields(
@@ -28,20 +28,17 @@ function extractInnerFields(
 
     if (field.type.jsonType === 'object') {
       const innerFields = extractInnerFields(field.type.fields, [...path, field.name], maxDepth)
-
       return [...acc, thisFieldWithPath, ...innerFields]
-    } else if (
-      field.type.jsonType === 'array' &&
-      field.type.of.length &&
-      field.type.of.some((item) => 'fields' in item)
-    ) {
-      const innerFields = extractInnerFields(
-        // @ts-expect-error - Fix TS assertion for array fields
-        field.type.of[0].fields,
-        [...path, field.name],
-        maxDepth,
-      )
-
+    } else if (field.type.jsonType === 'array') {
+      // Handle array types by checking each possible type in the array
+      const arrayTypes = field.type.of || []
+      const innerFields = arrayTypes.reduce<ObjectFieldWithPath[]>((arrayAcc, arrayType) => {
+        if ('fields' in arrayType) {
+          const typeFields = extractInnerFields(arrayType.fields, [...path, field.name], maxDepth)
+          return [...arrayAcc, ...typeFields]
+        }
+        return arrayAcc
+      }, [])
       return [...acc, thisFieldWithPath, ...innerFields]
     }
 

package/dist/launchDarkly/index.d.mts

@@ -1,12 +0,0 @@
-import {FieldDefinition} from 'sanity'
-import {Plugin as Plugin_2} from 'sanity'
-
-export declare const fieldLevelExperiments: Plugin_2<LaunchDarklyFieldLevelConfig>
-
-declare type LaunchDarklyFieldLevelConfig = {
-  fields: (string | FieldDefinition)[]
-  projectKey: string
-  tags?: string[]
-}
-
-export {}

package/dist/launchDarkly/index.d.ts

@@ -1,12 +0,0 @@
-import {FieldDefinition} from 'sanity'
-import {Plugin as Plugin_2} from 'sanity'
-
-export declare const fieldLevelExperiments: Plugin_2<LaunchDarklyFieldLevelConfig>
-
-declare type LaunchDarklyFieldLevelConfig = {
-  fields: (string | FieldDefinition)[]
-  projectKey: string
-  tags?: string[]
-}
-
-export {}