@uniformdev/context-devtools 15.0.0 → 16.0.1-alpha.194
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 +120 -2075
- package/dist/index.js +120 -2106
- package/package.json +20 -13
package/dist/index.js
CHANGED
|
@@ -1,86 +1,4 @@
|
|
|
1
|
-
var
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
|
|
29
|
-
// src/index.ts
|
|
30
|
-
var src_exports = {};
|
|
31
|
-
__export(src_exports, {
|
|
32
|
-
ContextDevTools: () => ContextDevTools,
|
|
33
|
-
EmbeddedContextDevTools: () => EmbeddedContextDevTools,
|
|
34
|
-
ToggleEmbeddedContextDevTools: () => ToggleEmbeddedContextDevTools
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
// ../../scripts/emotion-jsx-shim.js
|
|
38
|
-
var import_react = require("@emotion/react");
|
|
39
|
-
var React = __toESM(require("react"));
|
|
40
|
-
|
|
41
|
-
// src/components/Navigation/Menu.tsx
|
|
42
|
-
var import_react3 = require("@emotion/react");
|
|
43
|
-
|
|
44
|
-
// src/lib/DevToolsSettingsContext.tsx
|
|
45
|
-
var import_react2 = require("react");
|
|
46
|
-
var DevToolsSettingsContext = (0, import_react2.createContext)({
|
|
47
|
-
settings: {},
|
|
48
|
-
saveSettings: () => null
|
|
49
|
-
});
|
|
50
|
-
var useDevToolsSettingsContext = () => (0, import_react2.useContext)(DevToolsSettingsContext);
|
|
51
|
-
var DevToolsSettingsContextProvider = ({
|
|
52
|
-
children,
|
|
53
|
-
settings,
|
|
54
|
-
saveSettings
|
|
55
|
-
}) => {
|
|
56
|
-
return /* @__PURE__ */ (0, import_react.jsx)(DevToolsSettingsContext.Provider, {
|
|
57
|
-
value: {
|
|
58
|
-
settings,
|
|
59
|
-
saveSettings
|
|
60
|
-
}
|
|
61
|
-
}, children);
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
// src/components/Navigation/NavigationLink.tsx
|
|
65
|
-
var NavigationLink = ({ route, children, className }) => {
|
|
66
|
-
const { settings, saveSettings } = useDevToolsSettingsContext();
|
|
67
|
-
return /* @__PURE__ */ (0, import_react.jsx)("a", {
|
|
68
|
-
href: "",
|
|
69
|
-
className,
|
|
70
|
-
onClick: (e) => {
|
|
71
|
-
e.preventDefault();
|
|
72
|
-
saveSettings({ ...settings, route });
|
|
73
|
-
}
|
|
74
|
-
}, children);
|
|
75
|
-
};
|
|
76
|
-
var NavigationLink_default = NavigationLink;
|
|
77
|
-
|
|
78
|
-
// src/components/Navigation/Menu.tsx
|
|
79
|
-
var links = [
|
|
80
|
-
{
|
|
81
|
-
title: "Dimensions",
|
|
82
|
-
href: "/dimensions",
|
|
83
|
-
icon: `<svg
|
|
1
|
+
var Ht=Object.create;var $=Object.defineProperty;var Mt=Object.getOwnPropertyDescriptor;var At=Object.getOwnPropertyNames;var Et=Object.getPrototypeOf,Bt=Object.prototype.hasOwnProperty;var Qt=(t,r)=>{for(var n in r)$(t,n,{get:r[n],enumerable:!0})},He=(t,r,n,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of At(r))!Bt.call(t,i)&&i!==n&&$(t,i,{get:()=>r[i],enumerable:!(o=Mt(r,i))||o.enumerable});return t};var x=(t,r,n)=>(n=t!=null?Ht(Et(t)):{},He(r||!t||!t.__esModule?$(n,"default",{value:t,enumerable:!0}):n,t)),Ft=t=>He($({},"__esModule",{value:!0}),t);var io={};Qt(io,{ContextDevTools:()=>Re,EmbeddedContextDevTools:()=>Ie,ToggleEmbeddedContextDevTools:()=>no});module.exports=Ft(io);var e=require("@emotion/react"),b=x(require("react"));var S=require("@emotion/react");var K=require("react"),Me=(0,K.createContext)({settings:{},saveSettings:()=>{}}),W=()=>(0,K.useContext)(Me),Ae=({children:t,settings:r,saveSettings:n})=>(0,e.jsx)(Me.Provider,{value:{settings:r,saveSettings:n}},t);var qt=({route:t,children:r,className:n})=>{let{settings:o,saveSettings:i}=W();return(0,e.jsx)("a",{href:"",className:n,onClick:a=>{a.preventDefault(),i({...o,route:t})}},r)},F=qt;var Nt=[{title:"Dimensions",href:"/dimensions",icon:`<svg
|
|
84
2
|
width="24"
|
|
85
3
|
height="24"
|
|
86
4
|
viewBox="0 0 24 24"
|
|
@@ -97,20 +15,10 @@ var links = [
|
|
|
97
15
|
fill="currentColor"
|
|
98
16
|
/>
|
|
99
17
|
</svg>
|
|
100
|
-
`
|
|
101
|
-
},
|
|
102
|
-
{
|
|
103
|
-
title: "What if?",
|
|
104
|
-
href: "/overrides",
|
|
105
|
-
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">
|
|
106
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"/>
|
|
107
20
|
</svg>
|
|
108
|
-
`
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
title: "Quirks",
|
|
112
|
-
href: "/quirks",
|
|
113
|
-
icon: `<svg
|
|
21
|
+
`},{title:"Quirks",href:"/quirks",icon:`<svg
|
|
114
22
|
width="24"
|
|
115
23
|
height="24"
|
|
116
24
|
viewBox="0 0 24 24"
|
|
@@ -125,85 +33,31 @@ var links = [
|
|
|
125
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"
|
|
126
34
|
fill="currentColor"
|
|
127
35
|
/>
|
|
128
|
-
</svg>`
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
title: "Settings",
|
|
132
|
-
href: "/settings",
|
|
133
|
-
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">
|
|
134
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"/>
|
|
135
38
|
</svg>
|
|
136
|
-
`
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
var _a;
|
|
142
|
-
const cssName = "active";
|
|
143
|
-
if (!((_a = props.settings) == null ? void 0 : _a.route) && href === "/dimensions") {
|
|
144
|
-
return cssName;
|
|
145
|
-
}
|
|
146
|
-
return props.settings.route === href ? cssName : "";
|
|
147
|
-
};
|
|
148
|
-
return /* @__PURE__ */ (0, import_react.jsx)("nav", {
|
|
149
|
-
css: import_react3.css`
|
|
39
|
+
`}],Zt=`<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>`,Ee=({...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(0,e.jsx)("nav",{css:S.css`
|
|
150
44
|
background: var(--brand-secondary-1);
|
|
151
45
|
padding: var(--spacing-base);
|
|
152
46
|
min-width: 200px;
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
`},(0,e.jsx)("a",{css:S.css`
|
|
50
|
+
flex-grow: 0;
|
|
156
51
|
display: inline-block;
|
|
157
52
|
margin: 0 var(--spacing-base);
|
|
158
|
-
`,
|
|
159
|
-
route: "/settings"
|
|
160
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("svg", {
|
|
161
|
-
css: { display: "block" },
|
|
162
|
-
width: "120",
|
|
163
|
-
height: "38",
|
|
164
|
-
viewBox: "0 0 120 38",
|
|
165
|
-
fill: "none",
|
|
166
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
167
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("g", {
|
|
168
|
-
clipPath: "url(#clip0_41_612)"
|
|
169
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("path", {
|
|
170
|
-
d: "M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",
|
|
171
|
-
fill: "#83C6E1"
|
|
172
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("path", {
|
|
173
|
-
d: "M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",
|
|
174
|
-
fill: "#438FD5"
|
|
175
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("path", {
|
|
176
|
-
d: "M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",
|
|
177
|
-
fill: "#F4220B"
|
|
178
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("path", {
|
|
179
|
-
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",
|
|
180
|
-
fill: "white"
|
|
181
|
-
})), /* @__PURE__ */ (0, import_react.jsx)("defs", null, /* @__PURE__ */ (0, import_react.jsx)("clipPath", {
|
|
182
|
-
id: "clip0_41_612"
|
|
183
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("rect", {
|
|
184
|
-
width: "120",
|
|
185
|
-
height: "38",
|
|
186
|
-
fill: "white"
|
|
187
|
-
}))))), /* @__PURE__ */ (0, import_react.jsx)("ul", {
|
|
188
|
-
css: import_react3.css`
|
|
53
|
+
`,href:"https://uniform.dev/"},(0,e.jsx)("svg",{css:{display:"block"},width:"120",height:"38",viewBox:"0 0 120 38",fill:"none",xmlns:"http://www.w3.org/2000/svg"},(0,e.jsx)("g",{clipPath:"url(#clip0_41_612)"},(0,e.jsx)("path",{d:"M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",fill:"#83C6E1"}),(0,e.jsx)("path",{d:"M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",fill:"#438FD5"}),(0,e.jsx)("path",{d:"M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",fill:"#F4220B"}),(0,e.jsx)("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"})),(0,e.jsx)("defs",null,(0,e.jsx)("clipPath",{id:"clip0_41_612"},(0,e.jsx)("rect",{width:"120",height:"38",fill:"white"}))))),(0,e.jsx)("ul",{css:S.css`
|
|
189
54
|
display: flex;
|
|
190
55
|
flex-flow: column nowrap;
|
|
191
56
|
padding: 0;
|
|
192
57
|
margin: 0;
|
|
193
58
|
list-style-type: none;
|
|
194
|
-
|
|
195
|
-
`
|
|
196
|
-
}, links.map((item, index) => {
|
|
197
|
-
var _a, _b, _c, _d;
|
|
198
|
-
let overrideCount = 0;
|
|
199
|
-
if (item.href === "/overrides" && Object.keys((_a = props.settings.scoreOverrides) != null ? _a : {}).length > 0) {
|
|
200
|
-
overrideCount = Object.keys((_b = props.settings.scoreOverrides) != null ? _b : {}).length;
|
|
201
|
-
}
|
|
202
|
-
if (item.href === "/quirks" && Object.keys((_c = props.settings.quirkOverrides) != null ? _c : {}).length > 0) {
|
|
203
|
-
overrideCount = Object.keys((_d = props.settings.quirkOverrides) != null ? _d : {}).length;
|
|
204
|
-
}
|
|
205
|
-
return /* @__PURE__ */ (0, import_react.jsx)("li", {
|
|
206
|
-
css: import_react3.css`
|
|
59
|
+
flex-grow: 1;
|
|
60
|
+
`},Nt.map((a,l)=>{var m,u,s,d;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((d=t.settings.quirkOverrides)!=null?d:{}).length),(0,e.jsx)("li",{css:S.css`
|
|
207
61
|
padding: 0;
|
|
208
62
|
margin: 0;
|
|
209
63
|
list-style-type: none;
|
|
@@ -211,10 +65,7 @@ var Menu = ({ ...props }) => {
|
|
|
211
65
|
&:last-of-type {
|
|
212
66
|
margin-top: auto;
|
|
213
67
|
}
|
|
214
|
-
`,
|
|
215
|
-
key: index
|
|
216
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(NavigationLink_default, {
|
|
217
|
-
css: import_react3.css`
|
|
68
|
+
`,key:l},(0,e.jsx)(F,{css:S.css`
|
|
218
69
|
align-items: center;
|
|
219
70
|
border-radius: var(--rounded-base);
|
|
220
71
|
display: flex;
|
|
@@ -228,18 +79,11 @@ var Menu = ({ ...props }) => {
|
|
|
228
79
|
&.active {
|
|
229
80
|
background: var(--gray-700);
|
|
230
81
|
}
|
|
231
|
-
`,
|
|
232
|
-
className: isActivePath(item.href),
|
|
233
|
-
route: item.href
|
|
234
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("i", {
|
|
235
|
-
css: import_react3.css`
|
|
82
|
+
`,className:r(a.href),route:a.href},(0,e.jsx)("i",{css:S.css`
|
|
236
83
|
align-items: center;
|
|
237
84
|
display: flex;
|
|
238
|
-
`,
|
|
239
|
-
|
|
240
|
-
}), item.title, overrideCount ? /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
241
|
-
css: import_react3.css`
|
|
242
|
-
font-size: var(--font-xxs);
|
|
85
|
+
`,dangerouslySetInnerHTML:{__html:a.icon}}),a.title,p?(0,e.jsx)("span",{css:S.css`
|
|
86
|
+
font-size: var(--fs-xxs);
|
|
243
87
|
display: inline-block;
|
|
244
88
|
width: 12px;
|
|
245
89
|
height: 12px;
|
|
@@ -247,29 +91,29 @@ var Menu = ({ ...props }) => {
|
|
|
247
91
|
background-color: var(--red-tooltip);
|
|
248
92
|
text-align: center;
|
|
249
93
|
line-height: 12px;
|
|
250
|
-
`
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
var
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
94
|
+
`},p):null))})),!n&&(0,e.jsx)("a",{target:"_blank",href:"https://chrome.google.com/webstore/detail/uniform-context/dcmlokofjljnfjcknpmhjocogllfbhkg",css:S.css`
|
|
95
|
+
align-items: center;
|
|
96
|
+
border-radius: var(--rounded-base);
|
|
97
|
+
display: flex;
|
|
98
|
+
font-size: var(--fs-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"},(0,e.jsx)("i",{css:S.css`
|
|
110
|
+
align-items: center;
|
|
111
|
+
display: flex;
|
|
112
|
+
`,dangerouslySetInnerHTML:{__html:Zt}}),"Install Chrome Extension"))};var Be=()=>(0,e.jsx)("article",null,(0,e.jsx)("h1",null,"Something when wrong"),(0,e.jsx)("p",null,"We could not find the page you're looking for."));var ce=x(require("react"));var H=require("@emotion/react"),Y=x(require("react")),Qe=(0,H.css)({willChange:"height"}),zt=H.css`
|
|
268
113
|
border-bottom: 2px solid var(--brand-secondary-1);
|
|
269
|
-
font-size: var(--
|
|
114
|
+
font-size: var(--fs-base);
|
|
270
115
|
margin: 0;
|
|
271
|
-
|
|
272
|
-
var btnStyle = import_react4.css`
|
|
116
|
+
`,Ut=H.css`
|
|
273
117
|
align-items: center;
|
|
274
118
|
border: none;
|
|
275
119
|
background: none;
|
|
@@ -277,120 +121,15 @@ var btnStyle = import_react4.css`
|
|
|
277
121
|
display: flex;
|
|
278
122
|
width: 100%;
|
|
279
123
|
padding: var(--spacing-sm) 0;
|
|
280
|
-
font-weight: var(--
|
|
124
|
+
font-weight: var(--fw-bold);
|
|
281
125
|
justify-content: space-between;
|
|
282
|
-
|
|
283
|
-
var iconStyle = import_react4.css`
|
|
126
|
+
`,_t=H.css`
|
|
284
127
|
align-self: center;
|
|
285
|
-
|
|
286
|
-
var iconActiveStyle = import_react4.css`
|
|
128
|
+
`,Gt=H.css`
|
|
287
129
|
transform: rotate(-180deg);
|
|
288
|
-
|
|
289
|
-
var Accordion = ({ children }) => {
|
|
290
|
-
return /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
291
|
-
css: [willChange]
|
|
292
|
-
}, children);
|
|
293
|
-
};
|
|
294
|
-
var AccordionItem = ({ title, children }) => {
|
|
295
|
-
const [visibility, setVisibility] = React2.useState(false);
|
|
296
|
-
const id = title.split(" ").join("-").toLocaleLowerCase();
|
|
297
|
-
return /* @__PURE__ */ (0, import_react.jsx)(React2.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("h3", {
|
|
298
|
-
css: titleStyle
|
|
299
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("button", {
|
|
300
|
-
"aria-expanded": visibility,
|
|
301
|
-
css: btnStyle,
|
|
302
|
-
title,
|
|
303
|
-
id,
|
|
304
|
-
"aria-controls": `${id}-section`,
|
|
305
|
-
onClick: () => setVisibility((prev) => !prev),
|
|
306
|
-
type: "button"
|
|
307
|
-
}, title, /* @__PURE__ */ (0, import_react.jsx)("i", {
|
|
308
|
-
css: [iconStyle, visibility ? iconActiveStyle : void 0]
|
|
309
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("svg", {
|
|
310
|
-
width: "24",
|
|
311
|
-
height: "24",
|
|
312
|
-
viewBox: "0 0 24 24",
|
|
313
|
-
fill: "none",
|
|
314
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
315
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("path", {
|
|
316
|
-
d: "M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",
|
|
317
|
-
fill: "currentColor"
|
|
318
|
-
}))))), /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
319
|
-
id: `${id}-section`,
|
|
320
|
-
css: [
|
|
321
|
-
willChange,
|
|
322
|
-
import_react4.css`
|
|
130
|
+
`,J=({children:t})=>(0,e.jsx)("div",{css:[Qe]},t),X=({title:t,children:r})=>{let[n,o]=Y.useState(!1),i=t.split(" ").join("-").toLocaleLowerCase();return(0,e.jsx)(Y.Fragment,null,(0,e.jsx)("h3",{css:zt},(0,e.jsx)("button",{"aria-expanded":n,css:Ut,title:t,id:i,"aria-controls":`${i}-section`,onClick:()=>o(a=>!a),type:"button"},t,(0,e.jsx)("i",{css:[_t,n?Gt:void 0]},(0,e.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},(0,e.jsx)("path",{d:"M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",fill:"currentColor"}))))),(0,e.jsx)("div",{id:`${i}-section`,css:[Qe,H.css`
|
|
323
131
|
padding: var(--spacing-sm) 0;
|
|
324
|
-
`
|
|
325
|
-
],
|
|
326
|
-
role: "region",
|
|
327
|
-
"aria-labelledby": id
|
|
328
|
-
}, visibility ? children : null));
|
|
329
|
-
};
|
|
330
|
-
|
|
331
|
-
// src/components/Buttons/Button.tsx
|
|
332
|
-
var import_react5 = require("@emotion/react");
|
|
333
|
-
var React3 = __toESM(require("react"));
|
|
334
|
-
var buttonStyle = import_react5.css`
|
|
335
|
-
align-items: center;
|
|
336
|
-
border: 1px solid transparent;
|
|
337
|
-
cursor: pointer;
|
|
338
|
-
display: inline-flex;
|
|
339
|
-
padding: var(--spacing-sm) var(--spacing-base);
|
|
340
|
-
transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
|
341
|
-
font-size: var(--font-sm);
|
|
342
|
-
&:hover {
|
|
343
|
-
opacity: 0.8;
|
|
344
|
-
}
|
|
345
|
-
`;
|
|
346
|
-
function buttonVariant(variant) {
|
|
347
|
-
const white = import_react5.css`
|
|
348
|
-
color: var(--white);
|
|
349
|
-
`;
|
|
350
|
-
const bold = import_react5.css`
|
|
351
|
-
font-weight: var(--font-bold);
|
|
352
|
-
`;
|
|
353
|
-
switch (variant) {
|
|
354
|
-
case "primary":
|
|
355
|
-
return import_react5.css`
|
|
356
|
-
background: var(--brand-secondary-1);
|
|
357
|
-
${white}
|
|
358
|
-
${bold}
|
|
359
|
-
`;
|
|
360
|
-
case "secondary":
|
|
361
|
-
return import_react5.css`
|
|
362
|
-
background: var(--brand-secondary-5);
|
|
363
|
-
${white}
|
|
364
|
-
${bold}
|
|
365
|
-
`;
|
|
366
|
-
case "unimportant":
|
|
367
|
-
return import_react5.css`
|
|
368
|
-
background: var(--brand-secondary-3);
|
|
369
|
-
color: var(--brand-secondary-1);
|
|
370
|
-
${bold}
|
|
371
|
-
`;
|
|
372
|
-
case "ghost":
|
|
373
|
-
return import_react5.css`
|
|
374
|
-
background: transparent;
|
|
375
|
-
color: var(--brand-secondary-5);
|
|
376
|
-
&:hover {
|
|
377
|
-
border: 1px solid var(--brand-secondary-5);
|
|
378
|
-
}
|
|
379
|
-
`;
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
var Button = ({ buttonType = "primary", children, className, ...props }) => {
|
|
383
|
-
return /* @__PURE__ */ (0, import_react.jsx)(React3.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("button", {
|
|
384
|
-
type: "button",
|
|
385
|
-
css: [buttonStyle, buttonVariant(buttonType)],
|
|
386
|
-
className,
|
|
387
|
-
...props
|
|
388
|
-
}, children));
|
|
389
|
-
};
|
|
390
|
-
|
|
391
|
-
// src/components/CallToAction/cta.styles.ts
|
|
392
|
-
var import_react6 = require("@emotion/react");
|
|
393
|
-
var cta = import_react6.css`
|
|
132
|
+
`],role:"region","aria-labelledby":i},n?r:null))};var M=require("@emotion/react"),j=M.css`
|
|
394
133
|
background-color: var(--gray-100);
|
|
395
134
|
padding: var(--spacing-base) var(--spacing-md);
|
|
396
135
|
margin: var(--spacing-base) 0;
|
|
@@ -398,25 +137,21 @@ var cta = import_react6.css`
|
|
|
398
137
|
&:first-of-type {
|
|
399
138
|
margin: 0 0 var(--spacing-base);
|
|
400
139
|
}
|
|
401
|
-
|
|
402
|
-
var ctaWithIcon = import_react6.css`
|
|
140
|
+
`,Fe=M.css`
|
|
403
141
|
background: var(--gray-100)
|
|
404
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")
|
|
405
143
|
no-repeat var(--spacing-sm) var(--spacing-base);
|
|
406
144
|
padding: var(--spacing-base) var(--spacing-xl);
|
|
407
|
-
|
|
408
|
-
var ctaTitle = import_react6.css`
|
|
145
|
+
`,ee=M.css`
|
|
409
146
|
color: var(--brand-secondary-1);
|
|
410
147
|
margin: 0;
|
|
411
|
-
font-size: var(--
|
|
412
|
-
font-weight: var(--
|
|
413
|
-
|
|
414
|
-
var ctaText = import_react6.css`
|
|
148
|
+
font-size: var(--fs-base);
|
|
149
|
+
font-weight: var(--fw-bold);
|
|
150
|
+
`,te=M.css`
|
|
415
151
|
color: var(--brand-secondary-1);
|
|
416
152
|
margin: var(--spacing-xs) 0 0;
|
|
417
|
-
font-size: var(--
|
|
418
|
-
|
|
419
|
-
var ctaClose = import_react6.css`
|
|
153
|
+
font-size: var(--fs-sm);
|
|
154
|
+
`,qe=M.css`
|
|
420
155
|
align-items: center;
|
|
421
156
|
border: none;
|
|
422
157
|
background: transparent
|
|
@@ -436,148 +171,39 @@ var ctaClose = import_react6.css`
|
|
|
436
171
|
&:hover {
|
|
437
172
|
opacity: 0.6;
|
|
438
173
|
}
|
|
439
|
-
|
|
440
|
-
var ctaBtnGroup = import_react6.css`
|
|
174
|
+
`,oe=M.css`
|
|
441
175
|
display: flex;
|
|
442
176
|
margin: var(--spacing-sm) 0 0;
|
|
443
177
|
gap: var(--spacing-base);
|
|
444
|
-
`;
|
|
445
|
-
|
|
446
|
-
// src/components/CallToAction/NoActiveDimensions.tsx
|
|
447
|
-
var NoActiveDimensions = ({ title, text, buttonGroup, children }) => {
|
|
448
|
-
return /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
449
|
-
css: cta
|
|
450
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("h2", {
|
|
451
|
-
css: ctaTitle
|
|
452
|
-
}, title), /* @__PURE__ */ (0, import_react.jsx)("p", {
|
|
453
|
-
css: ctaText
|
|
454
|
-
}, text), children, buttonGroup ? /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
455
|
-
css: ctaBtnGroup
|
|
456
|
-
}, buttonGroup) : null);
|
|
457
|
-
};
|
|
458
|
-
|
|
459
|
-
// src/components/Inputs/input-switch.styles.ts
|
|
460
|
-
var import_react7 = require("@emotion/react");
|
|
461
|
-
var inputSwitch = import_react7.css`
|
|
462
|
-
align-items: center;
|
|
463
|
-
cursor: pointer;
|
|
464
|
-
display: flex;
|
|
465
|
-
gap: var(--spacing-xs);
|
|
466
|
-
margin-top: var(--spacing-base);
|
|
467
|
-
`;
|
|
468
|
-
var inputSwitchLabel = import_react7.css`
|
|
469
|
-
color: var(--gray-500);
|
|
470
|
-
font-size: var(--font-sm);
|
|
471
|
-
`;
|
|
472
|
-
var inputSwitchControl = import_react7.css`
|
|
473
|
-
background: var(--gray-600);
|
|
474
|
-
`;
|
|
475
|
-
var inputSwitchBtn = import_react7.css`
|
|
476
|
-
display: block;
|
|
477
|
-
background: var(--gray-400);
|
|
478
|
-
border-radius: var(--rounded-full);
|
|
479
|
-
position: relative;
|
|
480
|
-
height: 16px;
|
|
481
|
-
width: 32px;
|
|
482
|
-
&:before {
|
|
483
|
-
border-radius: var(--rounded-full);
|
|
484
|
-
background: var(--white);
|
|
485
|
-
content: '';
|
|
486
|
-
display: block;
|
|
487
|
-
width: 13px;
|
|
488
|
-
height: 13px;
|
|
489
|
-
position: absolute;
|
|
490
|
-
top: 0;
|
|
491
|
-
bottom: 0;
|
|
492
|
-
margin: auto 0;
|
|
493
|
-
transform: translateX(2px);
|
|
494
|
-
transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;
|
|
495
|
-
}
|
|
496
|
-
`;
|
|
497
|
-
var inputSwitchCheckbox = import_react7.css`
|
|
498
|
-
overflow: hidden;
|
|
499
|
-
clip: rect(0, 0, 0, 0);
|
|
500
|
-
height: 0;
|
|
501
|
-
width: 0;
|
|
502
|
-
text-indent: -9999px;
|
|
503
|
-
|
|
504
|
-
&:checked ~ :before {
|
|
505
|
-
transform: translateX(17px);
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
&:checked ~ span {
|
|
509
|
-
background: var(--brand-secondary-5);
|
|
510
|
-
}
|
|
511
|
-
`;
|
|
512
|
-
|
|
513
|
-
// src/components/Inputs/SwitchInput.tsx
|
|
514
|
-
var SwitchInput = ({ label, ...props }) => {
|
|
515
|
-
return /* @__PURE__ */ (0, import_react.jsx)("label", {
|
|
516
|
-
css: inputSwitch
|
|
517
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
518
|
-
css: inputSwitchLabel
|
|
519
|
-
}, label), /* @__PURE__ */ (0, import_react.jsx)("input", {
|
|
520
|
-
type: "checkbox",
|
|
521
|
-
css: inputSwitchCheckbox,
|
|
522
|
-
...props
|
|
523
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
524
|
-
css: inputSwitchBtn
|
|
525
|
-
}));
|
|
526
|
-
};
|
|
527
|
-
var FormikSwitchInput = ({ field, form, meta, ...rawProps }) => {
|
|
528
|
-
const { label } = rawProps;
|
|
529
|
-
return /* @__PURE__ */ (0, import_react.jsx)("label", {
|
|
530
|
-
css: inputSwitch
|
|
531
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
532
|
-
css: inputSwitchLabel
|
|
533
|
-
}, label), /* @__PURE__ */ (0, import_react.jsx)("input", {
|
|
534
|
-
type: "checkbox",
|
|
535
|
-
css: inputSwitchCheckbox,
|
|
536
|
-
checked: field.value,
|
|
537
|
-
...field
|
|
538
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
539
|
-
css: inputSwitchBtn
|
|
540
|
-
}));
|
|
541
|
-
};
|
|
542
|
-
|
|
543
|
-
// src/components/Personalization/page.styles.ts
|
|
544
|
-
var import_react8 = require("@emotion/react");
|
|
545
|
-
var popIn = import_react8.keyframes`from {
|
|
178
|
+
`;var q=({title:t,text:r,buttonGroup:n,children:o})=>(0,e.jsx)("div",{css:j},(0,e.jsx)("h2",{css:ee},t),(0,e.jsx)("p",{css:te},r),o,n?(0,e.jsx)("div",{css:oe},n):null);var k=require("@emotion/react"),$t=k.keyframes`from {
|
|
546
179
|
transform: scale(1);
|
|
547
180
|
}
|
|
548
181
|
to {
|
|
549
182
|
transform: scale(1.2);
|
|
550
183
|
}
|
|
551
|
-
|
|
552
|
-
var styles = {
|
|
553
|
-
page: import_react8.css`
|
|
184
|
+
`,h={page:k.css`
|
|
554
185
|
color: var(--brand-secondary-1);
|
|
555
|
-
`,
|
|
556
|
-
text: import_react8.css`
|
|
186
|
+
`,text:k.css`
|
|
557
187
|
margin: var(--spacing-sm) 0;
|
|
558
|
-
`,
|
|
559
|
-
reset: import_react8.css`
|
|
188
|
+
`,reset:k.css`
|
|
560
189
|
margin: 0 var(--spacing-md);
|
|
561
|
-
font-size: var(--
|
|
190
|
+
font-size: var(--fs-sm);
|
|
562
191
|
color: var(--gray-500);
|
|
563
|
-
`,
|
|
564
|
-
title: import_react8.css`
|
|
192
|
+
`,title:k.css`
|
|
565
193
|
margin: 0 0 var(--spacing-sm);
|
|
566
|
-
font-size: var(--
|
|
194
|
+
font-size: var(--fs-md);
|
|
567
195
|
& > small {
|
|
568
196
|
display: block;
|
|
569
|
-
font-size: var(--
|
|
570
|
-
font-weight: var(--
|
|
197
|
+
font-size: var(--fs-xs);
|
|
198
|
+
font-weight: var(--fw-regular);
|
|
571
199
|
margin: var(--spacing-xxs) 0 0;
|
|
572
200
|
}
|
|
573
|
-
`,
|
|
574
|
-
headingGroup: import_react8.css`
|
|
201
|
+
`,headingGroup:k.css`
|
|
575
202
|
align-items: baseline;
|
|
576
203
|
display: flex;
|
|
577
204
|
justify-content: space-between;
|
|
578
205
|
align-items: center;
|
|
579
|
-
`,
|
|
580
|
-
divider: import_react8.css`
|
|
206
|
+
`,divider:k.css`
|
|
581
207
|
background: var(--gray-300);
|
|
582
208
|
display: block;
|
|
583
209
|
width: 1px;
|
|
@@ -585,117 +211,67 @@ var styles = {
|
|
|
585
211
|
position: absolute;
|
|
586
212
|
inset: 0 auto 0 0;
|
|
587
213
|
margin: auto 0;
|
|
588
|
-
`,
|
|
589
|
-
submitButton: import_react8.css`
|
|
214
|
+
`,submitButton:k.css`
|
|
590
215
|
position: absolute;
|
|
591
216
|
right: var(--spacing-base);
|
|
592
217
|
bottom: var(--spacing-base);
|
|
593
|
-
animation: 0.5s 2 alternate ${
|
|
594
|
-
`,
|
|
595
|
-
cancelButton: import_react8.css`
|
|
218
|
+
animation: 0.5s 2 alternate ${$t};
|
|
219
|
+
`,cancelButton:k.css`
|
|
596
220
|
position: absolute;
|
|
597
221
|
left: calc(200px + var(--spacing-base));
|
|
598
222
|
bottom: var(--spacing-base);
|
|
599
223
|
background: white;
|
|
600
224
|
padding: var(--spacing-sm);
|
|
601
225
|
border: 1px solid var(--gray-300);
|
|
602
|
-
`,
|
|
603
|
-
error: import_react8.css`
|
|
226
|
+
`,error:k.css`
|
|
604
227
|
color: var(--brand-secondary-5);
|
|
605
|
-
font-size: var(--
|
|
606
|
-
`
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
var
|
|
612
|
-
return /* @__PURE__ */ (0, import_react.jsx)("table", {
|
|
613
|
-
css: import_react9.css`
|
|
228
|
+
font-size: var(--fs-sm);
|
|
229
|
+
`,quirks:k.css`
|
|
230
|
+
.uniform-input-select,
|
|
231
|
+
input {
|
|
232
|
+
padding: var(--spacing-sm);
|
|
233
|
+
}
|
|
234
|
+
`};var L=require("@emotion/react"),re=({children:t})=>(0,e.jsx)("table",{css:L.css`
|
|
614
235
|
border-collapse: collapse;
|
|
615
236
|
display: table;
|
|
616
237
|
width: 100%;
|
|
617
|
-
font-size: var(--
|
|
618
|
-
`
|
|
619
|
-
}, children);
|
|
620
|
-
};
|
|
621
|
-
var THead = ({ children }) => {
|
|
622
|
-
return /* @__PURE__ */ (0, import_react.jsx)("thead", {
|
|
623
|
-
css: import_react9.css`
|
|
238
|
+
font-size: var(--fs-sm);
|
|
239
|
+
`},t),Ne=({children:t})=>(0,e.jsx)("thead",{css:L.css`
|
|
624
240
|
background: var(--gray-50);
|
|
625
241
|
text-align: left;
|
|
626
242
|
& tr {
|
|
627
243
|
border-bottom: 1px solid var(--gray-200);
|
|
628
244
|
}
|
|
629
|
-
`
|
|
630
|
-
}, children);
|
|
631
|
-
};
|
|
632
|
-
var TBody = ({ children }) => {
|
|
633
|
-
return /* @__PURE__ */ (0, import_react.jsx)("tbody", null, children);
|
|
634
|
-
};
|
|
635
|
-
var TRow = ({ border, children }) => {
|
|
636
|
-
return /* @__PURE__ */ (0, import_react.jsx)("tr", {
|
|
637
|
-
css: border ? import_react9.css`
|
|
245
|
+
`},t),ne=({children:t})=>(0,e.jsx)("tbody",null,t),z=({border:t,children:r})=>(0,e.jsx)("tr",{css:t?L.css`
|
|
638
246
|
border-bottom: 1px solid var(--gray-200);
|
|
639
247
|
&:where(:last-child) {
|
|
640
248
|
border: none;
|
|
641
249
|
}
|
|
642
|
-
|
|
643
|
-
}, children);
|
|
644
|
-
};
|
|
645
|
-
var THeading = ({ children }) => {
|
|
646
|
-
return /* @__PURE__ */ (0, import_react.jsx)("th", {
|
|
647
|
-
css: import_react9.css`
|
|
250
|
+
`:void 0},r),ie=({children:t,width:r})=>(0,e.jsx)("th",{css:L.css`
|
|
648
251
|
outline: none;
|
|
649
252
|
padding: var(--spacing-sm);
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
};
|
|
653
|
-
function colour(color) {
|
|
654
|
-
switch (color) {
|
|
655
|
-
case "light":
|
|
656
|
-
return import_react9.css`
|
|
253
|
+
width: ${r!=null?r:"auto"};
|
|
254
|
+
`},t);function Kt(t){switch(t){case"light":return L.css`
|
|
657
255
|
color: var(--gray-400);
|
|
658
|
-
`;
|
|
659
|
-
case "dark":
|
|
660
|
-
return import_react9.css`
|
|
256
|
+
`;case"dark":return L.css`
|
|
661
257
|
color: var(--brand-secondary-1);
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
}
|
|
665
|
-
function align(alignment) {
|
|
666
|
-
return import_react9.css`
|
|
667
|
-
text-align: ${alignment};
|
|
668
|
-
`;
|
|
669
|
-
}
|
|
670
|
-
var TData = ({ alignment = "left", border, color = "dark", children }) => {
|
|
671
|
-
return /* @__PURE__ */ (0, import_react.jsx)("td", {
|
|
672
|
-
css: [
|
|
673
|
-
import_react9.css`
|
|
258
|
+
`}}function Wt(t){return L.css`
|
|
259
|
+
text-align: ${t};
|
|
260
|
+
`}var V=({alignment:t="left",border:r,color:n="dark",children:o})=>(0,e.jsx)("td",{css:[L.css`
|
|
674
261
|
padding: var(--spacing-base);
|
|
675
262
|
max-width: 180px;
|
|
676
263
|
overflow-wrap: break-word;
|
|
677
264
|
position: relative;
|
|
678
|
-
`,
|
|
679
|
-
colour(color),
|
|
680
|
-
align(alignment),
|
|
681
|
-
border ? import_react9.css`
|
|
265
|
+
`,Kt(n),Wt(t),r?L.css`
|
|
682
266
|
border-left: 1px solid var(--gray-200);
|
|
683
|
-
|
|
684
|
-
]
|
|
685
|
-
}, children);
|
|
686
|
-
};
|
|
687
|
-
|
|
688
|
-
// src/components/Table/table.styles.ts
|
|
689
|
-
var import_react10 = require("@emotion/react");
|
|
690
|
-
var scoreTd = import_react10.css`
|
|
267
|
+
`:void 0]},o);var se=require("@emotion/react"),Ze=se.css`
|
|
691
268
|
position: relative;
|
|
692
269
|
display: inline-block;
|
|
693
|
-
font-size: var(--
|
|
694
|
-
|
|
695
|
-
var overriddenValue = import_react10.css`
|
|
270
|
+
font-size: var(--fs-base);
|
|
271
|
+
`,ze=se.css`
|
|
696
272
|
display: block;
|
|
697
|
-
|
|
698
|
-
|
|
273
|
+
text-decoration: line-through;
|
|
274
|
+
`,Ue=se.css`
|
|
699
275
|
position: absolute;
|
|
700
276
|
width: 6px;
|
|
701
277
|
height: 6px;
|
|
@@ -703,331 +279,26 @@ var isOverriddenTooltip = import_react10.css`
|
|
|
703
279
|
top: 9px;
|
|
704
280
|
background: var(--red-tooltip);
|
|
705
281
|
border-radius: 3px;
|
|
706
|
-
`;
|
|
707
|
-
|
|
708
|
-
// src/styles/icons.tsx
|
|
709
|
-
var import_react11 = require("@emotion/react");
|
|
710
|
-
var audienceIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
282
|
+
`;var Ge=require("@emotion/react"),Yt=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
711
283
|
<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"/>
|
|
712
284
|
<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"/>
|
|
713
285
|
<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"/>
|
|
714
|
-
</svg
|
|
715
|
-
var enrichmentIcon = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
286
|
+
</svg>`,Jt=`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
716
287
|
<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"/>
|
|
717
288
|
<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"/>
|
|
718
289
|
<path d="M11.9999 5.05762H8.3999V6.2576H11.9999V5.05762Z" fill="#828282"/>
|
|
719
290
|
<path d="M8.3999 7.45752H11.9999V8.6575H8.3999V7.45752Z" fill="#828282"/>
|
|
720
291
|
<path d="M11.9999 2.65771H8.3999V3.8577H11.9999V2.65771Z" fill="#828282"/>
|
|
721
|
-
</svg
|
|
722
|
-
var signalIcon = `<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
292
|
+
</svg>`,_e=`<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
723
293
|
<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"/>
|
|
724
294
|
<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"/>
|
|
725
295
|
<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"/>
|
|
726
296
|
<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"/>
|
|
727
297
|
<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"/>
|
|
728
|
-
</svg
|
|
729
|
-
var Icon = ({ type }) => {
|
|
730
|
-
let iconHtml = "";
|
|
731
|
-
switch (type) {
|
|
732
|
-
case "Audience":
|
|
733
|
-
iconHtml = audienceIcon;
|
|
734
|
-
break;
|
|
735
|
-
case "Signal":
|
|
736
|
-
iconHtml = signalIcon;
|
|
737
|
-
break;
|
|
738
|
-
case "Intent":
|
|
739
|
-
iconHtml = signalIcon;
|
|
740
|
-
break;
|
|
741
|
-
case "Enrichment":
|
|
742
|
-
iconHtml = enrichmentIcon;
|
|
743
|
-
break;
|
|
744
|
-
}
|
|
745
|
-
return /* @__PURE__ */ (0, import_react.jsx)("i", {
|
|
746
|
-
css: import_react11.css`
|
|
298
|
+
</svg>`,$e=({type:t})=>{let r="";switch(t){case"Audience":r=Yt;break;case"Signal":r=_e;break;case"Intent":r=_e;break;case"Enrichment":r=Jt;break}return(0,e.jsx)("i",{css:Ge.css`
|
|
747
299
|
align-items: center;
|
|
748
300
|
display: inline-block;
|
|
749
|
-
`,
|
|
750
|
-
dangerouslySetInnerHTML: { __html: iconHtml }
|
|
751
|
-
});
|
|
752
|
-
};
|
|
753
|
-
|
|
754
|
-
// src/components/Table/DimensionsTable.tsx
|
|
755
|
-
var DimensionsTable = ({
|
|
756
|
-
dimensionIndex,
|
|
757
|
-
dimensions,
|
|
758
|
-
disableEditOverride,
|
|
759
|
-
onClick,
|
|
760
|
-
preemptiveOverrides
|
|
761
|
-
}) => {
|
|
762
|
-
var _a;
|
|
763
|
-
const { settings } = useDevToolsSettingsContext();
|
|
764
|
-
const overrides = (_a = preemptiveOverrides != null ? preemptiveOverrides : settings.scoreOverrides) != null ? _a : {};
|
|
765
|
-
return /* @__PURE__ */ (0, import_react.jsx)(Table, null, /* @__PURE__ */ (0, import_react.jsx)(TBody, null, Object.entries(dimensions).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => {
|
|
766
|
-
var _a2;
|
|
767
|
-
const { dim, name, type, category } = (_a2 = dimensionIndex[key]) != null ? _a2 : {
|
|
768
|
-
name: key,
|
|
769
|
-
dim: key,
|
|
770
|
-
type: void 0,
|
|
771
|
-
category: void 0
|
|
772
|
-
};
|
|
773
|
-
const override = overrides[dim];
|
|
774
|
-
return /* @__PURE__ */ (0, import_react.jsx)(TRow, {
|
|
775
|
-
key: dim
|
|
776
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(TData, null, override !== void 0 ? /* @__PURE__ */ (0, import_react.jsx)("s", {
|
|
777
|
-
css: overriddenValue
|
|
778
|
-
}, override.initial) : null, /* @__PURE__ */ (0, import_react.jsx)("b", {
|
|
779
|
-
css: scoreTd
|
|
780
|
-
}, value, override !== void 0 && /* @__PURE__ */ (0, import_react.jsx)("i", {
|
|
781
|
-
css: isOverriddenTooltip
|
|
782
|
-
}))), /* @__PURE__ */ (0, import_react.jsx)(TData, null, /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
783
|
-
onClick: () => onClick == null ? void 0 : onClick(dim),
|
|
784
|
-
css: onClick ? { cursor: "pointer" } : void 0
|
|
785
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
786
|
-
css: styles.divider,
|
|
787
|
-
role: "presentation"
|
|
788
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("div", null, /* @__PURE__ */ (0, import_react.jsx)(Icon, {
|
|
789
|
-
type
|
|
790
|
-
}), " ", type), /* @__PURE__ */ (0, import_react.jsx)("strong", null, category ? `${category}:` : "", " ", name))), /* @__PURE__ */ (0, import_react.jsx)(TData, {
|
|
791
|
-
alignment: "right",
|
|
792
|
-
color: "light"
|
|
793
|
-
}, override !== void 0 && !disableEditOverride ? /* @__PURE__ */ (0, import_react.jsx)(NavigationLink_default, {
|
|
794
|
-
route: `/overrides/${dim}`
|
|
795
|
-
}, "Edit override") : null));
|
|
796
|
-
})));
|
|
797
|
-
};
|
|
798
|
-
var DimensionsTable_default = DimensionsTable;
|
|
799
|
-
|
|
800
|
-
// src/components/Buttons/LinkButton.tsx
|
|
801
|
-
var import_react12 = require("@emotion/react");
|
|
802
|
-
var btnStyle2 = import_react12.css`
|
|
803
|
-
background: none;
|
|
804
|
-
border: none;
|
|
805
|
-
color: var(--brand-secondary-3);
|
|
806
|
-
cursor: pointer;
|
|
807
|
-
padding: 0;
|
|
808
|
-
font-weight: var(--font-bold);
|
|
809
|
-
margin-left: auto;
|
|
810
|
-
font-size: var(--font-sm);
|
|
811
|
-
`;
|
|
812
|
-
var LinkButton = ({ children, ...props }) => {
|
|
813
|
-
return /* @__PURE__ */ (0, import_react.jsx)("button", {
|
|
814
|
-
type: "button",
|
|
815
|
-
css: btnStyle2,
|
|
816
|
-
...props
|
|
817
|
-
}, children);
|
|
818
|
-
};
|
|
819
|
-
|
|
820
|
-
// src/lib/deleteOverride.ts
|
|
821
|
-
async function deleteScoreOverrides({
|
|
822
|
-
actions,
|
|
823
|
-
saveSettings,
|
|
824
|
-
scores,
|
|
825
|
-
settings
|
|
826
|
-
}) {
|
|
827
|
-
var _a, _b;
|
|
828
|
-
const scoreOverrides = (_a = settings.scoreOverrides) != null ? _a : {};
|
|
829
|
-
const newOverrides = { ...scoreOverrides };
|
|
830
|
-
const commands = [];
|
|
831
|
-
for (const dim of Object.keys(scoreOverrides)) {
|
|
832
|
-
const override = scoreOverrides == null ? void 0 : scoreOverrides[dim];
|
|
833
|
-
delete newOverrides[dim];
|
|
834
|
-
commands.push({
|
|
835
|
-
type: "modscoreS",
|
|
836
|
-
data: { dimension: dim, delta: override.initial - ((_b = scores[dim]) != null ? _b : 0) }
|
|
837
|
-
});
|
|
838
|
-
}
|
|
839
|
-
await saveSettings({
|
|
840
|
-
...settings,
|
|
841
|
-
scoreOverrides: newOverrides
|
|
842
|
-
});
|
|
843
|
-
await actions.rawUpdate(commands);
|
|
844
|
-
}
|
|
845
|
-
async function deleteQuirkOverride({
|
|
846
|
-
quirk: dim,
|
|
847
|
-
settings,
|
|
848
|
-
saveSettings,
|
|
849
|
-
actions
|
|
850
|
-
}) {
|
|
851
|
-
var _a;
|
|
852
|
-
const override = (_a = settings.quirkOverrides) == null ? void 0 : _a[dim];
|
|
853
|
-
if (!override) {
|
|
854
|
-
return;
|
|
855
|
-
}
|
|
856
|
-
const newOverrides = { ...settings.quirkOverrides };
|
|
857
|
-
delete newOverrides[dim];
|
|
858
|
-
await saveSettings({
|
|
859
|
-
...settings,
|
|
860
|
-
quirkOverrides: newOverrides
|
|
861
|
-
});
|
|
862
|
-
await actions.rawUpdate([{ type: "setquirk", data: { key: dim, value: override.initial } }]);
|
|
863
|
-
}
|
|
864
|
-
|
|
865
|
-
// src/components/Personalization/Dimensions.tsx
|
|
866
|
-
var Dimensions = ({
|
|
867
|
-
dimensionIndex: { index: dimensionIndex },
|
|
868
|
-
state: { scores, data },
|
|
869
|
-
actions,
|
|
870
|
-
saveSettings,
|
|
871
|
-
settings
|
|
872
|
-
}) => {
|
|
873
|
-
const remainingDimensions = React4.useMemo(() => {
|
|
874
|
-
const newRemainingDimensions = {};
|
|
875
|
-
Object.keys(dimensionIndex).filter((dimension) => !scores[dimension]).map((key) => {
|
|
876
|
-
newRemainingDimensions[dimensionIndex[key].dim] = 0;
|
|
877
|
-
});
|
|
878
|
-
return newRemainingDimensions;
|
|
879
|
-
}, [scores, dimensionIndex]);
|
|
880
|
-
const activeDims = Object.keys(scores).length;
|
|
881
|
-
const totalDims = activeDims + Object.keys(remainingDimensions).length;
|
|
882
|
-
const toggleControlGroup = () => {
|
|
883
|
-
actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
|
|
884
|
-
};
|
|
885
|
-
return /* @__PURE__ */ (0, import_react.jsx)(React4.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("article", {
|
|
886
|
-
css: styles.page
|
|
887
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
888
|
-
css: styles.headingGroup
|
|
889
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("h2", {
|
|
890
|
-
css: styles.title
|
|
891
|
-
}, "Dimensions", /* @__PURE__ */ (0, import_react.jsx)("small", null, activeDims, " active of ", totalDims)), /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
892
|
-
css: styles.reset
|
|
893
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(LinkButton, {
|
|
894
|
-
onClick: () => deleteScoreOverrides({ actions, saveSettings, scores, settings }).then(actions.forget)
|
|
895
|
-
}, "clear all dimensions")), /* @__PURE__ */ (0, import_react.jsx)(SwitchInput, {
|
|
896
|
-
label: "Control Group",
|
|
897
|
-
onChange: toggleControlGroup,
|
|
898
|
-
checked: data.controlGroup
|
|
899
|
-
})), activeDims > 0 ? /* @__PURE__ */ (0, import_react.jsx)(DimensionsTable_default, {
|
|
900
|
-
dimensionIndex,
|
|
901
|
-
dimensions: scores
|
|
902
|
-
}) : /* @__PURE__ */ (0, import_react.jsx)(NoActiveDimensions, {
|
|
903
|
-
title: data.controlGroup ? "In control group" : "No active dimensions",
|
|
904
|
-
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.",
|
|
905
|
-
buttonGroup: data.controlGroup ? /* @__PURE__ */ (0, import_react.jsx)(Button, {
|
|
906
|
-
buttonType: "secondary",
|
|
907
|
-
onClick: toggleControlGroup
|
|
908
|
-
}, "Exit control group") : null
|
|
909
|
-
}), /* @__PURE__ */ (0, import_react.jsx)(Accordion, null, /* @__PURE__ */ (0, import_react.jsx)(AccordionItem, {
|
|
910
|
-
title: `Inactive Dimensions (${Object.keys(remainingDimensions).length})`
|
|
911
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(DimensionsTable_default, {
|
|
912
|
-
dimensionIndex,
|
|
913
|
-
dimensions: remainingDimensions
|
|
914
|
-
})))));
|
|
915
|
-
};
|
|
916
|
-
|
|
917
|
-
// src/components/Personalization/Overrides.tsx
|
|
918
|
-
var React5 = __toESM(require("react"));
|
|
919
|
-
|
|
920
|
-
// src/components/CallToAction/AddButton.tsx
|
|
921
|
-
var import_react13 = require("@emotion/react");
|
|
922
|
-
function AddButton({
|
|
923
|
-
onClick
|
|
924
|
-
}) {
|
|
925
|
-
return /* @__PURE__ */ (0, import_react.jsx)("button", {
|
|
926
|
-
css: import_react13.css`
|
|
927
|
-
width: 3.5rem;
|
|
928
|
-
height: 3.5rem;
|
|
929
|
-
display: flex;
|
|
930
|
-
align-items: center;
|
|
931
|
-
border-radius: 9999px;
|
|
932
|
-
border: none;
|
|
933
|
-
cursor: pointer;
|
|
934
|
-
background-color: var(--red-button);
|
|
935
|
-
|
|
936
|
-
svg {
|
|
937
|
-
color: var(--red-button);
|
|
938
|
-
}
|
|
939
|
-
`,
|
|
940
|
-
onClick,
|
|
941
|
-
"aria-label": "Add new override",
|
|
942
|
-
className: "text-secondary shadow-xl rounded-full flex items-center bg-secondary",
|
|
943
|
-
"data-test-id": "add-new-overrides-button"
|
|
944
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("svg", {
|
|
945
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
946
|
-
width: "66",
|
|
947
|
-
height: "66",
|
|
948
|
-
viewBox: "0 0 66 66"
|
|
949
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("g", {
|
|
950
|
-
fill: "none",
|
|
951
|
-
fillRule: "evenodd"
|
|
952
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("circle", {
|
|
953
|
-
cx: "33",
|
|
954
|
-
cy: "33",
|
|
955
|
-
r: "33",
|
|
956
|
-
fill: "currentColor"
|
|
957
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("g", {
|
|
958
|
-
fill: "#FFF",
|
|
959
|
-
transform: "translate(19 19)"
|
|
960
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("rect", {
|
|
961
|
-
width: "4",
|
|
962
|
-
height: "28",
|
|
963
|
-
x: "12",
|
|
964
|
-
rx: "2"
|
|
965
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("path", {
|
|
966
|
-
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",
|
|
967
|
-
transform: "rotate(90 14 14)"
|
|
968
|
-
})))));
|
|
969
|
-
}
|
|
970
|
-
|
|
971
|
-
// src/components/Personalization/Overrides.tsx
|
|
972
|
-
var Overrides = ({
|
|
973
|
-
dimensionIndex: { index: dimensionIndex },
|
|
974
|
-
state: { data, scores },
|
|
975
|
-
actions,
|
|
976
|
-
settings,
|
|
977
|
-
saveSettings
|
|
978
|
-
}) => {
|
|
979
|
-
var _a;
|
|
980
|
-
const overrides = (_a = settings.scoreOverrides) != null ? _a : {};
|
|
981
|
-
const totalOverrides = Object.keys(overrides).length;
|
|
982
|
-
const addNewOverride = (e) => {
|
|
983
|
-
e.preventDefault();
|
|
984
|
-
return saveSettings({ ...settings, route: "/overrides/add" });
|
|
985
|
-
};
|
|
986
|
-
const toggleControlGroup = () => {
|
|
987
|
-
actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
|
|
988
|
-
};
|
|
989
|
-
const scoresAffectedByOverrides = {};
|
|
990
|
-
Object.entries(scores).map(([key, value]) => {
|
|
991
|
-
if (overrides[key] !== void 0) {
|
|
992
|
-
scoresAffectedByOverrides[key] = value;
|
|
993
|
-
}
|
|
994
|
-
});
|
|
995
|
-
return /* @__PURE__ */ (0, import_react.jsx)(React5.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("article", {
|
|
996
|
-
css: styles.page
|
|
997
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
998
|
-
css: styles.headingGroup
|
|
999
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("h2", {
|
|
1000
|
-
css: styles.title
|
|
1001
|
-
}, "What if?"), /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
1002
|
-
css: styles.reset
|
|
1003
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(LinkButton, {
|
|
1004
|
-
onClick: () => deleteScoreOverrides({ actions, settings, saveSettings, scores })
|
|
1005
|
-
}, "delete all overrides")), /* @__PURE__ */ (0, import_react.jsx)(AddButton, {
|
|
1006
|
-
onClick: addNewOverride
|
|
1007
|
-
})), /* @__PURE__ */ (0, import_react.jsx)("p", null, "Override dimension scores to test personalization"), totalOverrides > 0 ? /* @__PURE__ */ (0, import_react.jsx)(DimensionsTable_default, {
|
|
1008
|
-
dimensionIndex,
|
|
1009
|
-
dimensions: scoresAffectedByOverrides,
|
|
1010
|
-
onClick: (dim) => saveSettings({ ...settings, route: `/overrides/${dim}` })
|
|
1011
|
-
}) : /* @__PURE__ */ (0, import_react.jsx)(NoActiveDimensions, {
|
|
1012
|
-
title: data.controlGroup ? "In control group" : "No overrides",
|
|
1013
|
-
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.",
|
|
1014
|
-
buttonGroup: data.controlGroup ? /* @__PURE__ */ (0, import_react.jsx)(Button, {
|
|
1015
|
-
buttonType: "secondary",
|
|
1016
|
-
onClick: toggleControlGroup
|
|
1017
|
-
}, "Exit control group") : null
|
|
1018
|
-
})));
|
|
1019
|
-
};
|
|
1020
|
-
|
|
1021
|
-
// src/components/Personalization/AddOverride.tsx
|
|
1022
|
-
var import_formik3 = require("formik");
|
|
1023
|
-
var yup = __toESM(require("yup"));
|
|
1024
|
-
|
|
1025
|
-
// src/components/Inputs/SelectInput.tsx
|
|
1026
|
-
var import_formik = require("formik");
|
|
1027
|
-
|
|
1028
|
-
// src/components/Inputs/inputs.styles.ts
|
|
1029
|
-
var import_react14 = require("@emotion/react");
|
|
1030
|
-
var textInput = import_react14.css`
|
|
301
|
+
`,dangerouslySetInnerHTML:{__html:r}})};var Xt=({dimensionIndex:t,dimensions:r,disableEditOverride:n,onClick:o,preemptiveOverrides:i})=>{var p;let{settings:a}=W(),l=(p=i!=null?i:a.scoreOverrides)!=null?p:{};return(0,e.jsx)(re,null,(0,e.jsx)(ne,null,Object.entries(r).sort(([m],[u])=>m.localeCompare(u)).map(([m,u])=>{var y;let{dim:s,name:d,type:c,category:v}=(y=t[m])!=null?y:{name:m,dim:m,type:void 0,category:void 0},f=l[s];return(0,e.jsx)(z,{key:s},(0,e.jsx)(V,null,f!==void 0?(0,e.jsx)("s",{css:ze},f.initial):null,(0,e.jsx)("b",{css:Ze},u,f!==void 0&&(0,e.jsx)("i",{css:Ue}))),(0,e.jsx)(V,null,(0,e.jsx)("div",{onClick:()=>o==null?void 0:o(s),css:o?{cursor:"pointer"}:void 0},(0,e.jsx)("span",{css:h.divider,role:"presentation"}),(0,e.jsx)("div",null,(0,e.jsx)($e,{type:c})," ",c),(0,e.jsx)("strong",null,v?`${v}:`:""," ",d))),(0,e.jsx)(V,{alignment:"right",color:"light"},f!==void 0&&!n?(0,e.jsx)(F,{route:`/overrides/${s}`},"Edit override"):null))})))},A=Xt;async function ae({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 Ke({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}}])}var Ce=require("@uniformdev/design-system"),We=require("@uniformdev/design-system"),Ye=({dimensionIndex:{index:t},state:{scores:r,data:n},actions:o,saveSettings:i,settings:a})=>{let l=ce.useMemo(()=>{let s={};return Object.keys(t).filter(d=>!r[d]).map(d=>{s[t[d].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(0,e.jsx)(ce.Fragment,null,(0,e.jsx)("article",{css:h.page},(0,e.jsx)("div",{css:h.headingGroup},(0,e.jsx)("h2",{css:h.title},"Dimensions",(0,e.jsx)("small",null,p," active of ",m)),(0,e.jsx)("div",{css:h.reset},(0,e.jsx)(Ce.Button,{buttonType:"ghost",onClick:()=>ae({actions:o,saveSettings:i,scores:r,settings:a}).then(o.forget)},"clear all dimensions")),(0,e.jsx)(We.Switch,{name:"controlGroup",label:"Control Group",onChange:u,checked:n.controlGroup})),p>0?(0,e.jsx)(A,{dimensionIndex:t,dimensions:r}):(0,e.jsx)(q,{title:n.controlGroup?"In control group":"No active dimensions",text:n.controlGroup?"You are part of the personalization control group. While in the control group you do not have dimension scores and will not see personalized content. A/B tests will still run.":"You do not have score in any dimensions yet.",buttonGroup:n.controlGroup?(0,e.jsx)(Ce.Button,{buttonType:"secondary",onClick:u},"Exit control group"):null}),(0,e.jsx)(J,null,(0,e.jsx)(X,{title:`Inactive Dimensions (${Object.keys(l).length})`},(0,e.jsx)(A,{dimensionIndex:t,dimensions:l})))))};var Je=x(require("react"));var Xe=require("@uniformdev/design-system");var we=require("@uniformdev/design-system"),je=({dimensionIndex:{index:t},state:{data:r,scores:n},actions:o,settings:i,saveSettings:a})=>{var d;let l=(d=i.scoreOverrides)!=null?d:{},p=Object.keys(l).length,m=c=>(c==null||c.preventDefault(),a({...i,route:"/overrides/add"})),u=()=>{o.rawUpdate([{type:"setcontrol",data:!r.controlGroup}])},s={};return Object.entries(n).map(([c,v])=>{l[c]!==void 0&&(s[c]=v)}),(0,e.jsx)(Je.Fragment,null,(0,e.jsx)("article",{css:h.page},(0,e.jsx)("div",{css:h.headingGroup},(0,e.jsx)("h2",{css:h.title},"What if?"),(0,e.jsx)("div",{css:h.reset},(0,e.jsx)(we.Button,{buttonType:"ghost",onClick:()=>ae({actions:o,settings:i,saveSettings:a,scores:n})},"delete all overrides")),(0,e.jsx)(Xe.AddButton,{onClick:m})),(0,e.jsx)("p",null,"Override dimension scores to test personalization"),p>0?(0,e.jsx)(A,{dimensionIndex:t,dimensions:s,onClick:c=>a({...i,route:`/overrides/${c}`})}):(0,e.jsx)(q,{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?(0,e.jsx)(we.Button,{buttonType:"secondary",onClick:u},"Exit control group"):null})))};var B=require("formik");var N=x(require("yup"));var I=require("@emotion/react"),et=I.css`
|
|
1031
302
|
background: var(--white);
|
|
1032
303
|
border: 1px solid var(--gray-500);
|
|
1033
304
|
border-radius: var(--rounded-base);
|
|
@@ -1038,50 +309,26 @@ var textInput = import_react14.css`
|
|
|
1038
309
|
cursor: not-allowed;
|
|
1039
310
|
color: var(--gray-200);
|
|
1040
311
|
}
|
|
1041
|
-
|
|
1042
|
-
var selectInput = import_react14.css`
|
|
1043
|
-
appearance: none;
|
|
1044
|
-
background: var(--white)
|
|
1045
|
-
url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNi4zNDMxNyA3Ljc1NzMyTDQuOTI4OTYgOS4xNzE1NEwxMiAxNi4yNDI2TDE5LjA3MTEgOS4xNzE1N0wxNy42NTY5IDcuNzU3MzVMMTIgMTMuNDE0Mkw2LjM0MzE3IDcuNzU3MzJaIgogICAgZmlsbD0iIzgyODI4MiIKICAvPgo8L3N2Zz4=')
|
|
1046
|
-
no-repeat 98% 50%;
|
|
1047
|
-
border: 1px solid var(--gray-500);
|
|
1048
|
-
border-radius: var(--rounded-base);
|
|
1049
|
-
color: var(--brand-secondary-1);
|
|
1050
|
-
padding: var(--spacing-base);
|
|
1051
|
-
&:disabled {
|
|
1052
|
-
cursor: not-allowed;
|
|
1053
|
-
color: var(--gray-200);
|
|
1054
|
-
}
|
|
1055
|
-
`;
|
|
1056
|
-
var editableInput = import_react14.css`
|
|
1057
|
-
padding: var(--spacing-sm);
|
|
1058
|
-
max-width: 160px;
|
|
1059
|
-
`;
|
|
1060
|
-
var inputWrapper = import_react14.css`
|
|
312
|
+
`,zo=I.css`
|
|
1061
313
|
margin: var(--spacing-base) 0;
|
|
1062
|
-
|
|
1063
|
-
var inputLabel = import_react14.css`
|
|
314
|
+
`,tt=I.css`
|
|
1064
315
|
color: var(--brand-secondary-1);
|
|
1065
316
|
display: flex;
|
|
1066
317
|
flex-direction: column;
|
|
1067
318
|
margin: 0 0 var(--spacing-sm);
|
|
1068
|
-
|
|
1069
|
-
var inputText = import_react14.css`
|
|
319
|
+
`,ot=I.css`
|
|
1070
320
|
color: var(--brand-secondary-1);
|
|
1071
321
|
display: block;
|
|
1072
322
|
flex: 1 100%;
|
|
1073
|
-
font-weight: var(--
|
|
323
|
+
font-weight: var(--fw-bold);
|
|
1074
324
|
margin: 0 0 var(--spacing-sm);
|
|
1075
|
-
|
|
1076
|
-
var inputCaption = import_react14.css`
|
|
325
|
+
`,Uo=I.css`
|
|
1077
326
|
color: var(--gray-600);
|
|
1078
|
-
font-size: var(--
|
|
1079
|
-
|
|
1080
|
-
var errorMsg = import_react14.css`
|
|
327
|
+
font-size: var(--fs-sm);
|
|
328
|
+
`,_o=I.css`
|
|
1081
329
|
color: var(--brand-secondary-5);
|
|
1082
330
|
display: block;
|
|
1083
|
-
|
|
1084
|
-
var rangeInput = import_react14.css`
|
|
331
|
+
`,rt=I.css`
|
|
1085
332
|
flex-direction: row;
|
|
1086
333
|
flex-wrap: wrap;
|
|
1087
334
|
|
|
@@ -1149,1066 +396,28 @@ var rangeInput = import_react14.css`
|
|
|
1149
396
|
flex: 1 0 20%;
|
|
1150
397
|
padding: 10px;
|
|
1151
398
|
}
|
|
1152
|
-
`;
|
|
1153
|
-
|
|
1154
|
-
// src/components/Inputs/SelectInput.tsx
|
|
1155
|
-
var SelectInput = ({ field, form, meta, ...rawProps }) => {
|
|
1156
|
-
const { label, options, caption, ...passThroughProps } = rawProps;
|
|
1157
|
-
return /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
1158
|
-
css: inputWrapper
|
|
1159
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("label", {
|
|
1160
|
-
css: inputLabel
|
|
1161
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
1162
|
-
css: inputText
|
|
1163
|
-
}, label), /* @__PURE__ */ (0, import_react.jsx)("select", {
|
|
1164
|
-
...field,
|
|
1165
|
-
...passThroughProps,
|
|
1166
|
-
css: selectInput
|
|
1167
|
-
}, options.map((o, index) => /* @__PURE__ */ (0, import_react.jsx)("option", {
|
|
1168
|
-
value: o.value,
|
|
1169
|
-
key: index
|
|
1170
|
-
}, o.text)))), caption ? /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
1171
|
-
css: inputCaption
|
|
1172
|
-
}, caption) : null, /* @__PURE__ */ (0, import_react.jsx)(import_formik.ErrorMessage, {
|
|
1173
|
-
component: "div",
|
|
1174
|
-
css: errorMsg,
|
|
1175
|
-
name: field.name
|
|
1176
|
-
}));
|
|
1177
|
-
};
|
|
1178
|
-
|
|
1179
|
-
// src/components/Inputs/DependableSelectBox.tsx
|
|
1180
|
-
var import_formik2 = require("formik");
|
|
1181
|
-
|
|
1182
|
-
// src/components/Inputs/SliderInput.tsx
|
|
1183
|
-
var SliderInput = ({ field, form, meta, ...rawProps }) => {
|
|
1184
|
-
var _a, _b;
|
|
1185
|
-
const { label, caption, min = 0, max = 100, step } = rawProps;
|
|
1186
|
-
return /* @__PURE__ */ (0, import_react.jsx)("div", null, /* @__PURE__ */ (0, import_react.jsx)("label", {
|
|
1187
|
-
css: [inputLabel, rangeInput]
|
|
1188
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
1189
|
-
css: inputText
|
|
1190
|
-
}, label), /* @__PURE__ */ (0, import_react.jsx)("input", {
|
|
1191
|
-
type: "range",
|
|
1192
|
-
min,
|
|
1193
|
-
max,
|
|
1194
|
-
step,
|
|
1195
|
-
...field,
|
|
1196
|
-
value: (_a = field.value) != null ? _a : 0
|
|
1197
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
1198
|
-
className: "value-display"
|
|
1199
|
-
}, (_b = field.value) != null ? _b : 0)), /* @__PURE__ */ (0, import_react.jsx)("p", {
|
|
1200
|
-
css: inputCaption
|
|
1201
|
-
}, caption));
|
|
1202
|
-
};
|
|
1203
|
-
var SliderInput_default = SliderInput;
|
|
1204
|
-
|
|
1205
|
-
// src/components/Inputs/DependableSelectBox.tsx
|
|
1206
|
-
var DependableSelectBox = ({
|
|
1207
|
-
name,
|
|
1208
|
-
label,
|
|
1209
|
-
dimensionToOverride,
|
|
1210
|
-
isSubmitting
|
|
1211
|
-
}) => {
|
|
1212
|
-
const rangeProps = {
|
|
1213
|
-
max: 100,
|
|
1214
|
-
step: 20
|
|
1215
|
-
};
|
|
1216
|
-
if (dimensionToOverride) {
|
|
1217
|
-
rangeProps.max = dimensionToOverride.cap;
|
|
1218
|
-
rangeProps.step = dimensionToOverride.str;
|
|
1219
|
-
}
|
|
1220
|
-
return /* @__PURE__ */ (0, import_react.jsx)(import_formik2.Field, {
|
|
1221
|
-
component: SliderInput_default,
|
|
1222
|
-
label,
|
|
1223
|
-
caption: `Range: 0 - ${rangeProps.max} in increments of ${rangeProps.step}`,
|
|
1224
|
-
id: name,
|
|
1225
|
-
name,
|
|
1226
|
-
disabled: isSubmitting,
|
|
1227
|
-
...rangeProps
|
|
1228
|
-
});
|
|
1229
|
-
};
|
|
1230
|
-
var DependableSelectBox_default = DependableSelectBox;
|
|
1231
|
-
|
|
1232
|
-
// src/components/Form/Fieldset.tsx
|
|
1233
|
-
var import_react15 = require("@emotion/react");
|
|
1234
|
-
var Fieldset = ({ children, ...props }) => {
|
|
1235
|
-
return /* @__PURE__ */ (0, import_react.jsx)("fieldset", {
|
|
1236
|
-
css: import_react15.css`
|
|
399
|
+
`;var de=require("@uniformdev/design-system"),nt=({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(0,e.jsx)("div",null,(0,e.jsx)("label",{css:[tt,rt]},(0,e.jsx)("span",{css:ot},i),(0,e.jsx)("input",{type:"range",min:l,max:p,step:m,...t,value:(u=t.value)!=null?u:0}),(0,e.jsx)("span",{className:"value-display"},(s=t.value)!=null?s:0)),a?(0,e.jsx)(de.Caption,null,a):null,r.touched[t.name]&&r.errors[t.name]?(0,e.jsx)(de.ErrorMessage,{message:r.errors[t.name]}):null)};var it=require("@emotion/react"),E=({children:t,...r})=>(0,e.jsx)("fieldset",{css:it.css`
|
|
1237
400
|
border: none;
|
|
1238
401
|
padding: 0;
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
};
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
var import_react16 = require("@emotion/react");
|
|
1246
|
-
var Legend = ({ children }) => {
|
|
1247
|
-
return /* @__PURE__ */ (0, import_react.jsx)("legend", {
|
|
1248
|
-
css: import_react16.css`
|
|
1249
|
-
font-size: var(--font-md);
|
|
1250
|
-
font-weight: var(--font-bold);
|
|
402
|
+
& legend {
|
|
403
|
+
margin-bottom: var(--spacing-base);
|
|
404
|
+
}
|
|
405
|
+
`,...r},t);var st=require("@emotion/react"),U=({children:t})=>(0,e.jsx)("legend",{css:st.css`
|
|
406
|
+
font-size: var(--fs-md);
|
|
407
|
+
font-weight: var(--fw-bold);
|
|
1251
408
|
border-bottom: 1px solid var(--gray-400);
|
|
1252
409
|
width: 100%;
|
|
1253
|
-
`
|
|
1254
|
-
}, children);
|
|
1255
|
-
};
|
|
1256
|
-
|
|
1257
|
-
// src/lib/computeOverrideEffects.ts
|
|
1258
|
-
var import_context = require("@uniformdev/context");
|
|
1259
|
-
function computeOverrideEffects({ manifest, visitor, override }) {
|
|
1260
|
-
const contextCopy = new import_context.Context({
|
|
1261
|
-
manifest,
|
|
1262
|
-
transitionStore: new CopyTransitionDataStore({ initialData: visitor })
|
|
1263
|
-
});
|
|
1264
|
-
const currentScores = { ...contextCopy.scores };
|
|
1265
|
-
contextCopy.storage.updateData([override]);
|
|
1266
|
-
const newScores = { ...contextCopy.scores };
|
|
1267
|
-
const changes = { ...newScores };
|
|
1268
|
-
Object.entries(changes).forEach(([key, value]) => {
|
|
1269
|
-
const oldScore = currentScores[key];
|
|
1270
|
-
if (oldScore === value) {
|
|
1271
|
-
delete changes[key];
|
|
1272
|
-
}
|
|
1273
|
-
});
|
|
1274
|
-
return changes;
|
|
1275
|
-
}
|
|
1276
|
-
var CopyTransitionDataStore = class extends import_context.TransitionDataStore {
|
|
1277
|
-
async handleDelete() {
|
|
1278
|
-
}
|
|
1279
|
-
async handleUpdateData() {
|
|
1280
|
-
}
|
|
1281
|
-
};
|
|
1282
|
-
|
|
1283
|
-
// src/lib/applyOverrides.ts
|
|
1284
|
-
function applyScoreOverrides({
|
|
1285
|
-
scores,
|
|
1286
|
-
scoreOverrides
|
|
1287
|
-
}) {
|
|
1288
|
-
const commands = [];
|
|
1289
|
-
if (!scoreOverrides)
|
|
1290
|
-
return [];
|
|
1291
|
-
Object.entries(scoreOverrides).forEach(([dim, override]) => {
|
|
1292
|
-
var _a;
|
|
1293
|
-
const score = (_a = scores[dim]) != null ? _a : 0;
|
|
1294
|
-
if (score === override.override) {
|
|
1295
|
-
return;
|
|
1296
|
-
}
|
|
1297
|
-
const delta = override.override - score;
|
|
1298
|
-
commands.push({
|
|
1299
|
-
type: "modscoreS",
|
|
1300
|
-
data: { dimension: dim, delta }
|
|
1301
|
-
});
|
|
1302
|
-
});
|
|
1303
|
-
return commands;
|
|
1304
|
-
}
|
|
1305
|
-
function applyQuirkOverrides({
|
|
1306
|
-
quirks,
|
|
1307
|
-
quirkOverrides
|
|
1308
|
-
}) {
|
|
1309
|
-
const quirkVector = {};
|
|
1310
|
-
if (!quirkOverrides)
|
|
1311
|
-
return void 0;
|
|
1312
|
-
Object.entries(quirkOverrides).forEach(([quirk, override]) => {
|
|
1313
|
-
const quirkValue = quirks[quirk];
|
|
1314
|
-
if (quirkValue === override.override) {
|
|
1315
|
-
return;
|
|
1316
|
-
}
|
|
1317
|
-
quirkVector[quirk] = override.override;
|
|
1318
|
-
});
|
|
1319
|
-
return Object.keys(quirkVector).length > 0 ? quirkVector : void 0;
|
|
1320
|
-
}
|
|
1321
|
-
|
|
1322
|
-
// src/components/Personalization/AddOverride.tsx
|
|
1323
|
-
var overrideSettingsSchema = yup.object({
|
|
1324
|
-
dimension: yup.string(),
|
|
1325
|
-
score: yup.number()
|
|
1326
|
-
});
|
|
1327
|
-
var AddOverride = ({
|
|
1328
|
-
settings,
|
|
1329
|
-
saveSettings,
|
|
1330
|
-
state,
|
|
1331
|
-
actions,
|
|
1332
|
-
dimensionIndex: { index }
|
|
1333
|
-
}) => {
|
|
1334
|
-
var _a, _b;
|
|
1335
|
-
const routeParams = settings.route ? [...settings.route.matchAll(/overrides\/(?!.*add)(\w+)?/g)] : [];
|
|
1336
|
-
const overriddenDimension = routeParams[0] ? routeParams[0][1] : "";
|
|
1337
|
-
if (!((_a = state.manifest.project.pz) == null ? void 0 : _a.sig)) {
|
|
1338
|
-
return /* @__PURE__ */ (0, import_react.jsx)("p", null, "Error, manifest is broken or there is no signal to override.");
|
|
1339
|
-
}
|
|
1340
|
-
const overridableDimensions = Object.entries(index).filter(([, value]) => value.type !== "Audience" && value.type !== "Intent").map(([key, value]) => {
|
|
1341
|
-
const type = value.type ? `${value.type}: ` : "";
|
|
1342
|
-
const category = value.category ? `${value.category} - ` : "";
|
|
1343
|
-
const text = `${type}${category}${value.name}`;
|
|
1344
|
-
return {
|
|
1345
|
-
value: key,
|
|
1346
|
-
text
|
|
1347
|
-
};
|
|
1348
|
-
});
|
|
1349
|
-
overridableDimensions.unshift({
|
|
1350
|
-
value: "_none",
|
|
1351
|
-
text: "Choose dimension to override"
|
|
1352
|
-
});
|
|
1353
|
-
return /* @__PURE__ */ (0, import_react.jsx)(import_formik3.Formik, {
|
|
1354
|
-
initialValues: {
|
|
1355
|
-
dimension: overriddenDimension,
|
|
1356
|
-
score: (_b = state.scores[overriddenDimension]) != null ? _b : 0
|
|
1357
|
-
},
|
|
1358
|
-
validationSchema: overrideSettingsSchema,
|
|
1359
|
-
enableReinitialize: true,
|
|
1360
|
-
onSubmit: async (values) => {
|
|
1361
|
-
var _a2, _b2, _c, _d, _e, _f;
|
|
1362
|
-
const cap = (_b2 = (_a2 = index[values.dimension]) == null ? void 0 : _a2.cap) != null ? _b2 : 0;
|
|
1363
|
-
const cappedOverrideScore = Math.min(values.score, cap);
|
|
1364
|
-
const newSettings = {
|
|
1365
|
-
...settings,
|
|
1366
|
-
scoreOverrides: {
|
|
1367
|
-
...settings.scoreOverrides,
|
|
1368
|
-
[values.dimension]: {
|
|
1369
|
-
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,
|
|
1370
|
-
override: cappedOverrideScore
|
|
1371
|
-
}
|
|
1372
|
-
},
|
|
1373
|
-
route: "/overrides"
|
|
1374
|
-
};
|
|
1375
|
-
await saveSettings(newSettings);
|
|
1376
|
-
const applyCommands = applyScoreOverrides({
|
|
1377
|
-
scores: state.scores,
|
|
1378
|
-
scoreOverrides: newSettings.scoreOverrides
|
|
1379
|
-
});
|
|
1380
|
-
actions.rawUpdate(applyCommands);
|
|
1381
|
-
}
|
|
1382
|
-
}, ({ dirty, isValid, isSubmitting, values }) => {
|
|
1383
|
-
var _a2;
|
|
1384
|
-
const overrideEffects = computeOverrideEffects({
|
|
1385
|
-
manifest: state.manifest,
|
|
1386
|
-
visitor: state.data,
|
|
1387
|
-
override: {
|
|
1388
|
-
type: "modscore",
|
|
1389
|
-
data: {
|
|
1390
|
-
dimension: values.dimension,
|
|
1391
|
-
delta: values.score - ((_a2 = state.scores[values.dimension]) != null ? _a2 : 0)
|
|
1392
|
-
}
|
|
1393
|
-
}
|
|
1394
|
-
});
|
|
1395
|
-
const preemptiveOverrides = Object.entries(state.scores).reduce((acc, [key, value]) => {
|
|
1396
|
-
acc[key] = {
|
|
1397
|
-
initial: value,
|
|
1398
|
-
override: value
|
|
1399
|
-
};
|
|
1400
|
-
return acc;
|
|
1401
|
-
}, {});
|
|
1402
|
-
const hasScoreEffects = values.score && Object.keys(overrideEffects).length > 0;
|
|
1403
|
-
return /* @__PURE__ */ (0, import_react.jsx)(import_formik3.Form, {
|
|
1404
|
-
css: styles.page
|
|
1405
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("h1", {
|
|
1406
|
-
css: styles.title
|
|
1407
|
-
}, "Override Dimension"), /* @__PURE__ */ (0, import_react.jsx)(import_formik3.Field, {
|
|
1408
|
-
component: SelectInput,
|
|
1409
|
-
label: "Dimension",
|
|
1410
|
-
id: "dimension",
|
|
1411
|
-
name: "dimension",
|
|
1412
|
-
options: overridableDimensions,
|
|
1413
|
-
disabled: isSubmitting
|
|
1414
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("p", {
|
|
1415
|
-
css: styles.text
|
|
1416
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("small", null, "Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly.")), values.dimension ? /* @__PURE__ */ (0, import_react.jsx)(DependableSelectBox_default, {
|
|
1417
|
-
name: "score",
|
|
1418
|
-
label: "Score",
|
|
1419
|
-
dimensionToOverride: index[values.dimension],
|
|
1420
|
-
isSubmitting
|
|
1421
|
-
}) : null, /* @__PURE__ */ (0, import_react.jsx)(Fieldset, {
|
|
1422
|
-
disabled: isSubmitting,
|
|
1423
|
-
css: { marginBottom: "2rem" }
|
|
1424
|
-
}, hasScoreEffects ? /* @__PURE__ */ (0, import_react.jsx)(Accordion, null, /* @__PURE__ */ (0, import_react.jsx)(AccordionItem, {
|
|
1425
|
-
title: `Impacted Dimensions (${Object.keys(overrideEffects).length})`
|
|
1426
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(DimensionsTable_default, {
|
|
1427
|
-
preemptiveOverrides,
|
|
1428
|
-
dimensionIndex: index,
|
|
1429
|
-
dimensions: overrideEffects,
|
|
1430
|
-
disableEditOverride: true
|
|
1431
|
-
}))) : null, dirty ? /* @__PURE__ */ (0, import_react.jsx)(Button, {
|
|
1432
|
-
type: "submit",
|
|
1433
|
-
css: styles.submitButton,
|
|
1434
|
-
disabled: !isValid
|
|
1435
|
-
}, "Save") : null, /* @__PURE__ */ (0, import_react.jsx)(NavigationLink_default, {
|
|
1436
|
-
route: "/overrides",
|
|
1437
|
-
css: styles.cancelButton
|
|
1438
|
-
}, "Cancel")));
|
|
1439
|
-
});
|
|
1440
|
-
};
|
|
1441
|
-
|
|
1442
|
-
// src/components/Personalization/Quirks.tsx
|
|
1443
|
-
var import_react18 = require("react");
|
|
1444
|
-
|
|
1445
|
-
// src/components/Inputs/EditableText.tsx
|
|
1446
|
-
var import_react17 = require("react");
|
|
1447
|
-
var EditableText = ({ name, value, submit }) => {
|
|
1448
|
-
const [inputValue, setInputValue] = (0, import_react17.useState)(value != null ? value : "");
|
|
1449
|
-
(0, import_react17.useEffect)(() => {
|
|
1450
|
-
setInputValue(value != null ? value : "");
|
|
1451
|
-
}, [value]);
|
|
1452
|
-
const onChange = (e) => {
|
|
1453
|
-
setInputValue(e.target.value);
|
|
1454
|
-
};
|
|
1455
|
-
return /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
1456
|
-
css: { display: "flex", gap: "var(--spacing-sm)" }
|
|
1457
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("input", {
|
|
1458
|
-
type: "text",
|
|
1459
|
-
css: [textInput, editableInput],
|
|
1460
|
-
name,
|
|
1461
|
-
value: inputValue,
|
|
1462
|
-
onChange
|
|
1463
|
-
}), /* @__PURE__ */ (0, import_react.jsx)(Button, {
|
|
1464
|
-
buttonType: "primary",
|
|
1465
|
-
onClick: () => submit(name, inputValue != null ? inputValue : "")
|
|
1466
|
-
}, "Save"));
|
|
1467
|
-
};
|
|
1468
|
-
var EditableText_default = EditableText;
|
|
1469
|
-
|
|
1470
|
-
// src/components/Inputs/EditableSelectBox.tsx
|
|
1471
|
-
var EditableSelectBox = ({ name, value, submit, options }) => {
|
|
1472
|
-
const onChange = (e) => submit(e.target.name, e.target.value);
|
|
1473
|
-
return /* @__PURE__ */ (0, import_react.jsx)("select", {
|
|
1474
|
-
name,
|
|
1475
|
-
defaultValue: value,
|
|
1476
|
-
onChange,
|
|
1477
|
-
css: [selectInput, editableInput]
|
|
1478
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("option", {
|
|
1479
|
-
key: "_none",
|
|
1480
|
-
value: "_none"
|
|
1481
|
-
}, "None"), (options != null ? options : []).map((option) => /* @__PURE__ */ (0, import_react.jsx)("option", {
|
|
1482
|
-
key: option.value,
|
|
1483
|
-
value: option.value
|
|
1484
|
-
}, option.name)));
|
|
1485
|
-
};
|
|
1486
|
-
var EditableSelectBox_default = EditableSelectBox;
|
|
1487
|
-
|
|
1488
|
-
// src/components/Personalization/Quirks.tsx
|
|
1489
|
-
var Quirks = ({ ...props }) => {
|
|
1490
|
-
const {
|
|
1491
|
-
state: {
|
|
1492
|
-
data: { quirks }
|
|
1493
|
-
},
|
|
1494
|
-
quirksIndex: { index: quirksIndex },
|
|
1495
|
-
settings,
|
|
1496
|
-
saveSettings,
|
|
1497
|
-
actions
|
|
1498
|
-
} = props;
|
|
1499
|
-
const [editable, setEditable] = (0, import_react18.useState)("");
|
|
1500
|
-
let editableQuirkMetaData;
|
|
1501
|
-
if (editable) {
|
|
1502
|
-
editableQuirkMetaData = quirksIndex[editable];
|
|
1503
|
-
}
|
|
1504
|
-
const submitOverride = async (name, value) => {
|
|
1505
|
-
var _a, _b, _c;
|
|
1506
|
-
setEditable("");
|
|
1507
|
-
const newSettings = {
|
|
1508
|
-
...settings,
|
|
1509
|
-
quirkOverrides: {
|
|
1510
|
-
...settings.quirkOverrides,
|
|
1511
|
-
[name]: { initial: (_c = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial) != null ? _c : quirks[name], override: value }
|
|
1512
|
-
}
|
|
1513
|
-
};
|
|
1514
|
-
await saveSettings(newSettings);
|
|
1515
|
-
const quirkOverrides = applyQuirkOverrides({
|
|
1516
|
-
quirks,
|
|
1517
|
-
quirkOverrides: newSettings.quirkOverrides
|
|
1518
|
-
});
|
|
1519
|
-
actions.update({ quirks: quirkOverrides });
|
|
1520
|
-
};
|
|
1521
|
-
return /* @__PURE__ */ (0, import_react.jsx)(React.Fragment, null, /* @__PURE__ */ (0, import_react.jsx)("article", {
|
|
1522
|
-
css: styles.page
|
|
1523
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("h1", {
|
|
1524
|
-
css: styles.title
|
|
1525
|
-
}, "Quirks"), /* @__PURE__ */ (0, import_react.jsx)("p", {
|
|
1526
|
-
css: styles.text
|
|
1527
|
-
}, "Keys defined in Uniform and their current, programmatically defined values for this visit."), Object.keys(quirksIndex).length ? /* @__PURE__ */ (0, import_react.jsx)(Table, null, /* @__PURE__ */ (0, import_react.jsx)(THead, null, /* @__PURE__ */ (0, import_react.jsx)(TRow, null, /* @__PURE__ */ (0, import_react.jsx)(THeading, null, "Key"), /* @__PURE__ */ (0, import_react.jsx)(THeading, null, "Value"), /* @__PURE__ */ (0, import_react.jsx)(TData, null, ""))), /* @__PURE__ */ (0, import_react.jsx)(TBody, null, Object.values(quirksIndex).map(({ name, value, id }) => {
|
|
1528
|
-
var _a, _b, _c;
|
|
1529
|
-
const initialValue = (_b = (_a = settings.quirkOverrides) == null ? void 0 : _a[name]) == null ? void 0 : _b.initial;
|
|
1530
|
-
return /* @__PURE__ */ (0, import_react.jsx)(TRow, {
|
|
1531
|
-
key: id,
|
|
1532
|
-
border: "bottom"
|
|
1533
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(TData, null, /* @__PURE__ */ (0, import_react.jsx)("strong", null, name)), /* @__PURE__ */ (0, import_react.jsx)(TData, null, editable !== id ? /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
1534
|
-
onClick: () => {
|
|
1535
|
-
setEditable(id);
|
|
1536
|
-
}
|
|
1537
|
-
}, initialValue ? /* @__PURE__ */ (0, import_react.jsx)("div", null, /* @__PURE__ */ (0, import_react.jsx)("s", null, initialValue)) : null, value) : null, editable === id && editableQuirkMetaData && /* @__PURE__ */ (0, import_react.jsx)(React.Fragment, null, editableQuirkMetaData.options ? /* @__PURE__ */ (0, import_react.jsx)(EditableSelectBox_default, {
|
|
1538
|
-
name: id,
|
|
1539
|
-
value,
|
|
1540
|
-
submit: submitOverride,
|
|
1541
|
-
options: editableQuirkMetaData.options
|
|
1542
|
-
}) : /* @__PURE__ */ (0, import_react.jsx)(EditableText_default, {
|
|
1543
|
-
name: id,
|
|
1544
|
-
value,
|
|
1545
|
-
submit: submitOverride
|
|
1546
|
-
}))), /* @__PURE__ */ (0, import_react.jsx)(TData, null, editable ? null : ((_c = settings.quirkOverrides) == null ? void 0 : _c[id]) ? /* @__PURE__ */ (0, import_react.jsx)(LinkButton, {
|
|
1547
|
-
onClick: () => {
|
|
1548
|
-
deleteQuirkOverride({ quirk: id, settings, saveSettings, actions });
|
|
1549
|
-
}
|
|
1550
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("small", null, "Clear Override")) : /* @__PURE__ */ (0, import_react.jsx)(LinkButton, {
|
|
1551
|
-
onClick: () => {
|
|
1552
|
-
setEditable(id);
|
|
1553
|
-
}
|
|
1554
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("small", null, "Override"))));
|
|
1555
|
-
}))) : /* @__PURE__ */ (0, import_react.jsx)(NoActiveDimensions, {
|
|
1556
|
-
title: "No quirks configured",
|
|
1557
|
-
text: "There are currently no quirks setup. Try to connect to Uniform API to load additional information about Quirks and Quirks without defined value."
|
|
1558
|
-
})));
|
|
1559
|
-
};
|
|
1560
|
-
|
|
1561
|
-
// src/components/Personalization/Settings.tsx
|
|
1562
|
-
var import_formik5 = require("formik");
|
|
1563
|
-
|
|
1564
|
-
// src/components/Inputs/InputText.tsx
|
|
1565
|
-
var import_formik4 = require("formik");
|
|
1566
|
-
var InputText = ({ field, form, meta, ...rawProps }) => {
|
|
1567
|
-
const { label, caption, ...passThroughProps } = rawProps;
|
|
1568
|
-
return /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
1569
|
-
css: inputWrapper
|
|
1570
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("label", {
|
|
1571
|
-
css: inputLabel
|
|
1572
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
1573
|
-
css: inputText
|
|
1574
|
-
}, label), /* @__PURE__ */ (0, import_react.jsx)("input", {
|
|
1575
|
-
type: "text",
|
|
1576
|
-
css: textInput,
|
|
1577
|
-
...field,
|
|
1578
|
-
...passThroughProps
|
|
1579
|
-
})), caption ? /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
1580
|
-
css: inputCaption
|
|
1581
|
-
}, caption) : null, /* @__PURE__ */ (0, import_react.jsx)(import_formik4.ErrorMessage, {
|
|
1582
|
-
component: "div",
|
|
1583
|
-
css: errorMsg,
|
|
1584
|
-
name: field.name
|
|
1585
|
-
}));
|
|
1586
|
-
};
|
|
1587
|
-
|
|
1588
|
-
// src/components/Personalization/Settings.tsx
|
|
1589
|
-
var yup2 = __toESM(require("yup"));
|
|
1590
|
-
var editableSettingsSchema = yup2.object({
|
|
1591
|
-
apiKey: yup2.string().matches(/^uf.+$/, "API keys start with `uf`, double check your API key"),
|
|
1592
|
-
apiHost: yup2.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/, "API host must be a Uniform domain."),
|
|
1593
|
-
logging: yup2.boolean(),
|
|
1594
|
-
projectId: yup2.string().uuid(),
|
|
1595
|
-
consentMode: yup2.boolean()
|
|
1596
|
-
});
|
|
1597
|
-
var Settings = ({
|
|
1598
|
-
settings,
|
|
1599
|
-
saveSettings,
|
|
1600
|
-
actions,
|
|
1601
|
-
state: { data },
|
|
1602
|
-
dimensionIndex: { error, loading }
|
|
1603
|
-
}) => {
|
|
1604
|
-
var _a, _b, _c;
|
|
1605
|
-
return /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Formik, {
|
|
1606
|
-
initialValues: {
|
|
1607
|
-
apiHost: (_a = settings.apiHost) != null ? _a : "",
|
|
1608
|
-
apiKey: (_b = settings.apiKey) != null ? _b : "",
|
|
1609
|
-
projectId: (_c = settings.projectId) != null ? _c : "",
|
|
1610
|
-
consentMode: !!data.consent,
|
|
1611
|
-
logging: settings.logLevel !== "none" && Boolean(settings.logLevel)
|
|
1612
|
-
},
|
|
1613
|
-
validationSchema: editableSettingsSchema,
|
|
1614
|
-
enableReinitialize: true,
|
|
1615
|
-
onSubmit: (values) => {
|
|
1616
|
-
saveSettings({
|
|
1617
|
-
...settings,
|
|
1618
|
-
apiHost: values.apiHost,
|
|
1619
|
-
apiKey: values.apiKey,
|
|
1620
|
-
projectId: values.projectId,
|
|
1621
|
-
logLevel: values.logging ? "debug" : "none",
|
|
1622
|
-
consentMode: values.consentMode
|
|
1623
|
-
});
|
|
1624
|
-
actions.rawUpdate([{ type: "consent", data: values.consentMode }]);
|
|
1625
|
-
}
|
|
1626
|
-
}, ({ dirty, isValid, isSubmitting }) => /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Form, {
|
|
1627
|
-
css: styles.page
|
|
1628
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("h1", {
|
|
1629
|
-
css: styles.title
|
|
1630
|
-
}, "Settings"), /* @__PURE__ */ (0, import_react.jsx)(Fieldset, {
|
|
1631
|
-
disabled: isSubmitting
|
|
1632
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(Legend, null, "Data Connection"), !loading && error ? /* @__PURE__ */ (0, import_react.jsx)("p", {
|
|
1633
|
-
css: styles.error
|
|
1634
|
-
}, "Unable to fetch data from Uniform", /* @__PURE__ */ (0, import_react.jsx)("br", null), /* @__PURE__ */ (0, import_react.jsx)("em", null, error.message)) : null, /* @__PURE__ */ (0, import_react.jsx)("p", {
|
|
1635
|
-
css: styles.text
|
|
1636
|
-
}, /* @__PURE__ */ (0, import_react.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__ */ (0, import_react.jsx)(import_formik5.Field, {
|
|
1637
|
-
component: InputText,
|
|
1638
|
-
label: "Uniform API key",
|
|
1639
|
-
caption: "Generate an API key in your Uniform team settings. Grant only Context: Read Drafts permission.",
|
|
1640
|
-
id: "api-key",
|
|
1641
|
-
name: "apiKey",
|
|
1642
|
-
autoComplete: "off"
|
|
1643
|
-
}), /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Field, {
|
|
1644
|
-
component: InputText,
|
|
1645
|
-
label: "Uniform Project ID",
|
|
1646
|
-
caption: "Available to copy after generating an API key",
|
|
1647
|
-
id: "project-id",
|
|
1648
|
-
name: "projectId",
|
|
1649
|
-
autoComplete: "off"
|
|
1650
|
-
}), /* @__PURE__ */ (0, import_react.jsx)(Accordion, null, /* @__PURE__ */ (0, import_react.jsx)(AccordionItem, {
|
|
1651
|
-
title: "Advanced"
|
|
1652
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Field, {
|
|
1653
|
-
component: InputText,
|
|
1654
|
-
label: "Alternative API Host",
|
|
1655
|
-
caption: "Use a non-standard Uniform API endpoint. Most people will not not need this option.",
|
|
1656
|
-
id: "api-host",
|
|
1657
|
-
name: "apiHost",
|
|
1658
|
-
autoComplete: "off"
|
|
1659
|
-
}))), /* @__PURE__ */ (0, import_react.jsx)(Fieldset, null, /* @__PURE__ */ (0, import_react.jsx)(Legend, null, "Storage Consent"), /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Field, {
|
|
1660
|
-
component: FormikSwitchInput,
|
|
1661
|
-
label: "Store visitor data",
|
|
1662
|
-
id: "consent-mode",
|
|
1663
|
-
name: "consentMode"
|
|
1664
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("p", null, /* @__PURE__ */ (0, import_react.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__ */ (0, import_react.jsx)(Fieldset, null, /* @__PURE__ */ (0, import_react.jsx)(Legend, null, "Logging"), /* @__PURE__ */ (0, import_react.jsx)(import_formik5.Field, {
|
|
1665
|
-
component: FormikSwitchInput,
|
|
1666
|
-
label: "Write Uniform Context diagnostic logs to browser console",
|
|
1667
|
-
id: "logging",
|
|
1668
|
-
name: "logging"
|
|
1669
|
-
})), dirty ? /* @__PURE__ */ (0, import_react.jsx)(Button, {
|
|
1670
|
-
type: "submit",
|
|
1671
|
-
css: styles.submitButton,
|
|
1672
|
-
disabled: !isValid
|
|
1673
|
-
}, "Save") : null)));
|
|
1674
|
-
};
|
|
1675
|
-
|
|
1676
|
-
// src/components/CallToAction/ConnectApiKey.tsx
|
|
1677
|
-
var ConnectApiKey = ({ settings, saveSettings }) => {
|
|
1678
|
-
const handleRedirect = () => {
|
|
1679
|
-
saveSettings({ ...settings, route: "/settings" });
|
|
1680
|
-
};
|
|
1681
|
-
const dismissPrompt = () => {
|
|
1682
|
-
saveSettings({ ...settings, ignoreApiKeyPrompt: true });
|
|
1683
|
-
};
|
|
1684
|
-
const missingApiKey = !(settings == null ? void 0 : settings.apiKey);
|
|
1685
|
-
return !settings.ignoreApiKeyPrompt && missingApiKey ? /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
1686
|
-
css: [cta, ctaWithIcon]
|
|
1687
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("h2", {
|
|
1688
|
-
css: ctaTitle
|
|
1689
|
-
}, "Connect this site"), /* @__PURE__ */ (0, import_react.jsx)("p", {
|
|
1690
|
-
css: ctaText
|
|
1691
|
-
}, "Add a Uniform API key to get better data."), /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
1692
|
-
css: ctaBtnGroup
|
|
1693
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(Button, {
|
|
1694
|
-
buttonType: "secondary",
|
|
1695
|
-
onClick: handleRedirect
|
|
1696
|
-
}, "Connect this site"), /* @__PURE__ */ (0, import_react.jsx)(Button, {
|
|
1697
|
-
buttonType: "ghost",
|
|
1698
|
-
onClick: dismissPrompt
|
|
1699
|
-
}, "Skip for now")), /* @__PURE__ */ (0, import_react.jsx)("button", {
|
|
1700
|
-
type: "button",
|
|
1701
|
-
css: ctaClose,
|
|
1702
|
-
title: "close",
|
|
1703
|
-
onClick: dismissPrompt
|
|
1704
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
1705
|
-
hidden: true
|
|
1706
|
-
}, "Close"))) : null;
|
|
1707
|
-
};
|
|
1708
|
-
|
|
1709
|
-
// src/hooks/useDimensionIndex.ts
|
|
1710
|
-
var import_api = require("@uniformdev/context/api");
|
|
1711
|
-
var import_react_use = require("react-use");
|
|
1712
|
-
var React6 = __toESM(require("react"));
|
|
1713
|
-
function useDimensionIndex({ apiHost, apiKey, projectId }, manifest) {
|
|
1714
|
-
const { loading, error, value } = (0, import_react_use.useAsync)(async () => {
|
|
1715
|
-
if (!apiKey || !projectId) {
|
|
1716
|
-
return manifestData;
|
|
1717
|
-
}
|
|
1718
|
-
const client = new import_api.DimensionClient({
|
|
1719
|
-
projectId,
|
|
1720
|
-
apiKey,
|
|
1721
|
-
apiHost: apiHost ? apiHost : void 0
|
|
1722
|
-
});
|
|
1723
|
-
const dimensions = (await client.get()).dimensions;
|
|
1724
|
-
const result = {};
|
|
1725
|
-
dimensions.map((dimension) => {
|
|
1726
|
-
var _a, _b, _c, _d;
|
|
1727
|
-
result[dimension.dim] = {
|
|
1728
|
-
...(0, import_api.computeDimensionDefinitionDisplayData)(dimension),
|
|
1729
|
-
cap: dimension.cap,
|
|
1730
|
-
str: 10
|
|
1731
|
-
};
|
|
1732
|
-
if (result[dimension.dim].type === "Enrichment") {
|
|
1733
|
-
const enrId = dimension.dim.split("_")[0];
|
|
1734
|
-
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;
|
|
1735
|
-
}
|
|
1736
|
-
});
|
|
1737
|
-
return result;
|
|
1738
|
-
}, [apiHost, apiKey, projectId]);
|
|
1739
|
-
const manifestData = React6.useMemo(() => {
|
|
1740
|
-
var _a, _b, _c, _d;
|
|
1741
|
-
const data = {};
|
|
1742
|
-
if (!manifest) {
|
|
1743
|
-
return data;
|
|
1744
|
-
}
|
|
1745
|
-
Object.entries((_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.sig) != null ? _b : {}).map(([dimensionId, dimension]) => {
|
|
1746
|
-
const dim = (0, import_api.computeDimensionDisplayData)(dimensionId, manifest);
|
|
1747
|
-
if (dim) {
|
|
1748
|
-
data[dimensionId] = { ...dimension, ...dim };
|
|
1749
|
-
}
|
|
1750
|
-
});
|
|
1751
|
-
Object.entries((_d = (_c = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _c.enr) != null ? _d : {}).map(([dimensionId, enr]) => {
|
|
1752
|
-
var _a2;
|
|
1753
|
-
const dim = (0, import_api.computeDimensionDisplayData)(dimensionId, manifest);
|
|
1754
|
-
const signal = { cap: (_a2 = enr.cap) != null ? _a2 : 100, str: 10 };
|
|
1755
|
-
if (dim) {
|
|
1756
|
-
data[dimensionId] = { ...dim, cap: signal.cap, str: signal.str };
|
|
1757
|
-
}
|
|
1758
|
-
});
|
|
1759
|
-
if (value) {
|
|
1760
|
-
Object.entries(value).map(([dimensionId, dimension]) => {
|
|
1761
|
-
data[dimensionId] = {
|
|
1762
|
-
...data[dimensionId],
|
|
1763
|
-
...dimension
|
|
1764
|
-
};
|
|
1765
|
-
});
|
|
1766
|
-
}
|
|
1767
|
-
return data;
|
|
1768
|
-
}, [manifest, value]);
|
|
1769
|
-
return {
|
|
1770
|
-
loading,
|
|
1771
|
-
error,
|
|
1772
|
-
index: manifestData
|
|
1773
|
-
};
|
|
1774
|
-
}
|
|
1775
|
-
|
|
1776
|
-
// src/hooks/useQuirkIndex.ts
|
|
1777
|
-
var import_react19 = require("react");
|
|
1778
|
-
var import_api2 = require("@uniformdev/context/api");
|
|
1779
|
-
var import_react_use2 = require("react-use");
|
|
1780
|
-
function useQuirkIndex({ apiHost, apiKey, projectId }, quirksData) {
|
|
1781
|
-
const { loading, error, value } = (0, import_react_use2.useAsync)(async () => {
|
|
1782
|
-
if (!apiKey || !projectId) {
|
|
1783
|
-
return {};
|
|
1784
|
-
}
|
|
1785
|
-
const client = new import_api2.QuirkClient({
|
|
1786
|
-
projectId,
|
|
1787
|
-
apiKey,
|
|
1788
|
-
apiHost: apiHost ? apiHost : void 0
|
|
1789
|
-
});
|
|
1790
|
-
const quirksResponse = await client.get();
|
|
1791
|
-
const quirksIndexData = {};
|
|
1792
|
-
quirksResponse.quirks.map((quirkData) => {
|
|
1793
|
-
quirksIndexData[quirkData.id] = { ...quirkData, value: quirksData[quirkData.id] };
|
|
1794
|
-
});
|
|
1795
|
-
return quirksIndexData;
|
|
1796
|
-
}, [apiHost, apiKey, projectId]);
|
|
1797
|
-
const contextStateQuirkData = (0, import_react19.useMemo)(() => {
|
|
1798
|
-
const data = {};
|
|
1799
|
-
Object.entries(quirksData).map(([quirkId, queryrValue]) => data[quirkId] = {
|
|
1800
|
-
value: queryrValue,
|
|
1801
|
-
id: quirkId,
|
|
1802
|
-
name: quirkId
|
|
1803
|
-
});
|
|
1804
|
-
if (value) {
|
|
1805
|
-
Object.entries(value).map(([quirkId, quirkValue]) => data[quirkId] = {
|
|
1806
|
-
...quirkValue,
|
|
1807
|
-
value: quirksData[quirkId]
|
|
1808
|
-
});
|
|
1809
|
-
}
|
|
1810
|
-
return data;
|
|
1811
|
-
}, [quirksData, value]);
|
|
1812
|
-
return {
|
|
1813
|
-
loading,
|
|
1814
|
-
error,
|
|
1815
|
-
index: contextStateQuirkData
|
|
1816
|
-
};
|
|
1817
|
-
}
|
|
1818
|
-
|
|
1819
|
-
// src/components/ContextDevTools.tsx
|
|
1820
|
-
var import_react21 = require("@emotion/react");
|
|
1821
|
-
|
|
1822
|
-
// src/styles/Theme.tsx
|
|
1823
|
-
function Theme() {
|
|
1824
|
-
return /* @__PURE__ */ (0, import_react.jsx)("style", null, `
|
|
410
|
+
`},t);var le=require("@uniformdev/context");function at({manifest:t,visitor:r,override:n}){let o=new le.Context({manifest:t,transitionStore:new ke({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 ke=class extends le.TransitionDataStore{async handleDelete(){}async handleUpdateData(){}};function _({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 pe({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}var dt=require("@uniformdev/design-system");var Te=t=>({field:r,form:n,meta:o,...i})=>(0,e.jsx)(t,{...i,...r,errorMessage:n.errors[r.name]});var me=require("@uniformdev/design-system"),ue=Te(me.Input),ct=Te(me.InputSelect);var jt=N.object({dimension:N.string(),score:N.number()}),De=({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(0,e.jsx)("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,d])=>{let c=d.type?`${d.type}: `:"",v=d.category?`${d.category} - `:"",f=`${c}${v}${d.name}`;return{value:s,label:f}});return p.unshift({value:"",label:"Choose dimension to override"}),(0,e.jsx)(B.Formik,{initialValues:{dimension:l,score:(u=n.scores[l])!=null?u:0},validate:s=>{let d={};return(s.score===n.scores[s.dimension]||s.score===0&&!n.scores[l])&&(d.score="You have to modify current score value"),d},validationSchema:jt,enableReinitialize:!0,validateOnChange:!1,validateOnBlur:!1,onSubmit:async s=>{var y,C,w,D,Z,Pe;let d=(C=(y=i[s.dimension])==null?void 0:y.cap)!=null?C:0,c=Math.min(s.score,d),v={...t,scoreOverrides:{...t.scoreOverrides,[s.dimension]:{initial:(Pe=(Z=(D=(w=t.scoreOverrides)==null?void 0:w[s.dimension])==null?void 0:D.initial)!=null?Z:n.scores[s.dimension])!=null?Pe:0,override:c}},route:"/overrides"};await r(v);let f=_({scores:n.scores,scoreOverrides:v.scoreOverrides});o.rawUpdate(f)}},({isSubmitting:s,values:d})=>{var C;let c=at({manifest:n.manifest,visitor:n.data,override:{type:"modscore",data:{dimension:d.dimension,delta:d.score-((C=n.scores[d.dimension])!=null?C:0)}}}),v=Object.entries(n.scores).reduce((w,[D,Z])=>(w[D]={initial:Z,override:Z},w),{}),f={max:100,step:50};i[d.dimension]&&(f.max=i[d.dimension].cap,f.step=i[d.dimension].str);let y=d.score&&Object.keys(c).length>0;return(0,e.jsx)(B.Form,{css:h.page},(0,e.jsx)("h1",{css:h.title},"Override Dimension"),(0,e.jsx)(B.Field,{component:ct,label:"Dimension",id:"dimension",name:"dimension",options:p,disabled:s}),(0,e.jsx)("p",{css:h.text},(0,e.jsx)("small",null,"Audiences and Intents are aggregated from other dimension scores and cannot be overridden directly.")),d.dimension?(0,e.jsx)(B.Field,{component:nt,name:"score",label:"Score",disabled:s,caption:`Range: 0 - ${f.max} in increments of ${f.step}`}):null,(0,e.jsx)(E,{disabled:s,css:{marginBottom:"2rem"}},y?(0,e.jsx)(J,null,(0,e.jsx)(X,{title:`Impacted Dimensions (${Object.keys(c).length})`},(0,e.jsx)(A,{preemptiveOverrides:v,dimensionIndex:i,dimensions:c,disableEditOverride:!0}))):null,(0,e.jsx)(dt.Button,{type:"submit",css:h.submitButton,disabled:s},"Save"),(0,e.jsx)(F,{route:"/overrides",css:h.cancelButton},"Cancel")))})};var pt=require("react");var ge=require("react"),ve=require("@uniformdev/design-system");var eo=({name:t,value:r,submit:n})=>{let[o,i]=(0,ge.useState)(r!=null?r:"");return(0,ge.useEffect)(()=>{i(r!=null?r:"")},[r]),(0,e.jsx)("div",{css:{display:"flex",gap:"var(--spacing-sm)"}},(0,e.jsx)(ve.Input,{type:"text",css:[et],name:t,value:o,onChange:p=>{i(p.target.value)}}),(0,e.jsx)(ve.Button,{buttonType:"primary",disabled:o===r,size:"sm",onClick:()=>n(t,o!=null?o:"")},"Save"))},lt=eo;var G=require("@uniformdev/design-system"),mt=({...t})=>{let{state:{data:{quirks:r}},quirksIndex:{index:n},settings:o,saveSettings:i,actions:a}=t,[l,p]=(0,pt.useState)(""),m;l&&(m=n[l]);let u=async(s,d)=>{var f,y,C;p("");let c={...o,quirkOverrides:{...o.quirkOverrides,[s]:{initial:(C=(y=(f=o.quirkOverrides)==null?void 0:f[s])==null?void 0:y.initial)!=null?C:r[s],override:d}}};await i(c);let v=pe({quirks:r,quirkOverrides:c.quirkOverrides});await a.update({quirks:v})};return(0,e.jsx)(b.Fragment,null,(0,e.jsx)("article",{css:[h.page,h.quirks]},(0,e.jsx)("h1",{css:h.title},"Quirks"),(0,e.jsx)("p",{css:h.text},"Keys defined in Uniform and their current, programmatically defined values for this visit."),Object.keys(n).length?(0,e.jsx)(re,null,(0,e.jsx)(Ne,null,(0,e.jsx)(z,null,(0,e.jsx)(ie,{width:"30%"},"Key"),(0,e.jsx)(ie,{width:"50%"},"Value"),(0,e.jsx)(ie,{width:"20%"},""))),(0,e.jsx)(ne,null,Object.values(n).map(({name:s,value:d,id:c})=>{var y,C,w;let v=(C=(y=o.quirkOverrides)==null?void 0:y[s])==null?void 0:C.initial,f=[];return m&&m.options&&(f=m.options.map(D=>({value:D.value,label:D.name}))),(0,e.jsx)(z,{key:c,border:"bottom"},(0,e.jsx)(V,null,(0,e.jsx)("strong",null,s)),(0,e.jsx)(V,null,l!==c?(0,e.jsx)("div",{onClick:()=>{p(c)}},v?(0,e.jsx)("div",null,(0,e.jsx)("s",null,v)):null,d):null,l===c&&m&&(0,e.jsx)(b.Fragment,null,m.options?(0,e.jsx)(G.InputSelect,{showLabel:!1,label:`Change ${s}`,defaultOption:`Change ${s}`,name:c,onChange:D=>u(D.target.name,D.target.value),options:f}):(0,e.jsx)(lt,{name:c,value:d,submit:u}))),(0,e.jsx)(V,null,l?null:(w=o.quirkOverrides)!=null&&w[c]?(0,e.jsx)(G.Button,{buttonType:"ghost",onClick:()=>{Ke({quirk:c,settings:o,saveSettings:i,actions:a})}},(0,e.jsx)("small",null,"Clear Override")):(0,e.jsx)(G.Button,{buttonType:"ghost",onClick:()=>{p(c)}},(0,e.jsx)("small",null,"Override"))))}))):(0,e.jsx)(q,{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."})))};var ut=require("@uniformdev/design-system"),Se=require("@uniformdev/design-system"),gt=({settings:t,saveSettings:r,actions:n,state:{data:o}})=>(0,e.jsx)("article",{css:[h.page,{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"}]},(0,e.jsx)("h1",{css:h.title},"Settings"),(0,e.jsx)(E,null,(0,e.jsx)(U,null,"Data Connection"),(0,e.jsx)(ut.Button,{buttonType:"tertiary",onClick:()=>{r({...t,route:"/connect"})}},"Manage Connection to Uniform")),(0,e.jsx)(E,null,(0,e.jsx)(U,null,"Storage Consent"),(0,e.jsx)(Se.Switch,{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})}}),(0,e.jsx)("p",null,(0,e.jsx)("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."))),(0,e.jsx)(E,null,(0,e.jsx)(U,null,"Logging"),(0,e.jsx)(Se.Switch,{label:"Write Uniform Context diagnostic logs to browser console",id:"logging",name:"logging",checked:t.logLevel==="debug",onChange:i=>r({...t,logLevel:i.currentTarget.checked?"debug":"none"})})));var Le=require("@uniformdev/design-system");var Oe=({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?(0,e.jsx)("div",{css:[j,Fe]},(0,e.jsx)("h2",{css:ee},"Connect to a Uniform Project"),(0,e.jsx)("p",{css:te},"This allows reading human-readable labels for the dimensions."),(0,e.jsx)("div",{css:oe},(0,e.jsx)(Le.Button,{buttonType:"secondary",onClick:n},"Connect this site"),(0,e.jsx)(Le.Button,{buttonType:"ghost",onClick:o},"Skip for now")),(0,e.jsx)("button",{type:"button",css:qe,title:"close",onClick:o},(0,e.jsx)("span",{hidden:!0},"Close"))):null};var Q=require("@uniformdev/context/api"),vt=require("react-use"),ft=x(require("react"));function ht({apiHost:t,apiKey:r,projectId:n},o){let{loading:i,error:a,value:l}=(0,vt.useAsync)(async()=>{if(!r||!n)return p;let u=(await new Q.DimensionClient({projectId:n,apiKey:r,apiHost:t||void 0}).get()).dimensions,s={};return u.map(d=>{var c,v,f,y;if(s[d.dim]={...(0,Q.computeDimensionDefinitionDisplayData)(d),cap:d.cap,str:10},s[d.dim].type==="Enrichment"){let C=d.dim.split("_")[0];s[d.dim].cap=(y=(f=(v=(c=o==null?void 0:o.project.pz)==null?void 0:c.enr)==null?void 0:v[C])==null?void 0:f.cap)!=null?y:100}}),s},[t,r,n]),p=ft.useMemo(()=>{var u,s,d,c;let m={};return o&&(Object.entries((s=(u=o==null?void 0:o.project.pz)==null?void 0:u.sig)!=null?s:{}).map(([v,f])=>{let y=(0,Q.computeDimensionDisplayData)(v,o);y&&(m[v]={...f,...y})}),Object.entries((c=(d=o==null?void 0:o.project.pz)==null?void 0:d.enr)!=null?c:{}).map(([v,f])=>{var w;let y=(0,Q.computeDimensionDisplayData)(v,o),C={cap:(w=f.cap)!=null?w:100,str:10};y&&(m[v]={...y,cap:C.cap,str:C.str})}),l&&Object.entries(l).map(([v,f])=>{m[v]={...m[v],...f}})),m},[o,l]);return{loading:i,error:a,index:p}}var bt=require("react"),yt=require("@uniformdev/context/api"),Ct=require("react-use");function wt({apiHost:t,apiKey:r,projectId:n},o){let{loading:i,error:a,value:l}=(0,Ct.useAsync)(async()=>{if(!r||!n)return{};let u=await new yt.QuirkClient({projectId:n,apiKey:r,apiHost:t||void 0}).get(),s={};return u.quirks.map(d=>{s[d.id]={...d,value:o[d.id]}}),s},[t,r,n]),p=(0,bt.useMemo)(()=>{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}}var xe=require("@emotion/react"),Ot=require("@uniformdev/design-system");function fe(){return(0,e.jsx)("style",null,`
|
|
1825
411
|
:root {
|
|
1826
|
-
--brand-primary-1: #438fd5; /* bright blue */
|
|
1827
|
-
--brand-primary-2: #f4220b; /* red */
|
|
1828
|
-
--brand-primary-3: #83c6e1; /* slate blue */
|
|
1829
|
-
|
|
1830
|
-
/* secondary colours */
|
|
1831
|
-
--brand-secondary-1: #1f2b34; /* carbon */
|
|
1832
|
-
--brand-secondary-2: #ecf1f1; /* silver */
|
|
1833
|
-
--brand-secondary-3: #2ecdb4; /* teal */
|
|
1834
|
-
--brand-secondary-4: #f6f1c3; /* yellow */
|
|
1835
|
-
--brand-secondary-5: #d9534f; /* brick red */
|
|
1836
|
-
--brand-secondary-6: #dbf6f2; /* mint */
|
|
1837
|
-
|
|
1838
|
-
/* off brand */
|
|
1839
|
-
--input-border: rgba(31, 43, 52, 0.5);
|
|
1840
|
-
|
|
1841
|
-
/* site settings */
|
|
1842
412
|
--site-width: 700px;
|
|
1843
|
-
--min-height: 450px;
|
|
1844
|
-
|
|
1845
|
-
--spacing-base: 1.15rem;
|
|
1846
|
-
--spacing-xs: calc(var(--spacing-base) - 0.75rem);
|
|
1847
|
-
--spacing-sm: calc(var(--spacing-base) - 0.5rem);
|
|
1848
|
-
--spacing-md: calc(var(--spacing-base) * 1.5);
|
|
1849
|
-
--spacing-lg: calc(var(--spacing-base) * 2);
|
|
1850
|
-
--spacing-xl: calc(var(--spacing-base) * 2.5);
|
|
1851
|
-
|
|
1852
|
-
/* font sizes */
|
|
1853
|
-
--font-base: 1rem; /* 16px */
|
|
1854
|
-
--font-xxs: calc(var(--font-base) - 0.5rem);
|
|
1855
|
-
--font-xs: calc(var(--font-base) - 0.25rem);
|
|
1856
|
-
--font-sm: calc(var(--font-base) - 0.125rem); /* 14px */
|
|
1857
|
-
--font-md: calc(var(--font-base) * 1.25);
|
|
1858
|
-
--font-lg: calc(var(--font-base) * 1.5);
|
|
1859
|
-
|
|
1860
|
-
/* font-weight */
|
|
1861
|
-
--font-regular: 400;
|
|
1862
|
-
--font-bold: 700;
|
|
1863
|
-
|
|
1864
|
-
/* brand shadow styles */
|
|
1865
|
-
--shadow-base: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
|
1866
|
-
|
|
1867
|
-
/* rounder corners */
|
|
1868
|
-
--rounded-base: 6px;
|
|
1869
|
-
--rounded-full: 99999px;
|
|
1870
|
-
|
|
1871
|
-
/* gray spectrum */
|
|
1872
|
-
--white: #fff;
|
|
1873
|
-
--gray-50: #f9fafb;
|
|
1874
|
-
--gray-100: #f3f4f6;
|
|
1875
|
-
--gray-200: #e5e7eb;
|
|
1876
|
-
--gray-300: #d1d5db;
|
|
1877
|
-
--gray-400: #9ca3af;
|
|
1878
|
-
--gray-500: #6b7280;
|
|
1879
|
-
--gray-600: #4b5563;
|
|
1880
|
-
--gray-700: #374151;
|
|
1881
|
-
--gray-800: #1f2937;
|
|
1882
|
-
--gray-900: #111827;
|
|
1883
413
|
|
|
1884
414
|
/* Red CTA */
|
|
1885
415
|
--red-button: rgb(217 83 79);
|
|
1886
416
|
--red-tooltip: #D9534F;
|
|
1887
417
|
|
|
1888
|
-
|
|
1889
|
-
--z-10: 10;
|
|
418
|
+
--min-height: 450px;
|
|
1890
419
|
}
|
|
1891
|
-
|
|
1892
|
-
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
|
1893
|
-
|
|
1894
|
-
/*
|
|
1895
|
-
Document
|
|
1896
|
-
========
|
|
1897
|
-
*/
|
|
1898
|
-
|
|
1899
|
-
/**
|
|
1900
|
-
Use a better box model (opinionated).
|
|
1901
|
-
*/
|
|
1902
|
-
|
|
1903
|
-
*,
|
|
1904
|
-
::before,
|
|
1905
|
-
::after {
|
|
1906
|
-
box-sizing: border-box;
|
|
1907
|
-
}
|
|
1908
|
-
|
|
1909
|
-
/**
|
|
1910
|
-
Use a more readable tab size (opinionated).
|
|
1911
|
-
*/
|
|
1912
|
-
|
|
1913
|
-
html {
|
|
1914
|
-
-moz-tab-size: 4;
|
|
1915
|
-
tab-size: 4;
|
|
1916
|
-
}
|
|
1917
|
-
|
|
1918
|
-
/**
|
|
1919
|
-
1. Correct the line height in all browsers.
|
|
1920
|
-
2. Prevent adjustments of font size after orientation changes in iOS.
|
|
1921
|
-
*/
|
|
1922
|
-
|
|
1923
|
-
html {
|
|
1924
|
-
line-height: 1.15; /* 1 */
|
|
1925
|
-
-webkit-text-size-adjust: 100%; /* 2 */
|
|
1926
|
-
}
|
|
1927
|
-
|
|
1928
|
-
/*
|
|
1929
|
-
Sections
|
|
1930
|
-
========
|
|
1931
|
-
*/
|
|
1932
|
-
|
|
1933
|
-
/**
|
|
1934
|
-
Remove the margin in all browsers.
|
|
1935
|
-
*/
|
|
1936
|
-
|
|
1937
|
-
body {
|
|
1938
|
-
margin: 0;
|
|
1939
|
-
}
|
|
1940
|
-
|
|
1941
|
-
/**
|
|
1942
|
-
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
|
1943
|
-
*/
|
|
1944
|
-
|
|
1945
|
-
body {
|
|
1946
|
-
font-family:
|
|
1947
|
-
system-ui,
|
|
1948
|
-
-apple-system, /* Firefox supports this but not yet system-ui */
|
|
1949
|
-
'Segoe UI',
|
|
1950
|
-
Roboto,
|
|
1951
|
-
Helvetica,
|
|
1952
|
-
Arial,
|
|
1953
|
-
sans-serif,
|
|
1954
|
-
'Apple Color Emoji',
|
|
1955
|
-
'Segoe UI Emoji';
|
|
1956
|
-
}
|
|
1957
|
-
|
|
1958
|
-
/*
|
|
1959
|
-
Grouping content
|
|
1960
|
-
================
|
|
1961
|
-
*/
|
|
1962
|
-
|
|
1963
|
-
/**
|
|
1964
|
-
1. Add the correct height in Firefox.
|
|
1965
|
-
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
|
1966
|
-
*/
|
|
1967
|
-
|
|
1968
|
-
hr {
|
|
1969
|
-
height: 0; /* 1 */
|
|
1970
|
-
color: inherit; /* 2 */
|
|
1971
|
-
}
|
|
1972
|
-
|
|
1973
|
-
/*
|
|
1974
|
-
Text-level semantics
|
|
1975
|
-
====================
|
|
1976
|
-
*/
|
|
1977
|
-
|
|
1978
|
-
/**
|
|
1979
|
-
Add the correct text decoration in Chrome, Edge, and Safari.
|
|
1980
|
-
*/
|
|
1981
|
-
|
|
1982
|
-
abbr[title] {
|
|
1983
|
-
text-decoration: underline dotted;
|
|
1984
|
-
}
|
|
1985
|
-
|
|
1986
|
-
/**
|
|
1987
|
-
Add the correct font weight in Edge and Safari.
|
|
1988
|
-
*/
|
|
1989
|
-
|
|
1990
|
-
b,
|
|
1991
|
-
strong {
|
|
1992
|
-
font-weight: bolder;
|
|
1993
|
-
}
|
|
1994
|
-
|
|
1995
|
-
/**
|
|
1996
|
-
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
|
1997
|
-
2. Correct the odd 'em' font sizing in all browsers.
|
|
1998
|
-
*/
|
|
1999
|
-
|
|
2000
|
-
code,
|
|
2001
|
-
kbd,
|
|
2002
|
-
samp,
|
|
2003
|
-
pre {
|
|
2004
|
-
font-family:
|
|
2005
|
-
ui-monospace,
|
|
2006
|
-
SFMono-Regular,
|
|
2007
|
-
Consolas,
|
|
2008
|
-
'Liberation Mono',
|
|
2009
|
-
Menlo,
|
|
2010
|
-
monospace; /* 1 */
|
|
2011
|
-
font-size: 1em; /* 2 */
|
|
2012
|
-
}
|
|
2013
|
-
|
|
2014
|
-
/**
|
|
2015
|
-
Add the correct font size in all browsers.
|
|
2016
|
-
*/
|
|
2017
|
-
|
|
2018
|
-
small {
|
|
2019
|
-
font-size: 80%;
|
|
2020
|
-
}
|
|
2021
|
-
|
|
2022
|
-
/**
|
|
2023
|
-
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
|
2024
|
-
*/
|
|
2025
|
-
|
|
2026
|
-
sub,
|
|
2027
|
-
sup {
|
|
2028
|
-
font-size: 75%;
|
|
2029
|
-
line-height: 0;
|
|
2030
|
-
position: relative;
|
|
2031
|
-
vertical-align: baseline;
|
|
2032
|
-
}
|
|
2033
|
-
|
|
2034
|
-
sub {
|
|
2035
|
-
bottom: -0.25em;
|
|
2036
|
-
}
|
|
2037
|
-
|
|
2038
|
-
sup {
|
|
2039
|
-
top: -0.5em;
|
|
2040
|
-
}
|
|
2041
|
-
|
|
2042
|
-
/*
|
|
2043
|
-
Tabular data
|
|
2044
|
-
============
|
|
2045
|
-
*/
|
|
2046
|
-
|
|
2047
|
-
/**
|
|
2048
|
-
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
|
2049
|
-
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
|
2050
|
-
*/
|
|
2051
|
-
|
|
2052
|
-
table {
|
|
2053
|
-
text-indent: 0; /* 1 */
|
|
2054
|
-
border-color: inherit; /* 2 */
|
|
2055
|
-
}
|
|
2056
|
-
|
|
2057
|
-
/*
|
|
2058
|
-
Forms
|
|
2059
|
-
=====
|
|
2060
|
-
*/
|
|
2061
|
-
|
|
2062
|
-
/**
|
|
2063
|
-
1. Change the font styles in all browsers.
|
|
2064
|
-
2. Remove the margin in Firefox and Safari.
|
|
2065
|
-
*/
|
|
2066
|
-
|
|
2067
|
-
button,
|
|
2068
|
-
input,
|
|
2069
|
-
optgroup,
|
|
2070
|
-
select,
|
|
2071
|
-
textarea {
|
|
2072
|
-
font-family: inherit; /* 1 */
|
|
2073
|
-
font-size: 100%; /* 1 */
|
|
2074
|
-
line-height: 1.15; /* 1 */
|
|
2075
|
-
margin: 0; /* 2 */
|
|
2076
|
-
}
|
|
2077
|
-
|
|
2078
|
-
/**
|
|
2079
|
-
Remove the inheritance of text transform in Edge and Firefox.
|
|
2080
|
-
1. Remove the inheritance of text transform in Firefox.
|
|
2081
|
-
*/
|
|
2082
|
-
|
|
2083
|
-
button,
|
|
2084
|
-
select { /* 1 */
|
|
2085
|
-
text-transform: none;
|
|
2086
|
-
}
|
|
2087
|
-
|
|
2088
|
-
/**
|
|
2089
|
-
Correct the inability to style clickable types in iOS and Safari.
|
|
2090
|
-
*/
|
|
2091
|
-
|
|
2092
|
-
button,
|
|
2093
|
-
[type='button'],
|
|
2094
|
-
[type='reset'],
|
|
2095
|
-
[type='submit'] {
|
|
2096
|
-
-webkit-appearance: button;
|
|
2097
|
-
}
|
|
2098
|
-
|
|
2099
|
-
/**
|
|
2100
|
-
Remove the inner border and padding in Firefox.
|
|
2101
|
-
*/
|
|
2102
|
-
|
|
2103
|
-
::-moz-focus-inner {
|
|
2104
|
-
border-style: none;
|
|
2105
|
-
padding: 0;
|
|
2106
|
-
}
|
|
2107
|
-
|
|
2108
|
-
/**
|
|
2109
|
-
Restore the focus styles unset by the previous rule.
|
|
2110
|
-
*/
|
|
2111
|
-
|
|
2112
|
-
:-moz-focusring {
|
|
2113
|
-
outline: 1px dotted ButtonText;
|
|
2114
|
-
}
|
|
2115
|
-
|
|
2116
|
-
/**
|
|
2117
|
-
Remove the additional ':invalid' styles in Firefox.
|
|
2118
|
-
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
|
|
2119
|
-
*/
|
|
2120
|
-
|
|
2121
|
-
:-moz-ui-invalid {
|
|
2122
|
-
box-shadow: none;
|
|
2123
|
-
}
|
|
2124
|
-
|
|
2125
|
-
/**
|
|
2126
|
-
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
|
2127
|
-
*/
|
|
2128
|
-
|
|
2129
|
-
legend {
|
|
2130
|
-
padding: 0;
|
|
2131
|
-
}
|
|
2132
|
-
|
|
2133
|
-
/**
|
|
2134
|
-
Add the correct vertical alignment in Chrome and Firefox.
|
|
2135
|
-
*/
|
|
2136
|
-
|
|
2137
|
-
progress {
|
|
2138
|
-
vertical-align: baseline;
|
|
2139
|
-
}
|
|
2140
|
-
|
|
2141
|
-
/**
|
|
2142
|
-
Correct the cursor style of increment and decrement buttons in Safari.
|
|
2143
|
-
*/
|
|
2144
|
-
|
|
2145
|
-
::-webkit-inner-spin-button,
|
|
2146
|
-
::-webkit-outer-spin-button {
|
|
2147
|
-
height: auto;
|
|
2148
|
-
}
|
|
2149
|
-
|
|
2150
|
-
/**
|
|
2151
|
-
1. Correct the odd appearance in Chrome and Safari.
|
|
2152
|
-
2. Correct the outline style in Safari.
|
|
2153
|
-
*/
|
|
2154
|
-
|
|
2155
|
-
[type='search'] {
|
|
2156
|
-
-webkit-appearance: textfield; /* 1 */
|
|
2157
|
-
outline-offset: -2px; /* 2 */
|
|
2158
|
-
}
|
|
2159
|
-
|
|
2160
|
-
/**
|
|
2161
|
-
Remove the inner padding in Chrome and Safari on macOS.
|
|
2162
|
-
*/
|
|
2163
|
-
|
|
2164
|
-
::-webkit-search-decoration {
|
|
2165
|
-
-webkit-appearance: none;
|
|
2166
|
-
}
|
|
2167
|
-
|
|
2168
|
-
/**
|
|
2169
|
-
1. Correct the inability to style clickable types in iOS and Safari.
|
|
2170
|
-
2. Change font properties to 'inherit' in Safari.
|
|
2171
|
-
*/
|
|
2172
|
-
|
|
2173
|
-
::-webkit-file-upload-button {
|
|
2174
|
-
-webkit-appearance: button; /* 1 */
|
|
2175
|
-
font: inherit; /* 2 */
|
|
2176
|
-
}
|
|
2177
|
-
|
|
2178
|
-
/*
|
|
2179
|
-
Interactive
|
|
2180
|
-
===========
|
|
2181
|
-
*/
|
|
2182
|
-
|
|
2183
|
-
/*
|
|
2184
|
-
Add the correct display in Chrome and Safari.
|
|
2185
|
-
*/
|
|
2186
|
-
|
|
2187
|
-
summary {
|
|
2188
|
-
display: list-item;
|
|
2189
|
-
}`);
|
|
2190
|
-
}
|
|
2191
|
-
|
|
2192
|
-
// src/components/StatusPages/AdditionalDataLoading.tsx
|
|
2193
|
-
var import_react20 = require("react");
|
|
2194
|
-
var import_react_use3 = require("react-use");
|
|
2195
|
-
var AdditionalDataLoading = () => {
|
|
2196
|
-
const [viz, setViz] = (0, import_react20.useState)(false);
|
|
2197
|
-
const mounted = (0, import_react_use3.useMountedState)();
|
|
2198
|
-
(0, import_react20.useEffect)(() => {
|
|
2199
|
-
setTimeout(() => {
|
|
2200
|
-
if (mounted()) {
|
|
2201
|
-
setViz(true);
|
|
2202
|
-
}
|
|
2203
|
-
}, 1e3);
|
|
2204
|
-
}, [mounted]);
|
|
2205
|
-
return viz ? /* @__PURE__ */ (0, import_react.jsx)("article", {
|
|
2206
|
-
css: styles.page
|
|
2207
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("h1", null, "Loading..."), /* @__PURE__ */ (0, import_react.jsx)("p", null, "Connecting to Uniform API for complete data.")) : null;
|
|
2208
|
-
};
|
|
2209
|
-
|
|
2210
|
-
// src/components/ContextDevTools.tsx
|
|
2211
|
-
var mainLayoutStyle = import_react21.css`
|
|
420
|
+
`)}var he=require("react"),kt=require("react-use");var Tt=()=>{let[t,r]=(0,he.useState)(!1),n=(0,kt.useMountedState)();return(0,he.useEffect)(()=>{setTimeout(()=>{n()&&r(!0)},1e3)},[n]),t?(0,e.jsx)("article",{css:h.page},(0,e.jsx)("h1",null,"Loading..."),(0,e.jsx)("p",null,"Connecting to Uniform API for complete data.")):null};var Dt=require("@uniformdev/context"),be=require("@uniformdev/context/api"),P=require("formik"),T=x(require("react")),O=require("@uniformdev/design-system");function St(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 d=new be.ManifestClient(s);i(void 0);try{let c=await d.get({preview:!0});return l({manifest:c,target:s}),c}catch(c){if(c instanceof be.ApiClientError){c.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(c.errorMessage);return}if("message"in c){c.message==="Failed to fetch"?i("A network error occurred. Ensure the API host is valid."):i(c.message);return}i(JSON.stringify(c,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(0,e.jsx)("div",null,o?(0,e.jsx)(O.ErrorMessage,{message:o}):null,r==="qc"||r==="mc"?(0,e.jsx)(to,{...t,state:r,setState:n,onConnect:m}):(0,e.jsx)("div",null,a?(0,e.jsx)(T.Fragment,null,(0,e.jsx)("p",null,"Connected to"," ",(0,e.jsx)("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"}},(0,e.jsx)("strong",null,a==null?void 0:a.manifest.project.name))," ",(0,e.jsx)("small",null,"(",a==null?void 0:a.manifest.project.id,")")),(0,e.jsx)(O.Button,{buttonType:"secondary",type:"button",onClick:u},"Disconnect")):null))}function to({setState:t,state:r,currentData:n,onConnect:o}){var i,a,l;return(0,e.jsx)("div",null,(0,e.jsx)(P.Formik,{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})=>(0,e.jsx)(P.Form,null,(0,e.jsx)("fieldset",{css:{display:"flex",flexDirection:"column",gap:"var(--spacing-base)"}},r==="qc"?(0,e.jsx)(T.Fragment,null,(0,e.jsx)("div",null,(0,e.jsx)(O.Input,{placeholder:"Paste Quick Connect Code Here",caption:"Copy the Quick Connect code after creating an API key in Uniform.",errorMessage:u,onChange:d=>{try{let c=(0,Dt.parseQuickConnect)(d.currentTarget.value);p("apiHost",c.apiHost),p("apiKey",c.apiKey),p("projectId",c.projectId)}catch(c){m("qc",c.message)}}})),(0,e.jsx)("section",{css:{display:"flex",gap:"var(--spacing-sm)"}},(0,e.jsx)(O.Button,{type:"submit",buttonType:"primary",disabled:s},s?"Verifying...":"Connect"),(0,e.jsx)(O.Button,{type:"button",buttonType:"ghost",onClick:()=>t("mc"),disabled:s},"Connect Manually"))):(0,e.jsx)(T.Fragment,null,(0,e.jsx)("div",null,(0,e.jsx)(P.Field,{component:ue,label:"API Key",name:"apiKey",caption:"Generate an API key in your Uniform team settings."})),(0,e.jsx)("div",null,(0,e.jsx)(P.Field,{component:ue,label:"Project ID",name:"projectId",caption:"Available to copy after generating an API key"})),(0,e.jsx)("div",null,(0,e.jsx)(P.Field,{component:ue,label:"API Host",name:"apiHost",caption:"Use a non-standard Uniform API endpoint. Most people will not not need this option."})),(0,e.jsx)("section",{css:{display:"flex",gap:"var(--spacing-sm)"}},(0,e.jsx)(O.Button,{type:"submit",buttonType:"primary",disabled:s},s?"Verifying...":"Connect"),(0,e.jsx)(O.Button,{type:"button",buttonType:"ghost",onClick:()=>t("qc"),disabled:s},"Use Quick Connect")))))))}var Lt=({settings:t,saveSettings:r})=>{let n=t.apiKey&&t.projectId?{apiKey:t.apiKey,projectId:t.projectId,apiHost:t.apiHost}:void 0;return(0,e.jsx)("article",{css:h.page},(0,e.jsx)("h1",{css:h.title},"Connect to a Uniform Project"),(0,e.jsx)("p",{css:h.text},(0,e.jsx)("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.")),(0,e.jsx)(St,{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 oo=xe.css`
|
|
2212
421
|
background: var(--white);
|
|
2213
422
|
padding: var(--spacing-base);
|
|
2214
423
|
overflow-y: auto;
|
|
@@ -2237,166 +446,16 @@ var mainLayoutStyle = import_react21.css`
|
|
|
2237
446
|
&::-webkit-scrollbar-thumb:hover {
|
|
2238
447
|
background: var(--gray-500);
|
|
2239
448
|
}
|
|
2240
|
-
`;
|
|
2241
|
-
function ContextDevTools(props) {
|
|
2242
|
-
const dimensionIndex = useDimensionIndex(props.settings, props.state.manifest);
|
|
2243
|
-
const quirksIndex = useQuirkIndex(props.settings, props.state.data.quirks);
|
|
2244
|
-
const routeProps = {
|
|
2245
|
-
...props,
|
|
2246
|
-
dimensionIndex,
|
|
2247
|
-
quirksIndex
|
|
2248
|
-
};
|
|
2249
|
-
const component = () => {
|
|
2250
|
-
var _a;
|
|
2251
|
-
if (dimensionIndex.loading || quirksIndex.loading) {
|
|
2252
|
-
return /* @__PURE__ */ (0, import_react.jsx)(AdditionalDataLoading, null);
|
|
2253
|
-
}
|
|
2254
|
-
if (props.settings.route) {
|
|
2255
|
-
if (props.settings.route.match(/overrides\/\w+/)) {
|
|
2256
|
-
return /* @__PURE__ */ (0, import_react.jsx)(AddOverride, {
|
|
2257
|
-
...routeProps
|
|
2258
|
-
});
|
|
2259
|
-
}
|
|
2260
|
-
}
|
|
2261
|
-
switch ((_a = props.settings) == null ? void 0 : _a.route) {
|
|
2262
|
-
case void 0:
|
|
2263
|
-
case "/":
|
|
2264
|
-
case "/dimensions":
|
|
2265
|
-
return /* @__PURE__ */ (0, import_react.jsx)(Dimensions, {
|
|
2266
|
-
...routeProps
|
|
2267
|
-
});
|
|
2268
|
-
case "/overrides":
|
|
2269
|
-
return /* @__PURE__ */ (0, import_react.jsx)(Overrides, {
|
|
2270
|
-
...routeProps
|
|
2271
|
-
});
|
|
2272
|
-
case "/overrides/add":
|
|
2273
|
-
return /* @__PURE__ */ (0, import_react.jsx)(AddOverride, {
|
|
2274
|
-
...routeProps
|
|
2275
|
-
});
|
|
2276
|
-
case "/quirks":
|
|
2277
|
-
return /* @__PURE__ */ (0, import_react.jsx)(Quirks, {
|
|
2278
|
-
...routeProps
|
|
2279
|
-
});
|
|
2280
|
-
case "/settings":
|
|
2281
|
-
return /* @__PURE__ */ (0, import_react.jsx)(Settings, {
|
|
2282
|
-
...routeProps
|
|
2283
|
-
});
|
|
2284
|
-
default:
|
|
2285
|
-
return /* @__PURE__ */ (0, import_react.jsx)(NotFound, null);
|
|
2286
|
-
}
|
|
2287
|
-
};
|
|
2288
|
-
return /* @__PURE__ */ (0, import_react.jsx)(DevToolsSettingsContextProvider, {
|
|
2289
|
-
settings: props.settings,
|
|
2290
|
-
saveSettings: props.saveSettings
|
|
2291
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(Theme, null), /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
2292
|
-
css: import_react21.css`
|
|
449
|
+
`;function Re(t){let r=ht(t.settings,t.state.manifest),n=wt(t.settings,t.state.data.quirks),o={...t,dimensionIndex:r,quirksIndex:n},i=()=>{var a;if(r.loading||n.loading)return(0,e.jsx)(Tt,null);if(t.settings.route&&t.settings.route.match(/overrides\/\w+/))return(0,e.jsx)(De,{...o});switch((a=t.settings)==null?void 0:a.route){case void 0:case"/":case"/dimensions":return(0,e.jsx)(Ye,{...o});case"/overrides":return(0,e.jsx)(je,{...o});case"/overrides/add":return(0,e.jsx)(De,{...o});case"/quirks":return(0,e.jsx)(mt,{...o});case"/settings":return(0,e.jsx)(gt,{...o});case"/connect":return(0,e.jsx)(Lt,{...o});default:return(0,e.jsx)(Be,null)}};return(0,e.jsx)(Ae,{settings:t.settings,saveSettings:t.saveSettings},(0,e.jsx)(Ot.Theme,null),(0,e.jsx)(fe,null),(0,e.jsx)("div",{css:xe.css`
|
|
2293
450
|
display: grid;
|
|
2294
451
|
grid-template-columns: 200px auto;
|
|
2295
|
-
font-weight: var(--
|
|
452
|
+
font-weight: var(--fs-base);
|
|
2296
453
|
font-size: var(--base-font-size);
|
|
2297
454
|
font-family: var(--base-font-family);
|
|
2298
455
|
line-height: var(--base-line-height);
|
|
2299
456
|
height: var(--min-height);
|
|
2300
457
|
min-width: var(--site-width);
|
|
2301
|
-
`
|
|
2302
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(Menu, {
|
|
2303
|
-
...props
|
|
2304
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("main", {
|
|
2305
|
-
css: mainLayoutStyle
|
|
2306
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(ConnectApiKey, {
|
|
2307
|
-
...props
|
|
2308
|
-
}), component())));
|
|
2309
|
-
}
|
|
2310
|
-
|
|
2311
|
-
// src/components/EmbeddedContextDevTools.tsx
|
|
2312
|
-
var import_context2 = require("@uniformdev/context");
|
|
2313
|
-
var React7 = __toESM(require("react"));
|
|
2314
|
-
function EmbeddedContextDevTools({ context, initialSettings }) {
|
|
2315
|
-
const contextValue = context != null ? context : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
|
|
2316
|
-
const contextInstance = contextValue != null ? contextValue : new import_context2.Context({ manifest: { project: {} } });
|
|
2317
|
-
const [state, setState] = React7.useState({
|
|
2318
|
-
data: contextInstance.storage.data,
|
|
2319
|
-
manifest: contextInstance.manifest.data,
|
|
2320
|
-
scores: contextInstance.scores,
|
|
2321
|
-
personalizations: [],
|
|
2322
|
-
tests: []
|
|
2323
|
-
});
|
|
2324
|
-
const [settings, setSettings] = React7.useState(initialSettings != null ? initialSettings : {});
|
|
2325
|
-
React7.useEffect(() => {
|
|
2326
|
-
var _a;
|
|
2327
|
-
const drain = (0, import_context2.createDebugConsoleLogDrain)((_a = settings.logLevel) != null ? _a : "none");
|
|
2328
|
-
contextInstance.events.on("log", drain);
|
|
2329
|
-
return () => {
|
|
2330
|
-
contextInstance.events.off("log", drain);
|
|
2331
|
-
};
|
|
2332
|
-
}, [settings, contextInstance]);
|
|
2333
|
-
React7.useEffect(() => {
|
|
2334
|
-
const onContextDataUpdated = () => {
|
|
2335
|
-
const quirkOverrides = applyQuirkOverrides({
|
|
2336
|
-
quirks: contextInstance.storage.data.quirks,
|
|
2337
|
-
quirkOverrides: settings.quirkOverrides
|
|
2338
|
-
});
|
|
2339
|
-
if (quirkOverrides) {
|
|
2340
|
-
console.log("Applying overridden quirks:", quirkOverrides);
|
|
2341
|
-
contextInstance.update({ quirks: quirkOverrides });
|
|
2342
|
-
}
|
|
2343
|
-
const overrideCommands = applyScoreOverrides({
|
|
2344
|
-
scores: contextInstance.scores,
|
|
2345
|
-
scoreOverrides: settings.scoreOverrides
|
|
2346
|
-
});
|
|
2347
|
-
if (overrideCommands.length) {
|
|
2348
|
-
console.log("Applying overridden scores:", overrideCommands);
|
|
2349
|
-
contextInstance.storage.updateData(overrideCommands);
|
|
2350
|
-
}
|
|
2351
|
-
setState((old) => ({
|
|
2352
|
-
...old,
|
|
2353
|
-
scores: contextInstance.scores,
|
|
2354
|
-
data: contextInstance.storage.data,
|
|
2355
|
-
manifest: contextInstance.manifest.data
|
|
2356
|
-
}));
|
|
2357
|
-
};
|
|
2358
|
-
const onPersonalizationResult = (e) => {
|
|
2359
|
-
if (!e.changed)
|
|
2360
|
-
return;
|
|
2361
|
-
setState((old) => ({ ...old, personalizations: [...old.personalizations, e] }));
|
|
2362
|
-
};
|
|
2363
|
-
const onTestResult = (e) => {
|
|
2364
|
-
if (!e.variantAssigned)
|
|
2365
|
-
return;
|
|
2366
|
-
setState((old) => ({ ...old, tests: [...old.tests, e] }));
|
|
2367
|
-
};
|
|
2368
|
-
contextInstance.events.on("personalizationResult", onPersonalizationResult);
|
|
2369
|
-
contextInstance.events.on("testResult", onTestResult);
|
|
2370
|
-
contextInstance.storage.events.on("*", onContextDataUpdated);
|
|
2371
|
-
return () => {
|
|
2372
|
-
contextInstance.storage.events.off("*", onContextDataUpdated);
|
|
2373
|
-
contextInstance.events.off("personalizationResult", onPersonalizationResult);
|
|
2374
|
-
contextInstance.events.off("testResult", onTestResult);
|
|
2375
|
-
};
|
|
2376
|
-
}, [contextInstance, settings]);
|
|
2377
|
-
const actions = React7.useMemo(() => {
|
|
2378
|
-
const actions2 = {
|
|
2379
|
-
update: (up) => contextInstance.update(up),
|
|
2380
|
-
forget: () => contextInstance.forget(false),
|
|
2381
|
-
rawUpdate: (commands) => contextInstance.storage.updateData(commands)
|
|
2382
|
-
};
|
|
2383
|
-
return actions2;
|
|
2384
|
-
}, [contextInstance]);
|
|
2385
|
-
return contextValue ? /* @__PURE__ */ (0, import_react.jsx)(ContextDevTools, {
|
|
2386
|
-
state,
|
|
2387
|
-
actions,
|
|
2388
|
-
settings,
|
|
2389
|
-
saveSettings: setSettings
|
|
2390
|
-
}) : /* @__PURE__ */ (0, import_react.jsx)("p", null, "Unable to find Uniform Context. Ensure the devtools plugin is activated.");
|
|
2391
|
-
}
|
|
2392
|
-
|
|
2393
|
-
// src/components/ToggleEmbeddedContextDevTools.tsx
|
|
2394
|
-
var import_react23 = require("@emotion/react");
|
|
2395
|
-
var React8 = __toESM(require("react"));
|
|
2396
|
-
|
|
2397
|
-
// src/components/Buttons/EmbedToggleButton.tsx
|
|
2398
|
-
var import_react22 = require("@emotion/react");
|
|
2399
|
-
var btnStyle3 = import_react22.css`
|
|
458
|
+
`},(0,e.jsx)(Ee,{...t}),(0,e.jsx)("main",{css:oo},(0,e.jsx)(Oe,{...t}),i())))}var ye=require("@uniformdev/context"),R=x(require("react"));var Ve="embeddedUniformDevToolsSettings";function Ie({context:t,initialSettings:r}){let n=t!=null?t:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0,o=n!=null?n:new ye.Context({manifest:{project:{}}}),[i,a]=R.useState({data:o.storage.data,manifest:o.manifest.data,scores:o.scores,personalizations:[],tests:[]}),[l,p]=R.useState(r!=null?r:{});R.useEffect(()=>{var d;let s=(0,ye.createDebugConsoleLogDrain)((d=l.logLevel)!=null?d:"none");return o.events.on("log",s),()=>{o.events.off("log",s)}},[l,o]),R.useEffect(()=>{let s=()=>{let v=window.localStorage.getItem(Ve)||"{}",f=JSON.parse(v),y=pe({quirks:o.storage.data.quirks,quirkOverrides:f.quirkOverrides});y&&(console.log("Applying overridden quirks:",y),o.update({quirks:y}));let C=_({scores:o.scores,scoreOverrides:f.scoreOverrides});C.length&&(console.log("Applying overridden scores:",C),o.storage.updateData(C)),a(w=>({...w,scores:o.scores,data:o.storage.data,manifest:o.manifest.data}))},d=v=>{!v.changed||a(f=>({...f,personalizations:[...f.personalizations,v]}))},c=v=>{!v.variantAssigned||a(f=>({...f,tests:[...f.tests,v]}))};return o.events.on("personalizationResult",d),o.events.on("testResult",c),o.storage.events.on("*",s),()=>{o.storage.events.off("*",s),o.events.off("personalizationResult",d),o.events.off("testResult",c)}},[o]),R.useEffect(()=>{if(window.localStorage){let s=window.localStorage.getItem(Ve);if(s)try{let d=JSON.parse(s),c={...r,...d};p(c);let v=_({scores:i.scores,scoreOverrides:c.scoreOverrides});m.rawUpdate(v)}catch(d){window.localStorage.removeItem(Ve),console.error("Failed to parse settings from localStorage: ",d.message)}}},[]);let{actions:m,saveSettings:u}=R.useMemo(()=>({actions:{update:c=>o.update(c),forget:()=>o.forget(!1),rawUpdate:c=>o.storage.updateData(c)},saveSettings:async c=>{p(c),window.localStorage&&window.localStorage.setItem("embeddedUniformDevToolsSettings",JSON.stringify(c))}}),[o]);return n?(0,e.jsx)(Re,{state:i,actions:m,settings:l,saveSettings:u}):(0,e.jsx)("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}var Vt=require("@emotion/react"),It=x(require("react"));var Pt=require("@uniformdev/design-system");var xt=require("@emotion/react"),ro=xt.css`
|
|
2400
459
|
align-items: center;
|
|
2401
460
|
border-radius: var(--rounded-full);
|
|
2402
461
|
background: var(--brand-secondary-5);
|
|
@@ -2422,56 +481,11 @@ var btnStyle3 = import_react22.css`
|
|
|
2422
481
|
max-width: 100%;
|
|
2423
482
|
height: auto;
|
|
2424
483
|
}
|
|
2425
|
-
|
|
2426
|
-
var EmbedToggleButton = ({ ...props }) => {
|
|
2427
|
-
return /* @__PURE__ */ (0, import_react.jsx)("button", {
|
|
2428
|
-
type: "button",
|
|
2429
|
-
css: btnStyle3,
|
|
2430
|
-
...props
|
|
2431
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("span", {
|
|
2432
|
-
hidden: true
|
|
2433
|
-
}, "Uniform devtools"), /* @__PURE__ */ (0, import_react.jsx)("svg", {
|
|
2434
|
-
width: "24",
|
|
2435
|
-
height: "24",
|
|
2436
|
-
viewBox: "0 0 24 24",
|
|
2437
|
-
fill: "none",
|
|
2438
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
2439
|
-
}, /* @__PURE__ */ (0, import_react.jsx)("path", {
|
|
2440
|
-
d: "M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",
|
|
2441
|
-
fill: "currentColor"
|
|
2442
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("path", {
|
|
2443
|
-
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",
|
|
2444
|
-
fill: "currentColor"
|
|
2445
|
-
}), /* @__PURE__ */ (0, import_react.jsx)("path", {
|
|
2446
|
-
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",
|
|
2447
|
-
fill: "currentColor"
|
|
2448
|
-
})));
|
|
2449
|
-
};
|
|
2450
|
-
|
|
2451
|
-
// src/components/ToggleEmbeddedContextDevTools.tsx
|
|
2452
|
-
function ToggleEmbeddedContextDevTools(props) {
|
|
2453
|
-
var _a;
|
|
2454
|
-
const [devtoolsOpen, setDevtoolsOpen] = React8.useState(false);
|
|
2455
|
-
const contextValue = (_a = props.context) != null ? _a : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
|
|
2456
|
-
return contextValue ? /* @__PURE__ */ (0, import_react.jsx)("div", null, /* @__PURE__ */ (0, import_react.jsx)(Theme, null), /* @__PURE__ */ (0, import_react.jsx)(EmbedToggleButton, {
|
|
2457
|
-
onClick: () => setDevtoolsOpen((prev) => !prev)
|
|
2458
|
-
}), devtoolsOpen ? /* @__PURE__ */ (0, import_react.jsx)("div", {
|
|
2459
|
-
css: import_react23.css`
|
|
484
|
+
`,Rt=({...t})=>(0,e.jsx)("button",{type:"button",css:ro,...t},(0,e.jsx)("span",{hidden:!0},"Uniform devtools"),(0,e.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},(0,e.jsx)("path",{d:"M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",fill:"currentColor"}),(0,e.jsx)("path",{d:"M7.61197 18.3608L8.97136 16.9124L8.97086 16.8933L3.87657 12.1121L8.66699 7.00798L7.20868 5.63928L1.04956 12.2017L7.61197 18.3608Z",fill:"currentColor"}),(0,e.jsx)("path",{d:"M16.388 18.3608L15.0286 16.9124L15.0291 16.8933L20.1234 12.1121L15.333 7.00798L16.7913 5.63928L22.9504 12.2017L16.388 18.3608Z",fill:"currentColor"})));function no(t){var i;let[r,n]=It.useState(!1);return((i=t.context)!=null?i:typeof window!="undefined"?window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__:void 0)?(0,e.jsx)("div",null,(0,e.jsx)(Pt.Theme,null),(0,e.jsx)(fe,null),(0,e.jsx)(Rt,{onClick:()=>n(a=>!a)}),r?(0,e.jsx)("div",{css:Vt.css`
|
|
2460
485
|
box-shadow: var(--shadow-base);
|
|
2461
486
|
position: fixed;
|
|
2462
487
|
bottom: 82px;
|
|
2463
488
|
right: var(--spacing-base);
|
|
2464
489
|
z-index: var(--z-10);
|
|
2465
490
|
max-width: var(--site-width);
|
|
2466
|
-
`
|
|
2467
|
-
}, /* @__PURE__ */ (0, import_react.jsx)(EmbeddedContextDevTools, {
|
|
2468
|
-
...props
|
|
2469
|
-
})) : null) : /* @__PURE__ */ (0, import_react.jsx)("p", null, "Unable to find Uniform Context. Ensure the devtools plugin is activated.");
|
|
2470
|
-
}
|
|
2471
|
-
module.exports = __toCommonJS(src_exports);
|
|
2472
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
2473
|
-
0 && (module.exports = {
|
|
2474
|
-
ContextDevTools,
|
|
2475
|
-
EmbeddedContextDevTools,
|
|
2476
|
-
ToggleEmbeddedContextDevTools
|
|
2477
|
-
});
|
|
491
|
+
`},(0,e.jsx)(Ie,{...t})):null):(0,e.jsx)("p",null,"Unable to find Uniform Context. Ensure the devtools plugin is activated.")}0&&(module.exports={ContextDevTools,EmbeddedContextDevTools,ToggleEmbeddedContextDevTools});
|