@sanity/personalization-plugin 2.0.0

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@sanity/personalization-plugin",
+  "version": "2.0.0",
+  "description": "Plugin to help with personalization, a/b testing when using Sanity",
+  "keywords": [
+    "sanity",
+    "sanity-plugin"
+  ],
+  "homepage": "https://github.com/sanity-io/sanity-plugin-personalization#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/sanity-plugin-personalization/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:sanity-io/sanity-plugin-personalization.git"
+  },
+  "license": "MIT",
+  "author": "Sanity <hello@sanity.io>",
+  "sideEffects": false,
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
+  "scripts": {
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint . --fix",
+    "prepublishOnly": "npm run build",
+    "watch": "pkg-utils watch --strict",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/ui": "^2.8.19",
+    "@sanity/uuid": "^3.0.2",
+    "fast-deep-equal": "^3.1.3",
+    "react-icons": "^5.4.0",
+    "suspend-react": "^0.1.3"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.7.1",
+    "@commitlint/config-conventional": "^19.7.1",
+    "@sanity/pkg-utils": "^6.13.4",
+    "@sanity/plugin-kit": "^4.0.19",
+    "@sanity/semantic-release-preset": "^5.0.0",
+    "@types/react": "^18.3.18",
+    "@typescript-eslint/eslint-plugin": "^8.23.0",
+    "@typescript-eslint/parser": "^8.23.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-sanity": "^7.1.4",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.4.2",
+    "prettier-plugin-packagejson": "^2.5.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sanity": "^3.74.1",
+    "semantic-release": "^24.2.1",
+    "styled-components": "^6.1.15",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "sanity": "^3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "resolutions": {
+    "conventional-changelog-conventionalcommits": ">= 8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/sanity.json

@@ -0,0 +1,8 @@
+{
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

package/src/components/Array.tsx

@@ -0,0 +1,69 @@
+import {Button, Inline, Stack} from '@sanity/ui'
+import {uuid} from '@sanity/uuid'
+import {useCallback} from 'react'
+import {useFormValue} from 'sanity'
+
+import {ArrayInputProps, VariantType} from '../types'
+import {useExperimentContext} from './ExperimentContext'
+
+export const ArrayInput = (props: ArrayInputProps) => {
+  const fieldPath = props.path.slice(0, -1)
+  const experimentId = useFormValue([...fieldPath, 'experimentId'])
+
+  const {experiments} = useExperimentContext()
+
+  const {onItemAppend, objectName} = props
+
+  const handleClick = useCallback(
+    async (variant: VariantType) => {
+      const item = {
+        _key: uuid(),
+        variantId: variant.id,
+        experimentId: experimentId,
+        _type: objectName,
+      }
+
+      // Patch the document
+      onItemAppend(item)
+    },
+    [experimentId, objectName, onItemAppend],
+  )
+
+  const filteredVariants =
+    experiments.find((option) => {
+      return option.id === experimentId
+    })?.variants || []
+
+  type Value = {
+    experimentId: string
+    value?: unknown
+    variantId: string
+    _key: string
+    _type: string
+  }
+
+  // there is probably some better was of getting the type of this?
+  const values = props.value as Value[] | []
+
+  const usedVariants = values?.map((variant) => variant.variantId)
+
+  return (
+    <Stack space={3}>
+      {props.renderDefault({...props, arrayFunctions: () => null})}
+
+      <Inline space={1}>
+        {filteredVariants.map((variant) => {
+          return (
+            <Button
+              key={`${experimentId}-${variant.id}`}
+              text={`Add ${variant.label}`}
+              mode="ghost"
+              disabled={usedVariants?.includes(variant.id)}
+              onClick={() => handleClick(variant)}
+            />
+          )
+        })}
+      </Inline>
+    </Stack>
+  )
+}

package/src/components/ExperimentContext.tsx

@@ -0,0 +1,60 @@
+import equal from 'fast-deep-equal'
+import {createContext, useContext, useMemo} from 'react'
+import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
+import {suspend} from 'suspend-react'
+
+import {ExperimentContextProps, FieldPluginConfig} from '../types'
+
+// This provider makes the plugin config available to all components in the document form
+// But with experiments resolved
+
+export const CONFIG_DEFAULT = {
+  fields: [],
+  apiVersion: '2024-11-07',
+}
+
+export const ExperimentContext = createContext<ExperimentContextProps>({
+  ...CONFIG_DEFAULT,
+  experiments: [],
+})
+
+export function useExperimentContext() {
+  return useContext(ExperimentContext)
+}
+
+type ExperimentProps = ObjectInputProps & {
+  experimentFieldPluginConfig: Required<FieldPluginConfig>
+}
+
+export function ExperimentProvider(props: ExperimentProps) {
+  const {experimentFieldPluginConfig} = props
+
+  const client = useClient({apiVersion: experimentFieldPluginConfig.apiVersion})
+  const workspace = useWorkspace()
+
+  // Fetch or return experiments
+  const experiments = Array.isArray(experimentFieldPluginConfig.experiments)
+    ? experimentFieldPluginConfig.experiments
+    : suspend(
+        // eslint-disable-next-line require-await
+        async () => {
+          if (typeof experimentFieldPluginConfig.experiments === 'function') {
+            return experimentFieldPluginConfig.experiments(client)
+          }
+          return experimentFieldPluginConfig.experiments
+        },
+        [workspace],
+        {equal},
+      )
+
+  const context = useMemo(
+    () => ({...experimentFieldPluginConfig, experiments}),
+    [experimentFieldPluginConfig, experiments],
+  )
+
+  return (
+    <ExperimentContext.Provider value={context}>
+      {props.renderDefault(props)}
+    </ExperimentContext.Provider>
+  )
+}

package/src/components/ExperimentField.tsx

@@ -0,0 +1,84 @@
+import {CloseIcon} from '@sanity/icons'
+import {useCallback, useMemo} from 'react'
+import {GiSoapExperiment} from 'react-icons/gi'
+import {
+  defineDocumentFieldAction,
+  DocumentFieldActionItem,
+  DocumentFieldActionProps,
+  FormPatch,
+  ObjectFieldProps,
+  PatchEvent,
+  set,
+  unset,
+} from 'sanity'
+type PatchStuff = {onChange: (patch: FormPatch | FormPatch[] | PatchEvent) => void; inputId: string}
+
+const useAddExperimentAction = (
+  props: DocumentFieldActionProps & PatchStuff,
+): DocumentFieldActionItem => {
+  const patchActiveEvent = useMemo(() => {
+    return set(true, ['active'])
+  }, [])
+  const handleAction = useCallback(() => {
+    props.onChange([patchActiveEvent])
+  }, [patchActiveEvent, props])
+
+  return {
+    title: 'Add experiment',
+    type: 'action',
+    icon: GiSoapExperiment,
+    onAction: handleAction,
+    renderAsButton: true,
+  }
+}
+
+const useRemoveExperimentAction = (
+  props: DocumentFieldActionProps & PatchStuff,
+): DocumentFieldActionItem => {
+  const patchActiveEvent = useMemo(() => {
+    const activeId = ['active']
+    return set(false, activeId)
+  }, [])
+
+  const patchClearEvent = useMemo(() => {
+    const experimentId = ['experimentId'] // `${props.inputId}.experimentId`
+    const variants = ['variants'] //`${props.inputId}.variants`
+    return [unset(experimentId), unset(variants)]
+  }, [])
+  const handleAction = useCallback(() => {
+    props.onChange([patchActiveEvent, ...patchClearEvent])
+  }, [patchActiveEvent, patchClearEvent, props])
+
+  return {
+    title: 'Remove experiment',
+    type: 'action',
+    icon: CloseIcon,
+    onAction: handleAction,
+    renderAsButton: true,
+  }
+}
+
+const newActions = ({onChange, inputId, active}: PatchStuff & {active?: boolean}) =>
+  active
+    ? defineDocumentFieldAction({
+        name: 'Experiment',
+        useAction: (props) => useRemoveExperimentAction({...props, onChange, inputId}),
+      })
+    : defineDocumentFieldAction({
+        name: 'Experiment',
+        useAction: (props) => useAddExperimentAction({...props, onChange, inputId}),
+      })
+
+export const ExperimentField = (props: ObjectFieldProps) => {
+  const {onChange} = props.inputProps
+  const {inputId} = props
+  const active = props.value?.active as boolean | undefined
+
+  const oldActions = props.actions || []
+
+  const withActionProps = {
+    ...props,
+    actions: [newActions({onChange, inputId, active}), ...oldActions],
+  }
+  return props.renderDefault(withActionProps)
+}

package/src/components/ExperimentInput.tsx

@@ -0,0 +1,61 @@
+import {FormEvent, useCallback, useMemo} from 'react'
+import {
+  FormPatch,
+  PatchEvent,
+  set,
+  StringInputProps,
+  unset,
+  useDocumentOperation,
+  useFormValue,
+} from 'sanity'
+
+import {ExperimentType} from '..'
+import {useExperimentContext} from './ExperimentContext'
+import {Select} from './Select'
+
+export type SelectOption = {title: string; value: string}
+const formatlistOptions = (experiments: ExperimentType[]): SelectOption[] =>
+  experiments.map((experiment) => ({
+    title: experiment.label,
+    value: experiment.id,
+  }))
+
+export const ExperimentInput = (props: StringInputProps) => {
+  const {experiments} = useExperimentContext()
+
+  const id = useFormValue(['_id']) as string
+  const aditionalChangePath = useMemo(() => [...props.path.slice(0, -1), 'variants'], [props.path])
+  const subValues = useFormValue(aditionalChangePath)
+
+  const {patch} = useDocumentOperation(id.replace('drafts.', ''), props.schemaType.name)
+
+  const handleChange = useCallback(
+    (
+      event: FormEvent<Element>,
+      onChange: (patchchange: FormPatch | FormPatch[] | PatchEvent) => void,
+    ) => {
+      const target = event.currentTarget as HTMLSelectElement
+      const inputValue = target.value
+
+      if (inputValue) {
+        onChange(set(inputValue))
+      } else {
+        onChange(unset())
+      }
+
+      if (subValues) {
+        const patchEvent = {
+          unset: [aditionalChangePath.join('.')],
+        }
+        patch.execute([patchEvent])
+      }
+    },
+    [patch, subValues, aditionalChangePath],
+  )
+
+  if (!experiments.length) return <></>
+
+  return (
+    <Select {...props} listOptions={formatlistOptions(experiments)} handleChange={handleChange} />
+  )
+}

package/src/components/Select.tsx

@@ -0,0 +1,43 @@
+import {Select as SanitySelect} from '@sanity/ui'
+import {FormEvent} from 'react'
+import {FormPatch, PatchEvent, Path, StringInputProps} from 'sanity'
+
+import {SelectOption} from './ExperimentInput'
+
+export const Select = (
+  props: StringInputProps & {
+    listOptions: SelectOption[]
+    handleChange: (
+      event: FormEvent,
+      onChange: (patch: FormPatch | FormPatch[] | PatchEvent) => void,
+    ) => void
+    aditionalChangePath?: Path
+    clearSubValueOnChange?: boolean
+  },
+) => {
+  const {
+    value, // Current field value
+    onChange, // Method to handle patch events,
+    elementProps,
+    listOptions,
+    handleChange,
+  } = props
+
+  return (
+    <SanitySelect
+      {...elementProps}
+      fontSize={2}
+      padding={3}
+      space={[3, 3, 4]}
+      value={value || ''} // Current field value
+      onChange={(event) => handleChange(event, onChange)} // A function to call when the input value changes
+    >
+      <option value={''}>{'Select an option...'}</option>
+      {listOptions.map(({value: optionValue, title}) => (
+        <option key={optionValue} value={optionValue}>
+          {title}
+        </option>
+      ))}
+    </SanitySelect>
+  )
+}

package/src/components/VariantInput.tsx

@@ -0,0 +1,71 @@
+import {FormEvent, useCallback} from 'react'
+import {
+  FormPatch,
+  PatchEvent,
+  set,
+  StringInputProps,
+  unset,
+  useDocumentOperation,
+  useFormValue,
+} from 'sanity'
+
+import {VariantType} from '../types'
+import {useExperimentContext} from './ExperimentContext'
+import {Select} from './Select'
+
+const formatlistOptions = (varants: VariantType[]) =>
+  varants.map((variant) => ({
+    title: variant.label,
+    value: variant.id,
+  }))
+
+export const VariantInput = (props: StringInputProps) => {
+  const experimentPath = props.path.slice(0, -3)
+
+  const experimentValue = useFormValue([...experimentPath, 'experimentValue'])
+
+  const id = useFormValue(['_id']) as string
+
+  const {patch} = useDocumentOperation(id.replace('drafts.', ''), props.schemaType.name)
+
+  const {experiments} = useExperimentContext()
+
+  const handleChange = useCallback(
+    (
+      event: FormEvent<Element>,
+      onChange: (patchchange: FormPatch | FormPatch[] | PatchEvent) => void,
+    ) => {
+      const target = event.currentTarget as HTMLSelectElement
+      const inputValue = target.value
+      const variantExperimentId = props.id.replace('variantId', 'experimentId')
+
+      if (inputValue) {
+        onChange(set(inputValue))
+        const patchEvent = {
+          set: {[variantExperimentId]: experimentValue},
+        }
+        patch.execute([patchEvent])
+      } else {
+        onChange(unset())
+        const patchEvent = {
+          unset: [variantExperimentId],
+        }
+        patch.execute([patchEvent])
+      }
+    },
+    [experimentValue, patch, props.id],
+  )
+
+  const filteredVariants =
+    experiments.find((option) => {
+      return option.id === experimentValue
+    })?.variants || []
+
+  return (
+    <Select
+      {...props}
+      listOptions={formatlistOptions(filteredVariants)}
+      handleChange={handleChange}
+    />
+  )
+}

package/src/components/VariantPreview.tsx

@@ -0,0 +1,75 @@
+import {useEffect, useState} from 'react'
+import {
+  isImage,
+  isReference,
+  ObjectSchemaType,
+  PreviewProps,
+  ReferenceSchemaType,
+  useClient,
+} from 'sanity'
+
+import {VariantPreviewProps} from '../types'
+import {useExperimentContext} from './ExperimentContext'
+
+export const VariantPreview = (props: PreviewProps) => {
+  const [subtitle, setSubtitle] = useState<string | undefined>(undefined)
+  const [title, setTitle] = useState<string | undefined>(undefined)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [media, setMedia] = useState<any>(undefined)
+  const client = useClient({apiVersion: '2025-01-01'})
+  const {experiments} = useExperimentContext()
+
+  const {experiment, variant, value} = props as VariantPreviewProps
+
+  const selectedExperiment = experiments.find((experimentItem) => {
+    return experimentItem.id === experiment
+  })
+
+  const selectedVariant = selectedExperiment?.variants.find((variantItem) => {
+    return variantItem.id === variant
+  })
+
+  useEffect(() => {
+    const getSubtitle = async () => {
+      setTitle(`${selectedExperiment?.label} - ${selectedVariant?.label}`)
+      if (typeof value === 'string') {
+        return setSubtitle(value)
+      }
+      if (isReference(value)) {
+        const doc = await client.getDocument(value._ref)
+        const type = props.schemaType as ObjectSchemaType
+        const valueField = type.fields.find((field) => field.name === 'value') as ObjectSchemaType
+        const referenceField = valueField?.type as ReferenceSchemaType
+        const referenceType = referenceField.to.find((field) => field.type?.name === doc?._type)
+
+        const selectFields = {} as Record<string, unknown>
+        const previewFields = referenceType?.preview?.select || {}
+        Object.keys(previewFields).forEach((key) => {
+          const valueKey = referenceType?.preview?.select?.[key]
+          selectFields[key] =
+            valueKey && doc
+              ? valueKey?.split('.').reduce((acc, index) => acc[index], doc)
+              : undefined
+        })
+
+        const previewContent = referenceType?.preview?.prepare?.(selectFields)
+        setMedia(previewContent?.media || selectFields.media)
+        return setSubtitle(previewContent?.title || (selectFields?.title as string))
+      }
+      if (isImage(value)) {
+        setMedia(value)
+      }
+      return ''
+    }
+    getSubtitle()
+  }, [value, client, selectedExperiment?.label, selectedVariant?.label, props.schemaType])
+
+  const previewProps = {
+    ...props,
+    title: title,
+    subtitle: subtitle,
+    media: media,
+  }
+
+  return props.renderDefault(previewProps)
+}