@uniformdev/context-ui 17.2.1-alpha.224 → 17.3.1-alpha.117
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.esm.js +22 -17
- package/dist/index.js +22 -17
- package/dist/index.mjs +22 -17
- package/package.json +7 -7
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as
|
|
1
|
+
import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}from"@uniformdev/design-system";import{CgChevronRight as qe}from"react-icons/cg";import{css as Ge}from"@emotion/react";var ue=Ge`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +9,7 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
9
9
|
&:focus {
|
|
10
10
|
text-decoration-line: underline;
|
|
11
11
|
}
|
|
12
|
-
`;import{jsx as
|
|
12
|
+
`;import{jsx as _e,jsxs as Fe}from"@emotion/react/jsx-runtime";var ce=({linkTo:e,name:t,linkText:n=`Edit ${t} Component`})=>Fe("a",{css:ue,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[n,_e(We,{icon:qe,iconColor:"currentColor",size:"1.5rem"})]});import{useMemo as fe,useState as K}from"react";import{useEffect as je,useState as Ke}from"react";import{computeDimensionDisplayName as Ye,ApiClientError as Xe,CachedDimensionClient as Je}from"@uniformdev/context/api";function de(e,t,n){return e.reduce((a,r)=>{let o=t(r);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return a[t(r)]=n?n(r):r,a},{})}function S({apiHost:e,apiKey:t,projectId:n}){let[a,r]=Ke({loading:!1,notConfigured:!1,error:null,result:null});return je(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new Je({projectId:n,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:Ye(d)})),l={dimensions:i,dimIndex:de(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof Xe?i=s.message:i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{getEnrichmentVectorKey as Y}from"@uniformdev/context";import{Input as Ce,Button as Qe,InputSelect as Ze,Callout as X,Icon as J,LoadingIndicator as et,AddListButton as tt}from"@uniformdev/design-system";import{CgMathPlus as nt,CgMathMinus as ot,CgCloseO as rt}from"react-icons/cg";import ge from"immer";import{css as Q}from"@emotion/react";import{Fragment as ve,jsx as u,jsxs as M}from"@emotion/react/jsx-runtime";var it=Q`
|
|
13
13
|
flex: 2;
|
|
14
14
|
display: flex;
|
|
15
15
|
width: 50%;
|
|
@@ -20,7 +20,7 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
20
20
|
&:focus {
|
|
21
21
|
text-decoration-line: underline;
|
|
22
22
|
}
|
|
23
|
-
`,
|
|
23
|
+
`,xn=({value:e,setValue:t,contextConfig:n,displayTitle:a=!0})=>{let{loading:r,result:o,error:s}=S(n),i=fe(()=>{if(o)return o.dimensions.filter(b=>b.category==="ENR")},[o]),l=fe(()=>{if(!e)return i;if(i)return i.filter(b=>!e.some(I=>Y(I.cat,I.key)===b.dim))},[i,e]),[d,C]=K(""),[p,m]=K(50),[f,w]=K(!1),g=i==null?void 0:i.find(b=>b.dim===d),y=()=>{let[b,I]=d.split("_");R([...e!=null?e:[],{cat:b,key:I,str:p}]),C(""),m(50),w(!1)},R=b=>{let I=[];o?I=b.filter(O=>{let T=o.dimIndex[Y(O.cat,O.key)];return Boolean(T)}):I=b;let k=I.length===0?null:I;t(k)};return s?u(X,{type:"danger",children:s}):r||o===null?u(et,{}):M("fieldset",{className:"enrichment-tag",children:[a?u("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"},children:u("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Enrichment Tags"})}):null,i!=null&&i.length?!f&&!e?u(X,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Click"," ",u("a",{onClick:()=>w(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"},children:"here"})," ","to assign your first enrichment tag."]})}):M(ve,{children:[o&&u(mt,{list:e!=null?e:[],setList:R,dimIndex:o.dimIndex}),f&&l&&l.length>0?M("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"},children:[u("div",{css:{flexGrow:1},children:u(Ze,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:d,options:[{label:"Select",value:""},...l.map(b=>({label:b.displayName,value:b.dim}))],onChange:b=>C(b.currentTarget.value)})}),u(lt,{score:p,setValue:m,cap:g?g.cap:100,css:{flexBasis:"9rem"}}),u(Qe,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:y,disabled:!d,children:"Add"})]}):null,M("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"},children:[!f&&l&&l.length>0&&e?u(tt,{className:"add-more",buttonText:"Add More",onButtonClick:()=>w(!0)}):u("a",{css:it,title:"none",href:"#"}),u(ce,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`})]})]}):u(at,{contextConfig:n})]})},at=({contextConfig:e})=>u(X,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",u("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"here"}),"."]})}),he=(e,t=100,n=0)=>Math.max(Math.min(e,t),n),be=Q`
|
|
24
24
|
position: absolute;
|
|
25
25
|
bottom: 0.875rem;
|
|
26
26
|
left: var(--spacing-sm);
|
|
@@ -32,11 +32,11 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
32
32
|
background-color: var(--gray-100);
|
|
33
33
|
border: 1px solid var(--gray-300);
|
|
34
34
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
36
|
-
${
|
|
35
|
+
`,st=Q`
|
|
36
|
+
${be}
|
|
37
37
|
left: auto;
|
|
38
38
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
39
|
+
`,lt=({score:e,setValue:t,cap:n=100,...a})=>{let r=o=>{let s=o==="increment"?e+10:e-10;s<0&&(s=0),s>n&&(s=n),t(s)};return M("div",{css:{position:"relative"},...a,children:[u(Ce,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:n,value:e,onChange:o=>t(he(Number(o.currentTarget.value)||0,n)),css:{textAlign:"center",boxSizing:"border-box"}}),u("button",{type:"button",title:"Reduce enrichment count",onClick:()=>r("decrement"),disabled:e===0,className:"scoreCounterButton",css:be,children:u(J,{icon:ot,iconColor:"gray",size:"1.5rem"})}),u("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:st,children:u(J,{icon:nt,iconColor:"gray",size:"1.5rem"})})]})},mt=({list:e,setList:t,dimIndex:n})=>{let a=o=>{t(ge(e,s=>{s.splice(o,1)}))},r=(o,s)=>{var l;let i=(l=n[`${e[o].cat}_${e[o].key}`])==null?void 0:l.cap;t(ge(e,d=>{d[o].str=he(Number(s)||0,i)}))};return u(ve,{children:e.map((o,s)=>{let i=n[Y(o.cat,o.key)];if(!!i)return M("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",children:[u("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"},children:i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`}),u("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"},children:u(Ce,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:l=>r(s,l.currentTarget.value)})}),u("button",{type:"button",title:"Delete enrichment",onClick:()=>a(s),css:{border:0},children:u(J,{icon:rt,iconColor:"red",size:"1.5rem"})})]},`${o.cat}-${o.key}`)})})};import{useState as Bt}from"react";import{LoadingIndicator as Pt,Callout as $e}from"@uniformdev/design-system";import{css as Rt}from"@emotion/react";import{Callout as Ne,InputInlineSelect as Mt,Icon as Et,AddListButton as St,Paragraph as Vt}from"@uniformdev/design-system";import ze from"immer";import{CgCloseO as Ot}from"react-icons/cg";import{css as V}from"@emotion/react";var Z="6rem",ye=V`
|
|
40
40
|
position: relative;
|
|
41
41
|
padding: var(--spacing-base);
|
|
42
42
|
border: 1px solid var(--gray-300);
|
|
@@ -61,21 +61,27 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
61
61
|
display: none;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
`,
|
|
65
|
-
display:
|
|
64
|
+
`,xe=V`
|
|
65
|
+
display: flex;
|
|
66
66
|
gap: var(--spacing-xs);
|
|
67
67
|
flex-grow: 1;
|
|
68
|
+
flex-wrap: wrap;
|
|
68
69
|
margin-right: var(--spacing-base);
|
|
69
|
-
`,N=
|
|
70
|
+
`,N=V`
|
|
70
71
|
width: 100%;
|
|
71
72
|
display: flex;
|
|
72
73
|
align-items: stretch;
|
|
73
|
-
`,
|
|
74
|
+
`,ee=V`
|
|
75
|
+
flex: 2;
|
|
76
|
+
height: 52px;
|
|
77
|
+
min-width: 200px;
|
|
78
|
+
`,De=V`
|
|
79
|
+
flex: 1;
|
|
80
|
+
min-width: 80px;
|
|
81
|
+
`,z=V`
|
|
74
82
|
height: 100%;
|
|
75
83
|
width: 100%;
|
|
76
|
-
|
|
77
|
-
height: 100%;
|
|
78
|
-
`;import{InputComboBox as ct}from"@uniformdev/design-system";import{css as mt}from"@emotion/react";import{jsx as ut}from"@emotion/react/jsx-runtime";function L({op:e}){return ut("div",{className:"operation-bubble",css:mt`
|
|
84
|
+
`;import{InputComboBox as ft}from"@uniformdev/design-system";import{css as ut}from"@emotion/react";import{jsx as ct}from"@emotion/react/jsx-runtime";function L({op:e}){return ct("div",{className:"operation-bubble",css:ut`
|
|
79
85
|
align-items: center;
|
|
80
86
|
background: var(--gray-700);
|
|
81
87
|
border-radius: var(--rounded-full);
|
|
@@ -85,7 +91,6 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
85
91
|
height: 30px;
|
|
86
92
|
justify-content: center;
|
|
87
93
|
font-size: var(--fs-base);
|
|
88
|
-
`,children:e})}import{jsx as
|
|
89
|
-
${
|
|
90
|
-
|
|
91
|
-
`,className:"criteriaItemInner",children:[v("div",{css:N,className:"criteria-wrapper","data-test-id":"select-criteria",children:v(Pe,{errorMessage:(k=d.lhs)==null?void 0:k[y],css:z,styles:{control:x=>({...x,height:"100%"})},dimensions:n.dimensions,onChange:x=>{f({...g,l:x.dim},y)},value:n.dimIndex[g.l],onMenuOpen:a,onMenuClose:r})}),v("div",{css:N,className:"criteria-wrapper","data-test-id":"select-operator",children:v(Re,{name:`op-${y}`,css:z,styles:{control:x=>({...x,height:"100%"})},value:g.op,onChange:x=>{f(x==="+"||x==="-"?{...g,op:x,r:void 0,rDim:void 0}:{...g,op:x},y)},onMenuOpen:a,onMenuClose:r})}),b?v("div",{css:N,className:"criteria-wrapper","data-test-id":"select-match-criteria",children:v(Oe,{errorMessage:(V=d.rhs)==null?void 0:V[y],css:z,styles:{control:x=>({...x,height:"100%"})},criteriaMatch:g,onChange:x=>{f(x,y)},isDisabled:!R,dimensions:n,onMenuOpen:a,onMenuClose:r})}):null]}),v("button",{type:"button",onClick:()=>w(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:v(Rt,{icon:St,iconColor:"red",size:"1.5rem"})}),y>0?v("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:v(wt,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(T=C.op)!=null?T:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:x=>{u(x.value)}})}):null]},y)})}):v(ke,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v(Et,{children:'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.'})}),n.dimensions.length===0?l!=null&&l.NoDimensionsDefined?v(l.NoDimensionsDefined,{}):v(ke,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v("p",{children:"You do not have any dimensions configured."})}):v(Mt,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:m})]})};import*as D from"yup";import{useAsync as Pt}from"react-use";function Co(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function ho(e){return e.crit!==void 0}function ae(e){return e!=="+"&&e!=="-"}import{jsx as O,jsxs as kt}from"@emotion/react/jsx-runtime";function Ot(e){let t={crit:[]};return e.forEach(n=>{if(!n.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...n.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let o=Number(r[1]),s=r[2];if(t.crit.length>o)t.crit[o]={...t.crit[o],[s]:n.message};else{let i={};i[s]=n.message,t.crit.push(i)}}}),t}async function se(e,t){let n=D.object().shape({l:D.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected left-side criteria dimension does not exist"),op:D.string().required(),r:D.mixed().nullable().when(["rDim","op"],{is:(a,r)=>ae(r)&&!a,then:D.string().required("Choose a score or dimension")}),rDim:D.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected right-side criteria dimension does not exist").when(["r","op"],{is:(a,r)=>ae(r)&&!a,then:D.string().required("Choose a score or dimension")})},["rDim","r"]);try{await D.object({crit:D.array(n)}).nullable().validate(e,{abortEarly:!1})}catch(a){return Ot(a.inner)}}var Eo=({contextConfig:e,value:t,setValue:n,...a})=>{var C,u;let[r,o]=Vt(void 0),{loading:s,result:i,error:l}=S(e);return Pt(async()=>{if(t&&i){let m=await se(t,i);o(m)}},[t,i,se]),l?O(ze,{type:"danger",children:l}):s||i===null?O(Bt,{}):O(Ne,{...a,value:t,setValue:async m=>{let f=await se(m,i);o(f),n(m)},errors:{lhs:(C=r==null?void 0:r.crit)==null?void 0:C.map(m=>m==null?void 0:m.l),rhs:(u=r==null?void 0:r.crit)==null?void 0:u.map(m=>m==null?void 0:m.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>O(ze,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:kt("p",{children:["You do not have any dimensions configured. Create your first"," ",O("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};import{useEffect as Tt,useState as Nt}from"react";import{ApiClientError as zt,CachedManifestClient as Lt}from"@uniformdev/context/api";function F({apiHost:e,apiKey:t,projectId:n}){let[a,r]=Nt({loading:!1,notConfigured:!1,error:null,result:null});return Tt(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Lt({projectId:n,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof zt?(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(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{LoadingIndicator as $t}from"@uniformdev/design-system";import{Fragment as At,jsx as le}from"@emotion/react/jsx-runtime";function No({children:e,versionMap:t,contextConfig:n}){let{loading:a,result:r}=F(n);if(a)return le($t,{});if(r){let o=t[r.project.ui_version];if(o)return le(o,{})}return le(At,{children:e})}import{createContext as Ut,useContext as me}from"react";import{LoadingIndicator as Gt}from"@uniformdev/design-system";import{Fragment as Le,jsx as E}from"@emotion/react/jsx-runtime";var j=Ut(null),_o=({loadingComponent:e,errorComponent:t,contextConfig:n,children:a})=>{let r=F(n),o=S(n);return r.error||r.notConfigured?t?E(t,{contextConfig:n,result:r}):E(Le,{children:"ErrorComponent is not configured"}):o.error||o.notConfigured?t?E(t,{contextConfig:n,result:o}):E(Le,{children:"ErrorComponent is not configured"}):r.loading||o.loading?e?E(e,{}):E(Gt,{}):E(j.Provider,{value:{manifest:r.result,dimensions:o.result,contextConfig:n},children:a})};function Fo(){let e=me(j);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function jo(){let e=me(j);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function Ko(){let e=me(j);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}import{validate as Ht}from"uuid";import{UncachedManifestClient as qt}from"@uniformdev/context/api";var $e=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(!Ht(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new qt({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let n=await t.get({preview:!0});return{valid:!0,result:n}}catch(n){return{valid:!1,error:n}}};import{useEffect as Wt,useState as _t}from"react";var nr=e=>{let[t,n]=_t({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:o}=e||{};return Wt(()=>{if(!a||!r)return;(async()=>{n({validating:!0,error:void 0});let{error:i,result:l}=await $e({apiHost:r,apiKey:a,projectId:o});n(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,o]),{validating:t.validating,error:t.error,result:t.result}};export*from"@uniformdev/design-system";export{_o as ContextData,Oe as CriteriaMatchMenu,Re as CriteriaOperatorMenu,Pe as DimensionMenu,Se as DimensionValue,pe as EditLink,fn as EnrichmentTag,Eo as PersonalizationCriteria,Ne as PersonalizationCriteriaStatic,No as ProjectUIVersion,ot as addEnrichmentLink,we as contextCriteriaMenuOperators,Ot as convertErrorsToObj,Co as isEnrichmentTagData,ho as isPersonalizationCriteriaData,ae as opHasRhs,Fo as useContextConfig,F as useContextData,S as useDimensions,Ko as useDimensionsDataContext,jo as useManifest,nr as useValidateContextConfig,$e as validateContextConfig};
|
|
94
|
+
`,children:e})}import{jsx as te,jsxs as dt}from"@emotion/react/jsx-runtime";var Ie=e=>{var l,d;let{data:t,getStyles:n,isDisabled:a,innerRef:r,innerProps:o}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return dt("div",{css:{...n("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...o,children:[i?te(L,{op:s}):te("div",{css:{width:"20px",height:"20px"}}),te("div",{children:i!=null?i:s})]})};import{jsx as we}from"@emotion/react/jsx-runtime";var Re=e=>{let{data:t,getStyles:n}=e;return we("div",{css:{...n("singleValue",e),width:"max-content"},children:t.label.length===1?we(L,{op:t.label}):t.label})};import{jsx as gt}from"@emotion/react/jsx-runtime";var Me=[{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 Ee({onChange:e,value:t,...n}){var a,r;return gt(ft,{...n,value:{label:(r=(a=Me.find(o=>o.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:Me.map(o=>({label:o.description?`${o.name}:${o.description}`:o.name,value:o.value})),styles:{...n.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=n.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}},menu:(o,s)=>{var i,l;return{...o,width:"max-content",...(l=(i=n.styles)==null?void 0:i.menu)==null?void 0:l.call(i,o,s)}},control:(o,s)=>{var i,l;return{...o,border:0,...(l=(i=n.styles)==null?void 0:i.control)==null?void 0:l.call(i,o,s)}},indicatorSeparator:(o,s)=>{var i,l;return{...o,display:"none",...(l=(i=n.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(o.value)},components:{SingleValue:Re,Option:Ie,...n.components}})}import{InputComboBox as yt}from"@uniformdev/design-system";import{Icon as Ct}from"@uniformdev/design-system";function ne(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function $(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function A(e){let t=[],n="";for(let a of e){let[r]=a.displayName.split(":");n!==r&&(t.push({label:r,options:[]}),n=r),t[t.length-1].options.push(ne(a))}return t}import{jsx as oe,jsxs as ht}from"@emotion/react/jsx-runtime";var U=e=>{var r;let{data:t,getStyles:n,className:a}=e;return oe("div",{css:{...n("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:ht("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[oe(Ct,{icon:$((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),oe("span",{children:t.label})]})})};import{jsx as bt}from"@emotion/react/jsx-runtime";function G({message:e}){return e?bt("div",{css:{position:"absolute",background:"white",borderRadius:"3px",fontSize:"0.8rem",color:"var(--brand-primary-2)",bottom:"calc(var(--spacing-xs) * -1)"},children:e}):null}import{jsx as Se}from"@emotion/react/jsx-runtime";var H=e=>{var p,m;let{data:t,getStyles:n,cx:a,isDisabled:r,isFocused:o,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,C]=(m=(p=t.label)==null?void 0:p.split(":"))!=null?m:[];return Se("div",{css:n("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":o,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:Se("div",{css:{color:"var(--gray-700)"},children:C!=null?C:t.label})})};import{Icon as vt}from"@uniformdev/design-system";import{jsx as re,jsxs as Ve}from"@emotion/react/jsx-runtime";function Oe({displayName:e}){let[t,n]=e.split(":");return Ve("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[n?Ve("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?re(vt,{icon:$(t),iconColor:"currentColor",size:16}):null,re("span",{"data-test-id":"dimension-name",children:t})]}):null,re("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:n!=null?n:t})]})}import{jsx as Be}from"@emotion/react/jsx-runtime";var W=e=>{let{data:t,getStyles:n}=e;return Be("div",{css:n("singleValue",e),children:Be(Oe,{displayName:t.label})})};import{Fragment as xt,jsx as Pe,jsxs as Dt}from"@emotion/react/jsx-runtime";function ke({onChange:e,value:t,dimensions:n,errorMessage:a,...r}){return Dt(xt,{children:[Pe(yt,{...r,value:t?ne(t):void 0,options:A(n),styles:{...r.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(n.find(s=>s.dim===o.value))},components:{Option:H,SingleValue:W,GroupHeading:U,...r.components}}),Pe(G,{message:a})]})}import{InputComboBox as It}from"@uniformdev/design-system";import{useState as wt}from"react";import{Fragment as ie,jsx as _,jsxs as B}from"@emotion/react/jsx-runtime";function Te({onChange:e,criteriaMatch:t,dimensions:n,errorMessage:a,...r}){var d,C;let[o,s]=wt(typeof t.r!="undefined"&&q(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?n.dimIndex[t.rDim]:void 0;return B(ie,{children:[_(It,{...r,inputValue:o,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(C=t.rDim)!=null?C: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},...A(n.dimensions)],styles:{...r.styles,valueContainer:(p,m)=>{var f,w;return{...p,padding:"var(--spacing-sm)",...(w=(f=r.styles)==null?void 0:f.valueContainer)==null?void 0:w.call(f,p,m)}},option:(p,m)=>{var f,w;return{fontSize:m.isDisabled?"0.8rem":void 0,...(w=(f=r.styles)==null?void 0:f.option)==null?void 0:w.call(f,p,m)}}},onChange:p=>{var m;p&&(e({...t,rDim:(m=p.value)==null?void 0:m.toString(),r:void 0}),s(""))},onInputChange:(p,m)=>{let f=q(p);m.action==="input-change"||m.action==="set-value"?(s(p),(f||p==="")&&e({...t,r:p||void 0,rDim:void 0})):!f&&!q(m.prevInputValue)&&(!p&&t.r?s(t.r.toString()):s(p))},components:{...r.components,Option:H,SingleValue:W,GroupHeading:U},noOptionsMessage:({inputValue:p})=>q(p)?B(ie,{children:[B("div",{children:["Score: ",p]}),_("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):B(ie,{children:[B("div",{children:["No dimensions match your search \u201C",p,"\u201D"]}),_("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),_(G,{message:a})]})}function q(e){return/^\d+$/.test(e.toString(10))}import{jsx as v,jsxs as ae}from"@emotion/react/jsx-runtime";var Le=({value:e,setValue:t,dimensions:n,onMenuOpen:a,onMenuClose:r,onAddCriteria:o,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let C=e||{crit:[]},p=g=>{t({...C,op:g==="&"?void 0:g})},m=()=>{let g={...C,crit:[...C.crit,{l:"",op:">",r:0}]};t(g),o==null||o(g)},f=(g,y)=>{t(ze(C,R=>{R.crit[y]=g}))},w=g=>{let y=ze(C,b=>{b.crit.splice(g,1)}),R=y.crit.length===0?null:y;t(R),s==null||s(R)};return ae("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?v(l.Title,{}):v("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?v(l.CustomVariantName,{}):null,C.crit.length?v("div",{children:C.crit.map((g,y)=>{var I,k,O,T;let R=((I=g.l)==null?void 0:I.length)>0,b=g.op!=="+"&&g.op!=="-";return ae("div",{css:ye,"data-test-id":"criteria-container",children:[ae("div",{css:Rt`
|
|
95
|
+
${xe}/* grid-template-columns: minmax(0, 1fr) ${b?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
|
|
96
|
+
`,className:"criteriaItemInner",children:[v("div",{css:[N,ee],className:"criteria-wrapper","data-test-id":"select-criteria",children:v(ke,{errorMessage:(k=d.lhs)==null?void 0:k[y],css:z,styles:{control:x=>({...x,height:"100%"})},dimensions:n.dimensions,onChange:x=>{f({...g,l:x.dim},y)},value:n.dimIndex[g.l],onMenuOpen:a,onMenuClose:r})}),v("div",{css:[N,De],className:"criteria-wrapper","data-test-id":"select-operator",children:v(Ee,{name:`op-${y}`,css:z,styles:{control:x=>({...x,height:"100%"})},value:g.op,onChange:x=>{f(x==="+"||x==="-"?{...g,op:x,r:void 0,rDim:void 0}:{...g,op:x},y)},onMenuOpen:a,onMenuClose:r})}),b?v("div",{css:[N,ee],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:v(Te,{errorMessage:(O=d.rhs)==null?void 0:O[y],css:z,styles:{control:x=>({...x,height:"100%"})},criteriaMatch:g,onChange:x=>{f(x,y)},isDisabled:!R,dimensions:n,onMenuOpen:a,onMenuClose:r})}):null]}),v("button",{type:"button",onClick:()=>w(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:v(Et,{icon:Ot,iconColor:"red",size:"1.5rem"})}),y>0?v("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:v(Mt,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(T=C.op)!=null?T:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:x=>{p(x.value)}})}):null]},y)})}):v(Ne,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v(Vt,{children:'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.'})}),n.dimensions.length===0?l!=null&&l.NoDimensionsDefined?v(l.NoDimensionsDefined,{}):v(Ne,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v("p",{children:"You do not have any dimensions configured."})}):v(St,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:m})]})};import*as D from"yup";import{useAsync as kt}from"react-use";function Xo(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Jo(e){return e.crit!==void 0}function se(e){return e!=="+"&&e!=="-"}import{jsx as P,jsxs as Nt}from"@emotion/react/jsx-runtime";function Tt(e){let t={crit:[]};return e.forEach(n=>{if(!n.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...n.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let o=Number(r[1]),s=r[2];if(t.crit.length>o)t.crit[o]={...t.crit[o],[s]:n.message};else{let i={};i[s]=n.message,t.crit.push(i)}}}),t}async function le(e,t){let n=D.object().shape({l:D.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected left-side criteria dimension does not exist"),op:D.string().required(),r:D.mixed().nullable().when(["rDim","op"],{is:(a,r)=>se(r)&&!a,then:D.string().required("Choose a score or dimension")}),rDim:D.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected right-side criteria dimension does not exist").when(["r","op"],{is:(a,r)=>se(r)&&!a,then:D.string().required("Choose a score or dimension")})},["rDim","r"]);try{await D.object({crit:D.array(n)}).nullable().validate(e,{abortEarly:!1})}catch(a){return Tt(a.inner)}}var lr=({contextConfig:e,value:t,setValue:n,...a})=>{var C,p;let[r,o]=Bt(void 0),{loading:s,result:i,error:l}=S(e);return kt(async()=>{if(t&&i){let m=await le(t,i);o(m)}},[t,i,le]),l?P($e,{type:"danger",children:l}):s||i===null?P(Pt,{}):P(Le,{...a,value:t,setValue:async m=>{let f=await le(m,i);o(f),n(m)},errors:{lhs:(C=r==null?void 0:r.crit)==null?void 0:C.map(m=>m==null?void 0:m.l),rhs:(p=r==null?void 0:r.crit)==null?void 0:p.map(m=>m==null?void 0:m.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>P($e,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:Nt("p",{children:["You do not have any dimensions configured. Create your first"," ",P("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};import{useEffect as zt,useState as Lt}from"react";import{ApiClientError as $t,CachedManifestClient as At}from"@uniformdev/context/api";function F({apiHost:e,apiKey:t,projectId:n}){let[a,r]=Lt({loading:!1,notConfigured:!1,error:null,result:null});return zt(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new At({projectId:n,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof $t?(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(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{LoadingIndicator as Ut}from"@uniformdev/design-system";import{Fragment as Gt,jsx as me}from"@emotion/react/jsx-runtime";function vr({children:e,versionMap:t,contextConfig:n}){let{loading:a,result:r}=F(n);if(a)return me(Ut,{});if(r){let o=t[r.project.ui_version];if(o)return me(o,{})}return me(Gt,{children:e})}import{createContext as Ht,useContext as pe}from"react";import{LoadingIndicator as Wt}from"@uniformdev/design-system";import{Fragment as Ae,jsx as E}from"@emotion/react/jsx-runtime";var j=Ht(null),Br=({loadingComponent:e,errorComponent:t,contextConfig:n,children:a})=>{let r=F(n),o=S(n);return r.error||r.notConfigured?t?E(t,{contextConfig:n,result:r}):E(Ae,{children:"ErrorComponent is not configured"}):o.error||o.notConfigured?t?E(t,{contextConfig:n,result:o}):E(Ae,{children:"ErrorComponent is not configured"}):r.loading||o.loading?e?E(e,{}):E(Wt,{}):E(j.Provider,{value:{manifest:r.result,dimensions:o.result,contextConfig:n},children:a})};function Pr(){let e=pe(j);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function kr(){let e=pe(j);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function Tr(){let e=pe(j);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}import{validate as qt}from"uuid";import{UncachedManifestClient as _t}from"@uniformdev/context/api";var Ue=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(!qt(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new _t({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let n=await t.get({preview:!0});return{valid:!0,result:n}}catch(n){return{valid:!1,error:n}}};import{useEffect as Ft,useState as jt}from"react";var _r=e=>{let[t,n]=jt({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:o}=e||{};return Ft(()=>{if(!a||!r)return;(async()=>{n({validating:!0,error:void 0});let{error:i,result:l}=await Ue({apiHost:r,apiKey:a,projectId:o});n(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,o]),{validating:t.validating,error:t.error,result:t.result}};export*from"@uniformdev/design-system";export{Br as ContextData,Te as CriteriaMatchMenu,Ee as CriteriaOperatorMenu,ke as DimensionMenu,Oe as DimensionValue,ce as EditLink,xn as EnrichmentTag,lr as PersonalizationCriteria,Le as PersonalizationCriteriaStatic,vr as ProjectUIVersion,it as addEnrichmentLink,Me as contextCriteriaMenuOperators,Tt as convertErrorsToObj,Xo as isEnrichmentTagData,Jo as isPersonalizationCriteriaData,se as opHasRhs,Pr as useContextConfig,F as useContextData,S as useDimensions,Tr as useDimensionsDataContext,kr as useManifest,_r as useValidateContextConfig,Ue as validateContextConfig};
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var ct=Object.create;var X=Object.defineProperty;var dt=Object.getOwnPropertyDescriptor;var ft=Object.getOwnPropertyNames;var gt=Object.getPrototypeOf,Ct=Object.prototype.hasOwnProperty;var ht=(e,t)=>{for(var n in t)X(e,n,{get:t[n],enumerable:!0})},Y=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of ft(t))!Ct.call(e,r)&&r!==n&&X(e,r,{get:()=>t[r],enumerable:!(a=dt(t,r))||a.enumerable});return e},S=(e,t,n)=>(Y(e,t,"default"),n&&Y(n,t,"default")),J=(e,t,n)=>(n=e!=null?ct(gt(e)):{},Y(t||!e||!e.__esModule?X(n,"default",{value:e,enumerable:!0}):n,e)),bt=e=>Y(X({},"__esModule",{value:!0}),e);var M={};ht(M,{ContextData:()=>Ot,CriteriaMatchMenu:()=>Ve,CriteriaOperatorMenu:()=>Ie,DimensionMenu:()=>Se,DimensionValue:()=>Me,EditLink:()=>he,EnrichmentTag:()=>yt,PersonalizationCriteria:()=>St,PersonalizationCriteriaStatic:()=>Be,ProjectUIVersion:()=>Vt,addEnrichmentLink:()=>Ae,contextCriteriaMenuOperators:()=>De,convertErrorsToObj:()=>st,isEnrichmentTagData:()=>Mt,isPersonalizationCriteriaData:()=>Et,opHasRhs:()=>ce,useContextConfig:()=>Bt,useContextData:()=>F,useDimensions:()=>k,useDimensionsDataContext:()=>kt,useManifest:()=>Pt,useValidateContextConfig:()=>Tt,validateContextConfig:()=>ke});module.exports=bt(M);var c=require("@emotion/react"),b=J(require("react"));var ze=require("@uniformdev/design-system"),Le=require("react-icons/cg");var Te=require("@emotion/react"),Ne=Te.css`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
&:focus {
|
|
10
10
|
text-decoration-line: underline;
|
|
11
11
|
}
|
|
12
|
-
`;var
|
|
12
|
+
`;var Q=require("@emotion/react/jsx-runtime"),he=({linkTo:e,name:t,linkText:n=`Edit ${t} Component`})=>(0,Q.jsxs)("a",{css:Ne,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[n,(0,Q.jsx)(ze.Icon,{icon:Le.CgChevronRight,iconColor:"currentColor",size:"1.5rem"})]});var T=require("react");var Z=require("react"),$=require("@uniformdev/context/api");function $e(e,t,n){return e.reduce((a,r)=>{let o=t(r);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return a[t(r)]=n?n(r):r,a},{})}function k({apiHost:e,apiKey:t,projectId:n}){let[a,r]=(0,Z.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,Z.useEffect)(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new $.CachedDimensionClient({projectId:n,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:(0,$.computeDimensionDisplayName)(d)})),l={dimensions:i,dimIndex:$e(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof $.ApiClientError?i=s.message:i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}var ee=require("@uniformdev/context"),x=require("@uniformdev/design-system"),A=require("react-icons/cg"),be=J(require("immer")),te=require("@emotion/react"),m=require("@emotion/react/jsx-runtime"),Ae=te.css`
|
|
13
13
|
flex: 2;
|
|
14
14
|
display: flex;
|
|
15
15
|
width: 50%;
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
&:focus {
|
|
21
21
|
text-decoration-line: underline;
|
|
22
22
|
}
|
|
23
|
-
`,
|
|
23
|
+
`,yt=({value:e,setValue:t,contextConfig:n,displayTitle:a=!0})=>{let{loading:r,result:o,error:s}=k(n),i=(0,T.useMemo)(()=>{if(o)return o.dimensions.filter(v=>v.category==="ENR")},[o]),l=(0,T.useMemo)(()=>{if(!e)return i;if(i)return i.filter(v=>!e.some(R=>(0,ee.getEnrichmentVectorKey)(R.cat,R.key)===v.dim))},[i,e]),[d,h]=(0,T.useState)(""),[u,p]=(0,T.useState)(50),[g,E]=(0,T.useState)(!1),C=i==null?void 0:i.find(v=>v.dim===d),y=()=>{let[v,R]=d.split("_");B([...e!=null?e:[],{cat:v,key:R,str:u}]),h(""),p(50),E(!1)},B=v=>{let R=[];o?R=v.filter(q=>{let K=o.dimIndex[(0,ee.getEnrichmentVectorKey)(q.cat,q.key)];return Boolean(K)}):R=v;let j=R.length===0?null:R;t(j)};return s?(0,m.jsx)(x.Callout,{type:"danger",children:s}):r||o===null?(0,m.jsx)(x.LoadingIndicator,{}):(0,m.jsxs)("fieldset",{className:"enrichment-tag",children:[a?(0,m.jsx)("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"},children:(0,m.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Enrichment Tags"})}):null,i!=null&&i.length?!g&&!e?(0,m.jsx)(x.Callout,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,m.jsxs)("p",{children:["Click"," ",(0,m.jsx)("a",{onClick:()=>E(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"},children:"here"})," ","to assign your first enrichment tag."]})}):(0,m.jsxs)(m.Fragment,{children:[o&&(0,m.jsx)(wt,{list:e!=null?e:[],setList:B,dimIndex:o.dimIndex}),g&&l&&l.length>0?(0,m.jsxs)("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"},children:[(0,m.jsx)("div",{css:{flexGrow:1},children:(0,m.jsx)(x.InputSelect,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:d,options:[{label:"Select",value:""},...l.map(v=>({label:v.displayName,value:v.dim}))],onChange:v=>h(v.currentTarget.value)})}),(0,m.jsx)(It,{score:u,setValue:p,cap:C?C.cap:100,css:{flexBasis:"9rem"}}),(0,m.jsx)(x.Button,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:y,disabled:!d,children:"Add"})]}):null,(0,m.jsxs)("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"},children:[!g&&l&&l.length>0&&e?(0,m.jsx)(x.AddListButton,{className:"add-more",buttonText:"Add More",onButtonClick:()=>E(!0)}):(0,m.jsx)("a",{css:Ae,title:"none",href:"#"}),(0,m.jsx)(he,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`})]})]}):(0,m.jsx)(xt,{contextConfig:n})]})},xt=({contextConfig:e})=>(0,m.jsx)(x.Callout,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"},children:(0,m.jsxs)("p",{children:["Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",(0,m.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"here"}),"."]})}),Ue=(e,t=100,n=0)=>Math.max(Math.min(e,t),n),Ge=te.css`
|
|
24
24
|
position: absolute;
|
|
25
25
|
bottom: 0.875rem;
|
|
26
26
|
left: var(--spacing-sm);
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
background-color: var(--gray-100);
|
|
33
33
|
border: 1px solid var(--gray-300);
|
|
34
34
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
36
|
-
${
|
|
35
|
+
`,Dt=te.css`
|
|
36
|
+
${Ge}
|
|
37
37
|
left: auto;
|
|
38
38
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
39
|
+
`,It=({score:e,setValue:t,cap:n=100,...a})=>{let r=o=>{let s=o==="increment"?e+10:e-10;s<0&&(s=0),s>n&&(s=n),t(s)};return(0,m.jsxs)("div",{css:{position:"relative"},...a,children:[(0,m.jsx)(x.Input,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:n,value:e,onChange:o=>t(Ue(Number(o.currentTarget.value)||0,n)),css:{textAlign:"center",boxSizing:"border-box"}}),(0,m.jsx)("button",{type:"button",title:"Reduce enrichment count",onClick:()=>r("decrement"),disabled:e===0,className:"scoreCounterButton",css:Ge,children:(0,m.jsx)(x.Icon,{icon:A.CgMathMinus,iconColor:"gray",size:"1.5rem"})}),(0,m.jsx)("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:Dt,children:(0,m.jsx)(x.Icon,{icon:A.CgMathPlus,iconColor:"gray",size:"1.5rem"})})]})},wt=({list:e,setList:t,dimIndex:n})=>{let a=o=>{t((0,be.default)(e,s=>{s.splice(o,1)}))},r=(o,s)=>{var l;let i=(l=n[`${e[o].cat}_${e[o].key}`])==null?void 0:l.cap;t((0,be.default)(e,d=>{d[o].str=Ue(Number(s)||0,i)}))};return(0,m.jsx)(m.Fragment,{children:e.map((o,s)=>{let i=n[(0,ee.getEnrichmentVectorKey)(o.cat,o.key)];if(!!i)return(0,m.jsxs)("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",children:[(0,m.jsx)("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"},children:i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`}),(0,m.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"},children:(0,m.jsx)(x.Input,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:l=>r(s,l.currentTarget.value)})}),(0,m.jsx)("button",{type:"button",title:"Delete enrichment",onClick:()=>a(s),css:{border:0},children:(0,m.jsx)(x.Icon,{icon:A.CgCloseO,iconColor:"red",size:"1.5rem"})})]},`${o.cat}-${o.key}`)})})};var it=require("react");var _=require("@uniformdev/design-system");var ot=require("@emotion/react"),V=require("@uniformdev/design-system"),Oe=J(require("immer")),rt=require("react-icons/cg");var N=require("@emotion/react"),ve="6rem",He=N.css`
|
|
40
40
|
position: relative;
|
|
41
41
|
padding: var(--spacing-base);
|
|
42
42
|
border: 1px solid var(--gray-300);
|
|
@@ -61,21 +61,27 @@
|
|
|
61
61
|
display: none;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
`,
|
|
65
|
-
display:
|
|
64
|
+
`,We=N.css`
|
|
65
|
+
display: flex;
|
|
66
66
|
gap: var(--spacing-xs);
|
|
67
67
|
flex-grow: 1;
|
|
68
|
+
flex-wrap: wrap;
|
|
68
69
|
margin-right: var(--spacing-base);
|
|
69
|
-
`,
|
|
70
|
+
`,ne=N.css`
|
|
70
71
|
width: 100%;
|
|
71
72
|
display: flex;
|
|
72
73
|
align-items: stretch;
|
|
73
|
-
`,
|
|
74
|
+
`,ye=N.css`
|
|
75
|
+
flex: 2;
|
|
76
|
+
height: 52px;
|
|
77
|
+
min-width: 200px;
|
|
78
|
+
`,qe=N.css`
|
|
79
|
+
flex: 1;
|
|
80
|
+
min-width: 80px;
|
|
81
|
+
`,oe=N.css`
|
|
74
82
|
height: 100%;
|
|
75
83
|
width: 100%;
|
|
76
|
-
|
|
77
|
-
height: 100%;
|
|
78
|
-
`;var We=require("@uniformdev/design-system");var Ue=require("@emotion/react"),xt=require("@emotion/react/jsx-runtime");function oe({op:e}){return(0,xt.jsx)("div",{className:"operation-bubble",css:Ue.css`
|
|
84
|
+
`;var Ye=require("@uniformdev/design-system");var _e=require("@emotion/react"),Fe=require("@emotion/react/jsx-runtime");function re({op:e}){return(0,Fe.jsx)("div",{className:"operation-bubble",css:_e.css`
|
|
79
85
|
align-items: center;
|
|
80
86
|
background: var(--gray-700);
|
|
81
87
|
border-radius: var(--rounded-full);
|
|
@@ -85,7 +91,6 @@
|
|
|
85
91
|
height: 30px;
|
|
86
92
|
justify-content: center;
|
|
87
93
|
font-size: var(--fs-base);
|
|
88
|
-
`,children:e})}var
|
|
89
|
-
${
|
|
90
|
-
|
|
91
|
-
`,className:"criteriaItemInner",children:[(0,f.jsx)("div",{css:te,className:"criteria-wrapper","data-test-id":"select-criteria",children:(0,f.jsx)(we,{errorMessage:(j=d.lhs)==null?void 0:j[y],css:ne,styles:{control:D=>({...D,height:"100%"})},dimensions:n.dimensions,onChange:D=>{g({...C,l:D.dim},y)},value:n.dimIndex[C.l],onMenuOpen:a,onMenuClose:r})}),(0,f.jsx)("div",{css:te,className:"criteria-wrapper","data-test-id":"select-operator",children:(0,f.jsx)(xe,{name:`op-${y}`,css:ne,styles:{control:D=>({...D,height:"100%"})},value:C.op,onChange:D=>{g(D==="+"||D==="-"?{...C,op:D,r:void 0,rDim:void 0}:{...C,op:D},y)},onMenuOpen:a,onMenuClose:r})}),v?(0,f.jsx)("div",{css:te,className:"criteria-wrapper","data-test-id":"select-match-criteria",children:(0,f.jsx)(Re,{errorMessage:(G=d.rhs)==null?void 0:G[y],css:ne,styles:{control:D=>({...D,height:"100%"})},criteriaMatch:C,onChange:D=>{g(D,y)},isDisabled:!P,dimensions:n,onMenuOpen:a,onMenuClose:r})}):null]}),(0,f.jsx)("button",{type:"button",onClick:()=>E(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:(0,f.jsx)(V.Icon,{icon:Ze.CgCloseO,iconColor:"red",size:"1.5rem"})}),y>0?(0,f.jsx)("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:(0,f.jsx)(V.InputInlineSelect,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(K=h.op)!=null?K:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:D=>{p(D.value)}})}):null]},y)})}):(0,f.jsx)(V.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)(V.Paragraph,{children:'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.'})}),n.dimensions.length===0?l!=null&&l.NoDimensionsDefined?(0,f.jsx)(l.NoDimensionsDefined,{}):(0,f.jsx)(V.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)("p",{children:"You do not have any dimensions configured."})}):(0,f.jsx)(V.AddListButton,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:u})]})};var w=J(require("yup")),tt=require("react-use");function wt(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Rt(e){return e.crit!==void 0}function pe(e){return e!=="+"&&e!=="-"}var T=require("@emotion/react/jsx-runtime");function nt(e){let t={crit:[]};return e.forEach(n=>{if(!n.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...n.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let o=Number(r[1]),s=r[2];if(t.crit.length>o)t.crit[o]={...t.crit[o],[s]:n.message};else{let i={};i[s]=n.message,t.crit.push(i)}}}),t}async function Se(e,t){let n=w.object().shape({l:w.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected left-side criteria dimension does not exist"),op:w.string().required(),r:w.mixed().nullable().when(["rDim","op"],{is:(a,r)=>pe(r)&&!a,then:w.string().required("Choose a score or dimension")}),rDim:w.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected right-side criteria dimension does not exist").when(["r","op"],{is:(a,r)=>pe(r)&&!a,then:w.string().required("Choose a score or dimension")})},["rDim","r"]);try{await w.object({crit:w.array(n)}).nullable().validate(e,{abortEarly:!1})}catch(a){return nt(a.inner)}}var Mt=({contextConfig:e,value:t,setValue:n,...a})=>{var h,p;let[r,o]=(0,et.useState)(void 0),{loading:s,result:i,error:l}=O(e);return(0,tt.useAsync)(async()=>{if(t&&i){let u=await Se(t,i);o(u)}},[t,i,Se]),l?(0,T.jsx)(W.Callout,{type:"danger",children:l}):s||i===null?(0,T.jsx)(W.LoadingIndicator,{}):(0,T.jsx)(Ee,{...a,value:t,setValue:async u=>{let g=await Se(u,i);o(g),n(u)},errors:{lhs:(h=r==null?void 0:r.crit)==null?void 0:h.map(u=>u==null?void 0:u.l),rhs:(p=r==null?void 0:r.crit)==null?void 0:p.map(u=>u==null?void 0:u.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>(0,T.jsx)(W.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,T.jsxs)("p",{children:["You do not have any dimensions configured. Create your first"," ",(0,T.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};var ce=require("react"),de=require("@uniformdev/context/api");function _({apiHost:e,apiKey:t,projectId:n}){let[a,r]=(0,ce.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,ce.useEffect)(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new de.CachedManifestClient({projectId:n,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof de.ApiClientError?(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(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}var ot=require("@uniformdev/design-system"),F=require("@emotion/react/jsx-runtime");function Et({children:e,versionMap:t,contextConfig:n}){let{loading:a,result:r}=_(n);if(a)return(0,F.jsx)(ot.LoadingIndicator,{});if(r){let o=t[r.project.ui_version];if(o)return(0,F.jsx)(o,{})}return(0,F.jsx)(F.Fragment,{children:e})}var U=require("react");var rt=require("@uniformdev/design-system"),B=require("@emotion/react/jsx-runtime"),fe=(0,U.createContext)(null),St=({loadingComponent:e,errorComponent:t,contextConfig:n,children:a})=>{let r=_(n),o=O(n);return r.error||r.notConfigured?t?(0,B.jsx)(t,{contextConfig:n,result:r}):(0,B.jsx)(B.Fragment,{children:"ErrorComponent is not configured"}):o.error||o.notConfigured?t?(0,B.jsx)(t,{contextConfig:n,result:o}):(0,B.jsx)(B.Fragment,{children:"ErrorComponent is not configured"}):r.loading||o.loading?e?(0,B.jsx)(e,{}):(0,B.jsx)(rt.LoadingIndicator,{}):(0,B.jsx)(fe.Provider,{value:{manifest:r.result,dimensions:o.result,contextConfig:n},children:a})};function Vt(){let e=(0,U.useContext)(fe);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Bt(){let e=(0,U.useContext)(fe);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function Pt(){let e=(0,U.useContext)(fe);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}var it=require("uuid"),at=require("@uniformdev/context/api"),Ve=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,it.validate)(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new at.UncachedManifestClient({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let n=await t.get({preview:!0});return{valid:!0,result:n}}catch(n){return{valid:!1,error:n}}};var ge=require("react");var Ot=e=>{let[t,n]=(0,ge.useState)({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:o}=e||{};return(0,ge.useEffect)(()=>{if(!a||!r)return;(async()=>{n({validating:!0,error:void 0});let{error:i,result:l}=await Ve({apiHost:r,apiKey:a,projectId:o});n(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,o]),{validating:t.validating,error:t.error,result:t.result}};S(M,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,CriteriaMatchMenu,CriteriaOperatorMenu,DimensionMenu,DimensionValue,EditLink,EnrichmentTag,PersonalizationCriteria,PersonalizationCriteriaStatic,ProjectUIVersion,addEnrichmentLink,contextCriteriaMenuOperators,convertErrorsToObj,isEnrichmentTagData,isPersonalizationCriteriaData,opHasRhs,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});
|
|
94
|
+
`,children:e})}var U=require("@emotion/react/jsx-runtime"),je=e=>{var l,d;let{data:t,getStyles:n,isDisabled:a,innerRef:r,innerProps:o}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return(0,U.jsxs)("div",{css:{...n("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...o,children:[i?(0,U.jsx)(re,{op:s}):(0,U.jsx)("div",{css:{width:"20px",height:"20px"}}),(0,U.jsx)("div",{children:i!=null?i:s})]})};var xe=require("@emotion/react/jsx-runtime"),Ke=e=>{let{data:t,getStyles:n}=e;return(0,xe.jsx)("div",{css:{...n("singleValue",e),width:"max-content"},children:t.label.length===1?(0,xe.jsx)(re,{op:t.label}):t.label})};var Xe=require("@emotion/react/jsx-runtime"),De=[{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 Ie({onChange:e,value:t,...n}){var a,r;return(0,Xe.jsx)(Ye.InputComboBox,{...n,value:{label:(r=(a=De.find(o=>o.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:De.map(o=>({label:o.description?`${o.name}:${o.description}`:o.name,value:o.value})),styles:{...n.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=n.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}},menu:(o,s)=>{var i,l;return{...o,width:"max-content",...(l=(i=n.styles)==null?void 0:i.menu)==null?void 0:l.call(i,o,s)}},control:(o,s)=>{var i,l;return{...o,border:0,...(l=(i=n.styles)==null?void 0:i.control)==null?void 0:l.call(i,o,s)}},indicatorSeparator:(o,s)=>{var i,l;return{...o,display:"none",...(l=(i=n.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(o.value)},components:{SingleValue:Ke,Option:je,...n.components}})}var et=require("@uniformdev/design-system");var Je=require("@uniformdev/design-system");function we(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function ie(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function ae(e){let t=[],n="";for(let a of e){let[r]=a.displayName.split(":");n!==r&&(t.push({label:r,options:[]}),n=r),t[t.length-1].options.push(we(a))}return t}var G=require("@emotion/react/jsx-runtime"),se=e=>{var r;let{data:t,getStyles:n,className:a}=e;return(0,G.jsx)("div",{css:{...n("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:(0,G.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[(0,G.jsx)(Je.Icon,{icon:ie((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),(0,G.jsx)("span",{children:t.label})]})})};var Qe=require("@emotion/react/jsx-runtime");function le({message:e}){return e?(0,Qe.jsx)("div",{css:{position:"absolute",background:"white",borderRadius:"3px",fontSize:"0.8rem",color:"var(--brand-primary-2)",bottom:"calc(var(--spacing-xs) * -1)"},children:e}):null}var Re=require("@emotion/react/jsx-runtime"),me=e=>{var u,p;let{data:t,getStyles:n,cx:a,isDisabled:r,isFocused:o,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,h]=(p=(u=t.label)==null?void 0:u.split(":"))!=null?p:[];return(0,Re.jsx)("div",{css:n("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":o,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:(0,Re.jsx)("div",{css:{color:"var(--gray-700)"},children:h!=null?h:t.label})})};var Ze=require("@uniformdev/design-system");var z=require("@emotion/react/jsx-runtime");function Me({displayName:e}){let[t,n]=e.split(":");return(0,z.jsxs)("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[n?(0,z.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?(0,z.jsx)(Ze.Icon,{icon:ie(t),iconColor:"currentColor",size:16}):null,(0,z.jsx)("span",{"data-test-id":"dimension-name",children:t})]}):null,(0,z.jsx)("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:n!=null?n:t})]})}var Ee=require("@emotion/react/jsx-runtime"),pe=e=>{let{data:t,getStyles:n}=e;return(0,Ee.jsx)("div",{css:n("singleValue",e),children:(0,Ee.jsx)(Me,{displayName:t.label})})};var L=require("@emotion/react/jsx-runtime");function Se({onChange:e,value:t,dimensions:n,errorMessage:a,...r}){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(et.InputComboBox,{...r,value:t?we(t):void 0,options:ae(n),styles:{...r.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(n.find(s=>s.dim===o.value))},components:{Option:me,SingleValue:pe,GroupHeading:se,...r.components}}),(0,L.jsx)(le,{message:a})]})}var tt=require("@uniformdev/design-system"),nt=require("react");var I=require("@emotion/react/jsx-runtime");function Ve({onChange:e,criteriaMatch:t,dimensions:n,errorMessage:a,...r}){var d,h;let[o,s]=(0,nt.useState)(typeof t.r!="undefined"&&ue(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?n.dimIndex[t.rDim]:void 0;return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(tt.InputComboBox,{...r,inputValue:o,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(h=t.rDim)!=null?h: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},...ae(n.dimensions)],styles:{...r.styles,valueContainer:(u,p)=>{var g,E;return{...u,padding:"var(--spacing-sm)",...(E=(g=r.styles)==null?void 0:g.valueContainer)==null?void 0:E.call(g,u,p)}},option:(u,p)=>{var g,E;return{fontSize:p.isDisabled?"0.8rem":void 0,...(E=(g=r.styles)==null?void 0:g.option)==null?void 0:E.call(g,u,p)}}},onChange:u=>{var p;u&&(e({...t,rDim:(p=u.value)==null?void 0:p.toString(),r:void 0}),s(""))},onInputChange:(u,p)=>{let g=ue(u);p.action==="input-change"||p.action==="set-value"?(s(u),(g||u==="")&&e({...t,r:u||void 0,rDim:void 0})):!g&&!ue(p.prevInputValue)&&(!u&&t.r?s(t.r.toString()):s(u))},components:{...r.components,Option:me,SingleValue:pe,GroupHeading:se},noOptionsMessage:({inputValue:u})=>ue(u)?(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)("div",{children:["Score: ",u]}),(0,I.jsx)("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)("div",{children:["No dimensions match your search \u201C",u,"\u201D"]}),(0,I.jsx)("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),(0,I.jsx)(le,{message:a})]})}function ue(e){return/^\d+$/.test(e.toString(10))}var f=require("@emotion/react/jsx-runtime"),Be=({value:e,setValue:t,dimensions:n,onMenuOpen:a,onMenuClose:r,onAddCriteria:o,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let h=e||{crit:[]},u=C=>{t({...h,op:C==="&"?void 0:C})},p=()=>{let C={...h,crit:[...h.crit,{l:"",op:">",r:0}]};t(C),o==null||o(C)},g=(C,y)=>{t((0,Oe.default)(h,B=>{B.crit[y]=C}))},E=C=>{let y=(0,Oe.default)(h,v=>{v.crit.splice(C,1)}),B=y.crit.length===0?null:y;t(B),s==null||s(B)};return(0,f.jsxs)("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?(0,f.jsx)(l.Title,{}):(0,f.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?(0,f.jsx)(l.CustomVariantName,{}):null,h.crit.length?(0,f.jsx)("div",{children:h.crit.map((C,y)=>{var R,j,q,K;let B=((R=C.l)==null?void 0:R.length)>0,v=C.op!=="+"&&C.op!=="-";return(0,f.jsxs)("div",{css:He,"data-test-id":"criteria-container",children:[(0,f.jsxs)("div",{css:ot.css`
|
|
95
|
+
${We}/* grid-template-columns: minmax(0, 1fr) ${v?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
|
|
96
|
+
`,className:"criteriaItemInner",children:[(0,f.jsx)("div",{css:[ne,ye],className:"criteria-wrapper","data-test-id":"select-criteria",children:(0,f.jsx)(Se,{errorMessage:(j=d.lhs)==null?void 0:j[y],css:oe,styles:{control:D=>({...D,height:"100%"})},dimensions:n.dimensions,onChange:D=>{g({...C,l:D.dim},y)},value:n.dimIndex[C.l],onMenuOpen:a,onMenuClose:r})}),(0,f.jsx)("div",{css:[ne,qe],className:"criteria-wrapper","data-test-id":"select-operator",children:(0,f.jsx)(Ie,{name:`op-${y}`,css:oe,styles:{control:D=>({...D,height:"100%"})},value:C.op,onChange:D=>{g(D==="+"||D==="-"?{...C,op:D,r:void 0,rDim:void 0}:{...C,op:D},y)},onMenuOpen:a,onMenuClose:r})}),v?(0,f.jsx)("div",{css:[ne,ye],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:(0,f.jsx)(Ve,{errorMessage:(q=d.rhs)==null?void 0:q[y],css:oe,styles:{control:D=>({...D,height:"100%"})},criteriaMatch:C,onChange:D=>{g(D,y)},isDisabled:!B,dimensions:n,onMenuOpen:a,onMenuClose:r})}):null]}),(0,f.jsx)("button",{type:"button",onClick:()=>E(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:(0,f.jsx)(V.Icon,{icon:rt.CgCloseO,iconColor:"red",size:"1.5rem"})}),y>0?(0,f.jsx)("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:(0,f.jsx)(V.InputInlineSelect,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(K=h.op)!=null?K:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:D=>{u(D.value)}})}):null]},y)})}):(0,f.jsx)(V.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)(V.Paragraph,{children:'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.'})}),n.dimensions.length===0?l!=null&&l.NoDimensionsDefined?(0,f.jsx)(l.NoDimensionsDefined,{}):(0,f.jsx)(V.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,f.jsx)("p",{children:"You do not have any dimensions configured."})}):(0,f.jsx)(V.AddListButton,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:p})]})};var w=J(require("yup")),at=require("react-use");function Mt(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Et(e){return e.crit!==void 0}function ce(e){return e!=="+"&&e!=="-"}var P=require("@emotion/react/jsx-runtime");function st(e){let t={crit:[]};return e.forEach(n=>{if(!n.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...n.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let o=Number(r[1]),s=r[2];if(t.crit.length>o)t.crit[o]={...t.crit[o],[s]:n.message};else{let i={};i[s]=n.message,t.crit.push(i)}}}),t}async function Pe(e,t){let n=w.object().shape({l:w.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected left-side criteria dimension does not exist"),op:w.string().required(),r:w.mixed().nullable().when(["rDim","op"],{is:(a,r)=>ce(r)&&!a,then:w.string().required("Choose a score or dimension")}),rDim:w.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected right-side criteria dimension does not exist").when(["r","op"],{is:(a,r)=>ce(r)&&!a,then:w.string().required("Choose a score or dimension")})},["rDim","r"]);try{await w.object({crit:w.array(n)}).nullable().validate(e,{abortEarly:!1})}catch(a){return st(a.inner)}}var St=({contextConfig:e,value:t,setValue:n,...a})=>{var h,u;let[r,o]=(0,it.useState)(void 0),{loading:s,result:i,error:l}=k(e);return(0,at.useAsync)(async()=>{if(t&&i){let p=await Pe(t,i);o(p)}},[t,i,Pe]),l?(0,P.jsx)(_.Callout,{type:"danger",children:l}):s||i===null?(0,P.jsx)(_.LoadingIndicator,{}):(0,P.jsx)(Be,{...a,value:t,setValue:async p=>{let g=await Pe(p,i);o(g),n(p)},errors:{lhs:(h=r==null?void 0:r.crit)==null?void 0:h.map(p=>p==null?void 0:p.l),rhs:(u=r==null?void 0:r.crit)==null?void 0:u.map(p=>p==null?void 0:p.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>(0,P.jsx)(_.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:(0,P.jsxs)("p",{children:["You do not have any dimensions configured. Create your first"," ",(0,P.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};var de=require("react"),fe=require("@uniformdev/context/api");function F({apiHost:e,apiKey:t,projectId:n}){let[a,r]=(0,de.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,de.useEffect)(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new fe.CachedManifestClient({projectId:n,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof fe.ApiClientError?(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(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}var lt=require("@uniformdev/design-system"),H=require("@emotion/react/jsx-runtime");function Vt({children:e,versionMap:t,contextConfig:n}){let{loading:a,result:r}=F(n);if(a)return(0,H.jsx)(lt.LoadingIndicator,{});if(r){let o=t[r.project.ui_version];if(o)return(0,H.jsx)(o,{})}return(0,H.jsx)(H.Fragment,{children:e})}var W=require("react");var mt=require("@uniformdev/design-system"),O=require("@emotion/react/jsx-runtime"),ge=(0,W.createContext)(null),Ot=({loadingComponent:e,errorComponent:t,contextConfig:n,children:a})=>{let r=F(n),o=k(n);return r.error||r.notConfigured?t?(0,O.jsx)(t,{contextConfig:n,result:r}):(0,O.jsx)(O.Fragment,{children:"ErrorComponent is not configured"}):o.error||o.notConfigured?t?(0,O.jsx)(t,{contextConfig:n,result:o}):(0,O.jsx)(O.Fragment,{children:"ErrorComponent is not configured"}):r.loading||o.loading?e?(0,O.jsx)(e,{}):(0,O.jsx)(mt.LoadingIndicator,{}):(0,O.jsx)(ge.Provider,{value:{manifest:r.result,dimensions:o.result,contextConfig:n},children:a})};function Bt(){let e=(0,W.useContext)(ge);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function Pt(){let e=(0,W.useContext)(ge);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function kt(){let e=(0,W.useContext)(ge);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}var pt=require("uuid"),ut=require("@uniformdev/context/api"),ke=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,pt.validate)(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new ut.UncachedManifestClient({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let n=await t.get({preview:!0});return{valid:!0,result:n}}catch(n){return{valid:!1,error:n}}};var Ce=require("react");var Tt=e=>{let[t,n]=(0,Ce.useState)({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:o}=e||{};return(0,Ce.useEffect)(()=>{if(!a||!r)return;(async()=>{n({validating:!0,error:void 0});let{error:i,result:l}=await ke({apiHost:r,apiKey:a,projectId:o});n(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,o]),{validating:t.validating,error:t.error,result:t.result}};S(M,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,CriteriaMatchMenu,CriteriaOperatorMenu,DimensionMenu,DimensionValue,EditLink,EnrichmentTag,PersonalizationCriteria,PersonalizationCriteriaStatic,ProjectUIVersion,addEnrichmentLink,contextCriteriaMenuOperators,convertErrorsToObj,isEnrichmentTagData,isPersonalizationCriteriaData,opHasRhs,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as
|
|
1
|
+
import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as We}from"@uniformdev/design-system";import{CgChevronRight as qe}from"react-icons/cg";import{css as Ge}from"@emotion/react";var ue=Ge`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +9,7 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
9
9
|
&:focus {
|
|
10
10
|
text-decoration-line: underline;
|
|
11
11
|
}
|
|
12
|
-
`;import{jsx as
|
|
12
|
+
`;import{jsx as _e,jsxs as Fe}from"@emotion/react/jsx-runtime";var ce=({linkTo:e,name:t,linkText:n=`Edit ${t} Component`})=>Fe("a",{css:ue,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[n,_e(We,{icon:qe,iconColor:"currentColor",size:"1.5rem"})]});import{useMemo as fe,useState as K}from"react";import{useEffect as je,useState as Ke}from"react";import{computeDimensionDisplayName as Ye,ApiClientError as Xe,CachedDimensionClient as Je}from"@uniformdev/context/api";function de(e,t,n){return e.reduce((a,r)=>{let o=t(r);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return a[t(r)]=n?n(r):r,a},{})}function S({apiHost:e,apiKey:t,projectId:n}){let[a,r]=Ke({loading:!1,notConfigured:!1,error:null,result:null});return je(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new Je({projectId:n,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:Ye(d)})),l={dimensions:i,dimIndex:de(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof Xe?i=s.message:i=s.toString(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{getEnrichmentVectorKey as Y}from"@uniformdev/context";import{Input as Ce,Button as Qe,InputSelect as Ze,Callout as X,Icon as J,LoadingIndicator as et,AddListButton as tt}from"@uniformdev/design-system";import{CgMathPlus as nt,CgMathMinus as ot,CgCloseO as rt}from"react-icons/cg";import ge from"immer";import{css as Q}from"@emotion/react";import{Fragment as ve,jsx as u,jsxs as M}from"@emotion/react/jsx-runtime";var it=Q`
|
|
13
13
|
flex: 2;
|
|
14
14
|
display: flex;
|
|
15
15
|
width: 50%;
|
|
@@ -20,7 +20,7 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
20
20
|
&:focus {
|
|
21
21
|
text-decoration-line: underline;
|
|
22
22
|
}
|
|
23
|
-
`,
|
|
23
|
+
`,xn=({value:e,setValue:t,contextConfig:n,displayTitle:a=!0})=>{let{loading:r,result:o,error:s}=S(n),i=fe(()=>{if(o)return o.dimensions.filter(b=>b.category==="ENR")},[o]),l=fe(()=>{if(!e)return i;if(i)return i.filter(b=>!e.some(I=>Y(I.cat,I.key)===b.dim))},[i,e]),[d,C]=K(""),[p,m]=K(50),[f,w]=K(!1),g=i==null?void 0:i.find(b=>b.dim===d),y=()=>{let[b,I]=d.split("_");R([...e!=null?e:[],{cat:b,key:I,str:p}]),C(""),m(50),w(!1)},R=b=>{let I=[];o?I=b.filter(O=>{let T=o.dimIndex[Y(O.cat,O.key)];return Boolean(T)}):I=b;let k=I.length===0?null:I;t(k)};return s?u(X,{type:"danger",children:s}):r||o===null?u(et,{}):M("fieldset",{className:"enrichment-tag",children:[a?u("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"},children:u("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Enrichment Tags"})}):null,i!=null&&i.length?!f&&!e?u(X,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Click"," ",u("a",{onClick:()=>w(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"},children:"here"})," ","to assign your first enrichment tag."]})}):M(ve,{children:[o&&u(mt,{list:e!=null?e:[],setList:R,dimIndex:o.dimIndex}),f&&l&&l.length>0?M("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"},children:[u("div",{css:{flexGrow:1},children:u(Ze,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:d,options:[{label:"Select",value:""},...l.map(b=>({label:b.displayName,value:b.dim}))],onChange:b=>C(b.currentTarget.value)})}),u(lt,{score:p,setValue:m,cap:g?g.cap:100,css:{flexBasis:"9rem"}}),u(Qe,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:y,disabled:!d,children:"Add"})]}):null,M("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"},children:[!f&&l&&l.length>0&&e?u(tt,{className:"add-more",buttonText:"Add More",onButtonClick:()=>w(!0)}):u("a",{css:it,title:"none",href:"#"}),u(ce,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`})]})]}):u(at,{contextConfig:n})]})},at=({contextConfig:e})=>u(X,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Looks like you do not have any enrichment created in your connected Uniform project. Start by creating your first enrichment"," ",u("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"here"}),"."]})}),he=(e,t=100,n=0)=>Math.max(Math.min(e,t),n),be=Q`
|
|
24
24
|
position: absolute;
|
|
25
25
|
bottom: 0.875rem;
|
|
26
26
|
left: var(--spacing-sm);
|
|
@@ -32,11 +32,11 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
32
32
|
background-color: var(--gray-100);
|
|
33
33
|
border: 1px solid var(--gray-300);
|
|
34
34
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
36
|
-
${
|
|
35
|
+
`,st=Q`
|
|
36
|
+
${be}
|
|
37
37
|
left: auto;
|
|
38
38
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
39
|
+
`,lt=({score:e,setValue:t,cap:n=100,...a})=>{let r=o=>{let s=o==="increment"?e+10:e-10;s<0&&(s=0),s>n&&(s=n),t(s)};return M("div",{css:{position:"relative"},...a,children:[u(Ce,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:n,value:e,onChange:o=>t(he(Number(o.currentTarget.value)||0,n)),css:{textAlign:"center",boxSizing:"border-box"}}),u("button",{type:"button",title:"Reduce enrichment count",onClick:()=>r("decrement"),disabled:e===0,className:"scoreCounterButton",css:be,children:u(J,{icon:ot,iconColor:"gray",size:"1.5rem"})}),u("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:st,children:u(J,{icon:nt,iconColor:"gray",size:"1.5rem"})})]})},mt=({list:e,setList:t,dimIndex:n})=>{let a=o=>{t(ge(e,s=>{s.splice(o,1)}))},r=(o,s)=>{var l;let i=(l=n[`${e[o].cat}_${e[o].key}`])==null?void 0:l.cap;t(ge(e,d=>{d[o].str=he(Number(s)||0,i)}))};return u(ve,{children:e.map((o,s)=>{let i=n[Y(o.cat,o.key)];if(!!i)return M("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",children:[u("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"},children:i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`}),u("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"},children:u(Ce,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:l=>r(s,l.currentTarget.value)})}),u("button",{type:"button",title:"Delete enrichment",onClick:()=>a(s),css:{border:0},children:u(J,{icon:rt,iconColor:"red",size:"1.5rem"})})]},`${o.cat}-${o.key}`)})})};import{useState as Bt}from"react";import{LoadingIndicator as Pt,Callout as $e}from"@uniformdev/design-system";import{css as Rt}from"@emotion/react";import{Callout as Ne,InputInlineSelect as Mt,Icon as Et,AddListButton as St,Paragraph as Vt}from"@uniformdev/design-system";import ze from"immer";import{CgCloseO as Ot}from"react-icons/cg";import{css as V}from"@emotion/react";var Z="6rem",ye=V`
|
|
40
40
|
position: relative;
|
|
41
41
|
padding: var(--spacing-base);
|
|
42
42
|
border: 1px solid var(--gray-300);
|
|
@@ -61,21 +61,27 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
61
61
|
display: none;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
`,
|
|
65
|
-
display:
|
|
64
|
+
`,xe=V`
|
|
65
|
+
display: flex;
|
|
66
66
|
gap: var(--spacing-xs);
|
|
67
67
|
flex-grow: 1;
|
|
68
|
+
flex-wrap: wrap;
|
|
68
69
|
margin-right: var(--spacing-base);
|
|
69
|
-
`,N=
|
|
70
|
+
`,N=V`
|
|
70
71
|
width: 100%;
|
|
71
72
|
display: flex;
|
|
72
73
|
align-items: stretch;
|
|
73
|
-
`,
|
|
74
|
+
`,ee=V`
|
|
75
|
+
flex: 2;
|
|
76
|
+
height: 52px;
|
|
77
|
+
min-width: 200px;
|
|
78
|
+
`,De=V`
|
|
79
|
+
flex: 1;
|
|
80
|
+
min-width: 80px;
|
|
81
|
+
`,z=V`
|
|
74
82
|
height: 100%;
|
|
75
83
|
width: 100%;
|
|
76
|
-
|
|
77
|
-
height: 100%;
|
|
78
|
-
`;import{InputComboBox as ct}from"@uniformdev/design-system";import{css as mt}from"@emotion/react";import{jsx as ut}from"@emotion/react/jsx-runtime";function L({op:e}){return ut("div",{className:"operation-bubble",css:mt`
|
|
84
|
+
`;import{InputComboBox as ft}from"@uniformdev/design-system";import{css as ut}from"@emotion/react";import{jsx as ct}from"@emotion/react/jsx-runtime";function L({op:e}){return ct("div",{className:"operation-bubble",css:ut`
|
|
79
85
|
align-items: center;
|
|
80
86
|
background: var(--gray-700);
|
|
81
87
|
border-radius: var(--rounded-full);
|
|
@@ -85,7 +91,6 @@ import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}f
|
|
|
85
91
|
height: 30px;
|
|
86
92
|
justify-content: center;
|
|
87
93
|
font-size: var(--fs-base);
|
|
88
|
-
`,children:e})}import{jsx as
|
|
89
|
-
${
|
|
90
|
-
|
|
91
|
-
`,className:"criteriaItemInner",children:[v("div",{css:N,className:"criteria-wrapper","data-test-id":"select-criteria",children:v(Pe,{errorMessage:(k=d.lhs)==null?void 0:k[y],css:z,styles:{control:x=>({...x,height:"100%"})},dimensions:n.dimensions,onChange:x=>{f({...g,l:x.dim},y)},value:n.dimIndex[g.l],onMenuOpen:a,onMenuClose:r})}),v("div",{css:N,className:"criteria-wrapper","data-test-id":"select-operator",children:v(Re,{name:`op-${y}`,css:z,styles:{control:x=>({...x,height:"100%"})},value:g.op,onChange:x=>{f(x==="+"||x==="-"?{...g,op:x,r:void 0,rDim:void 0}:{...g,op:x},y)},onMenuOpen:a,onMenuClose:r})}),b?v("div",{css:N,className:"criteria-wrapper","data-test-id":"select-match-criteria",children:v(Oe,{errorMessage:(V=d.rhs)==null?void 0:V[y],css:z,styles:{control:x=>({...x,height:"100%"})},criteriaMatch:g,onChange:x=>{f(x,y)},isDisabled:!R,dimensions:n,onMenuOpen:a,onMenuClose:r})}):null]}),v("button",{type:"button",onClick:()=>w(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:v(Rt,{icon:St,iconColor:"red",size:"1.5rem"})}),y>0?v("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:v(wt,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(T=C.op)!=null?T:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:x=>{u(x.value)}})}):null]},y)})}):v(ke,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v(Et,{children:'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.'})}),n.dimensions.length===0?l!=null&&l.NoDimensionsDefined?v(l.NoDimensionsDefined,{}):v(ke,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v("p",{children:"You do not have any dimensions configured."})}):v(Mt,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:m})]})};import*as D from"yup";import{useAsync as Pt}from"react-use";function Co(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function ho(e){return e.crit!==void 0}function ae(e){return e!=="+"&&e!=="-"}import{jsx as O,jsxs as kt}from"@emotion/react/jsx-runtime";function Ot(e){let t={crit:[]};return e.forEach(n=>{if(!n.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...n.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let o=Number(r[1]),s=r[2];if(t.crit.length>o)t.crit[o]={...t.crit[o],[s]:n.message};else{let i={};i[s]=n.message,t.crit.push(i)}}}),t}async function se(e,t){let n=D.object().shape({l:D.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected left-side criteria dimension does not exist"),op:D.string().required(),r:D.mixed().nullable().when(["rDim","op"],{is:(a,r)=>ae(r)&&!a,then:D.string().required("Choose a score or dimension")}),rDim:D.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected right-side criteria dimension does not exist").when(["r","op"],{is:(a,r)=>ae(r)&&!a,then:D.string().required("Choose a score or dimension")})},["rDim","r"]);try{await D.object({crit:D.array(n)}).nullable().validate(e,{abortEarly:!1})}catch(a){return Ot(a.inner)}}var Eo=({contextConfig:e,value:t,setValue:n,...a})=>{var C,u;let[r,o]=Vt(void 0),{loading:s,result:i,error:l}=S(e);return Pt(async()=>{if(t&&i){let m=await se(t,i);o(m)}},[t,i,se]),l?O(ze,{type:"danger",children:l}):s||i===null?O(Bt,{}):O(Ne,{...a,value:t,setValue:async m=>{let f=await se(m,i);o(f),n(m)},errors:{lhs:(C=r==null?void 0:r.crit)==null?void 0:C.map(m=>m==null?void 0:m.l),rhs:(u=r==null?void 0:r.crit)==null?void 0:u.map(m=>m==null?void 0:m.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>O(ze,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:kt("p",{children:["You do not have any dimensions configured. Create your first"," ",O("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};import{useEffect as Tt,useState as Nt}from"react";import{ApiClientError as zt,CachedManifestClient as Lt}from"@uniformdev/context/api";function F({apiHost:e,apiKey:t,projectId:n}){let[a,r]=Nt({loading:!1,notConfigured:!1,error:null,result:null});return Tt(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Lt({projectId:n,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof zt?(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(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{LoadingIndicator as $t}from"@uniformdev/design-system";import{Fragment as At,jsx as le}from"@emotion/react/jsx-runtime";function No({children:e,versionMap:t,contextConfig:n}){let{loading:a,result:r}=F(n);if(a)return le($t,{});if(r){let o=t[r.project.ui_version];if(o)return le(o,{})}return le(At,{children:e})}import{createContext as Ut,useContext as me}from"react";import{LoadingIndicator as Gt}from"@uniformdev/design-system";import{Fragment as Le,jsx as E}from"@emotion/react/jsx-runtime";var j=Ut(null),_o=({loadingComponent:e,errorComponent:t,contextConfig:n,children:a})=>{let r=F(n),o=S(n);return r.error||r.notConfigured?t?E(t,{contextConfig:n,result:r}):E(Le,{children:"ErrorComponent is not configured"}):o.error||o.notConfigured?t?E(t,{contextConfig:n,result:o}):E(Le,{children:"ErrorComponent is not configured"}):r.loading||o.loading?e?E(e,{}):E(Gt,{}):E(j.Provider,{value:{manifest:r.result,dimensions:o.result,contextConfig:n},children:a})};function Fo(){let e=me(j);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function jo(){let e=me(j);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function Ko(){let e=me(j);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}import{validate as Ht}from"uuid";import{UncachedManifestClient as qt}from"@uniformdev/context/api";var $e=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(!Ht(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new qt({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let n=await t.get({preview:!0});return{valid:!0,result:n}}catch(n){return{valid:!1,error:n}}};import{useEffect as Wt,useState as _t}from"react";var nr=e=>{let[t,n]=_t({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:o}=e||{};return Wt(()=>{if(!a||!r)return;(async()=>{n({validating:!0,error:void 0});let{error:i,result:l}=await $e({apiHost:r,apiKey:a,projectId:o});n(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,o]),{validating:t.validating,error:t.error,result:t.result}};export*from"@uniformdev/design-system";export{_o as ContextData,Oe as CriteriaMatchMenu,Re as CriteriaOperatorMenu,Pe as DimensionMenu,Se as DimensionValue,pe as EditLink,fn as EnrichmentTag,Eo as PersonalizationCriteria,Ne as PersonalizationCriteriaStatic,No as ProjectUIVersion,ot as addEnrichmentLink,we as contextCriteriaMenuOperators,Ot as convertErrorsToObj,Co as isEnrichmentTagData,ho as isPersonalizationCriteriaData,ae as opHasRhs,Fo as useContextConfig,F as useContextData,S as useDimensions,Ko as useDimensionsDataContext,jo as useManifest,nr as useValidateContextConfig,$e as validateContextConfig};
|
|
94
|
+
`,children:e})}import{jsx as te,jsxs as dt}from"@emotion/react/jsx-runtime";var Ie=e=>{var l,d;let{data:t,getStyles:n,isDisabled:a,innerRef:r,innerProps:o}=e,[s,i]=(d=(l=t.label)==null?void 0:l.split(":"))!=null?d:[];return dt("div",{css:{...n("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...o,children:[i?te(L,{op:s}):te("div",{css:{width:"20px",height:"20px"}}),te("div",{children:i!=null?i:s})]})};import{jsx as we}from"@emotion/react/jsx-runtime";var Re=e=>{let{data:t,getStyles:n}=e;return we("div",{css:{...n("singleValue",e),width:"max-content"},children:t.label.length===1?we(L,{op:t.label}):t.label})};import{jsx as gt}from"@emotion/react/jsx-runtime";var Me=[{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 Ee({onChange:e,value:t,...n}){var a,r;return gt(ft,{...n,value:{label:(r=(a=Me.find(o=>o.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:Me.map(o=>({label:o.description?`${o.name}:${o.description}`:o.name,value:o.value})),styles:{...n.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=n.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}},menu:(o,s)=>{var i,l;return{...o,width:"max-content",...(l=(i=n.styles)==null?void 0:i.menu)==null?void 0:l.call(i,o,s)}},control:(o,s)=>{var i,l;return{...o,border:0,...(l=(i=n.styles)==null?void 0:i.control)==null?void 0:l.call(i,o,s)}},indicatorSeparator:(o,s)=>{var i,l;return{...o,display:"none",...(l=(i=n.styles)==null?void 0:i.indicatorSeparator)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(o.value)},components:{SingleValue:Re,Option:Ie,...n.components}})}import{InputComboBox as yt}from"@uniformdev/design-system";import{Icon as Ct}from"@uniformdev/design-system";function ne(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function $(e){if(!e)return"unavailable";let[t]=e.split(":");switch(t.toLowerCase()){case"signal":return"data";case"intent":return"assign";case"audience":return"boy";default:return"user-list"}}function A(e){let t=[],n="";for(let a of e){let[r]=a.displayName.split(":");n!==r&&(t.push({label:r,options:[]}),n=r),t[t.length-1].options.push(ne(a))}return t}import{jsx as oe,jsxs as ht}from"@emotion/react/jsx-runtime";var U=e=>{var r;let{data:t,getStyles:n,className:a}=e;return oe("div",{css:{...n("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:ht("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[oe(Ct,{icon:$((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),oe("span",{children:t.label})]})})};import{jsx as bt}from"@emotion/react/jsx-runtime";function G({message:e}){return e?bt("div",{css:{position:"absolute",background:"white",borderRadius:"3px",fontSize:"0.8rem",color:"var(--brand-primary-2)",bottom:"calc(var(--spacing-xs) * -1)"},children:e}):null}import{jsx as Se}from"@emotion/react/jsx-runtime";var H=e=>{var p,m;let{data:t,getStyles:n,cx:a,isDisabled:r,isFocused:o,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,C]=(m=(p=t.label)==null?void 0:p.split(":"))!=null?m:[];return Se("div",{css:n("option",e),className:a({option:!0,"option--is-disabled":r,"option--is-focused":o,"option--is-selected":s},i),ref:l,"aria-disabled":r,...d,children:Se("div",{css:{color:"var(--gray-700)"},children:C!=null?C:t.label})})};import{Icon as vt}from"@uniformdev/design-system";import{jsx as re,jsxs as Ve}from"@emotion/react/jsx-runtime";function Oe({displayName:e}){let[t,n]=e.split(":");return Ve("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[n?Ve("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?re(vt,{icon:$(t),iconColor:"currentColor",size:16}):null,re("span",{"data-test-id":"dimension-name",children:t})]}):null,re("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:n!=null?n:t})]})}import{jsx as Be}from"@emotion/react/jsx-runtime";var W=e=>{let{data:t,getStyles:n}=e;return Be("div",{css:n("singleValue",e),children:Be(Oe,{displayName:t.label})})};import{Fragment as xt,jsx as Pe,jsxs as Dt}from"@emotion/react/jsx-runtime";function ke({onChange:e,value:t,dimensions:n,errorMessage:a,...r}){return Dt(xt,{children:[Pe(yt,{...r,value:t?ne(t):void 0,options:A(n),styles:{...r.styles,valueContainer:(o,s)=>{var i,l;return{...o,padding:"var(--spacing-sm)",...(l=(i=r.styles)==null?void 0:i.valueContainer)==null?void 0:l.call(i,o,s)}}},onChange:o=>{o&&e(n.find(s=>s.dim===o.value))},components:{Option:H,SingleValue:W,GroupHeading:U,...r.components}}),Pe(G,{message:a})]})}import{InputComboBox as It}from"@uniformdev/design-system";import{useState as wt}from"react";import{Fragment as ie,jsx as _,jsxs as B}from"@emotion/react/jsx-runtime";function Te({onChange:e,criteriaMatch:t,dimensions:n,errorMessage:a,...r}){var d,C;let[o,s]=wt(typeof t.r!="undefined"&&q(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?n.dimIndex[t.rDim]:void 0;return B(ie,{children:[_(It,{...r,inputValue:o,menuShouldScrollIntoView:!0,value:{label:(d=l==null?void 0:l.displayName)!=null?d:i&&!l?`${t.rDim} (unknown)`:"",value:(C=t.rDim)!=null?C: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},...A(n.dimensions)],styles:{...r.styles,valueContainer:(p,m)=>{var f,w;return{...p,padding:"var(--spacing-sm)",...(w=(f=r.styles)==null?void 0:f.valueContainer)==null?void 0:w.call(f,p,m)}},option:(p,m)=>{var f,w;return{fontSize:m.isDisabled?"0.8rem":void 0,...(w=(f=r.styles)==null?void 0:f.option)==null?void 0:w.call(f,p,m)}}},onChange:p=>{var m;p&&(e({...t,rDim:(m=p.value)==null?void 0:m.toString(),r:void 0}),s(""))},onInputChange:(p,m)=>{let f=q(p);m.action==="input-change"||m.action==="set-value"?(s(p),(f||p==="")&&e({...t,r:p||void 0,rDim:void 0})):!f&&!q(m.prevInputValue)&&(!p&&t.r?s(t.r.toString()):s(p))},components:{...r.components,Option:H,SingleValue:W,GroupHeading:U},noOptionsMessage:({inputValue:p})=>q(p)?B(ie,{children:[B("div",{children:["Score: ",p]}),_("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):B(ie,{children:[B("div",{children:["No dimensions match your search \u201C",p,"\u201D"]}),_("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),_(G,{message:a})]})}function q(e){return/^\d+$/.test(e.toString(10))}import{jsx as v,jsxs as ae}from"@emotion/react/jsx-runtime";var Le=({value:e,setValue:t,dimensions:n,onMenuOpen:a,onMenuClose:r,onAddCriteria:o,onRemoveCriteria:s,displayTitle:i=!0,components:l,errors:d={}})=>{let C=e||{crit:[]},p=g=>{t({...C,op:g==="&"?void 0:g})},m=()=>{let g={...C,crit:[...C.crit,{l:"",op:">",r:0}]};t(g),o==null||o(g)},f=(g,y)=>{t(ze(C,R=>{R.crit[y]=g}))},w=g=>{let y=ze(C,b=>{b.crit.splice(g,1)}),R=y.crit.length===0?null:y;t(R),s==null||s(R)};return ae("fieldset",{className:"personalization-criteria",children:[i?l!=null&&l.Title?v(l.Title,{}):v("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Personalize This"}):null,l!=null&&l.CustomVariantName?v(l.CustomVariantName,{}):null,C.crit.length?v("div",{children:C.crit.map((g,y)=>{var I,k,O,T;let R=((I=g.l)==null?void 0:I.length)>0,b=g.op!=="+"&&g.op!=="-";return ae("div",{css:ye,"data-test-id":"criteria-container",children:[ae("div",{css:Rt`
|
|
95
|
+
${xe}/* grid-template-columns: minmax(0, 1fr) ${b?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"} */
|
|
96
|
+
`,className:"criteriaItemInner",children:[v("div",{css:[N,ee],className:"criteria-wrapper","data-test-id":"select-criteria",children:v(ke,{errorMessage:(k=d.lhs)==null?void 0:k[y],css:z,styles:{control:x=>({...x,height:"100%"})},dimensions:n.dimensions,onChange:x=>{f({...g,l:x.dim},y)},value:n.dimIndex[g.l],onMenuOpen:a,onMenuClose:r})}),v("div",{css:[N,De],className:"criteria-wrapper","data-test-id":"select-operator",children:v(Ee,{name:`op-${y}`,css:z,styles:{control:x=>({...x,height:"100%"})},value:g.op,onChange:x=>{f(x==="+"||x==="-"?{...g,op:x,r:void 0,rDim:void 0}:{...g,op:x},y)},onMenuOpen:a,onMenuClose:r})}),b?v("div",{css:[N,ee],className:"criteria-wrapper","data-test-id":"select-match-criteria",children:v(Te,{errorMessage:(O=d.rhs)==null?void 0:O[y],css:z,styles:{control:x=>({...x,height:"100%"})},criteriaMatch:g,onChange:x=>{f(x,y)},isDisabled:!R,dimensions:n,onMenuOpen:a,onMenuClose:r})}):null]}),v("button",{type:"button",onClick:()=>w(y),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0},"data-test-id":"button-delete",children:v(Et,{icon:Ot,iconColor:"red",size:"1.5rem"})}),y>0?v("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"},children:v(Mt,{"data-test-id":"dropdown-button-combine",disabled:y>1,value:(T=C.op)!=null?T:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:x=>{p(x.value)}})}):null]},y)})}):v(Ne,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v(Vt,{children:'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.'})}),n.dimensions.length===0?l!=null&&l.NoDimensionsDefined?v(l.NoDimensionsDefined,{}):v(Ne,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:v("p",{children:"You do not have any dimensions configured."})}):v(St,{"data-test-id":"button-add-criteria",className:"add-more",buttonText:"Add Criteria",onButtonClick:m})]})};import*as D from"yup";import{useAsync as kt}from"react-use";function Xo(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Jo(e){return e.crit!==void 0}function se(e){return e!=="+"&&e!=="-"}import{jsx as P,jsxs as Nt}from"@emotion/react/jsx-runtime";function Tt(e){let t={crit:[]};return e.forEach(n=>{if(!n.path)return;let a=/\[(\d+)\]\.(\w+)/g,r=[...n.path.matchAll(a)][0];if((r==null?void 0:r.length)==3){let o=Number(r[1]),s=r[2];if(t.crit.length>o)t.crit[o]={...t.crit[o],[s]:n.message};else{let i={};i[s]=n.message,t.crit.push(i)}}}),t}async function le(e,t){let n=D.object().shape({l:D.string().required("Please select a dimension").oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected left-side criteria dimension does not exist"),op:D.string().required(),r:D.mixed().nullable().when(["rDim","op"],{is:(a,r)=>se(r)&&!a,then:D.string().required("Choose a score or dimension")}),rDim:D.string().oneOf(t==null?void 0:t.dimensions.map(a=>a.dim),"Selected right-side criteria dimension does not exist").when(["r","op"],{is:(a,r)=>se(r)&&!a,then:D.string().required("Choose a score or dimension")})},["rDim","r"]);try{await D.object({crit:D.array(n)}).nullable().validate(e,{abortEarly:!1})}catch(a){return Tt(a.inner)}}var lr=({contextConfig:e,value:t,setValue:n,...a})=>{var C,p;let[r,o]=Bt(void 0),{loading:s,result:i,error:l}=S(e);return kt(async()=>{if(t&&i){let m=await le(t,i);o(m)}},[t,i,le]),l?P($e,{type:"danger",children:l}):s||i===null?P(Pt,{}):P(Le,{...a,value:t,setValue:async m=>{let f=await le(m,i);o(f),n(m)},errors:{lhs:(C=r==null?void 0:r.crit)==null?void 0:C.map(m=>m==null?void 0:m.l),rhs:(p=r==null?void 0:r.crit)==null?void 0:p.map(m=>m==null?void 0:m.rDim)},dimensions:i,components:{NoDimensionsDefined:()=>P($e,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"},children:Nt("p",{children:["You do not have any dimensions configured. Create your first"," ",P("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/signals`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"Dimension"})]})})}})};import{useEffect as zt,useState as Lt}from"react";import{ApiClientError as $t,CachedManifestClient as At}from"@uniformdev/context/api";function F({apiHost:e,apiKey:t,projectId:n}){let[a,r]=Lt({loading:!1,notConfigured:!1,error:null,result:null});return zt(()=>{if(!n||!t||!e){r({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{r({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new At({projectId:n,apiKey:t,apiHost:e}).get({preview:!0});r({notConfigured:!1,loading:!1,error:null,result:i})}catch(s){let i;s instanceof $t?(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(),r({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[e,t,n]),{result:a.result,error:a.error,loading:a.loading,notConfigured:a.notConfigured}}import{LoadingIndicator as Ut}from"@uniformdev/design-system";import{Fragment as Gt,jsx as me}from"@emotion/react/jsx-runtime";function vr({children:e,versionMap:t,contextConfig:n}){let{loading:a,result:r}=F(n);if(a)return me(Ut,{});if(r){let o=t[r.project.ui_version];if(o)return me(o,{})}return me(Gt,{children:e})}import{createContext as Ht,useContext as pe}from"react";import{LoadingIndicator as Wt}from"@uniformdev/design-system";import{Fragment as Ae,jsx as E}from"@emotion/react/jsx-runtime";var j=Ht(null),Br=({loadingComponent:e,errorComponent:t,contextConfig:n,children:a})=>{let r=F(n),o=S(n);return r.error||r.notConfigured?t?E(t,{contextConfig:n,result:r}):E(Ae,{children:"ErrorComponent is not configured"}):o.error||o.notConfigured?t?E(t,{contextConfig:n,result:o}):E(Ae,{children:"ErrorComponent is not configured"}):r.loading||o.loading?e?E(e,{}):E(Wt,{}):E(j.Provider,{value:{manifest:r.result,dimensions:o.result,contextConfig:n},children:a})};function Pr(){let e=pe(j);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function kr(){let e=pe(j);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function Tr(){let e=pe(j);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}import{validate as qt}from"uuid";import{UncachedManifestClient as _t}from"@uniformdev/context/api";var Ue=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(!qt(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let t=new _t({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let n=await t.get({preview:!0});return{valid:!0,result:n}}catch(n){return{valid:!1,error:n}}};import{useEffect as Ft,useState as jt}from"react";var _r=e=>{let[t,n]=jt({validating:!1,error:void 0}),{apiKey:a,apiHost:r,projectId:o}=e||{};return Ft(()=>{if(!a||!r)return;(async()=>{n({validating:!0,error:void 0});let{error:i,result:l}=await Ue({apiHost:r,apiKey:a,projectId:o});n(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:l})})()},[r,a,o]),{validating:t.validating,error:t.error,result:t.result}};export*from"@uniformdev/design-system";export{Br as ContextData,Te as CriteriaMatchMenu,Ee as CriteriaOperatorMenu,ke as DimensionMenu,Oe as DimensionValue,ce as EditLink,xn as EnrichmentTag,lr as PersonalizationCriteria,Le as PersonalizationCriteriaStatic,vr as ProjectUIVersion,it as addEnrichmentLink,Me as contextCriteriaMenuOperators,Tt as convertErrorsToObj,Xo as isEnrichmentTagData,Jo as isPersonalizationCriteriaData,se as opHasRhs,Pr as useContextConfig,F as useContextData,S as useDimensions,Tr as useDimensionsDataContext,kr as useManifest,_r as useValidateContextConfig,Ue as validateContextConfig};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/context-ui",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.3.1-alpha.117+8812fbe6b",
|
|
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,8 +31,8 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@emotion/react": "11.10.4",
|
|
34
|
-
"@uniformdev/context": "^17.
|
|
35
|
-
"@uniformdev/design-system": "^17.
|
|
34
|
+
"@uniformdev/context": "^17.3.1-alpha.117+8812fbe6b",
|
|
35
|
+
"@uniformdev/design-system": "^17.3.1-alpha.117+8812fbe6b",
|
|
36
36
|
"immer": "9.0.15",
|
|
37
37
|
"react-beautiful-dnd": "13.1.1",
|
|
38
38
|
"react-icons": "^4.3.1",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"react-dom": ">=16.8"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@babel/core": "7.
|
|
52
|
-
"@babel/preset-env": "7.
|
|
51
|
+
"@babel/core": "7.19.3",
|
|
52
|
+
"@babel/preset-env": "7.19.4",
|
|
53
53
|
"@babel/preset-react": "7.18.6",
|
|
54
54
|
"@emotion/babel-preset-css-prop": "11.10.0",
|
|
55
55
|
"@storybook/addon-controls": "6.5.12",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@types/react-beautiful-dnd": "13.1.2",
|
|
63
63
|
"@types/uuid": "8.3.4",
|
|
64
64
|
"autoprefixer": "10.4.12",
|
|
65
|
-
"postcss": "8.4.
|
|
65
|
+
"postcss": "8.4.18",
|
|
66
66
|
"postcss-import": "15.0.0",
|
|
67
67
|
"react": "18.2.0",
|
|
68
68
|
"react-dom": "18.2.0",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"publishConfig": {
|
|
75
75
|
"access": "public"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "8812fbe6b2d14f5b53cd9163b163fdd18bb76799"
|
|
78
78
|
}
|