@uniformdev/context-ui 19.92.3 → 19.94.0

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-na
 import { DimensionMatch, EnrichmentData, VariantMatchCriteria } from '@uniformdev/context';
 import { InputComboBoxProps, InputComboBoxOption } from '@uniformdev/design-system';
 export * from '@uniformdev/design-system';
-import { DimensionDefinition, ManifestGetResponse } from '@uniformdev/context/api';
+import { DimensionDefinition, ManifestGetResponse, Test } from '@uniformdev/context/api';
 import React, { ComponentType, ReactElement } from 'react';
 import * as _emotion_react from '@emotion/react';
 import * as yup from 'yup';
@@ -136,6 +136,21 @@ type UIVersionProps = {
 };
 declare function ProjectUIVersion({ children, versionMap, contextConfig }: UIVersionProps): ReactElement;
 
+declare const addAbTestLink: _emotion_react.SerializedStyles;
+interface AbTestListProps {
+    contextConfig: ContextConfig;
+    abTests?: Test[];
+    onSelect: (abTest: Test) => void;
+    value?: Test;
+}
+interface AbTestSelectorProps {
+    value?: Test;
+    setValue: (value?: Test) => void;
+    contextConfig: ContextConfig;
+    loading?: boolean;
+}
+declare const AbTestSelector: ({ value, setValue, contextConfig, loading }: AbTestSelectorProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
 interface UseValidateContextConfigResult {
     validating: boolean;
     error?: Error;
@@ -153,4 +168,4 @@ declare const validateContextConfig: (contextConfig?: ContextConfig) => Promise<
     result?: ManifestGetResponse;
 }>;
 
-export { type ContextConfig, ContextData, type ContextDataProps, CriteriaMatchMenu, type CriteriaMatchMenuProps, CriteriaOperatorMenu, type CriteriaOperatorMenuProps, type DataContextErrorProps, DimensionMenu, type DimensionMenuProps, DimensionValue, type DimensionValueProps, type DimensionsData, EditLink, type EditLinkProps, EnrichmentTag, type EnrichmentTagProps, PersonalizationCriteria, type PersonalizationCriteriaProps, PersonalizationCriteriaStatic, type PersonalizationCriteriaStaticProps, ProjectUIVersion, type ResolvedDimensionDefinition, type UseContextDataResult, type UseDimensionsResult, type UseValidateContextConfigResult, addEnrichmentLink, contextCriteriaMenuOperators, convertErrorsToObj, isEnrichmentTagData, isPersonalizationCriteriaData, opHasRhs, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };
+export { type AbTestListProps, AbTestSelector, type AbTestSelectorProps, type ContextConfig, ContextData, type ContextDataProps, CriteriaMatchMenu, type CriteriaMatchMenuProps, CriteriaOperatorMenu, type CriteriaOperatorMenuProps, type DataContextErrorProps, DimensionMenu, type DimensionMenuProps, DimensionValue, type DimensionValueProps, type DimensionsData, EditLink, type EditLinkProps, EnrichmentTag, type EnrichmentTagProps, PersonalizationCriteria, type PersonalizationCriteriaProps, PersonalizationCriteriaStatic, type PersonalizationCriteriaStaticProps, ProjectUIVersion, type ResolvedDimensionDefinition, type UseContextDataResult, type UseDimensionsResult, type UseValidateContextConfigResult, addAbTestLink, addEnrichmentLink, contextCriteriaMenuOperators, convertErrorsToObj, isEnrichmentTagData, isPersonalizationCriteriaData, opHasRhs, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-na
 import { DimensionMatch, EnrichmentData, VariantMatchCriteria } from '@uniformdev/context';
 import { InputComboBoxProps, InputComboBoxOption } from '@uniformdev/design-system';
 export * from '@uniformdev/design-system';
-import { DimensionDefinition, ManifestGetResponse } from '@uniformdev/context/api';
+import { DimensionDefinition, ManifestGetResponse, Test } from '@uniformdev/context/api';
 import React, { ComponentType, ReactElement } from 'react';
 import * as _emotion_react from '@emotion/react';
 import * as yup from 'yup';
@@ -136,6 +136,21 @@ type UIVersionProps = {
 };
 declare function ProjectUIVersion({ children, versionMap, contextConfig }: UIVersionProps): ReactElement;
 
+declare const addAbTestLink: _emotion_react.SerializedStyles;
+interface AbTestListProps {
+    contextConfig: ContextConfig;
+    abTests?: Test[];
+    onSelect: (abTest: Test) => void;
+    value?: Test;
+}
+interface AbTestSelectorProps {
+    value?: Test;
+    setValue: (value?: Test) => void;
+    contextConfig: ContextConfig;
+    loading?: boolean;
+}
+declare const AbTestSelector: ({ value, setValue, contextConfig, loading }: AbTestSelectorProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
 interface UseValidateContextConfigResult {
     validating: boolean;
     error?: Error;
@@ -153,4 +168,4 @@ declare const validateContextConfig: (contextConfig?: ContextConfig) => Promise<
     result?: ManifestGetResponse;
 }>;
 
-export { type ContextConfig, ContextData, type ContextDataProps, CriteriaMatchMenu, type CriteriaMatchMenuProps, CriteriaOperatorMenu, type CriteriaOperatorMenuProps, type DataContextErrorProps, DimensionMenu, type DimensionMenuProps, DimensionValue, type DimensionValueProps, type DimensionsData, EditLink, type EditLinkProps, EnrichmentTag, type EnrichmentTagProps, PersonalizationCriteria, type PersonalizationCriteriaProps, PersonalizationCriteriaStatic, type PersonalizationCriteriaStaticProps, ProjectUIVersion, type ResolvedDimensionDefinition, type UseContextDataResult, type UseDimensionsResult, type UseValidateContextConfigResult, addEnrichmentLink, contextCriteriaMenuOperators, convertErrorsToObj, isEnrichmentTagData, isPersonalizationCriteriaData, opHasRhs, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };
+export { type AbTestListProps, AbTestSelector, type AbTestSelectorProps, type ContextConfig, ContextData, type ContextDataProps, CriteriaMatchMenu, type CriteriaMatchMenuProps, CriteriaOperatorMenu, type CriteriaOperatorMenuProps, type DataContextErrorProps, DimensionMenu, type DimensionMenuProps, DimensionValue, type DimensionValueProps, type DimensionsData, EditLink, type EditLinkProps, EnrichmentTag, type EnrichmentTagProps, PersonalizationCriteria, type PersonalizationCriteriaProps, PersonalizationCriteriaStatic, type PersonalizationCriteriaStaticProps, ProjectUIVersion, type ResolvedDimensionDefinition, type UseContextDataResult, type UseDimensionsResult, type UseValidateContextConfigResult, addAbTestLink, addEnrichmentLink, contextCriteriaMenuOperators, convertErrorsToObj, isEnrichmentTagData, isPersonalizationCriteriaData, opHasRhs, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };

package/dist/index.esm.js

@@ -1488,8 +1488,178 @@ function ProjectUIVersion({ children, versionMap, contextConfig }) {
   return /* @__PURE__ */ jsx18(Fragment5, { children });
 }
 
-// src/hooks/useValidateContextConfig.ts
+// src/components/AbTestSelector/AbTestSelector.tsx
+import { css as css7 } from "@emotion/react";
+import {
+  AddListButton as AddListButton3,
+  Button as Button2,
+  Callout as Callout4,
+  Heading,
+  Link,
+  LoadingIndicator as LoadingIndicator5,
+  ScrollableList,
+  ScrollableListItem
+} from "@uniformdev/design-system";
+import { useState as useState7 } from "react";
+
+// src/hooks/useABTests.ts
+import { ApiClientError as ApiClientError3, CachedTestClient } from "@uniformdev/context/api";
 import { useEffect as useEffect3, useState as useState6 } from "react";
+function useABTests({ apiHost, apiKey, projectId }) {
+  const [reload, setReload] = useState6(true);
+  const [state, setState] = useState6({
+    loading: false,
+    notConfigured: false,
+    error: null,
+    result: null
+  });
+  useEffect3(() => {
+    if (!projectId || !apiKey || !apiHost) {
+      setState({ notConfigured: true, loading: false, error: null, result: null });
+      return;
+    }
+    const runEffect = async () => {
+      setState({ notConfigured: false, loading: true, error: null, result: null });
+      try {
+        const client = new CachedTestClient({
+          projectId,
+          apiKey,
+          apiHost
+        });
+        const { tests } = await client.get();
+        setState({ notConfigured: false, loading: false, error: null, result: tests });
+      } catch (e) {
+        let message;
+        if (e instanceof ApiClientError3) {
+          message = e.message;
+        } else {
+          message = e.toString();
+        }
+        setState({ notConfigured: false, loading: false, error: message, result: null });
+        return;
+      }
+    };
+    if (reload) {
+      runEffect().then(() => {
+        setReload(false);
+      });
+    }
+  }, [apiHost, apiKey, projectId, reload]);
+  return {
+    result: state.result,
+    error: state.error,
+    loading: state.loading,
+    notConfigured: state.notConfigured,
+    doReload: () => setReload(true)
+  };
+}
+
+// src/components/AbTestSelector/AbTestSelector.tsx
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+var addAbTestLink = css7`
+  flex: 2;
+  display: flex;
+  width: 50%;
+  align-items: center;
+  font-weight: var(--fw-bold);
+  color: var(--brand-primary-1);
+  &:hover,
+  &:focus {
+    text-decoration-line: underline;
+  }
+`;
+var AbTestList = ({ contextConfig, onSelect, value }) => {
+  const { loading, result, doReload = () => {
+  } } = useABTests(contextConfig);
+  if (loading) {
+    return /* @__PURE__ */ jsx19(LoadingIndicator5, {});
+  }
+  return /* @__PURE__ */ jsxs10(Fragment6, { children: [
+    /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(Link, { text: "Refresh A/B Test list", style: { marginRight: "10px" }, onClick: () => doReload() }) }),
+    !result || result.length === 0 ? /* @__PURE__ */ jsx19(NoAbTestsView, { contextConfig }) : /* @__PURE__ */ jsxs10("div", { style: { marginTop: "10px" }, children: [
+      /* @__PURE__ */ jsx19(ScrollableList, { children: result.map((abTest) => {
+        const { id, name } = abTest;
+        return /* @__PURE__ */ jsx19(
+          ScrollableListItem,
+          {
+            buttonText: name,
+            active: id === (value == null ? void 0 : value.id),
+            onClick: () => onSelect(abTest)
+          },
+          id
+        );
+      }) }),
+      /* @__PURE__ */ jsx19(
+        AddListButton3,
+        {
+          className: "add-more",
+          onButtonClick: () => {
+            window.open(
+              `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
+              "_blank"
+            );
+          },
+          buttonText: "Add new A/B Test"
+        }
+      )
+    ] })
+  ] });
+};
+var AbTestSelector = ({ value, setValue, contextConfig, loading }) => {
+  var _a;
+  const [showAbTests, setShowAbTests] = useState7(false);
+  if (loading) {
+    return /* @__PURE__ */ jsx19(LoadingIndicator5, {});
+  }
+  return /* @__PURE__ */ jsx19("fieldset", { className: "ab-test", children: /* @__PURE__ */ jsxs10("div", { children: [
+    !showAbTests && /* @__PURE__ */ jsxs10("div", { children: [
+      value && Object.keys(value).length > 0 && /* @__PURE__ */ jsx19(Heading, { level: 4, style: { marginBottom: "10px" }, children: (_a = value == null ? void 0 : value.name) != null ? _a : "Unknown test" }),
+      /* @__PURE__ */ jsx19(Button2, { buttonType: "primary", style: { marginRight: "10px" }, onClick: () => setShowAbTests(true), children: "Select A/B Test" })
+    ] }),
+    showAbTests && /* @__PURE__ */ jsx19(
+      AbTestList,
+      {
+        contextConfig,
+        onSelect: (abTest) => {
+          if ((value == null ? void 0 : value.id) === abTest.id) {
+            setValue(void 0);
+            setShowAbTests(true);
+            return;
+          }
+          setValue(abTest);
+          setShowAbTests(false);
+        },
+        value
+      }
+    )
+  ] }) });
+};
+var NoAbTestsView = ({ contextConfig }) => /* @__PURE__ */ jsx19(
+  Callout4,
+  {
+    title: "No A/B tests found in your Uniform project.",
+    type: "caution",
+    css: { marginBlock: "var(--spacing-base)" },
+    children: /* @__PURE__ */ jsxs10("p", { children: [
+      "Looks like you do not have any A/B tests created in your connected Uniform project. Start by creating your first test",
+      " ",
+      /* @__PURE__ */ jsx19(
+        "a",
+        {
+          href: `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          css: { ":hover": { textDecorationLine: "underline" } },
+          children: "here"
+        }
+      ),
+      "."
+    ] })
+  }
+);
+
+// src/hooks/useValidateContextConfig.ts
+import { useEffect as useEffect4, useState as useState8 } from "react";
 
 // src/utils/validateContextConfig.ts
 import { UncachedManifestClient } from "@uniformdev/context/api";
@@ -1525,12 +1695,12 @@ var validateContextConfig = async (contextConfig) => {
 
 // src/hooks/useValidateContextConfig.ts
 var useValidateContextConfig = (contextConfig) => {
-  const [state, setState] = useState6({
+  const [state, setState] = useState8({
     validating: false,
     error: void 0
   });
   const { apiKey, apiHost, projectId } = contextConfig || {};
-  useEffect3(() => {
+  useEffect4(() => {
     if (!apiKey || !apiHost) {
       return;
     }
@@ -1555,6 +1725,7 @@ var useValidateContextConfig = (contextConfig) => {
 // src/index.ts
 export * from "@uniformdev/design-system";
 export {
+  AbTestSelector,
   ContextData,
   CriteriaMatchMenu,
   CriteriaOperatorMenu,
@@ -1565,6 +1736,7 @@ export {
   PersonalizationCriteria,
   PersonalizationCriteriaStatic,
   ProjectUIVersion,
+  addAbTestLink,
   addEnrichmentLink,
   contextCriteriaMenuOperators,
   convertErrorsToObj,

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AbTestSelector: () => AbTestSelector,
   ContextData: () => ContextData,
   CriteriaMatchMenu: () => CriteriaMatchMenu,
   CriteriaOperatorMenu: () => CriteriaOperatorMenu,
@@ -41,6 +42,7 @@ __export(src_exports, {
   PersonalizationCriteria: () => PersonalizationCriteria,
   PersonalizationCriteriaStatic: () => PersonalizationCriteriaStatic,
   ProjectUIVersion: () => ProjectUIVersion,
+  addAbTestLink: () => addAbTestLink,
   addEnrichmentLink: () => addEnrichmentLink,
   contextCriteriaMenuOperators: () => contextCriteriaMenuOperators,
   convertErrorsToObj: () => convertErrorsToObj,
@@ -1539,11 +1541,172 @@ function ProjectUIVersion({ children, versionMap, contextConfig }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children });
 }
 
-// src/hooks/useValidateContextConfig.ts
+// src/components/AbTestSelector/AbTestSelector.tsx
+var import_react15 = require("@emotion/react");
+var import_design_system12 = require("@uniformdev/design-system");
+var import_react16 = require("react");
+
+// src/hooks/useABTests.ts
+var import_api3 = require("@uniformdev/context/api");
 var import_react14 = require("react");
+function useABTests({ apiHost, apiKey, projectId }) {
+  const [reload, setReload] = (0, import_react14.useState)(true);
+  const [state, setState] = (0, import_react14.useState)({
+    loading: false,
+    notConfigured: false,
+    error: null,
+    result: null
+  });
+  (0, import_react14.useEffect)(() => {
+    if (!projectId || !apiKey || !apiHost) {
+      setState({ notConfigured: true, loading: false, error: null, result: null });
+      return;
+    }
+    const runEffect = async () => {
+      setState({ notConfigured: false, loading: true, error: null, result: null });
+      try {
+        const client = new import_api3.CachedTestClient({
+          projectId,
+          apiKey,
+          apiHost
+        });
+        const { tests } = await client.get();
+        setState({ notConfigured: false, loading: false, error: null, result: tests });
+      } catch (e) {
+        let message;
+        if (e instanceof import_api3.ApiClientError) {
+          message = e.message;
+        } else {
+          message = e.toString();
+        }
+        setState({ notConfigured: false, loading: false, error: message, result: null });
+        return;
+      }
+    };
+    if (reload) {
+      runEffect().then(() => {
+        setReload(false);
+      });
+    }
+  }, [apiHost, apiKey, projectId, reload]);
+  return {
+    result: state.result,
+    error: state.error,
+    loading: state.loading,
+    notConfigured: state.notConfigured,
+    doReload: () => setReload(true)
+  };
+}
+
+// src/components/AbTestSelector/AbTestSelector.tsx
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var addAbTestLink = import_react15.css`
+  flex: 2;
+  display: flex;
+  width: 50%;
+  align-items: center;
+  font-weight: var(--fw-bold);
+  color: var(--brand-primary-1);
+  &:hover,
+  &:focus {
+    text-decoration-line: underline;
+  }
+`;
+var AbTestList = ({ contextConfig, onSelect, value }) => {
+  const { loading, result, doReload = () => {
+  } } = useABTests(contextConfig);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system12.LoadingIndicator, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system12.Link, { text: "Refresh A/B Test list", style: { marginRight: "10px" }, onClick: () => doReload() }) }),
+    !result || result.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NoAbTestsView, { contextConfig }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginTop: "10px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system12.ScrollableList, { children: result.map((abTest) => {
+        const { id, name } = abTest;
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_design_system12.ScrollableListItem,
+          {
+            buttonText: name,
+            active: id === (value == null ? void 0 : value.id),
+            onClick: () => onSelect(abTest)
+          },
+          id
+        );
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_design_system12.AddListButton,
+        {
+          className: "add-more",
+          onButtonClick: () => {
+            window.open(
+              `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
+              "_blank"
+            );
+          },
+          buttonText: "Add new A/B Test"
+        }
+      )
+    ] })
+  ] });
+};
+var AbTestSelector = ({ value, setValue, contextConfig, loading }) => {
+  var _a;
+  const [showAbTests, setShowAbTests] = (0, import_react16.useState)(false);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system12.LoadingIndicator, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("fieldset", { className: "ab-test", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+    !showAbTests && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+      value && Object.keys(value).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system12.Heading, { level: 4, style: { marginBottom: "10px" }, children: (_a = value == null ? void 0 : value.name) != null ? _a : "Unknown test" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system12.Button, { buttonType: "primary", style: { marginRight: "10px" }, onClick: () => setShowAbTests(true), children: "Select A/B Test" })
+    ] }),
+    showAbTests && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      AbTestList,
+      {
+        contextConfig,
+        onSelect: (abTest) => {
+          if ((value == null ? void 0 : value.id) === abTest.id) {
+            setValue(void 0);
+            setShowAbTests(true);
+            return;
+          }
+          setValue(abTest);
+          setShowAbTests(false);
+        },
+        value
+      }
+    )
+  ] }) });
+};
+var NoAbTestsView = ({ contextConfig }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  import_design_system12.Callout,
+  {
+    title: "No A/B tests found in your Uniform project.",
+    type: "caution",
+    css: { marginBlock: "var(--spacing-base)" },
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { children: [
+      "Looks like you do not have any A/B tests created in your connected Uniform project. Start by creating your first test",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "a",
+        {
+          href: `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          css: { ":hover": { textDecorationLine: "underline" } },
+          children: "here"
+        }
+      ),
+      "."
+    ] })
+  }
+);
+
+// src/hooks/useValidateContextConfig.ts
+var import_react17 = require("react");
 
 // src/utils/validateContextConfig.ts
-var import_api3 = require("@uniformdev/context/api");
+var import_api4 = require("@uniformdev/context/api");
 var import_uuid = require("uuid");
 var validateContextConfig = async (contextConfig) => {
   if (!contextConfig) {
@@ -1558,7 +1721,7 @@ var validateContextConfig = async (contextConfig) => {
   if (!(0, import_uuid.validate)(contextConfig.apiKey) && !contextConfig.projectId) {
     return { valid: false, error: new Error("projectId is required when using a modern API key.") };
   }
-  const client = new import_api3.UncachedManifestClient({
+  const client = new import_api4.UncachedManifestClient({
     projectId: contextConfig.projectId,
     apiKey: contextConfig.apiKey,
     apiHost: contextConfig.apiHost
@@ -1576,12 +1739,12 @@ var validateContextConfig = async (contextConfig) => {
 
 // src/hooks/useValidateContextConfig.ts
 var useValidateContextConfig = (contextConfig) => {
-  const [state, setState] = (0, import_react14.useState)({
+  const [state, setState] = (0, import_react17.useState)({
     validating: false,
     error: void 0
   });
   const { apiKey, apiHost, projectId } = contextConfig || {};
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!apiKey || !apiHost) {
       return;
     }
@@ -1607,6 +1770,7 @@ var useValidateContextConfig = (contextConfig) => {
 __reExport(src_exports, require("@uniformdev/design-system"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AbTestSelector,
   ContextData,
   CriteriaMatchMenu,
   CriteriaOperatorMenu,
@@ -1617,6 +1781,7 @@ __reExport(src_exports, require("@uniformdev/design-system"), module.exports);
   PersonalizationCriteria,
   PersonalizationCriteriaStatic,
   ProjectUIVersion,
+  addAbTestLink,
   addEnrichmentLink,
   contextCriteriaMenuOperators,
   convertErrorsToObj,

package/dist/index.mjs

@@ -1488,8 +1488,178 @@ function ProjectUIVersion({ children, versionMap, contextConfig }) {
   return /* @__PURE__ */ jsx18(Fragment5, { children });
 }
 
-// src/hooks/useValidateContextConfig.ts
+// src/components/AbTestSelector/AbTestSelector.tsx
+import { css as css7 } from "@emotion/react";
+import {
+  AddListButton as AddListButton3,
+  Button as Button2,
+  Callout as Callout4,
+  Heading,
+  Link,
+  LoadingIndicator as LoadingIndicator5,
+  ScrollableList,
+  ScrollableListItem
+} from "@uniformdev/design-system";
+import { useState as useState7 } from "react";
+
+// src/hooks/useABTests.ts
+import { ApiClientError as ApiClientError3, CachedTestClient } from "@uniformdev/context/api";
 import { useEffect as useEffect3, useState as useState6 } from "react";
+function useABTests({ apiHost, apiKey, projectId }) {
+  const [reload, setReload] = useState6(true);
+  const [state, setState] = useState6({
+    loading: false,
+    notConfigured: false,
+    error: null,
+    result: null
+  });
+  useEffect3(() => {
+    if (!projectId || !apiKey || !apiHost) {
+      setState({ notConfigured: true, loading: false, error: null, result: null });
+      return;
+    }
+    const runEffect = async () => {
+      setState({ notConfigured: false, loading: true, error: null, result: null });
+      try {
+        const client = new CachedTestClient({
+          projectId,
+          apiKey,
+          apiHost
+        });
+        const { tests } = await client.get();
+        setState({ notConfigured: false, loading: false, error: null, result: tests });
+      } catch (e) {
+        let message;
+        if (e instanceof ApiClientError3) {
+          message = e.message;
+        } else {
+          message = e.toString();
+        }
+        setState({ notConfigured: false, loading: false, error: message, result: null });
+        return;
+      }
+    };
+    if (reload) {
+      runEffect().then(() => {
+        setReload(false);
+      });
+    }
+  }, [apiHost, apiKey, projectId, reload]);
+  return {
+    result: state.result,
+    error: state.error,
+    loading: state.loading,
+    notConfigured: state.notConfigured,
+    doReload: () => setReload(true)
+  };
+}
+
+// src/components/AbTestSelector/AbTestSelector.tsx
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+var addAbTestLink = css7`
+  flex: 2;
+  display: flex;
+  width: 50%;
+  align-items: center;
+  font-weight: var(--fw-bold);
+  color: var(--brand-primary-1);
+  &:hover,
+  &:focus {
+    text-decoration-line: underline;
+  }
+`;
+var AbTestList = ({ contextConfig, onSelect, value }) => {
+  const { loading, result, doReload = () => {
+  } } = useABTests(contextConfig);
+  if (loading) {
+    return /* @__PURE__ */ jsx19(LoadingIndicator5, {});
+  }
+  return /* @__PURE__ */ jsxs10(Fragment6, { children: [
+    /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(Link, { text: "Refresh A/B Test list", style: { marginRight: "10px" }, onClick: () => doReload() }) }),
+    !result || result.length === 0 ? /* @__PURE__ */ jsx19(NoAbTestsView, { contextConfig }) : /* @__PURE__ */ jsxs10("div", { style: { marginTop: "10px" }, children: [
+      /* @__PURE__ */ jsx19(ScrollableList, { children: result.map((abTest) => {
+        const { id, name } = abTest;
+        return /* @__PURE__ */ jsx19(
+          ScrollableListItem,
+          {
+            buttonText: name,
+            active: id === (value == null ? void 0 : value.id),
+            onClick: () => onSelect(abTest)
+          },
+          id
+        );
+      }) }),
+      /* @__PURE__ */ jsx19(
+        AddListButton3,
+        {
+          className: "add-more",
+          onButtonClick: () => {
+            window.open(
+              `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
+              "_blank"
+            );
+          },
+          buttonText: "Add new A/B Test"
+        }
+      )
+    ] })
+  ] });
+};
+var AbTestSelector = ({ value, setValue, contextConfig, loading }) => {
+  var _a;
+  const [showAbTests, setShowAbTests] = useState7(false);
+  if (loading) {
+    return /* @__PURE__ */ jsx19(LoadingIndicator5, {});
+  }
+  return /* @__PURE__ */ jsx19("fieldset", { className: "ab-test", children: /* @__PURE__ */ jsxs10("div", { children: [
+    !showAbTests && /* @__PURE__ */ jsxs10("div", { children: [
+      value && Object.keys(value).length > 0 && /* @__PURE__ */ jsx19(Heading, { level: 4, style: { marginBottom: "10px" }, children: (_a = value == null ? void 0 : value.name) != null ? _a : "Unknown test" }),
+      /* @__PURE__ */ jsx19(Button2, { buttonType: "primary", style: { marginRight: "10px" }, onClick: () => setShowAbTests(true), children: "Select A/B Test" })
+    ] }),
+    showAbTests && /* @__PURE__ */ jsx19(
+      AbTestList,
+      {
+        contextConfig,
+        onSelect: (abTest) => {
+          if ((value == null ? void 0 : value.id) === abTest.id) {
+            setValue(void 0);
+            setShowAbTests(true);
+            return;
+          }
+          setValue(abTest);
+          setShowAbTests(false);
+        },
+        value
+      }
+    )
+  ] }) });
+};
+var NoAbTestsView = ({ contextConfig }) => /* @__PURE__ */ jsx19(
+  Callout4,
+  {
+    title: "No A/B tests found in your Uniform project.",
+    type: "caution",
+    css: { marginBlock: "var(--spacing-base)" },
+    children: /* @__PURE__ */ jsxs10("p", { children: [
+      "Looks like you do not have any A/B tests created in your connected Uniform project. Start by creating your first test",
+      " ",
+      /* @__PURE__ */ jsx19(
+        "a",
+        {
+          href: `${contextConfig.apiHost}/projects/${encodeURIComponent(contextConfig.projectId)}/testing`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          css: { ":hover": { textDecorationLine: "underline" } },
+          children: "here"
+        }
+      ),
+      "."
+    ] })
+  }
+);
+
+// src/hooks/useValidateContextConfig.ts
+import { useEffect as useEffect4, useState as useState8 } from "react";
 
 // src/utils/validateContextConfig.ts
 import { UncachedManifestClient } from "@uniformdev/context/api";
@@ -1525,12 +1695,12 @@ var validateContextConfig = async (contextConfig) => {
 
 // src/hooks/useValidateContextConfig.ts
 var useValidateContextConfig = (contextConfig) => {
-  const [state, setState] = useState6({
+  const [state, setState] = useState8({
     validating: false,
     error: void 0
   });
   const { apiKey, apiHost, projectId } = contextConfig || {};
-  useEffect3(() => {
+  useEffect4(() => {
     if (!apiKey || !apiHost) {
       return;
     }
@@ -1555,6 +1725,7 @@ var useValidateContextConfig = (contextConfig) => {
 // src/index.ts
 export * from "@uniformdev/design-system";
 export {
+  AbTestSelector,
   ContextData,
   CriteriaMatchMenu,
   CriteriaOperatorMenu,
@@ -1565,6 +1736,7 @@ export {
   PersonalizationCriteria,
   PersonalizationCriteriaStatic,
   ProjectUIVersion,
+  addAbTestLink,
   addEnrichmentLink,
   contextCriteriaMenuOperators,
   convertErrorsToObj,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/context-ui",
-  "version": "19.92.3",
+  "version": "19.94.0",
   "description": "React-based functionality and components for Uniform Context",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@emotion/react": "11.11.3",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
-    "@uniformdev/context": "19.92.3",
-    "@uniformdev/design-system": "19.92.3",
+    "@uniformdev/context": "19.94.0",
+    "@uniformdev/design-system": "19.94.0",
     "immer": "10.0.3",
     "react-beautiful-dnd": "13.1.1",
     "react-select": "5.7.7",
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7eeadbc2ffc4a2808ddbe8ef9258ae46504cec91"
+  "gitHead": "83b33647cd09dafcd4ea23012c4e87a45b71c0af"
 }