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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/personalization-plugin",
-  "version": "2.2.0-growthbook.1",
+  "version": "2.2.0",
   "description": "Plugin to help with personalization, a/b testing when using Sanity",
   "keywords": [
     "sanity",
@@ -45,7 +45,6 @@
   },
   "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",
@@ -79,7 +78,7 @@
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "react": "^18",
+    "react": "^18 || ^19",
     "sanity": "^3"
   },
   "engines": {

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()
@@ -47,17 +44,17 @@ export function ExperimentProvider(props: ExperimentProps) {
         // eslint-disable-next-line require-await
         async () => {
           if (typeof experimentFieldPluginConfig.experiments === 'function') {
-            return experimentFieldPluginConfig.experiments(client, secret)
+            return experimentFieldPluginConfig.experiments(client)
           }
           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,5 +1,4 @@
 import {CloseIcon} from '@sanity/icons'
-import {useCallback, useMemo} from 'react'
 import {GiSoapExperiment} from 'react-icons/gi'
 import {
   defineDocumentFieldAction,
@@ -19,9 +18,9 @@ const useAddExperimentAction = (
 ): DocumentFieldActionItem => {
   const {onChange, active, experimentNameOverride} = props
 
-  const handleAddAction = useCallback(() => {
+  const handleAddAction = () => {
     onChange([set(!active, ['active'])])
-  }, [onChange, active])
+  }
 
   return {
     title: `Add ${experimentNameOverride}`,
@@ -34,22 +33,23 @@ const useAddExperimentAction = (
 
 const useRemoveExperimentAction = (
   props: DocumentFieldActionProps &
-    PatchStuff & {
-      experimentNameOverride: string
-      experimentId: string
-      active: boolean
-      variantNameOverride: string
-    },
+    PatchStuff & {experimentNameOverride: string; experimentId: string; active: boolean},
 ): DocumentFieldActionItem => {
-  const {onChange, active, experimentId, experimentNameOverride, variantNameOverride} = props
-
-  const handleClearAction = useCallback(() => {
+  const {onChange, active, experimentId, experimentNameOverride} = props
+  const patchActiveFalseEvent = () => {
     const activeId = ['active']
+    return set(!active, activeId)
+  }
+  const patchClearEvent = () => {
     const experiment = [experimentId]
-    const variants = [`${variantNameOverride}s`]
-    onChange([set(!active, activeId), unset(experiment), unset(variants)])
-  }, [onChange, active, experimentId, variantNameOverride])
-
+    const variants = [experimentNameOverride]
+    return [unset(experiment), unset(variants)]
+  }
+  const handleClearAction = () => {
+    const clearEvents = patchClearEvent()
+    const activeEvent = patchActiveFalseEvent()
+    onChange([activeEvent, ...clearEvents])
+  }
   return {
     title: `Remove ${experimentNameOverride}`,
     type: 'action',
@@ -59,19 +59,13 @@ const useRemoveExperimentAction = (
   }
 }
 
-const createActions = ({
+const newActions = ({
   onChange,
   inputId,
   active,
   experimentNameOverride,
   experimentId,
-  variantNameOverride,
-}: PatchStuff & {
-  active?: boolean
-  experimentNameOverride: string
-  experimentId: string
-  variantNameOverride: string
-}) => {
+}: PatchStuff & {active?: boolean; experimentNameOverride: string; experimentId: string}) => {
   const removeAction = defineDocumentFieldAction({
     name: `Remove ${experimentNameOverride}`,
     useAction: (props) =>
@@ -82,7 +76,6 @@ const createActions = ({
         inputId,
         experimentNameOverride,
         experimentId,
-        variantNameOverride,
       }),
   })
   const addAction = defineDocumentFieldAction({
@@ -97,44 +90,27 @@ const createActions = ({
         experimentId,
       }),
   })
-  return active ? removeAction : addAction
+  if (active) {
+    return removeAction
+  }
+  return addAction
 }
 
 export const ExperimentField = (
-  props: ObjectFieldProps & {
-    experimentNameOverride: string
-    experimentId: string
-    variantNameOverride: string
-  },
+  props: ObjectFieldProps & {experimentNameOverride: string; experimentId: string},
 ) => {
   const {onChange} = props.inputProps
-  const {inputId, experimentNameOverride, experimentId, variantNameOverride} = props
+  const {inputId, experimentNameOverride, experimentId} = props
   const active = props.value?.active as boolean | undefined
 
-  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 oldActions = props.actions || []
 
+  const withActionProps = {
+    ...props,
+    actions: [
+      newActions({onChange, inputId, active, experimentNameOverride, experimentId}),
+      ...oldActions,
+    ],
+  }
   return props.renderDefault(withActionProps)
 }

package/src/components/ExperimentInput.tsx

@@ -1,3 +1,4 @@
+import {Card, Text} from '@sanity/ui'
 import {FormEvent, useCallback, useMemo} from 'react'
 import {
   FormPatch,
@@ -20,16 +21,18 @@ const formatlistOptions = (experiments: ExperimentType[]): SelectOption[] =>
     value: experiment.id,
   }))
 
-export const ExperimentInput = (props: StringInputProps & {variantNameOverride: string}) => {
+export const ExperimentInput = (
+  props: StringInputProps & {variantNameOverride: string; experimentNameOverride: string},
+) => {
   const {experiments} = useExperimentContext()
 
   const id = useFormValue(['_id']) as string
   const aditionalChangePath = useMemo(
-    () => [...props.path.slice(0, -1), `${props.variantNameOverride}s`],
+    () => [...props.path.slice(0, -1), props.variantNameOverride],
     [props.variantNameOverride, props.path],
   )
-
   const subValues = useFormValue(aditionalChangePath)
+
   const {patch} = useDocumentOperation(id.replace('drafts.', ''), props.schemaType.name)
 
   const handleChange = useCallback(
@@ -56,7 +59,14 @@ export const ExperimentInput = (props: StringInputProps & {variantNameOverride:
     [patch, subValues, aditionalChangePath],
   )
 
-  if (!experiments.length) return <></>
+  if (!experiments.length)
+    return (
+      <Card padding={[3, 3, 4]} radius={2} shadow={1} tone="caution">
+        <Text align="center" size={[2, 2, 3]}>
+          There are no defined {props.experimentNameOverride}s
+        </Text>
+      </Card>
+    )
 
   return (
     <Select {...props} listOptions={formatlistOptions(experiments)} handleChange={handleChange} />

package/src/fieldExperiments.tsx

@@ -44,7 +44,6 @@ const createExperimentType = ({
           {...props}
           experimentId={experimentId}
           experimentNameOverride={experimentNameOverride}
-          variantNameOverride={variantNameOverride}
         />
       ),
     },
@@ -70,7 +69,11 @@ const createExperimentType = ({
         type: 'string',
         components: {
           input: (props) => (
-            <ExperimentInput {...props} variantNameOverride={variantNameOverride} />
+            <ExperimentInput
+              {...props}
+              experimentNameOverride={experimentNameOverride}
+              variantNameOverride={variantNameOverride}
+            />
           ),
         },
         hidden: ({parent}) => {

package/src/index.ts

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

package/src/types.ts

@@ -1,4 +1,3 @@
-import {Dispatch, SetStateAction} from 'react'
 import {
   ArrayOfObjectsInputProps,
   FieldDefinition,
@@ -21,9 +20,7 @@ export type ExperimentType = {
 
 export type FieldPluginConfig = {
   fields: (string | FieldDefinition)[]
-  experiments:
-    | ExperimentType[]
-    | ((client: SanityClient, secret?: string) => Promise<ExperimentType[]>)
+  experiments: ExperimentType[] | ((client: SanityClient) => Promise<ExperimentType[]>)
   apiVersion?: string
   experimentNameOverride?: string
   variantNameOverride?: string
@@ -40,8 +37,6 @@ 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 & {
@@ -72,179 +67,3 @@ 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/components/Secrets.tsx

@@ -1,47 +0,0 @@
-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/growthbookFieldExperiments.tsx

@@ -1,51 +0,0 @@
-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/utils/growthbook.ts

@@ -1,78 +0,0 @@
-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
-}