@uniformdev/context-devtools 15.0.0 → 16.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +154 -1686
- package/dist/index.js +154 -1717
- package/package.json +13 -10
package/dist/esm/index.js
CHANGED
|
@@ -1,50 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import { jsx } from "@emotion/react";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
// src/components/Navigation/Menu.tsx
|
|
6
|
-
import { css } from "@emotion/react";
|
|
7
|
-
|
|
8
|
-
// src/lib/DevToolsSettingsContext.tsx
|
|
9
|
-
import { createContext, useContext } from "react";
|
|
10
|
-
var DevToolsSettingsContext = createContext({
|
|
11
|
-
settings: {},
|
|
12
|
-
saveSettings: () => null
|
|
13
|
-
});
|
|
14
|
-
var useDevToolsSettingsContext = () => useContext(DevToolsSettingsContext);
|
|
15
|
-
var DevToolsSettingsContextProvider = ({
|
|
16
|
-
children,
|
|
17
|
-
settings,
|
|
18
|
-
saveSettings
|
|
19
|
-
}) => {
|
|
20
|
-
return /* @__PURE__ */ jsx(DevToolsSettingsContext.Provider, {
|
|
21
|
-
value: {
|
|
22
|
-
settings,
|
|
23
|
-
saveSettings
|
|
24
|
-
}
|
|
25
|
-
}, children);
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
// src/components/Navigation/NavigationLink.tsx
|
|
29
|
-
var NavigationLink = ({ route, children, className }) => {
|
|
30
|
-
const { settings, saveSettings } = useDevToolsSettingsContext();
|
|
31
|
-
return /* @__PURE__ */ jsx("a", {
|
|
32
|
-
href: "",
|
|
33
|
-
className,
|
|
34
|
-
onClick: (e) => {
|
|
35
|
-
e.preventDefault();
|
|
36
|
-
saveSettings({ ...settings, route });
|
|
37
|
-
}
|
|
38
|
-
}, children);
|
|
39
|
-
};
|
|
40
|
-
var NavigationLink_default = NavigationLink;
|
|
41
|
-
|
|
42
|
-
// src/components/Navigation/Menu.tsx
|
|
43
|
-
var links = [
|
|
44
|
-
{
|
|
45
|
-
title: "Dimensions",
|
|
46
|
-
href: "/dimensions",
|
|
47
|
-
icon: `<svg
|
|
1
|
+
import{jsx as e}from"@emotion/react";import*as y from"react";import{css as x}from"@emotion/react";import{createContext as mt,useContext as ut}from"react";var he=mt({settings:{},saveSettings:()=>null}),_=()=>ut(he),be=({children:t,settings:r,saveSettings:n})=>e(he.Provider,{value:{settings:r,saveSettings:n}},t);var gt=({route:t,children:r,className:n})=>{let{settings:o,saveSettings:i}=_();return e("a",{href:"",className:n,onClick:a=>{a.preventDefault(),i({...o,route:t})}},r)},H=gt;var ft=[{title:"Dimensions",href:"/dimensions",icon:`<svg
|
|
48
2
|
width="24"
|
|
49
3
|
height="24"
|
|
50
4
|
viewBox="0 0 24 24"
|
|
@@ -61,20 +15,10 @@ var links = [
|
|
|
61
15
|
fill="currentColor"
|
|
62
16
|
/>
|
|
63
17
|
</svg>
|
|
64
|
-
`
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
title: "What if?",
|
|
68
|
-
href: "/overrides",
|
|
69
|
-
icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/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">
|
|
70
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"/>
|
|
71
20
|
</svg>
|
|
72
|
-
`
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
title: "Quirks",
|
|
76
|
-
href: "/quirks",
|
|
77
|
-
icon: `<svg
|
|
21
|
+
`},{title:"Quirks",href:"/quirks",icon:`<svg
|
|
78
22
|
width="24"
|
|
79
23
|
height="24"
|
|
80
24
|
viewBox="0 0 24 24"
|
|
@@ -89,85 +33,31 @@ var links = [
|
|
|
89
33
|
d="M12 8.5C10.067 8.5 8.5 10.067 8.5 12C8.5 13.933 10.067 15.5 12 15.5C13.933 15.5 15.5 13.933 15.5 12C15.5 10.067 13.933 8.5 12 8.5Z"
|
|
90
34
|
fill="currentColor"
|
|
91
35
|
/>
|
|
92
|
-
</svg>`
|
|
93
|
-
},
|
|
94
|
-
{
|
|
95
|
-
title: "Settings",
|
|
96
|
-
href: "/settings",
|
|
97
|
-
icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
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">
|
|
98
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"/>
|
|
99
38
|
</svg>
|
|
100
|
-
`
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
var _a;
|
|
106
|
-
const cssName = "active";
|
|
107
|
-
if (!((_a = props.settings) == null ? void 0 : _a.route) && href === "/dimensions") {
|
|
108
|
-
return cssName;
|
|
109
|
-
}
|
|
110
|
-
return props.settings.route === href ? cssName : "";
|
|
111
|
-
};
|
|
112
|
-
return /* @__PURE__ */ jsx("nav", {
|
|
113
|
-
css: css`
|
|
39
|
+
`}],vt=`<svg width="24" height="24" fill="white" viewBox="0 0 122.88 116.67" xmlns="http://www.w3.org/2000/svg">
|
|
40
|
+
<g>
|
|
41
|
+
<path d="M84.55,116.66c2.49,0,4.53-1.99,4.53-4.41V88.08c1.55-13.03,7.27-9.16,14-5.13 c16.27,9.74,27.08-15.88,13.93-23.78c-10.32-6.2-14.79,4.46-22.35,3.36c-2.92-0.43-4.95-3.5-5.59-8.17V36.9 c0-2.43-2.04-4.41-4.53-4.41H63.73c-17.18-2.12-1.93-11.37-1.93-19.98C61.81,5.6,55.38,0,47.45,0c-7.92,0-15.19,5.6-15.19,12.51 c0,8.12,15.78,17.86-1.64,19.98H4.53C2.04,32.49,0,34.47,0,36.9v17.42c1.33,7.43,6.49,9.15,13.1,4.25 c2.23-1.66,5.99-3.59,8.71-3.59c7.09,0,12.85,6.25,12.85,13.96S28.91,84.6,21.81,84.6c-2.53,0-4.89-0.8-6.89-2.19 c0,0.59-12.4-10.85-14.92,3.15v26.71c0,2.43,2.04,4.41,4.53,4.41c13.97,0,27.92,0,41.88-0.01c0.55-2.55-1.24-5.47-2.92-8 c-13.22-19.93,38.21-21.92,24.99,0.62c-0.65,1.11-1.3,2.19-1.8,3.24c-0.63,1.31-1.05,2.91-0.96,4.14L84.55,116.66L84.55,116.66z"></path>
|
|
42
|
+
</g>
|
|
43
|
+
</svg>`,ye=({...t})=>{var o,i;let r=a=>{var p;let l="active";return!((p=t.settings)!=null&&p.route)&&a==="/dimensions"||t.settings.route===a?l:""},n=Boolean(typeof window!="undefined"&&((i=(o=window.chrome)==null?void 0:o.runtime)==null?void 0:i.id));return e("nav",{css:x`
|
|
114
44
|
background: var(--brand-secondary-1);
|
|
115
45
|
padding: var(--spacing-base);
|
|
116
46
|
min-width: 200px;
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
`},e("a",{css:x`
|
|
50
|
+
flex-grow: 0;
|
|
120
51
|
display: inline-block;
|
|
121
52
|
margin: 0 var(--spacing-base);
|
|
122
|
-
`,
|
|
123
|
-
route: "/settings"
|
|
124
|
-
}, /* @__PURE__ */ jsx("svg", {
|
|
125
|
-
css: { display: "block" },
|
|
126
|
-
width: "120",
|
|
127
|
-
height: "38",
|
|
128
|
-
viewBox: "0 0 120 38",
|
|
129
|
-
fill: "none",
|
|
130
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
131
|
-
}, /* @__PURE__ */ jsx("g", {
|
|
132
|
-
clipPath: "url(#clip0_41_612)"
|
|
133
|
-
}, /* @__PURE__ */ jsx("path", {
|
|
134
|
-
d: "M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",
|
|
135
|
-
fill: "#83C6E1"
|
|
136
|
-
}), /* @__PURE__ */ jsx("path", {
|
|
137
|
-
d: "M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",
|
|
138
|
-
fill: "#438FD5"
|
|
139
|
-
}), /* @__PURE__ */ jsx("path", {
|
|
140
|
-
d: "M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",
|
|
141
|
-
fill: "#F4220B"
|
|
142
|
-
}), /* @__PURE__ */ jsx("path", {
|
|
143
|
-
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",
|
|
144
|
-
fill: "white"
|
|
145
|
-
})), /* @__PURE__ */ jsx("defs", null, /* @__PURE__ */ jsx("clipPath", {
|
|
146
|
-
id: "clip0_41_612"
|
|
147
|
-
}, /* @__PURE__ */ jsx("rect", {
|
|
148
|
-
width: "120",
|
|
149
|
-
height: "38",
|
|
150
|
-
fill: "white"
|
|
151
|
-
}))))), /* @__PURE__ */ jsx("ul", {
|
|
152
|
-
css: css`
|
|
53
|
+
`,href:"https://uniform.dev/"},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:x`
|
|
153
54
|
display: flex;
|
|
154
55
|
flex-flow: column nowrap;
|
|
155
56
|
padding: 0;
|
|
156
57
|
margin: 0;
|
|
157
58
|
list-style-type: none;
|
|
158
|
-
|
|
159
|
-
`
|
|
160
|
-
}, links.map((item, index) => {
|
|
161
|
-
var _a, _b, _c, _d;
|
|
162
|
-
let overrideCount = 0;
|
|
163
|
-
if (item.href === "/overrides" && Object.keys((_a = props.settings.scoreOverrides) != null ? _a : {}).length > 0) {
|
|
164
|
-
overrideCount = Object.keys((_b = props.settings.scoreOverrides) != null ? _b : {}).length;
|
|
165
|
-
}
|
|
166
|
-
if (item.href === "/quirks" && Object.keys((_c = props.settings.quirkOverrides) != null ? _c : {}).length > 0) {
|
|
167
|
-
overrideCount = Object.keys((_d = props.settings.quirkOverrides) != null ? _d : {}).length;
|
|
168
|
-
}
|
|
169
|
-
return /* @__PURE__ */ jsx("li", {
|
|
170
|
-
css: css`
|
|
59
|
+
flex-grow: 1;
|
|
60
|
+
`},ft.map((a,l)=>{var m,u,s,c;let p=0;return a.href==="/overrides"&&Object.keys((m=t.settings.scoreOverrides)!=null?m:{}).length>0&&(p=Object.keys((u=t.settings.scoreOverrides)!=null?u:{}).length),a.href==="/quirks"&&Object.keys((s=t.settings.quirkOverrides)!=null?s:{}).length>0&&(p=Object.keys((c=t.settings.quirkOverrides)!=null?c:{}).length),e("li",{css:x`
|
|
171
61
|
padding: 0;
|
|
172
62
|
margin: 0;
|
|
173
63
|
list-style-type: none;
|
|
@@ -175,10 +65,7 @@ var Menu = ({ ...props }) => {
|
|
|
175
65
|
&:last-of-type {
|
|
176
66
|
margin-top: auto;
|
|
177
67
|
}
|
|
178
|
-
`,
|
|
179
|
-
key: index
|
|
180
|
-
}, /* @__PURE__ */ jsx(NavigationLink_default, {
|
|
181
|
-
css: css`
|
|
68
|
+
`,key:l},e(H,{css:x`
|
|
182
69
|
align-items: center;
|
|
183
70
|
border-radius: var(--rounded-base);
|
|
184
71
|
display: flex;
|
|
@@ -192,17 +79,10 @@ var Menu = ({ ...props }) => {
|
|
|
192
79
|
&.active {
|
|
193
80
|
background: var(--gray-700);
|
|
194
81
|
}
|
|
195
|
-
`,
|
|
196
|
-
className: isActivePath(item.href),
|
|
197
|
-
route: item.href
|
|
198
|
-
}, /* @__PURE__ */ jsx("i", {
|
|
199
|
-
css: css`
|
|
82
|
+
`,className:r(a.href),route:a.href},e("i",{css:x`
|
|
200
83
|
align-items: center;
|
|
201
84
|
display: flex;
|
|
202
|
-
`,
|
|
203
|
-
dangerouslySetInnerHTML: { __html: item.icon }
|
|
204
|
-
}), item.title, overrideCount ? /* @__PURE__ */ jsx("span", {
|
|
205
|
-
css: css`
|
|
85
|
+
`,dangerouslySetInnerHTML:{__html:a.icon}}),a.title,p?e("span",{css:x`
|
|
206
86
|
font-size: var(--font-xxs);
|
|
207
87
|
display: inline-block;
|
|
208
88
|
width: 12px;
|
|
@@ -211,29 +91,29 @@ var Menu = ({ ...props }) => {
|
|
|
211
91
|
background-color: var(--red-tooltip);
|
|
212
92
|
text-align: center;
|
|
213
93
|
line-height: 12px;
|
|
214
|
-
`
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
var
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
94
|
+
`},p):null))})),!n&&e("a",{target:"_blank",href:"https://chrome.google.com/webstore/detail/uniform-context/dcmlokofjljnfjcknpmhjocogllfbhkg",css:x`
|
|
95
|
+
align-items: center;
|
|
96
|
+
border-radius: var(--rounded-base);
|
|
97
|
+
display: flex;
|
|
98
|
+
font-size: var(--font-sm);
|
|
99
|
+
color: var(--white);
|
|
100
|
+
gap: var(--spacing-sm);
|
|
101
|
+
padding: var(--spacing-sm) var(--spacing-base);
|
|
102
|
+
text-decoration: none;
|
|
103
|
+
transition: background-color 0.25s ease-in-out;
|
|
104
|
+
|
|
105
|
+
&:hover,
|
|
106
|
+
&.active {
|
|
107
|
+
background: var(--gray-700);
|
|
108
|
+
}
|
|
109
|
+
`,rel:"noreferrer"},e("i",{css:x`
|
|
110
|
+
align-items: center;
|
|
111
|
+
display: flex;
|
|
112
|
+
`,dangerouslySetInnerHTML:{__html:vt}}),"Install Chrome Extension"))};var Ce=()=>e("article",null,e("h1",null,"Something when wrong"),e("p",null,"We could not find the page you're looking for."));import*as ne from"react";import{css as M}from"@emotion/react";import*as G from"react";var we=M({willChange:"height"}),ht=M`
|
|
232
113
|
border-bottom: 2px solid var(--brand-secondary-1);
|
|
233
114
|
font-size: var(--font-base);
|
|
234
115
|
margin: 0;
|
|
235
|
-
|
|
236
|
-
var btnStyle = css2`
|
|
116
|
+
`,bt=M`
|
|
237
117
|
align-items: center;
|
|
238
118
|
border: none;
|
|
239
119
|
background: none;
|
|
@@ -243,118 +123,13 @@ var btnStyle = css2`
|
|
|
243
123
|
padding: var(--spacing-sm) 0;
|
|
244
124
|
font-weight: var(--font-bold);
|
|
245
125
|
justify-content: space-between;
|
|
246
|
-
|
|
247
|
-
var iconStyle = css2`
|
|
126
|
+
`,yt=M`
|
|
248
127
|
align-self: center;
|
|
249
|
-
|
|
250
|
-
var iconActiveStyle = css2`
|
|
128
|
+
`,Ct=M`
|
|
251
129
|
transform: rotate(-180deg);
|
|
252
|
-
|
|
253
|
-
var Accordion = ({ children }) => {
|
|
254
|
-
return /* @__PURE__ */ jsx("div", {
|
|
255
|
-
css: [willChange]
|
|
256
|
-
}, children);
|
|
257
|
-
};
|
|
258
|
-
var AccordionItem = ({ title, children }) => {
|
|
259
|
-
const [visibility, setVisibility] = React2.useState(false);
|
|
260
|
-
const id = title.split(" ").join("-").toLocaleLowerCase();
|
|
261
|
-
return /* @__PURE__ */ jsx(React2.Fragment, null, /* @__PURE__ */ jsx("h3", {
|
|
262
|
-
css: titleStyle
|
|
263
|
-
}, /* @__PURE__ */ jsx("button", {
|
|
264
|
-
"aria-expanded": visibility,
|
|
265
|
-
css: btnStyle,
|
|
266
|
-
title,
|
|
267
|
-
id,
|
|
268
|
-
"aria-controls": `${id}-section`,
|
|
269
|
-
onClick: () => setVisibility((prev) => !prev),
|
|
270
|
-
type: "button"
|
|
271
|
-
}, title, /* @__PURE__ */ jsx("i", {
|
|
272
|
-
css: [iconStyle, visibility ? iconActiveStyle : void 0]
|
|
273
|
-
}, /* @__PURE__ */ jsx("svg", {
|
|
274
|
-
width: "24",
|
|
275
|
-
height: "24",
|
|
276
|
-
viewBox: "0 0 24 24",
|
|
277
|
-
fill: "none",
|
|
278
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
279
|
-
}, /* @__PURE__ */ jsx("path", {
|
|
280
|
-
d: "M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",
|
|
281
|
-
fill: "currentColor"
|
|
282
|
-
}))))), /* @__PURE__ */ jsx("div", {
|
|
283
|
-
id: `${id}-section`,
|
|
284
|
-
css: [
|
|
285
|
-
willChange,
|
|
286
|
-
css2`
|
|
130
|
+
`,$=({children:t})=>e("div",{css:[we]},t),K=({title:t,children:r})=>{let[n,o]=G.useState(!1),i=t.split(" ").join("-").toLocaleLowerCase();return e(G.Fragment,null,e("h3",{css:ht},e("button",{"aria-expanded":n,css:bt,title:t,id:i,"aria-controls":`${i}-section`,onClick:()=>o(a=>!a),type:"button"},t,e("i",{css:[yt,n?Ct: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:[we,M`
|
|
287
131
|
padding: var(--spacing-sm) 0;
|
|
288
|
-
`
|
|
289
|
-
],
|
|
290
|
-
role: "region",
|
|
291
|
-
"aria-labelledby": id
|
|
292
|
-
}, visibility ? children : null));
|
|
293
|
-
};
|
|
294
|
-
|
|
295
|
-
// src/components/Buttons/Button.tsx
|
|
296
|
-
import { css as css3 } from "@emotion/react";
|
|
297
|
-
import * as React3 from "react";
|
|
298
|
-
var buttonStyle = css3`
|
|
299
|
-
align-items: center;
|
|
300
|
-
border: 1px solid transparent;
|
|
301
|
-
cursor: pointer;
|
|
302
|
-
display: inline-flex;
|
|
303
|
-
padding: var(--spacing-sm) var(--spacing-base);
|
|
304
|
-
transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
|
305
|
-
font-size: var(--font-sm);
|
|
306
|
-
&:hover {
|
|
307
|
-
opacity: 0.8;
|
|
308
|
-
}
|
|
309
|
-
`;
|
|
310
|
-
function buttonVariant(variant) {
|
|
311
|
-
const white = css3`
|
|
312
|
-
color: var(--white);
|
|
313
|
-
`;
|
|
314
|
-
const bold = css3`
|
|
315
|
-
font-weight: var(--font-bold);
|
|
316
|
-
`;
|
|
317
|
-
switch (variant) {
|
|
318
|
-
case "primary":
|
|
319
|
-
return css3`
|
|
320
|
-
background: var(--brand-secondary-1);
|
|
321
|
-
${white}
|
|
322
|
-
${bold}
|
|
323
|
-
`;
|
|
324
|
-
case "secondary":
|
|
325
|
-
return css3`
|
|
326
|
-
background: var(--brand-secondary-5);
|
|
327
|
-
${white}
|
|
328
|
-
${bold}
|
|
329
|
-
`;
|
|
330
|
-
case "unimportant":
|
|
331
|
-
return css3`
|
|
332
|
-
background: var(--brand-secondary-3);
|
|
333
|
-
color: var(--brand-secondary-1);
|
|
334
|
-
${bold}
|
|
335
|
-
`;
|
|
336
|
-
case "ghost":
|
|
337
|
-
return css3`
|
|
338
|
-
background: transparent;
|
|
339
|
-
color: var(--brand-secondary-5);
|
|
340
|
-
&:hover {
|
|
341
|
-
border: 1px solid var(--brand-secondary-5);
|
|
342
|
-
}
|
|
343
|
-
`;
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
var Button = ({ buttonType = "primary", children, className, ...props }) => {
|
|
347
|
-
return /* @__PURE__ */ jsx(React3.Fragment, null, /* @__PURE__ */ jsx("button", {
|
|
348
|
-
type: "button",
|
|
349
|
-
css: [buttonStyle, buttonVariant(buttonType)],
|
|
350
|
-
className,
|
|
351
|
-
...props
|
|
352
|
-
}, children));
|
|
353
|
-
};
|
|
354
|
-
|
|
355
|
-
// src/components/CallToAction/cta.styles.ts
|
|
356
|
-
import { css as css4 } from "@emotion/react";
|
|
357
|
-
var cta = css4`
|
|
132
|
+
`],role:"region","aria-labelledby":i},n?r:null))};import{css as A}from"@emotion/react";var W=A`
|
|
358
133
|
background-color: var(--gray-100);
|
|
359
134
|
padding: var(--spacing-base) var(--spacing-md);
|
|
360
135
|
margin: var(--spacing-base) 0;
|
|
@@ -362,25 +137,21 @@ var cta = css4`
|
|
|
362
137
|
&:first-of-type {
|
|
363
138
|
margin: 0 0 var(--spacing-base);
|
|
364
139
|
}
|
|
365
|
-
|
|
366
|
-
var ctaWithIcon = css4`
|
|
140
|
+
`,ke=A`
|
|
367
141
|
background: var(--gray-100)
|
|
368
142
|
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")
|
|
369
143
|
no-repeat var(--spacing-sm) var(--spacing-base);
|
|
370
144
|
padding: var(--spacing-base) var(--spacing-xl);
|
|
371
|
-
|
|
372
|
-
var ctaTitle = css4`
|
|
145
|
+
`,Y=A`
|
|
373
146
|
color: var(--brand-secondary-1);
|
|
374
147
|
margin: 0;
|
|
375
148
|
font-size: var(--font-base);
|
|
376
149
|
font-weight: var(--font-bold);
|
|
377
|
-
|
|
378
|
-
var ctaText = css4`
|
|
150
|
+
`,J=A`
|
|
379
151
|
color: var(--brand-secondary-1);
|
|
380
152
|
margin: var(--spacing-xs) 0 0;
|
|
381
153
|
font-size: var(--font-sm);
|
|
382
|
-
|
|
383
|
-
var ctaClose = css4`
|
|
154
|
+
`,Te=A`
|
|
384
155
|
align-items: center;
|
|
385
156
|
border: none;
|
|
386
157
|
background: transparent
|
|
@@ -400,132 +171,25 @@ var ctaClose = css4`
|
|
|
400
171
|
&:hover {
|
|
401
172
|
opacity: 0.6;
|
|
402
173
|
}
|
|
403
|
-
|
|
404
|
-
var ctaBtnGroup = css4`
|
|
174
|
+
`,X=A`
|
|
405
175
|
display: flex;
|
|
406
176
|
margin: var(--spacing-sm) 0 0;
|
|
407
177
|
gap: var(--spacing-base);
|
|
408
|
-
`;
|
|
409
|
-
|
|
410
|
-
// src/components/CallToAction/NoActiveDimensions.tsx
|
|
411
|
-
var NoActiveDimensions = ({ title, text, buttonGroup, children }) => {
|
|
412
|
-
return /* @__PURE__ */ jsx("div", {
|
|
413
|
-
css: cta
|
|
414
|
-
}, /* @__PURE__ */ jsx("h2", {
|
|
415
|
-
css: ctaTitle
|
|
416
|
-
}, title), /* @__PURE__ */ jsx("p", {
|
|
417
|
-
css: ctaText
|
|
418
|
-
}, text), children, buttonGroup ? /* @__PURE__ */ jsx("div", {
|
|
419
|
-
css: ctaBtnGroup
|
|
420
|
-
}, buttonGroup) : null);
|
|
421
|
-
};
|
|
422
|
-
|
|
423
|
-
// src/components/Inputs/input-switch.styles.ts
|
|
424
|
-
import { css as css5 } from "@emotion/react";
|
|
425
|
-
var inputSwitch = css5`
|
|
426
|
-
align-items: center;
|
|
427
|
-
cursor: pointer;
|
|
428
|
-
display: flex;
|
|
429
|
-
gap: var(--spacing-xs);
|
|
430
|
-
margin-top: var(--spacing-base);
|
|
431
|
-
`;
|
|
432
|
-
var inputSwitchLabel = css5`
|
|
433
|
-
color: var(--gray-500);
|
|
434
|
-
font-size: var(--font-sm);
|
|
435
|
-
`;
|
|
436
|
-
var inputSwitchControl = css5`
|
|
437
|
-
background: var(--gray-600);
|
|
438
|
-
`;
|
|
439
|
-
var inputSwitchBtn = css5`
|
|
440
|
-
display: block;
|
|
441
|
-
background: var(--gray-400);
|
|
442
|
-
border-radius: var(--rounded-full);
|
|
443
|
-
position: relative;
|
|
444
|
-
height: 16px;
|
|
445
|
-
width: 32px;
|
|
446
|
-
&:before {
|
|
447
|
-
border-radius: var(--rounded-full);
|
|
448
|
-
background: var(--white);
|
|
449
|
-
content: '';
|
|
450
|
-
display: block;
|
|
451
|
-
width: 13px;
|
|
452
|
-
height: 13px;
|
|
453
|
-
position: absolute;
|
|
454
|
-
top: 0;
|
|
455
|
-
bottom: 0;
|
|
456
|
-
margin: auto 0;
|
|
457
|
-
transform: translateX(2px);
|
|
458
|
-
transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;
|
|
459
|
-
}
|
|
460
|
-
`;
|
|
461
|
-
var inputSwitchCheckbox = css5`
|
|
462
|
-
overflow: hidden;
|
|
463
|
-
clip: rect(0, 0, 0, 0);
|
|
464
|
-
height: 0;
|
|
465
|
-
width: 0;
|
|
466
|
-
text-indent: -9999px;
|
|
467
|
-
|
|
468
|
-
&:checked ~ :before {
|
|
469
|
-
transform: translateX(17px);
|
|
470
|
-
}
|
|
471
|
-
|
|
472
|
-
&:checked ~ span {
|
|
473
|
-
background: var(--brand-secondary-5);
|
|
474
|
-
}
|
|
475
|
-
`;
|
|
476
|
-
|
|
477
|
-
// src/components/Inputs/SwitchInput.tsx
|
|
478
|
-
var SwitchInput = ({ label, ...props }) => {
|
|
479
|
-
return /* @__PURE__ */ jsx("label", {
|
|
480
|
-
css: inputSwitch
|
|
481
|
-
}, /* @__PURE__ */ jsx("span", {
|
|
482
|
-
css: inputSwitchLabel
|
|
483
|
-
}, label), /* @__PURE__ */ jsx("input", {
|
|
484
|
-
type: "checkbox",
|
|
485
|
-
css: inputSwitchCheckbox,
|
|
486
|
-
...props
|
|
487
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
488
|
-
css: inputSwitchBtn
|
|
489
|
-
}));
|
|
490
|
-
};
|
|
491
|
-
var FormikSwitchInput = ({ field, form, meta, ...rawProps }) => {
|
|
492
|
-
const { label } = rawProps;
|
|
493
|
-
return /* @__PURE__ */ jsx("label", {
|
|
494
|
-
css: inputSwitch
|
|
495
|
-
}, /* @__PURE__ */ jsx("span", {
|
|
496
|
-
css: inputSwitchLabel
|
|
497
|
-
}, label), /* @__PURE__ */ jsx("input", {
|
|
498
|
-
type: "checkbox",
|
|
499
|
-
css: inputSwitchCheckbox,
|
|
500
|
-
checked: field.value,
|
|
501
|
-
...field
|
|
502
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
503
|
-
css: inputSwitchBtn
|
|
504
|
-
}));
|
|
505
|
-
};
|
|
506
|
-
|
|
507
|
-
// src/components/Personalization/page.styles.ts
|
|
508
|
-
import { css as css6, keyframes } from "@emotion/react";
|
|
509
|
-
var popIn = keyframes`from {
|
|
178
|
+
`;var E=({title:t,text:r,buttonGroup:n,children:o})=>e("div",{css:W},e("h2",{css:Y},t),e("p",{css:J},r),o,n?e("div",{css:X},n):null);import{css as D,keyframes as wt}from"@emotion/react";var kt=wt`from {
|
|
510
179
|
transform: scale(1);
|
|
511
180
|
}
|
|
512
181
|
to {
|
|
513
182
|
transform: scale(1.2);
|
|
514
183
|
}
|
|
515
|
-
|
|
516
|
-
var styles = {
|
|
517
|
-
page: css6`
|
|
184
|
+
`,b={page:D`
|
|
518
185
|
color: var(--brand-secondary-1);
|
|
519
|
-
`,
|
|
520
|
-
text: css6`
|
|
186
|
+
`,text:D`
|
|
521
187
|
margin: var(--spacing-sm) 0;
|
|
522
|
-
`,
|
|
523
|
-
reset: css6`
|
|
188
|
+
`,reset:D`
|
|
524
189
|
margin: 0 var(--spacing-md);
|
|
525
190
|
font-size: var(--font-sm);
|
|
526
191
|
color: var(--gray-500);
|
|
527
|
-
`,
|
|
528
|
-
title: css6`
|
|
192
|
+
`,title:D`
|
|
529
193
|
margin: 0 0 var(--spacing-sm);
|
|
530
194
|
font-size: var(--font-md);
|
|
531
195
|
& > small {
|
|
@@ -534,14 +198,12 @@ var styles = {
|
|
|
534
198
|
font-weight: var(--font-regular);
|
|
535
199
|
margin: var(--spacing-xxs) 0 0;
|
|
536
200
|
}
|
|
537
|
-
`,
|
|
538
|
-
headingGroup: css6`
|
|
201
|
+
`,headingGroup:D`
|
|
539
202
|
align-items: baseline;
|
|
540
203
|
display: flex;
|
|
541
204
|
justify-content: space-between;
|
|
542
205
|
align-items: center;
|
|
543
|
-
`,
|
|
544
|
-
divider: css6`
|
|
206
|
+
`,divider:D`
|
|
545
207
|
background: var(--gray-300);
|
|
546
208
|
display: block;
|
|
547
209
|
width: 1px;
|
|
@@ -549,117 +211,66 @@ var styles = {
|
|
|
549
211
|
position: absolute;
|
|
550
212
|
inset: 0 auto 0 0;
|
|
551
213
|
margin: auto 0;
|
|
552
|
-
`,
|
|
553
|
-
submitButton: css6`
|
|
214
|
+
`,submitButton:D`
|
|
554
215
|
position: absolute;
|
|
555
216
|
right: var(--spacing-base);
|
|
556
217
|
bottom: var(--spacing-base);
|
|
557
|
-
animation: 0.5s 2 alternate ${
|
|
558
|
-
`,
|
|
559
|
-
cancelButton: css6`
|
|
218
|
+
animation: 0.5s 2 alternate ${kt};
|
|
219
|
+
`,cancelButton:D`
|
|
560
220
|
position: absolute;
|
|
561
221
|
left: calc(200px + var(--spacing-base));
|
|
562
222
|
bottom: var(--spacing-base);
|
|
563
223
|
background: white;
|
|
564
224
|
padding: var(--spacing-sm);
|
|
565
225
|
border: 1px solid var(--gray-300);
|
|
566
|
-
`,
|
|
567
|
-
error: css6`
|
|
226
|
+
`,error:D`
|
|
568
227
|
color: var(--brand-secondary-5);
|
|
569
228
|
font-size: var(--font-sm);
|
|
570
|
-
`
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
var
|
|
576
|
-
return /* @__PURE__ */ jsx("table", {
|
|
577
|
-
css: css7`
|
|
229
|
+
`,quirks:D`
|
|
230
|
+
.uniform-input-select,
|
|
231
|
+
input {
|
|
232
|
+
padding: var(--spacing-sm);
|
|
233
|
+
}
|
|
234
|
+
`};import{css as L}from"@emotion/react";var j=({children:t})=>e("table",{css:L`
|
|
578
235
|
border-collapse: collapse;
|
|
579
236
|
display: table;
|
|
580
237
|
width: 100%;
|
|
581
238
|
font-size: var(--font-sm);
|
|
582
|
-
`
|
|
583
|
-
}, children);
|
|
584
|
-
};
|
|
585
|
-
var THead = ({ children }) => {
|
|
586
|
-
return /* @__PURE__ */ jsx("thead", {
|
|
587
|
-
css: css7`
|
|
239
|
+
`},t),Se=({children:t})=>e("thead",{css:L`
|
|
588
240
|
background: var(--gray-50);
|
|
589
241
|
text-align: left;
|
|
590
242
|
& tr {
|
|
591
243
|
border-bottom: 1px solid var(--gray-200);
|
|
592
244
|
}
|
|
593
|
-
`
|
|
594
|
-
}, children);
|
|
595
|
-
};
|
|
596
|
-
var TBody = ({ children }) => {
|
|
597
|
-
return /* @__PURE__ */ jsx("tbody", null, children);
|
|
598
|
-
};
|
|
599
|
-
var TRow = ({ border, children }) => {
|
|
600
|
-
return /* @__PURE__ */ jsx("tr", {
|
|
601
|
-
css: border ? css7`
|
|
245
|
+
`},t),ee=({children:t})=>e("tbody",null,t),B=({border:t,children:r})=>e("tr",{css:t?L`
|
|
602
246
|
border-bottom: 1px solid var(--gray-200);
|
|
603
247
|
&:where(:last-child) {
|
|
604
248
|
border: none;
|
|
605
249
|
}
|
|
606
|
-
|
|
607
|
-
}, children);
|
|
608
|
-
};
|
|
609
|
-
var THeading = ({ children }) => {
|
|
610
|
-
return /* @__PURE__ */ jsx("th", {
|
|
611
|
-
css: css7`
|
|
250
|
+
`:void 0},r),te=({children:t,width:r})=>e("th",{css:L`
|
|
612
251
|
outline: none;
|
|
613
252
|
padding: var(--spacing-sm);
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
};
|
|
617
|
-
function colour(color) {
|
|
618
|
-
switch (color) {
|
|
619
|
-
case "light":
|
|
620
|
-
return css7`
|
|
253
|
+
width: ${r!=null?r:"auto"};
|
|
254
|
+
`},t);function Tt(t){switch(t){case"light":return L`
|
|
621
255
|
color: var(--gray-400);
|
|
622
|
-
`;
|
|
623
|
-
case "dark":
|
|
624
|
-
return css7`
|
|
256
|
+
`;case"dark":return L`
|
|
625
257
|
color: var(--brand-secondary-1);
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
}
|
|
629
|
-
function align(alignment) {
|
|
630
|
-
return css7`
|
|
631
|
-
text-align: ${alignment};
|
|
632
|
-
`;
|
|
633
|
-
}
|
|
634
|
-
var TData = ({ alignment = "left", border, color = "dark", children }) => {
|
|
635
|
-
return /* @__PURE__ */ jsx("td", {
|
|
636
|
-
css: [
|
|
637
|
-
css7`
|
|
258
|
+
`}}function St(t){return L`
|
|
259
|
+
text-align: ${t};
|
|
260
|
+
`}var I=({alignment:t="left",border:r,color:n="dark",children:o})=>e("td",{css:[L`
|
|
638
261
|
padding: var(--spacing-base);
|
|
639
262
|
max-width: 180px;
|
|
640
263
|
overflow-wrap: break-word;
|
|
641
264
|
position: relative;
|
|
642
|
-
`,
|
|
643
|
-
colour(color),
|
|
644
|
-
align(alignment),
|
|
645
|
-
border ? css7`
|
|
265
|
+
`,Tt(n),St(t),r?L`
|
|
646
266
|
border-left: 1px solid var(--gray-200);
|
|
647
|
-
|
|
648
|
-
]
|
|
649
|
-
}, children);
|
|
650
|
-
};
|
|
651
|
-
|
|
652
|
-
// src/components/Table/table.styles.ts
|
|
653
|
-
import { css as css8 } from "@emotion/react";
|
|
654
|
-
var scoreTd = css8`
|
|
267
|
+
`:void 0]},o);import{css as ce}from"@emotion/react";var De=ce`
|
|
655
268
|
position: relative;
|
|
656
269
|
display: inline-block;
|
|
657
270
|
font-size: var(--font-base);
|
|
658
|
-
|
|
659
|
-
var overriddenValue = css8`
|
|
271
|
+
`,xe=ce`
|
|
660
272
|
display: block;
|
|
661
|
-
|
|
662
|
-
var isOverriddenTooltip = css8`
|
|
273
|
+
`,Le=ce`
|
|
663
274
|
position: absolute;
|
|
664
275
|
width: 6px;
|
|
665
276
|
height: 6px;
|
|
@@ -667,227 +278,82 @@ var isOverriddenTooltip = css8`
|
|
|
667
278
|
top: 9px;
|
|
668
279
|
background: var(--red-tooltip);
|
|
669
280
|
border-radius: 3px;
|
|
670
|
-
`;
|
|
671
|
-
|
|
672
|
-
// src/styles/icons.tsx
|
|
673
|
-
import { css as css9 } from "@emotion/react";
|
|
674
|
-
var audienceIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
281
|
+
`;import{css as Dt}from"@emotion/react";var xt=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
675
282
|
<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"/>
|
|
676
283
|
<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"/>
|
|
677
284
|
<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"/>
|
|
678
|
-
</svg
|
|
679
|
-
var enrichmentIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
285
|
+
</svg>`,Lt=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
680
286
|
<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"/>
|
|
681
287
|
<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"/>
|
|
682
288
|
<path d="M11.9999 5.05762H8.3999V6.2576H11.9999V5.05762Z" fill="#828282"/>
|
|
683
289
|
<path d="M8.3999 7.45752H11.9999V8.6575H8.3999V7.45752Z" fill="#828282"/>
|
|
684
290
|
<path d="M11.9999 2.65771H8.3999V3.8577H11.9999V2.65771Z" fill="#828282"/>
|
|
685
|
-
</svg
|
|
686
|
-
var signalIcon = `<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
291
|
+
</svg>`,Oe=`<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
687
292
|
<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"/>
|
|
688
293
|
<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"/>
|
|
689
294
|
<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"/>
|
|
690
295
|
<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"/>
|
|
691
296
|
<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"/>
|
|
692
|
-
</svg
|
|
693
|
-
var Icon = ({ type }) => {
|
|
694
|
-
let iconHtml = "";
|
|
695
|
-
switch (type) {
|
|
696
|
-
case "Audience":
|
|
697
|
-
iconHtml = audienceIcon;
|
|
698
|
-
break;
|
|
699
|
-
case "Signal":
|
|
700
|
-
iconHtml = signalIcon;
|
|
701
|
-
break;
|
|
702
|
-
case "Intent":
|
|
703
|
-
iconHtml = signalIcon;
|
|
704
|
-
break;
|
|
705
|
-
case "Enrichment":
|
|
706
|
-
iconHtml = enrichmentIcon;
|
|
707
|
-
break;
|
|
708
|
-
}
|
|
709
|
-
return /* @__PURE__ */ jsx("i", {
|
|
710
|
-
css: css9`
|
|
297
|
+
</svg>`,Ie=({type:t})=>{let r="";switch(t){case"Audience":r=xt;break;case"Signal":r=Oe;break;case"Intent":r=Oe;break;case"Enrichment":r=Lt;break}return e("i",{css:Dt`
|
|
711
298
|
align-items: center;
|
|
712
299
|
display: inline-block;
|
|
713
|
-
`,
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
var _a;
|
|
727
|
-
const { settings } = useDevToolsSettingsContext();
|
|
728
|
-
const overrides = (_a = preemptiveOverrides != null ? preemptiveOverrides : settings.scoreOverrides) != null ? _a : {};
|
|
729
|
-
return /* @__PURE__ */ jsx(Table, null, /* @__PURE__ */ jsx(TBody, null, Object.entries(dimensions).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => {
|
|
730
|
-
var _a2;
|
|
731
|
-
const { dim, name, type, category } = (_a2 = dimensionIndex[key]) != null ? _a2 : {
|
|
732
|
-
name: key,
|
|
733
|
-
dim: key,
|
|
734
|
-
type: void 0,
|
|
735
|
-
category: void 0
|
|
736
|
-
};
|
|
737
|
-
const override = overrides[dim];
|
|
738
|
-
return /* @__PURE__ */ jsx(TRow, {
|
|
739
|
-
key: dim
|
|
740
|
-
}, /* @__PURE__ */ jsx(TData, null, override !== void 0 ? /* @__PURE__ */ jsx("s", {
|
|
741
|
-
css: overriddenValue
|
|
742
|
-
}, override.initial) : null, /* @__PURE__ */ jsx("b", {
|
|
743
|
-
css: scoreTd
|
|
744
|
-
}, value, override !== void 0 && /* @__PURE__ */ jsx("i", {
|
|
745
|
-
css: isOverriddenTooltip
|
|
746
|
-
}))), /* @__PURE__ */ jsx(TData, null, /* @__PURE__ */ jsx("div", {
|
|
747
|
-
onClick: () => onClick == null ? void 0 : onClick(dim),
|
|
748
|
-
css: onClick ? { cursor: "pointer" } : void 0
|
|
749
|
-
}, /* @__PURE__ */ jsx("span", {
|
|
750
|
-
css: styles.divider,
|
|
751
|
-
role: "presentation"
|
|
752
|
-
}), /* @__PURE__ */ jsx("div", null, /* @__PURE__ */ jsx(Icon, {
|
|
753
|
-
type
|
|
754
|
-
}), " ", type), /* @__PURE__ */ jsx("strong", null, category ? `${category}:` : "", " ", name))), /* @__PURE__ */ jsx(TData, {
|
|
755
|
-
alignment: "right",
|
|
756
|
-
color: "light"
|
|
757
|
-
}, override !== void 0 && !disableEditOverride ? /* @__PURE__ */ jsx(NavigationLink_default, {
|
|
758
|
-
route: `/overrides/${dim}`
|
|
759
|
-
}, "Edit override") : null));
|
|
760
|
-
})));
|
|
761
|
-
};
|
|
762
|
-
var DimensionsTable_default = DimensionsTable;
|
|
763
|
-
|
|
764
|
-
// src/components/Buttons/LinkButton.tsx
|
|
765
|
-
import { css as css10 } from "@emotion/react";
|
|
766
|
-
var btnStyle2 = css10`
|
|
767
|
-
background: none;
|
|
768
|
-
border: none;
|
|
769
|
-
color: var(--brand-secondary-3);
|
|
300
|
+
`,dangerouslySetInnerHTML:{__html:r}})};var Ot=({dimensionIndex:t,dimensions:r,disableEditOverride:n,onClick:o,preemptiveOverrides:i})=>{var p;let{settings:a}=_(),l=(p=i!=null?i:a.scoreOverrides)!=null?p:{};return e(j,null,e(ee,null,Object.entries(r).sort(([m],[u])=>m.localeCompare(u)).map(([m,u])=>{var C;let{dim:s,name:c,type:d,category:v}=(C=t[m])!=null?C:{name:m,dim:m,type:void 0,category:void 0},h=l[s];return e(B,{key:s},e(I,null,h!==void 0?e("s",{css:xe},h.initial):null,e("b",{css:De},u,h!==void 0&&e("i",{css:Le}))),e(I,null,e("div",{onClick:()=>o==null?void 0:o(s),css:o?{cursor:"pointer"}:void 0},e("span",{css:b.divider,role:"presentation"}),e("div",null,e(Ie,{type:d})," ",d),e("strong",null,v?`${v}:`:""," ",c))),e(I,{alignment:"right",color:"light"},h!==void 0&&!n?e(H,{route:`/overrides/${s}`},"Edit override"):null))})))},R=Ot;async function oe({actions:t,saveSettings:r,scores:n,settings:o}){var p,m;let i=(p=o.scoreOverrides)!=null?p:{},a={...i},l=[];for(let u of Object.keys(i)){let s=i==null?void 0:i[u];delete a[u],l.push({type:"modscoreS",data:{dimension:u,delta:s.initial-((m=n[u])!=null?m:0)}})}await r({...o,scoreOverrides:a}),await t.rawUpdate(l)}async function Re({quirk:t,settings:r,saveSettings:n,actions:o}){var l;let i=(l=r.quirkOverrides)==null?void 0:l[t];if(!i)return;let a={...r.quirkOverrides};delete a[t],await n({...r,quirkOverrides:a}),await o.rawUpdate([{type:"setquirk",data:{key:t,value:i.initial}}])}import{Button as Ee}from"@uniformdev/design-system";import*as Ae from"react";import{css as Q}from"@emotion/react";var Ve=Q`
|
|
301
|
+
position: relative;
|
|
302
|
+
display: inline-block;
|
|
303
|
+
margin-right: var(--spacing-sm);
|
|
304
|
+
transition: var(--duration) var(--timing);
|
|
305
|
+
vertical-align: middle;
|
|
306
|
+
user-select: none;
|
|
307
|
+
width: var(--spacing-xl);
|
|
308
|
+
`,Pe=Q`
|
|
309
|
+
appearance: none;
|
|
310
|
+
border-radius: var(--rounded-full);
|
|
311
|
+
background-color: var(--white);
|
|
312
|
+
border: 2px solid var(--gray-400);
|
|
770
313
|
cursor: pointer;
|
|
771
|
-
|
|
314
|
+
position: absolute;
|
|
315
|
+
display: block;
|
|
316
|
+
width: var(--spacing-md);
|
|
317
|
+
height: var(--spacing-md);
|
|
318
|
+
transition: transform var(--duration) var(--timing), background-color var(--duration) var(--timing),
|
|
319
|
+
background-image var(--duration) var(--timing);
|
|
320
|
+
|
|
321
|
+
&:focus {
|
|
322
|
+
outline: 3px solid var(--brand-primary-1);
|
|
323
|
+
outline-offset: 2px;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
&:checked {
|
|
327
|
+
background-color: var(--brand-secondary-3);
|
|
328
|
+
background-image: 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 d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E");
|
|
329
|
+
background-position: center center;
|
|
330
|
+
border-color: var(--brand-secondary-3);
|
|
331
|
+
transform: translateX(var(--spacing-base));
|
|
332
|
+
|
|
333
|
+
&:hover,
|
|
334
|
+
&:focus {
|
|
335
|
+
border-color: var(--brand-primary-1);
|
|
336
|
+
background-color: var(--brand-primary-1);
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
`,He=Q`
|
|
340
|
+
border-radius: var(--rounded-full);
|
|
341
|
+
background-color: var(--gray-300);
|
|
342
|
+
cursor: pointer;
|
|
343
|
+
display: block;
|
|
344
|
+
overflow: hidden;
|
|
345
|
+
width: var(--spacing-xl);
|
|
346
|
+
height: var(--spacing-md);
|
|
347
|
+
`,Me=Q`
|
|
348
|
+
color: var(--brand-secondary-1);
|
|
772
349
|
font-weight: var(--font-bold);
|
|
773
|
-
|
|
350
|
+
line-height: 1.25rem;
|
|
351
|
+
cursor: default;
|
|
352
|
+
`,re=Q`
|
|
353
|
+
color: var(--gray-700);
|
|
774
354
|
font-size: var(--font-sm);
|
|
775
|
-
|
|
776
|
-
var
|
|
777
|
-
return /* @__PURE__ */ jsx("button", {
|
|
778
|
-
type: "button",
|
|
779
|
-
css: btnStyle2,
|
|
780
|
-
...props
|
|
781
|
-
}, children);
|
|
782
|
-
};
|
|
783
|
-
|
|
784
|
-
// src/lib/deleteOverride.ts
|
|
785
|
-
async function deleteScoreOverrides({
|
|
786
|
-
actions,
|
|
787
|
-
saveSettings,
|
|
788
|
-
scores,
|
|
789
|
-
settings
|
|
790
|
-
}) {
|
|
791
|
-
var _a, _b;
|
|
792
|
-
const scoreOverrides = (_a = settings.scoreOverrides) != null ? _a : {};
|
|
793
|
-
const newOverrides = { ...scoreOverrides };
|
|
794
|
-
const commands = [];
|
|
795
|
-
for (const dim of Object.keys(scoreOverrides)) {
|
|
796
|
-
const override = scoreOverrides == null ? void 0 : scoreOverrides[dim];
|
|
797
|
-
delete newOverrides[dim];
|
|
798
|
-
commands.push({
|
|
799
|
-
type: "modscoreS",
|
|
800
|
-
data: { dimension: dim, delta: override.initial - ((_b = scores[dim]) != null ? _b : 0) }
|
|
801
|
-
});
|
|
802
|
-
}
|
|
803
|
-
await saveSettings({
|
|
804
|
-
...settings,
|
|
805
|
-
scoreOverrides: newOverrides
|
|
806
|
-
});
|
|
807
|
-
await actions.rawUpdate(commands);
|
|
808
|
-
}
|
|
809
|
-
async function deleteQuirkOverride({
|
|
810
|
-
quirk: dim,
|
|
811
|
-
settings,
|
|
812
|
-
saveSettings,
|
|
813
|
-
actions
|
|
814
|
-
}) {
|
|
815
|
-
var _a;
|
|
816
|
-
const override = (_a = settings.quirkOverrides) == null ? void 0 : _a[dim];
|
|
817
|
-
if (!override) {
|
|
818
|
-
return;
|
|
819
|
-
}
|
|
820
|
-
const newOverrides = { ...settings.quirkOverrides };
|
|
821
|
-
delete newOverrides[dim];
|
|
822
|
-
await saveSettings({
|
|
823
|
-
...settings,
|
|
824
|
-
quirkOverrides: newOverrides
|
|
825
|
-
});
|
|
826
|
-
await actions.rawUpdate([{ type: "setquirk", data: { key: dim, value: override.initial } }]);
|
|
827
|
-
}
|
|
828
|
-
|
|
829
|
-
// src/components/Personalization/Dimensions.tsx
|
|
830
|
-
var Dimensions = ({
|
|
831
|
-
dimensionIndex: { index: dimensionIndex },
|
|
832
|
-
state: { scores, data },
|
|
833
|
-
actions,
|
|
834
|
-
saveSettings,
|
|
835
|
-
settings
|
|
836
|
-
}) => {
|
|
837
|
-
const remainingDimensions = React4.useMemo(() => {
|
|
838
|
-
const newRemainingDimensions = {};
|
|
839
|
-
Object.keys(dimensionIndex).filter((dimension) => !scores[dimension]).map((key) => {
|
|
840
|
-
newRemainingDimensions[dimensionIndex[key].dim] = 0;
|
|
841
|
-
});
|
|
842
|
-
return newRemainingDimensions;
|
|
843
|
-
}, [scores, dimensionIndex]);
|
|
844
|
-
const activeDims = Object.keys(scores).length;
|
|
845
|
-
const totalDims = activeDims + Object.keys(remainingDimensions).length;
|
|
846
|
-
const toggleControlGroup = () => {
|
|
847
|
-
actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
|
|
848
|
-
};
|
|
849
|
-
return /* @__PURE__ */ jsx(React4.Fragment, null, /* @__PURE__ */ jsx("article", {
|
|
850
|
-
css: styles.page
|
|
851
|
-
}, /* @__PURE__ */ jsx("div", {
|
|
852
|
-
css: styles.headingGroup
|
|
853
|
-
}, /* @__PURE__ */ jsx("h2", {
|
|
854
|
-
css: styles.title
|
|
855
|
-
}, "Dimensions", /* @__PURE__ */ jsx("small", null, activeDims, " active of ", totalDims)), /* @__PURE__ */ jsx("div", {
|
|
856
|
-
css: styles.reset
|
|
857
|
-
}, /* @__PURE__ */ jsx(LinkButton, {
|
|
858
|
-
onClick: () => deleteScoreOverrides({ actions, saveSettings, scores, settings }).then(actions.forget)
|
|
859
|
-
}, "clear all dimensions")), /* @__PURE__ */ jsx(SwitchInput, {
|
|
860
|
-
label: "Control Group",
|
|
861
|
-
onChange: toggleControlGroup,
|
|
862
|
-
checked: data.controlGroup
|
|
863
|
-
})), activeDims > 0 ? /* @__PURE__ */ jsx(DimensionsTable_default, {
|
|
864
|
-
dimensionIndex,
|
|
865
|
-
dimensions: scores
|
|
866
|
-
}) : /* @__PURE__ */ jsx(NoActiveDimensions, {
|
|
867
|
-
title: data.controlGroup ? "In control group" : "No active dimensions",
|
|
868
|
-
text: data.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.",
|
|
869
|
-
buttonGroup: data.controlGroup ? /* @__PURE__ */ jsx(Button, {
|
|
870
|
-
buttonType: "secondary",
|
|
871
|
-
onClick: toggleControlGroup
|
|
872
|
-
}, "Exit control group") : null
|
|
873
|
-
}), /* @__PURE__ */ jsx(Accordion, null, /* @__PURE__ */ jsx(AccordionItem, {
|
|
874
|
-
title: `Inactive Dimensions (${Object.keys(remainingDimensions).length})`
|
|
875
|
-
}, /* @__PURE__ */ jsx(DimensionsTable_default, {
|
|
876
|
-
dimensionIndex,
|
|
877
|
-
dimensions: remainingDimensions
|
|
878
|
-
})))));
|
|
879
|
-
};
|
|
880
|
-
|
|
881
|
-
// src/components/Personalization/Overrides.tsx
|
|
882
|
-
import * as React5 from "react";
|
|
883
|
-
|
|
884
|
-
// src/components/CallToAction/AddButton.tsx
|
|
885
|
-
import { css as css11 } from "@emotion/react";
|
|
886
|
-
function AddButton({
|
|
887
|
-
onClick
|
|
888
|
-
}) {
|
|
889
|
-
return /* @__PURE__ */ jsx("button", {
|
|
890
|
-
css: css11`
|
|
355
|
+
margin: var(--spacing-sm) 0;
|
|
356
|
+
`;var q=({label:t,infoText:r,toggleText:n,...o})=>{let i=()=>r&&n?o.checked?e("p",{css:re},n):e("p",{css:re},r):r?e("p",{css:re},r):null;return e(Ae.Fragment,null,e("div",{css:Ve},e("input",{type:"checkbox",css:Pe,...o,className:o.className}),e("label",{htmlFor:o.id,css:He})),e("label",{htmlFor:o.id,css:Me},t),i())};var ze=({dimensionIndex:{index:t},state:{scores:r,data:n},actions:o,saveSettings:i,settings:a})=>{let l=ne.useMemo(()=>{let s={};return Object.keys(t).filter(c=>!r[c]).map(c=>{s[t[c].dim]=0}),s},[r,t]),p=Object.keys(r).length,m=p+Object.keys(l).length,u=()=>{o.rawUpdate([{type:"setcontrol",data:!n.controlGroup}])};return e(ne.Fragment,null,e("article",{css:b.page},e("div",{css:b.headingGroup},e("h2",{css:b.title},"Dimensions",e("small",null,p," active of ",m)),e("div",{css:b.reset},e(Ee,{buttonType:"ghost",onClick:()=>oe({actions:o,saveSettings:i,scores:r,settings:a}).then(o.forget)},"clear all dimensions")),e(q,{name:"controlGroup",label:"Control Group",onChange:u,checked:n.controlGroup})),p>0?e(R,{dimensionIndex:t,dimensions:r}):e(E,{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?e(Ee,{buttonType:"secondary",onClick:u},"Exit control group"):null}),e($,null,e(K,{title:`Inactive Dimensions (${Object.keys(l).length})`},e(R,{dimensionIndex:t,dimensions:l})))))};import*as Be from"react";import{css as It}from"@emotion/react";function de({onClick:t}){return e("button",{css:It`
|
|
891
357
|
width: 3.5rem;
|
|
892
358
|
height: 3.5rem;
|
|
893
359
|
display: flex;
|
|
@@ -900,98 +366,7 @@ function AddButton({
|
|
|
900
366
|
svg {
|
|
901
367
|
color: var(--red-button);
|
|
902
368
|
}
|
|
903
|
-
`,
|
|
904
|
-
onClick,
|
|
905
|
-
"aria-label": "Add new override",
|
|
906
|
-
className: "text-secondary shadow-xl rounded-full flex items-center bg-secondary",
|
|
907
|
-
"data-test-id": "add-new-overrides-button"
|
|
908
|
-
}, /* @__PURE__ */ jsx("svg", {
|
|
909
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
910
|
-
width: "66",
|
|
911
|
-
height: "66",
|
|
912
|
-
viewBox: "0 0 66 66"
|
|
913
|
-
}, /* @__PURE__ */ jsx("g", {
|
|
914
|
-
fill: "none",
|
|
915
|
-
fillRule: "evenodd"
|
|
916
|
-
}, /* @__PURE__ */ jsx("circle", {
|
|
917
|
-
cx: "33",
|
|
918
|
-
cy: "33",
|
|
919
|
-
r: "33",
|
|
920
|
-
fill: "currentColor"
|
|
921
|
-
}), /* @__PURE__ */ jsx("g", {
|
|
922
|
-
fill: "#FFF",
|
|
923
|
-
transform: "translate(19 19)"
|
|
924
|
-
}, /* @__PURE__ */ jsx("rect", {
|
|
925
|
-
width: "4",
|
|
926
|
-
height: "28",
|
|
927
|
-
x: "12",
|
|
928
|
-
rx: "2"
|
|
929
|
-
}), /* @__PURE__ */ jsx("path", {
|
|
930
|
-
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",
|
|
931
|
-
transform: "rotate(90 14 14)"
|
|
932
|
-
})))));
|
|
933
|
-
}
|
|
934
|
-
|
|
935
|
-
// src/components/Personalization/Overrides.tsx
|
|
936
|
-
var Overrides = ({
|
|
937
|
-
dimensionIndex: { index: dimensionIndex },
|
|
938
|
-
state: { data, scores },
|
|
939
|
-
actions,
|
|
940
|
-
settings,
|
|
941
|
-
saveSettings
|
|
942
|
-
}) => {
|
|
943
|
-
var _a;
|
|
944
|
-
const overrides = (_a = settings.scoreOverrides) != null ? _a : {};
|
|
945
|
-
const totalOverrides = Object.keys(overrides).length;
|
|
946
|
-
const addNewOverride = (e) => {
|
|
947
|
-
e.preventDefault();
|
|
948
|
-
return saveSettings({ ...settings, route: "/overrides/add" });
|
|
949
|
-
};
|
|
950
|
-
const toggleControlGroup = () => {
|
|
951
|
-
actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
|
|
952
|
-
};
|
|
953
|
-
const scoresAffectedByOverrides = {};
|
|
954
|
-
Object.entries(scores).map(([key, value]) => {
|
|
955
|
-
if (overrides[key] !== void 0) {
|
|
956
|
-
scoresAffectedByOverrides[key] = value;
|
|
957
|
-
}
|
|
958
|
-
});
|
|
959
|
-
return /* @__PURE__ */ jsx(React5.Fragment, null, /* @__PURE__ */ jsx("article", {
|
|
960
|
-
css: styles.page
|
|
961
|
-
}, /* @__PURE__ */ jsx("div", {
|
|
962
|
-
css: styles.headingGroup
|
|
963
|
-
}, /* @__PURE__ */ jsx("h2", {
|
|
964
|
-
css: styles.title
|
|
965
|
-
}, "What if?"), /* @__PURE__ */ jsx("div", {
|
|
966
|
-
css: styles.reset
|
|
967
|
-
}, /* @__PURE__ */ jsx(LinkButton, {
|
|
968
|
-
onClick: () => deleteScoreOverrides({ actions, settings, saveSettings, scores })
|
|
969
|
-
}, "delete all overrides")), /* @__PURE__ */ jsx(AddButton, {
|
|
970
|
-
onClick: addNewOverride
|
|
971
|
-
})), /* @__PURE__ */ jsx("p", null, "Override dimension scores to test personalization"), totalOverrides > 0 ? /* @__PURE__ */ jsx(DimensionsTable_default, {
|
|
972
|
-
dimensionIndex,
|
|
973
|
-
dimensions: scoresAffectedByOverrides,
|
|
974
|
-
onClick: (dim) => saveSettings({ ...settings, route: `/overrides/${dim}` })
|
|
975
|
-
}) : /* @__PURE__ */ jsx(NoActiveDimensions, {
|
|
976
|
-
title: data.controlGroup ? "In control group" : "No overrides",
|
|
977
|
-
text: data.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.",
|
|
978
|
-
buttonGroup: data.controlGroup ? /* @__PURE__ */ jsx(Button, {
|
|
979
|
-
buttonType: "secondary",
|
|
980
|
-
onClick: toggleControlGroup
|
|
981
|
-
}, "Exit control group") : null
|
|
982
|
-
})));
|
|
983
|
-
};
|
|
984
|
-
|
|
985
|
-
// src/components/Personalization/AddOverride.tsx
|
|
986
|
-
import { Field as Field2, Form, Formik } from "formik";
|
|
987
|
-
import * as yup from "yup";
|
|
988
|
-
|
|
989
|
-
// src/components/Inputs/SelectInput.tsx
|
|
990
|
-
import { ErrorMessage } from "formik";
|
|
991
|
-
|
|
992
|
-
// src/components/Inputs/inputs.styles.ts
|
|
993
|
-
import { css as css12 } from "@emotion/react";
|
|
994
|
-
var textInput = css12`
|
|
369
|
+
`,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)"})))))}import{Button as Fe}from"@uniformdev/design-system";var Qe=({dimensionIndex:{index:t},state:{data:r,scores:n},actions:o,settings:i,saveSettings:a})=>{var c;let l=(c=i.scoreOverrides)!=null?c:{},p=Object.keys(l).length,m=d=>(d.preventDefault(),a({...i,route:"/overrides/add"})),u=()=>{o.rawUpdate([{type:"setcontrol",data:!r.controlGroup}])},s={};return Object.entries(n).map(([d,v])=>{l[d]!==void 0&&(s[d]=v)}),e(Be.Fragment,null,e("article",{css:b.page},e("div",{css:b.headingGroup},e("h2",{css:b.title},"What if?"),e("div",{css:b.reset},e(Fe,{buttonType:"ghost",onClick:()=>oe({actions:o,settings:i,saveSettings:a,scores:n})},"delete all overrides")),e(de,{onClick:m})),e("p",null,"Override dimension scores to test personalization"),p>0?e(R,{dimensionIndex:t,dimensions:s,onClick:d=>a({...i,route:`/overrides/${d}`})}):e(E,{title:r.controlGroup?"In control group":"No overrides",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 any dimension overrides yet.",buttonGroup:r.controlGroup?e(Fe,{buttonType:"secondary",onClick:u},"Exit control group"):null})))};import{Field as Ke,Form as Ft,Formik as Bt}from"formik";import*as z from"yup";import{css as V}from"@emotion/react";var qe=V`
|
|
995
370
|
background: var(--white);
|
|
996
371
|
border: 1px solid var(--gray-500);
|
|
997
372
|
border-radius: var(--rounded-base);
|
|
@@ -1002,50 +377,26 @@ var textInput = css12`
|
|
|
1002
377
|
cursor: not-allowed;
|
|
1003
378
|
color: var(--gray-200);
|
|
1004
379
|
}
|
|
1005
|
-
|
|
1006
|
-
var selectInput = css12`
|
|
1007
|
-
appearance: none;
|
|
1008
|
-
background: var(--white)
|
|
1009
|
-
url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNi4zNDMxNyA3Ljc1NzMyTDQuOTI4OTYgOS4xNzE1NEwxMiAxNi4yNDI2TDE5LjA3MTEgOS4xNzE1N0wxNy42NTY5IDcuNzU3MzVMMTIgMTMuNDE0Mkw2LjM0MzE3IDcuNzU3MzJaIgogICAgZmlsbD0iIzgyODI4MiIKICAvPgo8L3N2Zz4=')
|
|
1010
|
-
no-repeat 98% 50%;
|
|
1011
|
-
border: 1px solid var(--gray-500);
|
|
1012
|
-
border-radius: var(--rounded-base);
|
|
1013
|
-
color: var(--brand-secondary-1);
|
|
1014
|
-
padding: var(--spacing-base);
|
|
1015
|
-
&:disabled {
|
|
1016
|
-
cursor: not-allowed;
|
|
1017
|
-
color: var(--gray-200);
|
|
1018
|
-
}
|
|
1019
|
-
`;
|
|
1020
|
-
var editableInput = css12`
|
|
1021
|
-
padding: var(--spacing-sm);
|
|
1022
|
-
max-width: 160px;
|
|
1023
|
-
`;
|
|
1024
|
-
var inputWrapper = css12`
|
|
380
|
+
`,wr=V`
|
|
1025
381
|
margin: var(--spacing-base) 0;
|
|
1026
|
-
|
|
1027
|
-
var inputLabel = css12`
|
|
382
|
+
`,Ne=V`
|
|
1028
383
|
color: var(--brand-secondary-1);
|
|
1029
384
|
display: flex;
|
|
1030
385
|
flex-direction: column;
|
|
1031
386
|
margin: 0 0 var(--spacing-sm);
|
|
1032
|
-
|
|
1033
|
-
var inputText = css12`
|
|
387
|
+
`,Ze=V`
|
|
1034
388
|
color: var(--brand-secondary-1);
|
|
1035
389
|
display: block;
|
|
1036
390
|
flex: 1 100%;
|
|
1037
391
|
font-weight: var(--font-bold);
|
|
1038
392
|
margin: 0 0 var(--spacing-sm);
|
|
1039
|
-
|
|
1040
|
-
var inputCaption = css12`
|
|
393
|
+
`,kr=V`
|
|
1041
394
|
color: var(--gray-600);
|
|
1042
395
|
font-size: var(--font-sm);
|
|
1043
|
-
|
|
1044
|
-
var errorMsg = css12`
|
|
396
|
+
`,Tr=V`
|
|
1045
397
|
color: var(--brand-secondary-5);
|
|
1046
398
|
display: block;
|
|
1047
|
-
|
|
1048
|
-
var rangeInput = css12`
|
|
399
|
+
`,Ue=V`
|
|
1049
400
|
flex-direction: row;
|
|
1050
401
|
flex-wrap: wrap;
|
|
1051
402
|
|
|
@@ -1113,683 +464,18 @@ var rangeInput = css12`
|
|
|
1113
464
|
flex: 1 0 20%;
|
|
1114
465
|
padding: 10px;
|
|
1115
466
|
}
|
|
1116
|
-
`;
|
|
1117
|
-
|
|
1118
|
-
// src/components/Inputs/SelectInput.tsx
|
|
1119
|
-
var SelectInput = ({ field, form, meta, ...rawProps }) => {
|
|
1120
|
-
const { label, options, caption, ...passThroughProps } = rawProps;
|
|
1121
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1122
|
-
css: inputWrapper
|
|
1123
|
-
}, /* @__PURE__ */ jsx("label", {
|
|
1124
|
-
css: inputLabel
|
|
1125
|
-
}, /* @__PURE__ */ jsx("span", {
|
|
1126
|
-
css: inputText
|
|
1127
|
-
}, label), /* @__PURE__ */ jsx("select", {
|
|
1128
|
-
...field,
|
|
1129
|
-
...passThroughProps,
|
|
1130
|
-
css: selectInput
|
|
1131
|
-
}, options.map((o, index) => /* @__PURE__ */ jsx("option", {
|
|
1132
|
-
value: o.value,
|
|
1133
|
-
key: index
|
|
1134
|
-
}, o.text)))), caption ? /* @__PURE__ */ jsx("span", {
|
|
1135
|
-
css: inputCaption
|
|
1136
|
-
}, caption) : null, /* @__PURE__ */ jsx(ErrorMessage, {
|
|
1137
|
-
component: "div",
|
|
1138
|
-
css: errorMsg,
|
|
1139
|
-
name: field.name
|
|
1140
|
-
}));
|
|
1141
|
-
};
|
|
1142
|
-
|
|
1143
|
-
// src/components/Inputs/DependableSelectBox.tsx
|
|
1144
|
-
import { Field } from "formik";
|
|
1145
|
-
|
|
1146
|
-
// src/components/Inputs/SliderInput.tsx
|
|
1147
|
-
var SliderInput = ({ field, form, meta, ...rawProps }) => {
|
|
1148
|
-
var _a, _b;
|
|
1149
|
-
const { label, caption, min = 0, max = 100, step } = rawProps;
|
|
1150
|
-
return /* @__PURE__ */ jsx("div", null, /* @__PURE__ */ jsx("label", {
|
|
1151
|
-
css: [inputLabel, rangeInput]
|
|
1152
|
-
}, /* @__PURE__ */ jsx("span", {
|
|
1153
|
-
css: inputText
|
|
1154
|
-
}, label), /* @__PURE__ */ jsx("input", {
|
|
1155
|
-
type: "range",
|
|
1156
|
-
min,
|
|
1157
|
-
max,
|
|
1158
|
-
step,
|
|
1159
|
-
...field,
|
|
1160
|
-
value: (_a = field.value) != null ? _a : 0
|
|
1161
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
1162
|
-
className: "value-display"
|
|
1163
|
-
}, (_b = field.value) != null ? _b : 0)), /* @__PURE__ */ jsx("p", {
|
|
1164
|
-
css: inputCaption
|
|
1165
|
-
}, caption));
|
|
1166
|
-
};
|
|
1167
|
-
var SliderInput_default = SliderInput;
|
|
1168
|
-
|
|
1169
|
-
// src/components/Inputs/DependableSelectBox.tsx
|
|
1170
|
-
var DependableSelectBox = ({
|
|
1171
|
-
name,
|
|
1172
|
-
label,
|
|
1173
|
-
dimensionToOverride,
|
|
1174
|
-
isSubmitting
|
|
1175
|
-
}) => {
|
|
1176
|
-
const rangeProps = {
|
|
1177
|
-
max: 100,
|
|
1178
|
-
step: 20
|
|
1179
|
-
};
|
|
1180
|
-
if (dimensionToOverride) {
|
|
1181
|
-
rangeProps.max = dimensionToOverride.cap;
|
|
1182
|
-
rangeProps.step = dimensionToOverride.str;
|
|
1183
|
-
}
|
|
1184
|
-
return /* @__PURE__ */ jsx(Field, {
|
|
1185
|
-
component: SliderInput_default,
|
|
1186
|
-
label,
|
|
1187
|
-
caption: `Range: 0 - ${rangeProps.max} in increments of ${rangeProps.step}`,
|
|
1188
|
-
id: name,
|
|
1189
|
-
name,
|
|
1190
|
-
disabled: isSubmitting,
|
|
1191
|
-
...rangeProps
|
|
1192
|
-
});
|
|
1193
|
-
};
|
|
1194
|
-
var DependableSelectBox_default = DependableSelectBox;
|
|
1195
|
-
|
|
1196
|
-
// src/components/Form/Fieldset.tsx
|
|
1197
|
-
import { css as css13 } from "@emotion/react";
|
|
1198
|
-
var Fieldset = ({ children, ...props }) => {
|
|
1199
|
-
return /* @__PURE__ */ jsx("fieldset", {
|
|
1200
|
-
css: css13`
|
|
467
|
+
`;import{Caption as Rt,ErrorMessage as Vt}from"@uniformdev/design-system";var _e=({field:t,form:r,meta:n,...o})=>{var u,s;let{label:i,caption:a,min:l=0,max:p=100,step:m}=o;return e("div",null,e("label",{css:[Ne,Ue]},e("span",{css:Ze},i),e("input",{type:"range",min:l,max:p,step:m,...t,value:(u=t.value)!=null?u:0}),e("span",{className:"value-display"},(s=t.value)!=null?s:0)),a?e(Rt,null,a):null,r.touched[t.name]&&r.errors[t.name]?e(Vt,{message:r.errors[t.name]}):null)};import{css as Pt}from"@emotion/react";var P=({children:t,...r})=>e("fieldset",{css:Pt`
|
|
1201
468
|
border: none;
|
|
1202
469
|
padding: 0;
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
};
|
|
1207
|
-
|
|
1208
|
-
// src/components/Form/Legend.tsx
|
|
1209
|
-
import { css as css14 } from "@emotion/react";
|
|
1210
|
-
var Legend = ({ children }) => {
|
|
1211
|
-
return /* @__PURE__ */ jsx("legend", {
|
|
1212
|
-
css: css14`
|
|
470
|
+
& legend {
|
|
471
|
+
margin-bottom: var(--spacing-base);
|
|
472
|
+
}
|
|
473
|
+
`,...r},t);import{css as Ht}from"@emotion/react";var N=({children:t})=>e("legend",{css:Ht`
|
|
1213
474
|
font-size: var(--font-md);
|
|
1214
475
|
font-weight: var(--font-bold);
|
|
1215
476
|
border-bottom: 1px solid var(--gray-400);
|
|
1216
477
|
width: 100%;
|
|
1217
|
-
`
|
|
1218
|
-
}, children);
|
|
1219
|
-
};
|
|
1220
|
-
|
|
1221
|
-
// src/lib/computeOverrideEffects.ts
|
|
1222
|
-
import { Context, TransitionDataStore } from "@uniformdev/context";
|
|
1223
|
-
function computeOverrideEffects({ manifest, visitor, override }) {
|
|
1224
|
-
const contextCopy = new Context({
|
|
1225
|
-
manifest,
|
|
1226
|
-
transitionStore: new CopyTransitionDataStore({ initialData: visitor })
|
|
1227
|
-
});
|
|
1228
|
-
const currentScores = { ...contextCopy.scores };
|
|
1229
|
-
contextCopy.storage.updateData([override]);
|
|
1230
|
-
const newScores = { ...contextCopy.scores };
|
|
1231
|
-
const changes = { ...newScores };
|
|
1232
|
-
Object.entries(changes).forEach(([key, value]) => {
|
|
1233
|
-
const oldScore = currentScores[key];
|
|
1234
|
-
if (oldScore === value) {
|
|
1235
|
-
delete changes[key];
|
|
1236
|
-
}
|
|
1237
|
-
});
|
|
1238
|
-
return changes;
|
|
1239
|
-
}
|
|
1240
|
-
var CopyTransitionDataStore = class extends TransitionDataStore {
|
|
1241
|
-
async handleDelete() {
|
|
1242
|
-
}
|
|
1243
|
-
async handleUpdateData() {
|
|
1244
|
-
}
|
|
1245
|
-
};
|
|
1246
|
-
|
|
1247
|
-
// src/lib/applyOverrides.ts
|
|
1248
|
-
function applyScoreOverrides({
|
|
1249
|
-
scores,
|
|
1250
|
-
scoreOverrides
|
|
1251
|
-
}) {
|
|
1252
|
-
const commands = [];
|
|
1253
|
-
if (!scoreOverrides)
|
|
1254
|
-
return [];
|
|
1255
|
-
Object.entries(scoreOverrides).forEach(([dim, override]) => {
|
|
1256
|
-
var _a;
|
|
1257
|
-
const score = (_a = scores[dim]) != null ? _a : 0;
|
|
1258
|
-
if (score === override.override) {
|
|
1259
|
-
return;
|
|
1260
|
-
}
|
|
1261
|
-
const delta = override.override - score;
|
|
1262
|
-
commands.push({
|
|
1263
|
-
type: "modscoreS",
|
|
1264
|
-
data: { dimension: dim, delta }
|
|
1265
|
-
});
|
|
1266
|
-
});
|
|
1267
|
-
return commands;
|
|
1268
|
-
}
|
|
1269
|
-
function applyQuirkOverrides({
|
|
1270
|
-
quirks,
|
|
1271
|
-
quirkOverrides
|
|
1272
|
-
}) {
|
|
1273
|
-
const quirkVector = {};
|
|
1274
|
-
if (!quirkOverrides)
|
|
1275
|
-
return void 0;
|
|
1276
|
-
Object.entries(quirkOverrides).forEach(([quirk, override]) => {
|
|
1277
|
-
const quirkValue = quirks[quirk];
|
|
1278
|
-
if (quirkValue === override.override) {
|
|
1279
|
-
return;
|
|
1280
|
-
}
|
|
1281
|
-
quirkVector[quirk] = override.override;
|
|
1282
|
-
});
|
|
1283
|
-
return Object.keys(quirkVector).length > 0 ? quirkVector : void 0;
|
|
1284
|
-
}
|
|
1285
|
-
|
|
1286
|
-
// src/components/Personalization/AddOverride.tsx
|
|
1287
|
-
var overrideSettingsSchema = yup.object({
|
|
1288
|
-
dimension: yup.string(),
|
|
1289
|
-
score: yup.number()
|
|
1290
|
-
});
|
|
1291
|
-
var AddOverride = ({
|
|
1292
|
-
settings,
|
|
1293
|
-
saveSettings,
|
|
1294
|
-
state,
|
|
1295
|
-
actions,
|
|
1296
|
-
dimensionIndex: { index }
|
|
1297
|
-
}) => {
|
|
1298
|
-
var _a, _b;
|
|
1299
|
-
const routeParams = settings.route ? [...settings.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)] : [];
|
|
1300
|
-
const overriddenDimension = routeParams[0] ? routeParams[0][1] : "";
|
|
1301
|
-
if (!((_a = state.manifest.project.pz) == null ? void 0 : _a.sig)) {
|
|
1302
|
-
return /* @__PURE__ */ jsx("p", null, "Error, manifest is broken or there is no signal to override.");
|
|
1303
|
-
}
|
|
1304
|
-
const overridableDimensions = Object.entries(index).filter(([, value]) => value.type !== "Audience" && value.type !== "Intent").map(([key, value]) => {
|
|
1305
|
-
const type = value.type ? `${value.type}: ` : "";
|
|
1306
|
-
const category = value.category ? `${value.category} - ` : "";
|
|
1307
|
-
const text = `${type}${category}${value.name}`;
|
|
1308
|
-
return {
|
|
1309
|
-
value: key,
|
|
1310
|
-
text
|
|
1311
|
-
};
|
|
1312
|
-
});
|
|
1313
|
-
overridableDimensions.unshift({
|
|
1314
|
-
value: "_none",
|
|
1315
|
-
text: "Choose dimension to override"
|
|
1316
|
-
});
|
|
1317
|
-
return /* @__PURE__ */ jsx(Formik, {
|
|
1318
|
-
initialValues: {
|
|
1319
|
-
dimension: overriddenDimension,
|
|
1320
|
-
score: (_b = state.scores[overriddenDimension]) != null ? _b : 0
|
|
1321
|
-
},
|
|
1322
|
-
validationSchema: overrideSettingsSchema,
|
|
1323
|
-
enableReinitialize: true,
|
|
1324
|
-
onSubmit: async (values) => {
|
|
1325
|
-
var _a2, _b2, _c, _d, _e, _f;
|
|
1326
|
-
const cap = (_b2 = (_a2 = index[values.dimension]) == null ? void 0 : _a2.cap) != null ? _b2 : 0;
|
|
1327
|
-
const cappedOverrideScore = Math.min(values.score, cap);
|
|
1328
|
-
const newSettings = {
|
|
1329
|
-
...settings,
|
|
1330
|
-
scoreOverrides: {
|
|
1331
|
-
...settings.scoreOverrides,
|
|
1332
|
-
[values.dimension]: {
|
|
1333
|
-
initial: (_f = (_e = (_d = (_c = settings.scoreOverrides) == null ? void 0 : _c[values.dimension]) == null ? void 0 : _d.initial) != null ? _e : state.scores[values.dimension]) != null ? _f : 0,
|
|
1334
|
-
override: cappedOverrideScore
|
|
1335
|
-
}
|
|
1336
|
-
},
|
|
1337
|
-
route: "/overrides"
|
|
1338
|
-
};
|
|
1339
|
-
await saveSettings(newSettings);
|
|
1340
|
-
const applyCommands = applyScoreOverrides({
|
|
1341
|
-
scores: state.scores,
|
|
1342
|
-
scoreOverrides: newSettings.scoreOverrides
|
|
1343
|
-
});
|
|
1344
|
-
actions.rawUpdate(applyCommands);
|
|
1345
|
-
}
|
|
1346
|
-
}, ({ dirty, isValid, isSubmitting, values }) => {
|
|
1347
|
-
var _a2;
|
|
1348
|
-
const overrideEffects = computeOverrideEffects({
|
|
1349
|
-
manifest: state.manifest,
|
|
1350
|
-
visitor: state.data,
|
|
1351
|
-
override: {
|
|
1352
|
-
type: "modscore",
|
|
1353
|
-
data: {
|
|
1354
|
-
dimension: values.dimension,
|
|
1355
|
-
delta: values.score - ((_a2 = state.scores[values.dimension]) != null ? _a2 : 0)
|
|
1356
|
-
}
|
|
1357
|
-
}
|
|
1358
|
-
});
|
|
1359
|
-
const preemptiveOverrides = Object.entries(state.scores).reduce((acc, [key, value]) => {
|
|
1360
|
-
acc[key] = {
|
|
1361
|
-
initial: value,
|
|
1362
|
-
override: value
|
|
1363
|
-
};
|
|
1364
|
-
return acc;
|
|
1365
|
-
}, {});
|
|
1366
|
-
const hasScoreEffects = values.score && Object.keys(overrideEffects).length > 0;
|
|
1367
|
-
return /* @__PURE__ */ jsx(Form, {
|
|
1368
|
-
css: styles.page
|
|
1369
|
-
}, /* @__PURE__ */ jsx("h1", {
|
|
1370
|
-
css: styles.title
|
|
1371
|
-
}, "Override Dimension"), /* @__PURE__ */ jsx(Field2, {
|
|
1372
|
-
component: SelectInput,
|
|
1373
|
-
label: "Dimension",
|
|
1374
|
-
id: "dimension",
|
|
1375
|
-
name: "dimension",
|
|
1376
|
-
options: overridableDimensions,
|
|
1377
|
-
disabled: isSubmitting
|
|
1378
|
-
}), /* @__PURE__ */ jsx("p", {
|
|
1379
|
-
css: styles.text
|
|
1380
|
-
}, /* @__PURE__ */ jsx("small", null, "Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly.")), values.dimension ? /* @__PURE__ */ jsx(DependableSelectBox_default, {
|
|
1381
|
-
name: "score",
|
|
1382
|
-
label: "Score",
|
|
1383
|
-
dimensionToOverride: index[values.dimension],
|
|
1384
|
-
isSubmitting
|
|
1385
|
-
}) : null, /* @__PURE__ */ jsx(Fieldset, {
|
|
1386
|
-
disabled: isSubmitting,
|
|
1387
|
-
css: { marginBottom: "2rem" }
|
|
1388
|
-
}, hasScoreEffects ? /* @__PURE__ */ jsx(Accordion, null, /* @__PURE__ */ jsx(AccordionItem, {
|
|
1389
|
-
title: `Impacted Dimensions (${Object.keys(overrideEffects).length})`
|
|
1390
|
-
}, /* @__PURE__ */ jsx(DimensionsTable_default, {
|
|
1391
|
-
preemptiveOverrides,
|
|
1392
|
-
dimensionIndex: index,
|
|
1393
|
-
dimensions: overrideEffects,
|
|
1394
|
-
disableEditOverride: true
|
|
1395
|
-
}))) : null, dirty ? /* @__PURE__ */ jsx(Button, {
|
|
1396
|
-
type: "submit",
|
|
1397
|
-
css: styles.submitButton,
|
|
1398
|
-
disabled: !isValid
|
|
1399
|
-
}, "Save") : null, /* @__PURE__ */ jsx(NavigationLink_default, {
|
|
1400
|
-
route: "/overrides",
|
|
1401
|
-
css: styles.cancelButton
|
|
1402
|
-
}, "Cancel")));
|
|
1403
|
-
});
|
|
1404
|
-
};
|
|
1405
|
-
|
|
1406
|
-
// src/components/Personalization/Quirks.tsx
|
|
1407
|
-
import { useState as useState3 } from "react";
|
|
1408
|
-
|
|
1409
|
-
// src/components/Inputs/EditableText.tsx
|
|
1410
|
-
import { useState as useState2, useEffect } from "react";
|
|
1411
|
-
var EditableText = ({ name, value, submit }) => {
|
|
1412
|
-
const [inputValue, setInputValue] = useState2(value != null ? value : "");
|
|
1413
|
-
useEffect(() => {
|
|
1414
|
-
setInputValue(value != null ? value : "");
|
|
1415
|
-
}, [value]);
|
|
1416
|
-
const onChange = (e) => {
|
|
1417
|
-
setInputValue(e.target.value);
|
|
1418
|
-
};
|
|
1419
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1420
|
-
css: { display: "flex", gap: "var(--spacing-sm)" }
|
|
1421
|
-
}, /* @__PURE__ */ jsx("input", {
|
|
1422
|
-
type: "text",
|
|
1423
|
-
css: [textInput, editableInput],
|
|
1424
|
-
name,
|
|
1425
|
-
value: inputValue,
|
|
1426
|
-
onChange
|
|
1427
|
-
}), /* @__PURE__ */ jsx(Button, {
|
|
1428
|
-
buttonType: "primary",
|
|
1429
|
-
onClick: () => submit(name, inputValue != null ? inputValue : "")
|
|
1430
|
-
}, "Save"));
|
|
1431
|
-
};
|
|
1432
|
-
var EditableText_default = EditableText;
|
|
1433
|
-
|
|
1434
|
-
// src/components/Inputs/EditableSelectBox.tsx
|
|
1435
|
-
var EditableSelectBox = ({ name, value, submit, options }) => {
|
|
1436
|
-
const onChange = (e) => submit(e.target.name, e.target.value);
|
|
1437
|
-
return /* @__PURE__ */ jsx("select", {
|
|
1438
|
-
name,
|
|
1439
|
-
defaultValue: value,
|
|
1440
|
-
onChange,
|
|
1441
|
-
css: [selectInput, editableInput]
|
|
1442
|
-
}, /* @__PURE__ */ jsx("option", {
|
|
1443
|
-
key: "_none",
|
|
1444
|
-
value: "_none"
|
|
1445
|
-
}, "None"), (options != null ? options : []).map((option) => /* @__PURE__ */ jsx("option", {
|
|
1446
|
-
key: option.value,
|
|
1447
|
-
value: option.value
|
|
1448
|
-
}, option.name)));
|
|
1449
|
-
};
|
|
1450
|
-
var EditableSelectBox_default = EditableSelectBox;
|
|
1451
|
-
|
|
1452
|
-
// src/components/Personalization/Quirks.tsx
|
|
1453
|
-
var Quirks = ({ ...props }) => {
|
|
1454
|
-
const {
|
|
1455
|
-
state: {
|
|
1456
|
-
data: { quirks }
|
|
1457
|
-
},
|
|
1458
|
-
quirksIndex: { index: quirksIndex },
|
|
1459
|
-
settings,
|
|
1460
|
-
saveSettings,
|
|
1461
|
-
actions
|
|
1462
|
-
} = props;
|
|
1463
|
-
const [editable, setEditable] = useState3("");
|
|
1464
|
-
let editableQuirkMetaData;
|
|
1465
|
-
if (editable) {
|
|
1466
|
-
editableQuirkMetaData = quirksIndex[editable];
|
|
1467
|
-
}
|
|
1468
|
-
const submitOverride = async (name, value) => {
|
|
1469
|
-
var _a, _b, _c;
|
|
1470
|
-
setEditable("");
|
|
1471
|
-
const newSettings = {
|
|
1472
|
-
...settings,
|
|
1473
|
-
quirkOverrides: {
|
|
1474
|
-
...settings.quirkOverrides,
|
|
1475
|
-
[name]: { initial: (_c = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial) != null ? _c : quirks[name], override: value }
|
|
1476
|
-
}
|
|
1477
|
-
};
|
|
1478
|
-
await saveSettings(newSettings);
|
|
1479
|
-
const quirkOverrides = applyQuirkOverrides({
|
|
1480
|
-
quirks,
|
|
1481
|
-
quirkOverrides: newSettings.quirkOverrides
|
|
1482
|
-
});
|
|
1483
|
-
actions.update({ quirks: quirkOverrides });
|
|
1484
|
-
};
|
|
1485
|
-
return /* @__PURE__ */ jsx(React.Fragment, null, /* @__PURE__ */ jsx("article", {
|
|
1486
|
-
css: styles.page
|
|
1487
|
-
}, /* @__PURE__ */ jsx("h1", {
|
|
1488
|
-
css: styles.title
|
|
1489
|
-
}, "Quirks"), /* @__PURE__ */ jsx("p", {
|
|
1490
|
-
css: styles.text
|
|
1491
|
-
}, "Keys defined in Uniform and their current, programmatically defined values for this visit."), Object.keys(quirksIndex).length ? /* @__PURE__ */ jsx(Table, null, /* @__PURE__ */ jsx(THead, null, /* @__PURE__ */ jsx(TRow, null, /* @__PURE__ */ jsx(THeading, null, "Key"), /* @__PURE__ */ jsx(THeading, null, "Value"), /* @__PURE__ */ jsx(TData, null, ""))), /* @__PURE__ */ jsx(TBody, null, Object.values(quirksIndex).map(({ name, value, id }) => {
|
|
1492
|
-
var _a, _b, _c;
|
|
1493
|
-
const initialValue = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial;
|
|
1494
|
-
return /* @__PURE__ */ jsx(TRow, {
|
|
1495
|
-
key: id,
|
|
1496
|
-
border: "bottom"
|
|
1497
|
-
}, /* @__PURE__ */ jsx(TData, null, /* @__PURE__ */ jsx("strong", null, name)), /* @__PURE__ */ jsx(TData, null, editable !== id ? /* @__PURE__ */ jsx("div", {
|
|
1498
|
-
onClick: () => {
|
|
1499
|
-
setEditable(id);
|
|
1500
|
-
}
|
|
1501
|
-
}, initialValue ? /* @__PURE__ */ jsx("div", null, /* @__PURE__ */ jsx("s", null, initialValue)) : null, value) : null, editable === id && editableQuirkMetaData && /* @__PURE__ */ jsx(React.Fragment, null, editableQuirkMetaData.options ? /* @__PURE__ */ jsx(EditableSelectBox_default, {
|
|
1502
|
-
name: id,
|
|
1503
|
-
value,
|
|
1504
|
-
submit: submitOverride,
|
|
1505
|
-
options: editableQuirkMetaData.options
|
|
1506
|
-
}) : /* @__PURE__ */ jsx(EditableText_default, {
|
|
1507
|
-
name: id,
|
|
1508
|
-
value,
|
|
1509
|
-
submit: submitOverride
|
|
1510
|
-
}))), /* @__PURE__ */ jsx(TData, null, editable ? null : ((_c = settings.quirkOverrides) == null ? void 0 : _c[id]) ? /* @__PURE__ */ jsx(LinkButton, {
|
|
1511
|
-
onClick: () => {
|
|
1512
|
-
deleteQuirkOverride({ quirk: id, settings, saveSettings, actions });
|
|
1513
|
-
}
|
|
1514
|
-
}, /* @__PURE__ */ jsx("small", null, "Clear Override")) : /* @__PURE__ */ jsx(LinkButton, {
|
|
1515
|
-
onClick: () => {
|
|
1516
|
-
setEditable(id);
|
|
1517
|
-
}
|
|
1518
|
-
}, /* @__PURE__ */ jsx("small", null, "Override"))));
|
|
1519
|
-
}))) : /* @__PURE__ */ jsx(NoActiveDimensions, {
|
|
1520
|
-
title: "No quirks configured",
|
|
1521
|
-
text: "There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."
|
|
1522
|
-
})));
|
|
1523
|
-
};
|
|
1524
|
-
|
|
1525
|
-
// src/components/Personalization/Settings.tsx
|
|
1526
|
-
import { Field as Field3, Form as Form2, Formik as Formik2 } from "formik";
|
|
1527
|
-
|
|
1528
|
-
// src/components/Inputs/InputText.tsx
|
|
1529
|
-
import { ErrorMessage as ErrorMessage2 } from "formik";
|
|
1530
|
-
var InputText = ({ field, form, meta, ...rawProps }) => {
|
|
1531
|
-
const { label, caption, ...passThroughProps } = rawProps;
|
|
1532
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1533
|
-
css: inputWrapper
|
|
1534
|
-
}, /* @__PURE__ */ jsx("label", {
|
|
1535
|
-
css: inputLabel
|
|
1536
|
-
}, /* @__PURE__ */ jsx("span", {
|
|
1537
|
-
css: inputText
|
|
1538
|
-
}, label), /* @__PURE__ */ jsx("input", {
|
|
1539
|
-
type: "text",
|
|
1540
|
-
css: textInput,
|
|
1541
|
-
...field,
|
|
1542
|
-
...passThroughProps
|
|
1543
|
-
})), caption ? /* @__PURE__ */ jsx("span", {
|
|
1544
|
-
css: inputCaption
|
|
1545
|
-
}, caption) : null, /* @__PURE__ */ jsx(ErrorMessage2, {
|
|
1546
|
-
component: "div",
|
|
1547
|
-
css: errorMsg,
|
|
1548
|
-
name: field.name
|
|
1549
|
-
}));
|
|
1550
|
-
};
|
|
1551
|
-
|
|
1552
|
-
// src/components/Personalization/Settings.tsx
|
|
1553
|
-
import * as yup2 from "yup";
|
|
1554
|
-
var editableSettingsSchema = yup2.object({
|
|
1555
|
-
apiKey: yup2.string().matches(/^uf.+$/, "API keys start with `uf`, double check your API key"),
|
|
1556
|
-
apiHost: yup2.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/, "API host must be a Uniform domain."),
|
|
1557
|
-
logging: yup2.boolean(),
|
|
1558
|
-
projectId: yup2.string().uuid(),
|
|
1559
|
-
consentMode: yup2.boolean()
|
|
1560
|
-
});
|
|
1561
|
-
var Settings = ({
|
|
1562
|
-
settings,
|
|
1563
|
-
saveSettings,
|
|
1564
|
-
actions,
|
|
1565
|
-
state: { data },
|
|
1566
|
-
dimensionIndex: { error, loading }
|
|
1567
|
-
}) => {
|
|
1568
|
-
var _a, _b, _c;
|
|
1569
|
-
return /* @__PURE__ */ jsx(Formik2, {
|
|
1570
|
-
initialValues: {
|
|
1571
|
-
apiHost: (_a = settings.apiHost) != null ? _a : "",
|
|
1572
|
-
apiKey: (_b = settings.apiKey) != null ? _b : "",
|
|
1573
|
-
projectId: (_c = settings.projectId) != null ? _c : "",
|
|
1574
|
-
consentMode: !!data.consent,
|
|
1575
|
-
logging: settings.logLevel !== "none" && Boolean(settings.logLevel)
|
|
1576
|
-
},
|
|
1577
|
-
validationSchema: editableSettingsSchema,
|
|
1578
|
-
enableReinitialize: true,
|
|
1579
|
-
onSubmit: (values) => {
|
|
1580
|
-
saveSettings({
|
|
1581
|
-
...settings,
|
|
1582
|
-
apiHost: values.apiHost,
|
|
1583
|
-
apiKey: values.apiKey,
|
|
1584
|
-
projectId: values.projectId,
|
|
1585
|
-
logLevel: values.logging ? "debug" : "none",
|
|
1586
|
-
consentMode: values.consentMode
|
|
1587
|
-
});
|
|
1588
|
-
actions.rawUpdate([{ type: "consent", data: values.consentMode }]);
|
|
1589
|
-
}
|
|
1590
|
-
}, ({ dirty, isValid, isSubmitting }) => /* @__PURE__ */ jsx(Form2, {
|
|
1591
|
-
css: styles.page
|
|
1592
|
-
}, /* @__PURE__ */ jsx("h1", {
|
|
1593
|
-
css: styles.title
|
|
1594
|
-
}, "Settings"), /* @__PURE__ */ jsx(Fieldset, {
|
|
1595
|
-
disabled: isSubmitting
|
|
1596
|
-
}, /* @__PURE__ */ jsx(Legend, null, "Data Connection"), !loading && error ? /* @__PURE__ */ jsx("p", {
|
|
1597
|
-
css: styles.error
|
|
1598
|
-
}, "Unable to fetch data from Uniform", /* @__PURE__ */ jsx("br", null), /* @__PURE__ */ jsx("em", null, error.message)) : null, /* @__PURE__ */ jsx("p", {
|
|
1599
|
-
css: styles.text
|
|
1600
|
-
}, /* @__PURE__ */ 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.")), /* @__PURE__ */ jsx(Field3, {
|
|
1601
|
-
component: InputText,
|
|
1602
|
-
label: "Uniform API key",
|
|
1603
|
-
caption: "Generate an API key in your Uniform team settings. Grant only Context: Read Drafts permission.",
|
|
1604
|
-
id: "api-key",
|
|
1605
|
-
name: "apiKey",
|
|
1606
|
-
autoComplete: "off"
|
|
1607
|
-
}), /* @__PURE__ */ jsx(Field3, {
|
|
1608
|
-
component: InputText,
|
|
1609
|
-
label: "Uniform Project ID",
|
|
1610
|
-
caption: "Available to copy after generating an API key",
|
|
1611
|
-
id: "project-id",
|
|
1612
|
-
name: "projectId",
|
|
1613
|
-
autoComplete: "off"
|
|
1614
|
-
}), /* @__PURE__ */ jsx(Accordion, null, /* @__PURE__ */ jsx(AccordionItem, {
|
|
1615
|
-
title: "Advanced"
|
|
1616
|
-
}, /* @__PURE__ */ jsx(Field3, {
|
|
1617
|
-
component: InputText,
|
|
1618
|
-
label: "Alternative API Host",
|
|
1619
|
-
caption: "Use a non-standard Uniform API endpoint. Most people will not not need this option.",
|
|
1620
|
-
id: "api-host",
|
|
1621
|
-
name: "apiHost",
|
|
1622
|
-
autoComplete: "off"
|
|
1623
|
-
}))), /* @__PURE__ */ jsx(Fieldset, null, /* @__PURE__ */ jsx(Legend, null, "Storage Consent"), /* @__PURE__ */ jsx(Field3, {
|
|
1624
|
-
component: FormikSwitchInput,
|
|
1625
|
-
label: "Store visitor data",
|
|
1626
|
-
id: "consent-mode",
|
|
1627
|
-
name: "consentMode"
|
|
1628
|
-
}), /* @__PURE__ */ jsx("p", null, /* @__PURE__ */ jsx("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."))), /* @__PURE__ */ jsx(Fieldset, null, /* @__PURE__ */ jsx(Legend, null, "Logging"), /* @__PURE__ */ jsx(Field3, {
|
|
1629
|
-
component: FormikSwitchInput,
|
|
1630
|
-
label: "Write Uniform Context diagnostic logs to browser console",
|
|
1631
|
-
id: "logging",
|
|
1632
|
-
name: "logging"
|
|
1633
|
-
})), dirty ? /* @__PURE__ */ jsx(Button, {
|
|
1634
|
-
type: "submit",
|
|
1635
|
-
css: styles.submitButton,
|
|
1636
|
-
disabled: !isValid
|
|
1637
|
-
}, "Save") : null)));
|
|
1638
|
-
};
|
|
1639
|
-
|
|
1640
|
-
// src/components/CallToAction/ConnectApiKey.tsx
|
|
1641
|
-
var ConnectApiKey = ({ settings, saveSettings }) => {
|
|
1642
|
-
const handleRedirect = () => {
|
|
1643
|
-
saveSettings({ ...settings, route: "/settings" });
|
|
1644
|
-
};
|
|
1645
|
-
const dismissPrompt = () => {
|
|
1646
|
-
saveSettings({ ...settings, ignoreApiKeyPrompt: true });
|
|
1647
|
-
};
|
|
1648
|
-
const missingApiKey = !(settings == null ? void 0 : settings.apiKey);
|
|
1649
|
-
return !settings.ignoreApiKeyPrompt && missingApiKey ? /* @__PURE__ */ jsx("div", {
|
|
1650
|
-
css: [cta, ctaWithIcon]
|
|
1651
|
-
}, /* @__PURE__ */ jsx("h2", {
|
|
1652
|
-
css: ctaTitle
|
|
1653
|
-
}, "Connect this site"), /* @__PURE__ */ jsx("p", {
|
|
1654
|
-
css: ctaText
|
|
1655
|
-
}, "Add a Uniform API key to get better data."), /* @__PURE__ */ jsx("div", {
|
|
1656
|
-
css: ctaBtnGroup
|
|
1657
|
-
}, /* @__PURE__ */ jsx(Button, {
|
|
1658
|
-
buttonType: "secondary",
|
|
1659
|
-
onClick: handleRedirect
|
|
1660
|
-
}, "Connect this site"), /* @__PURE__ */ jsx(Button, {
|
|
1661
|
-
buttonType: "ghost",
|
|
1662
|
-
onClick: dismissPrompt
|
|
1663
|
-
}, "Skip for now")), /* @__PURE__ */ jsx("button", {
|
|
1664
|
-
type: "button",
|
|
1665
|
-
css: ctaClose,
|
|
1666
|
-
title: "close",
|
|
1667
|
-
onClick: dismissPrompt
|
|
1668
|
-
}, /* @__PURE__ */ jsx("span", {
|
|
1669
|
-
hidden: true
|
|
1670
|
-
}, "Close"))) : null;
|
|
1671
|
-
};
|
|
1672
|
-
|
|
1673
|
-
// src/hooks/useDimensionIndex.ts
|
|
1674
|
-
import {
|
|
1675
|
-
computeDimensionDefinitionDisplayData,
|
|
1676
|
-
computeDimensionDisplayData,
|
|
1677
|
-
DimensionClient
|
|
1678
|
-
} from "@uniformdev/context/api";
|
|
1679
|
-
import { useAsync } from "react-use";
|
|
1680
|
-
import * as React6 from "react";
|
|
1681
|
-
function useDimensionIndex({ apiHost, apiKey, projectId }, manifest) {
|
|
1682
|
-
const { loading, error, value } = useAsync(async () => {
|
|
1683
|
-
if (!apiKey || !projectId) {
|
|
1684
|
-
return manifestData;
|
|
1685
|
-
}
|
|
1686
|
-
const client = new DimensionClient({
|
|
1687
|
-
projectId,
|
|
1688
|
-
apiKey,
|
|
1689
|
-
apiHost: apiHost ? apiHost : void 0
|
|
1690
|
-
});
|
|
1691
|
-
const dimensions = (await client.get()).dimensions;
|
|
1692
|
-
const result = {};
|
|
1693
|
-
dimensions.map((dimension) => {
|
|
1694
|
-
var _a, _b, _c, _d;
|
|
1695
|
-
result[dimension.dim] = {
|
|
1696
|
-
...computeDimensionDefinitionDisplayData(dimension),
|
|
1697
|
-
cap: dimension.cap,
|
|
1698
|
-
str: 10
|
|
1699
|
-
};
|
|
1700
|
-
if (result[dimension.dim].type === "Enrichment") {
|
|
1701
|
-
const enrId = dimension.dim.split("_")[0];
|
|
1702
|
-
result[dimension.dim].cap = (_d = (_c = (_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.enr) == null ? void 0 : _b[enrId]) == null ? void 0 : _c.cap) != null ? _d : 100;
|
|
1703
|
-
}
|
|
1704
|
-
});
|
|
1705
|
-
return result;
|
|
1706
|
-
}, [apiHost, apiKey, projectId]);
|
|
1707
|
-
const manifestData = React6.useMemo(() => {
|
|
1708
|
-
var _a, _b, _c, _d;
|
|
1709
|
-
const data = {};
|
|
1710
|
-
if (!manifest) {
|
|
1711
|
-
return data;
|
|
1712
|
-
}
|
|
1713
|
-
Object.entries((_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.sig) != null ? _b : {}).map(([dimensionId, dimension]) => {
|
|
1714
|
-
const dim = computeDimensionDisplayData(dimensionId, manifest);
|
|
1715
|
-
if (dim) {
|
|
1716
|
-
data[dimensionId] = { ...dimension, ...dim };
|
|
1717
|
-
}
|
|
1718
|
-
});
|
|
1719
|
-
Object.entries((_d = (_c = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _c.enr) != null ? _d : {}).map(([dimensionId, enr]) => {
|
|
1720
|
-
var _a2;
|
|
1721
|
-
const dim = computeDimensionDisplayData(dimensionId, manifest);
|
|
1722
|
-
const signal = { cap: (_a2 = enr.cap) != null ? _a2 : 100, str: 10 };
|
|
1723
|
-
if (dim) {
|
|
1724
|
-
data[dimensionId] = { ...dim, cap: signal.cap, str: signal.str };
|
|
1725
|
-
}
|
|
1726
|
-
});
|
|
1727
|
-
if (value) {
|
|
1728
|
-
Object.entries(value).map(([dimensionId, dimension]) => {
|
|
1729
|
-
data[dimensionId] = {
|
|
1730
|
-
...data[dimensionId],
|
|
1731
|
-
...dimension
|
|
1732
|
-
};
|
|
1733
|
-
});
|
|
1734
|
-
}
|
|
1735
|
-
return data;
|
|
1736
|
-
}, [manifest, value]);
|
|
1737
|
-
return {
|
|
1738
|
-
loading,
|
|
1739
|
-
error,
|
|
1740
|
-
index: manifestData
|
|
1741
|
-
};
|
|
1742
|
-
}
|
|
1743
|
-
|
|
1744
|
-
// src/hooks/useQuirkIndex.ts
|
|
1745
|
-
import { useMemo as useMemo3 } from "react";
|
|
1746
|
-
import { QuirkClient } from "@uniformdev/context/api";
|
|
1747
|
-
import { useAsync as useAsync2 } from "react-use";
|
|
1748
|
-
function useQuirkIndex({ apiHost, apiKey, projectId }, quirksData) {
|
|
1749
|
-
const { loading, error, value } = useAsync2(async () => {
|
|
1750
|
-
if (!apiKey || !projectId) {
|
|
1751
|
-
return {};
|
|
1752
|
-
}
|
|
1753
|
-
const client = new QuirkClient({
|
|
1754
|
-
projectId,
|
|
1755
|
-
apiKey,
|
|
1756
|
-
apiHost: apiHost ? apiHost : void 0
|
|
1757
|
-
});
|
|
1758
|
-
const quirksResponse = await client.get();
|
|
1759
|
-
const quirksIndexData = {};
|
|
1760
|
-
quirksResponse.quirks.map((quirkData) => {
|
|
1761
|
-
quirksIndexData[quirkData.id] = { ...quirkData, value: quirksData[quirkData.id] };
|
|
1762
|
-
});
|
|
1763
|
-
return quirksIndexData;
|
|
1764
|
-
}, [apiHost, apiKey, projectId]);
|
|
1765
|
-
const contextStateQuirkData = useMemo3(() => {
|
|
1766
|
-
const data = {};
|
|
1767
|
-
Object.entries(quirksData).map(([quirkId, queryrValue]) => data[quirkId] = {
|
|
1768
|
-
value: queryrValue,
|
|
1769
|
-
id: quirkId,
|
|
1770
|
-
name: quirkId
|
|
1771
|
-
});
|
|
1772
|
-
if (value) {
|
|
1773
|
-
Object.entries(value).map(([quirkId, quirkValue]) => data[quirkId] = {
|
|
1774
|
-
...quirkValue,
|
|
1775
|
-
value: quirksData[quirkId]
|
|
1776
|
-
});
|
|
1777
|
-
}
|
|
1778
|
-
return data;
|
|
1779
|
-
}, [quirksData, value]);
|
|
1780
|
-
return {
|
|
1781
|
-
loading,
|
|
1782
|
-
error,
|
|
1783
|
-
index: contextStateQuirkData
|
|
1784
|
-
};
|
|
1785
|
-
}
|
|
1786
|
-
|
|
1787
|
-
// src/components/ContextDevTools.tsx
|
|
1788
|
-
import { css as css15 } from "@emotion/react";
|
|
1789
|
-
|
|
1790
|
-
// src/styles/Theme.tsx
|
|
1791
|
-
function Theme() {
|
|
1792
|
-
return /* @__PURE__ */ jsx("style", null, `
|
|
478
|
+
`},t);import{Context as Mt,TransitionDataStore as At}from"@uniformdev/context";function Ge({manifest:t,visitor:r,override:n}){let o=new Mt({manifest:t,transitionStore:new le({initialData:r})}),i={...o.scores};o.storage.updateData([n]);let l={...{...o.scores}};return Object.entries(l).forEach(([p,m])=>{i[p]===m&&delete l[p]}),l}var le=class extends At{async handleDelete(){}async handleUpdateData(){}};function Z({scores:t,scoreOverrides:r}){let n=[];return r?(Object.entries(r).forEach(([o,i])=>{var p;let a=(p=t[o])!=null?p:0;if(a===i.override)return;let l=i.override-a;n.push({type:"modscoreS",data:{dimension:o,delta:l}})}),n):[]}function ie({quirks:t,quirkOverrides:r}){let n={};if(!!r)return Object.entries(r).forEach(([o,i])=>{t[o]!==i.override&&(n[o]=i.override)}),Object.keys(n).length>0?n:void 0}import{Button as Qt}from"@uniformdev/design-system";var pe=t=>({field:r,form:n,meta:o,...i})=>e(t,{...i,...r,errorMessage:n.errors[r.name]});import{Input as Et,InputSelect as zt}from"@uniformdev/design-system";var se=pe(Et),$e=pe(zt);var qt=z.object({dimension:z.string(),score:z.number()}),me=({settings:t,saveSettings:r,state:n,actions:o,dimensionIndex:{index:i}})=>{var m,u;let a=t.route?[...t.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)]:[],l=a[0]?a[0][1]:"";if(!((m=n.manifest.project.pz)!=null&&m.sig))return e("p",null,"Error, manifest is broken or there is no signal to override.");let p=Object.entries(i).filter(([,s])=>s.type!=="Audience"&&s.type!=="Intent").map(([s,c])=>{let d=c.type?`${c.type}: `:"",v=c.category?`${c.category} - `:"",h=`${d}${v}${c.name}`;return{value:s,label:h}});return p.unshift({value:"",label:"Choose dimension to override"}),e(Bt,{initialValues:{dimension:l,score:(u=n.scores[l])!=null?u:0},validate:s=>{let c={};return(s.score===n.scores[s.dimension]||s.score===0&&!n.scores[l])&&(c.score="You have to modify current score value"),c},validationSchema:qt,enableReinitialize:!0,validateOnChange:!1,validateOnBlur:!1,onSubmit:async s=>{var C,w,k,S,F,ve;let c=(w=(C=i[s.dimension])==null?void 0:C.cap)!=null?w:0,d=Math.min(s.score,c),v={...t,scoreOverrides:{...t.scoreOverrides,[s.dimension]:{initial:(ve=(F=(S=(k=t.scoreOverrides)==null?void 0:k[s.dimension])==null?void 0:S.initial)!=null?F:n.scores[s.dimension])!=null?ve:0,override:d}},route:"/overrides"};await r(v);let h=Z({scores:n.scores,scoreOverrides:v.scoreOverrides});o.rawUpdate(h)}},({isSubmitting:s,values:c})=>{var w;let d=Ge({manifest:n.manifest,visitor:n.data,override:{type:"modscore",data:{dimension:c.dimension,delta:c.score-((w=n.scores[c.dimension])!=null?w:0)}}}),v=Object.entries(n.scores).reduce((k,[S,F])=>(k[S]={initial:F,override:F},k),{}),h={max:100,step:50};i[c.dimension]&&(h.max=i[c.dimension].cap,h.step=i[c.dimension].str);let C=c.score&&Object.keys(d).length>0;return e(Ft,{css:b.page},e("h1",{css:b.title},"Override Dimension"),e(Ke,{component:$e,label:"Dimension",id:"dimension",name:"dimension",options:p,disabled:s}),e("p",{css:b.text},e("small",null,"Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly.")),c.dimension?e(Ke,{component:_e,name:"score",label:"Score",disabled:s,caption:`Range: 0 - ${h.max} in increments of ${h.step}`}):null,e(P,{disabled:s,css:{marginBottom:"2rem"}},C?e($,null,e(K,{title:`Impacted Dimensions (${Object.keys(d).length})`},e(R,{preemptiveOverrides:v,dimensionIndex:i,dimensions:d,disableEditOverride:!0}))):null,e(Qt,{type:"submit",css:b.submitButton,disabled:s},"Save"),e(H,{route:"/overrides",css:b.cancelButton},"Cancel")))})};import{useState as $t}from"react";import{useState as Nt,useEffect as Zt}from"react";import{Button as Ut,Input as _t}from"@uniformdev/design-system";var Gt=({name:t,value:r,submit:n})=>{let[o,i]=Nt(r!=null?r:"");return Zt(()=>{i(r!=null?r:"")},[r]),e("div",{css:{display:"flex",gap:"var(--spacing-sm)"}},e(_t,{type:"text",css:[qe],name:t,value:o,onChange:p=>{i(p.target.value)}}),e(Ut,{buttonType:"primary",disabled:o===r,size:"sm",onClick:()=>n(t,o!=null?o:"")},"Save"))},We=Gt;import{Button as Ye,InputSelect as Kt}from"@uniformdev/design-system";var Je=({...t})=>{let{state:{data:{quirks:r}},quirksIndex:{index:n},settings:o,saveSettings:i,actions:a}=t,[l,p]=$t(""),m;l&&(m=n[l]);let u=async(s,c)=>{var h,C,w;p("");let d={...o,quirkOverrides:{...o.quirkOverrides,[s]:{initial:(w=(C=(h=o.quirkOverrides)==null?void 0:h[s])==null?void 0:C.initial)!=null?w:r[s],override:c}}};await i(d);let v=ie({quirks:r,quirkOverrides:d.quirkOverrides});await a.update({quirks:v})};return e(y.Fragment,null,e("article",{css:[b.page,b.quirks]},e("h1",{css:b.title},"Quirks"),e("p",{css:b.text},"Keys defined in Uniform and their current, programmatically defined values for this visit."),Object.keys(n).length?e(j,null,e(Se,null,e(B,null,e(te,{width:"30%"},"Key"),e(te,{width:"50%"},"Value"),e(te,{width:"20%"},""))),e(ee,null,Object.values(n).map(({name:s,value:c,id:d})=>{var C,w,k;let v=(w=(C=o.quirkOverrides)==null?void 0:C[s])==null?void 0:w.initial,h=[];return m&&m.options&&(h=m.options.map(S=>({value:S.value,label:S.name}))),e(B,{key:d,border:"bottom"},e(I,null,e("strong",null,s)),e(I,null,l!==d?e("div",{onClick:()=>{p(d)}},v?e("div",null,e("s",null,v)):null,c):null,l===d&&m&&e(y.Fragment,null,m.options?e(Kt,{showLabel:!1,label:`Change ${s}`,defaultOption:`Change ${s}`,name:d,onChange:S=>u(S.target.name,S.target.value),options:h}):e(We,{name:d,value:c,submit:u}))),e(I,null,l?null:(k=o.quirkOverrides)!=null&&k[d]?e(Ye,{buttonType:"ghost",onClick:()=>{Re({quirk:d,settings:o,saveSettings:i,actions:a})}},e("small",null,"Clear Override")):e(Ye,{buttonType:"ghost",onClick:()=>{p(d)}},e("small",null,"Override"))))}))):e(E,{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{Button as Wt}from"@uniformdev/design-system";var Xe=({settings:t,saveSettings:r,actions:n,state:{data:o}})=>e("article",{css:[b.page,{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"}]},e("h1",{css:b.title},"Settings"),e(P,null,e(N,null,"Data Connection"),e(Wt,{buttonType:"tertiary",onClick:()=>{r({...t,route:"/connect"})}},"Manage Connection to Uniform")),e(P,null,e(N,null,"Storage Consent"),e(q,{label:"Store visitor data",id:"consent-mode",name:"consentMode",checked:o.consent,onChange:i=>{n.rawUpdate([{type:"consent",data:i.currentTarget.checked}]),r({...t,consentMode:i.currentTarget.checked})}}),e("p",null,e("small",null,"Enabling storage consent allows 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(P,null,e(N,null,"Logging"),e(q,{label:"Write Uniform Context diagnostic logs to browser console",id:"logging",name:"logging",checked:t.logLevel!=="none",onChange:i=>r({...t,logLevel:i.currentTarget.checked?"debug":"none"})})));import{Button as je}from"@uniformdev/design-system";var ue=({settings:t,saveSettings:r})=>{let n=()=>{r({...t,route:"/connect"})},o=()=>{r({...t,ignoreApiKeyPrompt:!0})},i=t.route==="/connect",a=!(t!=null&&t.apiKey);return!t.ignoreApiKeyPrompt&&a&&!i?e("div",{css:[W,ke]},e("h2",{css:Y},"Connect to a Uniform Project"),e("p",{css:J},"This allows reading human-readable labels for the dimensions."),e("div",{css:X},e(je,{buttonType:"secondary",onClick:n},"Connect this site"),e(je,{buttonType:"ghost",onClick:o},"Skip for now")),e("button",{type:"button",css:Te,title:"close",onClick:o},e("span",{hidden:!0},"Close"))):null};import{computeDimensionDefinitionDisplayData as Yt,computeDimensionDisplayData as et,DimensionClient as Jt}from"@uniformdev/context/api";import{useAsync as Xt}from"react-use";import*as tt from"react";function ot({apiHost:t,apiKey:r,projectId:n},o){let{loading:i,error:a,value:l}=Xt(async()=>{if(!r||!n)return p;let u=(await new Jt({projectId:n,apiKey:r,apiHost:t||void 0}).get()).dimensions,s={};return u.map(c=>{var d,v,h,C;if(s[c.dim]={...Yt(c),cap:c.cap,str:10},s[c.dim].type==="Enrichment"){let w=c.dim.split("_")[0];s[c.dim].cap=(C=(h=(v=(d=o==null?void 0:o.project.pz)==null?void 0:d.enr)==null?void 0:v[w])==null?void 0:h.cap)!=null?C:100}}),s},[t,r,n]),p=tt.useMemo(()=>{var u,s,c,d;let m={};return o&&(Object.entries((s=(u=o==null?void 0:o.project.pz)==null?void 0:u.sig)!=null?s:{}).map(([v,h])=>{let C=et(v,o);C&&(m[v]={...h,...C})}),Object.entries((d=(c=o==null?void 0:o.project.pz)==null?void 0:c.enr)!=null?d:{}).map(([v,h])=>{var k;let C=et(v,o),w={cap:(k=h.cap)!=null?k:100,str:10};C&&(m[v]={...C,cap:w.cap,str:w.str})}),l&&Object.entries(l).map(([v,h])=>{m[v]={...m[v],...h}})),m},[o,l]);return{loading:i,error:a,index:p}}import{useMemo as jt}from"react";import{QuirkClient as eo}from"@uniformdev/context/api";import{useAsync as to}from"react-use";function rt({apiHost:t,apiKey:r,projectId:n},o){let{loading:i,error:a,value:l}=to(async()=>{if(!r||!n)return{};let u=await new eo({projectId:n,apiKey:r,apiHost:t||void 0}).get(),s={};return u.quirks.map(c=>{s[c.id]={...c,value:o[c.id]}}),s},[t,r,n]),p=jt(()=>{let m={};return Object.entries(o).map(([u,s])=>m[u]={value:s,id:u,name:u}),l&&Object.entries(l).map(([u,s])=>m[u]={...s,value:o[u]}),m},[o,l]);return{loading:i,error:a,index:p}}import{css as at}from"@emotion/react";function ae(){return e("style",null,`
|
|
1793
479
|
:root {
|
|
1794
480
|
--brand-primary-1: #438fd5; /* bright blue */
|
|
1795
481
|
--brand-primary-2: #f4220b; /* red */
|
|
@@ -2154,29 +840,7 @@ Add the correct display in Chrome and Safari.
|
|
|
2154
840
|
|
|
2155
841
|
summary {
|
|
2156
842
|
display: list-item;
|
|
2157
|
-
}`);
|
|
2158
|
-
}
|
|
2159
|
-
|
|
2160
|
-
// src/components/StatusPages/AdditionalDataLoading.tsx
|
|
2161
|
-
import { useEffect as useEffect2, useState as useState4 } from "react";
|
|
2162
|
-
import { useMountedState } from "react-use";
|
|
2163
|
-
var AdditionalDataLoading = () => {
|
|
2164
|
-
const [viz, setViz] = useState4(false);
|
|
2165
|
-
const mounted = useMountedState();
|
|
2166
|
-
useEffect2(() => {
|
|
2167
|
-
setTimeout(() => {
|
|
2168
|
-
if (mounted()) {
|
|
2169
|
-
setViz(true);
|
|
2170
|
-
}
|
|
2171
|
-
}, 1e3);
|
|
2172
|
-
}, [mounted]);
|
|
2173
|
-
return viz ? /* @__PURE__ */ jsx("article", {
|
|
2174
|
-
css: styles.page
|
|
2175
|
-
}, /* @__PURE__ */ jsx("h1", null, "Loading..."), /* @__PURE__ */ jsx("p", null, "Connecting to Uniform API for complete data.")) : null;
|
|
2176
|
-
};
|
|
2177
|
-
|
|
2178
|
-
// src/components/ContextDevTools.tsx
|
|
2179
|
-
var mainLayoutStyle = css15`
|
|
843
|
+
}`)}import{useEffect as oo,useState as ro}from"react";import{useMountedState as no}from"react-use";var nt=()=>{let[t,r]=ro(!1),n=no();return oo(()=>{setTimeout(()=>{n()&&r(!0)},1e3)},[n]),t?e("article",{css:b.page},e("h1",null,"Loading..."),e("p",null,"Connecting to Uniform API for complete data.")):null};import{parseQuickConnect as io}from"@uniformdev/context";import{ApiClientError as so,ManifestClient as ao}from"@uniformdev/context/api";import{Field as ge,Form as co,Formik as lo}from"formik";import*as T from"react";import{ErrorMessage as po,Input as mo,Button as U}from"@uniformdev/design-system";function it(t){let[r,n]=T.useState(t.currentData?"c":"qc"),[o,i]=T.useState(void 0),[a,l]=T.useState(void 0),p=T.useCallback(async s=>{let c=new ao(s);i(void 0);try{let d=await c.get({preview:!0});return l({manifest:d,target:s}),d}catch(d){if(d instanceof so){d.statusCode===403?i("API key is valid but does not have Context > Read Drafts permission, or the API key does not have permissions to the project, or the project does not exist."):i(d.errorMessage);return}if("message"in d){d.message==="Failed to fetch"?i("A network error occurred. Ensure the API host is valid."):i(d.message);return}i(JSON.stringify(d,null,2));return}},[]);T.useEffect(()=>{!t.currentData||p(t.currentData)},[p,t.currentData]);let m=async s=>{await p(s)&&(n("c"),await t.onConnect(s))},u=()=>{confirm("Disconnect from Uniform? Make sure to save your API key if you want to reconnect.")&&(n("qc"),l(void 0),i(void 0),t.onConnect(null))};return e("div",null,o?e(po,{message:o}):null,r==="qc"||r==="mc"?e(uo,{...t,state:r,setState:n,onConnect:m}):e("div",null,a?e(T.Fragment,null,e("p",null,"Connected to"," ",e("a",{href:`${a==null?void 0:a.target.apiHost}/projects/${a==null?void 0:a.target.projectId}`,target:"_blank",rel:"noopener noreferrer",css:{textDecoration:"underline"}},e("strong",null,a==null?void 0:a.manifest.project.name))," ",e("small",null,"(",a==null?void 0:a.manifest.project.id,")")),e(U,{buttonType:"secondary",type:"button",onClick:u},"Disconnect")):null))}function uo({setState:t,state:r,currentData:n,onConnect:o}){var i,a,l;return e("div",null,e(lo,{initialValues:{apiHost:(i=n==null?void 0:n.apiHost)!=null?i:"https://uniform.dev",apiKey:(a=n==null?void 0:n.apiKey)!=null?a:"",projectId:(l=n==null?void 0:n.projectId)!=null?l:"",qc:""},onSubmit:o},({setFieldValue:p,setFieldError:m,errors:{qc:u},isSubmitting:s})=>e(co,null,e("fieldset",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"}},r==="qc"?e(T.Fragment,null,e("div",null,e(mo,{placeholder:"Paste Quick Connect Code Here",caption:"Copy the Quick Connect code after creating an API key in Uniform.",errorMessage:u,onChange:c=>{try{let d=io(c.currentTarget.value);p("apiHost",d.apiHost),p("apiKey",d.apiKey),p("projectId",d.projectId)}catch(d){m("qc",d.message)}}})),e("section",{css:{display:"flex",gap:"var(--spacing-sm)"}},e(U,{type:"submit",buttonType:"primary",disabled:s},s?"Verifying...":"Connect"),e(U,{type:"button",buttonType:"ghost",onClick:()=>t("mc"),disabled:s},"Connect Manually"))):e(T.Fragment,null,e("div",null,e(ge,{component:se,label:"API Key",name:"apiKey",caption:"Generate an API key in your Uniform team settings."})),e("div",null,e(ge,{component:se,label:"Project ID",name:"projectId",caption:"Available to copy after generating an API key"})),e("div",null,e(ge,{component:se,label:"API Host",name:"apiHost",caption:"Use a non-standard Uniform API endpoint. Most people will not not need this option."})),e("section",{css:{display:"flex",gap:"var(--spacing-sm)"}},e(U,{type:"submit",buttonType:"primary",disabled:s},s?"Verifying...":"Connect"),e(U,{type:"button",buttonType:"ghost",onClick:()=>t("qc"),disabled:s},"Use Quick Connect")))))))}var st=({settings:t,saveSettings:r})=>{let n=t.apiKey&&t.projectId?{apiKey:t.apiKey,projectId:t.projectId,apiHost:t.apiHost}:void 0;return e("article",{css:b.page},e("h1",{css:b.title},"Connect to a Uniform Project"),e("p",{css:b.text},e("small",null,"Adding an API key and project ID enables human-readable dimension labels to be shown. You must have access to the Uniform project to do this.")),e(it,{onConnect:async o=>{o?await r({...t,apiKey:o.apiKey,projectId:o.projectId,apiHost:o.apiHost}):await r({...t,apiKey:void 0,projectId:void 0,apiHost:void 0})},currentData:n}))};var go=at`
|
|
2180
844
|
background: var(--white);
|
|
2181
845
|
padding: var(--spacing-base);
|
|
2182
846
|
overflow-y: auto;
|
|
@@ -2205,59 +869,7 @@ var mainLayoutStyle = css15`
|
|
|
2205
869
|
&::-webkit-scrollbar-thumb:hover {
|
|
2206
870
|
background: var(--gray-500);
|
|
2207
871
|
}
|
|
2208
|
-
`;
|
|
2209
|
-
function ContextDevTools(props) {
|
|
2210
|
-
const dimensionIndex = useDimensionIndex(props.settings, props.state.manifest);
|
|
2211
|
-
const quirksIndex = useQuirkIndex(props.settings, props.state.data.quirks);
|
|
2212
|
-
const routeProps = {
|
|
2213
|
-
...props,
|
|
2214
|
-
dimensionIndex,
|
|
2215
|
-
quirksIndex
|
|
2216
|
-
};
|
|
2217
|
-
const component = () => {
|
|
2218
|
-
var _a;
|
|
2219
|
-
if (dimensionIndex.loading || quirksIndex.loading) {
|
|
2220
|
-
return /* @__PURE__ */ jsx(AdditionalDataLoading, null);
|
|
2221
|
-
}
|
|
2222
|
-
if (props.settings.route) {
|
|
2223
|
-
if (props.settings.route.match(/overrides\/\w+/)) {
|
|
2224
|
-
return /* @__PURE__ */ jsx(AddOverride, {
|
|
2225
|
-
...routeProps
|
|
2226
|
-
});
|
|
2227
|
-
}
|
|
2228
|
-
}
|
|
2229
|
-
switch ((_a = props.settings) == null ? void 0 : _a.route) {
|
|
2230
|
-
case void 0:
|
|
2231
|
-
case "/":
|
|
2232
|
-
case "/dimensions":
|
|
2233
|
-
return /* @__PURE__ */ jsx(Dimensions, {
|
|
2234
|
-
...routeProps
|
|
2235
|
-
});
|
|
2236
|
-
case "/overrides":
|
|
2237
|
-
return /* @__PURE__ */ jsx(Overrides, {
|
|
2238
|
-
...routeProps
|
|
2239
|
-
});
|
|
2240
|
-
case "/overrides/add":
|
|
2241
|
-
return /* @__PURE__ */ jsx(AddOverride, {
|
|
2242
|
-
...routeProps
|
|
2243
|
-
});
|
|
2244
|
-
case "/quirks":
|
|
2245
|
-
return /* @__PURE__ */ jsx(Quirks, {
|
|
2246
|
-
...routeProps
|
|
2247
|
-
});
|
|
2248
|
-
case "/settings":
|
|
2249
|
-
return /* @__PURE__ */ jsx(Settings, {
|
|
2250
|
-
...routeProps
|
|
2251
|
-
});
|
|
2252
|
-
default:
|
|
2253
|
-
return /* @__PURE__ */ jsx(NotFound, null);
|
|
2254
|
-
}
|
|
2255
|
-
};
|
|
2256
|
-
return /* @__PURE__ */ jsx(DevToolsSettingsContextProvider, {
|
|
2257
|
-
settings: props.settings,
|
|
2258
|
-
saveSettings: props.saveSettings
|
|
2259
|
-
}, /* @__PURE__ */ jsx(Theme, null), /* @__PURE__ */ jsx("div", {
|
|
2260
|
-
css: css15`
|
|
872
|
+
`;function ct(t){let r=ot(t.settings,t.state.manifest),n=rt(t.settings,t.state.data.quirks),o={...t,dimensionIndex:r,quirksIndex:n},i=()=>{var a;if(r.loading||n.loading)return e(nt,null);if(t.settings.route&&t.settings.route.match(/overrides\/\w+/))return e(me,{...o});switch((a=t.settings)==null?void 0:a.route){case void 0:case"/":case"/dimensions":return e(ze,{...o});case"/overrides":return e(Qe,{...o});case"/overrides/add":return e(me,{...o});case"/quirks":return e(Je,{...o});case"/settings":return e(Xe,{...o});case"/connect":return e(st,{...o});default:return e(Ce,null)}};return e(be,{settings:t.settings,saveSettings:t.saveSettings},e(ae,null),e("div",{css:at`
|
|
2261
873
|
display: grid;
|
|
2262
874
|
grid-template-columns: 200px auto;
|
|
2263
875
|
font-weight: var(--font-regular);
|
|
@@ -2266,108 +878,7 @@ function ContextDevTools(props) {
|
|
|
2266
878
|
line-height: var(--base-line-height);
|
|
2267
879
|
height: var(--min-height);
|
|
2268
880
|
min-width: var(--site-width);
|
|
2269
|
-
`
|
|
2270
|
-
}, /* @__PURE__ */ jsx(Menu, {
|
|
2271
|
-
...props
|
|
2272
|
-
}), /* @__PURE__ */ jsx("main", {
|
|
2273
|
-
css: mainLayoutStyle
|
|
2274
|
-
}, /* @__PURE__ */ jsx(ConnectApiKey, {
|
|
2275
|
-
...props
|
|
2276
|
-
}), component())));
|
|
2277
|
-
}
|
|
2278
|
-
|
|
2279
|
-
// src/components/EmbeddedContextDevTools.tsx
|
|
2280
|
-
import {
|
|
2281
|
-
Context as Context2,
|
|
2282
|
-
createDebugConsoleLogDrain
|
|
2283
|
-
} from "@uniformdev/context";
|
|
2284
|
-
import * as React7 from "react";
|
|
2285
|
-
function EmbeddedContextDevTools({ context, initialSettings }) {
|
|
2286
|
-
const contextValue = context != null ? context : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
|
|
2287
|
-
const contextInstance = contextValue != null ? contextValue : new Context2({ manifest: { project: {} } });
|
|
2288
|
-
const [state, setState] = React7.useState({
|
|
2289
|
-
data: contextInstance.storage.data,
|
|
2290
|
-
manifest: contextInstance.manifest.data,
|
|
2291
|
-
scores: contextInstance.scores,
|
|
2292
|
-
personalizations: [],
|
|
2293
|
-
tests: []
|
|
2294
|
-
});
|
|
2295
|
-
const [settings, setSettings] = React7.useState(initialSettings != null ? initialSettings : {});
|
|
2296
|
-
React7.useEffect(() => {
|
|
2297
|
-
var _a;
|
|
2298
|
-
const drain = createDebugConsoleLogDrain((_a = settings.logLevel) != null ? _a : "none");
|
|
2299
|
-
contextInstance.events.on("log", drain);
|
|
2300
|
-
return () => {
|
|
2301
|
-
contextInstance.events.off("log", drain);
|
|
2302
|
-
};
|
|
2303
|
-
}, [settings, contextInstance]);
|
|
2304
|
-
React7.useEffect(() => {
|
|
2305
|
-
const onContextDataUpdated = () => {
|
|
2306
|
-
const quirkOverrides = applyQuirkOverrides({
|
|
2307
|
-
quirks: contextInstance.storage.data.quirks,
|
|
2308
|
-
quirkOverrides: settings.quirkOverrides
|
|
2309
|
-
});
|
|
2310
|
-
if (quirkOverrides) {
|
|
2311
|
-
console.log("Applying overridden quirks:", quirkOverrides);
|
|
2312
|
-
contextInstance.update({ quirks: quirkOverrides });
|
|
2313
|
-
}
|
|
2314
|
-
const overrideCommands = applyScoreOverrides({
|
|
2315
|
-
scores: contextInstance.scores,
|
|
2316
|
-
scoreOverrides: settings.scoreOverrides
|
|
2317
|
-
});
|
|
2318
|
-
if (overrideCommands.length) {
|
|
2319
|
-
console.log("Applying overridden scores:", overrideCommands);
|
|
2320
|
-
contextInstance.storage.updateData(overrideCommands);
|
|
2321
|
-
}
|
|
2322
|
-
setState((old) => ({
|
|
2323
|
-
...old,
|
|
2324
|
-
scores: contextInstance.scores,
|
|
2325
|
-
data: contextInstance.storage.data,
|
|
2326
|
-
manifest: contextInstance.manifest.data
|
|
2327
|
-
}));
|
|
2328
|
-
};
|
|
2329
|
-
const onPersonalizationResult = (e) => {
|
|
2330
|
-
if (!e.changed)
|
|
2331
|
-
return;
|
|
2332
|
-
setState((old) => ({ ...old, personalizations: [...old.personalizations, e] }));
|
|
2333
|
-
};
|
|
2334
|
-
const onTestResult = (e) => {
|
|
2335
|
-
if (!e.variantAssigned)
|
|
2336
|
-
return;
|
|
2337
|
-
setState((old) => ({ ...old, tests: [...old.tests, e] }));
|
|
2338
|
-
};
|
|
2339
|
-
contextInstance.events.on("personalizationResult", onPersonalizationResult);
|
|
2340
|
-
contextInstance.events.on("testResult", onTestResult);
|
|
2341
|
-
contextInstance.storage.events.on("*", onContextDataUpdated);
|
|
2342
|
-
return () => {
|
|
2343
|
-
contextInstance.storage.events.off("*", onContextDataUpdated);
|
|
2344
|
-
contextInstance.events.off("personalizationResult", onPersonalizationResult);
|
|
2345
|
-
contextInstance.events.off("testResult", onTestResult);
|
|
2346
|
-
};
|
|
2347
|
-
}, [contextInstance, settings]);
|
|
2348
|
-
const actions = React7.useMemo(() => {
|
|
2349
|
-
const actions2 = {
|
|
2350
|
-
update: (up) => contextInstance.update(up),
|
|
2351
|
-
forget: () => contextInstance.forget(false),
|
|
2352
|
-
rawUpdate: (commands) => contextInstance.storage.updateData(commands)
|
|
2353
|
-
};
|
|
2354
|
-
return actions2;
|
|
2355
|
-
}, [contextInstance]);
|
|
2356
|
-
return contextValue ? /* @__PURE__ */ jsx(ContextDevTools, {
|
|
2357
|
-
state,
|
|
2358
|
-
actions,
|
|
2359
|
-
settings,
|
|
2360
|
-
saveSettings: setSettings
|
|
2361
|
-
}) : /* @__PURE__ */ jsx("p", null, "Unable to find Uniform Context. Ensure the devtools plugin is activated.");
|
|
2362
|
-
}
|
|
2363
|
-
|
|
2364
|
-
// src/components/ToggleEmbeddedContextDevTools.tsx
|
|
2365
|
-
import { css as css17 } from "@emotion/react";
|
|
2366
|
-
import * as React8 from "react";
|
|
2367
|
-
|
|
2368
|
-
// src/components/Buttons/EmbedToggleButton.tsx
|
|
2369
|
-
import { css as css16 } from "@emotion/react";
|
|
2370
|
-
var btnStyle3 = css16`
|
|
881
|
+
`},e(ye,{...t}),e("main",{css:go},e(ue,{...t}),i())))}import{Context as fo,createDebugConsoleLogDrain as vo}from"@uniformdev/context";import*as O from"react";var fe="embeddedUniformDevToolsSettings";function dt({context:t,initialSettings:r}){let n=t!=null?t:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,o=n!=null?n:new fo({manifest:{project:{}}}),[i,a]=O.useState({data:o.storage.data,manifest:o.manifest.data,scores:o.scores,personalizations:[],tests:[]}),[l,p]=O.useState(r!=null?r:{});O.useEffect(()=>{var c;let s=vo((c=l.logLevel)!=null?c:"none");return o.events.on("log",s),()=>{o.events.off("log",s)}},[l,o]),O.useEffect(()=>{let s=()=>{let v=window.localStorage.getItem(fe)||"{}",h=JSON.parse(v),C=ie({quirks:o.storage.data.quirks,quirkOverrides:h.quirkOverrides});C&&(console.log("Applying overridden quirks:",C),o.update({quirks:C}));let w=Z({scores:o.scores,scoreOverrides:h.scoreOverrides});w.length&&(console.log("Applying overridden scores:",w),o.storage.updateData(w)),a(k=>({...k,scores:o.scores,data:o.storage.data,manifest:o.manifest.data}))},c=v=>{!v.changed||a(h=>({...h,personalizations:[...h.personalizations,v]}))},d=v=>{!v.variantAssigned||a(h=>({...h,tests:[...h.tests,v]}))};return o.events.on("personalizationResult",c),o.events.on("testResult",d),o.storage.events.on("*",s),()=>{o.storage.events.off("*",s),o.events.off("personalizationResult",c),o.events.off("testResult",d)}},[o]),O.useEffect(()=>{if(window.localStorage){let s=window.localStorage.getItem(fe);if(s)try{let c=JSON.parse(s),d={...r,...c};p(d);let v=Z({scores:i.scores,scoreOverrides:d.scoreOverrides});m.rawUpdate(v)}catch(c){window.localStorage.removeItem(fe),console.error("Failed to parse settings from localStorage: ",c.message)}}},[]);let{actions:m,saveSettings:u}=O.useMemo(()=>({actions:{update:d=>o.update(d),forget:()=>o.forget(!1),rawUpdate:d=>o.storage.updateData(d)},saveSettings:async d=>{p(d),window.localStorage&&window.localStorage.setItem("embeddedUniformDevToolsSettings",JSON.stringify(d))}}),[o]);return n?e(ct,{state:i,actions:m,settings:l,saveSettings:u}):e("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}import{css as yo}from"@emotion/react";import*as pt from"react";import{css as ho}from"@emotion/react";var bo=ho`
|
|
2371
882
|
align-items: center;
|
|
2372
883
|
border-radius: var(--rounded-full);
|
|
2373
884
|
background: var(--brand-secondary-5);
|
|
@@ -2393,54 +904,11 @@ var btnStyle3 = css16`
|
|
|
2393
904
|
max-width: 100%;
|
|
2394
905
|
height: auto;
|
|
2395
906
|
}
|
|
2396
|
-
|
|
2397
|
-
var EmbedToggleButton = ({ ...props }) => {
|
|
2398
|
-
return /* @__PURE__ */ jsx("button", {
|
|
2399
|
-
type: "button",
|
|
2400
|
-
css: btnStyle3,
|
|
2401
|
-
...props
|
|
2402
|
-
}, /* @__PURE__ */ jsx("span", {
|
|
2403
|
-
hidden: true
|
|
2404
|
-
}, "Uniform devtools"), /* @__PURE__ */ jsx("svg", {
|
|
2405
|
-
width: "24",
|
|
2406
|
-
height: "24",
|
|
2407
|
-
viewBox: "0 0 24 24",
|
|
2408
|
-
fill: "none",
|
|
2409
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
2410
|
-
}, /* @__PURE__ */ jsx("path", {
|
|
2411
|
-
d: "M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",
|
|
2412
|
-
fill: "currentColor"
|
|
2413
|
-
}), /* @__PURE__ */ jsx("path", {
|
|
2414
|
-
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",
|
|
2415
|
-
fill: "currentColor"
|
|
2416
|
-
}), /* @__PURE__ */ jsx("path", {
|
|
2417
|
-
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",
|
|
2418
|
-
fill: "currentColor"
|
|
2419
|
-
})));
|
|
2420
|
-
};
|
|
2421
|
-
|
|
2422
|
-
// src/components/ToggleEmbeddedContextDevTools.tsx
|
|
2423
|
-
function ToggleEmbeddedContextDevTools(props) {
|
|
2424
|
-
var _a;
|
|
2425
|
-
const [devtoolsOpen, setDevtoolsOpen] = React8.useState(false);
|
|
2426
|
-
const contextValue = (_a = props.context) != null ? _a : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
|
|
2427
|
-
return contextValue ? /* @__PURE__ */ jsx("div", null, /* @__PURE__ */ jsx(Theme, null), /* @__PURE__ */ jsx(EmbedToggleButton, {
|
|
2428
|
-
onClick: () => setDevtoolsOpen((prev) => !prev)
|
|
2429
|
-
}), devtoolsOpen ? /* @__PURE__ */ jsx("div", {
|
|
2430
|
-
css: css17`
|
|
907
|
+
`,lt=({...t})=>e("button",{type:"button",css:bo,...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[r,n]=pt.useState(!1);return((i=t.context)!=null?i:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0)?e("div",null,e(ae,null),e(lt,{onClick:()=>n(a=>!a)}),r?e("div",{css:yo`
|
|
2431
908
|
box-shadow: var(--shadow-base);
|
|
2432
909
|
position: fixed;
|
|
2433
910
|
bottom: 82px;
|
|
2434
911
|
right: var(--spacing-base);
|
|
2435
912
|
z-index: var(--z-10);
|
|
2436
913
|
max-width: var(--site-width);
|
|
2437
|
-
`
|
|
2438
|
-
}, /* @__PURE__ */ jsx(EmbeddedContextDevTools, {
|
|
2439
|
-
...props
|
|
2440
|
-
})) : null) : /* @__PURE__ */ jsx("p", null, "Unable to find Uniform Context. Ensure the devtools plugin is activated.");
|
|
2441
|
-
}
|
|
2442
|
-
export {
|
|
2443
|
-
ContextDevTools,
|
|
2444
|
-
EmbeddedContextDevTools,
|
|
2445
|
-
ToggleEmbeddedContextDevTools
|
|
2446
|
-
};
|
|
914
|
+
`},e(dt,{...t})):null):e("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}export{ct as ContextDevTools,dt as EmbeddedContextDevTools,Li as ToggleEmbeddedContextDevTools};
|