@uniformdev/context-ui 16.0.1-alpha.164 → 16.0.1-nuxt.146

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