@sanity/personalization-plugin 2.3.0-launch-darkly.1 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.3.0-launch-darkly.1",
+  "version": "2.3.0",
   "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,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/ExperimentContext.tsx

@@ -1,5 +1,5 @@
 import equal from 'fast-deep-equal'
-import {createContext, useContext, useMemo, useState} from 'react'
+import {createContext, useContext, useMemo} from 'react'
 import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
 import {suspend} from 'suspend-react'
 
@@ -21,8 +21,6 @@ export const CONFIG_DEFAULT = {
 export const ExperimentContext = createContext<ExperimentContextProps>({
   ...CONFIG_DEFAULT,
   experiments: [],
-  setSecret: () => undefined,
-  secret: undefined,
 })
 
 export function useExperimentContext() {
@@ -35,7 +33,6 @@ 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()
@@ -51,13 +48,13 @@ export function ExperimentProvider(props: ExperimentProps) {
           }
           return experimentFieldPluginConfig.experiments
         },
-        [workspace, secret],
+        [workspace],
         {equal},
       )
 
   const context = useMemo(
-    () => ({...experimentFieldPluginConfig, experiments, secret, setSecret}),
-    [experimentFieldPluginConfig, experiments, secret, setSecret],
+    () => ({...experimentFieldPluginConfig, experiments}),
+    [experimentFieldPluginConfig, experiments],
   )
 
   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,21 @@ 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 +58,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 +81,7 @@ const newActions = ({
         inputId,
         experimentNameOverride,
         experimentId,
+        variantNameOverride,
       }),
   })
   const addAction = defineDocumentFieldAction({
@@ -90,27 +96,43 @@ 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 withActionProps = {
-    ...props,
-    actions: [
-      newActions({onChange, inputId, active, experimentNameOverride, experimentId}),
-      ...oldActions,
-    ],
-  }
+  const memoizedActions = useMemo(() => {
+    const oldActions = props.actions || []
+    return [createActions(actionProps), ...oldActions]
+  }, [actionProps, props.actions])
+
+  const withActionProps = useMemo(
+    () => ({
+      ...props,
+      actions: memoizedActions,
+    }),
+    [props, memoizedActions],
+  )
   return props.renderDefault(withActionProps)
 }

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(
-    () => [...props.path.slice(0, -1), props.variantNameOverride],
+  const additionalChangePath = useMemo(
+    () => [...props.path.slice(0, -1), `${props.variantNameOverride}s`],
     [props.variantNameOverride, props.path],
   )
-  const subValues = useFormValue(aditionalChangePath)
+  const subValues = useFormValue(additionalChangePath)
 
-  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

@@ -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 {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/{components → growthbook/Components}/Secrets.tsx

@@ -2,18 +2,20 @@ import {SettingsView, useSecrets} from '@sanity/studio-secrets'
 import {useEffect, useState} from 'react'
 import {ObjectInputProps} from 'sanity'
 
-import {useExperimentContext} from './ExperimentContext'
+import {useGrowthbookContext} from './GrowthbookContext'
 
-const pluginConfigKeys = [
+export const namespace = 'growthbook'
+
+export const pluginConfigKeys = [
   {
     key: 'apiKey',
     title: 'Your secret API key',
   },
 ]
 
-export const Secrets = (props: ObjectInputProps, namespace: string) => {
+export const Secrets = (props: ObjectInputProps) => {
   const {secrets, loading} = useSecrets(namespace) as {secrets: {apiKey: string}; loading: boolean}
-  const {setSecret} = useExperimentContext()
+  const {setSecret} = useGrowthbookContext()
   const [showSettings, setShowSettings] = useState<boolean>(false)
 
   useEffect(() => {
@@ -32,7 +34,7 @@ export const Secrets = (props: ObjectInputProps, namespace: string) => {
   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/index.ts

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