@uniformdev/context-devtools 14.2.1-alpha.181 → 14.2.1-alpha.34
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/esm/index.js +37 -37
- package/dist/index.js +43 -43
- package/package.json +7 -7
package/dist/esm/index.js
CHANGED
|
@@ -33,7 +33,7 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
33
33
|
</svg>`},{title:"Settings",href:"/settings",icon:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
34
34
|
<path d="M19.1469 12.716C19.1986 12.2636 19.201 11.8069 19.1539 11.354L21.7429 9.474C21.8681 9.3822 21.9548 9.24723 21.9862 9.0952C22.0176 8.94316 21.9915 8.78489 21.9129 8.651L19.9939 5.399C19.9182 5.26986 19.7985 5.17231 19.6568 5.1242C19.515 5.07608 19.3606 5.08063 19.2219 5.137L16.3599 6.292C15.9237 5.9578 15.4502 5.67525 14.9489 5.45L14.5739 2.545C14.5547 2.39441 14.4813 2.25598 14.3673 2.15566C14.2534 2.05534 14.1068 1.99999 13.9549 2H10.0859C9.93402 1.99997 9.78728 2.05527 9.67317 2.15558C9.55906 2.25588 9.48539 2.39432 9.46595 2.545L9.09395 5.433C8.63957 5.63249 8.20723 5.87882 7.80395 6.168L5.00895 4.954C4.87173 4.89484 4.71787 4.88672 4.57519 4.9311C4.4325 4.97549 4.3104 5.06945 4.23095 5.196L2.22195 8.398C2.1396 8.52998 2.10934 8.68789 2.13707 8.84096C2.1648 8.99403 2.24854 9.1313 2.37195 9.226L4.86795 11.142C4.83172 11.4266 4.81302 11.7131 4.81195 12C4.81195 12.18 4.82095 12.362 4.83795 12.558L2.26495 14.375C2.13766 14.4647 2.04844 14.5987 2.01478 14.7508C1.98112 14.9028 2.00543 15.0619 2.08295 15.197L3.95695 18.474C4.11095 18.742 4.43695 18.857 4.72595 18.746L7.56095 17.644C8.00795 17.997 8.49195 18.294 9.00795 18.53L9.33795 21.396C9.37495 21.709 9.63795 21.946 9.95195 21.95L13.8169 22H13.8249C14.1349 22 14.3989 21.771 14.4439 21.463L14.8549 18.59C15.3703 18.3674 15.8579 18.0855 16.3079 17.75L19.1279 18.93C19.4129 19.05 19.7419 18.944 19.9029 18.679L21.8669 15.452C21.9477 15.319 21.976 15.1608 21.9464 15.0081C21.9168 14.8554 21.8315 14.7192 21.7069 14.626L19.1469 12.716ZM11.9999 15C10.3459 15 8.99995 13.655 8.99995 12C8.99995 10.346 10.3449 9 11.9999 9C13.6539 9 14.9999 10.345 14.9999 12C14.9999 13.654 13.6539 15 11.9999 15Z" fill="white"/>
|
|
35
35
|
</svg>
|
|
36
|
-
`}],
|
|
36
|
+
`}],rt=({...e})=>{let r=o=>{if(o.preventDefault(),o.currentTarget.pathname)return e.saveSettings({...e.settings,route:o.currentTarget.pathname})},n=o=>{var i;let a="active";return!((i=e.settings)==null?void 0:i.route)&&o==="/dimensions"||e.settings.route===o?a:""};return t("nav",{css:S`
|
|
37
37
|
background: var(--brand-secondary-1);
|
|
38
38
|
padding: var(--spacing-base);
|
|
39
39
|
min-width: 200px;
|
|
@@ -72,7 +72,7 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
72
72
|
`,className:n(o.href),href:o.href,title:o.title,onClick:i=>r(i)},t("i",{css:S`
|
|
73
73
|
align-items: center;
|
|
74
74
|
display: flex;
|
|
75
|
-
`,dangerouslySetInnerHTML:{__html:o.icon}}),o.title)))))};var
|
|
75
|
+
`,dangerouslySetInnerHTML:{__html:o.icon}}),o.title)))))};var nt=()=>t("article",null,t("h1",null,"Something when wrong"),t("p",null,"We could not find the page you're looking for."));import*as _ from"react";import{css as H}from"@emotion/react";import*as I from"react";var at=H({willChange:"height"}),Ht=H`
|
|
76
76
|
border-bottom: 2px solid var(--brand-secondary-1);
|
|
77
77
|
font-size: var(--font-base);
|
|
78
78
|
margin: 0;
|
|
@@ -90,9 +90,9 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
90
90
|
align-self: center;
|
|
91
91
|
`,At=H`
|
|
92
92
|
transform: rotate(-180deg);
|
|
93
|
-
`,E=({children:e})=>t("div",{css:[
|
|
93
|
+
`,E=({children:e})=>t("div",{css:[at]},e),B=({title:e,children:r})=>{let[n,o]=I.useState(!1),a=e.split(" ").join("-").toLocaleLowerCase();return t(I.Fragment,null,t("h3",{css:Ht},t("button",{"aria-expanded":n,css:Vt,title:e,id:a,"aria-controls":`${a}-section`,onClick:()=>o(i=>!i),type:"button"},e,t("i",{css:[Pt,n?At:void 0]},t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",fill:"currentColor"}))))),t("div",{id:`${a}-section`,css:[at,H`
|
|
94
94
|
padding: var(--spacing-sm) 0;
|
|
95
|
-
`],role:"region","aria-labelledby":a},n?r:null))};import{css as T}from"@emotion/react";import*as
|
|
95
|
+
`],role:"region","aria-labelledby":a},n?r:null))};import{css as T}from"@emotion/react";import*as it from"react";var Mt=T`
|
|
96
96
|
align-items: center;
|
|
97
97
|
border: 1px solid transparent;
|
|
98
98
|
cursor: pointer;
|
|
@@ -125,7 +125,7 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
125
125
|
&:hover {
|
|
126
126
|
border: 1px solid var(--brand-secondary-5);
|
|
127
127
|
}
|
|
128
|
-
`}}var k=({buttonType:e="primary",children:r,className:n,...o})=>t(
|
|
128
|
+
`}}var k=({buttonType:e="primary",children:r,className:n,...o})=>t(it.Fragment,null,t("button",{type:"button",css:[Mt,zt(e)],className:n,...o},r));import{css as V}from"@emotion/react";var F=V`
|
|
129
129
|
background-color: var(--gray-100);
|
|
130
130
|
padding: var(--spacing-base) var(--spacing-md);
|
|
131
131
|
margin: var(--spacing-base) 0;
|
|
@@ -133,7 +133,7 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
133
133
|
&:first-of-type {
|
|
134
134
|
margin: 0 0 var(--spacing-base);
|
|
135
135
|
}
|
|
136
|
-
`,
|
|
136
|
+
`,st=V`
|
|
137
137
|
background: var(--gray-100)
|
|
138
138
|
url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 2C8.44771 2 8 2.44772 8 3V5C8 5.55228 8.44771 6 9 6C9.55229 6 10 5.55228 10 5V3C10 2.44772 9.55229 2 9 2ZM8 9H16V11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11V9ZM13 16.917C15.8377 16.441 18 13.973 18 11V7H6V11C6 13.973 8.16229 16.441 11 16.917V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V16.917ZM14 3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V5C16 5.55228 15.5523 6 15 6C14.4477 6 14 5.55228 14 5V3Z' fill='%232ecdb4' /%3E%3C/svg%3E")
|
|
139
139
|
no-repeat var(--spacing-sm) var(--spacing-base);
|
|
@@ -147,7 +147,7 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
147
147
|
color: var(--brand-secondary-1);
|
|
148
148
|
margin: var(--spacing-xs) 0 0;
|
|
149
149
|
font-size: var(--font-sm);
|
|
150
|
-
`,
|
|
150
|
+
`,ct=V`
|
|
151
151
|
align-items: center;
|
|
152
152
|
border: none;
|
|
153
153
|
background: transparent
|
|
@@ -171,17 +171,17 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
171
171
|
display: flex;
|
|
172
172
|
margin: var(--spacing-sm) 0 0;
|
|
173
173
|
gap: var(--spacing-base);
|
|
174
|
-
`;var O=({title:e,text:r,buttonGroup:n,children:o})=>t("div",{css:F},t("h2",{css:Z},e),t("p",{css:U},r),o,n?t("div",{css:N},n):null);import{css as A}from"@emotion/react";var
|
|
174
|
+
`;var O=({title:e,text:r,buttonGroup:n,children:o})=>t("div",{css:F},t("h2",{css:Z},e),t("p",{css:U},r),o,n?t("div",{css:N},n):null);import{css as A}from"@emotion/react";var lt=A`
|
|
175
175
|
align-items: center;
|
|
176
176
|
cursor: pointer;
|
|
177
177
|
display: flex;
|
|
178
178
|
gap: var(--spacing-xs);
|
|
179
|
-
`,
|
|
179
|
+
`,pt=A`
|
|
180
180
|
color: var(--gray-500);
|
|
181
181
|
font-size: var(--font-sm);
|
|
182
|
-
`,
|
|
182
|
+
`,ge=A`
|
|
183
183
|
background: var(--gray-600);
|
|
184
|
-
`,
|
|
184
|
+
`,dt=A`
|
|
185
185
|
display: block;
|
|
186
186
|
background: var(--gray-400);
|
|
187
187
|
border-radius: var(--rounded-full);
|
|
@@ -202,7 +202,7 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
202
202
|
transform: translateX(2px);
|
|
203
203
|
transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;
|
|
204
204
|
}
|
|
205
|
-
`,
|
|
205
|
+
`,mt=A`
|
|
206
206
|
overflow: hidden;
|
|
207
207
|
clip: rect(0, 0, 0, 0);
|
|
208
208
|
height: 0;
|
|
@@ -216,12 +216,12 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
216
216
|
&:checked ~ span {
|
|
217
217
|
background: var(--brand-secondary-5);
|
|
218
218
|
}
|
|
219
|
-
`;var
|
|
219
|
+
`;var ut=({label:e,...r})=>t("label",{css:lt},t("span",{css:pt},e),t("input",{type:"checkbox",css:mt,...r}),t("span",{css:dt}));import{css as y}from"@emotion/react";var M=({children:e})=>t("table",{css:y`
|
|
220
220
|
border-collapse: collapse;
|
|
221
221
|
display: table;
|
|
222
222
|
width: 100%;
|
|
223
223
|
font-size: var(--font-sm);
|
|
224
|
-
`},e),
|
|
224
|
+
`},e),gt=({children:e})=>t("thead",{css:y`
|
|
225
225
|
background: var(--gray-50);
|
|
226
226
|
text-align: left;
|
|
227
227
|
& tr {
|
|
@@ -287,7 +287,7 @@ to {
|
|
|
287
287
|
`,error:x`
|
|
288
288
|
color: var(--brand-secondary-5);
|
|
289
289
|
font-size: var(--font-sm);
|
|
290
|
-
`};var
|
|
290
|
+
`};var ft=({dimensionIndex:{index:e},state:{scores:r,data:n},actions:o})=>{let a=_.useMemo(()=>Object.keys(e).filter(l=>!r[l]).map(l=>{var p;return(p=e[l])!=null?p:{name:l,dim:l,type:"Unknown"}}),[r,e]),i=Object.keys(r).length,u=i+a.length,b=()=>{o.rawUpdate([{type:"setcontrol",data:!n.controlGroup}])};return t(_.Fragment,null,t("article",{css:g.page},t("div",{css:g.headingGroup},t("h2",{css:g.title},"Dimensions",t("small",null,i," active of ",u)),t(ut,{label:"Control Group",onChange:b,checked:n.controlGroup})),i>0?t(M,null,t(z,null,Object.entries(r).map(([l,p],d)=>{var C;let{name:h,type:v,category:f}=(C=e==null?void 0:e[l])!=null?C:{name:l,dim:l,type:"Unknown"};return t(P,{key:d},t(w,null,t("b",null,p)),t(w,null,t("span",{css:g.divider,role:"presentation"}),t("strong",null,f?`${f}:`:""," ",h)),t(w,{alignment:"right",color:"light"},v))}))):t(O,{title:n.controlGroup?"In control group":"No active dimensions",text:n.controlGroup?"You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run.":"You do not have score in any dimensions yet.",buttonGroup:n.controlGroup?t(k,{buttonType:"secondary",onClick:b},"Exit control group"):null}),t(E,null,t(B,{title:"Inactive Dimensions"},t(M,null,t(z,null,a.map(({dim:l,type:p,name:d,category:h})=>t(P,{key:l},t(w,null,t("strong",null,h?`${h}:`:""," ",d)),t(w,{alignment:"right",color:"light"},p)))))))))};var bt=({...e})=>{let{state:{data:r}}=e;return t(m.Fragment,null,t("article",{css:g.page},t("h1",{css:g.title},"Quirks"),t("p",{css:g.text},"Keys defined in Uniform and their current, programmatically defined values for this visit."),Object.keys(r.quirks).length?t(M,null,t(gt,null,t(P,null,t(J,null,"Key"),t(J,null,"Value"))),t(z,null,Object.entries(r.quirks).map(([n,o],a)=>t(P,{key:a,border:"bottom"},t(w,null,t("strong",null,n)),t(w,null,o))))):t(O,{title:"No quirks configured",text:"There are currently no quirks setup."})))};import{Field as X,Form as _t,Formik as Gt}from"formik";import{ErrorMessage as Zt}from"formik";import{css as D}from"@emotion/react";var ht=D`
|
|
291
291
|
background: var(--white);
|
|
292
292
|
border: 1px solid var(--gray-500);
|
|
293
293
|
border-radius: var(--rounded-base);
|
|
@@ -298,7 +298,7 @@ to {
|
|
|
298
298
|
cursor: not-allowed;
|
|
299
299
|
color: var(--gray-200);
|
|
300
300
|
}
|
|
301
|
-
`,
|
|
301
|
+
`,vt=D`
|
|
302
302
|
appearance: none;
|
|
303
303
|
background: var(--white) url('./assets/chevon-down.svg') no-repeat 98% 50%;
|
|
304
304
|
border: 1px solid var(--gray-500);
|
|
@@ -327,13 +327,13 @@ to {
|
|
|
327
327
|
`,W=D`
|
|
328
328
|
color: var(--brand-secondary-5);
|
|
329
329
|
display: block;
|
|
330
|
-
`;var Q=({field:e,form:r,meta:n,...o})=>{let{label:a,caption:i,...u}=o;return t("div",{css:G},t("label",{css:K},t("span",{css:$},a),t("input",{type:"text",css:
|
|
330
|
+
`;var Q=({field:e,form:r,meta:n,...o})=>{let{label:a,caption:i,...u}=o;return t("div",{css:G},t("label",{css:K},t("span",{css:$},a),t("input",{type:"text",css:ht,...e,...u})),i?t("span",{css:q},i):null,t(Zt,{component:"div",css:W,name:e.name}))};import{ErrorMessage as Ut}from"formik";var yt=({field:e,form:r,meta:n,...o})=>{let{label:a,options:i,caption:u,...b}=o;return t("div",{css:G},t("label",{css:K},t("span",{css:$},a),t("select",{...e,...b,css:vt},i.map((l,p)=>t("option",{value:l.value,key:p},l.text)))),u?t("span",{css:q},u):null,t(Ut,{component:"div",css:W,name:e.name}))};import*as R from"yup";import{css as Nt}from"@emotion/react";var j=({children:e,...r})=>t("fieldset",{css:Nt`
|
|
331
331
|
border: none;
|
|
332
332
|
padding: 0;
|
|
333
333
|
`,...r},e);import{css as Ot}from"@emotion/react";var tt=({children:e})=>t("legend",{css:Ot`
|
|
334
334
|
font-size: var(--font-base);
|
|
335
335
|
font-weight: var(--font-bold);
|
|
336
|
-
`},e);var Kt=R.object({apiKey:R.string().matches(/^uf.+$/,"API keys start with `uf`, double check your API key"),apiHost:R.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/,"API host must be a Uniform domain."),logLevel:R.string(),projectId:R.string().uuid()}),
|
|
336
|
+
`},e);var Kt=R.object({apiKey:R.string().matches(/^uf.+$/,"API keys start with `uf`, double check your API key"),apiHost:R.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/,"API host must be a Uniform domain."),logLevel:R.string(),projectId:R.string().uuid()}),wt=({settings:e,saveSettings:r,dimensionIndex:{error:n,loading:o}})=>{let a=[{value:"none",text:"Logging off"},{value:"info",text:"Log info, warnings, and errors"},{value:"warn",text:"Log warnings and errors"},{value:"error",text:"Log errors"},{value:"debug",text:"Verbose debug logging"}];return t(Gt,{initialValues:{apiHost:"",apiKey:"",projectId:"",logLevel:"none",...e},validationSchema:Kt,enableReinitialize:!0,onSubmit:i=>{r({...e,apiHost:i.apiHost,apiKey:i.apiKey,projectId:i.projectId,logLevel:i.logLevel})}},({dirty:i,isValid:u,isSubmitting:b})=>t(_t,{css:g.page},t("h1",{css:g.title},"Settings"),t(X,{component:yt,label:"Logging",caption:"Logs can be viewed in the browser console",id:"logging",name:"logLevel",options:a,disabled:b}),t(j,{disabled:b},t(tt,null,"Data Connection"),!o&&n?t("p",{css:g.error},"Unable to fetch data from Uniform",t("br",null),t("em",null,n.message)):null,t("p",{css:g.text},t("small",null,"Adding an API key and project ID enables richer dimension data to be shown. You must have access to the Uniform project to do this.")),t(X,{component:Q,label:"Uniform API key",caption:"Generate an API key in your Uniform team settings. Grant only Context: Read Drafts permission.",id:"api-key",name:"apiKey",autoComplete:"off"}),t(X,{component:Q,label:"Uniform Project ID",caption:"Available after generating an API key ",id:"project-id",name:"projectId",autoComplete:"off"}),t(E,null,t(B,{title:"Advanced"},t(X,{component:Q,label:"Alternative API Host",caption:"Use a non-standard Uniform API endpoint. Most people will not not need this option.",id:"api-host",name:"apiHost",autoComplete:"off"}))),i?t(k,{type:"submit",css:g.submitButton,disabled:!u},"Save"):null)))};var et=({settings:e,saveSettings:r})=>{let n=()=>{r({...e,route:"/settings"})},o=()=>{r({...e,ignoreApiKeyPrompt:!0})},a=!(e==null?void 0:e.apiKey);return!e.ignoreApiKeyPrompt&&a?t("div",{css:[F,st]},t("h2",{css:Z},"Connect this site"),t("p",{css:U},"Add a Uniform API key to get better data."),t("div",{css:N},t(k,{buttonType:"secondary",onClick:n},"Connect this site"),t(k,{buttonType:"ghost",onClick:o},"Skip for now")),t("button",{type:"button",css:ct,title:"close",onClick:o},t("span",{hidden:!0},"Close"))):null};import{computeDimensionDefinitionDisplayData as $t,computeDimensionDisplayData as Ct,DimensionClient as qt}from"@uniformdev/context/api";import{useAsync as Wt}from"react-use";import*as Lt from"react";function Tt({apiHost:e,apiKey:r,projectId:n},o){let a=Lt.useMemo(()=>{var p,d,h,v;let l={};return o&&(Object.keys((d=(p=o==null?void 0:o.project.pz)==null?void 0:p.sig)!=null?d:{}).forEach(f=>{let C=Ct(f,o);C&&(l[f]=C)}),Object.keys((v=(h=o==null?void 0:o.project.pz)==null?void 0:h.agg)!=null?v:{}).forEach(f=>{let C=Ct(f,o);C&&(l[f]=C)})),l},[o]),{loading:i,error:u,value:b}=Wt(async()=>{if(!r||!n)return a;let p=(await new qt({projectId:n,apiKey:r,apiHost:e||void 0}).get()).dimensions,d={...a};return p.forEach(h=>{d[h.dim]=$t(h)}),d},[e,r,n,a]);return{loading:i,error:u,index:b!=null?b:a}}import{css as ot}from"@emotion/react";function Y(){return t("style",null,`
|
|
337
337
|
:root {
|
|
338
338
|
--brand-primary-1: #438fd5; /* bright blue */
|
|
339
339
|
--brand-primary-2: #f4220b; /* red */
|
|
@@ -694,7 +694,7 @@ Add the correct display in Chrome and Safari.
|
|
|
694
694
|
|
|
695
695
|
summary {
|
|
696
696
|
display: list-item;
|
|
697
|
-
}`)}var Qt=
|
|
697
|
+
}`)}var Qt=ot`
|
|
698
698
|
background: var(--white);
|
|
699
699
|
padding: var(--spacing-base);
|
|
700
700
|
overflow-y: auto;
|
|
@@ -723,16 +723,23 @@ summary {
|
|
|
723
723
|
&::-webkit-scrollbar-thumb:hover {
|
|
724
724
|
background: var(--gray-500);
|
|
725
725
|
}
|
|
726
|
-
`;function kt(e){let r=
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
726
|
+
`;function kt(e){let r=typeof chrome!="undefined"&&typeof chrome.storage!="undefined",n=Tt(e.settings,e.state.manifest),o={...e,dimensionIndex:n},a=()=>{var i;switch((i=e.settings)==null?void 0:i.route){case void 0:case"/":case"/dimensions":return t(ft,{...o});case"/quirks":return t(bt,{...o});case"/settings":return t(wt,{...o});default:return t(nt,null)}};return t(m.Fragment,null,t(Y,null),t("div",{css:[ot`
|
|
727
|
+
display: grid;
|
|
728
|
+
grid-template-columns: 200px auto;
|
|
729
|
+
font-weight: var(--font-regular);
|
|
730
|
+
font-size: var(--base-font-size);
|
|
731
|
+
font-family: var(--base-font-family);
|
|
732
|
+
line-height: var(--base-line-height);
|
|
733
|
+
height: var(--min-height);
|
|
734
|
+
min-width: var(--site-width);
|
|
735
|
+
`,r?void 0:ot`
|
|
736
|
+
box-shadow: var(--shadow-base);
|
|
737
|
+
position: fixed;
|
|
738
|
+
bottom: 82px;
|
|
739
|
+
right: var(--spacing-base);
|
|
740
|
+
z-index: var(--z-10);
|
|
741
|
+
max-width: var(--site-width);
|
|
742
|
+
`]},t(rt,{...e}),t("main",{css:Qt},t(et,{...e}),a())))}import{Context as Xt,createDebugConsoleLogDrain as Yt}from"@uniformdev/context";import*as L from"react";function xt({context:e,initialSettings:r}){let n=e!=null?e:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,o=n!=null?n:new Xt({manifest:{project:{}}}),[a,i]=L.useState({data:o.storage.data,manifest:o.manifest.data,scores:o.scores,personalizations:[],tests:[]}),[u,b]=L.useState(r!=null?r:{});L.useEffect(()=>{var d;let p=Yt((d=u.logLevel)!=null?d:"none");return o.events.on("log",p),()=>{o.events.off("log",p)}},[u,o]),L.useEffect(()=>{let p=()=>{i(v=>({...v,scores:o.scores,data:o.storage.data,manifest:o.manifest.data}))},d=v=>{!v.changed||i(f=>({...f,personalizations:[...f.personalizations,v]}))},h=v=>{!v.variantAssigned||i(f=>({...f,tests:[...f.tests,v]}))};return o.events.on("personalizationResult",d),o.events.on("testResult",h),o.storage.events.on("*",p),()=>{o.storage.events.off("*",p),o.events.off("personalizationResult",d),o.events.off("testResult",h)}},[o,u]);let l=L.useMemo(()=>({update:d=>o.update(d),forget:()=>o.forget(!1),rawUpdate:d=>o.storage.updateData(d)}),[o]);return n?t(kt,{state:a,actions:l,settings:u,saveSettings:b}):t("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}import*as Rt from"react";import{css as Jt}from"@emotion/react";var jt=Jt`
|
|
736
743
|
align-items: center;
|
|
737
744
|
border-radius: var(--rounded-full);
|
|
738
745
|
background: var(--brand-secondary-5);
|
|
@@ -758,11 +765,4 @@ summary {
|
|
|
758
765
|
max-width: 100%;
|
|
759
766
|
height: auto;
|
|
760
767
|
}
|
|
761
|
-
`,Dt=({...e})=>t("button",{type:"button",css:jt,...e},t("span",{hidden:!0},"Uniform devtools"),t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),t("path",{d:"M7.61197 18.3608L8.97136 16.9124L8.97086 16.8933L3.87657 12.1121L8.66699 7.00798L7.20868 5.63928L1.04956 12.2017L7.61197 18.3608Z",fill:"currentColor"}),t("path",{d:"M16.388 18.3608L15.0286 16.9124L15.0291 16.8933L20.1234 12.1121L15.333 7.00798L16.7913 5.63928L22.9504 12.2017L16.388 18.3608Z",fill:"currentColor"})));function
|
|
762
|
-
box-shadow: var(--shadow-base);
|
|
763
|
-
position: fixed;
|
|
764
|
-
bottom: 82px;
|
|
765
|
-
right: var(--spacing-base);
|
|
766
|
-
z-index: var(--z-10);
|
|
767
|
-
max-width: var(--site-width);
|
|
768
|
-
`},t(xt,{...e})):null):t("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}export{kt as ContextDevTools,xt as EmbeddedContextDevTools,Fo as ToggleEmbeddedContextDevTools};
|
|
768
|
+
`,Dt=({...e})=>t("button",{type:"button",css:jt,...e},t("span",{hidden:!0},"Uniform devtools"),t("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),t("path",{d:"M7.61197 18.3608L8.97136 16.9124L8.97086 16.8933L3.87657 12.1121L8.66699 7.00798L7.20868 5.63928L1.04956 12.2017L7.61197 18.3608Z",fill:"currentColor"}),t("path",{d:"M16.388 18.3608L15.0286 16.9124L15.0291 16.8933L20.1234 12.1121L15.333 7.00798L16.7913 5.63928L22.9504 12.2017L16.388 18.3608Z",fill:"currentColor"})));function Eo(e){var a;let[r,n]=Rt.useState(!1);return((a=e.context)!=null?a:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0)?t("div",null,t(Y,null),t(Dt,{onClick:()=>n(i=>!i)}),r?t(xt,{...e}):null):t("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}export{kt as ContextDevTools,xt as EmbeddedContextDevTools,Eo as ToggleEmbeddedContextDevTools};
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var Ft=Object.create;var B=Object.defineProperty;var Zt=Object.getOwnPropertyDescriptor;var Ut=Object.getOwnPropertyNames;var Nt=Object.getPrototypeOf,Ot=Object.prototype.hasOwnProperty;var ct=e=>B(e,"__esModule",{value:!0});var _t=(e,r)=>{for(var n in r)B(e,n,{get:r[n],enumerable:!0})},lt=(e,r,n,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Ut(r))!Ot.call(e,a)&&(n||a!=="default")&&B(e,a,{get:()=>r[a],enumerable:!(o=Zt(r,a))||o.enumerable});return e},T=(e,r)=>lt(ct(B(e!=null?Ft(Nt(e)):{},"default",!r&&e&&e.__esModule?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e),Gt=(e=>(r,n)=>e&&e.get(r)||(n=lt(ct({}),r,1),e&&e.set(r,n),n))(typeof WeakMap!="undefined"?new WeakMap:0);var ae={};_t(ae,{ContextDevTools:()=>it,EmbeddedContextDevTools:()=>st,ToggleEmbeddedContextDevTools:()=>ne});var t=require("@emotion/react"),d=T(require("react"));var R=require("@emotion/react"),Kt=[{title:"Dimensions",href:"/dimensions",icon:`<svg
|
|
2
2
|
width="24"
|
|
3
3
|
height="24"
|
|
4
4
|
viewBox="0 0 24 24"
|
|
@@ -33,7 +33,7 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
33
33
|
</svg>`},{title:"Settings",href:"/settings",icon:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
34
34
|
<path d="M19.1469 12.716C19.1986 12.2636 19.201 11.8069 19.1539 11.354L21.7429 9.474C21.8681 9.3822 21.9548 9.24723 21.9862 9.0952C22.0176 8.94316 21.9915 8.78489 21.9129 8.651L19.9939 5.399C19.9182 5.26986 19.7985 5.17231 19.6568 5.1242C19.515 5.07608 19.3606 5.08063 19.2219 5.137L16.3599 6.292C15.9237 5.9578 15.4502 5.67525 14.9489 5.45L14.5739 2.545C14.5547 2.39441 14.4813 2.25598 14.3673 2.15566C14.2534 2.05534 14.1068 1.99999 13.9549 2H10.0859C9.93402 1.99997 9.78728 2.05527 9.67317 2.15558C9.55906 2.25588 9.48539 2.39432 9.46595 2.545L9.09395 5.433C8.63957 5.63249 8.20723 5.87882 7.80395 6.168L5.00895 4.954C4.87173 4.89484 4.71787 4.88672 4.57519 4.9311C4.4325 4.97549 4.3104 5.06945 4.23095 5.196L2.22195 8.398C2.1396 8.52998 2.10934 8.68789 2.13707 8.84096C2.1648 8.99403 2.24854 9.1313 2.37195 9.226L4.86795 11.142C4.83172 11.4266 4.81302 11.7131 4.81195 12C4.81195 12.18 4.82095 12.362 4.83795 12.558L2.26495 14.375C2.13766 14.4647 2.04844 14.5987 2.01478 14.7508C1.98112 14.9028 2.00543 15.0619 2.08295 15.197L3.95695 18.474C4.11095 18.742 4.43695 18.857 4.72595 18.746L7.56095 17.644C8.00795 17.997 8.49195 18.294 9.00795 18.53L9.33795 21.396C9.37495 21.709 9.63795 21.946 9.95195 21.95L13.8169 22H13.8249C14.1349 22 14.3989 21.771 14.4439 21.463L14.8549 18.59C15.3703 18.3674 15.8579 18.0855 16.3079 17.75L19.1279 18.93C19.4129 19.05 19.7419 18.944 19.9029 18.679L21.8669 15.452C21.9477 15.319 21.976 15.1608 21.9464 15.0081C21.9168 14.8554 21.8315 14.7192 21.7069 14.626L19.1469 12.716ZM11.9999 15C10.3459 15 8.99995 13.655 8.99995 12C8.99995 10.346 10.3449 9 11.9999 9C13.6539 9 14.9999 10.345 14.9999 12C14.9999 13.654 13.6539 15 11.9999 15Z" fill="white"/>
|
|
35
35
|
</svg>
|
|
36
|
-
`}],pt=({...e})=>{let r=o=>{if(o.preventDefault(),o.currentTarget.pathname)return e.saveSettings({...e.settings,route:o.currentTarget.pathname})},n=o=>{var i;let a="active";return!((i=e.settings)
|
|
36
|
+
`}],pt=({...e})=>{let r=o=>{if(o.preventDefault(),o.currentTarget.pathname)return e.saveSettings({...e.settings,route:o.currentTarget.pathname})},n=o=>{var i;let a="active";return!((i=e.settings)==null?void 0:i.route)&&o==="/dimensions"||e.settings.route===o?a:""};return(0,t.jsx)("nav",{css:R.css`
|
|
37
37
|
background: var(--brand-secondary-1);
|
|
38
38
|
padding: var(--spacing-base);
|
|
39
39
|
min-width: 200px;
|
|
@@ -47,7 +47,7 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
47
47
|
margin: 0;
|
|
48
48
|
list-style-type: none;
|
|
49
49
|
height: calc(100% - var(--spacing-base) * 2.5);
|
|
50
|
-
`}
|
|
50
|
+
`},Kt.map((o,a)=>(0,t.jsx)("li",{css:R.css`
|
|
51
51
|
padding: 0;
|
|
52
52
|
margin: 0;
|
|
53
53
|
list-style-type: none;
|
|
@@ -72,11 +72,11 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
72
72
|
`,className:n(o.href),href:o.href,title:o.title,onClick:i=>r(i)},(0,t.jsx)("i",{css:R.css`
|
|
73
73
|
align-items: center;
|
|
74
74
|
display: flex;
|
|
75
|
-
`,dangerouslySetInnerHTML:{__html:o.icon}}),o.title)))))};var dt=()=>(0,t.jsx)("article",null,(0,t.jsx)("h1",null,"Something when wrong"),(0,t.jsx)("p",null,"We could not find the page you're looking for."));var $=T(require("react"));var S=require("@emotion/react"),F=T(require("react")),mt=(0,S.css)({willChange:"height"})
|
|
75
|
+
`,dangerouslySetInnerHTML:{__html:o.icon}}),o.title)))))};var dt=()=>(0,t.jsx)("article",null,(0,t.jsx)("h1",null,"Something when wrong"),(0,t.jsx)("p",null,"We could not find the page you're looking for."));var $=T(require("react"));var S=require("@emotion/react"),F=T(require("react")),mt=(0,S.css)({willChange:"height"}),$t=S.css`
|
|
76
76
|
border-bottom: 2px solid var(--brand-secondary-1);
|
|
77
77
|
font-size: var(--font-base);
|
|
78
78
|
margin: 0;
|
|
79
|
-
`,
|
|
79
|
+
`,qt=S.css`
|
|
80
80
|
align-items: center;
|
|
81
81
|
border: none;
|
|
82
82
|
background: none;
|
|
@@ -86,13 +86,13 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
86
86
|
padding: var(--spacing-sm) 0;
|
|
87
87
|
font-weight: var(--font-bold);
|
|
88
88
|
justify-content: space-between;
|
|
89
|
-
`,
|
|
89
|
+
`,Wt=S.css`
|
|
90
90
|
align-self: center;
|
|
91
|
-
`,
|
|
91
|
+
`,Qt=S.css`
|
|
92
92
|
transform: rotate(-180deg);
|
|
93
|
-
`,Z=({children:e})=>(0,t.jsx)("div",{css:[mt]},e),U=({title:e,children:r})=>{let[n,o]=F.useState(!1),a=e.split(" ").join("-").toLocaleLowerCase();return(0,t.jsx)(F.Fragment,null,(0,t.jsx)("h3",{css
|
|
93
|
+
`,Z=({children:e})=>(0,t.jsx)("div",{css:[mt]},e),U=({title:e,children:r})=>{let[n,o]=F.useState(!1),a=e.split(" ").join("-").toLocaleLowerCase();return(0,t.jsx)(F.Fragment,null,(0,t.jsx)("h3",{css:$t},(0,t.jsx)("button",{"aria-expanded":n,css:qt,title:e,id:a,"aria-controls":`${a}-section`,onClick:()=>o(i=>!i),type:"button"},e,(0,t.jsx)("i",{css:[Wt,n?Qt:void 0]},(0,t.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},(0,t.jsx)("path",{d:"M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",fill:"currentColor"}))))),(0,t.jsx)("div",{id:`${a}-section`,css:[mt,S.css`
|
|
94
94
|
padding: var(--spacing-sm) 0;
|
|
95
|
-
`],role:"region","aria-labelledby":a},n?r:null))};var k=require("@emotion/react"),ut=T(require("react")),
|
|
95
|
+
`],role:"region","aria-labelledby":a},n?r:null))};var k=require("@emotion/react"),ut=T(require("react")),Xt=k.css`
|
|
96
96
|
align-items: center;
|
|
97
97
|
border: 1px solid transparent;
|
|
98
98
|
cursor: pointer;
|
|
@@ -103,7 +103,7 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
103
103
|
&:hover {
|
|
104
104
|
opacity: 0.8;
|
|
105
105
|
}
|
|
106
|
-
`;function
|
|
106
|
+
`;function Yt(e){let r=k.css`
|
|
107
107
|
color: var(--white);
|
|
108
108
|
`,n=k.css`
|
|
109
109
|
font-weight: var(--font-bold);
|
|
@@ -125,7 +125,7 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
125
125
|
&:hover {
|
|
126
126
|
border: 1px solid var(--brand-secondary-5);
|
|
127
127
|
}
|
|
128
|
-
`}}var H=({buttonType:e="primary",children:r,className:n,...o})=>(0,t.jsx)(ut.Fragment,null,(0,t.jsx)("button",{type:"button",css:[Yt
|
|
128
|
+
`}}var H=({buttonType:e="primary",children:r,className:n,...o})=>(0,t.jsx)(ut.Fragment,null,(0,t.jsx)("button",{type:"button",css:[Xt,Yt(e)],className:n,...o},r));var V=require("@emotion/react"),N=V.css`
|
|
129
129
|
background-color: var(--gray-100);
|
|
130
130
|
padding: var(--spacing-base) var(--spacing-md);
|
|
131
131
|
margin: var(--spacing-base) 0;
|
|
@@ -147,7 +147,7 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
147
147
|
color: var(--brand-secondary-1);
|
|
148
148
|
margin: var(--spacing-xs) 0 0;
|
|
149
149
|
font-size: var(--font-sm);
|
|
150
|
-
`,
|
|
150
|
+
`,ft=V.css`
|
|
151
151
|
align-items: center;
|
|
152
152
|
border: none;
|
|
153
153
|
background: transparent
|
|
@@ -171,7 +171,7 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
171
171
|
display: flex;
|
|
172
172
|
margin: var(--spacing-sm) 0 0;
|
|
173
173
|
gap: var(--spacing-base);
|
|
174
|
-
`;var K=({title:e,text:r,buttonGroup:n,children:o})=>(0,t.jsx)("div",{css:N},(0,t.jsx)("h2",{css:O},e),(0,t.jsx)("p",{css:_},r),o,n?(0,t.jsx)("div",{css:G},n):null);var M=require("@emotion/react"),
|
|
174
|
+
`;var K=({title:e,text:r,buttonGroup:n,children:o})=>(0,t.jsx)("div",{css:N},(0,t.jsx)("h2",{css:O},e),(0,t.jsx)("p",{css:_},r),o,n?(0,t.jsx)("div",{css:G},n):null);var M=require("@emotion/react"),bt=M.css`
|
|
175
175
|
align-items: center;
|
|
176
176
|
cursor: pointer;
|
|
177
177
|
display: flex;
|
|
@@ -216,7 +216,7 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
216
216
|
&:checked ~ span {
|
|
217
217
|
background: var(--brand-secondary-5);
|
|
218
218
|
}
|
|
219
|
-
`;var wt=({label:e,...r})=>(0,t.jsx)("label",{css:
|
|
219
|
+
`;var wt=({label:e,...r})=>(0,t.jsx)("label",{css:bt},(0,t.jsx)("span",{css:ht},e),(0,t.jsx)("input",{type:"checkbox",css:yt,...r}),(0,t.jsx)("span",{css:vt}));var v=require("@emotion/react"),I=({children:e})=>(0,t.jsx)("table",{css:v.css`
|
|
220
220
|
border-collapse: collapse;
|
|
221
221
|
display: table;
|
|
222
222
|
width: 100%;
|
|
@@ -232,23 +232,23 @@ var Zt=Object.create;var B=Object.defineProperty;var Ut=Object.getOwnPropertyDes
|
|
|
232
232
|
&:where(:last-child) {
|
|
233
233
|
border: none;
|
|
234
234
|
}
|
|
235
|
-
`:void 0},r),
|
|
235
|
+
`:void 0},r),ot=({children:e})=>(0,t.jsx)("th",{css:v.css`
|
|
236
236
|
outline: none;
|
|
237
237
|
padding: var(--spacing-sm);
|
|
238
|
-
`},e);function
|
|
238
|
+
`},e);function Jt(e){switch(e){case"light":return v.css`
|
|
239
239
|
color: var(--gray-400);
|
|
240
240
|
`;case"dark":return v.css`
|
|
241
241
|
color: var(--brand-secondary-1);
|
|
242
|
-
`}}function
|
|
242
|
+
`}}function jt(e){return v.css`
|
|
243
243
|
text-align: ${e};
|
|
244
244
|
`}var w=({alignment:e="left",border:r,color:n="dark",children:o})=>(0,t.jsx)("td",{css:[v.css`
|
|
245
245
|
padding: var(--spacing-base);
|
|
246
246
|
max-width: 180px;
|
|
247
247
|
overflow-wrap: break-word;
|
|
248
248
|
position: relative;
|
|
249
|
-
`,
|
|
249
|
+
`,Jt(n),jt(e),r?v.css`
|
|
250
250
|
border-left: 1px solid var(--gray-200);
|
|
251
|
-
`:void 0]},o);var y=require("@emotion/react"),
|
|
251
|
+
`:void 0]},o);var y=require("@emotion/react"),te=y.keyframes`from {
|
|
252
252
|
transform: scale(1);
|
|
253
253
|
}
|
|
254
254
|
to {
|
|
@@ -283,11 +283,11 @@ to {
|
|
|
283
283
|
position: absolute;
|
|
284
284
|
right: var(--spacing-base);
|
|
285
285
|
bottom: var(--spacing-base);
|
|
286
|
-
animation: 0.5s 2 alternate ${
|
|
286
|
+
animation: 0.5s 2 alternate ${te};
|
|
287
287
|
`,error:y.css`
|
|
288
288
|
color: var(--brand-secondary-5);
|
|
289
289
|
font-size: var(--font-sm);
|
|
290
|
-
`};var Lt=({dimensionIndex:{index:e},state:{scores:r,data:n},actions:o})=>{let a=$.useMemo(()=>Object.keys(e).filter(c=>!r[c]).map(c=>{var l;return(l=e[c])!=null?l:{name:c,dim:c,type:"Unknown"}}),[r,e]),i=Object.keys(r).length,m=i+a.length,
|
|
290
|
+
`};var Lt=({dimensionIndex:{index:e},state:{scores:r,data:n},actions:o})=>{let a=$.useMemo(()=>Object.keys(e).filter(c=>!r[c]).map(c=>{var l;return(l=e[c])!=null?l:{name:c,dim:c,type:"Unknown"}}),[r,e]),i=Object.keys(r).length,m=i+a.length,f=()=>{o.rawUpdate([{type:"setcontrol",data:!n.controlGroup}])};return(0,t.jsx)($.Fragment,null,(0,t.jsx)("article",{css:u.page},(0,t.jsx)("div",{css:u.headingGroup},(0,t.jsx)("h2",{css:u.title},"Dimensions",(0,t.jsx)("small",null,i," active of ",m)),(0,t.jsx)(wt,{label:"Control Group",onChange:f,checked:n.controlGroup})),i>0?(0,t.jsx)(I,null,(0,t.jsx)(E,null,Object.entries(r).map(([c,l],p)=>{var L;let{name:b,type:h,category:g}=(L=e==null?void 0:e[c])!=null?L:{name:c,dim:c,type:"Unknown"};return(0,t.jsx)(z,{key:p},(0,t.jsx)(w,null,(0,t.jsx)("b",null,l)),(0,t.jsx)(w,null,(0,t.jsx)("span",{css:u.divider,role:"presentation"}),(0,t.jsx)("strong",null,g?`${g}:`:""," ",b)),(0,t.jsx)(w,{alignment:"right",color:"light"},h))}))):(0,t.jsx)(K,{title:n.controlGroup?"In control group":"No active dimensions",text:n.controlGroup?"You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run.":"You do not have score in any dimensions yet.",buttonGroup:n.controlGroup?(0,t.jsx)(H,{buttonType:"secondary",onClick:f},"Exit control group"):null}),(0,t.jsx)(Z,null,(0,t.jsx)(U,{title:"Inactive Dimensions"},(0,t.jsx)(I,null,(0,t.jsx)(E,null,a.map(({dim:c,type:l,name:p,category:b})=>(0,t.jsx)(z,{key:c},(0,t.jsx)(w,null,(0,t.jsx)("strong",null,b?`${b}:`:""," ",p)),(0,t.jsx)(w,{alignment:"right",color:"light"},l)))))))))};var Tt=({...e})=>{let{state:{data:r}}=e;return(0,t.jsx)(d.Fragment,null,(0,t.jsx)("article",{css:u.page},(0,t.jsx)("h1",{css:u.title},"Quirks"),(0,t.jsx)("p",{css:u.text},"Keys defined in Uniform and their current, programmatically defined values for this visit."),Object.keys(r.quirks).length?(0,t.jsx)(I,null,(0,t.jsx)(Ct,null,(0,t.jsx)(z,null,(0,t.jsx)(ot,null,"Key"),(0,t.jsx)(ot,null,"Value"))),(0,t.jsx)(E,null,Object.entries(r.quirks).map(([n,o],a)=>(0,t.jsx)(z,{key:a,border:"bottom"},(0,t.jsx)(w,null,(0,t.jsx)("strong",null,n)),(0,t.jsx)(w,null,o))))):(0,t.jsx)(K,{title:"No quirks configured",text:"There are currently no quirks setup."})))};var C=require("formik");var Dt=require("formik");var x=require("@emotion/react"),kt=x.css`
|
|
291
291
|
background: var(--white);
|
|
292
292
|
border: 1px solid var(--gray-500);
|
|
293
293
|
border-radius: var(--rounded-base);
|
|
@@ -327,13 +327,13 @@ to {
|
|
|
327
327
|
`,Y=x.css`
|
|
328
328
|
color: var(--brand-secondary-5);
|
|
329
329
|
display: block;
|
|
330
|
-
`;var J=({field:e,form:r,meta:n,...o})=>{let{label:a,caption:i,...m}=o;return(0,t.jsx)("div",{css:q},(0,t.jsx)("label",{css:W},(0,t.jsx)("span",{css:Q},a),(0,t.jsx)("input",{type:"text",css:kt,...e,...m})),i?(0,t.jsx)("span",{css:X},i):null,(0,t.jsx)(Dt.ErrorMessage,{component:"div",css:Y,name:e.name}))};var Rt=require("formik");var St=({field:e,form:r,meta:n,...o})=>{let{label:a,options:i,caption:m,...
|
|
330
|
+
`;var J=({field:e,form:r,meta:n,...o})=>{let{label:a,caption:i,...m}=o;return(0,t.jsx)("div",{css:q},(0,t.jsx)("label",{css:W},(0,t.jsx)("span",{css:Q},a),(0,t.jsx)("input",{type:"text",css:kt,...e,...m})),i?(0,t.jsx)("span",{css:X},i):null,(0,t.jsx)(Dt.ErrorMessage,{component:"div",css:Y,name:e.name}))};var Rt=require("formik");var St=({field:e,form:r,meta:n,...o})=>{let{label:a,options:i,caption:m,...f}=o;return(0,t.jsx)("div",{css:q},(0,t.jsx)("label",{css:W},(0,t.jsx)("span",{css:Q},a),(0,t.jsx)("select",{...e,...f,css:xt},i.map((c,l)=>(0,t.jsx)("option",{value:c.value,key:l},c.text)))),m?(0,t.jsx)("span",{css:X},m):null,(0,t.jsx)(Rt.ErrorMessage,{component:"div",css:Y,name:e.name}))};var P=T(require("yup"));var Ht=require("@emotion/react"),rt=({children:e,...r})=>(0,t.jsx)("fieldset",{css:Ht.css`
|
|
331
331
|
border: none;
|
|
332
332
|
padding: 0;
|
|
333
|
-
`,...r},e);var Vt=require("@emotion/react"),
|
|
333
|
+
`,...r},e);var Vt=require("@emotion/react"),nt=({children:e})=>(0,t.jsx)("legend",{css:Vt.css`
|
|
334
334
|
font-size: var(--font-base);
|
|
335
335
|
font-weight: var(--font-bold);
|
|
336
|
-
`},e);var
|
|
336
|
+
`},e);var ee=P.object({apiKey:P.string().matches(/^uf.+$/,"API keys start with `uf`, double check your API key"),apiHost:P.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/,"API host must be a Uniform domain."),logLevel:P.string(),projectId:P.string().uuid()}),Pt=({settings:e,saveSettings:r,dimensionIndex:{error:n,loading:o}})=>{let a=[{value:"none",text:"Logging off"},{value:"info",text:"Log info, warnings, and errors"},{value:"warn",text:"Log warnings and errors"},{value:"error",text:"Log errors"},{value:"debug",text:"Verbose debug logging"}];return(0,t.jsx)(C.Formik,{initialValues:{apiHost:"",apiKey:"",projectId:"",logLevel:"none",...e},validationSchema:ee,enableReinitialize:!0,onSubmit:i=>{r({...e,apiHost:i.apiHost,apiKey:i.apiKey,projectId:i.projectId,logLevel:i.logLevel})}},({dirty:i,isValid:m,isSubmitting:f})=>(0,t.jsx)(C.Form,{css:u.page},(0,t.jsx)("h1",{css:u.title},"Settings"),(0,t.jsx)(C.Field,{component:St,label:"Logging",caption:"Logs can be viewed in the browser console",id:"logging",name:"logLevel",options:a,disabled:f}),(0,t.jsx)(rt,{disabled:f},(0,t.jsx)(nt,null,"Data Connection"),!o&&n?(0,t.jsx)("p",{css:u.error},"Unable to fetch data from Uniform",(0,t.jsx)("br",null),(0,t.jsx)("em",null,n.message)):null,(0,t.jsx)("p",{css:u.text},(0,t.jsx)("small",null,"Adding an API key and project ID enables richer dimension data to be shown. You must have access to the Uniform project to do this.")),(0,t.jsx)(C.Field,{component:J,label:"Uniform API key",caption:"Generate an API key in your Uniform team settings. Grant only Context: Read Drafts permission.",id:"api-key",name:"apiKey",autoComplete:"off"}),(0,t.jsx)(C.Field,{component:J,label:"Uniform Project ID",caption:"Available after generating an API key ",id:"project-id",name:"projectId",autoComplete:"off"}),(0,t.jsx)(Z,null,(0,t.jsx)(U,{title:"Advanced"},(0,t.jsx)(C.Field,{component:J,label:"Alternative API Host",caption:"Use a non-standard Uniform API endpoint. Most people will not not need this option.",id:"api-host",name:"apiHost",autoComplete:"off"}))),i?(0,t.jsx)(H,{type:"submit",css:u.submitButton,disabled:!m},"Save"):null)))};var at=({settings:e,saveSettings:r})=>{let n=()=>{r({...e,route:"/settings"})},o=()=>{r({...e,ignoreApiKeyPrompt:!0})},a=!(e==null?void 0:e.apiKey);return!e.ignoreApiKeyPrompt&&a?(0,t.jsx)("div",{css:[N,gt]},(0,t.jsx)("h2",{css:O},"Connect this site"),(0,t.jsx)("p",{css:_},"Add a Uniform API key to get better data."),(0,t.jsx)("div",{css:G},(0,t.jsx)(H,{buttonType:"secondary",onClick:n},"Connect this site"),(0,t.jsx)(H,{buttonType:"ghost",onClick:o},"Skip for now")),(0,t.jsx)("button",{type:"button",css:ft,title:"close",onClick:o},(0,t.jsx)("span",{hidden:!0},"Close"))):null};var A=require("@uniformdev/context/api"),At=require("react-use"),Mt=T(require("react"));function zt({apiHost:e,apiKey:r,projectId:n},o){let a=Mt.useMemo(()=>{var l,p,b,h;let c={};return o&&(Object.keys((p=(l=o==null?void 0:o.project.pz)==null?void 0:l.sig)!=null?p:{}).forEach(g=>{let L=(0,A.computeDimensionDisplayData)(g,o);L&&(c[g]=L)}),Object.keys((h=(b=o==null?void 0:o.project.pz)==null?void 0:b.agg)!=null?h:{}).forEach(g=>{let L=(0,A.computeDimensionDisplayData)(g,o);L&&(c[g]=L)})),c},[o]),{loading:i,error:m,value:f}=(0,At.useAsync)(async()=>{if(!r||!n)return a;let l=(await new A.DimensionClient({projectId:n,apiKey:r,apiHost:e||void 0}).get()).dimensions,p={...a};return l.forEach(b=>{p[b.dim]=(0,A.computeDimensionDefinitionDisplayData)(b)}),p},[e,r,n,a]);return{loading:i,error:m,index:f!=null?f:a}}var tt=require("@emotion/react");function j(){return(0,t.jsx)("style",null,`
|
|
337
337
|
:root {
|
|
338
338
|
--brand-primary-1: #438fd5; /* bright blue */
|
|
339
339
|
--brand-primary-2: #f4220b; /* red */
|
|
@@ -694,7 +694,7 @@ Add the correct display in Chrome and Safari.
|
|
|
694
694
|
|
|
695
695
|
summary {
|
|
696
696
|
display: list-item;
|
|
697
|
-
}`)}var
|
|
697
|
+
}`)}var oe=tt.css`
|
|
698
698
|
background: var(--white);
|
|
699
699
|
padding: var(--spacing-base);
|
|
700
700
|
overflow-y: auto;
|
|
@@ -723,16 +723,23 @@ summary {
|
|
|
723
723
|
&::-webkit-scrollbar-thumb:hover {
|
|
724
724
|
background: var(--gray-500);
|
|
725
725
|
}
|
|
726
|
-
`;function it(e){let r=zt(e.settings,e.state.manifest),
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
726
|
+
`;function it(e){let r=typeof chrome!="undefined"&&typeof chrome.storage!="undefined",n=zt(e.settings,e.state.manifest),o={...e,dimensionIndex:n},a=()=>{var i;switch((i=e.settings)==null?void 0:i.route){case void 0:case"/":case"/dimensions":return(0,t.jsx)(Lt,{...o});case"/quirks":return(0,t.jsx)(Tt,{...o});case"/settings":return(0,t.jsx)(Pt,{...o});default:return(0,t.jsx)(dt,null)}};return(0,t.jsx)(d.Fragment,null,(0,t.jsx)(j,null),(0,t.jsx)("div",{css:[tt.css`
|
|
727
|
+
display: grid;
|
|
728
|
+
grid-template-columns: 200px auto;
|
|
729
|
+
font-weight: var(--font-regular);
|
|
730
|
+
font-size: var(--base-font-size);
|
|
731
|
+
font-family: var(--base-font-family);
|
|
732
|
+
line-height: var(--base-line-height);
|
|
733
|
+
height: var(--min-height);
|
|
734
|
+
min-width: var(--site-width);
|
|
735
|
+
`,r?void 0:tt.css`
|
|
736
|
+
box-shadow: var(--shadow-base);
|
|
737
|
+
position: fixed;
|
|
738
|
+
bottom: 82px;
|
|
739
|
+
right: var(--spacing-base);
|
|
740
|
+
z-index: var(--z-10);
|
|
741
|
+
max-width: var(--site-width);
|
|
742
|
+
`]},(0,t.jsx)(pt,{...e}),(0,t.jsx)("main",{css:oe},(0,t.jsx)(at,{...e}),a())))}var et=require("@uniformdev/context"),D=T(require("react"));function st({context:e,initialSettings:r}){let n=e!=null?e:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,o=n!=null?n:new et.Context({manifest:{project:{}}}),[a,i]=D.useState({data:o.storage.data,manifest:o.manifest.data,scores:o.scores,personalizations:[],tests:[]}),[m,f]=D.useState(r!=null?r:{});D.useEffect(()=>{var p;let l=(0,et.createDebugConsoleLogDrain)((p=m.logLevel)!=null?p:"none");return o.events.on("log",l),()=>{o.events.off("log",l)}},[m,o]),D.useEffect(()=>{let l=()=>{i(h=>({...h,scores:o.scores,data:o.storage.data,manifest:o.manifest.data}))},p=h=>{!h.changed||i(g=>({...g,personalizations:[...g.personalizations,h]}))},b=h=>{!h.variantAssigned||i(g=>({...g,tests:[...g.tests,h]}))};return o.events.on("personalizationResult",p),o.events.on("testResult",b),o.storage.events.on("*",l),()=>{o.storage.events.off("*",l),o.events.off("personalizationResult",p),o.events.off("testResult",b)}},[o,m]);let c=D.useMemo(()=>({update:p=>o.update(p),forget:()=>o.forget(!1),rawUpdate:p=>o.storage.updateData(p)}),[o]);return n?(0,t.jsx)(it,{state:a,actions:c,settings:m,saveSettings:f}):(0,t.jsx)("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}var Bt=T(require("react"));var It=require("@emotion/react"),re=It.css`
|
|
736
743
|
align-items: center;
|
|
737
744
|
border-radius: var(--rounded-full);
|
|
738
745
|
background: var(--brand-secondary-5);
|
|
@@ -758,11 +765,4 @@ summary {
|
|
|
758
765
|
max-width: 100%;
|
|
759
766
|
height: auto;
|
|
760
767
|
}
|
|
761
|
-
`,Et=({...e})=>(0,t.jsx)("button",{type:"button",css:
|
|
762
|
-
box-shadow: var(--shadow-base);
|
|
763
|
-
position: fixed;
|
|
764
|
-
bottom: 82px;
|
|
765
|
-
right: var(--spacing-base);
|
|
766
|
-
z-index: var(--z-10);
|
|
767
|
-
max-width: var(--site-width);
|
|
768
|
-
`},(0,t.jsx)(st,{...e})):null):(0,t.jsx)("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}module.exports=Kt(ie);0&&(module.exports={ContextDevTools,EmbeddedContextDevTools,ToggleEmbeddedContextDevTools});
|
|
768
|
+
`,Et=({...e})=>(0,t.jsx)("button",{type:"button",css:re,...e},(0,t.jsx)("span",{hidden:!0},"Uniform devtools"),(0,t.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},(0,t.jsx)("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),(0,t.jsx)("path",{d:"M7.61197 18.3608L8.97136 16.9124L8.97086 16.8933L3.87657 12.1121L8.66699 7.00798L7.20868 5.63928L1.04956 12.2017L7.61197 18.3608Z",fill:"currentColor"}),(0,t.jsx)("path",{d:"M16.388 18.3608L15.0286 16.9124L15.0291 16.8933L20.1234 12.1121L15.333 7.00798L16.7913 5.63928L22.9504 12.2017L16.388 18.3608Z",fill:"currentColor"})));function ne(e){var a;let[r,n]=Bt.useState(!1);return((a=e.context)!=null?a:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0)?(0,t.jsx)("div",null,(0,t.jsx)(j,null),(0,t.jsx)(Et,{onClick:()=>n(i=>!i)}),r?(0,t.jsx)(st,{...e}):null):(0,t.jsx)("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}module.exports=Gt(ae);0&&(module.exports={ContextDevTools,EmbeddedContextDevTools,ToggleEmbeddedContextDevTools});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/context-devtools",
|
|
3
|
-
"version": "14.2.1-alpha.
|
|
3
|
+
"version": "14.2.1-alpha.34+baf2e926f",
|
|
4
4
|
"description": "Uniform Context developer tools components",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -17,14 +17,14 @@
|
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@types/chrome": "0.0.179",
|
|
20
|
-
"@types/react": "17.0.
|
|
21
|
-
"autoprefixer": "10.4.
|
|
22
|
-
"postcss": "8.4.
|
|
23
|
-
"tsup": "5.12.
|
|
20
|
+
"@types/react": "17.0.39",
|
|
21
|
+
"autoprefixer": "10.4.2",
|
|
22
|
+
"postcss": "8.4.6",
|
|
23
|
+
"tsup": "5.12.0"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@emotion/react": "^11.8.1",
|
|
27
|
-
"@uniformdev/context": "^14.2.1-alpha.
|
|
27
|
+
"@uniformdev/context": "^14.2.1-alpha.34+baf2e926f",
|
|
28
28
|
"formik": "2.2.9",
|
|
29
29
|
"react": "^17.0.2",
|
|
30
30
|
"react-dom": "^17.0.2",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"files": [
|
|
35
35
|
"/dist"
|
|
36
36
|
],
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "baf2e926f0015c9dd4b67ac99dcc8ee1f553d735"
|
|
38
38
|
}
|