@uniformdev/context-ui 16.2.4 → 17.1.1-alpha.151
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +7 -1
- package/dist/index.esm.js +27 -17
- package/dist/index.js +27 -17
- package/dist/index.mjs +27 -17
- package/package.json +23 -22
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import * as _emotion_react from '@emotion/react';
|
|
|
3
3
|
import React, { ReactElement, ComponentType } from 'react';
|
|
4
4
|
import { DimensionDefinition, ManifestGetResponse } from '@uniformdev/context/api';
|
|
5
5
|
import { EnrichmentData, VariantMatchCriteria, DimensionMatch } from '@uniformdev/context';
|
|
6
|
+
import * as yup from 'yup';
|
|
6
7
|
import { InputComboBoxProps, InputComboBoxOption } from '@uniformdev/design-system';
|
|
7
8
|
export * from '@uniformdev/design-system';
|
|
8
9
|
|
|
@@ -56,6 +57,10 @@ interface PersonalizationCriteriaStaticProps {
|
|
|
56
57
|
}
|
|
57
58
|
declare const PersonalizationCriteriaStatic: React.FC<PersonalizationCriteriaStaticProps>;
|
|
58
59
|
|
|
60
|
+
declare type ParameterValidationError<TValue> = TValue extends string | number | boolean ? string : {
|
|
61
|
+
[key in keyof TValue]: ParameterValidationError<TValue[key]> | undefined;
|
|
62
|
+
};
|
|
63
|
+
declare function convertErrorsToObj(errors: yup.ValidationError[]): ParameterValidationError<VariantMatchCriteria>;
|
|
59
64
|
declare type PersonalizationCriteriaProps = {
|
|
60
65
|
contextConfig: ContextConfig;
|
|
61
66
|
} & Omit<PersonalizationCriteriaStaticProps, 'dimensions'>;
|
|
@@ -146,5 +151,6 @@ declare const useValidateContextConfig: (contextConfig?: ContextConfig) => UseVa
|
|
|
146
151
|
|
|
147
152
|
declare function isEnrichmentTagData(obj: any): obj is EnrichmentData[];
|
|
148
153
|
declare function isPersonalizationCriteriaData(obj: any): obj is VariantMatchCriteria;
|
|
154
|
+
declare function opHasRhs(op: string): boolean;
|
|
149
155
|
|
|
150
|
-
export { ContextConfig, ContextData, ContextDataProps, CriteriaMatchMenu, CriteriaMatchMenuProps, CriteriaOperatorMenu, CriteriaOperatorMenuProps, DataContextErrorProps, DimensionMenu, DimensionMenuProps, DimensionValue, DimensionValueProps, DimensionsData, EditLink, EditLinkProps, EnrichmentTag, EnrichmentTagProps, PersonalizationCriteria, PersonalizationCriteriaProps, PersonalizationCriteriaStatic, PersonalizationCriteriaStaticProps, ProjectUIVersion, ResolvedDimensionDefinition, UseContextDataResult, UseDimensionsResult, UseValidateContextConfigResult, addEnrichmentLink, contextCriteriaMenuOperators, isEnrichmentTagData, isPersonalizationCriteriaData, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };
|
|
156
|
+
export { ContextConfig, ContextData, ContextDataProps, CriteriaMatchMenu, CriteriaMatchMenuProps, CriteriaOperatorMenu, CriteriaOperatorMenuProps, DataContextErrorProps, DimensionMenu, DimensionMenuProps, DimensionValue, DimensionValueProps, DimensionsData, EditLink, EditLinkProps, EnrichmentTag, EnrichmentTagProps, PersonalizationCriteria, PersonalizationCriteriaProps, PersonalizationCriteriaStatic, PersonalizationCriteriaStaticProps, ProjectUIVersion, ResolvedDimensionDefinition, UseContextDataResult, UseDimensionsResult, UseValidateContextConfigResult, addEnrichmentLink, contextCriteriaMenuOperators, convertErrorsToObj, isEnrichmentTagData, isPersonalizationCriteriaData, opHasRhs, useContextConfig, useContextData, useDimensions, useDimensionsDataContext, useManifest, useValidateContextConfig, validateContextConfig };
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}from"@uniformdev/design-system";import{CgChevronRight as He}from"react-icons/cg";import{css as Ae}from"@emotion/react";var ue=Ae`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +9,7 @@ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as ye}f
|
|
|
9
9
|
&:focus {
|
|
10
10
|
text-decoration-line: underline;
|
|
11
11
|
}
|
|
12
|
-
`;var
|
|
12
|
+
`;import{jsx as qe,jsxs as We}from"@emotion/react/jsx-runtime";var pe=({linkTo:e,name:t,linkText:n=`Edit ${t} Component`})=>We("a",{css:ue,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[n,qe(Ge,{icon:He,iconColor:"currentColor",size:"1.5rem"})]});import{useMemo as de,useState as K}from"react";import{useEffect as _e,useState as Fe}from"react";import{computeDimensionDisplayName as je,ApiClientError as Ke,CachedDimensionClient as Ye}from"@uniformdev/context/api";function ce(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]=Fe({loading:!1,notConfigured:!1,error:null,result:null});return _e(()=>{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 Ye({projectId:n,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:je(d)})),l={dimensions:i,dimIndex:ce(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof Ke?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 ge,Button as Xe,InputSelect as Je,Callout as X,Icon as J,LoadingIndicator as Qe,AddListButton as Ze}from"@uniformdev/design-system";import{CgMathPlus as et,CgMathMinus as tt,CgCloseO as nt}from"react-icons/cg";import fe from"immer";import{css as Q}from"@emotion/react";import{Fragment as be,jsx as p,jsxs as M}from"@emotion/react/jsx-runtime";var ot=Q`
|
|
13
13
|
flex: 2;
|
|
14
14
|
display: flex;
|
|
15
15
|
width: 50%;
|
|
@@ -20,7 +20,7 @@ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as ye}f
|
|
|
20
20
|
&:focus {
|
|
21
21
|
text-decoration-line: underline;
|
|
22
22
|
}
|
|
23
|
-
`,
|
|
23
|
+
`,fn=({value:e,setValue:t,contextConfig:n,displayTitle:a=!0})=>{let{loading:r,result:o,error:s}=S(n),i=de(()=>{if(o)return o.dimensions.filter(b=>b.category==="ENR")},[o]),l=de(()=>{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(""),[u,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:u}]),C(""),m(50),w(!1)},R=b=>{let I=[];o?I=b.filter(V=>{let T=o.dimIndex[Y(V.cat,V.key)];return Boolean(T)}):I=b;let k=I.length===0?null:I;t(k)};return s?p(X,{type:"danger",children:s}):r||o===null?p(Qe,{}):M("fieldset",{className:"enrichment-tag",children:[a?p("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"},children:p("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Enrichment Tags"})}):null,i!=null&&i.length?!f&&!e?p(X,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Click"," ",p("a",{onClick:()=>w(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"},children:"here"})," ","to assign your first enrichment tag."]})}):M(be,{children:[o&&p(st,{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:[p("div",{css:{flexGrow:1},children:p(Je,{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)})}),p(at,{score:u,setValue:m,cap:g?g.cap:100,css:{flexBasis:"9rem"}}),p(Xe,{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?p(Ze,{className:"add-more",buttonText:"Add More",onButtonClick:()=>w(!0)}):p("a",{css:ot,title:"none",href:"#"}),p(pe,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`})]})]}):p(rt,{contextConfig:n})]})},rt=({contextConfig:e})=>p(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"," ",p("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"here"}),"."]})}),Ce=(e,t=100,n=0)=>Math.max(Math.min(e,t),n),he=Q`
|
|
24
24
|
position: absolute;
|
|
25
25
|
bottom: 0.875rem;
|
|
26
26
|
left: var(--spacing-sm);
|
|
@@ -32,27 +32,27 @@ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as ye}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
|
+
`,it=Q`
|
|
36
|
+
${he}
|
|
37
37
|
left: auto;
|
|
38
38
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
39
|
+
`,at=({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:[p(ge,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:n,value:e,onChange:o=>t(Ce(Number(o.currentTarget.value)||0,n)),css:{textAlign:"center",boxSizing:"border-box"}}),p("button",{type:"button",title:"Reduce enrichment count",onClick:()=>r("decrement"),disabled:e===0,className:"scoreCounterButton",css:he,children:p(J,{icon:tt,iconColor:"gray",size:"1.5rem"})}),p("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:it,children:p(J,{icon:et,iconColor:"gray",size:"1.5rem"})})]})},st=({list:e,setList:t,dimIndex:n})=>{let a=o=>{t(fe(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(fe(e,d=>{d[o].str=Ce(Number(s)||0,i)}))};return p(be,{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:[p("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`}),p("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:p(ge,{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)})}),p("button",{type:"button",title:"Delete enrichment",onClick:()=>a(s),css:{border:0},children:p(J,{icon:nt,iconColor:"red",size:"1.5rem"})})]},`${o.cat}-${o.key}`)})})};import{useState as Vt}from"react";import{LoadingIndicator as Bt,Callout as ze}from"@uniformdev/design-system";import{css as It}from"@emotion/react";import{Callout as ke,InputInlineSelect as wt,Icon as Rt,AddListButton as Mt,Paragraph as Et}from"@uniformdev/design-system";import Te from"immer";import{CgCloseO as St}from"react-icons/cg";import{css as B}from"@emotion/react";var Z="6rem",ve=B`
|
|
40
40
|
position: relative;
|
|
41
41
|
padding: var(--spacing-base);
|
|
42
42
|
border: 1px solid var(--gray-300);
|
|
43
43
|
box-shadow: var(--shadow-base);
|
|
44
44
|
background-color: white;
|
|
45
45
|
border-radius: var(--rounded-base);
|
|
46
|
-
margin-top: ${
|
|
46
|
+
margin-top: ${Z};
|
|
47
47
|
display: flex;
|
|
48
48
|
&:before {
|
|
49
49
|
content: '';
|
|
50
50
|
display: block;
|
|
51
51
|
width: 1px;
|
|
52
|
-
height: ${
|
|
52
|
+
height: ${Z};
|
|
53
53
|
background-color: var(--gray-300);
|
|
54
54
|
position: absolute;
|
|
55
|
-
top: -${
|
|
55
|
+
top: -${Z};
|
|
56
56
|
left: var(--spacing-lg);
|
|
57
57
|
}
|
|
58
58
|
&:first-of-type {
|
|
@@ -61,21 +61,31 @@ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as ye}f
|
|
|
61
61
|
display: none;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
`,
|
|
64
|
+
`,ye=B`
|
|
65
65
|
display: grid;
|
|
66
66
|
gap: var(--spacing-xs);
|
|
67
67
|
flex-grow: 1;
|
|
68
68
|
margin-right: var(--spacing-base);
|
|
69
|
-
`,
|
|
69
|
+
`,N=B`
|
|
70
70
|
width: 100%;
|
|
71
71
|
display: flex;
|
|
72
72
|
align-items: stretch;
|
|
73
|
-
`,
|
|
73
|
+
`,z=B`
|
|
74
74
|
height: 100%;
|
|
75
75
|
width: 100%;
|
|
76
|
-
`,
|
|
76
|
+
`,hn=B`
|
|
77
77
|
height: 100%;
|
|
78
|
-
`;import{InputComboBox as
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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`
|
|
79
|
+
align-items: center;
|
|
80
|
+
background: var(--gray-700);
|
|
81
|
+
border-radius: var(--rounded-full);
|
|
82
|
+
color: var(--white);
|
|
83
|
+
display: flex;
|
|
84
|
+
width: 30px;
|
|
85
|
+
height: 30px;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
font-size: var(--fs-base);
|
|
88
|
+
`,children:e})}import{jsx as ee,jsxs as pt}from"@emotion/react/jsx-runtime";var xe=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 pt("div",{css:{...n("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...o,children:[i?ee(L,{op:s}):ee("div",{css:{width:"20px",height:"20px"}}),ee("div",{children:i!=null?i:s})]})};import{jsx as De}from"@emotion/react/jsx-runtime";var Ie=e=>{let{data:t,getStyles:n}=e;return De("div",{css:{...n("singleValue",e),width:"max-content"},children:t.label.length===1?De(L,{op:t.label}):t.label})};import{jsx as dt}from"@emotion/react/jsx-runtime";var we=[{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 Re({onChange:e,value:t,...n}){var a,r;return dt(ct,{...n,value:{label:(r=(a=we.find(o=>o.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:we.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:Ie,Option:xe,...n.components}})}import{InputComboBox as bt}from"@uniformdev/design-system";import{Icon as ft}from"@uniformdev/design-system";function te(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(te(a))}return t}import{jsx as ne,jsxs as gt}from"@emotion/react/jsx-runtime";var U=e=>{var r;let{data:t,getStyles:n,className:a}=e;return ne("div",{css:{...n("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:gt("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[ne(ft,{icon:$((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),ne("span",{children:t.label})]})})};import{jsx as Ct}from"@emotion/react/jsx-runtime";function G({message:e}){return e?Ct("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 Me}from"@emotion/react/jsx-runtime";var H=e=>{var u,m;let{data:t,getStyles:n,cx:a,isDisabled:r,isFocused:o,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,C]=(m=(u=t.label)==null?void 0:u.split(":"))!=null?m:[];return Me("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:Me("div",{css:{color:"var(--gray-700)"},children:C!=null?C:t.label})})};import{Icon as ht}from"@uniformdev/design-system";import{jsx as oe,jsxs as Ee}from"@emotion/react/jsx-runtime";function Se({displayName:e}){let[t,n]=e.split(":");return Ee("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[n?Ee("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?oe(ht,{icon:$(t),iconColor:"currentColor",size:16}):null,oe("span",{"data-test-id":"dimension-name",children:t})]}):null,oe("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:n!=null?n:t})]})}import{jsx as Ve}from"@emotion/react/jsx-runtime";var q=e=>{let{data:t,getStyles:n}=e;return Ve("div",{css:n("singleValue",e),children:Ve(Se,{displayName:t.label})})};import{Fragment as vt,jsx as Be,jsxs as yt}from"@emotion/react/jsx-runtime";function Pe({onChange:e,value:t,dimensions:n,errorMessage:a,...r}){return yt(vt,{children:[Be(bt,{...r,value:t?te(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:q,GroupHeading:U,...r.components}}),Be(G,{message:a})]})}import{InputComboBox as xt}from"@uniformdev/design-system";import{useState as Dt}from"react";import{Fragment as re,jsx as _,jsxs as P}from"@emotion/react/jsx-runtime";function Oe({onChange:e,criteriaMatch:t,dimensions:n,errorMessage:a,...r}){var d,C;let[o,s]=Dt(typeof t.r!="undefined"&&W(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?n.dimIndex[t.rDim]:void 0;return P(re,{children:[_(xt,{...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:(u,m)=>{var f,w;return{...u,padding:"var(--spacing-sm)",...(w=(f=r.styles)==null?void 0:f.valueContainer)==null?void 0:w.call(f,u,m)}},option:(u,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,u,m)}}},onChange:u=>{var m;u&&(e({...t,rDim:(m=u.value)==null?void 0:m.toString(),r:void 0}),s(""))},onInputChange:(u,m)=>{let f=W(u);m.action==="input-change"||m.action==="set-value"?(s(u),(f||u==="")&&e({...t,r:u||void 0,rDim:void 0})):!f&&!W(m.prevInputValue)&&(!u&&t.r?s(t.r.toString()):s(u))},components:{...r.components,Option:H,SingleValue:q,GroupHeading:U},noOptionsMessage:({inputValue:u})=>W(u)?P(re,{children:[P("div",{children:["Score: ",u]}),_("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):P(re,{children:[P("div",{children:["No dimensions match your search \u201C",u,"\u201D"]}),_("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),_(G,{message:a})]})}function W(e){return/^\d+$/.test(e.toString(10))}import{jsx as v,jsxs as ie}from"@emotion/react/jsx-runtime";var Ne=({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:[]},u=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(Te(C,R=>{R.crit[y]=g}))},w=g=>{let y=Te(C,b=>{b.crit.splice(g,1)}),R=y.crit.length===0?null:y;t(R),s==null||s(R)};return ie("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,V,T;let R=((I=g.l)==null?void 0:I.length)>0,b=g.op!=="+"&&g.op!=="-";return ie("div",{css:ve,"data-test-id":"criteria-container",children:[ie("div",{css:It`
|
|
89
|
+
${ye}
|
|
90
|
+
grid-template-columns: minmax(0, 1fr) ${b?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"}
|
|
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};
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
"use strict";var st=Object.create;var X=Object.defineProperty;var lt=Object.getOwnPropertyDescriptor;var mt=Object.getOwnPropertyNames;var ut=Object.getPrototypeOf,pt=Object.prototype.hasOwnProperty;var ct=(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 mt(t))!pt.call(e,r)&&r!==n&&X(e,r,{get:()=>t[r],enumerable:!(a=lt(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?st(ut(e)):{},Y(t||!e||!e.__esModule?X(n,"default",{value:e,enumerable:!0}):n,e)),dt=e=>Y(X({},"__esModule",{value:!0}),e);var M={};ct(M,{ContextData:()=>St,CriteriaMatchMenu:()=>Re,CriteriaOperatorMenu:()=>xe,DimensionMenu:()=>we,DimensionValue:()=>Ie,EditLink:()=>Ce,EnrichmentTag:()=>gt,PersonalizationCriteria:()=>Mt,PersonalizationCriteriaStatic:()=>Ee,ProjectUIVersion:()=>Et,addEnrichmentLink:()=>Ne,contextCriteriaMenuOperators:()=>ye,convertErrorsToObj:()=>nt,isEnrichmentTagData:()=>wt,isPersonalizationCriteriaData:()=>Rt,opHasRhs:()=>pe,useContextConfig:()=>Vt,useContextData:()=>_,useDimensions:()=>O,useDimensionsDataContext:()=>Pt,useManifest:()=>Bt,useValidateContextConfig:()=>Ot,validateContextConfig:()=>Ve});module.exports=dt(M);var c=require("@emotion/react"),b=J(require("react"));var Oe=require("@uniformdev/design-system"),ke=require("react-icons/cg");var Be=require("@emotion/react"),Pe=Be.css`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +9,7 @@ var Ge=Object.create;var U=Object.defineProperty;var He=Object.getOwnPropertyDes
|
|
|
9
9
|
&:focus {
|
|
10
10
|
text-decoration-line: underline;
|
|
11
11
|
}
|
|
12
|
-
`;var
|
|
12
|
+
`;var he=require("@emotion/react/jsx-runtime"),Ce=({linkTo:e,name:t,linkText:n=`Edit ${t} Component`})=>(0,he.jsxs)("a",{css:Pe,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[n,(0,he.jsx)(Oe.Icon,{icon:ke.CgChevronRight,iconColor:"currentColor",size:"1.5rem"})]});var k=require("react");var Q=require("react"),N=require("@uniformdev/context/api");function Te(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 O({apiHost:e,apiKey:t,projectId:n}){let[a,r]=(0,Q.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,Q.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 N.CachedDimensionClient({projectId:n,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:(0,N.computeDimensionDisplayName)(d)})),l={dimensions:i,dimIndex:Te(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof N.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 Z=require("@uniformdev/context"),x=require("@uniformdev/design-system"),z=require("react-icons/cg"),be=J(require("immer")),ee=require("@emotion/react"),m=require("@emotion/react/jsx-runtime"),Ne=ee.css`
|
|
13
13
|
flex: 2;
|
|
14
14
|
display: flex;
|
|
15
15
|
width: 50%;
|
|
@@ -20,7 +20,7 @@ var Ge=Object.create;var U=Object.defineProperty;var He=Object.getOwnPropertyDes
|
|
|
20
20
|
&:focus {
|
|
21
21
|
text-decoration-line: underline;
|
|
22
22
|
}
|
|
23
|
-
`,
|
|
23
|
+
`,gt=({value:e,setValue:t,contextConfig:n,displayTitle:a=!0})=>{let{loading:r,result:o,error:s}=O(n),i=(0,k.useMemo)(()=>{if(o)return o.dimensions.filter(v=>v.category==="ENR")},[o]),l=(0,k.useMemo)(()=>{if(!e)return i;if(i)return i.filter(v=>!e.some(R=>(0,Z.getEnrichmentVectorKey)(R.cat,R.key)===v.dim))},[i,e]),[d,h]=(0,k.useState)(""),[p,u]=(0,k.useState)(50),[g,E]=(0,k.useState)(!1),C=i==null?void 0:i.find(v=>v.dim===d),y=()=>{let[v,R]=d.split("_");P([...e!=null?e:[],{cat:v,key:R,str:p}]),h(""),u(50),E(!1)},P=v=>{let R=[];o?R=v.filter(G=>{let K=o.dimIndex[(0,Z.getEnrichmentVectorKey)(G.cat,G.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)(vt,{list:e!=null?e:[],setList:P,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)(bt,{score:p,setValue:u,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:Ne,title:"none",href:"#"}),(0,m.jsx)(Ce,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`})]})]}):(0,m.jsx)(Ct,{contextConfig:n})]})},Ct=({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"}),"."]})}),ze=(e,t=100,n=0)=>Math.max(Math.min(e,t),n),Le=ee.css`
|
|
24
24
|
position: absolute;
|
|
25
25
|
bottom: 0.875rem;
|
|
26
26
|
left: var(--spacing-sm);
|
|
@@ -32,27 +32,27 @@ var Ge=Object.create;var U=Object.defineProperty;var He=Object.getOwnPropertyDes
|
|
|
32
32
|
background-color: var(--gray-100);
|
|
33
33
|
border: 1px solid var(--gray-300);
|
|
34
34
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
36
|
-
${
|
|
35
|
+
`,ht=ee.css`
|
|
36
|
+
${Le}
|
|
37
37
|
left: auto;
|
|
38
38
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
39
|
+
`,bt=({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(ze(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:Le,children:(0,m.jsx)(x.Icon,{icon:z.CgMathMinus,iconColor:"gray",size:"1.5rem"})}),(0,m.jsx)("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:ht,children:(0,m.jsx)(x.Icon,{icon:z.CgMathPlus,iconColor:"gray",size:"1.5rem"})})]})},vt=({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=ze(Number(s)||0,i)}))};return(0,m.jsx)(m.Fragment,{children:e.map((o,s)=>{let i=n[(0,Z.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:z.CgCloseO,iconColor:"red",size:"1.5rem"})})]},`${o.cat}-${o.key}`)})})};var et=require("react");var W=require("@uniformdev/design-system");var Qe=require("@emotion/react"),V=require("@uniformdev/design-system"),Me=J(require("immer")),Ze=require("react-icons/cg");var L=require("@emotion/react"),ve="6rem",$e=L.css`
|
|
40
40
|
position: relative;
|
|
41
41
|
padding: var(--spacing-base);
|
|
42
42
|
border: 1px solid var(--gray-300);
|
|
43
43
|
box-shadow: var(--shadow-base);
|
|
44
44
|
background-color: white;
|
|
45
45
|
border-radius: var(--rounded-base);
|
|
46
|
-
margin-top: ${
|
|
46
|
+
margin-top: ${ve};
|
|
47
47
|
display: flex;
|
|
48
48
|
&:before {
|
|
49
49
|
content: '';
|
|
50
50
|
display: block;
|
|
51
51
|
width: 1px;
|
|
52
|
-
height: ${
|
|
52
|
+
height: ${ve};
|
|
53
53
|
background-color: var(--gray-300);
|
|
54
54
|
position: absolute;
|
|
55
|
-
top: -${
|
|
55
|
+
top: -${ve};
|
|
56
56
|
left: var(--spacing-lg);
|
|
57
57
|
}
|
|
58
58
|
&:first-of-type {
|
|
@@ -61,21 +61,31 @@ var Ge=Object.create;var U=Object.defineProperty;var He=Object.getOwnPropertyDes
|
|
|
61
61
|
display: none;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
`,
|
|
64
|
+
`,Ae=L.css`
|
|
65
65
|
display: grid;
|
|
66
66
|
gap: var(--spacing-xs);
|
|
67
67
|
flex-grow: 1;
|
|
68
68
|
margin-right: var(--spacing-base);
|
|
69
|
-
`,
|
|
69
|
+
`,te=L.css`
|
|
70
70
|
width: 100%;
|
|
71
71
|
display: flex;
|
|
72
72
|
align-items: stretch;
|
|
73
|
-
`,
|
|
73
|
+
`,ne=L.css`
|
|
74
74
|
height: 100%;
|
|
75
75
|
width: 100%;
|
|
76
|
-
`,
|
|
76
|
+
`,Wt=L.css`
|
|
77
77
|
height: 100%;
|
|
78
|
-
`;var
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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`
|
|
79
|
+
align-items: center;
|
|
80
|
+
background: var(--gray-700);
|
|
81
|
+
border-radius: var(--rounded-full);
|
|
82
|
+
color: var(--white);
|
|
83
|
+
display: flex;
|
|
84
|
+
width: 30px;
|
|
85
|
+
height: 30px;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
font-size: var(--fs-base);
|
|
88
|
+
`,children:e})}var H=require("@emotion/react/jsx-runtime"),Ge=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,H.jsxs)("div",{css:{...n("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...o,children:[i?(0,H.jsx)(oe,{op:s}):(0,H.jsx)("div",{css:{width:"20px",height:"20px"}}),(0,H.jsx)("div",{children:i!=null?i:s})]})};var He=require("@emotion/react/jsx-runtime"),qe=e=>{let{data:t,getStyles:n}=e;return(0,He.jsx)("div",{css:{...n("singleValue",e),width:"max-content"},children:t.label.length===1?(0,He.jsx)(oe,{op:t.label}):t.label})};var Dt=require("@emotion/react/jsx-runtime"),ye=[{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 xe({onChange:e,value:t,...n}){var a,r;return(0,Dt.jsx)(We.InputComboBox,{...n,value:{label:(r=(a=ye.find(o=>o.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:ye.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:qe,Option:Ge,...n.components}})}var Ye=require("@uniformdev/design-system");var _e=require("@uniformdev/design-system");function De(e){return{label:e.displayName,value:e.dim,isDisabled:!1}}function re(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 ie(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(De(a))}return t}var q=require("@emotion/react/jsx-runtime"),ae=e=>{var r;let{data:t,getStyles:n,className:a}=e;return(0,q.jsx)("div",{css:{...n("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:(0,q.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[(0,q.jsx)(_e.Icon,{icon:re((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),(0,q.jsx)("span",{children:t.label})]})})};var It=require("@emotion/react/jsx-runtime");function se({message:e}){return e?(0,It.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 Fe=require("@emotion/react/jsx-runtime"),le=e=>{var p,u;let{data:t,getStyles:n,cx:a,isDisabled:r,isFocused:o,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,h]=(u=(p=t.label)==null?void 0:p.split(":"))!=null?u:[];return(0,Fe.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,Fe.jsx)("div",{css:{color:"var(--gray-700)"},children:h!=null?h:t.label})})};var je=require("@uniformdev/design-system");var $=require("@emotion/react/jsx-runtime");function Ie({displayName:e}){let[t,n]=e.split(":");return(0,$.jsxs)("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[n?(0,$.jsxs)("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?(0,$.jsx)(je.Icon,{icon:re(t),iconColor:"currentColor",size:16}):null,(0,$.jsx)("span",{"data-test-id":"dimension-name",children:t})]}):null,(0,$.jsx)("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:n!=null?n:t})]})}var Ke=require("@emotion/react/jsx-runtime"),me=e=>{let{data:t,getStyles:n}=e;return(0,Ke.jsx)("div",{css:n("singleValue",e),children:(0,Ke.jsx)(Ie,{displayName:t.label})})};var A=require("@emotion/react/jsx-runtime");function we({onChange:e,value:t,dimensions:n,errorMessage:a,...r}){return(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(Ye.InputComboBox,{...r,value:t?De(t):void 0,options:ie(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:le,SingleValue:me,GroupHeading:ae,...r.components}}),(0,A.jsx)(se,{message:a})]})}var Xe=require("@uniformdev/design-system"),Je=require("react");var I=require("@emotion/react/jsx-runtime");function Re({onChange:e,criteriaMatch:t,dimensions:n,errorMessage:a,...r}){var d,h;let[o,s]=(0,Je.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)(Xe.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},...ie(n.dimensions)],styles:{...r.styles,valueContainer:(p,u)=>{var g,E;return{...p,padding:"var(--spacing-sm)",...(E=(g=r.styles)==null?void 0:g.valueContainer)==null?void 0:E.call(g,p,u)}},option:(p,u)=>{var g,E;return{fontSize:u.isDisabled?"0.8rem":void 0,...(E=(g=r.styles)==null?void 0:g.option)==null?void 0:E.call(g,p,u)}}},onChange:p=>{var u;p&&(e({...t,rDim:(u=p.value)==null?void 0:u.toString(),r:void 0}),s(""))},onInputChange:(p,u)=>{let g=ue(p);u.action==="input-change"||u.action==="set-value"?(s(p),(g||p==="")&&e({...t,r:p||void 0,rDim:void 0})):!g&&!ue(u.prevInputValue)&&(!p&&t.r?s(t.r.toString()):s(p))},components:{...r.components,Option:le,SingleValue:me,GroupHeading:ae},noOptionsMessage:({inputValue:p})=>ue(p)?(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)("div",{children:["Score: ",p]}),(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",p,"\u201D"]}),(0,I.jsx)("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),(0,I.jsx)(se,{message:a})]})}function ue(e){return/^\d+$/.test(e.toString(10))}var f=require("@emotion/react/jsx-runtime"),Ee=({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:[]},p=C=>{t({...h,op:C==="&"?void 0:C})},u=()=>{let C={...h,crit:[...h.crit,{l:"",op:">",r:0}]};t(C),o==null||o(C)},g=(C,y)=>{t((0,Me.default)(h,P=>{P.crit[y]=C}))},E=C=>{let y=(0,Me.default)(h,v=>{v.crit.splice(C,1)}),P=y.crit.length===0?null:y;t(P),s==null||s(P)};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,G,K;let P=((R=C.l)==null?void 0:R.length)>0,v=C.op!=="+"&&C.op!=="-";return(0,f.jsxs)("div",{css:$e,"data-test-id":"criteria-container",children:[(0,f.jsxs)("div",{css:Qe.css`
|
|
89
|
+
${Ae}
|
|
90
|
+
grid-template-columns: minmax(0, 1fr) ${v?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"}
|
|
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});
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as c}from"@emotion/react";import*as h from"react";import{Icon as Ge}from"@uniformdev/design-system";import{CgChevronRight as He}from"react-icons/cg";import{css as Ae}from"@emotion/react";var ue=Ae`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +9,7 @@ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as ye}f
|
|
|
9
9
|
&:focus {
|
|
10
10
|
text-decoration-line: underline;
|
|
11
11
|
}
|
|
12
|
-
`;var
|
|
12
|
+
`;import{jsx as qe,jsxs as We}from"@emotion/react/jsx-runtime";var pe=({linkTo:e,name:t,linkText:n=`Edit ${t} Component`})=>We("a",{css:ue,title:`Edit ${t} component definition`,rel:"noopener noreferrer",target:"_blank",href:e,children:[n,qe(Ge,{icon:He,iconColor:"currentColor",size:"1.5rem"})]});import{useMemo as de,useState as K}from"react";import{useEffect as _e,useState as Fe}from"react";import{computeDimensionDisplayName as je,ApiClientError as Ke,CachedDimensionClient as Ye}from"@uniformdev/context/api";function ce(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]=Fe({loading:!1,notConfigured:!1,error:null,result:null});return _e(()=>{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 Ye({projectId:n,apiKey:t,apiHost:e}).get()).dimensions.map(d=>({...d,displayName:je(d)})),l={dimensions:i,dimIndex:ce(i,d=>d.dim,d=>d)};r({notConfigured:!1,loading:!1,error:null,result:l})}catch(s){let i;s instanceof Ke?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 ge,Button as Xe,InputSelect as Je,Callout as X,Icon as J,LoadingIndicator as Qe,AddListButton as Ze}from"@uniformdev/design-system";import{CgMathPlus as et,CgMathMinus as tt,CgCloseO as nt}from"react-icons/cg";import fe from"immer";import{css as Q}from"@emotion/react";import{Fragment as be,jsx as p,jsxs as M}from"@emotion/react/jsx-runtime";var ot=Q`
|
|
13
13
|
flex: 2;
|
|
14
14
|
display: flex;
|
|
15
15
|
width: 50%;
|
|
@@ -20,7 +20,7 @@ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as ye}f
|
|
|
20
20
|
&:focus {
|
|
21
21
|
text-decoration-line: underline;
|
|
22
22
|
}
|
|
23
|
-
`,
|
|
23
|
+
`,fn=({value:e,setValue:t,contextConfig:n,displayTitle:a=!0})=>{let{loading:r,result:o,error:s}=S(n),i=de(()=>{if(o)return o.dimensions.filter(b=>b.category==="ENR")},[o]),l=de(()=>{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(""),[u,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:u}]),C(""),m(50),w(!1)},R=b=>{let I=[];o?I=b.filter(V=>{let T=o.dimIndex[Y(V.cat,V.key)];return Boolean(T)}):I=b;let k=I.length===0?null:I;t(k)};return s?p(X,{type:"danger",children:s}):r||o===null?p(Qe,{}):M("fieldset",{className:"enrichment-tag",children:[a?p("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"},children:p("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"},children:"Enrichment Tags"})}):null,i!=null&&i.length?!f&&!e?p(X,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"},children:M("p",{children:["Click"," ",p("a",{onClick:()=>w(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"},children:"here"})," ","to assign your first enrichment tag."]})}):M(be,{children:[o&&p(st,{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:[p("div",{css:{flexGrow:1},children:p(Je,{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)})}),p(at,{score:u,setValue:m,cap:g?g.cap:100,css:{flexBasis:"9rem"}}),p(Xe,{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?p(Ze,{className:"add-more",buttonText:"Add More",onButtonClick:()=>w(!0)}):p("a",{css:ot,title:"none",href:"#"}),p(pe,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${n.apiHost}/projects/${encodeURIComponent(n.projectId)}/personalization/enrichments`})]})]}):p(rt,{contextConfig:n})]})},rt=({contextConfig:e})=>p(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"," ",p("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}},children:"here"}),"."]})}),Ce=(e,t=100,n=0)=>Math.max(Math.min(e,t),n),he=Q`
|
|
24
24
|
position: absolute;
|
|
25
25
|
bottom: 0.875rem;
|
|
26
26
|
left: var(--spacing-sm);
|
|
@@ -32,27 +32,27 @@ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as ye}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
|
+
`,it=Q`
|
|
36
|
+
${he}
|
|
37
37
|
left: auto;
|
|
38
38
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
39
|
+
`,at=({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:[p(ge,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:n,value:e,onChange:o=>t(Ce(Number(o.currentTarget.value)||0,n)),css:{textAlign:"center",boxSizing:"border-box"}}),p("button",{type:"button",title:"Reduce enrichment count",onClick:()=>r("decrement"),disabled:e===0,className:"scoreCounterButton",css:he,children:p(J,{icon:tt,iconColor:"gray",size:"1.5rem"})}),p("button",{type:"button",title:"Increase enrichment count",onClick:()=>r("increment"),className:"scoreCounterButton",css:it,children:p(J,{icon:et,iconColor:"gray",size:"1.5rem"})})]})},st=({list:e,setList:t,dimIndex:n})=>{let a=o=>{t(fe(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(fe(e,d=>{d[o].str=Ce(Number(s)||0,i)}))};return p(be,{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:[p("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`}),p("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:p(ge,{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)})}),p("button",{type:"button",title:"Delete enrichment",onClick:()=>a(s),css:{border:0},children:p(J,{icon:nt,iconColor:"red",size:"1.5rem"})})]},`${o.cat}-${o.key}`)})})};import{useState as Vt}from"react";import{LoadingIndicator as Bt,Callout as ze}from"@uniformdev/design-system";import{css as It}from"@emotion/react";import{Callout as ke,InputInlineSelect as wt,Icon as Rt,AddListButton as Mt,Paragraph as Et}from"@uniformdev/design-system";import Te from"immer";import{CgCloseO as St}from"react-icons/cg";import{css as B}from"@emotion/react";var Z="6rem",ve=B`
|
|
40
40
|
position: relative;
|
|
41
41
|
padding: var(--spacing-base);
|
|
42
42
|
border: 1px solid var(--gray-300);
|
|
43
43
|
box-shadow: var(--shadow-base);
|
|
44
44
|
background-color: white;
|
|
45
45
|
border-radius: var(--rounded-base);
|
|
46
|
-
margin-top: ${
|
|
46
|
+
margin-top: ${Z};
|
|
47
47
|
display: flex;
|
|
48
48
|
&:before {
|
|
49
49
|
content: '';
|
|
50
50
|
display: block;
|
|
51
51
|
width: 1px;
|
|
52
|
-
height: ${
|
|
52
|
+
height: ${Z};
|
|
53
53
|
background-color: var(--gray-300);
|
|
54
54
|
position: absolute;
|
|
55
|
-
top: -${
|
|
55
|
+
top: -${Z};
|
|
56
56
|
left: var(--spacing-lg);
|
|
57
57
|
}
|
|
58
58
|
&:first-of-type {
|
|
@@ -61,21 +61,31 @@ import{jsx as e}from"@emotion/react";import*as p from"react";import{Icon as ye}f
|
|
|
61
61
|
display: none;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
`,
|
|
64
|
+
`,ye=B`
|
|
65
65
|
display: grid;
|
|
66
66
|
gap: var(--spacing-xs);
|
|
67
67
|
flex-grow: 1;
|
|
68
68
|
margin-right: var(--spacing-base);
|
|
69
|
-
`,
|
|
69
|
+
`,N=B`
|
|
70
70
|
width: 100%;
|
|
71
71
|
display: flex;
|
|
72
72
|
align-items: stretch;
|
|
73
|
-
`,
|
|
73
|
+
`,z=B`
|
|
74
74
|
height: 100%;
|
|
75
75
|
width: 100%;
|
|
76
|
-
`,
|
|
76
|
+
`,hn=B`
|
|
77
77
|
height: 100%;
|
|
78
|
-
`;import{InputComboBox as
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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`
|
|
79
|
+
align-items: center;
|
|
80
|
+
background: var(--gray-700);
|
|
81
|
+
border-radius: var(--rounded-full);
|
|
82
|
+
color: var(--white);
|
|
83
|
+
display: flex;
|
|
84
|
+
width: 30px;
|
|
85
|
+
height: 30px;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
font-size: var(--fs-base);
|
|
88
|
+
`,children:e})}import{jsx as ee,jsxs as pt}from"@emotion/react/jsx-runtime";var xe=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 pt("div",{css:{...n("option",e),display:"flex",alignItems:"center",gap:"var(--spacing-sm)"},ref:r,"aria-disabled":a,...o,children:[i?ee(L,{op:s}):ee("div",{css:{width:"20px",height:"20px"}}),ee("div",{children:i!=null?i:s})]})};import{jsx as De}from"@emotion/react/jsx-runtime";var Ie=e=>{let{data:t,getStyles:n}=e;return De("div",{css:{...n("singleValue",e),width:"max-content"},children:t.label.length===1?De(L,{op:t.label}):t.label})};import{jsx as dt}from"@emotion/react/jsx-runtime";var we=[{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 Re({onChange:e,value:t,...n}){var a,r;return dt(ct,{...n,value:{label:(r=(a=we.find(o=>o.value===t))==null?void 0:a.name)!=null?r:t,value:t},options:we.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:Ie,Option:xe,...n.components}})}import{InputComboBox as bt}from"@uniformdev/design-system";import{Icon as ft}from"@uniformdev/design-system";function te(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(te(a))}return t}import{jsx as ne,jsxs as gt}from"@emotion/react/jsx-runtime";var U=e=>{var r;let{data:t,getStyles:n,className:a}=e;return ne("div",{css:{...n("groupHeading",e),textTransform:"none",fontSize:"var(--font-size-sm)"},className:a,children:gt("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[ne(ft,{icon:$((r=t.label)!=null?r:""),iconColor:"currentColor",size:16}),ne("span",{children:t.label})]})})};import{jsx as Ct}from"@emotion/react/jsx-runtime";function G({message:e}){return e?Ct("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 Me}from"@emotion/react/jsx-runtime";var H=e=>{var u,m;let{data:t,getStyles:n,cx:a,isDisabled:r,isFocused:o,isSelected:s,className:i,innerRef:l,innerProps:d}=e,[,C]=(m=(u=t.label)==null?void 0:u.split(":"))!=null?m:[];return Me("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:Me("div",{css:{color:"var(--gray-700)"},children:C!=null?C:t.label})})};import{Icon as ht}from"@uniformdev/design-system";import{jsx as oe,jsxs as Ee}from"@emotion/react/jsx-runtime";function Se({displayName:e}){let[t,n]=e.split(":");return Ee("div",{css:{whiteSpace:"normal",overflow:"hidden"},children:[n?Ee("small",{css:{color:"var(--gray-500)",display:"flex",alignItems:"center",gap:"var(--spacing-xs)"},children:[t?oe(ht,{icon:$(t),iconColor:"currentColor",size:16}):null,oe("span",{"data-test-id":"dimension-name",children:t})]}):null,oe("div",{css:{color:"var(--gray-700)"},"data-test-id":"dimension-value",children:n!=null?n:t})]})}import{jsx as Ve}from"@emotion/react/jsx-runtime";var q=e=>{let{data:t,getStyles:n}=e;return Ve("div",{css:n("singleValue",e),children:Ve(Se,{displayName:t.label})})};import{Fragment as vt,jsx as Be,jsxs as yt}from"@emotion/react/jsx-runtime";function Pe({onChange:e,value:t,dimensions:n,errorMessage:a,...r}){return yt(vt,{children:[Be(bt,{...r,value:t?te(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:q,GroupHeading:U,...r.components}}),Be(G,{message:a})]})}import{InputComboBox as xt}from"@uniformdev/design-system";import{useState as Dt}from"react";import{Fragment as re,jsx as _,jsxs as P}from"@emotion/react/jsx-runtime";function Oe({onChange:e,criteriaMatch:t,dimensions:n,errorMessage:a,...r}){var d,C;let[o,s]=Dt(typeof t.r!="undefined"&&W(t.r)!==null?t.r.toString(10):""),i=t.rDim,l=t.rDim?n.dimIndex[t.rDim]:void 0;return P(re,{children:[_(xt,{...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:(u,m)=>{var f,w;return{...u,padding:"var(--spacing-sm)",...(w=(f=r.styles)==null?void 0:f.valueContainer)==null?void 0:w.call(f,u,m)}},option:(u,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,u,m)}}},onChange:u=>{var m;u&&(e({...t,rDim:(m=u.value)==null?void 0:m.toString(),r:void 0}),s(""))},onInputChange:(u,m)=>{let f=W(u);m.action==="input-change"||m.action==="set-value"?(s(u),(f||u==="")&&e({...t,r:u||void 0,rDim:void 0})):!f&&!W(m.prevInputValue)&&(!u&&t.r?s(t.r.toString()):s(u))},components:{...r.components,Option:H,SingleValue:q,GroupHeading:U},noOptionsMessage:({inputValue:u})=>W(u)?P(re,{children:[P("div",{children:["Score: ",u]}),_("small",{children:"If you want to match on another dimension\u2019s score instead, clear the score value to search for a dimension."})]}):P(re,{children:[P("div",{children:["No dimensions match your search \u201C",u,"\u201D"]}),_("small",{children:"If you want to match a literal score, enter a numeric value."})]})}),_(G,{message:a})]})}function W(e){return/^\d+$/.test(e.toString(10))}import{jsx as v,jsxs as ie}from"@emotion/react/jsx-runtime";var Ne=({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:[]},u=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(Te(C,R=>{R.crit[y]=g}))},w=g=>{let y=Te(C,b=>{b.crit.splice(g,1)}),R=y.crit.length===0?null:y;t(R),s==null||s(R)};return ie("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,V,T;let R=((I=g.l)==null?void 0:I.length)>0,b=g.op!=="+"&&g.op!=="-";return ie("div",{css:ve,"data-test-id":"criteria-container",children:[ie("div",{css:It`
|
|
89
|
+
${ye}
|
|
90
|
+
grid-template-columns: minmax(0, 1fr) ${b?"minmax(0, 79px) minmax(0, 1fr)":"minmax(0, 1fr)"}
|
|
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};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/context-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "17.1.1-alpha.151+3c57dd245",
|
|
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",
|
|
@@ -30,42 +30,43 @@
|
|
|
30
30
|
"deploy:netlify": "tsx ../../scripts/deploy-to-netlify.ts"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@emotion/react": "11.
|
|
34
|
-
"@uniformdev/context": "^
|
|
35
|
-
"@uniformdev/design-system": "^
|
|
33
|
+
"@emotion/react": "11.10.4",
|
|
34
|
+
"@uniformdev/context": "^17.1.1-alpha.151+3c57dd245",
|
|
35
|
+
"@uniformdev/design-system": "^17.1.1-alpha.151+3c57dd245",
|
|
36
36
|
"immer": "9.0.15",
|
|
37
|
-
"react-beautiful-dnd": "13.1.
|
|
37
|
+
"react-beautiful-dnd": "13.1.1",
|
|
38
38
|
"react-icons": "^4.3.1",
|
|
39
|
-
"react-select": "5.
|
|
39
|
+
"react-select": "5.4.0",
|
|
40
40
|
"react-use": "17.4.0",
|
|
41
41
|
"reakit": "1.3.11",
|
|
42
42
|
"timeago.js": "4.0.2",
|
|
43
|
-
"uuid": "8.3.2"
|
|
43
|
+
"uuid": "8.3.2",
|
|
44
|
+
"yup": "0.32.11"
|
|
44
45
|
},
|
|
45
46
|
"peerDependencies": {
|
|
46
47
|
"react": ">=16.8",
|
|
47
48
|
"react-dom": ">=16.8"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|
|
50
|
-
"@babel/core": "7.18.
|
|
51
|
-
"@babel/preset-env": "7.18.
|
|
52
|
-
"@babel/preset-react": "7.
|
|
53
|
-
"@emotion/babel-preset-css-prop": "11.
|
|
54
|
-
"@storybook/addon-controls": "6.5.
|
|
55
|
-
"@storybook/addon-essentials": "6.5.
|
|
51
|
+
"@babel/core": "7.18.13",
|
|
52
|
+
"@babel/preset-env": "7.18.10",
|
|
53
|
+
"@babel/preset-react": "7.18.6",
|
|
54
|
+
"@emotion/babel-preset-css-prop": "11.10.0",
|
|
55
|
+
"@storybook/addon-controls": "6.5.10",
|
|
56
|
+
"@storybook/addon-essentials": "6.5.10",
|
|
56
57
|
"@storybook/addon-postcss": "2.0.0",
|
|
57
|
-
"@storybook/builder-webpack5": "6.5.
|
|
58
|
-
"@storybook/manager-webpack5": "6.5.
|
|
59
|
-
"@storybook/react": "6.5.
|
|
60
|
-
"@types/react": "18.0.
|
|
58
|
+
"@storybook/builder-webpack5": "6.5.10",
|
|
59
|
+
"@storybook/manager-webpack5": "6.5.10",
|
|
60
|
+
"@storybook/react": "6.5.10",
|
|
61
|
+
"@types/react": "18.0.18",
|
|
61
62
|
"@types/react-beautiful-dnd": "13.1.2",
|
|
62
63
|
"@types/uuid": "8.3.4",
|
|
63
|
-
"autoprefixer": "10.4.
|
|
64
|
-
"postcss": "8.4.
|
|
65
|
-
"postcss-import": "
|
|
64
|
+
"autoprefixer": "10.4.8",
|
|
65
|
+
"postcss": "8.4.16",
|
|
66
|
+
"postcss-import": "15.0.0",
|
|
66
67
|
"react": "18.2.0",
|
|
67
68
|
"react-dom": "18.2.0",
|
|
68
|
-
"webpack": "5.
|
|
69
|
+
"webpack": "5.74.0"
|
|
69
70
|
},
|
|
70
71
|
"files": [
|
|
71
72
|
"/dist"
|
|
@@ -73,5 +74,5 @@
|
|
|
73
74
|
"publishConfig": {
|
|
74
75
|
"access": "public"
|
|
75
76
|
},
|
|
76
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "3c57dd245b59aa55368da8991d1e39bc633bbed8"
|
|
77
78
|
}
|