@uniformdev/context-devtools 14.2.1-alpha.177 → 14.2.1-alpha.256
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 +249 -91
- package/dist/index.d.ts +32 -5
- package/dist/index.js +246 -88
- package/package.json +6 -6
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as e}from"@emotion/react";import*as y from"react";import{css as R}from"@emotion/react";import{createContext as it,useContext as at}from"react";var Ce=it({settings:{},saveSettings:()=>null}),we=()=>at(Ce),xe=({children:t,settings:n,saveSettings:r})=>e(Ce.Provider,{value:{settings:n,saveSettings:r}},t);var st=({route:t,children:n,className:r})=>{let{settings:o,saveSettings:i}=we();return e("a",{href:"",className:r,onClick:a=>{a.preventDefault(),i({...o,route:t})}},n)},P=st;var ct=[{title:"Dimensions",href:"/dimensions",icon:`<svg
|
|
2
2
|
width="24"
|
|
3
3
|
height="24"
|
|
4
4
|
viewBox="0 0 24 24"
|
|
@@ -15,6 +15,9 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
15
15
|
fill="currentColor"
|
|
16
16
|
/>
|
|
17
17
|
</svg>
|
|
18
|
+
`},{title:"What if?",href:"/overrides",icon:`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
19
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5123 7.91666L14.5804 8.4343L13.9179 5.96175L11.3371 10.0021L11.3575 10.0143C11.1348 10.3854 10.8997 10.7125 10.6556 11.0003H18.7603L16.9135 9.15347L18.3277 7.73926L22.5703 11.9819L18.3276 16.2245L16.9134 14.8103L18.7235 13.0003H6.65606C6.89995 13.2879 7.13495 13.6148 7.35749 13.9857L7.33713 13.9979L9.9179 18.0382L10.5804 15.5657L12.5123 16.0833L10.9594 21.8789L5.16384 20.326L5.68147 18.3941L8.20425 19.0701C8.20425 19.0701 6.17064 16.0325 5.21659 14.398C4.70173 13.7544 4.17055 13.4257 3.70352 13.2461C3.10532 13.016 2.54358 13.0011 2.06154 13.0003H2V13.0002V11.0003V11.0002L2.02253 11.0002C2.05059 11.0002 2.07985 11.0002 2.11025 11.0003H6V10.9998C6.49549 10.9998 7.07968 10.9939 7.70352 10.7539C8.17055 10.5743 8.70173 10.2456 9.21659 9.60198C10.1706 7.96745 12.2043 4.92988 12.2043 4.92988L9.68147 5.60586L9.16384 3.67401L14.9594 2.12109L16.5123 7.91666Z" fill="white"/>
|
|
20
|
+
</svg>
|
|
18
21
|
`},{title:"Quirks",href:"/quirks",icon:`<svg
|
|
19
22
|
width="24"
|
|
20
23
|
height="24"
|
|
@@ -33,21 +36,21 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
33
36
|
</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
37
|
<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
38
|
</svg>
|
|
36
|
-
`}],
|
|
39
|
+
`}],ke=({...t})=>{let n=r=>{var i;let o="active";return!((i=t.settings)!=null&&i.route)&&r==="/dimensions"||t.settings.route===r?o:""};return e("nav",{css:R`
|
|
37
40
|
background: var(--brand-secondary-1);
|
|
38
41
|
padding: var(--spacing-base);
|
|
39
42
|
min-width: 200px;
|
|
40
|
-
`},
|
|
43
|
+
`},e(P,{css:R`
|
|
41
44
|
display: inline-block;
|
|
42
45
|
margin: 0 var(--spacing-base);
|
|
43
|
-
`,
|
|
46
|
+
`,route:"/settings"},e("svg",{css:{display:"block"},width:"120",height:"38",viewBox:"0 0 120 38",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{clipPath:"url(#clip0_41_612)"},e("path",{d:"M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",fill:"#83C6E1"}),e("path",{d:"M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",fill:"#438FD5"}),e("path",{d:"M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",fill:"#F4220B"}),e("path",{d:"M64.6069 13.9025H67.8036V25.5528H64.6069V13.9025ZM64.4902 8.5415H67.9181V11.7348H64.4902V8.5415ZM72.5153 10.1025V13.9025H70.3691V16.6272H72.5153V25.5528H75.7119V16.6272H78.2774V13.9025H75.7119V11.2684H78.2774V8.5415H75.2213L72.5153 10.1025ZM83.1059 13.7859L80.3999 15.3469V24.1084L83.1059 25.6694H88.0748L90.7808 24.1084V15.3469L88.0748 13.7859H83.1059ZM87.5842 22.9425H83.5943V16.5106H87.5842V22.9425ZM97.4723 14.8611L95.8103 13.9025H94.2779V25.5528H97.4745V16.6272H101.486V13.9025H99.1344L97.4723 14.8611ZM55.713 13.7859L53.8499 14.8611L51.9847 13.7859H50.7289V25.5528H53.9256V16.5106H57.9133V25.5528H61.1099V15.3469L58.4039 13.7859H55.713ZM44.0353 22.9425H40.0454V13.9025H36.851V24.1084L39.557 25.6694H42.3753L44.0309 24.7129L44.0331 24.7151L44.0353 24.7129V24.7151L45.6887 25.6694H47.2297V13.9025H44.0353V22.9425ZM117.51 13.7859H115.271L113.079 15.0425L110.909 13.7859H108.67L107.015 14.7402L105.359 13.7859H103.818V25.5528H107.015V16.5106H110.421V25.5528H113.615V16.5106H117.022V25.5528H120.216V15.3469L117.51 13.7859Z",fill:"white"})),e("defs",null,e("clipPath",{id:"clip0_41_612"},e("rect",{width:"120",height:"38",fill:"white"}))))),e("ul",{css:R`
|
|
44
47
|
display: flex;
|
|
45
48
|
flex-flow: column nowrap;
|
|
46
49
|
padding: 0;
|
|
47
50
|
margin: 0;
|
|
48
51
|
list-style-type: none;
|
|
49
52
|
height: calc(100% - var(--spacing-base) * 2.5);
|
|
50
|
-
`},
|
|
53
|
+
`},ct.map((r,o)=>e("li",{css:R`
|
|
51
54
|
padding: 0;
|
|
52
55
|
margin: 0;
|
|
53
56
|
list-style-type: none;
|
|
@@ -55,7 +58,7 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
55
58
|
&:last-of-type {
|
|
56
59
|
margin-top: auto;
|
|
57
60
|
}
|
|
58
|
-
`,key:
|
|
61
|
+
`,key:o},e(P,{css:R`
|
|
59
62
|
align-items: center;
|
|
60
63
|
border-radius: var(--rounded-base);
|
|
61
64
|
display: flex;
|
|
@@ -69,14 +72,22 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
69
72
|
&.active {
|
|
70
73
|
background: var(--gray-700);
|
|
71
74
|
}
|
|
72
|
-
`,className:n(
|
|
75
|
+
`,className:n(r.href),route:r.href},e("i",{css:R`
|
|
73
76
|
align-items: center;
|
|
74
77
|
display: flex;
|
|
75
|
-
`,dangerouslySetInnerHTML:{__html:
|
|
78
|
+
`,dangerouslySetInnerHTML:{__html:r.icon}}),r.title,r.href==="/overrides"&&Object.keys(t.overrides.scores).length>0&&e("span",{css:R`
|
|
79
|
+
font-size: var(--font-xxs);
|
|
80
|
+
display: inline-block;
|
|
81
|
+
width: 12px;
|
|
82
|
+
height: 12px;
|
|
83
|
+
border-radius: 6px;
|
|
84
|
+
background-color: var(--red-tooltip);
|
|
85
|
+
text-align: center;
|
|
86
|
+
`},Object.keys(t.overrides.scores).length))))))};var Le=()=>e("article",null,e("h1",null,"Something when wrong"),e("p",null,"We could not find the page you're looking for."));import*as te from"react";import{css as A}from"@emotion/react";import*as W from"react";var Te=A({willChange:"height"}),dt=A`
|
|
76
87
|
border-bottom: 2px solid var(--brand-secondary-1);
|
|
77
88
|
font-size: var(--font-base);
|
|
78
89
|
margin: 0;
|
|
79
|
-
`,
|
|
90
|
+
`,lt=A`
|
|
80
91
|
align-items: center;
|
|
81
92
|
border: none;
|
|
82
93
|
background: none;
|
|
@@ -86,13 +97,13 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
86
97
|
padding: var(--spacing-sm) 0;
|
|
87
98
|
font-weight: var(--font-bold);
|
|
88
99
|
justify-content: space-between;
|
|
89
|
-
`,
|
|
100
|
+
`,pt=A`
|
|
90
101
|
align-self: center;
|
|
91
|
-
`,
|
|
102
|
+
`,mt=A`
|
|
92
103
|
transform: rotate(-180deg);
|
|
93
|
-
`,E=({children:
|
|
104
|
+
`,E=({children:t})=>e("div",{css:[Te]},t),O=({title:t,children:n})=>{let[r,o]=W.useState(!1),i=t.split(" ").join("-").toLocaleLowerCase();return e(W.Fragment,null,e("h3",{css:dt},e("button",{"aria-expanded":r,css:lt,title:t,id:i,"aria-controls":`${i}-section`,onClick:()=>o(a=>!a),type:"button"},t,e("i",{css:[pt,r?mt:void 0]},e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",fill:"currentColor"}))))),e("div",{id:`${i}-section`,css:[Te,A`
|
|
94
105
|
padding: var(--spacing-sm) 0;
|
|
95
|
-
`],role:"region","aria-labelledby":
|
|
106
|
+
`],role:"region","aria-labelledby":i},r?n:null))};import{css as M}from"@emotion/react";import*as De from"react";var ut=M`
|
|
96
107
|
align-items: center;
|
|
97
108
|
border: 1px solid transparent;
|
|
98
109
|
cursor: pointer;
|
|
@@ -103,29 +114,29 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
103
114
|
&:hover {
|
|
104
115
|
opacity: 0.8;
|
|
105
116
|
}
|
|
106
|
-
`;function
|
|
117
|
+
`;function gt(t){let n=M`
|
|
107
118
|
color: var(--white);
|
|
108
|
-
`,
|
|
119
|
+
`,r=M`
|
|
109
120
|
font-weight: var(--font-bold);
|
|
110
|
-
`;switch(
|
|
121
|
+
`;switch(t){case"primary":return M`
|
|
111
122
|
background: var(--brand-secondary-1);
|
|
112
|
-
${r}
|
|
113
123
|
${n}
|
|
114
|
-
`;case"secondary":return T`
|
|
115
|
-
background: var(--brand-secondary-5);
|
|
116
124
|
${r}
|
|
125
|
+
`;case"secondary":return M`
|
|
126
|
+
background: var(--brand-secondary-5);
|
|
117
127
|
${n}
|
|
118
|
-
|
|
128
|
+
${r}
|
|
129
|
+
`;case"unimportant":return M`
|
|
119
130
|
background: var(--brand-secondary-3);
|
|
120
131
|
color: var(--brand-secondary-1);
|
|
121
|
-
${
|
|
122
|
-
`;case"ghost":return
|
|
132
|
+
${r}
|
|
133
|
+
`;case"ghost":return M`
|
|
123
134
|
background: transparent;
|
|
124
135
|
color: var(--brand-secondary-5);
|
|
125
136
|
&:hover {
|
|
126
137
|
border: 1px solid var(--brand-secondary-5);
|
|
127
138
|
}
|
|
128
|
-
`}}var
|
|
139
|
+
`}}var w=({buttonType:t="primary",children:n,className:r,...o})=>e(De.Fragment,null,e("button",{type:"button",css:[ut,gt(t)],className:r,...o},n));import{css as z}from"@emotion/react";var q=z`
|
|
129
140
|
background-color: var(--gray-100);
|
|
130
141
|
padding: var(--spacing-base) var(--spacing-md);
|
|
131
142
|
margin: var(--spacing-base) 0;
|
|
@@ -133,21 +144,21 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
133
144
|
&:first-of-type {
|
|
134
145
|
margin: 0 0 var(--spacing-base);
|
|
135
146
|
}
|
|
136
|
-
`,
|
|
147
|
+
`,Se=z`
|
|
137
148
|
background: var(--gray-100)
|
|
138
149
|
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
150
|
no-repeat var(--spacing-sm) var(--spacing-base);
|
|
140
151
|
padding: var(--spacing-base) var(--spacing-xl);
|
|
141
|
-
`,
|
|
152
|
+
`,Y=z`
|
|
142
153
|
color: var(--brand-secondary-1);
|
|
143
154
|
margin: 0;
|
|
144
155
|
font-size: var(--font-base);
|
|
145
156
|
font-weight: var(--font-bold);
|
|
146
|
-
`,
|
|
157
|
+
`,X=z`
|
|
147
158
|
color: var(--brand-secondary-1);
|
|
148
159
|
margin: var(--spacing-xs) 0 0;
|
|
149
160
|
font-size: var(--font-sm);
|
|
150
|
-
`,
|
|
161
|
+
`,Ie=z`
|
|
151
162
|
align-items: center;
|
|
152
163
|
border: none;
|
|
153
164
|
background: transparent
|
|
@@ -167,21 +178,22 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
167
178
|
&:hover {
|
|
168
179
|
opacity: 0.6;
|
|
169
180
|
}
|
|
170
|
-
`,
|
|
181
|
+
`,J=z`
|
|
171
182
|
display: flex;
|
|
172
183
|
margin: var(--spacing-sm) 0 0;
|
|
173
184
|
gap: var(--spacing-base);
|
|
174
|
-
`;var
|
|
185
|
+
`;var B=({title:t,text:n,buttonGroup:r,children:o})=>e("div",{css:q},e("h2",{css:Y},t),e("p",{css:X},n),o,r?e("div",{css:J},r):null);import{css as _}from"@emotion/react";var de=_`
|
|
175
186
|
align-items: center;
|
|
176
187
|
cursor: pointer;
|
|
177
188
|
display: flex;
|
|
178
189
|
gap: var(--spacing-xs);
|
|
179
|
-
|
|
190
|
+
margin-top: var(--spacing-base);
|
|
191
|
+
`,le=_`
|
|
180
192
|
color: var(--gray-500);
|
|
181
193
|
font-size: var(--font-sm);
|
|
182
|
-
`,
|
|
194
|
+
`,Po=_`
|
|
183
195
|
background: var(--gray-600);
|
|
184
|
-
`,
|
|
196
|
+
`,pe=_`
|
|
185
197
|
display: block;
|
|
186
198
|
background: var(--gray-400);
|
|
187
199
|
border-radius: var(--rounded-full);
|
|
@@ -202,7 +214,7 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
202
214
|
transform: translateX(2px);
|
|
203
215
|
transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;
|
|
204
216
|
}
|
|
205
|
-
`,
|
|
217
|
+
`,me=_`
|
|
206
218
|
overflow: hidden;
|
|
207
219
|
clip: rect(0, 0, 0, 0);
|
|
208
220
|
height: 0;
|
|
@@ -216,49 +228,21 @@ import{jsx as t}from"@emotion/react";import*as m from"react";import{css as S}fro
|
|
|
216
228
|
&:checked ~ span {
|
|
217
229
|
background: var(--brand-secondary-5);
|
|
218
230
|
}
|
|
219
|
-
`;var
|
|
220
|
-
border-collapse: collapse;
|
|
221
|
-
display: table;
|
|
222
|
-
width: 100%;
|
|
223
|
-
font-size: var(--font-sm);
|
|
224
|
-
`},e),ut=({children:e})=>t("thead",{css:y`
|
|
225
|
-
background: var(--gray-50);
|
|
226
|
-
text-align: left;
|
|
227
|
-
& tr {
|
|
228
|
-
border-bottom: 1px solid var(--gray-200);
|
|
229
|
-
}
|
|
230
|
-
`},e),z=({children:e})=>t("tbody",null,e),P=({border:e,children:r})=>t("tr",{css:e?y`
|
|
231
|
-
border-bottom: 1px solid var(--gray-200);
|
|
232
|
-
&:where(:last-child) {
|
|
233
|
-
border: none;
|
|
234
|
-
}
|
|
235
|
-
`:void 0},r),J=({children:e})=>t("th",{css:y`
|
|
236
|
-
outline: none;
|
|
237
|
-
padding: var(--spacing-sm);
|
|
238
|
-
`},e);function It(e){switch(e){case"light":return y`
|
|
239
|
-
color: var(--gray-400);
|
|
240
|
-
`;case"dark":return y`
|
|
241
|
-
color: var(--brand-secondary-1);
|
|
242
|
-
`}}function Et(e){return y`
|
|
243
|
-
text-align: ${e};
|
|
244
|
-
`}var w=({alignment:e="left",border:r,color:n="dark",children:o})=>t("td",{css:[y`
|
|
245
|
-
padding: var(--spacing-base);
|
|
246
|
-
max-width: 180px;
|
|
247
|
-
overflow-wrap: break-word;
|
|
248
|
-
position: relative;
|
|
249
|
-
`,It(n),Et(e),r?y`
|
|
250
|
-
border-left: 1px solid var(--gray-200);
|
|
251
|
-
`:void 0]},o);import{css as x,keyframes as Bt}from"@emotion/react";var Ft=Bt`from {
|
|
231
|
+
`;var Pe=({label:t,...n})=>e("label",{css:de},e("span",{css:le},t),e("input",{type:"checkbox",css:me,...n}),e("span",{css:pe})),ue=({field:t,form:n,meta:r,...o})=>{let{label:i}=o;return e("label",{css:de},e("span",{css:le},i),e("input",{type:"checkbox",css:me,checked:t.value,...t}),e("span",{css:pe}))};import{css as k,keyframes as ft}from"@emotion/react";var bt=ft`from {
|
|
252
232
|
transform: scale(1);
|
|
253
233
|
}
|
|
254
234
|
to {
|
|
255
235
|
transform: scale(1.2);
|
|
256
236
|
}
|
|
257
|
-
`,
|
|
237
|
+
`,h={page:k`
|
|
258
238
|
color: var(--brand-secondary-1);
|
|
259
|
-
`,text:
|
|
239
|
+
`,text:k`
|
|
260
240
|
margin: var(--spacing-sm) 0;
|
|
261
|
-
`,
|
|
241
|
+
`,reset:k`
|
|
242
|
+
margin: 0 var(--spacing-md);
|
|
243
|
+
font-size: var(--font-sm);
|
|
244
|
+
color: var(--gray-500);
|
|
245
|
+
`,title:k`
|
|
262
246
|
margin: 0 0 var(--spacing-sm);
|
|
263
247
|
font-size: var(--font-md);
|
|
264
248
|
& > small {
|
|
@@ -267,11 +251,12 @@ to {
|
|
|
267
251
|
font-weight: var(--font-regular);
|
|
268
252
|
margin: var(--spacing-xxs) 0 0;
|
|
269
253
|
}
|
|
270
|
-
`,headingGroup:
|
|
254
|
+
`,headingGroup:k`
|
|
271
255
|
align-items: baseline;
|
|
272
256
|
display: flex;
|
|
273
257
|
justify-content: space-between;
|
|
274
|
-
|
|
258
|
+
align-items: center;
|
|
259
|
+
`,divider:k`
|
|
275
260
|
background: var(--gray-300);
|
|
276
261
|
display: block;
|
|
277
262
|
width: 1px;
|
|
@@ -279,15 +264,108 @@ to {
|
|
|
279
264
|
position: absolute;
|
|
280
265
|
inset: 0 auto 0 0;
|
|
281
266
|
margin: auto 0;
|
|
282
|
-
`,submitButton:
|
|
267
|
+
`,submitButton:k`
|
|
283
268
|
position: absolute;
|
|
284
269
|
right: var(--spacing-base);
|
|
285
270
|
bottom: var(--spacing-base);
|
|
286
|
-
animation: 0.5s 2 alternate ${
|
|
287
|
-
`,
|
|
271
|
+
animation: 0.5s 2 alternate ${bt};
|
|
272
|
+
`,cancelButton:k`
|
|
273
|
+
position: absolute;
|
|
274
|
+
left: calc(200px + var(--spacing-base));
|
|
275
|
+
bottom: var(--spacing-base);
|
|
276
|
+
background: white;
|
|
277
|
+
padding: var(--spacing-sm);
|
|
278
|
+
`,error:k`
|
|
288
279
|
color: var(--brand-secondary-5);
|
|
289
280
|
font-size: var(--font-sm);
|
|
290
|
-
`};
|
|
281
|
+
`};import{css as L}from"@emotion/react";var j=({children:t})=>e("table",{css:L`
|
|
282
|
+
border-collapse: collapse;
|
|
283
|
+
display: table;
|
|
284
|
+
width: 100%;
|
|
285
|
+
font-size: var(--font-sm);
|
|
286
|
+
`},t),Re=({children:t})=>e("thead",{css:L`
|
|
287
|
+
background: var(--gray-50);
|
|
288
|
+
text-align: left;
|
|
289
|
+
& tr {
|
|
290
|
+
border-bottom: 1px solid var(--gray-200);
|
|
291
|
+
}
|
|
292
|
+
`},t),ee=({children:t})=>e("tbody",null,t),G=({border:t,children:n})=>e("tr",{css:t?L`
|
|
293
|
+
border-bottom: 1px solid var(--gray-200);
|
|
294
|
+
&:where(:last-child) {
|
|
295
|
+
border: none;
|
|
296
|
+
}
|
|
297
|
+
`:void 0},n),ge=({children:t})=>e("th",{css:L`
|
|
298
|
+
outline: none;
|
|
299
|
+
padding: var(--spacing-sm);
|
|
300
|
+
`},t);function vt(t){switch(t){case"light":return L`
|
|
301
|
+
color: var(--gray-400);
|
|
302
|
+
`;case"dark":return L`
|
|
303
|
+
color: var(--brand-secondary-1);
|
|
304
|
+
`}}function ht(t){return L`
|
|
305
|
+
text-align: ${t};
|
|
306
|
+
`}var T=({alignment:t="left",border:n,color:r="dark",children:o})=>e("td",{css:[L`
|
|
307
|
+
padding: var(--spacing-base);
|
|
308
|
+
max-width: 180px;
|
|
309
|
+
overflow-wrap: break-word;
|
|
310
|
+
position: relative;
|
|
311
|
+
`,vt(r),ht(t),n?L`
|
|
312
|
+
border-left: 1px solid var(--gray-200);
|
|
313
|
+
`:void 0]},o);import{css as fe}from"@emotion/react";var Me=fe`
|
|
314
|
+
position: relative;
|
|
315
|
+
display: inline-block;
|
|
316
|
+
font-size: var(--font-base);
|
|
317
|
+
`,Ve=fe`
|
|
318
|
+
display: block;
|
|
319
|
+
`,He=fe`
|
|
320
|
+
position: absolute;
|
|
321
|
+
width: 6px;
|
|
322
|
+
height: 6px;
|
|
323
|
+
right: -10px;
|
|
324
|
+
top: 9px;
|
|
325
|
+
background: var(--red-tooltip);
|
|
326
|
+
border-radius: 3px;
|
|
327
|
+
`;import{css as yt}from"@emotion/react";var Ct=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
328
|
+
<path d="M4.2 7.2C4.53137 7.2 4.8 6.93137 4.8 6.6C4.8 6.26863 4.53137 6 4.2 6C3.86863 6 3.6 6.26863 3.6 6.6C3.6 6.93137 3.86863 7.2 4.2 7.2Z" fill="#828282"/>
|
|
329
|
+
<path d="M8.4 6.6C8.4 6.93137 8.13137 7.2 7.8 7.2C7.46863 7.2 7.2 6.93137 7.2 6.6C7.2 6.26863 7.46863 6 7.8 6C8.13137 6 8.4 6.26863 8.4 6.6Z" fill="#828282"/>
|
|
330
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 5.49824 10.723 5.01447 10.5802 4.55984C10.0795 4.69533 9.55274 4.76763 9.00913 4.76763C6.77526 4.76763 4.82652 3.54683 3.79366 1.73601C2.25282 2.53492 1.2 4.14451 1.2 6C1.2 8.65097 3.34903 10.8 6 10.8Z" fill="#828282"/>
|
|
331
|
+
</svg>`,wt=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
332
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59995 5.05775C4.9254 5.05775 5.99992 3.98325 5.99992 2.65778C5.99992 1.33232 4.9254 0.257812 3.59995 0.257812C2.27448 0.257812 1.19998 1.33232 1.19998 2.65778C1.19998 3.98325 2.27448 5.05775 3.59995 5.05775ZM3.59999 3.85777C4.26272 3.85777 4.79997 3.32052 4.79997 2.65778C4.79997 1.99505 4.26272 1.4578 3.59999 1.4578C2.93725 1.4578 2.4 1.99505 2.4 2.65778C2.4 3.32052 2.93725 3.85777 3.59999 3.85777Z" fill="#828282"/>
|
|
333
|
+
<path d="M5.39993 6.8577C5.73131 6.8577 5.99993 7.12632 5.99993 7.45769V11.0576H7.19991V7.45769C7.19991 6.46356 6.39406 5.65771 5.39993 5.65771H1.79998C0.80588 5.65771 0 6.46356 0 7.45769V11.0576H1.19999V7.45769C1.19999 7.12632 1.46861 6.8577 1.79998 6.8577H5.39993Z" fill="#828282"/>
|
|
334
|
+
<path d="M11.9999 5.05762H8.3999V6.2576H11.9999V5.05762Z" fill="#828282"/>
|
|
335
|
+
<path d="M8.3999 7.45752H11.9999V8.6575H8.3999V7.45752Z" fill="#828282"/>
|
|
336
|
+
<path d="M11.9999 2.65771H8.3999V3.8577H11.9999V2.65771Z" fill="#828282"/>
|
|
337
|
+
</svg>`,Ae=`<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
338
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.113 3.12646C8.16729 3.12646 9.02195 3.98113 9.02195 5.03541C9.02195 5.86658 8.49075 6.57368 7.74932 6.83573V10.1259H6.47669V6.83573C5.73526 6.57368 5.20405 5.86658 5.20405 5.03541C5.20405 3.98113 6.05872 3.12646 7.113 3.12646ZM7.113 4.39909C7.46443 4.39909 7.74932 4.68398 7.74932 5.03541C7.74932 5.38684 7.46443 5.67172 7.113 5.67172C6.76158 5.67172 6.47669 5.38684 6.47669 5.03541C6.47669 4.68398 6.76158 4.39909 7.113 4.39909Z" fill="#828282"/>
|
|
339
|
+
<path d="M3.96336 1.88578C3.15733 2.69183 2.65879 3.80537 2.65879 5.03535C2.65879 6.42093 3.29145 7.65875 4.28366 8.47569L5.1895 7.56984C4.42501 6.98876 3.93142 6.06969 3.93142 5.03535C3.93142 4.1568 4.28752 3.36142 4.86325 2.78567L3.96336 1.88578Z" fill="#828282"/>
|
|
340
|
+
<path d="M9.36269 2.7856C9.93846 3.36136 10.2946 4.15676 10.2946 5.03535C10.2946 6.06973 9.80096 6.98882 9.03643 7.5699L9.94228 8.47575C10.9345 7.65881 11.5672 6.42096 11.5672 5.03535C11.5672 3.80533 11.0687 2.69177 10.2626 1.88571L9.36269 2.7856Z" fill="#828282"/>
|
|
341
|
+
<path d="M0.113525 5.03534C0.113525 3.10251 0.896953 1.35266 2.16359 0.0860049L3.06347 0.985892C2.02714 2.02224 1.38616 3.45394 1.38616 5.03534C1.38616 6.61674 2.02714 8.04844 3.06347 9.08479L2.16358 9.98468C0.89695 8.71802 0.113525 6.96817 0.113525 5.03534Z" fill="#828282"/>
|
|
342
|
+
<path d="M12.0624 9.98474C13.329 8.71809 14.1125 6.96821 14.1125 5.03534C14.1125 3.10248 13.329 1.3526 12.0624 0.0859375L11.1625 0.985824C12.1988 2.02218 12.8398 3.4539 12.8398 5.03534C12.8398 6.61678 12.1988 8.0485 11.1625 9.08486L12.0624 9.98474Z" fill="#828282"/>
|
|
343
|
+
</svg>`,Ee=({type:t})=>{let n="";switch(t){case"Audience":n=Ct;break;case"Signal":n=Ae;break;case"Intent":n=Ae;break;case"Enrichment":n=wt;break}return e("i",{css:yt`
|
|
344
|
+
align-items: center;
|
|
345
|
+
display: inline-block;
|
|
346
|
+
`,dangerouslySetInnerHTML:{__html:n}})};var xt=({dimensionIndex:t,dimensions:n,overrides:r,disableEditOverride:o,onClick:i})=>e(j,null,e(ee,null,Object.entries(n).map(([a,u])=>{var m;let{dim:g,name:c,type:s,category:d}=(m=t[a])!=null?m:{name:a,dim:a,type:void 0,category:void 0};return e(G,{key:g},e(T,null,r.scores[g]!==void 0&&e("s",{css:Ve},u-r.scores[g]),e("b",{css:Me},u,r.scores[g]!==void 0&&e("i",{css:He}))),e(T,null,e("div",{onClick:()=>i==null?void 0:i(g),css:i?{cursor:"pointer"}:void 0},e("span",{css:h.divider,role:"presentation"}),e("div",null,e(Ee,{type:s})," ",s),e("strong",null,d?`${d}:`:""," ",c))),e(T,{alignment:"right",color:"light"},r.scores[g]!==void 0&&!o?e(P,{route:`/overrides/${g}`},"Edit override"):null))}))),V=xt;import{css as kt}from"@emotion/react";var Lt=kt`
|
|
347
|
+
background: none;
|
|
348
|
+
border: none;
|
|
349
|
+
color: var(--brand-secondary-3);
|
|
350
|
+
cursor: pointer;
|
|
351
|
+
padding: 0;
|
|
352
|
+
font-weight: var(--font-bold);
|
|
353
|
+
margin-left: auto;
|
|
354
|
+
font-size: var(--font-sm);
|
|
355
|
+
`,N=({children:t,...n})=>e("button",{type:"button",css:Lt,...n},t);var Oe=({dimensionIndex:{index:t},state:{scores:n,data:r},overrides:o,actions:i})=>{let a=te.useMemo(()=>{let s={};return Object.keys(t).filter(d=>!n[d]).map(d=>{s[t[d].dim]=0}),s},[n,t]),u=Object.keys(n).length,g=u+Object.keys(a).length,c=()=>{i.rawUpdate([{type:"setcontrol",data:!r.controlGroup}])};return e(te.Fragment,null,e("article",{css:h.page},e("div",{css:h.headingGroup},e("h2",{css:h.title},"Dimensions",e("small",null,u," active of ",g)),e("div",{css:h.reset},e(N,{onClick:()=>i.resetOverrides().then(i.forget)},"clear all dimensions")),e(Pe,{label:"Control Group",onChange:c,checked:r.controlGroup})),u>0?e(V,{dimensionIndex:t,dimensions:n,overrides:o}):e(B,{title:r.controlGroup?"In control group":"No active dimensions",text:r.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:r.controlGroup?e(w,{buttonType:"secondary",onClick:c},"Exit control group"):null}),e(E,null,e(O,{title:`Inactive Dimensions (${Object.keys(a).length})`},e(V,{dimensionIndex:t,dimensions:a,overrides:o})))))};import*as ze from"react";import{css as Tt}from"@emotion/react";function be({onClick:t}){return e("button",{css:Tt`
|
|
356
|
+
width: 3.5rem;
|
|
357
|
+
height: 3.5rem;
|
|
358
|
+
display: flex;
|
|
359
|
+
align-items: center;
|
|
360
|
+
border-radius: 9999px;
|
|
361
|
+
border: none;
|
|
362
|
+
cursor: pointer;
|
|
363
|
+
background-color: var(--red-button);
|
|
364
|
+
|
|
365
|
+
svg {
|
|
366
|
+
color: var(--red-button);
|
|
367
|
+
}
|
|
368
|
+
`,onClick:t,"aria-label":"Add new override",className:"text-secondary shadow-xl rounded-full flex items-center bg-secondary","data-test-id":"add-new-overrides-button"},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"66",height:"66",viewBox:"0 0 66 66"},e("g",{fill:"none",fillRule:"evenodd"},e("circle",{cx:"33",cy:"33",r:"33",fill:"currentColor"}),e("g",{fill:"#FFF",transform:"translate(19 19)"},e("rect",{width:"4",height:"28",x:"12",rx:"2"}),e("path",{d:"M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,26 C16,27.1045695 15.1045695,28 14,28 C12.8954305,28 12,27.1045695 12,26 L12,2 C12,0.8954305 12.8954305,2.02906125e-16 14,0 Z",transform:"rotate(90 14 14)"})))))}var Be=({dimensionIndex:{index:t},state:{data:n,scores:r},overrides:o,actions:i,settings:a,saveSettings:u})=>{let g=o.scores?Object.keys(o.scores).length:0,c=m=>(m.preventDefault(),u({...a,route:"/overrides/add"})),s=()=>{i.rawUpdate([{type:"setcontrol",data:!n.controlGroup}])},d={};return Object.entries(r).map(([m,b])=>{o.scores[m]!==void 0&&(d[m]=b)}),e(ze.Fragment,null,e("article",{css:h.page},e("div",{css:h.headingGroup},e("h2",{css:h.title},"What if?"),e("div",{css:h.reset},e(N,{onClick:i.resetOverrides},"delete all overrides")),e(be,{onClick:c})),e("p",null,"Override dimension scores to test personalization"),g>0?e(V,{dimensionIndex:t,dimensions:d,overrides:o,onClick:m=>u({...a,route:`/overrides/${m}`})}):e(B,{title:n.controlGroup?"In control group":"No overrides",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 any dimension overrides yet.",buttonGroup:n.controlGroup?e(w,{buttonType:"secondary",onClick:s},"Exit control group"):null})))};import{Field as At,Form as Et,Formik as Ot}from"formik";import*as Q from"yup";import{ErrorMessage as Dt}from"formik";import{css as D}from"@emotion/react";var oe=D`
|
|
291
369
|
background: var(--white);
|
|
292
370
|
border: 1px solid var(--gray-500);
|
|
293
371
|
border-radius: var(--rounded-base);
|
|
@@ -298,9 +376,11 @@ to {
|
|
|
298
376
|
cursor: not-allowed;
|
|
299
377
|
color: var(--gray-200);
|
|
300
378
|
}
|
|
301
|
-
`,
|
|
379
|
+
`,re=D`
|
|
302
380
|
appearance: none;
|
|
303
|
-
background: var(--white)
|
|
381
|
+
background: var(--white)
|
|
382
|
+
url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNi4zNDMxNyA3Ljc1NzMyTDQuOTI4OTYgOS4xNzE1NEwxMiAxNi4yNDI2TDE5LjA3MTEgOS4xNzE1N0wxNy42NTY5IDcuNzU3MzVMMTIgMTMuNDE0Mkw2LjM0MzE3IDcuNzU3MzJaIgogICAgZmlsbD0iIzgyODI4MiIKICAvPgo8L3N2Zz4=')
|
|
383
|
+
no-repeat 98% 50%;
|
|
304
384
|
border: 1px solid var(--gray-500);
|
|
305
385
|
border-radius: var(--rounded-base);
|
|
306
386
|
color: var(--brand-secondary-1);
|
|
@@ -309,31 +389,105 @@ to {
|
|
|
309
389
|
cursor: not-allowed;
|
|
310
390
|
color: var(--gray-200);
|
|
311
391
|
}
|
|
312
|
-
`,
|
|
392
|
+
`,ne=D`
|
|
393
|
+
padding: var(--spacing-sm);
|
|
394
|
+
max-width: 160px;
|
|
395
|
+
`,ie=D`
|
|
313
396
|
margin: var(--spacing-base) 0;
|
|
314
|
-
`,
|
|
397
|
+
`,F=D`
|
|
315
398
|
color: var(--brand-secondary-1);
|
|
316
399
|
display: flex;
|
|
317
400
|
flex-direction: column;
|
|
318
401
|
margin: 0 0 var(--spacing-sm);
|
|
319
|
-
|
|
402
|
+
`,Z=D`
|
|
320
403
|
color: var(--brand-secondary-1);
|
|
321
404
|
display: block;
|
|
405
|
+
flex: 1 100%;
|
|
322
406
|
font-weight: var(--font-bold);
|
|
323
407
|
margin: 0 0 var(--spacing-sm);
|
|
324
|
-
`,
|
|
408
|
+
`,U=D`
|
|
325
409
|
color: var(--gray-600);
|
|
326
410
|
font-size: var(--font-sm);
|
|
327
|
-
`,
|
|
411
|
+
`,ae=D`
|
|
328
412
|
color: var(--brand-secondary-5);
|
|
329
413
|
display: block;
|
|
330
|
-
|
|
414
|
+
`,Ne=D`
|
|
415
|
+
flex-direction: row;
|
|
416
|
+
flex-wrap: wrap;
|
|
417
|
+
|
|
418
|
+
input[type='range'] {
|
|
419
|
+
height: 28px;
|
|
420
|
+
-webkit-appearance: none;
|
|
421
|
+
margin: 10px 0;
|
|
422
|
+
width: 100%;
|
|
423
|
+
flex: 1 0 80%;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
input[type='range']:focus {
|
|
427
|
+
outline: none;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
input[type='range']::-webkit-slider-runnable-track {
|
|
431
|
+
width: 100%;
|
|
432
|
+
height: 6px;
|
|
433
|
+
cursor: pointer;
|
|
434
|
+
animate: 0.2s;
|
|
435
|
+
box-shadow: 0 0 0 #000000;
|
|
436
|
+
background: #2ecdb4;
|
|
437
|
+
border-radius: 0;
|
|
438
|
+
border: 0 solid #000000;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
input[type='range']::-moz-range-track {
|
|
442
|
+
width: 100%;
|
|
443
|
+
height: 6px;
|
|
444
|
+
cursor: pointer;
|
|
445
|
+
animate: 0.2s;
|
|
446
|
+
box-shadow: 0 0 0 #000000;
|
|
447
|
+
background: #2ecdb4;
|
|
448
|
+
border-radius: 0;
|
|
449
|
+
border: 0 solid #000000;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
input[type='range']::-webkit-slider-thumb {
|
|
453
|
+
box-shadow: 1px 1px 2px #000000;
|
|
454
|
+
border: 1px solid #000000;
|
|
455
|
+
height: 20px;
|
|
456
|
+
width: 20px;
|
|
457
|
+
border-radius: 20px;
|
|
458
|
+
background: #ffffff;
|
|
459
|
+
cursor: pointer;
|
|
460
|
+
-webkit-appearance: none;
|
|
461
|
+
margin-top: -7.5px;
|
|
462
|
+
}
|
|
463
|
+
input[type='range']::-moz-range-thumb {
|
|
464
|
+
box-shadow: 1px 1px 2px #000000;
|
|
465
|
+
border: 1px solid #000000;
|
|
466
|
+
height: 20px;
|
|
467
|
+
width: 20px;
|
|
468
|
+
border-radius: 20px;
|
|
469
|
+
background: #ffffff;
|
|
470
|
+
cursor: pointer;
|
|
471
|
+
-webkit-appearance: none;
|
|
472
|
+
margin-top: -7.5px;
|
|
473
|
+
}
|
|
474
|
+
input[type='range']:focus::-webkit-slider-runnable-track {
|
|
475
|
+
background: #2ecdb4;
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
.value-display {
|
|
479
|
+
flex: 1 0 20%;
|
|
480
|
+
padding: 10px;
|
|
481
|
+
}
|
|
482
|
+
`;var Fe=({field:t,form:n,meta:r,...o})=>{let{label:i,options:a,caption:u,...g}=o;return e("div",{css:ie},e("label",{css:F},e("span",{css:Z},i),e("select",{...t,...g,css:re},a.map((c,s)=>e("option",{value:c.value,key:s},c.text)))),u?e("span",{css:U},u):null,e(Dt,{component:"div",css:ae,name:t.name}))};import{Field as It}from"formik";var St=({field:t,form:n,meta:r,...o})=>{var s,d;let{label:i,caption:a,min:u=0,max:g=100,step:c}=o;return e("div",null,e("label",{css:[F,Ne]},e("span",{css:Z},i),e("input",{type:"range",min:u,max:g,step:c,...t,value:(s=t.value)!=null?s:0}),e("span",{className:"value-display"},(d=t.value)!=null?d:0)),e("p",{css:U},a))},Ze=St;var Pt=({name:t,label:n,dimensionToOverride:r,isSubmitting:o})=>{let i={max:100,step:20};return r&&(i.max=r.cap,i.step=r.str),e(It,{component:Ze,label:n,caption:`Range: 0 - ${i.max} in increments of ${i.step}`,id:t,name:t,disabled:o,...i})},Ue=Pt;import{css as Rt}from"@emotion/react";var H=({children:t,...n})=>e("fieldset",{css:Rt`
|
|
331
483
|
border: none;
|
|
332
484
|
padding: 0;
|
|
333
|
-
`,...
|
|
334
|
-
font-size: var(--font-
|
|
485
|
+
`,...n},t);import{css as Mt}from"@emotion/react";var $=({children:t})=>e("legend",{css:Mt`
|
|
486
|
+
font-size: var(--font-md);
|
|
335
487
|
font-weight: var(--font-bold);
|
|
336
|
-
|
|
488
|
+
border-bottom: 1px solid var(--gray-400);
|
|
489
|
+
width: 100%;
|
|
490
|
+
`},t);import{Context as Vt,TransitionDataStore as Ht}from"@uniformdev/context";function Qe({manifest:t,visitor:n,override:r}){let o=new Vt({manifest:t,transitionStore:new _e({initialData:n})}),i={...o.scores};o.storage.updateData([r]);let u={...{...o.scores}};return Object.entries(u).forEach(([g,c])=>{i[g]===c&&delete u[g]}),u}var _e=class extends Ht{async handleDelete(){}async handleUpdateData(){}};var zt=Q.object({dimension:Q.string(),score:Q.number()}),ve=({settings:t,saveSettings:n,state:r,actions:o,dimensionIndex:{index:i}})=>{var c,s;let a=t.route?[...t.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)]:[],u=a[0]?a[0][1]:"";if(!((c=r.manifest.project.pz)!=null&&c.sig))return e("p",null,"Error, manifest is broken or there is no signal to override.");let g=Object.entries(i).filter(([,d])=>d.type!=="Audience"&&d.type!=="Intent").map(([d,m])=>{let b=m.type?`${m.type}: `:"",f=m.category?`${m.category} - `:"",v=`${b}${f}${m.name}`;return{value:d,text:v}});return g.unshift({value:"_none",text:"Choose dimension to override"}),e(Ot,{initialValues:{dimension:u,score:(s=r.scores[u])!=null?s:0},validationSchema:zt,enableReinitialize:!0,onSubmit:d=>{var v,C,x;let m=(C=(v=i[d.dimension])==null?void 0:v.cap)!=null?C:0,f=Math.min(d.score,m)-((x=r.scores[d.dimension])!=null?x:0);o.override([{type:"modscore",data:{dimension:d.dimension,delta:f}}]),n({...t,route:"/overrides"})}},({dirty:d,isValid:m,isSubmitting:b,values:f})=>{var x;let v=Qe({manifest:r.manifest,visitor:r.data,override:{type:"modscore",data:{dimension:f.dimension,delta:f.score-((x=r.scores[f.dimension])!=null?x:0)}}}),C=f.score&&Object.keys(v).length>0;return e(Et,{css:h.page},e("h1",{css:h.title},"Override Dimension"),e(At,{component:Fe,label:"Dimension",id:"dimension",name:"dimension",options:g,disabled:b}),e("p",{css:h.text},e("small",null,"Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly.")),f.dimension?e(Ue,{name:"score",label:"Score",dimensionToOverride:i[f.dimension],isSubmitting:b}):null,e(H,{disabled:b},C?e(E,null,e(O,{title:`Impacted Dimensions (${Object.keys(v).length})`},e(V,{dimensionIndex:i,dimensions:v,overrides:{quirks:{},scores:{[f.dimension]:f.score}},disableEditOverride:!0}))):null,d?e(w,{type:"submit",css:h.submitButton,disabled:!m},"Save"):null,e(P,{route:"/overrides",css:h.cancelButton},"Cancel")))})};import{useState as Ut}from"react";import{useState as Bt,useEffect as Nt}from"react";var Ft=({name:t,value:n,submit:r})=>{let[o,i]=Bt(n!=null?n:"");return Nt(()=>{i(n!=null?n:"")},[n]),e("div",{css:{display:"flex",gap:"var(--spacing-sm)"}},e("input",{type:"text",css:[oe,ne],name:t,value:o,onChange:u=>{i(u.target.value)}}),e(w,{buttonType:"primary",onClick:()=>r(t,o!=null?o:"")},"Save"))},Ge=Ft;var Zt=({name:t,value:n,submit:r,options:o})=>e("select",{name:t,defaultValue:n,onChange:a=>r(a.target.name,a.target.value),css:[re,ne]},e("option",{key:"_none",value:"_none"},"None"),(o!=null?o:[]).map(a=>e("option",{key:a.value,value:a.value},a.name))),$e=Zt;var Ke=({...t})=>{let{actions:n,quirksIndex:{index:r}}=t,[o,i]=Ut(""),a;o&&(a=r[o]);let u=(g,c)=>{i(""),n.override([{type:"setquirk",data:{key:g,value:c}}])};return e(y.Fragment,null,e("article",{css:h.page},e("h1",{css:h.title},"Quirks"),e("p",{css:h.text},"Keys defined in Uniform and their current, programmatically defined values for this visit."),Object.keys(r).length?e(j,null,e(Re,null,e(G,null,e(ge,null,"Key"),e(ge,null,"Value"),e(T,null,""))),e(ee,null,Object.values(r).map(({name:g,value:c,id:s})=>e(G,{key:s,border:"bottom"},e(T,null,e("strong",null,g)),e(T,null,o!==s&&e("span",{onClick:()=>{i(s)}},c),o===s&&a&&e(y.Fragment,null,a.options?e($e,{name:s,value:c,submit:u,options:a.options}):e(Ge,{name:s,value:c,submit:u}))),e(T,null,o?null:e(N,{onClick:()=>{i(s)}},e("small",null,"Override"))))))):e(B,{title:"No quirks configured",text:"There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."})))};import{Field as K,Form as _t,Formik as Gt}from"formik";import{ErrorMessage as Qt}from"formik";var se=({field:t,form:n,meta:r,...o})=>{let{label:i,caption:a,...u}=o;return e("div",{css:ie},e("label",{css:F},e("span",{css:Z},i),e("input",{type:"text",css:oe,...t,...u})),a?e("span",{css:U},a):null,e(Qt,{component:"div",css:ae,name:t.name}))};import*as S from"yup";var $t=S.object({apiKey:S.string().matches(/^uf.+$/,"API keys start with `uf`, double check your API key"),apiHost:S.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/,"API host must be a Uniform domain."),logging:S.boolean(),projectId:S.string().uuid(),consentMode:S.boolean()}),We=({settings:t,saveSettings:n,actions:r,state:{data:o},dimensionIndex:{error:i,loading:a}})=>{var u,g,c;return e(Gt,{initialValues:{apiHost:(u=t.apiHost)!=null?u:"",apiKey:(g=t.apiKey)!=null?g:"",projectId:(c=t.projectId)!=null?c:"",consentMode:!!o.consent,logging:t.logLevel!=="none"&&Boolean(t.logLevel)},validationSchema:$t,enableReinitialize:!0,onSubmit:s=>{n({...t,apiHost:s.apiHost,apiKey:s.apiKey,projectId:s.projectId,logLevel:s.logging?"debug":"none",consentMode:s.consentMode}),r.rawUpdate([{type:"consent",data:s.consentMode}])}},({dirty:s,isValid:d,isSubmitting:m})=>e(_t,{css:h.page},e("h1",{css:h.title},"Settings"),e(H,{disabled:m},e($,null,"Data Connection"),!a&&i?e("p",{css:h.error},"Unable to fetch data from Uniform",e("br",null),e("em",null,i.message)):null,e("p",{css:h.text},e("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.")),e(K,{component:se,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"}),e(K,{component:se,label:"Uniform Project ID",caption:"Available to copy after generating an API key",id:"project-id",name:"projectId",autoComplete:"off"}),e(E,null,e(O,{title:"Advanced"},e(K,{component:se,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"}))),e(H,null,e($,null,"Storage Consent"),e(K,{component:ue,label:"Store visitor data",id:"consent-mode",name:"consentMode"}),e("p",null,e("small",null,"Turning on consents to storing behavior in this browser for personalization across sessions. Only affects this browser. Personalization works with this disabled, but dimension scores are lost on refresh."))),e(H,null,e($,null,"Logging"),e(K,{component:ue,label:"Write Uniform Context diagnostic logs to browser console",id:"logging",name:"logging"})),s?e(w,{type:"submit",css:h.submitButton,disabled:!d},"Save"):null)))};var he=({settings:t,saveSettings:n})=>{let r=()=>{n({...t,route:"/settings"})},o=()=>{n({...t,ignoreApiKeyPrompt:!0})},i=!(t!=null&&t.apiKey);return!t.ignoreApiKeyPrompt&&i?e("div",{css:[q,Se]},e("h2",{css:Y},"Connect this site"),e("p",{css:X},"Add a Uniform API key to get better data."),e("div",{css:J},e(w,{buttonType:"secondary",onClick:r},"Connect this site"),e(w,{buttonType:"ghost",onClick:o},"Skip for now")),e("button",{type:"button",css:Ie,title:"close",onClick:o},e("span",{hidden:!0},"Close"))):null};import{computeDimensionDefinitionDisplayData as Kt,computeDimensionDisplayData as qe,DimensionClient as Wt}from"@uniformdev/context/api";import{useAsync as qt}from"react-use";import*as Ye from"react";function Xe({apiHost:t,apiKey:n,projectId:r},o){let{loading:i,error:a,value:u}=qt(async()=>{if(!n||!r)return g;let s=(await new Wt({projectId:r,apiKey:n,apiHost:t||void 0}).get()).dimensions,d={};return s.map(m=>{var b,f,v,C;if(d[m.dim]={...Kt(m),cap:m.cap,str:10},d[m.dim].type==="Enrichment"){let x=m.dim.split("_")[0];d[m.dim].cap=(C=(v=(f=(b=o==null?void 0:o.project.pz)==null?void 0:b.enr)==null?void 0:f[x])==null?void 0:v.cap)!=null?C:100}}),d},[t,n,r]),g=Ye.useMemo(()=>{var s,d,m,b;let c={};return o&&(Object.entries((d=(s=o==null?void 0:o.project.pz)==null?void 0:s.sig)!=null?d:{}).map(([f,v])=>{let C=qe(f,o);C&&(c[f]={...v,...C})}),Object.entries((b=(m=o==null?void 0:o.project.pz)==null?void 0:m.enr)!=null?b:{}).map(([f,v])=>{var ye;let C=qe(f,o),x={cap:(ye=v.cap)!=null?ye:100,str:10};C&&(c[f]={...C,cap:x.cap,str:x.str})}),u&&Object.entries(u).map(([f,v])=>{c[f]={...c[f],...v}})),c},[o,u]);return{loading:i,error:a,index:g}}import{useMemo as Yt}from"react";import{QuirkClient as Xt}from"@uniformdev/context/api";import{useAsync as Jt}from"react-use";function Je({apiHost:t,apiKey:n,projectId:r},o){let{loading:i,error:a,value:u}=Jt(async()=>{if(!n||!r)return{};let s=await new Xt({projectId:r,apiKey:n,apiHost:t||void 0}).get(),d={};return s.quirks.map(m=>{d[m.id]={...m,value:o[m.id]}}),d},[t,n,r]),g=Yt(()=>{let c={};return Object.entries(o).map(([s,d])=>c[s]={value:d,id:s,name:s}),u&&Object.entries(u).map(([s,d])=>c[s]={...d,value:o[s]}),c},[o,u]);return{loading:i,error:a,index:g}}import{css as et}from"@emotion/react";function ce(){return e("style",null,`
|
|
337
491
|
:root {
|
|
338
492
|
--brand-primary-1: #438fd5; /* bright blue */
|
|
339
493
|
--brand-primary-2: #f4220b; /* red */
|
|
@@ -393,6 +547,10 @@ to {
|
|
|
393
547
|
--gray-800: #1f2937;
|
|
394
548
|
--gray-900: #111827;
|
|
395
549
|
|
|
550
|
+
/* Red CTA */
|
|
551
|
+
--red-button: rgb(217 83 79);
|
|
552
|
+
--red-tooltip: #D9534F;
|
|
553
|
+
|
|
396
554
|
/* z-indexs */
|
|
397
555
|
--z-10: 10;
|
|
398
556
|
}
|
|
@@ -694,7 +852,7 @@ Add the correct display in Chrome and Safari.
|
|
|
694
852
|
|
|
695
853
|
summary {
|
|
696
854
|
display: list-item;
|
|
697
|
-
}`)}var
|
|
855
|
+
}`)}import{useEffect as jt,useState as eo}from"react";import{useMountedState as to}from"react-use";var je=()=>{let[t,n]=eo(!1),r=to();return jt(()=>{setTimeout(()=>{r()&&n(!0)},1e3)},[r]),t?e("article",{css:h.page},e("h1",null,"Loading..."),e("p",null,"Connecting to Uniform API for complete data.")):null};var oo=et`
|
|
698
856
|
background: var(--white);
|
|
699
857
|
padding: var(--spacing-base);
|
|
700
858
|
overflow-y: auto;
|
|
@@ -723,7 +881,7 @@ summary {
|
|
|
723
881
|
&::-webkit-scrollbar-thumb:hover {
|
|
724
882
|
background: var(--gray-500);
|
|
725
883
|
}
|
|
726
|
-
`;function
|
|
884
|
+
`;function tt(t){let n=Xe(t.settings,t.state.manifest),r=Je(t.settings,t.state.data.quirks),o={...t,dimensionIndex:n,quirksIndex:r},i=()=>{var a;if(n.loading||r.loading)return e(je,null);if(t.settings.route&&t.settings.route.match(/overrides\/\w+/))return e(ve,{...o});switch((a=t.settings)==null?void 0:a.route){case void 0:case"/":case"/dimensions":return e(Oe,{...o});case"/overrides":return e(Be,{...o});case"/overrides/add":return e(ve,{...o});case"/quirks":return e(Ke,{...o});case"/settings":return e(We,{...o});default:return e(Le,null)}};return e(xe,{settings:t.settings,saveSettings:t.saveSettings},e(ce,null),e("div",{css:et`
|
|
727
885
|
display: grid;
|
|
728
886
|
grid-template-columns: 200px auto;
|
|
729
887
|
font-weight: var(--font-regular);
|
|
@@ -732,7 +890,7 @@ summary {
|
|
|
732
890
|
line-height: var(--base-line-height);
|
|
733
891
|
height: var(--min-height);
|
|
734
892
|
min-width: var(--site-width);
|
|
735
|
-
`},
|
|
893
|
+
`},e(ke,{...t}),e("main",{css:oo},e(he,{...t}),i())))}import{Context as ro,createDebugConsoleLogDrain as no}from"@uniformdev/context";import*as I from"react";function ot({context:t,initialSettings:n}){let r=t!=null?t:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,o=r!=null?r:new ro({manifest:{project:{}}}),[i,a]=I.useState({scores:{},quirks:{}}),[u,g]=I.useState({data:o.storage.data,manifest:o.manifest.data,scores:o.scores,personalizations:[],tests:[]}),[c,s]=I.useState(n!=null?n:{});I.useEffect(()=>{var b;let m=no((b=c.logLevel)!=null?b:"none");return o.events.on("log",m),()=>{o.events.off("log",m)}},[c,o]),I.useEffect(()=>{let m=()=>{g(v=>({...v,scores:o.scores,data:o.storage.data,manifest:o.manifest.data}))},b=v=>{!v.changed||g(C=>({...C,personalizations:[...C.personalizations,v]}))},f=v=>{!v.variantAssigned||g(C=>({...C,tests:[...C.tests,v]}))};return o.events.on("personalizationResult",b),o.events.on("testResult",f),o.storage.events.on("*",m),()=>{o.storage.events.off("*",m),o.events.off("personalizationResult",b),o.events.off("testResult",f)}},[o,c]);let d=I.useMemo(()=>({update:b=>o.update(b),forget:()=>o.forget(!1),rawUpdate:b=>o.storage.updateData(b),resetOverrides:()=>{let b=[];return Object.entries(i.scores).map(([f,v])=>{b.push({type:"modscore",data:{dimension:f,delta:-v}})}),a({...i,scores:{}}),o.storage.updateData(b)},override:b=>{let f={},v={};return b.map(C=>{C.type==="modscore"&&(f[C.data.dimension]=C.data.delta),C.type==="setquirk"&&(v[C.data.key]=C.data.value)}),a({scores:{...i.scores,...f},quirks:{...i.quirks,...v}}),o.storage.updateData(b)}}),[o,i]);return r?e(tt,{state:u,actions:d,overrides:i,settings:c,saveSettings:s}):e("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}import{css as so}from"@emotion/react";import*as nt from"react";import{css as io}from"@emotion/react";var ao=io`
|
|
736
894
|
align-items: center;
|
|
737
895
|
border-radius: var(--rounded-full);
|
|
738
896
|
background: var(--brand-secondary-5);
|
|
@@ -758,11 +916,11 @@ summary {
|
|
|
758
916
|
max-width: 100%;
|
|
759
917
|
height: auto;
|
|
760
918
|
}
|
|
761
|
-
`,
|
|
919
|
+
`,rt=({...t})=>e("button",{type:"button",css:ao,...t},e("span",{hidden:!0},"Uniform devtools"),e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),e("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"}),e("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 li(t){var i;let[n,r]=nt.useState(!1);return((i=t.context)!=null?i:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0)?e("div",null,e(ce,null),e(rt,{onClick:()=>r(a=>!a)}),n?e("div",{css:so`
|
|
762
920
|
box-shadow: var(--shadow-base);
|
|
763
921
|
position: fixed;
|
|
764
922
|
bottom: 82px;
|
|
765
923
|
right: var(--spacing-base);
|
|
766
924
|
z-index: var(--z-10);
|
|
767
925
|
max-width: var(--site-width);
|
|
768
|
-
`},
|
|
926
|
+
`},e(ot,{...t})):null):e("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}export{tt as ContextDevTools,ot as EmbeddedContextDevTools,li as ToggleEmbeddedContextDevTools};
|