@sanity/personalization-plugin 2.4.1 → 2.5.0-field-level-personalization.1

package/dist/_chunks-es/fieldExperiments.mjs

@@ -0,0 +1,511 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { set, useClient, useWorkspace, useFormValue, defineDocumentFieldAction, unset, useDocumentOperation, getPublishedId, isReference, isImage, isDocumentSchemaType, definePlugin, isObjectInputProps, defineType, defineField } from "sanity";
+import { Stack, Inline, Button, Select as Select$1, Card, Text } from "@sanity/ui";
+import { uuid } from "@sanity/uuid";
+import { createContext, useMemo, useContext, useCallback, forwardRef, useState, useEffect } from "react";
+import equal from "fast-deep-equal";
+import { suspend } from "suspend-react";
+import { GiSoapExperiment } from "react-icons/gi";
+const ArrayItem = (props) => {
+  const { active } = props.value;
+  return active || props.inputProps.onChange(set(!0, ["active"])), props.renderDefault(props);
+}, CONFIG_DEFAULT = {
+  fields: [],
+  apiVersion: "2024-11-07",
+  experimentNameOverride: "experiment",
+  variantNameOverride: "variant",
+  variantId: "variantId",
+  variantArrayName: "variants",
+  experimentId: "experimentId"
+}, ExperimentContext = createContext({
+  ...CONFIG_DEFAULT,
+  experiments: []
+});
+function useExperimentContext() {
+  return useContext(ExperimentContext);
+}
+function ExperimentProvider(props) {
+  const { experimentFieldPluginConfig } = props, client = useClient({ apiVersion: experimentFieldPluginConfig.apiVersion }), workspace = useWorkspace(), experiments = Array.isArray(experimentFieldPluginConfig.experiments) ? experimentFieldPluginConfig.experiments : suspend(
+    // eslint-disable-next-line require-await
+    async () => typeof experimentFieldPluginConfig.experiments == "function" ? experimentFieldPluginConfig.experiments(client) : experimentFieldPluginConfig.experiments,
+    [workspace],
+    { equal }
+  ), context = useMemo(
+    () => ({ ...experimentFieldPluginConfig, experiments }),
+    [experimentFieldPluginConfig, experiments]
+  );
+  return /* @__PURE__ */ jsx(ExperimentContext.Provider, { value: context, children: props.renderDefault(props) });
+}
+const ArrayInput = (props) => {
+  const fieldPath = props.path.slice(0, -1), { onItemAppend, variantName, variantId, experimentId } = props, experimentValue = useFormValue([...fieldPath, experimentId]), { experiments } = useExperimentContext(), handleClick = useCallback(
+    async (variant) => {
+      const item = {
+        _key: uuid(),
+        [variantId]: variant.id,
+        [experimentId]: experimentValue,
+        _type: variantName
+      };
+      onItemAppend(item);
+    },
+    [variantId, experimentId, experimentValue, variantName, onItemAppend]
+  ), filteredVariants = experiments.find((option) => option.id === experimentValue)?.variants || [], usedVariants = (props.value || [])?.map((variant) => variant[variantId]);
+  return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    props.renderDefault({ ...props, arrayFunctions: () => null }),
+    /* @__PURE__ */ jsx(Inline, { space: 1, children: filteredVariants.map((variant) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        text: `Add ${variant.label}`,
+        mode: "ghost",
+        disabled: usedVariants?.includes(variant.id),
+        onClick: () => handleClick(variant)
+      },
+      `${experimentValue}-${variant.id}`
+    )) })
+  ] });
+}, CloseIcon = /* @__PURE__ */ forwardRef(function(props, ref) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-sanity-icon": "close",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 25 25",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      ref,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M18 7L7 18M7 7L18 18",
+          stroke: "currentColor",
+          strokeWidth: 1.2,
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}), clearChildrenGroups = (props) => {
+  const children = props.children;
+  return !children || typeof children != "object" || !children.props ? props : {
+    ...props,
+    children: {
+      ...children,
+      props: {
+        ...children.props,
+        children: {
+          ...children.props.children,
+          props: {
+            ...children.props.children?.props,
+            groups: []
+          }
+        }
+      }
+    }
+  };
+}, useAddExperimentAction = (props) => {
+  const { onChange, active, experimentNameOverride } = props, handleAddAction = useCallback(() => {
+    onChange([set(!active, ["active"])]);
+  }, [onChange, active]);
+  return {
+    title: `Add ${experimentNameOverride}`,
+    type: "action",
+    icon: GiSoapExperiment,
+    onAction: handleAddAction,
+    renderAsButton: !0
+  };
+}, useRemoveExperimentAction = (props) => {
+  const { onChange, active, experimentId, experimentNameOverride, variantNameOverride } = props, handleClearAction = useCallback(() => {
+    const activeId = ["active"], experiment = [experimentId], variants = [`${variantNameOverride}s`];
+    onChange([set(!active, activeId), unset(experiment), unset(variants)]);
+  }, [onChange, active, experimentId, variantNameOverride]);
+  return {
+    title: `Remove ${experimentNameOverride}`,
+    type: "action",
+    icon: CloseIcon,
+    onAction: handleClearAction,
+    renderAsButton: !0
+  };
+}, createActions = ({
+  onChange,
+  inputId,
+  active,
+  experimentNameOverride,
+  experimentId,
+  variantNameOverride
+}) => {
+  const removeAction = defineDocumentFieldAction({
+    name: `Remove ${experimentNameOverride}`,
+    useAction: (props) => useRemoveExperimentAction({
+      active: !0,
+      onChange,
+      experimentNameOverride,
+      experimentId,
+      variantNameOverride
+    })
+  }), addAction = defineDocumentFieldAction({
+    name: `Add ${experimentNameOverride}`,
+    useAction: (props) => useAddExperimentAction({
+      active: !1,
+      onChange,
+      experimentNameOverride
+    })
+  });
+  return active ? removeAction : addAction;
+}, Field = (props) => {
+  const { onChange } = props.inputProps, { inputId, experimentNameOverride, experimentId, variantNameOverride } = props, active = props.value?.active, actionProps = useMemo(
+    () => ({
+      onChange,
+      inputId,
+      active,
+      experimentNameOverride,
+      experimentId,
+      variantNameOverride
+    }),
+    [onChange, inputId, active, experimentNameOverride, experimentId, variantNameOverride]
+  ), memoizedActions = useMemo(() => {
+    const oldActions = props.actions || [];
+    return [createActions(actionProps), ...oldActions];
+  }, [actionProps, props.actions]), enhancedProps = useMemo(() => ({
+    ...clearChildrenGroups(props),
+    actions: memoizedActions
+  }), [props, memoizedActions]);
+  return props.renderDefault(enhancedProps);
+}, Select = (props) => {
+  const {
+    value,
+    // Current field value
+    onChange,
+    // Method to handle patch events,
+    elementProps,
+    listOptions,
+    handleChange
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    Select$1,
+    {
+      ...elementProps,
+      fontSize: 2,
+      padding: 3,
+      space: [3, 3, 4],
+      value: value || "",
+      onChange: (event) => handleChange(event, onChange),
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "Select an option..." }),
+        listOptions.map(({ value: optionValue, title }) => /* @__PURE__ */ jsx("option", { value: optionValue, children: title }, optionValue))
+      ]
+    }
+  );
+}, formatlistOptions = (experiments) => experiments.map((experiment) => ({
+  title: experiment.label,
+  value: experiment.id
+})), Input = (props) => {
+  const { experiments } = useExperimentContext(), id = useFormValue(["_id"]), additionalChangePath = useMemo(
+    () => [...props.path.slice(0, -1), `${props.variantNameOverride}s`],
+    [props.variantNameOverride, props.path]
+  ), subValues = useFormValue(additionalChangePath), { patch } = useDocumentOperation(getPublishedId(id), props.schemaType.name), handleChange = useCallback(
+    (event, onChange) => {
+      const inputValue = event.currentTarget.value;
+      if (onChange(inputValue ? set(inputValue) : unset()), subValues) {
+        const patchEvent = {
+          unset: [additionalChangePath.join(".")]
+        };
+        patch.execute([patchEvent]);
+      }
+    },
+    [patch, subValues, additionalChangePath]
+  );
+  return experiments.length ? /* @__PURE__ */ jsx(Select, { ...props, listOptions: formatlistOptions(experiments), handleChange }) : /* @__PURE__ */ jsx(Card, { padding: [3, 3, 4], radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxs(Text, { align: "center", size: [2, 2, 3], children: [
+    "There are no defined ",
+    props.experimentNameOverride,
+    "s"
+  ] }) });
+}, VariantInput = (props) => {
+  const experimentPath = props.path.slice(0, -2), defaultValue = useFormValue([...experimentPath, "default"]), handleClick = () => {
+    props.onChange(set(defaultValue, ["value"]));
+  };
+  return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    props.renderDefault(props),
+    /* @__PURE__ */ jsx(Inline, { space: 1, children: /* @__PURE__ */ jsx(Button, { text: "Copy default", mode: "ghost", onClick: () => handleClick() }) })
+  ] });
+}, VariantPreview = (props) => {
+  const [subtitle, setSubtitle] = useState(void 0), [title, setTitle] = useState(void 0), [media, setMedia] = useState(void 0), client = useClient({ apiVersion: "2025-01-01" }), { experiments } = useExperimentContext(), { experiment, variant, value } = props, selectedExperiment = experiments.find((experimentItem) => experimentItem.id === experiment), selectedVariant = selectedExperiment?.variants.find((variantItem) => variantItem.id === variant);
+  useEffect(() => {
+    (async () => {
+      if (setTitle(`${selectedExperiment?.label} - ${selectedVariant?.label}`), typeof value == "string")
+        return setSubtitle(value);
+      if (isReference(value)) {
+        const doc = await client.getDocument(value._ref), referenceType = (props.schemaType.fields.find((field) => field.name === "value")?.type).to.find((field) => field.type?.name === doc?._type), selectFields = {}, 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) : void 0;
+        });
+        const previewContent = referenceType?.preview?.prepare?.(selectFields);
+        return setMedia(previewContent?.media || selectFields.media), setSubtitle(previewContent?.title || selectFields?.title);
+      }
+      return isImage(value) && setMedia(value), "";
+    })();
+  }, [value, client, selectedExperiment?.label, selectedVariant?.label, props.schemaType]);
+  const previewProps = {
+    ...props,
+    title,
+    subtitle,
+    media
+  };
+  return props.renderDefault(previewProps);
+};
+function flattenSchemaType(schemaType) {
+  return isDocumentSchemaType(schemaType) ? extractInnerFields(schemaType.fields, [], 5) : (console.error("Schema type is not a document"), []);
+}
+function extractInnerFields(fields, path, maxDepth) {
+  return path.length >= maxDepth ? [] : fields.reduce((acc, field) => {
+    const thisFieldWithPath = { path: [...path, field.name], ...field };
+    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") {
+      const innerFields = (field.type.of || []).reduce((arrayAcc, arrayType) => {
+        if ("fields" in arrayType) {
+          const typeFields = extractInnerFields(arrayType.fields, [...path, field.name], maxDepth);
+          return [...arrayAcc, ...typeFields];
+        }
+        return arrayAcc;
+      }, []);
+      return [...acc, thisFieldWithPath, ...innerFields];
+    }
+    return [...acc, thisFieldWithPath];
+  }, []);
+}
+const createExperimentType = ({
+  field,
+  experimentNameOverride,
+  variantNameOverride,
+  variantId,
+  variantArrayName,
+  experimentId
+}) => {
+  const typeName = typeof field == "string" ? field : field.name, usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1), variantName = `${variantNameOverride}${usedName}`;
+  return defineType({
+    name: `${experimentNameOverride}${usedName}`,
+    type: "object",
+    groups: [
+      {
+        name: "default",
+        title: "Default",
+        hidden: ({ parent }) => !Array.isArray(parent)
+      },
+      {
+        name: "experiments",
+        title: "Experiments",
+        hidden: ({ parent }) => !Array.isArray(parent)
+      },
+      {
+        name: "all-fields",
+        title: "All fields",
+        hidden: ({ parent }) => Array.isArray(parent)
+      }
+    ],
+    components: {
+      field: (props) => /* @__PURE__ */ jsx(
+        Field,
+        {
+          ...props,
+          experimentId,
+          experimentNameOverride,
+          variantNameOverride
+        }
+      ),
+      item: ArrayItem
+    },
+    fields: [
+      typeof field == "string" ? (
+        // Define a simple field if all we have is the name as a string
+        defineField({
+          name: "default",
+          type: field,
+          group: "default"
+        })
+      ) : (
+        // Pass in the configured options, but overwrite the name
+        {
+          ...field,
+          name: "default",
+          group: "default"
+        }
+      ),
+      defineField({
+        name: "active",
+        type: "boolean",
+        hidden: !0,
+        initialValue: !1
+      }),
+      defineField({
+        name: experimentId,
+        type: "string",
+        group: "experiments",
+        components: {
+          input: (props) => /* @__PURE__ */ jsx(
+            Input,
+            {
+              ...props,
+              experimentNameOverride,
+              variantNameOverride
+            }
+          )
+        },
+        hidden: ({ parent }) => !parent?.active
+      }),
+      defineField({
+        name: variantArrayName,
+        type: "array",
+        group: "experiments",
+        hidden: ({ parent }) => !parent?.[experimentId],
+        components: {
+          input: (props) => /* @__PURE__ */ jsx(
+            ArrayInput,
+            {
+              ...props,
+              variantName,
+              variantId,
+              experimentId
+            }
+          )
+        },
+        of: [
+          defineField({
+            name: variantName,
+            type: variantName
+          })
+        ]
+      })
+    ],
+    preview: {
+      select: {
+        base: "default",
+        experiment: experimentId
+      },
+      prepare: ({ base, experiment }) => {
+        const title = base?.title || base?.name || typeof base == "string" ? base : "", experimentTitle = experiment ? `Experiment: ${experiment}` : "", media = base?.image || base?.photo || base?.media || "";
+        return {
+          title: title || experimentTitle,
+          subtitle: title ? experimentTitle : "",
+          media
+        };
+      }
+    }
+  });
+}, createVariantType = ({
+  field,
+  variantNameOverride,
+  variantId,
+  experimentId
+}) => {
+  const typeName = typeof field == "string" ? field : field.name, usedName = String(typeName[0]).toUpperCase() + String(typeName).slice(1);
+  return defineType({
+    name: `${variantNameOverride}${usedName}`,
+    title: `${variantNameOverride} array ${usedName}`,
+    type: "object",
+    components: {
+      preview: VariantPreview,
+      input: VariantInput
+    },
+    fields: [
+      {
+        type: "string",
+        name: variantId,
+        readOnly: !0
+      },
+      {
+        type: "string",
+        name: experimentId,
+        hidden: !0
+      },
+      typeof field == "string" ? (
+        // Define a simple field if all we have is the name as a string
+        defineField({
+          name: "value",
+          type: field
+          // hidden: ({parent}) => !parent?.[`${objectNameOverride}Id`],
+        })
+      ) : (
+        // Pass in the configured options, but overwrite the name
+        {
+          ...field,
+          name: "value"
+          // hidden: ({parent}) => !parent?.[`${objectNameOverride}Id`],
+        }
+      )
+    ],
+    preview: {
+      select: {
+        variant: variantId,
+        experiment: experimentId,
+        value: "value"
+      }
+    }
+  });
+}, fieldSchema = ({
+  fields,
+  experimentNameOverride,
+  variantNameOverride,
+  variantId,
+  variantArrayName,
+  experimentId
+}) => [
+  ...fields.map(
+    (field) => createVariantType({ field, variantNameOverride, variantId, experimentId })
+  ),
+  ...fields.map(
+    (field) => createExperimentType({
+      field,
+      experimentNameOverride,
+      variantNameOverride,
+      variantId,
+      variantArrayName,
+      experimentId
+    })
+  )
+], fieldLevelExperiments = definePlugin((config) => {
+  const pluginConfig = { ...CONFIG_DEFAULT, ...config }, { fields, experimentNameOverride, variantNameOverride } = pluginConfig, experimentId = `${experimentNameOverride}Id`, variantArrayName = `${variantNameOverride}s`, variantId = `${variantNameOverride}Id`;
+  return {
+    name: "sanity-personalistaion-plugin-field-level-experiments",
+    schema: {
+      types: fieldSchema({
+        fields,
+        experimentNameOverride,
+        variantNameOverride,
+        variantId,
+        variantArrayName,
+        experimentId
+      })
+    },
+    form: {
+      components: {
+        input: (props) => {
+          if (!(props.id === "root" && isObjectInputProps(props)) || !flattenSchemaType(props.schemaType).some(
+            (field) => field.type.name.startsWith(experimentNameOverride) || field.name.startsWith(experimentNameOverride)
+          ))
+            return props.renderDefault(props);
+          const providerProps = {
+            ...props,
+            experimentFieldPluginConfig: {
+              ...pluginConfig,
+              variantId,
+              variantArrayName,
+              experimentId
+            }
+          };
+          return ExperimentProvider(providerProps);
+        }
+      }
+    }
+  };
+});
+export {
+  ArrayItem,
+  CloseIcon,
+  clearChildrenGroups,
+  fieldLevelExperiments,
+  flattenSchemaType
+};
+//# sourceMappingURL=fieldExperiments.mjs.map