@uniformdev/context-ui 16.0.1-alpha.221 → 16.1.0
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 +9 -9
- package/dist/index.js +6 -6
- package/dist/index.mjs +9 -9
- package/package.json +4 -4
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as
|
|
1
|
+
import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as ie}from"@uniformdev/design-system";import{CgChevronRight as ae}from"react-icons/cg";import{css as re}from"@emotion/react";var A=re`
|
|
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 y from"react";import{Icon as oe}f
|
|
|
9
9
|
&:focus {
|
|
10
10
|
text-decoration-line: underline;
|
|
11
11
|
}
|
|
12
|
-
`;var
|
|
12
|
+
`;var B=({linkTo:t,name:n,linkText:r=`Edit ${n} Component`})=>e("a",{css:A,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:t},r,e(ie,{icon:ae,iconColor:"currentColor",size:"1.5rem"}));import H,{useMemo as W,useState as N}from"react";import{useEffect as se,useState as le}from"react";import{DimensionClient as ce,computeDimensionDisplayName as ue,ApiClientError as de}from"@uniformdev/context/api";function O(t,n,r){return t.reduce((s,a)=>{let o=n(a);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(a)]=r?r(a):a,s},{})}function R({apiHost:t,apiKey:n,projectId:r}){let[s,a]=le({loading:!1,notConfigured:!1,error:null,result:null});return se(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new ce({projectId:r,apiKey:n,apiHost:t}).get()).dimensions.map(c=>({...c,displayName:ue(c)})),d={dimensions:i,dimIndex:O(i,c=>c.dim,c=>c)};a({notConfigured:!1,loading:!1,error:null,result:d})}catch(l){let i;l instanceof de?i=l.message:i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{getEnrichmentVectorKey as P}from"@uniformdev/context";import{Input as _,Button as me,InputSelect as pe,Callout as V,Icon as I,LoadingIndicator as fe}from"@uniformdev/design-system";import{CgMathPlus as q,CgMathMinus as ge,CgCloseO as Ce}from"react-icons/cg";import G from"immer";import{css as L}from"@emotion/react";var ve=L`
|
|
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 y from"react";import{Icon as oe}f
|
|
|
20
20
|
&:focus {
|
|
21
21
|
text-decoration-line: underline;
|
|
22
22
|
}
|
|
23
|
-
`,
|
|
23
|
+
`,ct=({value:t,setValue:n,contextConfig:r,displayTitle:s=!0})=>{let{loading:a,result:o,error:l}=R(r),i=W(()=>{if(o)return o.dimensions.filter(f=>f.category==="ENR")},[o]),d=W(()=>{if(!t)return i;if(i)return i.filter(f=>!t.some(b=>P(b.cat,b.key)===f.dim))},[i,t]),[c,E]=N(""),[u,g]=N(50),[D,m]=N(!1),p=i==null?void 0:i.find(f=>f.dim===c),w=()=>{let[f,b]=c.split("_");k([...t!=null?t:[],{cat:f,key:b,str:u}]),E(""),g(50),m(!1)},k=f=>{let b=[];o?b=f.filter(x=>{let ne=o.dimIndex[P(x.cat,x.key)];return Boolean(ne)}):b=f;let C=b.length===0?null:b;n(C)};return l?e(V,{type:"danger"},l):a||o===null?e(fe,null):e("fieldset",{className:"enrichment-tag"},s?e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,i!=null&&i.length?!D&&!t?e(V,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Click"," ",e("a",{onClick:()=>m(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):e(H.Fragment,null,o&&e(De,{list:t!=null?t:[],setList:k,dimIndex:o.dimIndex}),D&&d&&d.length>0?e("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},e("div",{css:{flexGrow:1}},e(pe,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...d.map(f=>({label:f.displayName,value:f.dim}))],onChange:f=>E(f.currentTarget.value)})),e(ye,{score:u,setValue:g,cap:p?p.cap:100,css:{flexBasis:"9rem"}}),e(me,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:w,disabled:!c},"Add")):null,e("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!D&&d&&d.length>0&&t?e("button",{type:"button",className:"add-more",onClick:()=>m(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(I,{icon:q,iconColor:"currentColor",size:"1.25rem"})),"Add More"):e("a",{css:ve,title:"none",href:"#"}),e(B,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`}))):e(he,{contextConfig:r}))},he=({contextConfig:t})=>e(V,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Looks like you do not have any enrichments created in your connected Uniform project. Start by creating your first enrichment"," ",e("a",{href:`${t.apiHost}/projects/${encodeURIComponent(t.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),F=(t,n=100,r=0)=>Math.max(Math.min(t,n),r),K=L`
|
|
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 y from"react";import{Icon as oe}f
|
|
|
32
32
|
background-color: var(--gray-100);
|
|
33
33
|
border: 1px solid var(--gray-300);
|
|
34
34
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
35
|
+
`,be=L`
|
|
36
36
|
${K}
|
|
37
37
|
left: auto;
|
|
38
38
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
39
|
+
`,ye=({score:t,setValue:n,cap:r=100,...s})=>{let a=o=>{let l=o==="increment"?t+10:t-10;l<0&&(l=0),l>r&&(l=r),n(l)};return e("div",{css:{position:"relative"},...s},e(_,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:r,value:t,onChange:o=>n(F(Number(o.currentTarget.value)||0,r)),css:{textAlign:"center",boxSizing:"border-box"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>a("decrement"),disabled:t===0,className:"scoreCounterButton",css:K},e(I,{icon:ge,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Increase enrichment count",onClick:()=>a("increment"),className:"scoreCounterButton",css:be},e(I,{icon:q,iconColor:"gray",size:"1.5rem"})))},De=({list:t,setList:n,dimIndex:r})=>{let s=o=>{n(G(t,l=>{l.splice(o,1)}))},a=(o,l)=>{var d;let i=(d=r[`${t[o].cat}_${t[o].key}`])==null?void 0:d.cap;n(G(t,c=>{c[o].str=F(Number(l)||0,i)}))};return e(H.Fragment,null,t.map((o,l)=>{let i=r[P(o.cat,o.key)];if(!!i)return e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",key:`${o.cat}-${o.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"}},i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`),e("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"}},e(_,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:d=>a(l,d.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>s(l),css:{border:0}},e(I,{icon:Ce,iconColor:"red",size:"1.5rem"})))}))};import{useState as Ee}from"react";import{LoadingIndicator as ke,Callout as z,InputSelect as Q,InputComboBox as xe,InputInlineSelect as Re,Icon as Z}from"@uniformdev/design-system";import j from"immer";import{CgCloseO as Ie,CgMathPlus as Me}from"react-icons/cg";import{css as X}from"@emotion/react";var $="6rem",Y=X`
|
|
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: ${$};
|
|
47
47
|
display: flex;
|
|
48
48
|
&:before {
|
|
49
49
|
content: '';
|
|
50
50
|
display: block;
|
|
51
51
|
width: 1px;
|
|
52
|
-
height: ${
|
|
52
|
+
height: ${$};
|
|
53
53
|
background-color: var(--gray-300);
|
|
54
54
|
position: absolute;
|
|
55
|
-
top: -${
|
|
55
|
+
top: -${$};
|
|
56
56
|
left: var(--spacing-lg);
|
|
57
57
|
}
|
|
58
58
|
&:first-of-type {
|
|
@@ -66,4 +66,4 @@ import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as oe}f
|
|
|
66
66
|
gap: var(--spacing-base);
|
|
67
67
|
flex-grow: 1;
|
|
68
68
|
margin-right: var(--spacing-base);
|
|
69
|
-
`;var
|
|
69
|
+
`;var Te=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],ht=({value:t,setValue:n,contextConfig:r,onMenuOpen:s,onMenuClose:a,displayTitle:o=!0})=>{let{loading:l,result:i,error:d}=R(r),c=t||{crit:[]},E=m=>{n({...c,op:m==="&"?void 0:m})},u=()=>{n({...c,crit:[...c.crit,{l:"",op:">",r:50}]})},g=(m,p)=>{n(j(c,w=>{w.crit[p]=m}))},D=m=>{let p=j(c,k=>{k.crit.splice(m,1)}),w=p.crit.length===0?null:p;n(w)};return d?e(z,{type:"danger"},d):l||i===null?e(ke,null):e("fieldset",{className:"personalization-criteria"},o?e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,c.crit.length?c.crit.map((m,p)=>{var f,b;let w=((f=m.l)==null?void 0:f.length)>0,k=m.op!=="+"&&m.op!=="-";return e("div",{css:Y,key:p},e("div",{css:J,style:{gridTemplateColumns:`repeat(${k?3:2}, minmax(0, 1fr))`},className:"criteriaItemInner"},e(Q,{name:`lhs-${p}`,label:"Match Dimension",showLabel:!1,value:m.l,options:[{label:"Select",value:""},...i.dimensions.map(C=>({label:C.displayName,value:C.dim}))],onChange:C=>{g({...m,l:C.target.value},p)}}),e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",justifyContent:"space-around"}},e("span",{css:{color:"var(--gray-700)"}},"score"),e(Q,{css:{width:"100%"},name:`op-${p}`,label:"Operator",showLabel:!1,value:m.op,options:Te.map(C=>({label:C.name,value:C.value})),onChange:C=>{let x=C.target.value;g(x==="+"||x==="-"?{...m,op:x,r:void 0,rDim:void 0}:{...m,op:C.target.value},p)},disabled:!w})),k?e(Se,{critHasLhs:w,currentCriteria:m,dimensions:i,update:g,index:p,onMenuOpen:s,onMenuClose:a}):null),e("button",{type:"button",onClick:()=>D(p),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(Z,{icon:Ie,iconColor:"red",size:"1.5rem"})),p>0?e("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(Re,{disabled:p>1,value:(b=c.op)!=null?b:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:C=>{E(C.value)}})):null)}):e(z,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.')),i.dimensions.length===0?e(z,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):e("button",{type:"button",className:"add-more",onClick:u,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(Z,{icon:Me,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Se({update:t,currentCriteria:n,index:r,dimensions:s,critHasLhs:a,onMenuOpen:o,onMenuClose:l}){var c,E;let[i,d]=Ee(n.r&&M(n.r)!==null?n.r.toString(10):"");return e(xe,{name:`rhs-${r}`,className:"input-combobox",inputValue:i,value:{label:n.rDim?(E=(c=s.dimIndex[n.rDim])==null?void 0:c.displayName)!=null?E:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:g})=>({...u,background:g?"transparent":void 0,fontSize:g?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var g;u&&t({...n,rDim:(g=u.value)==null?void 0:g.toString(),r:void 0},r)},onInputChange:(u,g)=>{let D=M(u);g.action==="input-change"||g.action==="set-value"?(d(u),(D||u==="")&&t({...n,r:u,rDim:void 0},r)):!D&&!M(g.prevInputValue)&&d(u)},isDisabled:!a,noOptionsMessage:({inputValue:u})=>M(u)?`${u}`:"No options match",onMenuOpen:o,onMenuClose:l})}function M(t){return/^\d+$/.test(t.toString(10))}import $e from"react";import{useEffect as Ne,useState as Pe}from"react";import{ManifestClient as Ve,ApiClientError as Le}from"@uniformdev/context/api";function T({apiHost:t,apiKey:n,projectId:r}){let[s,a]=Pe({loading:!1,notConfigured:!1,error:null,result:null});return Ne(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Ve({projectId:r,apiKey:n,apiHost:t}).get({preview:!0});a({notConfigured:!1,loading:!1,error:null,result:i})}catch(l){let i;l instanceof Le?(l.statusCode===403&&(i=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=l.message):i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{LoadingIndicator as ze}from"@uniformdev/design-system";function Mt({children:t,versionMap:n,contextConfig:r}){let{loading:s,result:a}=T(r);if(s)return e(ze,null);if(a){let o=n[a.project.ui_version];if(o)return e(o,null)}return e($e.Fragment,null,t)}import ee,{createContext as Ue,useContext as U}from"react";import{LoadingIndicator as Ae}from"@uniformdev/design-system";var S=Ue(null),Ut=({loadingComponent:t,errorComponent:n,contextConfig:r,children:s})=>{let a=T(r),o=R(r);return a.error||a.notConfigured?n?e(n,{contextConfig:r,result:a}):e(ee.Fragment,null,"ErrorComponent is not configured"):o.error||o.notConfigured?n?e(n,{contextConfig:r,result:o}):e(ee.Fragment,null,"ErrorComponent is not configured"):a.loading||o.loading?t?e(t,null):e(Ae,null):e(S.Provider,{value:{manifest:a.result,dimensions:o.result,contextConfig:r}},s)};function At(){let t=U(S);if(!(t!=null&&t.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return t.contextConfig}function Bt(){let t=U(S);if(!(t!=null&&t.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return t.manifest}function Ot(){let t=U(S);if(!(t!=null&&t.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return t.dimensions}import{validate as Be}from"uuid";import{ManifestClient as Oe}from"@uniformdev/context/api";var te=async t=>{if(!t)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!t.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!t.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Be(t.apiKey)&&!t.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new Oe({projectId:t.projectId,apiKey:t.apiKey,apiHost:t.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};import{useEffect as We,useState as Ge}from"react";var Xt=t=>{let[n,r]=Ge({validating:!1,error:void 0}),{apiKey:s,apiHost:a,projectId:o}=t||{};return We(()=>{if(!s||!a)return;(async()=>{r({validating:!0,error:void 0});let{error:i,result:d}=await te({apiHost:a,apiKey:s,projectId:o});r(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:d})})()},[a,s,o]),{validating:n.validating,error:n.error,result:n.result}};function Jt(t){return Array.isArray(t)&&t.length>0&&t[0].cat!==void 0}function Qt(t){return t.crit!==void 0}export*from"@uniformdev/design-system";export{Ut as ContextData,B as EditLink,ct as EnrichmentTag,ht as PersonalizationCriteria,Mt as ProjectUIVersion,ve as addEnrichmentLink,Te as equality,Jt as isEnrichmentTagData,Qt as isPersonalizationCriteriaData,At as useContextConfig,T as useContextData,R as useDimensions,Ot as useDimensionsDataContext,Bt as useManifest,Xt as useValidateContextConfig,te as validateContextConfig};
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var ve=Object.create;var U=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var ye=Object.getPrototypeOf,De=Object.prototype.hasOwnProperty;var we=(e,n)=>{for(var r in n)U(e,r,{get:n[r],enumerable:!0})},z=(e,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of be(n))!De.call(e,i)&&i!==r&&U(e,i,{get:()=>n[i],enumerable:!(s=he(n,i))||s.enumerable});return e},w=(e,n,r)=>(z(e,n,"default"),r&&z(r,n,"default")),V=(e,n,r)=>(r=e!=null?ve(ye(e)):{},z(n||!e||!e.__esModule?U(r,"default",{value:e,enumerable:!0}):r,e)),Ee=e=>z(U({},"__esModule",{value:!0}),e);var y={};we(y,{ContextData:()=>Le,EditLink:()=>K,EnrichmentTag:()=>xe,PersonalizationCriteria:()=>Ne,ProjectUIVersion:()=>Ve,addEnrichmentLink:()=>oe,equality:()=>ue,isEnrichmentTagData:()=>Be,isPersonalizationCriteriaData:()=>Oe,useContextConfig:()=>$e,useContextData:()=>$,useDimensions:()=>S,useDimensionsDataContext:()=>Ue,useManifest:()=>ze,useValidateContextConfig:()=>Ae,validateContextConfig:()=>Z});module.exports=Ee(y);var t=require("@emotion/react"),k=V(require("react"));var te=require("@uniformdev/design-system"),ne=require("react-icons/cg");var j=require("@emotion/react"),ee=j.css`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
font-weight: var(--fw-bold);
|
|
@@ -9,7 +9,7 @@ var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDes
|
|
|
9
9
|
&:focus {
|
|
10
10
|
text-decoration-line: underline;
|
|
11
11
|
}
|
|
12
|
-
`;var
|
|
12
|
+
`;var K=({linkTo:e,name:n,linkText:r=`Edit ${n} Component`})=>(0,t.jsx)("a",{css:ee,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:e},r,(0,t.jsx)(te.Icon,{icon:ne.CgChevronRight,iconColor:"currentColor",size:"1.5rem"}));var E=V(require("react"));var A=require("react"),L=require("@uniformdev/context/api");function re(e,n,r){return e.reduce((s,i)=>{let o=n(i);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(i)]=r?r(i):i,s},{})}function S({apiHost:e,apiKey:n,projectId:r}){let[s,i]=(0,A.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,A.useEffect)(()=>{if(!r||!n||!e){i({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{i({notConfigured:!1,loading:!0,error:null,result:null});try{let a=(await new L.DimensionClient({projectId:r,apiKey:n,apiHost:e}).get()).dimensions.map(c=>({...c,displayName:(0,L.computeDimensionDisplayName)(c)})),d={dimensions:a,dimIndex:re(a,c=>c.dim,c=>c)};i({notConfigured:!1,loading:!1,error:null,result:d})}catch(l){let a;l instanceof L.ApiClientError?a=l.message:a=l.toString(),i({notConfigured:!1,loading:!1,error:a,result:null});return}})()},[e,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}var B=require("@uniformdev/context"),g=require("@uniformdev/design-system"),N=require("react-icons/cg"),X=V(require("immer")),O=require("@emotion/react"),oe=O.css`
|
|
13
13
|
flex: 2;
|
|
14
14
|
display: flex;
|
|
15
15
|
width: 50%;
|
|
@@ -20,7 +20,7 @@ var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDes
|
|
|
20
20
|
&:focus {
|
|
21
21
|
text-decoration-line: underline;
|
|
22
22
|
}
|
|
23
|
-
`,
|
|
23
|
+
`,xe=({value:e,setValue:n,contextConfig:r,displayTitle:s=!0})=>{let{loading:i,result:o,error:l}=S(r),a=(0,E.useMemo)(()=>{if(o)return o.dimensions.filter(f=>f.category==="ENR")},[o]),d=(0,E.useMemo)(()=>{if(!e)return a;if(a)return a.filter(f=>!e.some(D=>(0,B.getEnrichmentVectorKey)(D.cat,D.key)===f.dim))},[a,e]),[c,M]=(0,E.useState)(""),[u,C]=(0,E.useState)(50),[R,m]=(0,E.useState)(!1),p=a==null?void 0:a.find(f=>f.dim===c),I=()=>{let[f,D]=c.split("_");T([...e!=null?e:[],{cat:f,key:D,str:u}]),M(""),C(50),m(!1)},T=f=>{let D=[];o?D=f.filter(P=>{let Ce=o.dimIndex[(0,B.getEnrichmentVectorKey)(P.cat,P.key)];return Boolean(Ce)}):D=f;let h=D.length===0?null:D;n(h)};return l?(0,t.jsx)(g.Callout,{type:"danger"},l):i||o===null?(0,t.jsx)(g.LoadingIndicator,null):(0,t.jsx)("fieldset",{className:"enrichment-tag"},s?(0,t.jsx)("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},(0,t.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,a!=null&&a.length?!R&&!e?(0,t.jsx)(g.Callout,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"Click"," ",(0,t.jsx)("a",{onClick:()=>m(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):(0,t.jsx)(E.default.Fragment,null,o&&(0,t.jsx)(Te,{list:e!=null?e:[],setList:T,dimIndex:o.dimIndex}),R&&d&&d.length>0?(0,t.jsx)("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},(0,t.jsx)("div",{css:{flexGrow:1}},(0,t.jsx)(g.InputSelect,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...d.map(f=>({label:f.displayName,value:f.dim}))],onChange:f=>M(f.currentTarget.value)})),(0,t.jsx)(Me,{score:u,setValue:C,cap:p?p.cap:100,css:{flexBasis:"9rem"}}),(0,t.jsx)(g.Button,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:I,disabled:!c},"Add")):null,(0,t.jsx)("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!R&&d&&d.length>0&&e?(0,t.jsx)("button",{type:"button",className:"add-more",onClick:()=>m(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},(0,t.jsx)("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},(0,t.jsx)(g.Icon,{icon:N.CgMathPlus,iconColor:"currentColor",size:"1.25rem"})),"Add More"):(0,t.jsx)("a",{css:oe,title:"none",href:"#"}),(0,t.jsx)(K,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`}))):(0,t.jsx)(Re,{contextConfig:r}))},Re=({contextConfig:e})=>(0,t.jsx)(g.Callout,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"Looks like you do not have any enrichments created in your connected Uniform project. Start by creating your first enrichment"," ",(0,t.jsx)("a",{href:`${e.apiHost}/projects/${encodeURIComponent(e.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),ie=(e,n=100,r=0)=>Math.max(Math.min(e,n),r),ae=O.css`
|
|
24
24
|
position: absolute;
|
|
25
25
|
bottom: 0.875rem;
|
|
26
26
|
left: var(--spacing-sm);
|
|
@@ -32,11 +32,11 @@ var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDes
|
|
|
32
32
|
background-color: var(--gray-100);
|
|
33
33
|
border: 1px solid var(--gray-300);
|
|
34
34
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
35
|
+
`,Ie=O.css`
|
|
36
36
|
${ae}
|
|
37
37
|
left: auto;
|
|
38
38
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
39
|
+
`,Me=({score:e,setValue:n,cap:r=100,...s})=>{let i=o=>{let l=o==="increment"?e+10:e-10;l<0&&(l=0),l>r&&(l=r),n(l)};return(0,t.jsx)("div",{css:{position:"relative"},...s},(0,t.jsx)(g.Input,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:r,value:e,onChange:o=>n(ie(Number(o.currentTarget.value)||0,r)),css:{textAlign:"center",boxSizing:"border-box"}}),(0,t.jsx)("button",{type:"button",title:"Reduce enrichment count",onClick:()=>i("decrement"),disabled:e===0,className:"scoreCounterButton",css:ae},(0,t.jsx)(g.Icon,{icon:N.CgMathMinus,iconColor:"gray",size:"1.5rem"})),(0,t.jsx)("button",{type:"button",title:"Increase enrichment count",onClick:()=>i("increment"),className:"scoreCounterButton",css:Ie},(0,t.jsx)(g.Icon,{icon:N.CgMathPlus,iconColor:"gray",size:"1.5rem"})))},Te=({list:e,setList:n,dimIndex:r})=>{let s=o=>{n((0,X.default)(e,l=>{l.splice(o,1)}))},i=(o,l)=>{var d;let a=(d=r[`${e[o].cat}_${e[o].key}`])==null?void 0:d.cap;n((0,X.default)(e,c=>{c[o].str=ie(Number(l)||0,a)}))};return(0,t.jsx)(E.default.Fragment,null,e.map((o,l)=>{let a=r[(0,B.getEnrichmentVectorKey)(o.cat,o.key)];if(!!a)return(0,t.jsx)("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",key:`${o.cat}-${o.key}`},(0,t.jsx)("span",{css:{fontWeight:"var(--fw-bold)",color:a?void 0:"var(--brand-secondary-5)"}},a?a.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`),(0,t.jsx)("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"}},(0,t.jsx)(g.Input,{type:"text",min:0,max:a.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:d=>i(l,d.currentTarget.value)})),(0,t.jsx)("button",{type:"button",title:"Delete enrichment",onClick:()=>s(l),css:{border:0}},(0,t.jsx)(g.Icon,{icon:N.CgCloseO,iconColor:"red",size:"1.5rem"})))}))};var ce=require("react");var v=require("@uniformdev/design-system"),Q=V(require("immer")),G=require("react-icons/cg");var J=require("@emotion/react"),Y="6rem",se=J.css`
|
|
40
40
|
position: relative;
|
|
41
41
|
padding: var(--spacing-base);
|
|
42
42
|
border: 1px solid var(--gray-300);
|
|
@@ -66,4 +66,4 @@ var Ce=Object.create;var z=Object.defineProperty;var ve=Object.getOwnPropertyDes
|
|
|
66
66
|
gap: var(--spacing-base);
|
|
67
67
|
flex-grow: 1;
|
|
68
68
|
margin-right: var(--spacing-base);
|
|
69
|
-
`;var ue=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],
|
|
69
|
+
`;var ue=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],Ne=({value:e,setValue:n,contextConfig:r,onMenuOpen:s,onMenuClose:i,displayTitle:o=!0})=>{let{loading:l,result:a,error:d}=S(r),c=e||{crit:[]},M=m=>{n({...c,op:m==="&"?void 0:m})},u=()=>{n({...c,crit:[...c.crit,{l:"",op:">",r:50}]})},C=(m,p)=>{n((0,Q.default)(c,I=>{I.crit[p]=m}))},R=m=>{let p=(0,Q.default)(c,T=>{T.crit.splice(m,1)}),I=p.crit.length===0?null:p;n(I)};return d?(0,t.jsx)(v.Callout,{type:"danger"},d):l||a===null?(0,t.jsx)(v.LoadingIndicator,null):(0,t.jsx)("fieldset",{className:"personalization-criteria"},o?(0,t.jsx)("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,c.crit.length?c.crit.map((m,p)=>{var f,D;let I=((f=m.l)==null?void 0:f.length)>0,T=m.op!=="+"&&m.op!=="-";return(0,t.jsx)("div",{css:se,key:p},(0,t.jsx)("div",{css:le,style:{gridTemplateColumns:`repeat(${T?3:2}, minmax(0, 1fr))`},className:"criteriaItemInner"},(0,t.jsx)(v.InputSelect,{name:`lhs-${p}`,label:"Match Dimension",showLabel:!1,value:m.l,options:[{label:"Select",value:""},...a.dimensions.map(h=>({label:h.displayName,value:h.dim}))],onChange:h=>{C({...m,l:h.target.value},p)}}),(0,t.jsx)("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",justifyContent:"space-around"}},(0,t.jsx)("span",{css:{color:"var(--gray-700)"}},"score"),(0,t.jsx)(v.InputSelect,{css:{width:"100%"},name:`op-${p}`,label:"Operator",showLabel:!1,value:m.op,options:ue.map(h=>({label:h.name,value:h.value})),onChange:h=>{let P=h.target.value;C(P==="+"||P==="-"?{...m,op:P,r:void 0,rDim:void 0}:{...m,op:h.target.value},p)},disabled:!I})),T?(0,t.jsx)(Pe,{critHasLhs:I,currentCriteria:m,dimensions:a,update:C,index:p,onMenuOpen:s,onMenuClose:i}):null),(0,t.jsx)("button",{type:"button",onClick:()=>R(p),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,t.jsx)(v.Icon,{icon:G.CgCloseO,iconColor:"red",size:"1.5rem"})),p>0?(0,t.jsx)("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},(0,t.jsx)(v.InputInlineSelect,{disabled:p>1,value:(D=c.op)!=null?D:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:h=>{M(h.value)}})):null)}):(0,t.jsx)(v.Callout,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.')),a.dimensions.length===0?(0,t.jsx)(v.Callout,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},(0,t.jsx)("p",null,"You do not have any dimensions configured. Create your first"," ",(0,t.jsx)("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):(0,t.jsx)("button",{type:"button",className:"add-more",onClick:u,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},(0,t.jsx)("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},(0,t.jsx)(v.Icon,{icon:G.CgMathPlus,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Pe({update:e,currentCriteria:n,index:r,dimensions:s,critHasLhs:i,onMenuOpen:o,onMenuClose:l}){var c,M;let[a,d]=(0,ce.useState)(n.r&&W(n.r)!==null?n.r.toString(10):"");return(0,t.jsx)(v.InputComboBox,{name:`rhs-${r}`,className:"input-combobox",inputValue:a,value:{label:n.rDim?(M=(c=s.dimIndex[n.rDim])==null?void 0:c.displayName)!=null?M:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:C})=>({...u,background:C?"transparent":void 0,fontSize:C?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var C;u&&e({...n,rDim:(C=u.value)==null?void 0:C.toString(),r:void 0},r)},onInputChange:(u,C)=>{let R=W(u);C.action==="input-change"||C.action==="set-value"?(d(u),(R||u==="")&&e({...n,r:u,rDim:void 0},r)):!R&&!W(C.prevInputValue)&&d(u)},isDisabled:!i,noOptionsMessage:({inputValue:u})=>W(u)?`${u}`:"No options match",onMenuOpen:o,onMenuClose:l})}function W(e){return/^\d+$/.test(e.toString(10))}var de=V(require("react"));var H=require("react"),_=require("@uniformdev/context/api");function $({apiHost:e,apiKey:n,projectId:r}){let[s,i]=(0,H.useState)({loading:!1,notConfigured:!1,error:null,result:null});return(0,H.useEffect)(()=>{if(!r||!n||!e){i({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{i({notConfigured:!1,loading:!0,error:null,result:null});try{let a=await new _.ManifestClient({projectId:r,apiKey:n,apiHost:e}).get({preview:!0});i({notConfigured:!1,loading:!1,error:null,result:a})}catch(l){let a;l instanceof _.ApiClientError?(l.statusCode===403&&(a=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),a=l.message):a=l.toString(),i({notConfigured:!1,loading:!1,error:a,result:null});return}})()},[e,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}var me=require("@uniformdev/design-system");function Ve({children:e,versionMap:n,contextConfig:r}){let{loading:s,result:i}=$(r);if(s)return(0,t.jsx)(me.LoadingIndicator,null);if(i){let o=n[i.project.ui_version];if(o)return(0,t.jsx)(o,null)}return(0,t.jsx)(de.default.Fragment,null,e)}var x=V(require("react"));var pe=require("@uniformdev/design-system"),q=(0,x.createContext)(null),Le=({loadingComponent:e,errorComponent:n,contextConfig:r,children:s})=>{let i=$(r),o=S(r);return i.error||i.notConfigured?n?(0,t.jsx)(n,{contextConfig:r,result:i}):(0,t.jsx)(x.default.Fragment,null,"ErrorComponent is not configured"):o.error||o.notConfigured?n?(0,t.jsx)(n,{contextConfig:r,result:o}):(0,t.jsx)(x.default.Fragment,null,"ErrorComponent is not configured"):i.loading||o.loading?e?(0,t.jsx)(e,null):(0,t.jsx)(pe.LoadingIndicator,null):(0,t.jsx)(q.Provider,{value:{manifest:i.result,dimensions:o.result,contextConfig:r}},s)};function $e(){let e=(0,x.useContext)(q);if(!(e!=null&&e.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return e.contextConfig}function ze(){let e=(0,x.useContext)(q);if(!(e!=null&&e.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return e.manifest}function Ue(){let e=(0,x.useContext)(q);if(!(e!=null&&e.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return e.dimensions}var fe=require("uuid"),ge=require("@uniformdev/context/api"),Z=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,fe.validate)(e.apiKey)&&!e.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new ge.ManifestClient({projectId:e.projectId,apiKey:e.apiKey,apiHost:e.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};var F=require("react");var Ae=e=>{let[n,r]=(0,F.useState)({validating:!1,error:void 0}),{apiKey:s,apiHost:i,projectId:o}=e||{};return(0,F.useEffect)(()=>{if(!s||!i)return;(async()=>{r({validating:!0,error:void 0});let{error:a,result:d}=await Z({apiHost:i,apiKey:s,projectId:o});r(a?{error:a,validating:!1}:{error:void 0,validating:!1,result:d})})()},[i,s,o]),{validating:n.validating,error:n.error,result:n.result}};function Be(e){return Array.isArray(e)&&e.length>0&&e[0].cat!==void 0}function Oe(e){return e.crit!==void 0}w(y,require("@uniformdev/design-system"),module.exports);0&&(module.exports={ContextData,EditLink,EnrichmentTag,PersonalizationCriteria,ProjectUIVersion,addEnrichmentLink,equality,isEnrichmentTagData,isPersonalizationCriteriaData,useContextConfig,useContextData,useDimensions,useDimensionsDataContext,useManifest,useValidateContextConfig,validateContextConfig});
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as
|
|
1
|
+
import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as ie}from"@uniformdev/design-system";import{CgChevronRight as ae}from"react-icons/cg";import{css as re}from"@emotion/react";var A=re`
|
|
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 y from"react";import{Icon as oe}f
|
|
|
9
9
|
&:focus {
|
|
10
10
|
text-decoration-line: underline;
|
|
11
11
|
}
|
|
12
|
-
`;var
|
|
12
|
+
`;var B=({linkTo:t,name:n,linkText:r=`Edit ${n} Component`})=>e("a",{css:A,title:`Edit ${n} component definition`,rel:"noopener noreferrer",target:"_blank",href:t},r,e(ie,{icon:ae,iconColor:"currentColor",size:"1.5rem"}));import H,{useMemo as W,useState as N}from"react";import{useEffect as se,useState as le}from"react";import{DimensionClient as ce,computeDimensionDisplayName as ue,ApiClientError as de}from"@uniformdev/context/api";function O(t,n,r){return t.reduce((s,a)=>{let o=n(a);if(typeof o=="undefined"||o===null)throw new Error("Objectify key selector returned undefined or null.");return s[n(a)]=r?r(a):a,s},{})}function R({apiHost:t,apiKey:n,projectId:r}){let[s,a]=le({loading:!1,notConfigured:!1,error:null,result:null});return se(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=(await new ce({projectId:r,apiKey:n,apiHost:t}).get()).dimensions.map(c=>({...c,displayName:ue(c)})),d={dimensions:i,dimIndex:O(i,c=>c.dim,c=>c)};a({notConfigured:!1,loading:!1,error:null,result:d})}catch(l){let i;l instanceof de?i=l.message:i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{getEnrichmentVectorKey as P}from"@uniformdev/context";import{Input as _,Button as me,InputSelect as pe,Callout as V,Icon as I,LoadingIndicator as fe}from"@uniformdev/design-system";import{CgMathPlus as q,CgMathMinus as ge,CgCloseO as Ce}from"react-icons/cg";import G from"immer";import{css as L}from"@emotion/react";var ve=L`
|
|
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 y from"react";import{Icon as oe}f
|
|
|
20
20
|
&:focus {
|
|
21
21
|
text-decoration-line: underline;
|
|
22
22
|
}
|
|
23
|
-
`,
|
|
23
|
+
`,ct=({value:t,setValue:n,contextConfig:r,displayTitle:s=!0})=>{let{loading:a,result:o,error:l}=R(r),i=W(()=>{if(o)return o.dimensions.filter(f=>f.category==="ENR")},[o]),d=W(()=>{if(!t)return i;if(i)return i.filter(f=>!t.some(b=>P(b.cat,b.key)===f.dim))},[i,t]),[c,E]=N(""),[u,g]=N(50),[D,m]=N(!1),p=i==null?void 0:i.find(f=>f.dim===c),w=()=>{let[f,b]=c.split("_");k([...t!=null?t:[],{cat:f,key:b,str:u}]),E(""),g(50),m(!1)},k=f=>{let b=[];o?b=f.filter(x=>{let ne=o.dimIndex[P(x.cat,x.key)];return Boolean(ne)}):b=f;let C=b.length===0?null:b;n(C)};return l?e(V,{type:"danger"},l):a||o===null?e(fe,null):e("fieldset",{className:"enrichment-tag"},s?e("div",{css:{display:"flex",justifyContent:"space-between",marginBottom:"var(--spacing-base)"}},e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Enrichment Tags")):null,i!=null&&i.length?!D&&!t?e(V,{title:"No enrichment tags assigned.",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Click"," ",e("a",{onClick:()=>m(!0),target:"_blank",rel:"noopener noreferrer",css:{textDecorationLine:"underline"}},"here")," ","to assign your first enrichment tag.")):e(H.Fragment,null,o&&e(De,{list:t!=null?t:[],setList:k,dimIndex:o.dimIndex}),D&&d&&d.length>0?e("div",{className:"add-enrichment-tag",css:{display:"flex",flexWrap:"wrap",gap:"var(--spacing-lg)",marginTop:"var(--spacing-md)",alignItems:"center"}},e("div",{css:{flexGrow:1}},e(pe,{name:"enrichment-type",label:"Enrichment Tag",showLabel:!0,value:c,options:[{label:"Select",value:""},...d.map(f=>({label:f.displayName,value:f.dim}))],onChange:f=>E(f.currentTarget.value)})),e(ye,{score:u,setValue:g,cap:p?p.cap:100,css:{flexBasis:"9rem"}}),e(me,{buttonType:"tertiary",size:"xl",css:{marginBottom:"var(--spacing-xs)",height:"3.5rem",margin:0,alignSelf:"flex-end"},onClick:w,disabled:!c},"Add")):null,e("div",{className:"enrichment-cta",style:{paddingTop:"10px",display:"flex",justifyContent:"space-between"}},!D&&d&&d.length>0&&t?e("button",{type:"button",className:"add-more",onClick:()=>m(!0),css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0,width:"50%",flex:2}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(I,{icon:q,iconColor:"currentColor",size:"1.25rem"})),"Add More"):e("a",{css:ve,title:"none",href:"#"}),e(B,{name:"Enrichments",linkText:"Manage Enrichments",linkTo:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization/enrichments`}))):e(he,{contextConfig:r}))},he=({contextConfig:t})=>e(V,{title:"No enrichments found.",type:"caution",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"Looks like you do not have any enrichments created in your connected Uniform project. Start by creating your first enrichment"," ",e("a",{href:`${t.apiHost}/projects/${encodeURIComponent(t.projectId)}/personalization/enrichments`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"here"),".")),F=(t,n=100,r=0)=>Math.max(Math.min(t,n),r),K=L`
|
|
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 y from"react";import{Icon as oe}f
|
|
|
32
32
|
background-color: var(--gray-100);
|
|
33
33
|
border: 1px solid var(--gray-300);
|
|
34
34
|
border-radius: var(--rounded-full);
|
|
35
|
-
`,
|
|
35
|
+
`,be=L`
|
|
36
36
|
${K}
|
|
37
37
|
left: auto;
|
|
38
38
|
right: var(--spacing-sm);
|
|
39
|
-
`,
|
|
39
|
+
`,ye=({score:t,setValue:n,cap:r=100,...s})=>{let a=o=>{let l=o==="increment"?t+10:t-10;l<0&&(l=0),l>r&&(l=r),n(l)};return e("div",{css:{position:"relative"},...s},e(_,{label:"Strength",id:"enrichment-score",type:"number",min:0,max:r,value:t,onChange:o=>n(F(Number(o.currentTarget.value)||0,r)),css:{textAlign:"center",boxSizing:"border-box"}}),e("button",{type:"button",title:"Reduce enrichment count",onClick:()=>a("decrement"),disabled:t===0,className:"scoreCounterButton",css:K},e(I,{icon:ge,iconColor:"gray",size:"1.5rem"})),e("button",{type:"button",title:"Increase enrichment count",onClick:()=>a("increment"),className:"scoreCounterButton",css:be},e(I,{icon:q,iconColor:"gray",size:"1.5rem"})))},De=({list:t,setList:n,dimIndex:r})=>{let s=o=>{n(G(t,l=>{l.splice(o,1)}))},a=(o,l)=>{var d;let i=(d=r[`${t[o].cat}_${t[o].key}`])==null?void 0:d.cap;n(G(t,c=>{c[o].str=F(Number(l)||0,i)}))};return e(H.Fragment,null,t.map((o,l)=>{let i=r[P(o.cat,o.key)];if(!!i)return e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",backgroundColor:"var(--brand-secondary-2)",boxShadow:"var(--shadow-base)",borderRadius:"var(--rounded-base)",paddingInline:"var(--spacing-base)",marginBlock:"var(--spacing-base)"},className:"selected-enrichments",key:`${o.cat}-${o.key}`},e("span",{css:{fontWeight:"var(--fw-bold)",color:i?void 0:"var(--brand-secondary-5)"}},i?i.displayName:`Enrichment '${o.cat}_${o.key}' is unknown`),e("div",{css:{marginLeft:"auto",display:"flex",alignItems:"center",border:"0 solid var(--gray-400)",borderLeftWidth:"1px",borderRightWidth:"1px",padding:"var(--spacing-sm) var(--spacing-base)",flexBasis:"9rem"}},e(_,{type:"text",min:0,max:i.cap||100,title:"score",value:o.str,css:{textAlign:"center",width:"100px"},onChange:d=>a(l,d.currentTarget.value)})),e("button",{type:"button",title:"Delete enrichment",onClick:()=>s(l),css:{border:0}},e(I,{icon:Ce,iconColor:"red",size:"1.5rem"})))}))};import{useState as Ee}from"react";import{LoadingIndicator as ke,Callout as z,InputSelect as Q,InputComboBox as xe,InputInlineSelect as Re,Icon as Z}from"@uniformdev/design-system";import j from"immer";import{CgCloseO as Ie,CgMathPlus as Me}from"react-icons/cg";import{css as X}from"@emotion/react";var $="6rem",Y=X`
|
|
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: ${$};
|
|
47
47
|
display: flex;
|
|
48
48
|
&:before {
|
|
49
49
|
content: '';
|
|
50
50
|
display: block;
|
|
51
51
|
width: 1px;
|
|
52
|
-
height: ${
|
|
52
|
+
height: ${$};
|
|
53
53
|
background-color: var(--gray-300);
|
|
54
54
|
position: absolute;
|
|
55
|
-
top: -${
|
|
55
|
+
top: -${$};
|
|
56
56
|
left: var(--spacing-lg);
|
|
57
57
|
}
|
|
58
58
|
&:first-of-type {
|
|
@@ -66,4 +66,4 @@ import{jsx as e}from"@emotion/react";import*as y from"react";import{Icon as oe}f
|
|
|
66
66
|
gap: var(--spacing-base);
|
|
67
67
|
flex-grow: 1;
|
|
68
68
|
margin-right: var(--spacing-base);
|
|
69
|
-
`;var
|
|
69
|
+
`;var Te=[{name:"=",value:"="},{name:"!=",value:"!="},{name:">",value:">"},{name:">=",value:">="},{name:"<",value:"<"},{name:"<=",value:"<="},{name:"is strongest",value:"+"},{name:"is weakest",value:"-"}],ht=({value:t,setValue:n,contextConfig:r,onMenuOpen:s,onMenuClose:a,displayTitle:o=!0})=>{let{loading:l,result:i,error:d}=R(r),c=t||{crit:[]},E=m=>{n({...c,op:m==="&"?void 0:m})},u=()=>{n({...c,crit:[...c.crit,{l:"",op:">",r:50}]})},g=(m,p)=>{n(j(c,w=>{w.crit[p]=m}))},D=m=>{let p=j(c,k=>{k.crit.splice(m,1)}),w=p.crit.length===0?null:p;n(w)};return d?e(z,{type:"danger"},d):l||i===null?e(ke,null):e("fieldset",{className:"personalization-criteria"},o?e("legend",{css:{fontSize:"var(--fs-md)",fontWeight:"var(--fw-bold)"}},"Personalize This"):null,c.crit.length?c.crit.map((m,p)=>{var f,b;let w=((f=m.l)==null?void 0:f.length)>0,k=m.op!=="+"&&m.op!=="-";return e("div",{css:Y,key:p},e("div",{css:J,style:{gridTemplateColumns:`repeat(${k?3:2}, minmax(0, 1fr))`},className:"criteriaItemInner"},e(Q,{name:`lhs-${p}`,label:"Match Dimension",showLabel:!1,value:m.l,options:[{label:"Select",value:""},...i.dimensions.map(C=>({label:C.displayName,value:C.dim}))],onChange:C=>{g({...m,l:C.target.value},p)}}),e("div",{css:{display:"flex",alignItems:"center",gap:"var(--spacing-base)",justifyContent:"space-around"}},e("span",{css:{color:"var(--gray-700)"}},"score"),e(Q,{css:{width:"100%"},name:`op-${p}`,label:"Operator",showLabel:!1,value:m.op,options:Te.map(C=>({label:C.name,value:C.value})),onChange:C=>{let x=C.target.value;g(x==="+"||x==="-"?{...m,op:x,r:void 0,rDim:void 0}:{...m,op:C.target.value},p)},disabled:!w})),k?e(Se,{critHasLhs:w,currentCriteria:m,dimensions:i,update:g,index:p,onMenuOpen:s,onMenuClose:a}):null),e("button",{type:"button",onClick:()=>D(p),title:"Delete Personalization",css:{backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e(Z,{icon:Ie,iconColor:"red",size:"1.5rem"})),p>0?e("div",{className:"criteria-group-operation",css:{position:"absolute",top:"-4rem",transform:"translateX(calc(1.5rem - 50%))"}},e(Re,{disabled:p>1,value:(b=c.op)!=null?b:"&",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}],onChange:C=>{E(C.value)}})):null)}):e(z,{title:"Default variant",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,'This personalized variant has no match criteria and will be shown to any visitor that does not match any preceding variants. Ensure that default variants come last in the variant list. Personalize this variant by clicking "Add Criteria" to get started.')),i.dimensions.length===0?e(z,{title:"Dimensions",type:"info",css:{marginBlock:"var(--spacing-base)"}},e("p",null,"You do not have any dimensions configured. Create your first"," ",e("a",{href:`${r.apiHost}/projects/${encodeURIComponent(r.projectId)}/personalization`,target:"_blank",rel:"noopener noreferrer",css:{":hover":{textDecorationLine:"underline"}}},"Dimension"))):e("button",{type:"button",className:"add-more",onClick:u,css:{color:"var(--brand-secondary-3)",display:"flex",gap:"var(--spacing-sm)",fontWeight:"var(--fw-bold)",marginTop:"var(--spacing-md)",alignItems:"center",backgroundColor:"transparent",backgroundImage:"none",borderWidth:0}},e("div",{css:{color:"white",backgroundColor:"var(--brand-secondary-3)",borderRadius:"var(--rounded-full)",padding:"var(--spacing-xs)"}},e(Z,{icon:Me,iconColor:"currentColor",size:"1.25rem"})),"Add Criteria"))};function Se({update:t,currentCriteria:n,index:r,dimensions:s,critHasLhs:a,onMenuOpen:o,onMenuClose:l}){var c,E;let[i,d]=Ee(n.r&&M(n.r)!==null?n.r.toString(10):"");return e(xe,{name:`rhs-${r}`,className:"input-combobox",inputValue:i,value:{label:n.rDim?(E=(c=s.dimIndex[n.rDim])==null?void 0:c.displayName)!=null?E:n.r:"",value:n.r,isDisabled:!1},styles:{option:(u,{isDisabled:g})=>({...u,background:g?"transparent":void 0,fontSize:g?"0.8rem":void 0})},options:[{label:"Enter numeric score or choose another dimension score",value:"",isDisabled:!0},...s.dimensions.map(u=>({label:u.displayName,value:u.dim,isDisabled:!1}))],onChange:u=>{var g;u&&t({...n,rDim:(g=u.value)==null?void 0:g.toString(),r:void 0},r)},onInputChange:(u,g)=>{let D=M(u);g.action==="input-change"||g.action==="set-value"?(d(u),(D||u==="")&&t({...n,r:u,rDim:void 0},r)):!D&&!M(g.prevInputValue)&&d(u)},isDisabled:!a,noOptionsMessage:({inputValue:u})=>M(u)?`${u}`:"No options match",onMenuOpen:o,onMenuClose:l})}function M(t){return/^\d+$/.test(t.toString(10))}import $e from"react";import{useEffect as Ne,useState as Pe}from"react";import{ManifestClient as Ve,ApiClientError as Le}from"@uniformdev/context/api";function T({apiHost:t,apiKey:n,projectId:r}){let[s,a]=Pe({loading:!1,notConfigured:!1,error:null,result:null});return Ne(()=>{if(!r||!n||!t){a({notConfigured:!0,loading:!1,error:null,result:null});return}(async()=>{a({notConfigured:!1,loading:!0,error:null,result:null});try{let i=await new Ve({projectId:r,apiKey:n,apiHost:t}).get({preview:!0});a({notConfigured:!1,loading:!1,error:null,result:i})}catch(l){let i;l instanceof Le?(l.statusCode===403&&(i=`The API key ${n} did not have permissions to fetch the manifest. Ensure Context > Read Drafts permissions are granted.`),i=l.message):i=l.toString(),a({notConfigured:!1,loading:!1,error:i,result:null});return}})()},[t,n,r]),{result:s.result,error:s.error,loading:s.loading,notConfigured:s.notConfigured}}import{LoadingIndicator as ze}from"@uniformdev/design-system";function Mt({children:t,versionMap:n,contextConfig:r}){let{loading:s,result:a}=T(r);if(s)return e(ze,null);if(a){let o=n[a.project.ui_version];if(o)return e(o,null)}return e($e.Fragment,null,t)}import ee,{createContext as Ue,useContext as U}from"react";import{LoadingIndicator as Ae}from"@uniformdev/design-system";var S=Ue(null),Ut=({loadingComponent:t,errorComponent:n,contextConfig:r,children:s})=>{let a=T(r),o=R(r);return a.error||a.notConfigured?n?e(n,{contextConfig:r,result:a}):e(ee.Fragment,null,"ErrorComponent is not configured"):o.error||o.notConfigured?n?e(n,{contextConfig:r,result:o}):e(ee.Fragment,null,"ErrorComponent is not configured"):a.loading||o.loading?t?e(t,null):e(Ae,null):e(S.Provider,{value:{manifest:a.result,dimensions:o.result,contextConfig:r}},s)};function At(){let t=U(S);if(!(t!=null&&t.contextConfig))throw new Error("Not within DataContext! Configuration data is not exist.");return t.contextConfig}function Bt(){let t=U(S);if(!(t!=null&&t.manifest))throw new Error("Not within DataContext! Manifest data is not exist.");return t.manifest}function Ot(){let t=U(S);if(!(t!=null&&t.dimensions))throw new Error("Not within DataContext! Dimensions data is not exist.");return t.dimensions}import{validate as Be}from"uuid";import{ManifestClient as Oe}from"@uniformdev/context/api";var te=async t=>{if(!t)return{valid:!1,error:new Error("contextConfig was not defined.")};if(!t.apiHost)return{valid:!1,error:new Error("apiHost was not defined.")};if(!t.apiKey)return{valid:!1,error:new Error("apiKey was not defined.")};if(!Be(t.apiKey)&&!t.projectId)return{valid:!1,error:new Error("projectId is required when using a modern API key.")};let n=new Oe({projectId:t.projectId,apiKey:t.apiKey,apiHost:t.apiHost});try{let r=await n.get({preview:!0});return{valid:!0,result:r}}catch(r){return{valid:!1,error:r}}};import{useEffect as We,useState as Ge}from"react";var Xt=t=>{let[n,r]=Ge({validating:!1,error:void 0}),{apiKey:s,apiHost:a,projectId:o}=t||{};return We(()=>{if(!s||!a)return;(async()=>{r({validating:!0,error:void 0});let{error:i,result:d}=await te({apiHost:a,apiKey:s,projectId:o});r(i?{error:i,validating:!1}:{error:void 0,validating:!1,result:d})})()},[a,s,o]),{validating:n.validating,error:n.error,result:n.result}};function Jt(t){return Array.isArray(t)&&t.length>0&&t[0].cat!==void 0}function Qt(t){return t.crit!==void 0}export*from"@uniformdev/design-system";export{Ut as ContextData,B as EditLink,ct as EnrichmentTag,ht as PersonalizationCriteria,Mt as ProjectUIVersion,ve as addEnrichmentLink,Te as equality,Jt as isEnrichmentTagData,Qt as isPersonalizationCriteriaData,At as useContextConfig,T as useContextData,R as useDimensions,Ot as useDimensionsDataContext,Bt as useManifest,Xt as useValidateContextConfig,te as validateContextConfig};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/context-ui",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.1.0",
|
|
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",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@emotion/react": "11.9.0",
|
|
38
|
-
"@uniformdev/context": "^16.
|
|
39
|
-
"@uniformdev/design-system": "^16.
|
|
38
|
+
"@uniformdev/context": "^16.1.0",
|
|
39
|
+
"@uniformdev/design-system": "^16.1.0",
|
|
40
40
|
"immer": "9.0.14",
|
|
41
41
|
"react-beautiful-dnd": "13.1.0",
|
|
42
42
|
"react-icons": "^4.3.1",
|
|
@@ -77,5 +77,5 @@
|
|
|
77
77
|
"publishConfig": {
|
|
78
78
|
"access": "public"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "18a24d68a80d079bfdf74b52ccf352fc2f8a2821"
|
|
81
81
|
}
|