@uniformdev/context-devtools 12.2.1-alpha.183 → 14.2.1-alpha.128
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 +768 -0
- package/dist/index.d.ts +55 -0
- package/dist/index.js +735 -4
- package/package.json +13 -32
- package/dist/index.mjs +0 -997
- package/dist/modules.d.ts +0 -9
- package/dist/src/components/Accordion/Accordion.d.ts +0 -7
- package/dist/src/components/Buttons/Button.d.ts +0 -5
- package/dist/src/components/Buttons/EmbedToggleButton.d.ts +0 -2
- package/dist/src/components/CallToAction/ConnectApiKey.d.ts +0 -3
- package/dist/src/components/CallToAction/NoActiveDimensions.d.ts +0 -8
- package/dist/src/components/CallToAction/index.d.ts +0 -2
- package/dist/src/components/ContextDevTools.d.ts +0 -22
- package/dist/src/components/EmbeddedContextDevTools.d.ts +0 -18
- package/dist/src/components/Form/Fieldset.d.ts +0 -5
- package/dist/src/components/Form/Legend.d.ts +0 -2
- package/dist/src/components/Form/index.d.ts +0 -3
- package/dist/src/components/Inputs/InputText.d.ts +0 -7
- package/dist/src/components/Inputs/SelectInput.d.ts +0 -11
- package/dist/src/components/Inputs/SwitchInput.d.ts +0 -5
- package/dist/src/components/Navigation/Menu.d.ts +0 -4
- package/dist/src/components/NotFound/NotFound.d.ts +0 -2
- package/dist/src/components/Personalization/Dimensions.d.ts +0 -3
- package/dist/src/components/Personalization/Quirks.d.ts +0 -3
- package/dist/src/components/Personalization/Settings.d.ts +0 -3
- package/dist/src/components/Personalization/index.d.ts +0 -4
- package/dist/src/components/Table/Table.d.ts +0 -17
- package/dist/src/components/Table/index.d.ts +0 -2
- package/dist/src/hooks/useDimensionIndex.d.ts +0 -12
- package/dist/src/index.d.ts +0 -2
- package/dist/style.css +0 -1
package/dist/index.mjs
DELETED
|
@@ -1,997 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a2, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a2, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a2, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a2;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
|
-
import * as React from "react";
|
|
33
|
-
import { ErrorMessage, Formik, Form, Field } from "formik";
|
|
34
|
-
import * as yup from "yup";
|
|
35
|
-
import { useAsync } from "react-use";
|
|
36
|
-
import { Context, createDebugConsoleLogDrain } from "@uniformdev/context";
|
|
37
|
-
const menu = "_menu_6gnmz_1";
|
|
38
|
-
const logo = "_logo_6gnmz_7";
|
|
39
|
-
const logo__svg = "_logo__svg_6gnmz_12";
|
|
40
|
-
const menu__list = "_menu__list_6gnmz_16";
|
|
41
|
-
const menu__item = "_menu__item_6gnmz_25";
|
|
42
|
-
const menu__link = "_menu__link_6gnmz_35";
|
|
43
|
-
const menu__icon = "_menu__icon_6gnmz_51";
|
|
44
|
-
var styles$a = {
|
|
45
|
-
menu,
|
|
46
|
-
logo,
|
|
47
|
-
logo__svg,
|
|
48
|
-
menu__list,
|
|
49
|
-
menu__item,
|
|
50
|
-
menu__link,
|
|
51
|
-
"menu__link--active": "_menu__link--active_6gnmz_47",
|
|
52
|
-
menu__icon
|
|
53
|
-
};
|
|
54
|
-
const links = [
|
|
55
|
-
{
|
|
56
|
-
title: "Dimensions",
|
|
57
|
-
href: "/dimensions",
|
|
58
|
-
icon: `<svg
|
|
59
|
-
width="24"
|
|
60
|
-
height="24"
|
|
61
|
-
viewBox="0 0 24 24"
|
|
62
|
-
fill="none"
|
|
63
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
64
|
-
>
|
|
65
|
-
<path d="M13 7H11V17H13V7Z" fill="currentColor" />
|
|
66
|
-
<path
|
|
67
|
-
d="M5.99996 7.75732L7.41418 9.17154L5.58572 11L9.99996 11V13L5.58579 13L7.41418 14.8284L5.99996 16.2426L1.75732 12L5.99996 7.75732Z"
|
|
68
|
-
fill="currentColor"
|
|
69
|
-
/>
|
|
70
|
-
<path
|
|
71
|
-
d="M18 16.2427L16.5858 14.8285L18.4143 13H14V11L18.4142 11L16.5858 9.17161L18 7.75739L22.2427 12L18 16.2427Z"
|
|
72
|
-
fill="currentColor"
|
|
73
|
-
/>
|
|
74
|
-
</svg>
|
|
75
|
-
`
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
title: "Quirks",
|
|
79
|
-
href: "/quirks",
|
|
80
|
-
icon: `<svg
|
|
81
|
-
width="24"
|
|
82
|
-
height="24"
|
|
83
|
-
viewBox="0 0 24 24"
|
|
84
|
-
fill="none"
|
|
85
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
86
|
-
>
|
|
87
|
-
<path d="M6 6H10V4H4V10H6V6Z" fill="currentColor" />
|
|
88
|
-
<path d="M10 18H6V14H4V20H10V18Z" fill="currentColor" />
|
|
89
|
-
<path d="M14 6H18V10H20V4H14V6Z" fill="currentColor" />
|
|
90
|
-
<path d="M14 18H18V14H20V20H14V18Z" fill="currentColor" />
|
|
91
|
-
<path
|
|
92
|
-
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"
|
|
93
|
-
fill="currentColor"
|
|
94
|
-
/>
|
|
95
|
-
</svg>`
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
title: "Settings",
|
|
99
|
-
href: "/settings",
|
|
100
|
-
icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
101
|
-
<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"/>
|
|
102
|
-
</svg>
|
|
103
|
-
`
|
|
104
|
-
}
|
|
105
|
-
];
|
|
106
|
-
const Menu = (_a) => {
|
|
107
|
-
var props = __objRest(_a, []);
|
|
108
|
-
const handleLinkClick = (e) => {
|
|
109
|
-
e.preventDefault();
|
|
110
|
-
if (e.currentTarget.pathname) {
|
|
111
|
-
return props.saveSettings(__spreadProps(__spreadValues({}, props.settings), { route: e.currentTarget.pathname }));
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
const isActivePath = (href) => {
|
|
115
|
-
var _a2;
|
|
116
|
-
const cssName = styles$a["menu__link--active"];
|
|
117
|
-
if (!((_a2 = props.settings) == null ? void 0 : _a2.route) && href === "/dimensions") {
|
|
118
|
-
return cssName;
|
|
119
|
-
}
|
|
120
|
-
return props.settings.route === href ? cssName : "";
|
|
121
|
-
};
|
|
122
|
-
return /* @__PURE__ */ React.createElement("nav", {
|
|
123
|
-
className: styles$a["menu"]
|
|
124
|
-
}, /* @__PURE__ */ React.createElement("a", {
|
|
125
|
-
className: styles$a["logo"],
|
|
126
|
-
href: "/settings",
|
|
127
|
-
onClick: (e) => handleLinkClick(e)
|
|
128
|
-
}, /* @__PURE__ */ React.createElement("svg", {
|
|
129
|
-
className: "logo__svg",
|
|
130
|
-
width: "120",
|
|
131
|
-
height: "38",
|
|
132
|
-
viewBox: "0 0 120 38",
|
|
133
|
-
fill: "none",
|
|
134
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
135
|
-
}, /* @__PURE__ */ React.createElement("g", {
|
|
136
|
-
clipPath: "url(#clip0_41_612)"
|
|
137
|
-
}, /* @__PURE__ */ React.createElement("path", {
|
|
138
|
-
d: "M8.82261 3.73315L0 8.82209V18.9999L8.82261 13.911L17.6474 8.82209L8.82261 3.73315Z",
|
|
139
|
-
fill: "#83C6E1"
|
|
140
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
141
|
-
d: "M8.82261 24.089V13.9111L0 19.0001V29.1779L8.82261 34.2669L17.6474 29.1779V19.0001L8.82261 24.089Z",
|
|
142
|
-
fill: "#438FD5"
|
|
143
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
144
|
-
d: "M17.6474 8.82202L8.82263 13.911L17.6474 18.9999V29.1777L26.47 24.0888V13.911L17.6474 8.82202Z",
|
|
145
|
-
fill: "#F4220B"
|
|
146
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
147
|
-
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",
|
|
148
|
-
fill: "white"
|
|
149
|
-
})), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", {
|
|
150
|
-
id: "clip0_41_612"
|
|
151
|
-
}, /* @__PURE__ */ React.createElement("rect", {
|
|
152
|
-
width: "120",
|
|
153
|
-
height: "38",
|
|
154
|
-
fill: "white"
|
|
155
|
-
}))))), /* @__PURE__ */ React.createElement("ul", {
|
|
156
|
-
className: styles$a["menu__list"]
|
|
157
|
-
}, links.map((item, index) => /* @__PURE__ */ React.createElement("li", {
|
|
158
|
-
className: styles$a["menu__item"],
|
|
159
|
-
key: index
|
|
160
|
-
}, /* @__PURE__ */ React.createElement("a", {
|
|
161
|
-
className: `${styles$a["menu__link"]} ${isActivePath(item.href)}`,
|
|
162
|
-
href: item.href,
|
|
163
|
-
title: item.title,
|
|
164
|
-
onClick: (e) => handleLinkClick(e)
|
|
165
|
-
}, /* @__PURE__ */ React.createElement("i", {
|
|
166
|
-
className: styles$a["menu__icon"],
|
|
167
|
-
dangerouslySetInnerHTML: { __html: item.icon }
|
|
168
|
-
}), item.title)))));
|
|
169
|
-
};
|
|
170
|
-
const NotFound = () => {
|
|
171
|
-
return /* @__PURE__ */ React.createElement("article", null, /* @__PURE__ */ React.createElement("h1", null, "Something when wrong"), /* @__PURE__ */ React.createElement("p", null, "We could not find the page you're looking for."));
|
|
172
|
-
};
|
|
173
|
-
const accordion = "_accordion_1y4mw_1";
|
|
174
|
-
const accordion__content = "_accordion__content_1y4mw_2";
|
|
175
|
-
const accordion__title = "_accordion__title_1y4mw_6";
|
|
176
|
-
const accordion__btn = "_accordion__btn_1y4mw_12";
|
|
177
|
-
const accordion__icon = "_accordion__icon_1y4mw_24";
|
|
178
|
-
var styles$9 = {
|
|
179
|
-
accordion,
|
|
180
|
-
accordion__content,
|
|
181
|
-
accordion__title,
|
|
182
|
-
accordion__btn,
|
|
183
|
-
accordion__icon,
|
|
184
|
-
"accordion__icon--active": "_accordion__icon--active_1y4mw_28"
|
|
185
|
-
};
|
|
186
|
-
const Accordion = ({ children }) => {
|
|
187
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
188
|
-
className: styles$9["accordion"]
|
|
189
|
-
}, children);
|
|
190
|
-
};
|
|
191
|
-
const AccordionItem = ({ title, children }) => {
|
|
192
|
-
const [visibility, setVisibility] = React.useState(false);
|
|
193
|
-
const id = title.split(" ").join("-").toLocaleLowerCase();
|
|
194
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", {
|
|
195
|
-
className: `${styles$9["accordion__title"]}`
|
|
196
|
-
}, /* @__PURE__ */ React.createElement("button", {
|
|
197
|
-
"aria-expanded": visibility,
|
|
198
|
-
className: styles$9["accordion__btn"],
|
|
199
|
-
title,
|
|
200
|
-
id,
|
|
201
|
-
"aria-controls": `${id}-section`,
|
|
202
|
-
onClick: () => setVisibility((prev) => !prev),
|
|
203
|
-
type: "button"
|
|
204
|
-
}, title, /* @__PURE__ */ React.createElement("i", {
|
|
205
|
-
className: `${styles$9["accordion__icon"]} ${visibility ? styles$9["accordion__icon--active"] : ""}`
|
|
206
|
-
}, /* @__PURE__ */ React.createElement("svg", {
|
|
207
|
-
width: "24",
|
|
208
|
-
height: "24",
|
|
209
|
-
viewBox: "0 0 24 24",
|
|
210
|
-
fill: "none",
|
|
211
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
212
|
-
}, /* @__PURE__ */ React.createElement("path", {
|
|
213
|
-
d: "M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z",
|
|
214
|
-
fill: "currentColor"
|
|
215
|
-
}))))), /* @__PURE__ */ React.createElement("div", {
|
|
216
|
-
id: `${id}-section`,
|
|
217
|
-
className: `${styles$9["accordion__content"]}`,
|
|
218
|
-
role: "region",
|
|
219
|
-
"aria-labelledby": id
|
|
220
|
-
}, visibility ? children : null));
|
|
221
|
-
};
|
|
222
|
-
const btn = "_btn_15bw2_1";
|
|
223
|
-
var styles$8 = {
|
|
224
|
-
btn,
|
|
225
|
-
"btn--primary": "_btn--primary_15bw2_15",
|
|
226
|
-
"btn--secondary": "_btn--secondary_15bw2_19",
|
|
227
|
-
"btn--unimportant": "_btn--unimportant_15bw2_22",
|
|
228
|
-
"btn--ghost": "_btn--ghost_15bw2_26"
|
|
229
|
-
};
|
|
230
|
-
const Button = (_b) => {
|
|
231
|
-
var _c = _b, { buttonType = "primary", children, className } = _c, props = __objRest(_c, ["buttonType", "children", "className"]);
|
|
232
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", __spreadValues({
|
|
233
|
-
type: "button",
|
|
234
|
-
className: `${styles$8.btn} ${styles$8[`btn--${buttonType}`]}${className ? ` ${className}` : ""}`
|
|
235
|
-
}, props), children));
|
|
236
|
-
};
|
|
237
|
-
const cta = "_cta_ddty5_1";
|
|
238
|
-
const cta__title = "_cta__title_ddty5_17";
|
|
239
|
-
const cta__text = "_cta__text_ddty5_24";
|
|
240
|
-
const cta__close = "_cta__close_ddty5_30";
|
|
241
|
-
var styles$7 = {
|
|
242
|
-
cta,
|
|
243
|
-
"cta--with-icon": "_cta--with-icon_ddty5_12",
|
|
244
|
-
cta__title,
|
|
245
|
-
cta__text,
|
|
246
|
-
cta__close,
|
|
247
|
-
"cta__btn-group": "_cta__btn-group_ddty5_50"
|
|
248
|
-
};
|
|
249
|
-
const NoActiveDimensions = ({ title, text, buttonGroup, children }) => {
|
|
250
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
251
|
-
className: `${styles$7["cta"]}`
|
|
252
|
-
}, /* @__PURE__ */ React.createElement("h2", {
|
|
253
|
-
className: `${styles$7["cta__title"]}`
|
|
254
|
-
}, title), /* @__PURE__ */ React.createElement("p", {
|
|
255
|
-
className: `${styles$7["cta__text"]}`
|
|
256
|
-
}, text), children, buttonGroup ? /* @__PURE__ */ React.createElement("div", {
|
|
257
|
-
className: `${styles$7["cta__btn-group"]}`
|
|
258
|
-
}, buttonGroup) : null);
|
|
259
|
-
};
|
|
260
|
-
var styles$6 = {
|
|
261
|
-
"input-switch": "_input-switch_13lsn_1",
|
|
262
|
-
"input-switch__label": "_input-switch__label_13lsn_8",
|
|
263
|
-
"input-switch__control": "_input-switch__control_13lsn_13",
|
|
264
|
-
"input-switch__checkbox": "_input-switch__checkbox_13lsn_17",
|
|
265
|
-
"input-switch__btn": "_input-switch__btn_13lsn_25"
|
|
266
|
-
};
|
|
267
|
-
const SwitchInput = (_d) => {
|
|
268
|
-
var _e = _d, { label } = _e, props = __objRest(_e, ["label"]);
|
|
269
|
-
return /* @__PURE__ */ React.createElement("label", {
|
|
270
|
-
className: styles$6["input-switch"]
|
|
271
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
272
|
-
className: styles$6["input-switch__label"]
|
|
273
|
-
}, label), /* @__PURE__ */ React.createElement("input", __spreadValues({
|
|
274
|
-
type: "checkbox",
|
|
275
|
-
className: styles$6["input-switch__checkbox"]
|
|
276
|
-
}, props)), /* @__PURE__ */ React.createElement("span", {
|
|
277
|
-
className: styles$6["input-switch__btn"]
|
|
278
|
-
}));
|
|
279
|
-
};
|
|
280
|
-
const table = "_table_fo951_1";
|
|
281
|
-
const table__head = "_table__head_fo951_8";
|
|
282
|
-
const table__body = "_table__body_fo951_13";
|
|
283
|
-
const table__row = "_table__row_fo951_16";
|
|
284
|
-
const table__heading = "_table__heading_fo951_19";
|
|
285
|
-
const table__data = "_table__data_fo951_32";
|
|
286
|
-
var styles$5 = {
|
|
287
|
-
table,
|
|
288
|
-
table__head,
|
|
289
|
-
table__body,
|
|
290
|
-
table__row,
|
|
291
|
-
table__heading,
|
|
292
|
-
table__data,
|
|
293
|
-
"table__data--left": "_table__data--left_fo951_39",
|
|
294
|
-
"table__data--right": "_table__data--right_fo951_43",
|
|
295
|
-
"table__data--center": "_table__data--center_fo951_47",
|
|
296
|
-
"table__data--light": "_table__data--light_fo951_51",
|
|
297
|
-
"table__data--dark": "_table__data--dark_fo951_55",
|
|
298
|
-
"t-border-bottom": "_t-border-bottom_fo951_59",
|
|
299
|
-
"t-border-left": "_t-border-left_fo951_63"
|
|
300
|
-
};
|
|
301
|
-
const Table = ({ children }) => {
|
|
302
|
-
return /* @__PURE__ */ React.createElement("table", {
|
|
303
|
-
className: styles$5["table"]
|
|
304
|
-
}, children);
|
|
305
|
-
};
|
|
306
|
-
const THead = ({ children }) => {
|
|
307
|
-
return /* @__PURE__ */ React.createElement("thead", {
|
|
308
|
-
className: styles$5["table__head"]
|
|
309
|
-
}, children);
|
|
310
|
-
};
|
|
311
|
-
const TBody = ({ children }) => {
|
|
312
|
-
return /* @__PURE__ */ React.createElement("tbody", {
|
|
313
|
-
className: styles$5["table__body"]
|
|
314
|
-
}, children);
|
|
315
|
-
};
|
|
316
|
-
const TRow = ({ border, children }) => {
|
|
317
|
-
return /* @__PURE__ */ React.createElement("tr", {
|
|
318
|
-
className: `${styles$5["table__row"]} ${border ? styles$5[`t-border-${border}`] : ""}`
|
|
319
|
-
}, children);
|
|
320
|
-
};
|
|
321
|
-
const THeading = ({ children }) => {
|
|
322
|
-
return /* @__PURE__ */ React.createElement("th", {
|
|
323
|
-
className: styles$5["table__heading"]
|
|
324
|
-
}, children);
|
|
325
|
-
};
|
|
326
|
-
const TData = ({ alignment = "left", border, color = "dark", children }) => {
|
|
327
|
-
return /* @__PURE__ */ React.createElement("td", {
|
|
328
|
-
className: `${styles$5["table__data"]} ${styles$5[`table__data--${alignment}`]} ${styles$5[`table__data--${color}`]} ${border ? styles$5[`t-border-${border}`] : ""}`
|
|
329
|
-
}, children);
|
|
330
|
-
};
|
|
331
|
-
const page = "_page_1ay01_1";
|
|
332
|
-
const page__text = "_page__text_1ay01_5";
|
|
333
|
-
const page__title = "_page__title_1ay01_10";
|
|
334
|
-
const divider = "_divider_1ay01_29";
|
|
335
|
-
const popIn = "_popIn_1ay01_1";
|
|
336
|
-
const error = "_error_1ay01_55";
|
|
337
|
-
var styles$4 = {
|
|
338
|
-
page,
|
|
339
|
-
page__text,
|
|
340
|
-
page__title,
|
|
341
|
-
"page__heading-group": "_page__heading-group_1ay01_22",
|
|
342
|
-
divider,
|
|
343
|
-
"submit-btn": "_submit-btn_1ay01_48",
|
|
344
|
-
popIn,
|
|
345
|
-
error
|
|
346
|
-
};
|
|
347
|
-
const Dimensions = ({
|
|
348
|
-
dimensionIndex: { index: dimensionIndex },
|
|
349
|
-
state: { scores, data },
|
|
350
|
-
actions
|
|
351
|
-
}) => {
|
|
352
|
-
const remainingDimensions = React.useMemo(() => {
|
|
353
|
-
return Object.keys(dimensionIndex).filter((dimension) => !scores[dimension]).map((key) => {
|
|
354
|
-
var _a;
|
|
355
|
-
return (_a = dimensionIndex[key]) != null ? _a : { name: key, dim: key, type: "Unknown" };
|
|
356
|
-
});
|
|
357
|
-
}, [scores, dimensionIndex]);
|
|
358
|
-
const activeDims = Object.keys(scores).length;
|
|
359
|
-
const totalDims = activeDims + remainingDimensions.length;
|
|
360
|
-
const toggleControlGroup = () => {
|
|
361
|
-
actions.rawUpdate([{ type: "setcontrol", data: !data.controlGroup }]);
|
|
362
|
-
};
|
|
363
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("article", {
|
|
364
|
-
className: styles$4["page"]
|
|
365
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
366
|
-
className: styles$4["page__heading-group"]
|
|
367
|
-
}, /* @__PURE__ */ React.createElement("h2", {
|
|
368
|
-
className: styles$4["page__title"]
|
|
369
|
-
}, "Dimensions", /* @__PURE__ */ React.createElement("small", null, activeDims, " active of ", totalDims)), /* @__PURE__ */ React.createElement(SwitchInput, {
|
|
370
|
-
label: "Control Group",
|
|
371
|
-
onChange: toggleControlGroup,
|
|
372
|
-
checked: data.controlGroup
|
|
373
|
-
})), activeDims > 0 ? /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TBody, null, Object.entries(scores).map(([key, value], index) => {
|
|
374
|
-
var _a;
|
|
375
|
-
const { name, type, category } = (_a = dimensionIndex == null ? void 0 : dimensionIndex[key]) != null ? _a : {
|
|
376
|
-
name: key,
|
|
377
|
-
dim: key,
|
|
378
|
-
type: "Unknown"
|
|
379
|
-
};
|
|
380
|
-
return /* @__PURE__ */ React.createElement(TRow, {
|
|
381
|
-
key: index
|
|
382
|
-
}, /* @__PURE__ */ React.createElement(TData, null, /* @__PURE__ */ React.createElement("b", null, value)), /* @__PURE__ */ React.createElement(TData, null, /* @__PURE__ */ React.createElement("span", {
|
|
383
|
-
className: styles$4["divider"],
|
|
384
|
-
role: "presentation"
|
|
385
|
-
}), /* @__PURE__ */ React.createElement("strong", null, category ? `${category}:` : "", " ", name)), /* @__PURE__ */ React.createElement(TData, {
|
|
386
|
-
alignment: "right",
|
|
387
|
-
color: "light"
|
|
388
|
-
}, type));
|
|
389
|
-
}))) : /* @__PURE__ */ React.createElement(NoActiveDimensions, {
|
|
390
|
-
title: data.controlGroup ? "In control group" : "No active dimensions",
|
|
391
|
-
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.",
|
|
392
|
-
buttonGroup: data.controlGroup ? /* @__PURE__ */ React.createElement(Button, {
|
|
393
|
-
buttonType: "secondary",
|
|
394
|
-
onClick: toggleControlGroup
|
|
395
|
-
}, "Exit control group") : null
|
|
396
|
-
}), /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionItem, {
|
|
397
|
-
title: "Inactive Dimensions"
|
|
398
|
-
}, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TBody, null, remainingDimensions.map(({ dim, type, name, category }) => {
|
|
399
|
-
return /* @__PURE__ */ React.createElement(TRow, {
|
|
400
|
-
key: dim
|
|
401
|
-
}, /* @__PURE__ */ React.createElement(TData, null, /* @__PURE__ */ React.createElement("strong", null, category ? `${category}:` : "", " ", name)), /* @__PURE__ */ React.createElement(TData, {
|
|
402
|
-
alignment: "right",
|
|
403
|
-
color: "light"
|
|
404
|
-
}, type));
|
|
405
|
-
})))))));
|
|
406
|
-
};
|
|
407
|
-
const Quirks = (_f) => {
|
|
408
|
-
var props = __objRest(_f, []);
|
|
409
|
-
const {
|
|
410
|
-
state: { data }
|
|
411
|
-
} = props;
|
|
412
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("article", {
|
|
413
|
-
className: styles$4["page"]
|
|
414
|
-
}, /* @__PURE__ */ React.createElement("h1", {
|
|
415
|
-
className: styles$4["page__title"]
|
|
416
|
-
}, "Quirks"), /* @__PURE__ */ React.createElement("p", {
|
|
417
|
-
className: styles$4["page__text"]
|
|
418
|
-
}, "Keys defined in Uniform and their current, programmatically defined values for this visit."), Object.keys(data.quirks).length ? /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(THead, null, /* @__PURE__ */ React.createElement(TRow, null, /* @__PURE__ */ React.createElement(THeading, null, "Key"), /* @__PURE__ */ React.createElement(THeading, null, "Value"))), /* @__PURE__ */ React.createElement(TBody, null, Object.entries(data.quirks).map(([key, value], index) => {
|
|
419
|
-
return /* @__PURE__ */ React.createElement(TRow, {
|
|
420
|
-
key: index,
|
|
421
|
-
border: "bottom"
|
|
422
|
-
}, /* @__PURE__ */ React.createElement(TData, null, /* @__PURE__ */ React.createElement("strong", null, key)), /* @__PURE__ */ React.createElement(TData, null, value));
|
|
423
|
-
}))) : /* @__PURE__ */ React.createElement(NoActiveDimensions, {
|
|
424
|
-
title: "No quirks configured",
|
|
425
|
-
text: "There are currently no quirks setup."
|
|
426
|
-
})));
|
|
427
|
-
};
|
|
428
|
-
var styles$3 = {
|
|
429
|
-
"text-input": "_text-input_1svz8_1",
|
|
430
|
-
"select-input": "_select-input_1svz8_9",
|
|
431
|
-
"input-wrapper": "_input-wrapper_1svz8_24",
|
|
432
|
-
"input-label": "_input-label_1svz8_28",
|
|
433
|
-
"input-text": "_input-text_1svz8_35",
|
|
434
|
-
"input-caption": "_input-caption_1svz8_42",
|
|
435
|
-
"error-msg": "_error-msg_1svz8_47"
|
|
436
|
-
};
|
|
437
|
-
const InputText = (_g) => {
|
|
438
|
-
var _h = _g, { field, form: form2, meta } = _h, rawProps = __objRest(_h, ["field", "form", "meta"]);
|
|
439
|
-
const _a = rawProps, { label, caption } = _a, passThroughProps = __objRest(_a, ["label", "caption"]);
|
|
440
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
441
|
-
className: styles$3["input-wrapper"]
|
|
442
|
-
}, /* @__PURE__ */ React.createElement("label", {
|
|
443
|
-
className: styles$3["input-label"]
|
|
444
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
445
|
-
className: styles$3["input-text"]
|
|
446
|
-
}, label), /* @__PURE__ */ React.createElement("input", __spreadValues(__spreadValues({
|
|
447
|
-
type: "text",
|
|
448
|
-
className: styles$3["text-input"]
|
|
449
|
-
}, field), passThroughProps))), caption ? /* @__PURE__ */ React.createElement("span", {
|
|
450
|
-
className: styles$3["input-caption"]
|
|
451
|
-
}, caption) : null, /* @__PURE__ */ React.createElement(ErrorMessage, {
|
|
452
|
-
component: "div",
|
|
453
|
-
className: styles$3["error-msg"],
|
|
454
|
-
name: field.name
|
|
455
|
-
}));
|
|
456
|
-
};
|
|
457
|
-
const SelectInput = (_i) => {
|
|
458
|
-
var _j = _i, { field, form: form2, meta } = _j, rawProps = __objRest(_j, ["field", "form", "meta"]);
|
|
459
|
-
const _a = rawProps, { label, options, caption } = _a, passThroughProps = __objRest(_a, ["label", "options", "caption"]);
|
|
460
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
461
|
-
className: styles$3["input-wrapper"]
|
|
462
|
-
}, /* @__PURE__ */ React.createElement("label", {
|
|
463
|
-
className: styles$3["input-label"]
|
|
464
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
465
|
-
className: styles$3["input-text"]
|
|
466
|
-
}, label), /* @__PURE__ */ React.createElement("select", __spreadProps(__spreadValues(__spreadValues({}, field), passThroughProps), {
|
|
467
|
-
className: styles$3["select-input"]
|
|
468
|
-
}), options.map((o, index) => /* @__PURE__ */ React.createElement("option", {
|
|
469
|
-
value: o.value,
|
|
470
|
-
key: index
|
|
471
|
-
}, o.text)))), caption ? /* @__PURE__ */ React.createElement("span", {
|
|
472
|
-
className: styles$3["input-caption"]
|
|
473
|
-
}, caption) : null, /* @__PURE__ */ React.createElement(ErrorMessage, {
|
|
474
|
-
component: "div",
|
|
475
|
-
className: styles$3["error-msg"],
|
|
476
|
-
name: field.name
|
|
477
|
-
}));
|
|
478
|
-
};
|
|
479
|
-
const form = "_form_1dp40_1";
|
|
480
|
-
const form__fieldset = "_form__fieldset_1dp40_8";
|
|
481
|
-
const form__legend = "_form__legend_1dp40_13";
|
|
482
|
-
var styles$2 = {
|
|
483
|
-
form,
|
|
484
|
-
form__fieldset,
|
|
485
|
-
form__legend
|
|
486
|
-
};
|
|
487
|
-
const Fieldset = (_k) => {
|
|
488
|
-
var _l = _k, { children } = _l, props = __objRest(_l, ["children"]);
|
|
489
|
-
return /* @__PURE__ */ React.createElement("fieldset", __spreadValues({
|
|
490
|
-
className: styles$2["form__fieldset"]
|
|
491
|
-
}, props), children);
|
|
492
|
-
};
|
|
493
|
-
const Legend = ({ children }) => {
|
|
494
|
-
return /* @__PURE__ */ React.createElement("legend", {
|
|
495
|
-
className: styles$2["form__legend"]
|
|
496
|
-
}, children);
|
|
497
|
-
};
|
|
498
|
-
const editableSettingsSchema = yup.object({
|
|
499
|
-
apiKey: yup.string().matches(/^uf.+$/, "API keys start with `uf`, double check your API key"),
|
|
500
|
-
apiHost: yup.string().matches(/^https:\/\/(localhost:8889|([a-z]+\.)?uniform.app)$/, "API host must be a Uniform domain."),
|
|
501
|
-
logLevel: yup.string(),
|
|
502
|
-
projectId: yup.string().uuid()
|
|
503
|
-
});
|
|
504
|
-
const Settings = ({
|
|
505
|
-
settings,
|
|
506
|
-
saveSettings,
|
|
507
|
-
dimensionIndex: { error: error2, loading }
|
|
508
|
-
}) => {
|
|
509
|
-
const logOptions = [
|
|
510
|
-
{
|
|
511
|
-
value: "none",
|
|
512
|
-
text: "Logging off"
|
|
513
|
-
},
|
|
514
|
-
{
|
|
515
|
-
value: "info",
|
|
516
|
-
text: "Log info, warnings, and errors"
|
|
517
|
-
},
|
|
518
|
-
{
|
|
519
|
-
value: "warn",
|
|
520
|
-
text: "Log warnings and errors"
|
|
521
|
-
},
|
|
522
|
-
{
|
|
523
|
-
value: "error",
|
|
524
|
-
text: "Log errors"
|
|
525
|
-
},
|
|
526
|
-
{
|
|
527
|
-
value: "debug",
|
|
528
|
-
text: "Verbose debug logging"
|
|
529
|
-
}
|
|
530
|
-
];
|
|
531
|
-
return /* @__PURE__ */ React.createElement(Formik, {
|
|
532
|
-
initialValues: __spreadValues({
|
|
533
|
-
apiHost: "",
|
|
534
|
-
apiKey: "",
|
|
535
|
-
projectId: "",
|
|
536
|
-
logLevel: "none"
|
|
537
|
-
}, settings),
|
|
538
|
-
validationSchema: editableSettingsSchema,
|
|
539
|
-
enableReinitialize: true,
|
|
540
|
-
onSubmit: (values) => {
|
|
541
|
-
saveSettings(__spreadProps(__spreadValues({}, settings), {
|
|
542
|
-
apiHost: values.apiHost,
|
|
543
|
-
apiKey: values.apiKey,
|
|
544
|
-
projectId: values.projectId,
|
|
545
|
-
logLevel: values.logLevel
|
|
546
|
-
}));
|
|
547
|
-
}
|
|
548
|
-
}, ({ dirty, isValid, isSubmitting }) => /* @__PURE__ */ React.createElement(Form, {
|
|
549
|
-
className: styles$4["page"]
|
|
550
|
-
}, /* @__PURE__ */ React.createElement("h1", {
|
|
551
|
-
className: styles$4["page__title"]
|
|
552
|
-
}, "Settings"), /* @__PURE__ */ React.createElement(Field, {
|
|
553
|
-
component: SelectInput,
|
|
554
|
-
label: "Logging",
|
|
555
|
-
caption: "Logs can be viewed in the browser console",
|
|
556
|
-
id: "logging",
|
|
557
|
-
name: "logLevel",
|
|
558
|
-
options: logOptions,
|
|
559
|
-
disabled: isSubmitting
|
|
560
|
-
}), /* @__PURE__ */ React.createElement(Fieldset, {
|
|
561
|
-
disabled: isSubmitting
|
|
562
|
-
}, /* @__PURE__ */ React.createElement(Legend, null, "Data Connection"), !loading && error2 ? /* @__PURE__ */ React.createElement("p", {
|
|
563
|
-
className: styles$4.error
|
|
564
|
-
}, "Unable to fetch data from Uniform", /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("em", null, error2.message)) : null, /* @__PURE__ */ React.createElement("p", {
|
|
565
|
-
className: styles$4["page__text"]
|
|
566
|
-
}, /* @__PURE__ */ React.createElement("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__ */ React.createElement(Field, {
|
|
567
|
-
component: InputText,
|
|
568
|
-
label: "Uniform API key",
|
|
569
|
-
caption: "Generate an API key in your Uniform team settings. Grant only Context: Read Drafts permission.",
|
|
570
|
-
id: "api-key",
|
|
571
|
-
name: "apiKey",
|
|
572
|
-
autoComplete: "off"
|
|
573
|
-
}), /* @__PURE__ */ React.createElement(Field, {
|
|
574
|
-
component: InputText,
|
|
575
|
-
label: "Uniform Project ID",
|
|
576
|
-
caption: "Available after generating an API key ",
|
|
577
|
-
id: "project-id",
|
|
578
|
-
name: "projectId",
|
|
579
|
-
autoComplete: "off"
|
|
580
|
-
}), /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionItem, {
|
|
581
|
-
title: "Advanced"
|
|
582
|
-
}, /* @__PURE__ */ React.createElement(Field, {
|
|
583
|
-
component: InputText,
|
|
584
|
-
label: "Alternative API Host",
|
|
585
|
-
caption: "Use a non-standard Uniform API endpoint. Most people will not not need this option.",
|
|
586
|
-
id: "api-host",
|
|
587
|
-
name: "apiHost",
|
|
588
|
-
autoComplete: "off"
|
|
589
|
-
}))), dirty ? /* @__PURE__ */ React.createElement(Button, {
|
|
590
|
-
type: "submit",
|
|
591
|
-
className: styles$4["submit-btn"],
|
|
592
|
-
disabled: !isValid
|
|
593
|
-
}, "Save") : null)));
|
|
594
|
-
};
|
|
595
|
-
const ConnectApiKey = ({ settings, saveSettings }) => {
|
|
596
|
-
const handleRedirect = () => {
|
|
597
|
-
saveSettings(__spreadProps(__spreadValues({}, settings), { route: "/settings" }));
|
|
598
|
-
};
|
|
599
|
-
const dismissPrompt = () => {
|
|
600
|
-
saveSettings(__spreadProps(__spreadValues({}, settings), { ignoreApiKeyPrompt: true }));
|
|
601
|
-
};
|
|
602
|
-
const missingApiKey = !(settings == null ? void 0 : settings.apiKey);
|
|
603
|
-
return !settings.ignoreApiKeyPrompt && missingApiKey ? /* @__PURE__ */ React.createElement("div", {
|
|
604
|
-
className: `${styles$7["cta"]} ${styles$7["cta--with-icon"]}`
|
|
605
|
-
}, /* @__PURE__ */ React.createElement("h2", {
|
|
606
|
-
className: `${styles$7["cta__title"]}`
|
|
607
|
-
}, "Connect this site"), /* @__PURE__ */ React.createElement("p", {
|
|
608
|
-
className: `${styles$7["cta__text"]}`
|
|
609
|
-
}, "Add a Uniform API key to get better data."), /* @__PURE__ */ React.createElement("div", {
|
|
610
|
-
className: `${styles$7["cta__btn-group"]}`
|
|
611
|
-
}, /* @__PURE__ */ React.createElement(Button, {
|
|
612
|
-
buttonType: "secondary",
|
|
613
|
-
onClick: handleRedirect
|
|
614
|
-
}, "Connect this site"), /* @__PURE__ */ React.createElement(Button, {
|
|
615
|
-
buttonType: "ghost",
|
|
616
|
-
onClick: dismissPrompt
|
|
617
|
-
}, "Skip for now")), /* @__PURE__ */ React.createElement("button", {
|
|
618
|
-
type: "button",
|
|
619
|
-
className: `${styles$7["cta__close"]}`,
|
|
620
|
-
title: "close",
|
|
621
|
-
onClick: dismissPrompt
|
|
622
|
-
}, /* @__PURE__ */ React.createElement("span", {
|
|
623
|
-
hidden: true
|
|
624
|
-
}, "Close"))) : null;
|
|
625
|
-
};
|
|
626
|
-
var modernNormalize = "";
|
|
627
|
-
const layout = "_layout_nno34_64";
|
|
628
|
-
const layout__main = "_layout__main_nno34_84";
|
|
629
|
-
const scrollbar = "_scrollbar_nno34_91";
|
|
630
|
-
var styles$1 = {
|
|
631
|
-
layout,
|
|
632
|
-
"layout--browser-ext": "_layout--browser-ext_nno34_75",
|
|
633
|
-
layout__main,
|
|
634
|
-
scrollbar
|
|
635
|
-
};
|
|
636
|
-
var i = Object.defineProperty;
|
|
637
|
-
var s$1 = (t, e, o) => e in t ? i(t, e, { enumerable: true, configurable: true, writable: true, value: o }) : t[e] = o;
|
|
638
|
-
((t) => typeof require != "undefined" ? require : typeof Proxy != "undefined" ? new Proxy(t, { get: (e, o) => (typeof require != "undefined" ? require : e)[o] }) : t)(function(t) {
|
|
639
|
-
if (typeof require != "undefined")
|
|
640
|
-
return require.apply(this, arguments);
|
|
641
|
-
throw new Error('Dynamic require of "' + t + '" is not supported');
|
|
642
|
-
});
|
|
643
|
-
var d$1 = (t, e) => () => (t && (e = t(t = 0)), e);
|
|
644
|
-
var F = (t, e, o) => (s$1(t, typeof e != "symbol" ? e + "" : e, o), o), n = (t, e, o) => {
|
|
645
|
-
if (!e.has(t))
|
|
646
|
-
throw TypeError("Cannot " + o);
|
|
647
|
-
};
|
|
648
|
-
var L = (t, e, o) => (n(t, e, "read from private field"), o ? o.call(t) : e.get(t)), P$1 = (t, e, o) => {
|
|
649
|
-
if (e.has(t))
|
|
650
|
-
throw TypeError("Cannot add the same private member more than once");
|
|
651
|
-
e instanceof WeakSet ? e.add(t) : e.set(t, o);
|
|
652
|
-
};
|
|
653
|
-
var h = d$1(() => {
|
|
654
|
-
});
|
|
655
|
-
h();
|
|
656
|
-
var A = "_";
|
|
657
|
-
h();
|
|
658
|
-
var T = async (b) => await b(), x = class extends Error {
|
|
659
|
-
constructor(e, t, i2, n2, s2) {
|
|
660
|
-
super(`${e}
|
|
661
|
-
${n2}${s2 ? " " + s2 : ""} (${t} ${i2})`);
|
|
662
|
-
this.errorMessage = e;
|
|
663
|
-
this.fetchMethod = t;
|
|
664
|
-
this.fetchUri = i2;
|
|
665
|
-
this.statusCode = n2;
|
|
666
|
-
this.statusText = s2;
|
|
667
|
-
Object.setPrototypeOf(this, x.prototype);
|
|
668
|
-
}
|
|
669
|
-
};
|
|
670
|
-
h();
|
|
671
|
-
h();
|
|
672
|
-
var p = class {
|
|
673
|
-
constructor(e) {
|
|
674
|
-
F(this, "options");
|
|
675
|
-
var t, i2, n2, s2, a2, l2;
|
|
676
|
-
if (!e.apiKey && !e.bearerToken)
|
|
677
|
-
throw new Error("You must provide an API key or a bearer token");
|
|
678
|
-
this.options = __spreadProps(__spreadValues({}, e), { fetch: (t = e.fetch) != null ? t : fetch, apiHost: (i2 = e.apiHost) != null ? i2 : "https://uniform.app", apiKey: (n2 = e.apiKey) != null ? n2 : null, projectId: (s2 = e.projectId) != null ? s2 : null, bearerToken: (a2 = e.bearerToken) != null ? a2 : null, limitPolicy: (l2 = e.limitPolicy) != null ? l2 : T });
|
|
679
|
-
}
|
|
680
|
-
async apiClient(e, t) {
|
|
681
|
-
return this.options.limitPolicy(async () => {
|
|
682
|
-
var s2;
|
|
683
|
-
let i2 = this.options.apiKey ? { "x-api-key": this.options.apiKey } : { Authorization: `Bearer ${this.options.bearerToken}` }, n2 = await fetch(e.toString(), __spreadProps(__spreadValues({}, t), { headers: __spreadValues(__spreadValues({}, t == null ? void 0 : t.headers), i2) }));
|
|
684
|
-
if (!n2.ok) {
|
|
685
|
-
let a2 = "";
|
|
686
|
-
try {
|
|
687
|
-
let l2 = await n2.text();
|
|
688
|
-
try {
|
|
689
|
-
let f = JSON.parse(l2);
|
|
690
|
-
f.errorMessage ? a2 = Array.isArray(f.errorMessage) ? f.errorMessage.join(", ") : f.errorMessage : a2 = l2;
|
|
691
|
-
} catch (f) {
|
|
692
|
-
a2 = l2;
|
|
693
|
-
}
|
|
694
|
-
} catch (l2) {
|
|
695
|
-
a2 = "General error";
|
|
696
|
-
}
|
|
697
|
-
throw new x(a2, (s2 = t == null ? void 0 : t.method) != null ? s2 : "GET", e.toString(), n2.status);
|
|
698
|
-
}
|
|
699
|
-
return (t == null ? void 0 : t.expectNoContent) ? null : await n2.json();
|
|
700
|
-
});
|
|
701
|
-
}
|
|
702
|
-
createUrl(e, t) {
|
|
703
|
-
let i2 = new URL(`${this.options.apiHost}${e}`);
|
|
704
|
-
return Object.entries(t != null ? t : {}).forEach(([n2, s2]) => {
|
|
705
|
-
var a2;
|
|
706
|
-
typeof s2 != "undefined" && s2 !== null && i2.searchParams.append(n2, (a2 = s2 == null ? void 0 : s2.toString()) != null ? a2 : "");
|
|
707
|
-
}), i2;
|
|
708
|
-
}
|
|
709
|
-
};
|
|
710
|
-
var P, j = class extends p {
|
|
711
|
-
constructor(e) {
|
|
712
|
-
super(e);
|
|
713
|
-
}
|
|
714
|
-
async get(e) {
|
|
715
|
-
let { projectId: t } = this.options, i2 = this.createUrl(L(j, P), __spreadProps(__spreadValues({}, e), { projectId: t }));
|
|
716
|
-
return await this.apiClient(i2);
|
|
717
|
-
}
|
|
718
|
-
async upsert(e) {
|
|
719
|
-
let t = this.createUrl(L(j, P));
|
|
720
|
-
await this.apiClient(t, { method: "PUT", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
721
|
-
}
|
|
722
|
-
async remove(e) {
|
|
723
|
-
let t = this.createUrl(L(j, P));
|
|
724
|
-
await this.apiClient(t, { method: "DELETE", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
725
|
-
}
|
|
726
|
-
}, w = j;
|
|
727
|
-
P = new WeakMap(), P$1(w, P, "/api/v2/aggregate");
|
|
728
|
-
h();
|
|
729
|
-
var y, E, m = class extends p {
|
|
730
|
-
constructor(e) {
|
|
731
|
-
super(e);
|
|
732
|
-
}
|
|
733
|
-
async get(e) {
|
|
734
|
-
let { projectId: t } = this.options, i2 = this.createUrl(L(m, y), __spreadProps(__spreadValues({}, e), { projectId: t }));
|
|
735
|
-
return await this.apiClient(i2);
|
|
736
|
-
}
|
|
737
|
-
async upsertCategory(e) {
|
|
738
|
-
let t = this.createUrl(L(m, y));
|
|
739
|
-
await this.apiClient(t, { method: "PUT", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
740
|
-
}
|
|
741
|
-
async removeCategory(e) {
|
|
742
|
-
let t = this.createUrl(L(m, y));
|
|
743
|
-
await this.apiClient(t, { method: "DELETE", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
744
|
-
}
|
|
745
|
-
async upsertValue(e) {
|
|
746
|
-
let t = this.createUrl(L(m, E));
|
|
747
|
-
await this.apiClient(t, { method: "PUT", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
748
|
-
}
|
|
749
|
-
async removeValue(e) {
|
|
750
|
-
let t = this.createUrl(L(m, E));
|
|
751
|
-
await this.apiClient(t, { method: "DELETE", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
752
|
-
}
|
|
753
|
-
}, O = m;
|
|
754
|
-
y = new WeakMap(), E = new WeakMap(), P$1(O, y, "/api/v1/enrichments"), P$1(O, E, "/api/v1/enrichment-values");
|
|
755
|
-
h();
|
|
756
|
-
var I, R = class extends p {
|
|
757
|
-
constructor(e) {
|
|
758
|
-
super(e);
|
|
759
|
-
}
|
|
760
|
-
async get(e) {
|
|
761
|
-
let { projectId: t } = this.options, i2 = this.createUrl(L(R, I), __spreadProps(__spreadValues({}, e), { projectId: t }));
|
|
762
|
-
return await this.apiClient(i2);
|
|
763
|
-
}
|
|
764
|
-
}, N = R;
|
|
765
|
-
I = new WeakMap(), P$1(N, I, "/api/v2/manifest");
|
|
766
|
-
h();
|
|
767
|
-
var d, C = class extends p {
|
|
768
|
-
constructor(e) {
|
|
769
|
-
super(e);
|
|
770
|
-
}
|
|
771
|
-
async get(e) {
|
|
772
|
-
let { projectId: t } = this.options, i2 = this.createUrl(L(C, d), __spreadProps(__spreadValues({}, e), { projectId: t }));
|
|
773
|
-
return await this.apiClient(i2);
|
|
774
|
-
}
|
|
775
|
-
async upsert(e) {
|
|
776
|
-
let t = this.createUrl(L(C, d));
|
|
777
|
-
await this.apiClient(t, { method: "PUT", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
778
|
-
}
|
|
779
|
-
async remove(e) {
|
|
780
|
-
let t = this.createUrl(L(C, d));
|
|
781
|
-
await this.apiClient(t, { method: "DELETE", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
782
|
-
}
|
|
783
|
-
}, S$1 = C;
|
|
784
|
-
d = new WeakMap(), P$1(S$1, d, "/api/v2/quirk");
|
|
785
|
-
h();
|
|
786
|
-
var g, U = class extends p {
|
|
787
|
-
constructor(e) {
|
|
788
|
-
super(e);
|
|
789
|
-
}
|
|
790
|
-
async get(e) {
|
|
791
|
-
let { projectId: t } = this.options, i2 = this.createUrl(L(U, g), __spreadProps(__spreadValues({}, e), { projectId: t }));
|
|
792
|
-
return await this.apiClient(i2);
|
|
793
|
-
}
|
|
794
|
-
async upsert(e) {
|
|
795
|
-
let t = this.createUrl(L(U, g));
|
|
796
|
-
await this.apiClient(t, { method: "PUT", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
797
|
-
}
|
|
798
|
-
async remove(e) {
|
|
799
|
-
let t = this.createUrl(L(U, g));
|
|
800
|
-
await this.apiClient(t, { method: "DELETE", body: JSON.stringify(__spreadProps(__spreadValues({}, e), { projectId: this.options.projectId })), expectNoContent: true });
|
|
801
|
-
}
|
|
802
|
-
}, k = U;
|
|
803
|
-
g = new WeakMap(), P$1(k, g, "/api/v2/signal");
|
|
804
|
-
h();
|
|
805
|
-
h();
|
|
806
|
-
h();
|
|
807
|
-
var a, l = class extends p {
|
|
808
|
-
constructor(t) {
|
|
809
|
-
super(t);
|
|
810
|
-
}
|
|
811
|
-
async get(t) {
|
|
812
|
-
let { projectId: r } = this.options, o = this.createUrl(L(l, a), __spreadProps(__spreadValues({}, t), { projectId: r }));
|
|
813
|
-
return await this.apiClient(o);
|
|
814
|
-
}
|
|
815
|
-
}, s = l;
|
|
816
|
-
a = new WeakMap(), P$1(s, a, "/api/v2/dimension");
|
|
817
|
-
h();
|
|
818
|
-
function S(e) {
|
|
819
|
-
let t = e.category === "ENR" ? "Enrichment" : e.category === "SIG" ? "Signal" : e.subcategory === "1" ? "Intent" : e.subcategory === "0" ? "Audience" : "Aggregate";
|
|
820
|
-
return { dim: e.dim, name: e.name, type: t, category: e.category === "ENR" ? e.subcategory : void 0 };
|
|
821
|
-
}
|
|
822
|
-
function z(e, t) {
|
|
823
|
-
var r, o, g2, f;
|
|
824
|
-
if ((o = (r = t.project.pz) == null ? void 0 : r.agg) == null ? void 0 : o[e])
|
|
825
|
-
return { dim: e, name: e, type: "Aggregate" };
|
|
826
|
-
if ((f = (g2 = t.project.pz) == null ? void 0 : g2.sig) == null ? void 0 : f[e])
|
|
827
|
-
return { dim: e, name: e, type: "Signal" };
|
|
828
|
-
if (e.indexOf(A) >= 0) {
|
|
829
|
-
let [d2, R2] = e.split(A);
|
|
830
|
-
return { dim: e, name: R2, type: "Enrichment", category: d2 };
|
|
831
|
-
}
|
|
832
|
-
}
|
|
833
|
-
function useDimensionIndex({ apiHost, apiKey, projectId }, manifest) {
|
|
834
|
-
const manifestData = React.useMemo(() => {
|
|
835
|
-
var _a, _b, _c, _d;
|
|
836
|
-
const data = {};
|
|
837
|
-
if (!manifest) {
|
|
838
|
-
return data;
|
|
839
|
-
}
|
|
840
|
-
Object.keys((_b = (_a = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _a.sig) != null ? _b : {}).forEach((dimensionId) => {
|
|
841
|
-
const dim = z(dimensionId, manifest);
|
|
842
|
-
if (dim) {
|
|
843
|
-
data[dimensionId] = dim;
|
|
844
|
-
}
|
|
845
|
-
});
|
|
846
|
-
Object.keys((_d = (_c = manifest == null ? void 0 : manifest.project.pz) == null ? void 0 : _c.agg) != null ? _d : {}).forEach((dimensionId) => {
|
|
847
|
-
const dim = z(dimensionId, manifest);
|
|
848
|
-
if (dim) {
|
|
849
|
-
data[dimensionId] = dim;
|
|
850
|
-
}
|
|
851
|
-
});
|
|
852
|
-
return data;
|
|
853
|
-
}, [manifest]);
|
|
854
|
-
const { loading, error: error2, value } = useAsync(async () => {
|
|
855
|
-
if (!apiKey || !projectId) {
|
|
856
|
-
return manifestData;
|
|
857
|
-
}
|
|
858
|
-
const client = new s({
|
|
859
|
-
projectId,
|
|
860
|
-
apiKey,
|
|
861
|
-
apiHost: apiHost ? apiHost : void 0
|
|
862
|
-
});
|
|
863
|
-
const dimensions = (await client.get()).dimensions;
|
|
864
|
-
const result = __spreadValues({}, manifestData);
|
|
865
|
-
dimensions.forEach((dim) => {
|
|
866
|
-
result[dim.dim] = S(dim);
|
|
867
|
-
});
|
|
868
|
-
return result;
|
|
869
|
-
}, [apiHost, apiKey, projectId, manifestData]);
|
|
870
|
-
return {
|
|
871
|
-
loading,
|
|
872
|
-
error: error2,
|
|
873
|
-
index: value != null ? value : manifestData
|
|
874
|
-
};
|
|
875
|
-
}
|
|
876
|
-
function ContextDevTools(props) {
|
|
877
|
-
const isChromeExtension = typeof chrome !== "undefined" && typeof chrome.storage !== "undefined";
|
|
878
|
-
const dimensionIndex = useDimensionIndex(props.settings, props.state.manifest);
|
|
879
|
-
const routeProps = __spreadProps(__spreadValues({}, props), {
|
|
880
|
-
dimensionIndex
|
|
881
|
-
});
|
|
882
|
-
const component = () => {
|
|
883
|
-
var _a;
|
|
884
|
-
switch ((_a = props.settings) == null ? void 0 : _a.route) {
|
|
885
|
-
case void 0:
|
|
886
|
-
case "/":
|
|
887
|
-
case "/dimensions":
|
|
888
|
-
return /* @__PURE__ */ React.createElement(Dimensions, __spreadValues({}, routeProps));
|
|
889
|
-
case "/quirks":
|
|
890
|
-
return /* @__PURE__ */ React.createElement(Quirks, __spreadValues({}, routeProps));
|
|
891
|
-
case "/settings":
|
|
892
|
-
return /* @__PURE__ */ React.createElement(Settings, __spreadValues({}, routeProps));
|
|
893
|
-
default:
|
|
894
|
-
return /* @__PURE__ */ React.createElement(NotFound, null);
|
|
895
|
-
}
|
|
896
|
-
};
|
|
897
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
898
|
-
className: `${styles$1["layout"]} ${!isChromeExtension ? styles$1["layout--browser-ext"] : ""}`
|
|
899
|
-
}, /* @__PURE__ */ React.createElement(Menu, __spreadValues({}, props)), /* @__PURE__ */ React.createElement("main", {
|
|
900
|
-
className: `${styles$1["layout__main"]} ${styles$1["scrollbar"]}`
|
|
901
|
-
}, /* @__PURE__ */ React.createElement(ConnectApiKey, __spreadValues({}, props)), component()));
|
|
902
|
-
}
|
|
903
|
-
var styles = {
|
|
904
|
-
"embed-btn": "_embed-btn_1dhzs_1"
|
|
905
|
-
};
|
|
906
|
-
const EmbedToggleButton = (_m) => {
|
|
907
|
-
var props = __objRest(_m, []);
|
|
908
|
-
return /* @__PURE__ */ React.createElement("button", __spreadValues({
|
|
909
|
-
type: "button",
|
|
910
|
-
"data-uniform-dev-tools-version": "2",
|
|
911
|
-
className: styles["embed-btn"]
|
|
912
|
-
}, props), /* @__PURE__ */ React.createElement("span", {
|
|
913
|
-
hidden: true
|
|
914
|
-
}, "Uniform devtools"), /* @__PURE__ */ React.createElement("svg", {
|
|
915
|
-
width: "24",
|
|
916
|
-
height: "24",
|
|
917
|
-
viewBox: "0 0 24 24",
|
|
918
|
-
fill: "none",
|
|
919
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
920
|
-
}, /* @__PURE__ */ React.createElement("path", {
|
|
921
|
-
d: "M13.325 3.05011L8.66741 20.4323L10.5993 20.9499L15.2568 3.56775L13.325 3.05011Z",
|
|
922
|
-
fill: "currentColor"
|
|
923
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
924
|
-
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",
|
|
925
|
-
fill: "currentColor"
|
|
926
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
927
|
-
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",
|
|
928
|
-
fill: "currentColor"
|
|
929
|
-
})));
|
|
930
|
-
};
|
|
931
|
-
function EmbeddedContextDevTools({ context, initialSettings }) {
|
|
932
|
-
const [devtoolsOpen, setDevtoolsOpen] = React.useState(false);
|
|
933
|
-
const contextValue = context != null ? context : typeof window !== "undefined" ? window.__UNIFORM_DEVTOOLS_CONTEXT_INSTANCE__ : void 0;
|
|
934
|
-
const contextInstance = contextValue != null ? contextValue : new Context({ manifest: { project: {} } });
|
|
935
|
-
const [state, setState] = React.useState({
|
|
936
|
-
data: contextInstance.storage.data,
|
|
937
|
-
manifest: contextInstance.manifest.data,
|
|
938
|
-
scores: contextInstance.scores,
|
|
939
|
-
personalizations: [],
|
|
940
|
-
tests: []
|
|
941
|
-
});
|
|
942
|
-
const [settings, setSettings] = React.useState(initialSettings != null ? initialSettings : {});
|
|
943
|
-
React.useEffect(() => {
|
|
944
|
-
var _a;
|
|
945
|
-
const drain = createDebugConsoleLogDrain((_a = settings.logLevel) != null ? _a : "none");
|
|
946
|
-
contextInstance.events.on("log", drain);
|
|
947
|
-
return () => {
|
|
948
|
-
contextInstance.events.off("log", drain);
|
|
949
|
-
};
|
|
950
|
-
}, [settings, contextInstance]);
|
|
951
|
-
React.useEffect(() => {
|
|
952
|
-
const onContextDataUpdated = () => {
|
|
953
|
-
setState((old) => __spreadProps(__spreadValues({}, old), {
|
|
954
|
-
scores: contextInstance.scores,
|
|
955
|
-
data: contextInstance.storage.data,
|
|
956
|
-
manifest: contextInstance.manifest.data
|
|
957
|
-
}));
|
|
958
|
-
};
|
|
959
|
-
const onPersonalizationResult = (e) => {
|
|
960
|
-
if (!e.changed)
|
|
961
|
-
return;
|
|
962
|
-
setState((old) => __spreadProps(__spreadValues({}, old), { personalizations: [...old.personalizations, e] }));
|
|
963
|
-
};
|
|
964
|
-
const onTestResult = (e) => {
|
|
965
|
-
if (!e.variantAssigned)
|
|
966
|
-
return;
|
|
967
|
-
setState((old) => __spreadProps(__spreadValues({}, old), { tests: [...old.tests, e] }));
|
|
968
|
-
};
|
|
969
|
-
contextInstance.events.on("personalizationResult", onPersonalizationResult);
|
|
970
|
-
contextInstance.events.on("testResult", onTestResult);
|
|
971
|
-
contextInstance.storage.events.on("*", onContextDataUpdated);
|
|
972
|
-
return () => {
|
|
973
|
-
contextInstance.storage.events.off("*", onContextDataUpdated);
|
|
974
|
-
contextInstance.events.off("personalizationResult", onPersonalizationResult);
|
|
975
|
-
contextInstance.events.off("testResult", onTestResult);
|
|
976
|
-
};
|
|
977
|
-
}, [contextInstance, settings]);
|
|
978
|
-
const actions = React.useMemo(() => {
|
|
979
|
-
const actions2 = {
|
|
980
|
-
update: (up) => contextInstance.update(up),
|
|
981
|
-
forget: () => contextInstance.forget(false),
|
|
982
|
-
rawUpdate: (commands) => contextInstance.storage.updateData(commands)
|
|
983
|
-
};
|
|
984
|
-
return actions2;
|
|
985
|
-
}, [contextInstance]);
|
|
986
|
-
return contextValue ? /* @__PURE__ */ React.createElement("div", {
|
|
987
|
-
"data-uniform-dev-tools-version": "2"
|
|
988
|
-
}, /* @__PURE__ */ React.createElement(EmbedToggleButton, {
|
|
989
|
-
onClick: () => setDevtoolsOpen((prev) => !prev)
|
|
990
|
-
}), devtoolsOpen ? /* @__PURE__ */ React.createElement(ContextDevTools, {
|
|
991
|
-
state,
|
|
992
|
-
actions,
|
|
993
|
-
settings,
|
|
994
|
-
saveSettings: setSettings
|
|
995
|
-
}) : null) : /* @__PURE__ */ React.createElement("p", null, "Unable to find Uniform Context. Ensure the devtools plugin is activated.");
|
|
996
|
-
}
|
|
997
|
-
export { ContextDevTools, EmbeddedContextDevTools };
|