@uniformdev/context-ui 16.1.1-alpha.169 → 16.1.1-alpha.238

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -2,7 +2,8 @@ import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-na
2
2
  import * as _emotion_react from '@emotion/react';
3
3
  import React, { ReactElement, ComponentType } from 'react';
4
4
  import { DimensionDefinition, ManifestGetResponse } from '@uniformdev/context/api';
5
- import { EnrichmentData, DimensionMatch, VariantMatchCriteria } from '@uniformdev/context';
5
+ import { EnrichmentData, VariantMatchCriteria, DimensionMatch } from '@uniformdev/context';
6
+ import { InputComboBoxProps, InputComboBoxOption } from '@uniformdev/design-system';
6
7
  export * from '@uniformdev/design-system';
7
8
 
8
9
  declare type EditLinkProps = {
@@ -34,18 +35,29 @@ interface EnrichmentTagProps {
34
35
  }
35
36
  declare const EnrichmentTag: React.FC<EnrichmentTagProps>;
36
37
 
37
- declare const equality: Array<{
38
- name: string;
39
- value: DimensionMatch['op'];
40
- }>;
41
- interface PersonalizationCriteriaProps {
38
+ interface PersonalizationCriteriaStaticProps {
42
39
  value: VariantMatchCriteria | null | undefined;
43
40
  setValue: (value: VariantMatchCriteria | null) => void;
44
- contextConfig: ContextConfig;
41
+ dimensions: DimensionsData;
45
42
  displayTitle?: boolean;
46
43
  onMenuOpen?: () => void;
47
44
  onMenuClose?: () => void;
45
+ onAddCriteria?: (value: VariantMatchCriteria) => void;
46
+ onRemoveCriteria?: (value: VariantMatchCriteria | null) => void;
47
+ components?: {
48
+ NoDimensionsDefined?: React.ComponentType;
49
+ Title?: React.ComponentType;
50
+ };
51
+ errors?: {
52
+ lhs?: Array<string | undefined>;
53
+ rhs?: Array<string | undefined>;
54
+ };
48
55
  }
56
+ declare const PersonalizationCriteriaStatic: React.FC<PersonalizationCriteriaStaticProps>;
57
+
58
+ declare type PersonalizationCriteriaProps = {
59
+ contextConfig: ContextConfig;
60
+ } & Omit<PersonalizationCriteriaStaticProps, 'dimensions'>;
49
61
  declare const PersonalizationCriteria: React.FC<PersonalizationCriteriaProps>;
50
62
 
51
63
  declare type UIVersionProps = {
@@ -86,6 +98,38 @@ declare function useContextConfig(): ContextConfig;
86
98
  declare function useManifest(): ManifestGetResponse;
87
99
  declare function useDimensionsDataContext(): DimensionsData;
88
100
 
101
+ declare type CriteriaOperatorMenuProps = {
102
+ value: DimensionMatch['op'];
103
+ onChange: (newValue: DimensionMatch['op']) => void;
104
+ } & Omit<InputComboBoxProps<InputComboBoxOption, false>, 'value' | 'options' | 'onChange'>;
105
+ declare const contextCriteriaMenuOperators: Array<{
106
+ name: string;
107
+ description?: string;
108
+ value: DimensionMatch['op'];
109
+ }>;
110
+ declare function CriteriaOperatorMenu({ onChange, value, ...props }: CriteriaOperatorMenuProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
111
+
112
+ declare type DimensionMenuProps = {
113
+ value?: ResolvedDimensionDefinition;
114
+ dimensions: ResolvedDimensionDefinition[];
115
+ errorMessage?: string;
116
+ onChange: (newValue: ResolvedDimensionDefinition) => void;
117
+ } & Omit<InputComboBoxProps<InputComboBoxOption, false>, 'value' | 'options' | 'onChange'>;
118
+ declare function DimensionMenu({ onChange, value, dimensions, errorMessage, ...props }: DimensionMenuProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
119
+
120
+ declare type CriteriaMatchMenuProps = {
121
+ criteriaMatch: DimensionMatch;
122
+ dimensions: DimensionsData;
123
+ errorMessage?: string;
124
+ onChange: (newCriteria: DimensionMatch) => void;
125
+ } & Omit<InputComboBoxProps<InputComboBoxOption, false>, 'value' | 'options' | 'onChange' | 'inputValue' | 'value' | 'onInputChange'>;
126
+ declare function CriteriaMatchMenu({ onChange, criteriaMatch, dimensions, errorMessage, ...props }: CriteriaMatchMenuProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
127
+
128
+ declare type DimensionValueProps = {
129
+ displayName: string;
130
+ };
131
+ declare function DimensionValue({ displayName }: DimensionValueProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
132
+
89
133
  declare const validateContextConfig: (contextConfig?: ContextConfig) => Promise<{
90
134
  valid: boolean;
91
135
  error?: Error;
@@ -102,4 +146,4 @@ declare const useValidateContextConfig: (contextConfig?: ContextConfig) => UseVa
102
146
  declare function isEnrichmentTagData(obj: any): obj is EnrichmentData[];
103
147
  declare function isPersonalizationCriteriaData(obj: any): obj is VariantMatchCriteria;
104
148
 
105
- export { ContextConfig, ContextData, ContextDataProps, DataContextErrorProps, DimensionsData, EditLink, EditLinkProps, EnrichmentTag, EnrichmentTagProps, PersonalizationCriteria, PersonalizationCriteriaProps, ProjectUIVersion, ResolvedDimensionDefinition, UseContextDataResult, UseDimensionsResult, UseValidateContextConfigResult, addEnrichmentLink, equality, isEnrichmentTagData, isPersonalizationCriteriaData, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };
149
+ export { ContextConfig, ContextData, ContextDataProps, CriteriaMatchMenu, CriteriaMatchMenuProps, CriteriaOperatorMenu, CriteriaOperatorMenuProps, DataContextErrorProps, DimensionMenu, DimensionMenuProps, DimensionValue, DimensionValueProps, DimensionsData, EditLink, EditLinkProps, EnrichmentTag, EnrichmentTagProps, PersonalizationCriteria, PersonalizationCriteriaProps, PersonalizationCriteriaStatic, PersonalizationCriteriaStaticProps, ProjectUIVersion, ResolvedDimensionDefinition, UseContextDataResult, UseDimensionsResult, UseValidateContextConfigResult, addEnrichmentLink, contextCriteriaMenuOperators, isEnrichmentTagData, isPersonalizationCriteriaData, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}from"@uniformdev/design-system";import{CgChevronRight as oe}from"react-icons/cg";import{css as te}from"@emotion/react";var z=te`
1
+ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as Ie}from"@uniformdev/design-system";import{CgChevronRight as xe}from"react-icons/cg";import{css as ye}from"@emotion/react";var Y=ye`
2
2
  display: flex;
3
3
  align-items: center;
4
4
  font-weight: var(--fw-bold);
@@ -9,7 +9,7 @@ import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}f
9
9
  &:focus {
10
10
  text-decoration-line: underline;
11
11
  }
12
- `;var U=({linkTo:t,name:n,linkText:r=`Edit ${n} Component`})=>e("a",{css:z,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:t},r,e(re,{icon:oe,iconColor:"currentColor",size:"1.5rem"}));import W,{useMemo as B,useState as T}from"react";import{useEffect as ie,useState as ae}from"react";import{DimensionClient as se,computeDimensionDisplayName as le,ApiClientError as ce}from"@uniformdev/context/api";function A(t,n,r){return t.reduce((s,a)=>{let o=n(a);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(a)]=r?r(a):a,s},{})}function k({apiHost:t,apiKey:n,projectId:r}){let[s,a]=ae({loading:!1,notConfigured:!1,error:null,result:null});return ie(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new se({projectId:r,apiKey:n,apiHost:t}).get()).dimensions.map(c=>({...c,displayName:le(c)})),d={dimensions:i,dimIndex:A(i,c=>c.dim,c=>c)};a({notConfigured:!1,loading:!1,error:null,result:d})}catch(l){let i;l instanceof ce?i=l.message:i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{getEnrichmentVectorKey as S}from"@uniformdev/context";import{Input as G,Button as ue,InputSelect as de,Callout as N,Icon as x,LoadingIndicator as me}from"@uniformdev/design-system";import{CgMathPlus as H,CgMathMinus as pe,CgCloseO as fe}from"react-icons/cg";import O from"immer";import{css as P}from"@emotion/react";var ge=P`
12
+ `;var X=({linkTo:n,name:t,linkText:o=`Edit ${t} Component`})=>e("a",{css:Y,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:n},o,e(Ie,{icon:xe,iconColor:"currentColor",size:"1.5rem"}));import j,{useMemo as Q,useState as G}from"react";import{useEffect as we,useState as Me}from"react";import{DimensionClient as Se,computeDimensionDisplayName as Be,ApiClientError as Ee}from"@uniformdev/context/api";function J(n,t,o){return n.reduce((l,a)=>{let r=t(a);if(typeof r=="undefined"||r===null)throw new Error("Objectify key selector returned undefined or null.");return l[t(a)]=o?o(a):a,l},{})}function x({apiHost:n,apiKey:t,projectId:o}){let[l,a]=Me({loading:!1,notConfigured:!1,error:null,result:null});return we(()=>{if(!o||!t||!n){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new Se({projectId:o,apiKey:t,apiHost:n}).get()).dimensions.map(c=>({...c,displayName:Be(c)})),m={dimensions:i,dimIndex:J(i,c=>c.dim,c=>c)};a({notConfigured:!1,loading:!1,error:null,result:m})}catch(s){let i;s instanceof Ee?i=s.message:i=s.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[n,t,o]),{result:l.result,error:l.error,loading:l.loading,notConfigured:l.notConfigured}}import{getEnrichmentVectorKey as H}from"@uniformdev/context";import{Input as ee,Button as Re,InputSelect as Pe,Callout as W,Icon as E,LoadingIndicator as ke}from"@uniformdev/design-system";import{CgMathPlus as ne,CgMathMinus as Oe,CgCloseO as Te}from"react-icons/cg";import Z from"immer";import{css as q}from"@emotion/react";var Ve=q`
13
13
  flex: 2;
14
14
  display: flex;
15
15
  width: 50%;
@@ -20,7 +20,7 @@ import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}f
20
20
  &:focus {
21
21
  text-decoration-line: underline;
22
22
  }
23
- `,st=({value:t,setValue:n,contextConfig:r,displayTitle:s=!0})=>{let{loading:a,result:o,error:l}=k(r),i=B(()=>{if(o)return o.dimensions.filter(f=>f.category==="ENR")},[o]),d=B(()=>{if(!t)return i;if(i)return i.filter(f=>!t.some(v=>S(v.cat,v.key)===f.dim))},[i,t]),[c,D]=T(""),[u,g]=T(50),[b,m]=T(!1),p=i==null?void 0:i.find(f=>f.dim===c),y=()=>{let[f,v]=c.split("_");w([...t!=null?t:[],{cat:f,key:v,str:u}]),D(""),g(50),m(!1)},w=f=>{let v=[];o?v=f.filter(E=>{let ee=o.dimIndex[S(E.cat,E.key)];return Boolean(ee)}):v=f;let C=v.length===0?null:v;n(C)};return l?e(N,{type:"danger"},l):a||o===null?e(me,null):e("fieldset",{className:"enrichment-tag"},s?e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,i!=null&&i.length?!b&&!t?e(N,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Click"," ",e("a",{onClick:()=>m(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):e(W.Fragment,null,o&&e(be,{list:t!=null?t:[],setList:w,dimIndex:o.dimIndex}),b&&d&&d.length>0?e("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},e("div",{css:{flexGrow:1}},e(de,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...d.map(f=>({label:f.displayName,value:f.dim}))],onChange:f=>D(f.currentTarget.value)})),e(he,{score:u,setValue:g,cap:p?p.cap:100,css:{flexBasis:"9rem"}}),e(ue,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:y,disabled:!c},"Add")):null,e("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!b&&d&&d.length>0&&t?e("button",{type:"button",className:"add-more",onClick:()=>m(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(x,{icon:H,iconColor:"currentColor",size:"1.25rem"})),"Add More"):e("a",{css:ge,title:"none",href:"#"}),e(U,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`}))):e(Ce,{contextConfig:r}))},Ce=({contextConfig:t})=>e(N,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",e("a",{href:`${t.apiHost}/projects/${encodeURIComponent(t.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),_=(t,n=100,r=0)=>Math.max(Math.min(t,n),r),q=P`
23
+ `,Rn=({value:n,setValue:t,contextConfig:o,displayTitle:l=!0})=>{let{loading:a,result:r,error:s}=x(o),i=Q(()=>{if(r)return r.dimensions.filter(g=>g.category==="ENR")},[r]),m=Q(()=>{if(!n)return i;if(i)return i.filter(g=>!n.some(y=>H(y.cat,y.key)===g.dim))},[i,n]),[c,b]=G(""),[u,C]=G(50),[f,D]=G(!1),d=i==null?void 0:i.find(g=>g.dim===c),v=()=>{let[g,y]=c.split("_");I([...n!=null?n:[],{cat:g,key:y,str:u}]),b(""),C(50),D(!1)},I=g=>{let y=[];r?y=g.filter(w=>{let B=r.dimIndex[H(w.cat,w.key)];return Boolean(B)}):y=g;let S=y.length===0?null:y;t(S)};return s?e(W,{type:"danger"},s):a||r===null?e(ke,null):e("fieldset",{className:"enrichment-tag"},l?e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,i!=null&&i.length?!f&&!n?e(W,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Click"," ",e("a",{onClick:()=>D(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):e(j.Fragment,null,r&&e(Le,{list:n!=null?n:[],setList:I,dimIndex:r.dimIndex}),f&&m&&m.length>0?e("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},e("div",{css:{flexGrow:1}},e(Pe,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...m.map(g=>({label:g.displayName,value:g.dim}))],onChange:g=>b(g.currentTarget.value)})),e($e,{score:u,setValue:C,cap:d?d.cap:100,css:{flexBasis:"9rem"}}),e(Re,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:v,disabled:!c},"Add")):null,e("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!f&&m&&m.length>0&&n?e("button",{type:"button",className:"add-more",onClick:()=>D(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(E,{icon:ne,iconColor:"currentColor",size:"1.25rem"})),"Add More"):e("a",{css:Ve,title:"none",href:"#"}),e(X,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization/enrichments`}))):e(Ne,{contextConfig:o}))},Ne=({contextConfig:n})=>e(W,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",e("a",{href:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),te=(n,t=100,o=0)=>Math.max(Math.min(n,t),o),oe=q`
24
24
  position: absolute;
25
25
  bottom: 0.875rem;
26
26
  left: var(--spacing-sm);
@@ -32,27 +32,27 @@ import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}f
32
32
  background-color: var(--gray-100);
33
33
  border: 1px solid var(--gray-300);
34
34
  border-radius: var(--rounded-full);
35
- `,ve=P`
36
- ${q}
35
+ `,ze=q`
36
+ ${oe}
37
37
  left: auto;
38
38
  right: var(--spacing-sm);
39
- `,he=({score:t,setValue:n,cap:r=100,...s})=>{let a=o=>{let l=o==="increment"?t+10:t-10;l<0&&(l=0),l>r&&(l=r),n(l)};return e("div",{css:{position:"relative"},...s},e(G,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:r,value:t,onChange:o=>n(_(Number(o.currentTarget.value)||0,r)),css:{textAlign:"center",boxSizing:"border-box"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>a("decrement"),disabled:t===0,className:"scoreCounterButton",css:q},e(x,{icon:pe,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Increase enrichment count",onClick:()=>a("increment"),className:"scoreCounterButton",css:ve},e(x,{icon:H,iconColor:"gray",size:"1.5rem"})))},be=({list:t,setList:n,dimIndex:r})=>{let s=o=>{n(O(t,l=>{l.splice(o,1)}))},a=(o,l)=>{var d;let i=(d=r[`${t[o].cat}_${t[o].key}`])==null?void 0:d.cap;n(O(t,c=>{c[o].str=_(Number(l)||0,i)}))};return e(W.Fragment,null,t.map((o,l)=>{let i=r[S(o.cat,o.key)];if(!!i)return e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",key:`${o.cat}-${o.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"}},i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`),e("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"}},e(G,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:d=>a(l,d.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>s(l),css:{border:0}},e(x,{icon:fe,iconColor:"red",size:"1.5rem"})))}))};import{useState as De}from"react";import{LoadingIndicator as we,Callout as L,InputSelect as Y,InputComboBox as Ee,InputInlineSelect as ke,Icon as J}from"@uniformdev/design-system";import Q from"immer";import{CgCloseO as xe,CgMathPlus as Re}from"react-icons/cg";import{css as F}from"@emotion/react";var V="6rem",K=F`
39
+ `,$e=({score:n,setValue:t,cap:o=100,...l})=>{let a=r=>{let s=r==="increment"?n+10:n-10;s<0&&(s=0),s>o&&(s=o),t(s)};return e("div",{css:{position:"relative"},...l},e(ee,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:o,value:n,onChange:r=>t(te(Number(r.currentTarget.value)||0,o)),css:{textAlign:"center",boxSizing:"border-box"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>a("decrement"),disabled:n===0,className:"scoreCounterButton",css:oe},e(E,{icon:Oe,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Increase enrichment count",onClick:()=>a("increment"),className:"scoreCounterButton",css:ze},e(E,{icon:ne,iconColor:"gray",size:"1.5rem"})))},Le=({list:n,setList:t,dimIndex:o})=>{let l=r=>{t(Z(n,s=>{s.splice(r,1)}))},a=(r,s)=>{var m;let i=(m=o[`${n[r].cat}_${n[r].key}`])==null?void 0:m.cap;t(Z(n,c=>{c[r].str=te(Number(s)||0,i)}))};return e(j.Fragment,null,n.map((r,s)=>{let i=o[H(r.cat,r.key)];if(!!i)return e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",key:`${r.cat}-${r.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"}},i?i.displayName:`Enrichment '${r.cat}_${r.key}' is unknown`),e("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"}},e(ee,{type:"text",min:0,max:i.cap||100,title:"score",value:r.str,css:{textAlign:"center",width:"100px"},onChange:m=>a(s,m.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>l(s),css:{border:0}},e(E,{icon:Te,iconColor:"red",size:"1.5rem"})))}))};import{LoadingIndicator as Xe,Callout as ve}from"@uniformdev/design-system";import{Callout as de,InputInlineSelect as Fe,Icon as fe}from"@uniformdev/design-system";import ge from"immer";import{CgCloseO as Ke,CgMathPlus as Ye}from"react-icons/cg";import{css as M}from"@emotion/react";var _="6rem",re=M`
40
40
  position: relative;
41
41
  padding: var(--spacing-base);
42
42
  border: 1px solid var(--gray-300);
43
43
  box-shadow: var(--shadow-base);
44
44
  background-color: white;
45
45
  border-radius: var(--rounded-base);
46
- margin-top: ${V};
46
+ margin-top: ${_};
47
47
  display: flex;
48
48
  &:before {
49
49
  content: '';
50
50
  display: block;
51
51
  width: 1px;
52
- height: ${V};
52
+ height: ${_};
53
53
  background-color: var(--gray-300);
54
54
  position: absolute;
55
- top: -${V};
55
+ top: -${_};
56
56
  left: var(--spacing-lg);
57
57
  }
58
58
  &:first-of-type {
@@ -61,9 +61,18 @@ import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}f
61
61
  display: none;
62
62
  }
63
63
  }
64
- `,X=F`
64
+ `,ie=M`
65
65
  display: grid;
66
- gap: var(--spacing-base);
66
+ gap: var(--spacing-xs);
67
67
  flex-grow: 1;
68
68
  margin-right: var(--spacing-base);
69
- `;var Ie=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],Ct=({value:t,setValue:n,contextConfig:r,onMenuOpen:s,onMenuClose:a,displayTitle:o=!0})=>{let{loading:l,result:i,error:d}=k(r),c=t||{crit:[]},D=m=>{n({...c,op:m==="&"?void 0:m})},u=()=>{n({...c,crit:[...c.crit,{l:"",op:">",r:50}]})},g=(m,p)=>{n(Q(c,y=>{y.crit[p]=m}))},b=m=>{let p=Q(c,w=>{w.crit.splice(m,1)}),y=p.crit.length===0?null:p;n(y)};return d?e(L,{type:"danger"},d):l||i===null?e(we,null):e("fieldset",{className:"personalization-criteria"},o?e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,c.crit.length?c.crit.map((m,p)=>{var f,v;let y=((f=m.l)==null?void 0:f.length)>0,w=m.op!=="+"&&m.op!=="-";return e("div",{css:K,key:p},e("div",{css:X,style:{gridTemplateColumns:`repeat(${w?3:2}, minmax(0, 1fr))`},className:"criteriaItemInner"},e(Y,{name:`lhs-${p}`,label:"Match Dimension",showLabel:!1,value:m.l,options:[{label:"Select",value:""},...i.dimensions.map(C=>({label:C.displayName,value:C.dim}))],onChange:C=>{g({...m,l:C.target.value},p)}}),e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",justifyContent:"space-around"}},e("span",{css:{color:"var(--gray-700)"}},"score"),e(Y,{css:{width:"100%"},name:`op-${p}`,label:"Operator",showLabel:!1,value:m.op,options:Ie.map(C=>({label:C.name,value:C.value})),onChange:C=>{let E=C.target.value;g(E==="+"||E==="-"?{...m,op:E,r:void 0,rDim:void 0}:{...m,op:C.target.value},p)},disabled:!y})),w?e(Me,{critHasLhs:y,currentCriteria:m,dimensions:i,update:g,index:p,onMenuOpen:s,onMenuClose:a}):null),e("button",{type:"button",onClick:()=>b(p),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(J,{icon:xe,iconColor:"red",size:"1.5rem"})),p>0?e("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(ke,{disabled:p>1,value:(v=c.op)!=null?v:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:C=>{D(C.value)}})):null)}):e(L,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.')),i.dimensions.length===0?e(L,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):e("button",{type:"button",className:"add-more",onClick:u,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(J,{icon:Re,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Me({update:t,currentCriteria:n,index:r,dimensions:s,critHasLhs:a,onMenuOpen:o,onMenuClose:l}){var c,D;let[i,d]=De(n.r&&R(n.r)!==null?n.r.toString(10):"");return e(Ee,{name:`rhs-${r}`,className:"input-combobox",inputValue:i,value:{label:n.rDim?(D=(c=s.dimIndex[n.rDim])==null?void 0:c.displayName)!=null?D:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:g})=>({...u,background:g?"transparent":void 0,fontSize:g?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var g;u&&t({...n,rDim:(g=u.value)==null?void 0:g.toString(),r:void 0},r)},onInputChange:(u,g)=>{let b=R(u);g.action==="input-change"||g.action==="set-value"?(d(u),(b||u==="")&&t({...n,r:u,rDim:void 0},r)):!b&&!R(g.prevInputValue)&&d(u)},isDisabled:!a,noOptionsMessage:({inputValue:u})=>R(u)?`${u}`:"No options match",onMenuOpen:o,onMenuClose:l})}function R(t){return/^\d+$/.test(t.toString(10))}import Ve from"react";import{useEffect as Te,useState as Se}from"react";import{ManifestClient as Ne,ApiClientError as Pe}from"@uniformdev/context/api";function I({apiHost:t,apiKey:n,projectId:r}){let[s,a]=Se({loading:!1,notConfigured:!1,error:null,result:null});return Te(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Ne({projectId:r,apiKey:n,apiHost:t}).get({preview:!0});a({notConfigured:!1,loading:!1,error:null,result:i})}catch(l){let i;l instanceof Pe?(l.statusCode===403&&(i=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=l.message):i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{LoadingIndicator as Le}from"@uniformdev/design-system";function Rt({children:t,versionMap:n,contextConfig:r}){let{loading:s,result:a}=I(r);if(s)return e(Le,null);if(a){let o=n[a.project.ui_version];if(o)return e(o,null)}return e(Ve.Fragment,null,t)}import Z,{createContext as $e,useContext as $}from"react";import{LoadingIndicator as ze}from"@uniformdev/design-system";var M=$e(null),$t=({loadingComponent:t,errorComponent:n,contextConfig:r,children:s})=>{let a=I(r),o=k(r);return a.error||a.notConfigured?n?e(n,{contextConfig:r,result:a}):e(Z.Fragment,null,"ErrorComponent is not configured"):o.error||o.notConfigured?n?e(n,{contextConfig:r,result:o}):e(Z.Fragment,null,"ErrorComponent is not configured"):a.loading||o.loading?t?e(t,null):e(ze,null):e(M.Provider,{value:{manifest:a.result,dimensions:o.result,contextConfig:r}},s)};function zt(){let t=$(M);if(!(t!=null&&t.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return t.contextConfig}function Ut(){let t=$(M);if(!(t!=null&&t.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return t.manifest}function At(){let t=$(M);if(!(t!=null&&t.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return t.dimensions}import{validate as Ue}from"uuid";import{ManifestClient as Ae}from"@uniformdev/context/api";var j=async t=>{if(!t)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!t.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!t.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Ue(t.apiKey)&&!t.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new Ae({projectId:t.projectId,apiKey:t.apiKey,apiHost:t.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};import{useEffect as Be,useState as Oe}from"react";var Ft=t=>{let[n,r]=Oe({validating:!1,error:void 0}),{apiKey:s,apiHost:a,projectId:o}=t||{};return Be(()=>{if(!s||!a)return;(async()=>{r({validating:!0,error:void 0});let{error:i,result:d}=await j({apiHost:a,apiKey:s,projectId:o});r(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:d})})()},[a,s,o]),{validating:n.validating,error:n.error,result:n.result}};function Xt(t){return Array.isArray(t)&&t.length>0&&t[0].cat!==void 0}function Yt(t){return t.crit!==void 0}export*from"@uniformdev/design-system";export{$t as ContextData,U as EditLink,st as EnrichmentTag,Ct as PersonalizationCriteria,Rt as ProjectUIVersion,ge as addEnrichmentLink,Ie as equality,Xt as isEnrichmentTagData,Yt as isPersonalizationCriteriaData,zt as useContextConfig,I as useContextData,k as useDimensions,At as useDimensionsDataContext,Ut as useManifest,Ft as useValidateContextConfig,j as validateContextConfig};
69
+ `,R=M`
70
+ width: 100%;
71
+ display: flex;
72
+ align-items: stretch;
73
+ `,P=M`
74
+ height: 100%;
75
+ width: 100%;
76
+ `,On=M`
77
+ height: 100%;
78
+ `;import{InputComboBox as Ae}from"@uniformdev/design-system";function k({op:n}){return e("div",{css:{background:"var(--gray-700)",color:"white",borderRadius:"100%",width:"30px",height:"30px",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"24px"}},n)}var ae=n=>{var m,c;let{data:t,getStyles:o,isDisabled:l,innerRef:a,innerProps:r}=n,[s,i]=(c=(m=t.label)==null?void 0:m.split(":"))!=null?c:[];return e("div",{css:{...o("option",n),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:a,"aria-disabled":l,...r},i?e(k,{op:s}):e("div",{css:{width:"20px",height:"20px"}}),e("div",null,i!=null?i:s))};var se=n=>{let{data:t,getStyles:o}=n;return e("div",{css:{...o("singleValue",n),width:"max-content"}},t.label.length===1?e(k,{op:t.label}):t.label)};var le=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function me({onChange:n,value:t,...o}){var l,a;return e(Ae,{...o,value:{label:(a=(l=le.find(r=>r.value===t))==null?void 0:l.name)!=null?a:t,value:t},options:le.map(r=>({label:r.description?`${r.name}:${r.description}`:r.name,value:r.value})),styles:{...o.styles,valueContainer:(r,s)=>{var i,m;return{...r,padding:"var(--spacing-sm)",...(m=(i=o.styles)==null?void 0:i.valueContainer)==null?void 0:m.call(i,r,s)}},menu:(r,s)=>{var i,m;return{...r,width:"max-content",...(m=(i=o.styles)==null?void 0:i.menu)==null?void 0:m.call(i,r,s)}},control:(r,s)=>{var i,m;return{...r,border:0,...(m=(i=o.styles)==null?void 0:i.control)==null?void 0:m.call(i,r,s)}},indicatorSeparator:(r,s)=>{var i,m;return{...r,display:"none",...(m=(i=o.styles)==null?void 0:i.indicatorSeparator)==null?void 0:m.call(i,r,s)}}},onChange:r=>{r&&n(r.value)},components:{SingleValue:se,Option:ae,...o.components}})}import{InputComboBox as We}from"@uniformdev/design-system";import{Icon as Ge}from"@uniformdev/design-system";function F(n){return{label:n.displayName,value:n.dim,isDisabled:!1}}function O(n){if(!n)return"unavailable";let[t]=n.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function T(n){let t=[],o="";for(let l of n){let[a]=l.displayName.split(":");o!==a&&(t.push({label:a,options:[]}),o=a),t[t.length-1].options.push(F(l))}return t}var V=n=>{var a;let{data:t,getStyles:o,className:l}=n;return e("div",{css:{...o("groupHeading",n),textTransform:"none",fontSize:"var(--font-size-sm)"},className:l},e("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"}},e(Ge,{icon:O((a=t.label)!=null?a:""),iconColor:"currentColor",size:16}),e("span",null,t.label)))};function N({message:n}){return n?e("div",{css:{position:"absolute",background:"white",borderRadius:"3px",fontSize:"0.8rem",color:"var(--brand-primary-2)",bottom:"calc(var(--spacing-xs) * -1)"}},n):null}var z=n=>{var u,C;let{data:t,getStyles:o,cx:l,isDisabled:a,isFocused:r,isSelected:s,className:i,innerRef:m,innerProps:c}=n,[,b]=(C=(u=t.label)==null?void 0:u.split(":"))!=null?C:[];return e("div",{css:o("option",n),className:l({option:!0,"option--is-disabled":a,"option--is-focused":r,"option--is-selected":s},i),ref:m,"aria-disabled":a,...c},e("div",{css:{color:"var(--gray-700)"}},b!=null?b:t.label))};import{Icon as He}from"@uniformdev/design-system";function ue({displayName:n}){let[t,o]=n.split(":");return e("div",{css:{whiteSpace:"normal",overflow:"hidden"}},o?e("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"}},t?e(He,{icon:O(t),iconColor:"currentColor",size:16}):null,e("span",null,t)):null,e("div",{css:{color:"var(--gray-700)"}},o!=null?o:t))}var $=n=>{let{data:t,getStyles:o}=n;return e("div",{css:o("singleValue",n)},e(ue,{displayName:t.label}))};function pe({onChange:n,value:t,dimensions:o,errorMessage:l,...a}){return e(p.Fragment,null,e(We,{...a,value:t?F(t):void 0,options:T(o),styles:{...a.styles,valueContainer:(r,s)=>{var i,m;return{...r,padding:"var(--spacing-sm)",...(m=(i=a.styles)==null?void 0:i.valueContainer)==null?void 0:m.call(i,r,s)}}},onChange:r=>{r&&n(o.find(s=>s.dim===r.value))},components:{Option:z,SingleValue:$,GroupHeading:V,...a.components}}),e(N,{message:l}))}import{InputComboBox as qe}from"@uniformdev/design-system";import{useState as _e}from"react";function ce({onChange:n,criteriaMatch:t,dimensions:o,errorMessage:l,...a}){var c,b;let[r,s]=_e(typeof t.r!="undefined"&&L(t.r)!==null?t.r.toString(10):""),i=t.rDim,m=t.rDim?o.dimIndex[t.rDim]:void 0;return e(p.Fragment,null,e(qe,{...a,inputValue:r,menuShouldScrollIntoView:!0,value:{label:(c=m==null?void 0:m.displayName)!=null?c:i&&!m?`${t.rDim} (unknown)`:"",value:(b=t.rDim)!=null?b:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...T(o.dimensions)],styles:{...a.styles,valueContainer:(u,C)=>{var f,D;return{...u,padding:"var(--spacing-sm)",...(D=(f=a.styles)==null?void 0:f.valueContainer)==null?void 0:D.call(f,u,C)}},option:(u,C)=>{var f,D;return{fontSize:C.isDisabled?"0.8rem":void 0,...(D=(f=a.styles)==null?void 0:f.option)==null?void 0:D.call(f,u,C)}}},onChange:u=>{var C;u&&(n({...t,rDim:(C=u.value)==null?void 0:C.toString(),r:void 0}),s(""))},onInputChange:(u,C)=>{let f=L(u);C.action==="input-change"||C.action==="set-value"?(s(u),(f||u==="")&&n({...t,r:u||void 0,rDim:void 0})):!f&&!L(C.prevInputValue)&&(!u&&t.r?s(t.r.toString()):s(u))},components:{...a.components,Option:z,SingleValue:$,GroupHeading:V},noOptionsMessage:({inputValue:u})=>L(u)?e(p.Fragment,null,e("div",null,"Score: ",u),e("small",null,"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension.")):e(p.Fragment,null,e("div",null,"No dimensions match your search \u201C",u,"\u201D"),e("small",null,"If you want to match a literal score, enter a numeric value."))}),e(N,{message:l}))}function L(n){return/^\d+$/.test(n.toString(10))}var Ce=({value:n,setValue:t,dimensions:o,onMenuOpen:l,onMenuClose:a,onAddCriteria:r,onRemoveCriteria:s,displayTitle:i=!0,components:m,errors:c={}})=>{let b=n||{crit:[]},u=d=>{t({...b,op:d==="&"?void 0:d})},C=()=>{let d={...b,crit:[...b.crit,{l:"",op:">",r:0}]};t(d),r==null||r(d)},f=(d,v)=>{t(ge(b,I=>{I.crit[v]=d}))},D=d=>{let v=ge(b,g=>{g.crit.splice(d,1)}),I=v.crit.length===0?null:v;t(I),s==null||s(I)};return e("fieldset",{className:"personalization-criteria"},i?m!=null&&m.Title?e(m.Title,null):e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,b.crit.length?b.crit.map((d,v)=>{var y,S,w,B;let I=((y=d.l)==null?void 0:y.length)>0,g=d.op!=="+"&&d.op!=="-";return e("div",{css:re,key:v},e("div",{css:ie,style:{gridTemplateColumns:`minmax(0, 1fr) ${g?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"}`},className:"criteriaItemInner"},e("div",{css:R},e(pe,{errorMessage:(S=c.lhs)==null?void 0:S[v],css:P,styles:{control:h=>({...h,height:"100%"})},dimensions:o.dimensions,onChange:h=>{f({...d,l:h.dim},v)},value:o.dimIndex[d.l]})),e("div",{css:R},e(me,{name:`op-${v}`,css:P,styles:{control:h=>({...h,height:"100%"})},value:d.op,onChange:h=>{f(h==="+"||h==="-"?{...d,op:h,r:void 0,rDim:void 0}:{...d,op:h},v)},onMenuOpen:l,onMenuClose:a})),g?e("div",{css:R},e(ce,{errorMessage:(w=c.rhs)==null?void 0:w[v],css:P,styles:{control:h=>({...h,height:"100%"})},criteriaMatch:d,onChange:h=>{f(h,v)},isDisabled:!I,dimensions:o,onMenuOpen:l,onMenuClose:a})):null),e("button",{type:"button",onClick:()=>D(v),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(fe,{icon:Ke,iconColor:"red",size:"1.5rem"})),v>0?e("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(Fe,{disabled:v>1,value:(B=b.op)!=null?B:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:h=>{u(h.value)}})):null)}):e(de,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.')),o.dimensions.length===0?m!=null&&m.NoDimensionsDefined?e(m.NoDimensionsDefined,null):e(de,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured.")):e("button",{type:"button",className:"add-more",onClick:C,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(fe,{icon:Ye,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};var Ot=({contextConfig:n,...t})=>{let{loading:o,result:l,error:a}=x(n);return a?e(ve,{type:"danger"},a):o||l===null?e(Xe,null):e(Ce,{...t,dimensions:l,components:{NoDimensionsDefined:()=>e(ve,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension")))}})};import en from"react";import{useEffect as Je,useState as Qe}from"react";import{ManifestClient as Ze,ApiClientError as je}from"@uniformdev/context/api";function U({apiHost:n,apiKey:t,projectId:o}){let[l,a]=Qe({loading:!1,notConfigured:!1,error:null,result:null});return Je(()=>{if(!o||!t||!n){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Ze({projectId:o,apiKey:t,apiHost:n}).get({preview:!0});a({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof je?(s.statusCode===403&&(i=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=s.message):i=s.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[n,t,o]),{result:l.result,error:l.error,loading:l.loading,notConfigured:l.notConfigured}}import{LoadingIndicator as nn}from"@uniformdev/design-system";function Ht({children:n,versionMap:t,contextConfig:o}){let{loading:l,result:a}=U(o);if(l)return e(nn,null);if(a){let r=t[a.project.ui_version];if(r)return e(r,null)}return e(en.Fragment,null,n)}import be,{createContext as tn,useContext as K}from"react";import{LoadingIndicator as on}from"@uniformdev/design-system";var A=tn(null),Qt=({loadingComponent:n,errorComponent:t,contextConfig:o,children:l})=>{let a=U(o),r=x(o);return a.error||a.notConfigured?t?e(t,{contextConfig:o,result:a}):e(be.Fragment,null,"ErrorComponent is not configured"):r.error||r.notConfigured?t?e(t,{contextConfig:o,result:r}):e(be.Fragment,null,"ErrorComponent is not configured"):a.loading||r.loading?n?e(n,null):e(on,null):e(A.Provider,{value:{manifest:a.result,dimensions:r.result,contextConfig:o}},l)};function Zt(){let n=K(A);if(!(n!=null&&n.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return n.contextConfig}function jt(){let n=K(A);if(!(n!=null&&n.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return n.manifest}function eo(){let n=K(A);if(!(n!=null&&n.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return n.dimensions}import{validate as rn}from"uuid";import{ManifestClient as an}from"@uniformdev/context/api";var he=async n=>{if(!n)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!n.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!n.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!rn(n.apiKey)&&!n.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new an({projectId:n.projectId,apiKey:n.apiKey,apiHost:n.apiHost});try{let o=await t.get({preview:!0});return{valid:!0,result:o}}catch(o){return{valid:!1,error:o}}};import{useEffect as sn,useState as ln}from"react";var lo=n=>{let[t,o]=ln({validating:!1,error:void 0}),{apiKey:l,apiHost:a,projectId:r}=n||{};return sn(()=>{if(!l||!a)return;(async()=>{o({validating:!0,error:void 0});let{error:i,result:m}=await he({apiHost:a,apiKey:l,projectId:r});o(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:m})})()},[a,l,r]),{validating:t.validating,error:t.error,result:t.result}};function uo(n){return Array.isArray(n)&&n.length>0&&n[0].cat!==void 0}function po(n){return n.crit!==void 0}export*from"@uniformdev/design-system";export{Qt as ContextData,ce as CriteriaMatchMenu,me as CriteriaOperatorMenu,pe as DimensionMenu,ue as DimensionValue,X as EditLink,Rn as EnrichmentTag,Ot as PersonalizationCriteria,Ce as PersonalizationCriteriaStatic,Ht as ProjectUIVersion,Ve as addEnrichmentLink,le as contextCriteriaMenuOperators,uo as isEnrichmentTagData,po as isPersonalizationCriteriaData,Zt as useContextConfig,U as useContextData,x as useDimensions,eo as useDimensionsDataContext,jt as useManifest,lo as useValidateContextConfig,he as validateContextConfig};
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,ye=Object.prototype.hasOwnProperty;var De=(e,n)=>{for(var r in n)z(e,r,{get:n[r],enumerable:!0})},$=(e,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of he(n))!ye.call(e,i)&&i!==r&&z(e,i,{get:()=>n[i],enumerable:!(s=ve(n,i))||s.enumerable});return e},D=(e,n,r)=>($(e,n,"default"),r&&$(r,n,"default")),P=(e,n,r)=>(r=e!=null?Ce(be(e)):{},$(n||!e||!e.__esModule?z(r,"default",{value:e,enumerable:!0}):r,e)),we=e=>$(z({},"__esModule",{value:!0}),e);var y={};De(y,{ContextData:()=>Ve,EditLink:()=>F,EnrichmentTag:()=>ke,PersonalizationCriteria:()=>Se,ProjectUIVersion:()=>Pe,addEnrichmentLink:()=>re,equality:()=>ce,isEnrichmentTagData:()=>Ae,isPersonalizationCriteriaData:()=>Be,useContextConfig:()=>Le,useContextData:()=>L,useDimensions:()=>T,useDimensionsDataContext:()=>ze,useManifest:()=>$e,useValidateContextConfig:()=>Ue,validateContextConfig:()=>Q});module.exports=we(y);var t=require("@emotion/react"),E=P(require("react"));var ee=require("@uniformdev/design-system"),te=require("react-icons/cg");var Z=require("@emotion/react"),j=Z.css`
1
+ var Ae=Object.create;var A=Object.defineProperty;var Ge=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var We=Object.getPrototypeOf,qe=Object.prototype.hasOwnProperty;var _e=(n,t)=>{for(var o in t)A(n,o,{get:t[o],enumerable:!0})},U=(n,t,o,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of He(t))!qe.call(n,i)&&i!==o&&A(n,i,{get:()=>t[i],enumerable:!(l=Ge(t,i))||l.enumerable});return n},w=(n,t,o)=>(U(n,t,"default"),o&&U(o,t,"default")),k=(n,t,o)=>(o=n!=null?Ae(We(n)):{},U(t||!n||!n.__esModule?A(o,"default",{value:n,enumerable:!0}):o,n)),Fe=n=>U(A({},"__esModule",{value:!0}),n);var I={};_e(I,{ContextData:()=>tn,CriteriaMatchMenu:()=>de,CriteriaOperatorMenu:()=>me,DimensionMenu:()=>ce,DimensionValue:()=>pe,EditLink:()=>ie,EnrichmentTag:()=>Ye,PersonalizationCriteria:()=>en,PersonalizationCriteriaStatic:()=>ge,ProjectUIVersion:()=>nn,addEnrichmentLink:()=>Ie,contextCriteriaMenuOperators:()=>le,isEnrichmentTagData:()=>ln,isPersonalizationCriteriaData:()=>mn,useContextConfig:()=>on,useContextData:()=>z,useDimensions:()=>R,useDimensionsDataContext:()=>an,useManifest:()=>rn,useValidateContextConfig:()=>sn,validateContextConfig:()=>Ce});module.exports=Fe(I);var e=require("@emotion/react"),p=k(require("react"));var he=require("@uniformdev/design-system"),ye=require("react-icons/cg");var ve=require("@emotion/react"),be=ve.css`
2
2
  display: flex;
3
3
  align-items: center;
4
4
  font-weight: var(--fw-bold);
@@ -9,7 +9,7 @@ var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDes
9
9
  &:focus {
10
10
  text-decoration-line: underline;
11
11
  }
12
- `;var F=({linkTo:e,name:n,linkText:r=`Edit ${n} Component`})=>(0,t.jsx)("a",{css:j,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:e},r,(0,t.jsx)(ee.Icon,{icon:te.CgChevronRight,iconColor:"currentColor",size:"1.5rem"}));var w=P(require("react"));var U=require("react"),V=require("@uniformdev/context/api");function ne(e,n,r){return e.reduce((s,i)=>{let o=n(i);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(i)]=r?r(i):i,s},{})}function T({apiHost:e,apiKey:n,projectId:r}){let[s,i]=(0,U.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,U.useEffect)(()=>{if(!r||!n||!e){i({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{i({notConfigured:!1,loading:!0,error:null,result:null});try{let a=(await new V.DimensionClient({projectId:r,apiKey:n,apiHost:e}).get()).dimensions.map(c=>({...c,displayName:(0,V.computeDimensionDisplayName)(c)})),d={dimensions:a,dimIndex:ne(a,c=>c.dim,c=>c)};i({notConfigured:!1,loading:!1,error:null,result:d})}catch(l){let a;l instanceof V.ApiClientError?a=l.message:a=l.toString(),i({notConfigured:!1,loading:!1,error:a,result:null});return}})()},[e,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}var A=require("@uniformdev/context"),g=require("@uniformdev/design-system"),S=require("react-icons/cg"),K=P(require("immer")),B=require("@emotion/react"),re=B.css`
12
+ `;var ie=({linkTo:n,name:t,linkText:o=`Edit ${t} Component`})=>(0,e.jsx)("a",{css:be,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:n},o,(0,e.jsx)(he.Icon,{icon:ye.CgChevronRight,iconColor:"currentColor",size:"1.5rem"}));var M=k(require("react"));var G=require("react"),O=require("@uniformdev/context/api");function De(n,t,o){return n.reduce((l,i)=>{let r=t(i);if(typeof r=="undefined"||r===null)throw new Error("Objectify key selector returned undefined or null.");return l[t(i)]=o?o(i):i,l},{})}function R({apiHost:n,apiKey:t,projectId:o}){let[l,i]=(0,G.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,G.useEffect)(()=>{if(!o||!t||!n){i({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{i({notConfigured:!1,loading:!0,error:null,result:null});try{let a=(await new O.DimensionClient({projectId:o,apiKey:t,apiHost:n}).get()).dimensions.map(c=>({...c,displayName:(0,O.computeDimensionDisplayName)(c)})),m={dimensions:a,dimIndex:De(a,c=>c.dim,c=>c)};i({notConfigured:!1,loading:!1,error:null,result:m})}catch(s){let a;s instanceof O.ApiClientError?a=s.message:a=s.toString(),i({notConfigured:!1,loading:!1,error:a,result:null});return}})()},[n,t,o]),{result:l.result,error:l.error,loading:l.loading,notConfigured:l.notConfigured}}var H=require("@uniformdev/context"),h=require("@uniformdev/design-system"),P=require("react-icons/cg"),ae=k(require("immer")),W=require("@emotion/react"),Ie=W.css`
13
13
  flex: 2;
14
14
  display: flex;
15
15
  width: 50%;
@@ -20,7 +20,7 @@ var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDes
20
20
  &:focus {
21
21
  text-decoration-line: underline;
22
22
  }
23
- `,ke=({value:e,setValue:n,contextConfig:r,displayTitle:s=!0})=>{let{loading:i,result:o,error:l}=T(r),a=(0,w.useMemo)(()=>{if(o)return o.dimensions.filter(f=>f.category==="ENR")},[o]),d=(0,w.useMemo)(()=>{if(!e)return a;if(a)return a.filter(f=>!e.some(b=>(0,A.getEnrichmentVectorKey)(b.cat,b.key)===f.dim))},[a,e]),[c,I]=(0,w.useState)(""),[u,C]=(0,w.useState)(50),[x,m]=(0,w.useState)(!1),p=a==null?void 0:a.find(f=>f.dim===c),R=()=>{let[f,b]=c.split("_");M([...e!=null?e:[],{cat:f,key:b,str:u}]),I(""),C(50),m(!1)},M=f=>{let b=[];o?b=f.filter(N=>{let ge=o.dimIndex[(0,A.getEnrichmentVectorKey)(N.cat,N.key)];return Boolean(ge)}):b=f;let h=b.length===0?null:b;n(h)};return l?(0,t.jsx)(g.Callout,{type:"danger"},l):i||o===null?(0,t.jsx)(g.LoadingIndicator,null):(0,t.jsx)("fieldset",{className:"enrichment-tag"},s?(0,t.jsx)("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},(0,t.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,a!=null&&a.length?!x&&!e?(0,t.jsx)(g.Callout,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"Click"," ",(0,t.jsx)("a",{onClick:()=>m(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):(0,t.jsx)(w.default.Fragment,null,o&&(0,t.jsx)(Me,{list:e!=null?e:[],setList:M,dimIndex:o.dimIndex}),x&&d&&d.length>0?(0,t.jsx)("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},(0,t.jsx)("div",{css:{flexGrow:1}},(0,t.jsx)(g.InputSelect,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...d.map(f=>({label:f.displayName,value:f.dim}))],onChange:f=>I(f.currentTarget.value)})),(0,t.jsx)(Ie,{score:u,setValue:C,cap:p?p.cap:100,css:{flexBasis:"9rem"}}),(0,t.jsx)(g.Button,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:R,disabled:!c},"Add")):null,(0,t.jsx)("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!x&&d&&d.length>0&&e?(0,t.jsx)("button",{type:"button",className:"add-more",onClick:()=>m(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},(0,t.jsx)("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},(0,t.jsx)(g.Icon,{icon:S.CgMathPlus,iconColor:"currentColor",size:"1.25rem"})),"Add More"):(0,t.jsx)("a",{css:re,title:"none",href:"#"}),(0,t.jsx)(F,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`}))):(0,t.jsx)(xe,{contextConfig:r}))},xe=({contextConfig:e})=>(0,t.jsx)(g.Callout,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",(0,t.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),oe=(e,n=100,r=0)=>Math.max(Math.min(e,n),r),ie=B.css`
23
+ `,Ye=({value:n,setValue:t,contextConfig:o,displayTitle:l=!0})=>{let{loading:i,result:r,error:s}=R(o),a=(0,M.useMemo)(()=>{if(r)return r.dimensions.filter(g=>g.category==="ENR")},[r]),m=(0,M.useMemo)(()=>{if(!n)return a;if(a)return a.filter(g=>!n.some(D=>(0,H.getEnrichmentVectorKey)(D.cat,D.key)===g.dim))},[a,n]),[c,b]=(0,M.useState)(""),[u,C]=(0,M.useState)(50),[f,x]=(0,M.useState)(!1),d=a==null?void 0:a.find(g=>g.dim===c),v=()=>{let[g,D]=c.split("_");S([...n!=null?n:[],{cat:g,key:D,str:u}]),b(""),C(50),x(!1)},S=g=>{let D=[];r?D=g.filter(V=>{let L=r.dimIndex[(0,H.getEnrichmentVectorKey)(V.cat,V.key)];return Boolean(L)}):D=g;let $=D.length===0?null:D;t($)};return s?(0,e.jsx)(h.Callout,{type:"danger"},s):i||r===null?(0,e.jsx)(h.LoadingIndicator,null):(0,e.jsx)("fieldset",{className:"enrichment-tag"},l?(0,e.jsx)("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},(0,e.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,a!=null&&a.length?!f&&!n?(0,e.jsx)(h.Callout,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,e.jsx)("p",null,"Click"," ",(0,e.jsx)("a",{onClick:()=>x(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):(0,e.jsx)(M.default.Fragment,null,r&&(0,e.jsx)(Ze,{list:n!=null?n:[],setList:S,dimIndex:r.dimIndex}),f&&m&&m.length>0?(0,e.jsx)("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},(0,e.jsx)("div",{css:{flexGrow:1}},(0,e.jsx)(h.InputSelect,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...m.map(g=>({label:g.displayName,value:g.dim}))],onChange:g=>b(g.currentTarget.value)})),(0,e.jsx)(Qe,{score:u,setValue:C,cap:d?d.cap:100,css:{flexBasis:"9rem"}}),(0,e.jsx)(h.Button,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:v,disabled:!c},"Add")):null,(0,e.jsx)("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!f&&m&&m.length>0&&n?(0,e.jsx)("button",{type:"button",className:"add-more",onClick:()=>x(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},(0,e.jsx)("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},(0,e.jsx)(h.Icon,{icon:P.CgMathPlus,iconColor:"currentColor",size:"1.25rem"})),"Add More"):(0,e.jsx)("a",{css:Ie,title:"none",href:"#"}),(0,e.jsx)(ie,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization/enrichments`}))):(0,e.jsx)(Xe,{contextConfig:o}))},Xe=({contextConfig:n})=>(0,e.jsx)(h.Callout,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},(0,e.jsx)("p",null,"Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",(0,e.jsx)("a",{href:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),xe=(n,t=100,o=0)=>Math.max(Math.min(n,t),o),we=W.css`
24
24
  position: absolute;
25
25
  bottom: 0.875rem;
26
26
  left: var(--spacing-sm);
@@ -32,27 +32,27 @@ var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDes
32
32
  background-color: var(--gray-100);
33
33
  border: 1px solid var(--gray-300);
34
34
  border-radius: var(--rounded-full);
35
- `,Re=B.css`
36
- ${ie}
35
+ `,Je=W.css`
36
+ ${we}
37
37
  left: auto;
38
38
  right: var(--spacing-sm);
39
- `,Ie=({score:e,setValue:n,cap:r=100,...s})=>{let i=o=>{let l=o==="increment"?e+10:e-10;l<0&&(l=0),l>r&&(l=r),n(l)};return(0,t.jsx)("div",{css:{position:"relative"},...s},(0,t.jsx)(g.Input,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:r,value:e,onChange:o=>n(oe(Number(o.currentTarget.value)||0,r)),css:{textAlign:"center",boxSizing:"border-box"}}),(0,t.jsx)("button",{type:"button",title:"Reduce enrichment count",onClick:()=>i("decrement"),disabled:e===0,className:"scoreCounterButton",css:ie},(0,t.jsx)(g.Icon,{icon:S.CgMathMinus,iconColor:"gray",size:"1.5rem"})),(0,t.jsx)("button",{type:"button",title:"Increase enrichment count",onClick:()=>i("increment"),className:"scoreCounterButton",css:Re},(0,t.jsx)(g.Icon,{icon:S.CgMathPlus,iconColor:"gray",size:"1.5rem"})))},Me=({list:e,setList:n,dimIndex:r})=>{let s=o=>{n((0,K.default)(e,l=>{l.splice(o,1)}))},i=(o,l)=>{var d;let a=(d=r[`${e[o].cat}_${e[o].key}`])==null?void 0:d.cap;n((0,K.default)(e,c=>{c[o].str=oe(Number(l)||0,a)}))};return(0,t.jsx)(w.default.Fragment,null,e.map((o,l)=>{let a=r[(0,A.getEnrichmentVectorKey)(o.cat,o.key)];if(!!a)return(0,t.jsx)("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",key:`${o.cat}-${o.key}`},(0,t.jsx)("span",{css:{fontWeight:"var(--fw-bold)",color:a?void 0:"var(--brand-secondary-5)"}},a?a.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`),(0,t.jsx)("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"}},(0,t.jsx)(g.Input,{type:"text",min:0,max:a.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:d=>i(l,d.currentTarget.value)})),(0,t.jsx)("button",{type:"button",title:"Delete enrichment",onClick:()=>s(l),css:{border:0}},(0,t.jsx)(g.Icon,{icon:S.CgCloseO,iconColor:"red",size:"1.5rem"})))}))};var le=require("react");var v=require("@uniformdev/design-system"),J=P(require("immer")),W=require("react-icons/cg");var Y=require("@emotion/react"),X="6rem",ae=Y.css`
39
+ `,Qe=({score:n,setValue:t,cap:o=100,...l})=>{let i=r=>{let s=r==="increment"?n+10:n-10;s<0&&(s=0),s>o&&(s=o),t(s)};return(0,e.jsx)("div",{css:{position:"relative"},...l},(0,e.jsx)(h.Input,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:o,value:n,onChange:r=>t(xe(Number(r.currentTarget.value)||0,o)),css:{textAlign:"center",boxSizing:"border-box"}}),(0,e.jsx)("button",{type:"button",title:"Reduce enrichment count",onClick:()=>i("decrement"),disabled:n===0,className:"scoreCounterButton",css:we},(0,e.jsx)(h.Icon,{icon:P.CgMathMinus,iconColor:"gray",size:"1.5rem"})),(0,e.jsx)("button",{type:"button",title:"Increase enrichment count",onClick:()=>i("increment"),className:"scoreCounterButton",css:Je},(0,e.jsx)(h.Icon,{icon:P.CgMathPlus,iconColor:"gray",size:"1.5rem"})))},Ze=({list:n,setList:t,dimIndex:o})=>{let l=r=>{t((0,ae.default)(n,s=>{s.splice(r,1)}))},i=(r,s)=>{var m;let a=(m=o[`${n[r].cat}_${n[r].key}`])==null?void 0:m.cap;t((0,ae.default)(n,c=>{c[r].str=xe(Number(s)||0,a)}))};return(0,e.jsx)(M.default.Fragment,null,n.map((r,s)=>{let a=o[(0,H.getEnrichmentVectorKey)(r.cat,r.key)];if(!!a)return(0,e.jsx)("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",key:`${r.cat}-${r.key}`},(0,e.jsx)("span",{css:{fontWeight:"var(--fw-bold)",color:a?void 0:"var(--brand-secondary-5)"}},a?a.displayName:`Enrichment '${r.cat}_${r.key}' is unknown`),(0,e.jsx)("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"}},(0,e.jsx)(h.Input,{type:"text",min:0,max:a.cap||100,title:"score",value:r.str,css:{textAlign:"center",width:"100px"},onChange:m=>i(s,m.currentTarget.value)})),(0,e.jsx)("button",{type:"button",title:"Delete enrichment",onClick:()=>l(s),css:{border:0}},(0,e.jsx)(h.Icon,{icon:P.CgCloseO,iconColor:"red",size:"1.5rem"})))}))};var N=require("@uniformdev/design-system");var E=require("@uniformdev/design-system"),fe=k(require("immer")),ee=require("react-icons/cg");var T=require("@emotion/react"),se="6rem",Me=T.css`
40
40
  position: relative;
41
41
  padding: var(--spacing-base);
42
42
  border: 1px solid var(--gray-300);
43
43
  box-shadow: var(--shadow-base);
44
44
  background-color: white;
45
45
  border-radius: var(--rounded-base);
46
- margin-top: ${X};
46
+ margin-top: ${se};
47
47
  display: flex;
48
48
  &:before {
49
49
  content: '';
50
50
  display: block;
51
51
  width: 1px;
52
- height: ${X};
52
+ height: ${se};
53
53
  background-color: var(--gray-300);
54
54
  position: absolute;
55
- top: -${X};
55
+ top: -${se};
56
56
  left: var(--spacing-lg);
57
57
  }
58
58
  &:first-of-type {
@@ -61,9 +61,18 @@ var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDes
61
61
  display: none;
62
62
  }
63
63
  }
64
- `,se=Y.css`
64
+ `,Se=T.css`
65
65
  display: grid;
66
- gap: var(--spacing-base);
66
+ gap: var(--spacing-xs);
67
67
  flex-grow: 1;
68
68
  margin-right: var(--spacing-base);
69
- `;var ce=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],Se=({value:e,setValue:n,contextConfig:r,onMenuOpen:s,onMenuClose:i,displayTitle:o=!0})=>{let{loading:l,result:a,error:d}=T(r),c=e||{crit:[]},I=m=>{n({...c,op:m==="&"?void 0:m})},u=()=>{n({...c,crit:[...c.crit,{l:"",op:">",r:50}]})},C=(m,p)=>{n((0,J.default)(c,R=>{R.crit[p]=m}))},x=m=>{let p=(0,J.default)(c,M=>{M.crit.splice(m,1)}),R=p.crit.length===0?null:p;n(R)};return d?(0,t.jsx)(v.Callout,{type:"danger"},d):l||a===null?(0,t.jsx)(v.LoadingIndicator,null):(0,t.jsx)("fieldset",{className:"personalization-criteria"},o?(0,t.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,c.crit.length?c.crit.map((m,p)=>{var f,b;let R=((f=m.l)==null?void 0:f.length)>0,M=m.op!=="+"&&m.op!=="-";return(0,t.jsx)("div",{css:ae,key:p},(0,t.jsx)("div",{css:se,style:{gridTemplateColumns:`repeat(${M?3:2}, minmax(0, 1fr))`},className:"criteriaItemInner"},(0,t.jsx)(v.InputSelect,{name:`lhs-${p}`,label:"Match Dimension",showLabel:!1,value:m.l,options:[{label:"Select",value:""},...a.dimensions.map(h=>({label:h.displayName,value:h.dim}))],onChange:h=>{C({...m,l:h.target.value},p)}}),(0,t.jsx)("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",justifyContent:"space-around"}},(0,t.jsx)("span",{css:{color:"var(--gray-700)"}},"score"),(0,t.jsx)(v.InputSelect,{css:{width:"100%"},name:`op-${p}`,label:"Operator",showLabel:!1,value:m.op,options:ce.map(h=>({label:h.name,value:h.value})),onChange:h=>{let N=h.target.value;C(N==="+"||N==="-"?{...m,op:N,r:void 0,rDim:void 0}:{...m,op:h.target.value},p)},disabled:!R})),M?(0,t.jsx)(Ne,{critHasLhs:R,currentCriteria:m,dimensions:a,update:C,index:p,onMenuOpen:s,onMenuClose:i}):null),(0,t.jsx)("button",{type:"button",onClick:()=>x(p),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,t.jsx)(v.Icon,{icon:W.CgCloseO,iconColor:"red",size:"1.5rem"})),p>0?(0,t.jsx)("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},(0,t.jsx)(v.InputInlineSelect,{disabled:p>1,value:(b=c.op)!=null?b:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:h=>{I(h.value)}})):null)}):(0,t.jsx)(v.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.')),a.dimensions.length===0?(0,t.jsx)(v.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"You do not have any dimensions configured. Create your first"," ",(0,t.jsx)("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):(0,t.jsx)("button",{type:"button",className:"add-more",onClick:u,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,t.jsx)("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},(0,t.jsx)(v.Icon,{icon:W.CgMathPlus,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Ne({update:e,currentCriteria:n,index:r,dimensions:s,critHasLhs:i,onMenuOpen:o,onMenuClose:l}){var c,I;let[a,d]=(0,le.useState)(n.r&&O(n.r)!==null?n.r.toString(10):"");return(0,t.jsx)(v.InputComboBox,{name:`rhs-${r}`,className:"input-combobox",inputValue:a,value:{label:n.rDim?(I=(c=s.dimIndex[n.rDim])==null?void 0:c.displayName)!=null?I:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:C})=>({...u,background:C?"transparent":void 0,fontSize:C?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var C;u&&e({...n,rDim:(C=u.value)==null?void 0:C.toString(),r:void 0},r)},onInputChange:(u,C)=>{let x=O(u);C.action==="input-change"||C.action==="set-value"?(d(u),(x||u==="")&&e({...n,r:u,rDim:void 0},r)):!x&&!O(C.prevInputValue)&&d(u)},isDisabled:!i,noOptionsMessage:({inputValue:u})=>O(u)?`${u}`:"No options match",onMenuOpen:o,onMenuClose:l})}function O(e){return/^\d+$/.test(e.toString(10))}var ue=P(require("react"));var G=require("react"),H=require("@uniformdev/context/api");function L({apiHost:e,apiKey:n,projectId:r}){let[s,i]=(0,G.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,G.useEffect)(()=>{if(!r||!n||!e){i({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{i({notConfigured:!1,loading:!0,error:null,result:null});try{let a=await new H.ManifestClient({projectId:r,apiKey:n,apiHost:e}).get({preview:!0});i({notConfigured:!1,loading:!1,error:null,result:a})}catch(l){let a;l instanceof H.ApiClientError?(l.statusCode===403&&(a=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),a=l.message):a=l.toString(),i({notConfigured:!1,loading:!1,error:a,result:null});return}})()},[e,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}var de=require("@uniformdev/design-system");function Pe({children:e,versionMap:n,contextConfig:r}){let{loading:s,result:i}=L(r);if(s)return(0,t.jsx)(de.LoadingIndicator,null);if(i){let o=n[i.project.ui_version];if(o)return(0,t.jsx)(o,null)}return(0,t.jsx)(ue.default.Fragment,null,e)}var k=P(require("react"));var me=require("@uniformdev/design-system"),_=(0,k.createContext)(null),Ve=({loadingComponent:e,errorComponent:n,contextConfig:r,children:s})=>{let i=L(r),o=T(r);return i.error||i.notConfigured?n?(0,t.jsx)(n,{contextConfig:r,result:i}):(0,t.jsx)(k.default.Fragment,null,"ErrorComponent is not configured"):o.error||o.notConfigured?n?(0,t.jsx)(n,{contextConfig:r,result:o}):(0,t.jsx)(k.default.Fragment,null,"ErrorComponent is not configured"):i.loading||o.loading?e?(0,t.jsx)(e,null):(0,t.jsx)(me.LoadingIndicator,null):(0,t.jsx)(_.Provider,{value:{manifest:i.result,dimensions:o.result,contextConfig:r}},s)};function Le(){let e=(0,k.useContext)(_);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function $e(){let e=(0,k.useContext)(_);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function ze(){let e=(0,k.useContext)(_);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}var pe=require("uuid"),fe=require("@uniformdev/context/api"),Q=async e=>{if(!e)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!e.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!e.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!(0,pe.validate)(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new fe.ManifestClient({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};var q=require("react");var Ue=e=>{let[n,r]=(0,q.useState)({validating:!1,error:void 0}),{apiKey:s,apiHost:i,projectId:o}=e||{};return(0,q.useEffect)(()=>{if(!s||!i)return;(async()=>{r({validating:!0,error:void 0});let{error:a,result:d}=await Q({apiHost:i,apiKey:s,projectId:o});r(a?{error:a,validating:!1}:{error:void 0,validating:!1,result:d})})()},[i,s,o]),{validating:n.validating,error:n.error,result:n.result}};function Ae(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Be(e){return e.crit!==void 0}D(y,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,EditLink,EnrichmentTag,PersonalizationCriteria,ProjectUIVersion,addEnrichmentLink,equality,isEnrichmentTagData,isPersonalizationCriteriaData,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});
69
+ `,q=T.css`
70
+ width: 100%;
71
+ display: flex;
72
+ align-items: stretch;
73
+ `,_=T.css`
74
+ height: 100%;
75
+ width: 100%;
76
+ `,yn=T.css`
77
+ height: 100%;
78
+ `;var Re=require("@uniformdev/design-system");function F({op:n}){return(0,e.jsx)("div",{css:{background:"var(--gray-700)",color:"white",borderRadius:"100%",width:"30px",height:"30px",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"24px"}},n)}var Be=n=>{var m,c;let{data:t,getStyles:o,isDisabled:l,innerRef:i,innerProps:r}=n,[s,a]=(c=(m=t.label)==null?void 0:m.split(":"))!=null?c:[];return(0,e.jsx)("div",{css:{...o("option",n),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:i,"aria-disabled":l,...r},a?(0,e.jsx)(F,{op:s}):(0,e.jsx)("div",{css:{width:"20px",height:"20px"}}),(0,e.jsx)("div",null,a!=null?a:s))};var Ee=n=>{let{data:t,getStyles:o}=n;return(0,e.jsx)("div",{css:{...o("singleValue",n),width:"max-content"}},t.label.length===1?(0,e.jsx)(F,{op:t.label}):t.label)};var le=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function me({onChange:n,value:t,...o}){var l,i;return(0,e.jsx)(Re.InputComboBox,{...o,value:{label:(i=(l=le.find(r=>r.value===t))==null?void 0:l.name)!=null?i:t,value:t},options:le.map(r=>({label:r.description?`${r.name}:${r.description}`:r.name,value:r.value})),styles:{...o.styles,valueContainer:(r,s)=>{var a,m;return{...r,padding:"var(--spacing-sm)",...(m=(a=o.styles)==null?void 0:a.valueContainer)==null?void 0:m.call(a,r,s)}},menu:(r,s)=>{var a,m;return{...r,width:"max-content",...(m=(a=o.styles)==null?void 0:a.menu)==null?void 0:m.call(a,r,s)}},control:(r,s)=>{var a,m;return{...r,border:0,...(m=(a=o.styles)==null?void 0:a.control)==null?void 0:m.call(a,r,s)}},indicatorSeparator:(r,s)=>{var a,m;return{...r,display:"none",...(m=(a=o.styles)==null?void 0:a.indicatorSeparator)==null?void 0:m.call(a,r,s)}}},onChange:r=>{r&&n(r.value)},components:{SingleValue:Ee,Option:Be,...o.components}})}var Oe=require("@uniformdev/design-system");var Pe=require("@uniformdev/design-system");function ue(n){return{label:n.displayName,value:n.dim,isDisabled:!1}}function K(n){if(!n)return"unavailable";let[t]=n.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function Y(n){let t=[],o="";for(let l of n){let[i]=l.displayName.split(":");o!==i&&(t.push({label:i,options:[]}),o=i),t[t.length-1].options.push(ue(l))}return t}var X=n=>{var i;let{data:t,getStyles:o,className:l}=n;return(0,e.jsx)("div",{css:{...o("groupHeading",n),textTransform:"none",fontSize:"var(--font-size-sm)"},className:l},(0,e.jsx)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"}},(0,e.jsx)(Pe.Icon,{icon:K((i=t.label)!=null?i:""),iconColor:"currentColor",size:16}),(0,e.jsx)("span",null,t.label)))};function J({message:n}){return n?(0,e.jsx)("div",{css:{position:"absolute",background:"white",borderRadius:"3px",fontSize:"0.8rem",color:"var(--brand-primary-2)",bottom:"calc(var(--spacing-xs) * -1)"}},n):null}var Q=n=>{var u,C;let{data:t,getStyles:o,cx:l,isDisabled:i,isFocused:r,isSelected:s,className:a,innerRef:m,innerProps:c}=n,[,b]=(C=(u=t.label)==null?void 0:u.split(":"))!=null?C:[];return(0,e.jsx)("div",{css:o("option",n),className:l({option:!0,"option--is-disabled":i,"option--is-focused":r,"option--is-selected":s},a),ref:m,"aria-disabled":i,...c},(0,e.jsx)("div",{css:{color:"var(--gray-700)"}},b!=null?b:t.label))};var ke=require("@uniformdev/design-system");function pe({displayName:n}){let[t,o]=n.split(":");return(0,e.jsx)("div",{css:{whiteSpace:"normal",overflow:"hidden"}},o?(0,e.jsx)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"}},t?(0,e.jsx)(ke.Icon,{icon:K(t),iconColor:"currentColor",size:16}):null,(0,e.jsx)("span",null,t)):null,(0,e.jsx)("div",{css:{color:"var(--gray-700)"}},o!=null?o:t))}var Z=n=>{let{data:t,getStyles:o}=n;return(0,e.jsx)("div",{css:o("singleValue",n)},(0,e.jsx)(pe,{displayName:t.label}))};function ce({onChange:n,value:t,dimensions:o,errorMessage:l,...i}){return(0,e.jsx)(p.Fragment,null,(0,e.jsx)(Oe.InputComboBox,{...i,value:t?ue(t):void 0,options:Y(o),styles:{...i.styles,valueContainer:(r,s)=>{var a,m;return{...r,padding:"var(--spacing-sm)",...(m=(a=i.styles)==null?void 0:a.valueContainer)==null?void 0:m.call(a,r,s)}}},onChange:r=>{r&&n(o.find(s=>s.dim===r.value))},components:{Option:Q,SingleValue:Z,GroupHeading:X,...i.components}}),(0,e.jsx)(J,{message:l}))}var Te=require("@uniformdev/design-system"),Ve=require("react");function de({onChange:n,criteriaMatch:t,dimensions:o,errorMessage:l,...i}){var c,b;let[r,s]=(0,Ve.useState)(typeof t.r!="undefined"&&j(t.r)!==null?t.r.toString(10):""),a=t.rDim,m=t.rDim?o.dimIndex[t.rDim]:void 0;return(0,e.jsx)(p.Fragment,null,(0,e.jsx)(Te.InputComboBox,{...i,inputValue:r,menuShouldScrollIntoView:!0,value:{label:(c=m==null?void 0:m.displayName)!=null?c:a&&!m?`${t.rDim} (unknown)`:"",value:(b=t.rDim)!=null?b:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...Y(o.dimensions)],styles:{...i.styles,valueContainer:(u,C)=>{var f,x;return{...u,padding:"var(--spacing-sm)",...(x=(f=i.styles)==null?void 0:f.valueContainer)==null?void 0:x.call(f,u,C)}},option:(u,C)=>{var f,x;return{fontSize:C.isDisabled?"0.8rem":void 0,...(x=(f=i.styles)==null?void 0:f.option)==null?void 0:x.call(f,u,C)}}},onChange:u=>{var C;u&&(n({...t,rDim:(C=u.value)==null?void 0:C.toString(),r:void 0}),s(""))},onInputChange:(u,C)=>{let f=j(u);C.action==="input-change"||C.action==="set-value"?(s(u),(f||u==="")&&n({...t,r:u||void 0,rDim:void 0})):!f&&!j(C.prevInputValue)&&(!u&&t.r?s(t.r.toString()):s(u))},components:{...i.components,Option:Q,SingleValue:Z,GroupHeading:X},noOptionsMessage:({inputValue:u})=>j(u)?(0,e.jsx)(p.Fragment,null,(0,e.jsx)("div",null,"Score: ",u),(0,e.jsx)("small",null,"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension.")):(0,e.jsx)(p.Fragment,null,(0,e.jsx)("div",null,"No dimensions match your search \u201C",u,"\u201D"),(0,e.jsx)("small",null,"If you want to match a literal score, enter a numeric value."))}),(0,e.jsx)(J,{message:l}))}function j(n){return/^\d+$/.test(n.toString(10))}var ge=({value:n,setValue:t,dimensions:o,onMenuOpen:l,onMenuClose:i,onAddCriteria:r,onRemoveCriteria:s,displayTitle:a=!0,components:m,errors:c={}})=>{let b=n||{crit:[]},u=d=>{t({...b,op:d==="&"?void 0:d})},C=()=>{let d={...b,crit:[...b.crit,{l:"",op:">",r:0}]};t(d),r==null||r(d)},f=(d,v)=>{t((0,fe.default)(b,S=>{S.crit[v]=d}))},x=d=>{let v=(0,fe.default)(b,g=>{g.crit.splice(d,1)}),S=v.crit.length===0?null:v;t(S),s==null||s(S)};return(0,e.jsx)("fieldset",{className:"personalization-criteria"},a?m!=null&&m.Title?(0,e.jsx)(m.Title,null):(0,e.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,b.crit.length?b.crit.map((d,v)=>{var D,$,V,L;let S=((D=d.l)==null?void 0:D.length)>0,g=d.op!=="+"&&d.op!=="-";return(0,e.jsx)("div",{css:Me,key:v},(0,e.jsx)("div",{css:Se,style:{gridTemplateColumns:`minmax(0, 1fr) ${g?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"}`},className:"criteriaItemInner"},(0,e.jsx)("div",{css:q},(0,e.jsx)(ce,{errorMessage:($=c.lhs)==null?void 0:$[v],css:_,styles:{control:y=>({...y,height:"100%"})},dimensions:o.dimensions,onChange:y=>{f({...d,l:y.dim},v)},value:o.dimIndex[d.l]})),(0,e.jsx)("div",{css:q},(0,e.jsx)(me,{name:`op-${v}`,css:_,styles:{control:y=>({...y,height:"100%"})},value:d.op,onChange:y=>{f(y==="+"||y==="-"?{...d,op:y,r:void 0,rDim:void 0}:{...d,op:y},v)},onMenuOpen:l,onMenuClose:i})),g?(0,e.jsx)("div",{css:q},(0,e.jsx)(de,{errorMessage:(V=c.rhs)==null?void 0:V[v],css:_,styles:{control:y=>({...y,height:"100%"})},criteriaMatch:d,onChange:y=>{f(y,v)},isDisabled:!S,dimensions:o,onMenuOpen:l,onMenuClose:i})):null),(0,e.jsx)("button",{type:"button",onClick:()=>x(v),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,e.jsx)(E.Icon,{icon:ee.CgCloseO,iconColor:"red",size:"1.5rem"})),v>0?(0,e.jsx)("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},(0,e.jsx)(E.InputInlineSelect,{disabled:v>1,value:(L=b.op)!=null?L:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:y=>{u(y.value)}})):null)}):(0,e.jsx)(E.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,e.jsx)("p",null,'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.')),o.dimensions.length===0?m!=null&&m.NoDimensionsDefined?(0,e.jsx)(m.NoDimensionsDefined,null):(0,e.jsx)(E.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,e.jsx)("p",null,"You do not have any dimensions configured.")):(0,e.jsx)("button",{type:"button",className:"add-more",onClick:C,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,e.jsx)("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},(0,e.jsx)(E.Icon,{icon:ee.CgMathPlus,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};var en=({contextConfig:n,...t})=>{let{loading:o,result:l,error:i}=R(n);return i?(0,e.jsx)(N.Callout,{type:"danger"},i):o||l===null?(0,e.jsx)(N.LoadingIndicator,null):(0,e.jsx)(ge,{...t,dimensions:l,components:{NoDimensionsDefined:()=>(0,e.jsx)(N.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,e.jsx)("p",null,"You do not have any dimensions configured. Create your first"," ",(0,e.jsx)("a",{href:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension")))}})};var Ne=k(require("react"));var ne=require("react"),te=require("@uniformdev/context/api");function z({apiHost:n,apiKey:t,projectId:o}){let[l,i]=(0,ne.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,ne.useEffect)(()=>{if(!o||!t||!n){i({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{i({notConfigured:!1,loading:!0,error:null,result:null});try{let a=await new te.ManifestClient({projectId:o,apiKey:t,apiHost:n}).get({preview:!0});i({notConfigured:!1,loading:!1,error:null,result:a})}catch(s){let a;s instanceof te.ApiClientError?(s.statusCode===403&&(a=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),a=s.message):a=s.toString(),i({notConfigured:!1,loading:!1,error:a,result:null});return}})()},[n,t,o]),{result:l.result,error:l.error,loading:l.loading,notConfigured:l.notConfigured}}var ze=require("@uniformdev/design-system");function nn({children:n,versionMap:t,contextConfig:o}){let{loading:l,result:i}=z(o);if(l)return(0,e.jsx)(ze.LoadingIndicator,null);if(i){let r=t[i.project.ui_version];if(r)return(0,e.jsx)(r,null)}return(0,e.jsx)(Ne.default.Fragment,null,n)}var B=k(require("react"));var $e=require("@uniformdev/design-system"),oe=(0,B.createContext)(null),tn=({loadingComponent:n,errorComponent:t,contextConfig:o,children:l})=>{let i=z(o),r=R(o);return i.error||i.notConfigured?t?(0,e.jsx)(t,{contextConfig:o,result:i}):(0,e.jsx)(B.default.Fragment,null,"ErrorComponent is not configured"):r.error||r.notConfigured?t?(0,e.jsx)(t,{contextConfig:o,result:r}):(0,e.jsx)(B.default.Fragment,null,"ErrorComponent is not configured"):i.loading||r.loading?n?(0,e.jsx)(n,null):(0,e.jsx)($e.LoadingIndicator,null):(0,e.jsx)(oe.Provider,{value:{manifest:i.result,dimensions:r.result,contextConfig:o}},l)};function on(){let n=(0,B.useContext)(oe);if(!(n!=null&&n.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return n.contextConfig}function rn(){let n=(0,B.useContext)(oe);if(!(n!=null&&n.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return n.manifest}function an(){let n=(0,B.useContext)(oe);if(!(n!=null&&n.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return n.dimensions}var Le=require("uuid"),Ue=require("@uniformdev/context/api"),Ce=async n=>{if(!n)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!n.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!n.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!(0,Le.validate)(n.apiKey)&&!n.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new Ue.ManifestClient({projectId:n.projectId,apiKey:n.apiKey,apiHost:n.apiHost});try{let o=await t.get({preview:!0});return{valid:!0,result:o}}catch(o){return{valid:!1,error:o}}};var re=require("react");var sn=n=>{let[t,o]=(0,re.useState)({validating:!1,error:void 0}),{apiKey:l,apiHost:i,projectId:r}=n||{};return(0,re.useEffect)(()=>{if(!l||!i)return;(async()=>{o({validating:!0,error:void 0});let{error:a,result:m}=await Ce({apiHost:i,apiKey:l,projectId:r});o(a?{error:a,validating:!1}:{error:void 0,validating:!1,result:m})})()},[i,l,r]),{validating:t.validating,error:t.error,result:t.result}};function ln(n){return Array.isArray(n)&&n.length>0&&n[0].cat!==void 0}function mn(n){return n.crit!==void 0}w(I,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,CriteriaMatchMenu,CriteriaOperatorMenu,DimensionMenu,DimensionValue,EditLink,EnrichmentTag,PersonalizationCriteria,PersonalizationCriteriaStatic,ProjectUIVersion,addEnrichmentLink,contextCriteriaMenuOperators,isEnrichmentTagData,isPersonalizationCriteriaData,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}from"@uniformdev/design-system";import{CgChevronRight as oe}from"react-icons/cg";import{css as te}from"@emotion/react";var z=te`
1
+ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as Ie}from"@uniformdev/design-system";import{CgChevronRight as xe}from"react-icons/cg";import{css as ye}from"@emotion/react";var Y=ye`
2
2
  display: flex;
3
3
  align-items: center;
4
4
  font-weight: var(--fw-bold);
@@ -9,7 +9,7 @@ import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}f
9
9
  &:focus {
10
10
  text-decoration-line: underline;
11
11
  }
12
- `;var U=({linkTo:t,name:n,linkText:r=`Edit ${n} Component`})=>e("a",{css:z,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:t},r,e(re,{icon:oe,iconColor:"currentColor",size:"1.5rem"}));import W,{useMemo as B,useState as T}from"react";import{useEffect as ie,useState as ae}from"react";import{DimensionClient as se,computeDimensionDisplayName as le,ApiClientError as ce}from"@uniformdev/context/api";function A(t,n,r){return t.reduce((s,a)=>{let o=n(a);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(a)]=r?r(a):a,s},{})}function k({apiHost:t,apiKey:n,projectId:r}){let[s,a]=ae({loading:!1,notConfigured:!1,error:null,result:null});return ie(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new se({projectId:r,apiKey:n,apiHost:t}).get()).dimensions.map(c=>({...c,displayName:le(c)})),d={dimensions:i,dimIndex:A(i,c=>c.dim,c=>c)};a({notConfigured:!1,loading:!1,error:null,result:d})}catch(l){let i;l instanceof ce?i=l.message:i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{getEnrichmentVectorKey as S}from"@uniformdev/context";import{Input as G,Button as ue,InputSelect as de,Callout as N,Icon as x,LoadingIndicator as me}from"@uniformdev/design-system";import{CgMathPlus as H,CgMathMinus as pe,CgCloseO as fe}from"react-icons/cg";import O from"immer";import{css as P}from"@emotion/react";var ge=P`
12
+ `;var X=({linkTo:n,name:t,linkText:o=`Edit ${t} Component`})=>e("a",{css:Y,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:n},o,e(Ie,{icon:xe,iconColor:"currentColor",size:"1.5rem"}));import j,{useMemo as Q,useState as G}from"react";import{useEffect as we,useState as Me}from"react";import{DimensionClient as Se,computeDimensionDisplayName as Be,ApiClientError as Ee}from"@uniformdev/context/api";function J(n,t,o){return n.reduce((l,a)=>{let r=t(a);if(typeof r=="undefined"||r===null)throw new Error("Objectify key selector returned undefined or null.");return l[t(a)]=o?o(a):a,l},{})}function x({apiHost:n,apiKey:t,projectId:o}){let[l,a]=Me({loading:!1,notConfigured:!1,error:null,result:null});return we(()=>{if(!o||!t||!n){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new Se({projectId:o,apiKey:t,apiHost:n}).get()).dimensions.map(c=>({...c,displayName:Be(c)})),m={dimensions:i,dimIndex:J(i,c=>c.dim,c=>c)};a({notConfigured:!1,loading:!1,error:null,result:m})}catch(s){let i;s instanceof Ee?i=s.message:i=s.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[n,t,o]),{result:l.result,error:l.error,loading:l.loading,notConfigured:l.notConfigured}}import{getEnrichmentVectorKey as H}from"@uniformdev/context";import{Input as ee,Button as Re,InputSelect as Pe,Callout as W,Icon as E,LoadingIndicator as ke}from"@uniformdev/design-system";import{CgMathPlus as ne,CgMathMinus as Oe,CgCloseO as Te}from"react-icons/cg";import Z from"immer";import{css as q}from"@emotion/react";var Ve=q`
13
13
  flex: 2;
14
14
  display: flex;
15
15
  width: 50%;
@@ -20,7 +20,7 @@ import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}f
20
20
  &:focus {
21
21
  text-decoration-line: underline;
22
22
  }
23
- `,st=({value:t,setValue:n,contextConfig:r,displayTitle:s=!0})=>{let{loading:a,result:o,error:l}=k(r),i=B(()=>{if(o)return o.dimensions.filter(f=>f.category==="ENR")},[o]),d=B(()=>{if(!t)return i;if(i)return i.filter(f=>!t.some(v=>S(v.cat,v.key)===f.dim))},[i,t]),[c,D]=T(""),[u,g]=T(50),[b,m]=T(!1),p=i==null?void 0:i.find(f=>f.dim===c),y=()=>{let[f,v]=c.split("_");w([...t!=null?t:[],{cat:f,key:v,str:u}]),D(""),g(50),m(!1)},w=f=>{let v=[];o?v=f.filter(E=>{let ee=o.dimIndex[S(E.cat,E.key)];return Boolean(ee)}):v=f;let C=v.length===0?null:v;n(C)};return l?e(N,{type:"danger"},l):a||o===null?e(me,null):e("fieldset",{className:"enrichment-tag"},s?e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,i!=null&&i.length?!b&&!t?e(N,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Click"," ",e("a",{onClick:()=>m(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):e(W.Fragment,null,o&&e(be,{list:t!=null?t:[],setList:w,dimIndex:o.dimIndex}),b&&d&&d.length>0?e("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},e("div",{css:{flexGrow:1}},e(de,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...d.map(f=>({label:f.displayName,value:f.dim}))],onChange:f=>D(f.currentTarget.value)})),e(he,{score:u,setValue:g,cap:p?p.cap:100,css:{flexBasis:"9rem"}}),e(ue,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:y,disabled:!c},"Add")):null,e("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!b&&d&&d.length>0&&t?e("button",{type:"button",className:"add-more",onClick:()=>m(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(x,{icon:H,iconColor:"currentColor",size:"1.25rem"})),"Add More"):e("a",{css:ge,title:"none",href:"#"}),e(U,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`}))):e(Ce,{contextConfig:r}))},Ce=({contextConfig:t})=>e(N,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",e("a",{href:`${t.apiHost}/projects/${encodeURIComponent(t.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),_=(t,n=100,r=0)=>Math.max(Math.min(t,n),r),q=P`
23
+ `,Rn=({value:n,setValue:t,contextConfig:o,displayTitle:l=!0})=>{let{loading:a,result:r,error:s}=x(o),i=Q(()=>{if(r)return r.dimensions.filter(g=>g.category==="ENR")},[r]),m=Q(()=>{if(!n)return i;if(i)return i.filter(g=>!n.some(y=>H(y.cat,y.key)===g.dim))},[i,n]),[c,b]=G(""),[u,C]=G(50),[f,D]=G(!1),d=i==null?void 0:i.find(g=>g.dim===c),v=()=>{let[g,y]=c.split("_");I([...n!=null?n:[],{cat:g,key:y,str:u}]),b(""),C(50),D(!1)},I=g=>{let y=[];r?y=g.filter(w=>{let B=r.dimIndex[H(w.cat,w.key)];return Boolean(B)}):y=g;let S=y.length===0?null:y;t(S)};return s?e(W,{type:"danger"},s):a||r===null?e(ke,null):e("fieldset",{className:"enrichment-tag"},l?e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,i!=null&&i.length?!f&&!n?e(W,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Click"," ",e("a",{onClick:()=>D(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):e(j.Fragment,null,r&&e(Le,{list:n!=null?n:[],setList:I,dimIndex:r.dimIndex}),f&&m&&m.length>0?e("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},e("div",{css:{flexGrow:1}},e(Pe,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...m.map(g=>({label:g.displayName,value:g.dim}))],onChange:g=>b(g.currentTarget.value)})),e($e,{score:u,setValue:C,cap:d?d.cap:100,css:{flexBasis:"9rem"}}),e(Re,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:v,disabled:!c},"Add")):null,e("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!f&&m&&m.length>0&&n?e("button",{type:"button",className:"add-more",onClick:()=>D(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(E,{icon:ne,iconColor:"currentColor",size:"1.25rem"})),"Add More"):e("a",{css:Ve,title:"none",href:"#"}),e(X,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${o.apiHost}/projects/${encodeURIComponent(o.projectId)}/personalization/enrichments`}))):e(Ne,{contextConfig:o}))},Ne=({contextConfig:n})=>e(W,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",e("a",{href:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),te=(n,t=100,o=0)=>Math.max(Math.min(n,t),o),oe=q`
24
24
  position: absolute;
25
25
  bottom: 0.875rem;
26
26
  left: var(--spacing-sm);
@@ -32,27 +32,27 @@ import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}f
32
32
  background-color: var(--gray-100);
33
33
  border: 1px solid var(--gray-300);
34
34
  border-radius: var(--rounded-full);
35
- `,ve=P`
36
- ${q}
35
+ `,ze=q`
36
+ ${oe}
37
37
  left: auto;
38
38
  right: var(--spacing-sm);
39
- `,he=({score:t,setValue:n,cap:r=100,...s})=>{let a=o=>{let l=o==="increment"?t+10:t-10;l<0&&(l=0),l>r&&(l=r),n(l)};return e("div",{css:{position:"relative"},...s},e(G,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:r,value:t,onChange:o=>n(_(Number(o.currentTarget.value)||0,r)),css:{textAlign:"center",boxSizing:"border-box"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>a("decrement"),disabled:t===0,className:"scoreCounterButton",css:q},e(x,{icon:pe,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Increase enrichment count",onClick:()=>a("increment"),className:"scoreCounterButton",css:ve},e(x,{icon:H,iconColor:"gray",size:"1.5rem"})))},be=({list:t,setList:n,dimIndex:r})=>{let s=o=>{n(O(t,l=>{l.splice(o,1)}))},a=(o,l)=>{var d;let i=(d=r[`${t[o].cat}_${t[o].key}`])==null?void 0:d.cap;n(O(t,c=>{c[o].str=_(Number(l)||0,i)}))};return e(W.Fragment,null,t.map((o,l)=>{let i=r[S(o.cat,o.key)];if(!!i)return e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",key:`${o.cat}-${o.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"}},i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`),e("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"}},e(G,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:d=>a(l,d.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>s(l),css:{border:0}},e(x,{icon:fe,iconColor:"red",size:"1.5rem"})))}))};import{useState as De}from"react";import{LoadingIndicator as we,Callout as L,InputSelect as Y,InputComboBox as Ee,InputInlineSelect as ke,Icon as J}from"@uniformdev/design-system";import Q from"immer";import{CgCloseO as xe,CgMathPlus as Re}from"react-icons/cg";import{css as F}from"@emotion/react";var V="6rem",K=F`
39
+ `,$e=({score:n,setValue:t,cap:o=100,...l})=>{let a=r=>{let s=r==="increment"?n+10:n-10;s<0&&(s=0),s>o&&(s=o),t(s)};return e("div",{css:{position:"relative"},...l},e(ee,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:o,value:n,onChange:r=>t(te(Number(r.currentTarget.value)||0,o)),css:{textAlign:"center",boxSizing:"border-box"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>a("decrement"),disabled:n===0,className:"scoreCounterButton",css:oe},e(E,{icon:Oe,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Increase enrichment count",onClick:()=>a("increment"),className:"scoreCounterButton",css:ze},e(E,{icon:ne,iconColor:"gray",size:"1.5rem"})))},Le=({list:n,setList:t,dimIndex:o})=>{let l=r=>{t(Z(n,s=>{s.splice(r,1)}))},a=(r,s)=>{var m;let i=(m=o[`${n[r].cat}_${n[r].key}`])==null?void 0:m.cap;t(Z(n,c=>{c[r].str=te(Number(s)||0,i)}))};return e(j.Fragment,null,n.map((r,s)=>{let i=o[H(r.cat,r.key)];if(!!i)return e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",key:`${r.cat}-${r.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"}},i?i.displayName:`Enrichment '${r.cat}_${r.key}' is unknown`),e("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"}},e(ee,{type:"text",min:0,max:i.cap||100,title:"score",value:r.str,css:{textAlign:"center",width:"100px"},onChange:m=>a(s,m.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>l(s),css:{border:0}},e(E,{icon:Te,iconColor:"red",size:"1.5rem"})))}))};import{LoadingIndicator as Xe,Callout as ve}from"@uniformdev/design-system";import{Callout as de,InputInlineSelect as Fe,Icon as fe}from"@uniformdev/design-system";import ge from"immer";import{CgCloseO as Ke,CgMathPlus as Ye}from"react-icons/cg";import{css as M}from"@emotion/react";var _="6rem",re=M`
40
40
  position: relative;
41
41
  padding: var(--spacing-base);
42
42
  border: 1px solid var(--gray-300);
43
43
  box-shadow: var(--shadow-base);
44
44
  background-color: white;
45
45
  border-radius: var(--rounded-base);
46
- margin-top: ${V};
46
+ margin-top: ${_};
47
47
  display: flex;
48
48
  &:before {
49
49
  content: '';
50
50
  display: block;
51
51
  width: 1px;
52
- height: ${V};
52
+ height: ${_};
53
53
  background-color: var(--gray-300);
54
54
  position: absolute;
55
- top: -${V};
55
+ top: -${_};
56
56
  left: var(--spacing-lg);
57
57
  }
58
58
  &:first-of-type {
@@ -61,9 +61,18 @@ import{jsx as e}from"@emotion/react";import*as h from"react";import{Icon as re}f
61
61
  display: none;
62
62
  }
63
63
  }
64
- `,X=F`
64
+ `,ie=M`
65
65
  display: grid;
66
- gap: var(--spacing-base);
66
+ gap: var(--spacing-xs);
67
67
  flex-grow: 1;
68
68
  margin-right: var(--spacing-base);
69
- `;var Ie=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],Ct=({value:t,setValue:n,contextConfig:r,onMenuOpen:s,onMenuClose:a,displayTitle:o=!0})=>{let{loading:l,result:i,error:d}=k(r),c=t||{crit:[]},D=m=>{n({...c,op:m==="&"?void 0:m})},u=()=>{n({...c,crit:[...c.crit,{l:"",op:">",r:50}]})},g=(m,p)=>{n(Q(c,y=>{y.crit[p]=m}))},b=m=>{let p=Q(c,w=>{w.crit.splice(m,1)}),y=p.crit.length===0?null:p;n(y)};return d?e(L,{type:"danger"},d):l||i===null?e(we,null):e("fieldset",{className:"personalization-criteria"},o?e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,c.crit.length?c.crit.map((m,p)=>{var f,v;let y=((f=m.l)==null?void 0:f.length)>0,w=m.op!=="+"&&m.op!=="-";return e("div",{css:K,key:p},e("div",{css:X,style:{gridTemplateColumns:`repeat(${w?3:2}, minmax(0, 1fr))`},className:"criteriaItemInner"},e(Y,{name:`lhs-${p}`,label:"Match Dimension",showLabel:!1,value:m.l,options:[{label:"Select",value:""},...i.dimensions.map(C=>({label:C.displayName,value:C.dim}))],onChange:C=>{g({...m,l:C.target.value},p)}}),e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",justifyContent:"space-around"}},e("span",{css:{color:"var(--gray-700)"}},"score"),e(Y,{css:{width:"100%"},name:`op-${p}`,label:"Operator",showLabel:!1,value:m.op,options:Ie.map(C=>({label:C.name,value:C.value})),onChange:C=>{let E=C.target.value;g(E==="+"||E==="-"?{...m,op:E,r:void 0,rDim:void 0}:{...m,op:C.target.value},p)},disabled:!y})),w?e(Me,{critHasLhs:y,currentCriteria:m,dimensions:i,update:g,index:p,onMenuOpen:s,onMenuClose:a}):null),e("button",{type:"button",onClick:()=>b(p),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(J,{icon:xe,iconColor:"red",size:"1.5rem"})),p>0?e("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(ke,{disabled:p>1,value:(v=c.op)!=null?v:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:C=>{D(C.value)}})):null)}):e(L,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.')),i.dimensions.length===0?e(L,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):e("button",{type:"button",className:"add-more",onClick:u,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(J,{icon:Re,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Me({update:t,currentCriteria:n,index:r,dimensions:s,critHasLhs:a,onMenuOpen:o,onMenuClose:l}){var c,D;let[i,d]=De(n.r&&R(n.r)!==null?n.r.toString(10):"");return e(Ee,{name:`rhs-${r}`,className:"input-combobox",inputValue:i,value:{label:n.rDim?(D=(c=s.dimIndex[n.rDim])==null?void 0:c.displayName)!=null?D:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:g})=>({...u,background:g?"transparent":void 0,fontSize:g?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var g;u&&t({...n,rDim:(g=u.value)==null?void 0:g.toString(),r:void 0},r)},onInputChange:(u,g)=>{let b=R(u);g.action==="input-change"||g.action==="set-value"?(d(u),(b||u==="")&&t({...n,r:u,rDim:void 0},r)):!b&&!R(g.prevInputValue)&&d(u)},isDisabled:!a,noOptionsMessage:({inputValue:u})=>R(u)?`${u}`:"No options match",onMenuOpen:o,onMenuClose:l})}function R(t){return/^\d+$/.test(t.toString(10))}import Ve from"react";import{useEffect as Te,useState as Se}from"react";import{ManifestClient as Ne,ApiClientError as Pe}from"@uniformdev/context/api";function I({apiHost:t,apiKey:n,projectId:r}){let[s,a]=Se({loading:!1,notConfigured:!1,error:null,result:null});return Te(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Ne({projectId:r,apiKey:n,apiHost:t}).get({preview:!0});a({notConfigured:!1,loading:!1,error:null,result:i})}catch(l){let i;l instanceof Pe?(l.statusCode===403&&(i=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=l.message):i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{LoadingIndicator as Le}from"@uniformdev/design-system";function Rt({children:t,versionMap:n,contextConfig:r}){let{loading:s,result:a}=I(r);if(s)return e(Le,null);if(a){let o=n[a.project.ui_version];if(o)return e(o,null)}return e(Ve.Fragment,null,t)}import Z,{createContext as $e,useContext as $}from"react";import{LoadingIndicator as ze}from"@uniformdev/design-system";var M=$e(null),$t=({loadingComponent:t,errorComponent:n,contextConfig:r,children:s})=>{let a=I(r),o=k(r);return a.error||a.notConfigured?n?e(n,{contextConfig:r,result:a}):e(Z.Fragment,null,"ErrorComponent is not configured"):o.error||o.notConfigured?n?e(n,{contextConfig:r,result:o}):e(Z.Fragment,null,"ErrorComponent is not configured"):a.loading||o.loading?t?e(t,null):e(ze,null):e(M.Provider,{value:{manifest:a.result,dimensions:o.result,contextConfig:r}},s)};function zt(){let t=$(M);if(!(t!=null&&t.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return t.contextConfig}function Ut(){let t=$(M);if(!(t!=null&&t.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return t.manifest}function At(){let t=$(M);if(!(t!=null&&t.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return t.dimensions}import{validate as Ue}from"uuid";import{ManifestClient as Ae}from"@uniformdev/context/api";var j=async t=>{if(!t)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!t.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!t.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Ue(t.apiKey)&&!t.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new Ae({projectId:t.projectId,apiKey:t.apiKey,apiHost:t.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};import{useEffect as Be,useState as Oe}from"react";var Ft=t=>{let[n,r]=Oe({validating:!1,error:void 0}),{apiKey:s,apiHost:a,projectId:o}=t||{};return Be(()=>{if(!s||!a)return;(async()=>{r({validating:!0,error:void 0});let{error:i,result:d}=await j({apiHost:a,apiKey:s,projectId:o});r(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:d})})()},[a,s,o]),{validating:n.validating,error:n.error,result:n.result}};function Xt(t){return Array.isArray(t)&&t.length>0&&t[0].cat!==void 0}function Yt(t){return t.crit!==void 0}export*from"@uniformdev/design-system";export{$t as ContextData,U as EditLink,st as EnrichmentTag,Ct as PersonalizationCriteria,Rt as ProjectUIVersion,ge as addEnrichmentLink,Ie as equality,Xt as isEnrichmentTagData,Yt as isPersonalizationCriteriaData,zt as useContextConfig,I as useContextData,k as useDimensions,At as useDimensionsDataContext,Ut as useManifest,Ft as useValidateContextConfig,j as validateContextConfig};
69
+ `,R=M`
70
+ width: 100%;
71
+ display: flex;
72
+ align-items: stretch;
73
+ `,P=M`
74
+ height: 100%;
75
+ width: 100%;
76
+ `,On=M`
77
+ height: 100%;
78
+ `;import{InputComboBox as Ae}from"@uniformdev/design-system";function k({op:n}){return e("div",{css:{background:"var(--gray-700)",color:"white",borderRadius:"100%",width:"30px",height:"30px",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"24px"}},n)}var ae=n=>{var m,c;let{data:t,getStyles:o,isDisabled:l,innerRef:a,innerProps:r}=n,[s,i]=(c=(m=t.label)==null?void 0:m.split(":"))!=null?c:[];return e("div",{css:{...o("option",n),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:a,"aria-disabled":l,...r},i?e(k,{op:s}):e("div",{css:{width:"20px",height:"20px"}}),e("div",null,i!=null?i:s))};var se=n=>{let{data:t,getStyles:o}=n;return e("div",{css:{...o("singleValue",n),width:"max-content"}},t.label.length===1?e(k,{op:t.label}):t.label)};var le=[{name:"=",description:"equals",value:"="},{name:"\u2260",description:"not equal",value:"!="},{name:">",description:"is greater than",value:">"},{name:"\u2265",description:"is greater than or equal to",value:">="},{name:"<",description:"is less than",value:"<"},{name:"\u2264",description:"is less than or equal to",value:"<="},{name:"has the strongest score",value:"+"},{name:"has the weakest score",value:"-"}];function me({onChange:n,value:t,...o}){var l,a;return e(Ae,{...o,value:{label:(a=(l=le.find(r=>r.value===t))==null?void 0:l.name)!=null?a:t,value:t},options:le.map(r=>({label:r.description?`${r.name}:${r.description}`:r.name,value:r.value})),styles:{...o.styles,valueContainer:(r,s)=>{var i,m;return{...r,padding:"var(--spacing-sm)",...(m=(i=o.styles)==null?void 0:i.valueContainer)==null?void 0:m.call(i,r,s)}},menu:(r,s)=>{var i,m;return{...r,width:"max-content",...(m=(i=o.styles)==null?void 0:i.menu)==null?void 0:m.call(i,r,s)}},control:(r,s)=>{var i,m;return{...r,border:0,...(m=(i=o.styles)==null?void 0:i.control)==null?void 0:m.call(i,r,s)}},indicatorSeparator:(r,s)=>{var i,m;return{...r,display:"none",...(m=(i=o.styles)==null?void 0:i.indicatorSeparator)==null?void 0:m.call(i,r,s)}}},onChange:r=>{r&&n(r.value)},components:{SingleValue:se,Option:ae,...o.components}})}import{InputComboBox as We}from"@uniformdev/design-system";import{Icon as Ge}from"@uniformdev/design-system";function F(n){return{label:n.displayName,value:n.dim,isDisabled:!1}}function O(n){if(!n)return"unavailable";let[t]=n.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function T(n){let t=[],o="";for(let l of n){let[a]=l.displayName.split(":");o!==a&&(t.push({label:a,options:[]}),o=a),t[t.length-1].options.push(F(l))}return t}var V=n=>{var a;let{data:t,getStyles:o,className:l}=n;return e("div",{css:{...o("groupHeading",n),textTransform:"none",fontSize:"var(--font-size-sm)"},className:l},e("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"}},e(Ge,{icon:O((a=t.label)!=null?a:""),iconColor:"currentColor",size:16}),e("span",null,t.label)))};function N({message:n}){return n?e("div",{css:{position:"absolute",background:"white",borderRadius:"3px",fontSize:"0.8rem",color:"var(--brand-primary-2)",bottom:"calc(var(--spacing-xs) * -1)"}},n):null}var z=n=>{var u,C;let{data:t,getStyles:o,cx:l,isDisabled:a,isFocused:r,isSelected:s,className:i,innerRef:m,innerProps:c}=n,[,b]=(C=(u=t.label)==null?void 0:u.split(":"))!=null?C:[];return e("div",{css:o("option",n),className:l({option:!0,"option--is-disabled":a,"option--is-focused":r,"option--is-selected":s},i),ref:m,"aria-disabled":a,...c},e("div",{css:{color:"var(--gray-700)"}},b!=null?b:t.label))};import{Icon as He}from"@uniformdev/design-system";function ue({displayName:n}){let[t,o]=n.split(":");return e("div",{css:{whiteSpace:"normal",overflow:"hidden"}},o?e("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"}},t?e(He,{icon:O(t),iconColor:"currentColor",size:16}):null,e("span",null,t)):null,e("div",{css:{color:"var(--gray-700)"}},o!=null?o:t))}var $=n=>{let{data:t,getStyles:o}=n;return e("div",{css:o("singleValue",n)},e(ue,{displayName:t.label}))};function pe({onChange:n,value:t,dimensions:o,errorMessage:l,...a}){return e(p.Fragment,null,e(We,{...a,value:t?F(t):void 0,options:T(o),styles:{...a.styles,valueContainer:(r,s)=>{var i,m;return{...r,padding:"var(--spacing-sm)",...(m=(i=a.styles)==null?void 0:i.valueContainer)==null?void 0:m.call(i,r,s)}}},onChange:r=>{r&&n(o.find(s=>s.dim===r.value))},components:{Option:z,SingleValue:$,GroupHeading:V,...a.components}}),e(N,{message:l}))}import{InputComboBox as qe}from"@uniformdev/design-system";import{useState as _e}from"react";function ce({onChange:n,criteriaMatch:t,dimensions:o,errorMessage:l,...a}){var c,b;let[r,s]=_e(typeof t.r!="undefined"&&L(t.r)!==null?t.r.toString(10):""),i=t.rDim,m=t.rDim?o.dimIndex[t.rDim]:void 0;return e(p.Fragment,null,e(qe,{...a,inputValue:r,menuShouldScrollIntoView:!0,value:{label:(c=m==null?void 0:m.displayName)!=null?c:i&&!m?`${t.rDim} (unknown)`:"",value:(b=t.rDim)!=null?b:t.r?t.r.toString(10):"",isDisabled:!1},options:[{label:"Enter a numeric score to match, or choose another dimension to match its score",value:"",isDisabled:!0},...T(o.dimensions)],styles:{...a.styles,valueContainer:(u,C)=>{var f,D;return{...u,padding:"var(--spacing-sm)",...(D=(f=a.styles)==null?void 0:f.valueContainer)==null?void 0:D.call(f,u,C)}},option:(u,C)=>{var f,D;return{fontSize:C.isDisabled?"0.8rem":void 0,...(D=(f=a.styles)==null?void 0:f.option)==null?void 0:D.call(f,u,C)}}},onChange:u=>{var C;u&&(n({...t,rDim:(C=u.value)==null?void 0:C.toString(),r:void 0}),s(""))},onInputChange:(u,C)=>{let f=L(u);C.action==="input-change"||C.action==="set-value"?(s(u),(f||u==="")&&n({...t,r:u||void 0,rDim:void 0})):!f&&!L(C.prevInputValue)&&(!u&&t.r?s(t.r.toString()):s(u))},components:{...a.components,Option:z,SingleValue:$,GroupHeading:V},noOptionsMessage:({inputValue:u})=>L(u)?e(p.Fragment,null,e("div",null,"Score: ",u),e("small",null,"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension.")):e(p.Fragment,null,e("div",null,"No dimensions match your search \u201C",u,"\u201D"),e("small",null,"If you want to match a literal score, enter a numeric value."))}),e(N,{message:l}))}function L(n){return/^\d+$/.test(n.toString(10))}var Ce=({value:n,setValue:t,dimensions:o,onMenuOpen:l,onMenuClose:a,onAddCriteria:r,onRemoveCriteria:s,displayTitle:i=!0,components:m,errors:c={}})=>{let b=n||{crit:[]},u=d=>{t({...b,op:d==="&"?void 0:d})},C=()=>{let d={...b,crit:[...b.crit,{l:"",op:">",r:0}]};t(d),r==null||r(d)},f=(d,v)=>{t(ge(b,I=>{I.crit[v]=d}))},D=d=>{let v=ge(b,g=>{g.crit.splice(d,1)}),I=v.crit.length===0?null:v;t(I),s==null||s(I)};return e("fieldset",{className:"personalization-criteria"},i?m!=null&&m.Title?e(m.Title,null):e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,b.crit.length?b.crit.map((d,v)=>{var y,S,w,B;let I=((y=d.l)==null?void 0:y.length)>0,g=d.op!=="+"&&d.op!=="-";return e("div",{css:re,key:v},e("div",{css:ie,style:{gridTemplateColumns:`minmax(0, 1fr) ${g?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"}`},className:"criteriaItemInner"},e("div",{css:R},e(pe,{errorMessage:(S=c.lhs)==null?void 0:S[v],css:P,styles:{control:h=>({...h,height:"100%"})},dimensions:o.dimensions,onChange:h=>{f({...d,l:h.dim},v)},value:o.dimIndex[d.l]})),e("div",{css:R},e(me,{name:`op-${v}`,css:P,styles:{control:h=>({...h,height:"100%"})},value:d.op,onChange:h=>{f(h==="+"||h==="-"?{...d,op:h,r:void 0,rDim:void 0}:{...d,op:h},v)},onMenuOpen:l,onMenuClose:a})),g?e("div",{css:R},e(ce,{errorMessage:(w=c.rhs)==null?void 0:w[v],css:P,styles:{control:h=>({...h,height:"100%"})},criteriaMatch:d,onChange:h=>{f(h,v)},isDisabled:!I,dimensions:o,onMenuOpen:l,onMenuClose:a})):null),e("button",{type:"button",onClick:()=>D(v),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(fe,{icon:Ke,iconColor:"red",size:"1.5rem"})),v>0?e("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(Fe,{disabled:v>1,value:(B=b.op)!=null?B:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:h=>{u(h.value)}})):null)}):e(de,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.')),o.dimensions.length===0?m!=null&&m.NoDimensionsDefined?e(m.NoDimensionsDefined,null):e(de,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured.")):e("button",{type:"button",className:"add-more",onClick:C,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(fe,{icon:Ye,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};var Ot=({contextConfig:n,...t})=>{let{loading:o,result:l,error:a}=x(n);return a?e(ve,{type:"danger"},a):o||l===null?e(Xe,null):e(Ce,{...t,dimensions:l,components:{NoDimensionsDefined:()=>e(ve,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension")))}})};import en from"react";import{useEffect as Je,useState as Qe}from"react";import{ManifestClient as Ze,ApiClientError as je}from"@uniformdev/context/api";function U({apiHost:n,apiKey:t,projectId:o}){let[l,a]=Qe({loading:!1,notConfigured:!1,error:null,result:null});return Je(()=>{if(!o||!t||!n){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Ze({projectId:o,apiKey:t,apiHost:n}).get({preview:!0});a({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof je?(s.statusCode===403&&(i=`The API key ${t} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=s.message):i=s.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[n,t,o]),{result:l.result,error:l.error,loading:l.loading,notConfigured:l.notConfigured}}import{LoadingIndicator as nn}from"@uniformdev/design-system";function Ht({children:n,versionMap:t,contextConfig:o}){let{loading:l,result:a}=U(o);if(l)return e(nn,null);if(a){let r=t[a.project.ui_version];if(r)return e(r,null)}return e(en.Fragment,null,n)}import be,{createContext as tn,useContext as K}from"react";import{LoadingIndicator as on}from"@uniformdev/design-system";var A=tn(null),Qt=({loadingComponent:n,errorComponent:t,contextConfig:o,children:l})=>{let a=U(o),r=x(o);return a.error||a.notConfigured?t?e(t,{contextConfig:o,result:a}):e(be.Fragment,null,"ErrorComponent is not configured"):r.error||r.notConfigured?t?e(t,{contextConfig:o,result:r}):e(be.Fragment,null,"ErrorComponent is not configured"):a.loading||r.loading?n?e(n,null):e(on,null):e(A.Provider,{value:{manifest:a.result,dimensions:r.result,contextConfig:o}},l)};function Zt(){let n=K(A);if(!(n!=null&&n.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return n.contextConfig}function jt(){let n=K(A);if(!(n!=null&&n.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return n.manifest}function eo(){let n=K(A);if(!(n!=null&&n.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return n.dimensions}import{validate as rn}from"uuid";import{ManifestClient as an}from"@uniformdev/context/api";var he=async n=>{if(!n)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!n.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!n.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!rn(n.apiKey)&&!n.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new an({projectId:n.projectId,apiKey:n.apiKey,apiHost:n.apiHost});try{let o=await t.get({preview:!0});return{valid:!0,result:o}}catch(o){return{valid:!1,error:o}}};import{useEffect as sn,useState as ln}from"react";var lo=n=>{let[t,o]=ln({validating:!1,error:void 0}),{apiKey:l,apiHost:a,projectId:r}=n||{};return sn(()=>{if(!l||!a)return;(async()=>{o({validating:!0,error:void 0});let{error:i,result:m}=await he({apiHost:a,apiKey:l,projectId:r});o(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:m})})()},[a,l,r]),{validating:t.validating,error:t.error,result:t.result}};function uo(n){return Array.isArray(n)&&n.length>0&&n[0].cat!==void 0}function po(n){return n.crit!==void 0}export*from"@uniformdev/design-system";export{Qt as ContextData,ce as CriteriaMatchMenu,me as CriteriaOperatorMenu,pe as DimensionMenu,ue as DimensionValue,X as EditLink,Rn as EnrichmentTag,Ot as PersonalizationCriteria,Ce as PersonalizationCriteriaStatic,Ht as ProjectUIVersion,Ve as addEnrichmentLink,le as contextCriteriaMenuOperators,uo as isEnrichmentTagData,po as isPersonalizationCriteriaData,Zt as useContextConfig,U as useContextData,x as useDimensions,eo as useDimensionsDataContext,jt as useManifest,lo as useValidateContextConfig,he as validateContextConfig};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/context-ui",
3
- "version": "16.1.1-alpha.169+9f94bc146",
3
+ "version": "16.1.1-alpha.238+173830b3e",
4
4
  "description": "React-based functionality and components for Uniform Context",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "./dist/index.js",
@@ -31,12 +31,14 @@
31
31
  "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
32
32
  "format": "prettier --write \"src/**/*.{js,ts,tsx}\"",
33
33
  "storybook": "pnpm build && start-storybook -p 9011 -c ./.storybook",
34
- "storybook:publish": "pnpm build && pnpm build-storybook -o ./out"
34
+ "deploy": "run-s deploy:storybook deploy:netlify",
35
+ "deploy:storybook": "pnpm build && pnpm build-storybook -o ./out",
36
+ "deploy:netlify": "tsx ../../scripts/deploy-to-netlify.ts"
35
37
  },
36
38
  "dependencies": {
37
39
  "@emotion/react": "11.9.3",
38
- "@uniformdev/context": "^16.1.1-alpha.169+9f94bc146",
39
- "@uniformdev/design-system": "^16.1.1-alpha.169+9f94bc146",
40
+ "@uniformdev/context": "^16.1.1-alpha.238+173830b3e",
41
+ "@uniformdev/design-system": "^16.1.1-alpha.238+173830b3e",
40
42
  "immer": "9.0.15",
41
43
  "react-beautiful-dnd": "13.1.0",
42
44
  "react-icons": "^4.3.1",
@@ -67,9 +69,9 @@
67
69
  "autoprefixer": "10.4.7",
68
70
  "postcss": "8.4.14",
69
71
  "postcss-import": "14.1.0",
70
- "react": "18.1.0",
71
- "react-dom": "18.1.0",
72
- "webpack": "5.72.1"
72
+ "react": "18.2.0",
73
+ "react-dom": "18.2.0",
74
+ "webpack": "5.73.0"
73
75
  },
74
76
  "files": [
75
77
  "/dist"
@@ -77,5 +79,5 @@
77
79
  "publishConfig": {
78
80
  "access": "public"
79
81
  },
80
- "gitHead": "9f94bc146bf17704000703b458588ee627f027cf"
82
+ "gitHead": "173830b3ebfe02dfe01d82d28eb97f517f4e58aa"
81
83
  }