@xylabs/sdk-react 2.8.4 → 2.9.3

package/dist/esm2017/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useTheme, Box, alpha, CircularProgress, LinearProgress, Paper, Typography, IconButton, useScrollTrigger, Zoom, AppBar, Container, Toolbar, Button, Link, responsiveFontSizes, ScopedCssBaseline, ThemeProvider, Fab, Breadcrumbs, Dialog, DialogTitle, DialogContent, DialogActions, useMediaQuery } from '@mui/material';
+import { useTheme, Box, alpha, CircularProgress, LinearProgress, Paper, Typography, IconButton, useScrollTrigger, Zoom, AppBar, Container, Toolbar, Button, Link, responsiveFontSizes, ScopedCssBaseline, ThemeProvider, Fab, Breadcrumbs, Dialog, DialogTitle, DialogContent, DialogActions, useMediaQuery, Slider } from '@mui/material';
 export { useMediaQuery } from '@mui/material';
 import { AiOutlineReload, AiOutlineQuestionCircle } from 'react-icons/ai';
 import { makeStyles, createStyles } from '@mui/styles';
@@ -135,6 +135,16 @@ function __read(o, n) {
         finally { if (e) throw e.error; }
     }
     return ar;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 var BusyCircularProgress = function (_a) {
@@ -2146,10 +2156,10 @@ var InvertableThemeProvider = function (_a) {
 };
 
 var BasePage = function (_a) {
-    var disableGutters = _a.disableGutters, children = _a.children, beta = _a.beta, container = _a.container, hideFooter = _a.hideFooter, appFooter = _a.appFooter, appBar = _a.appBar, cookieConsent = _a.cookieConsent, hideAppBar = _a.hideAppBar, _b = _a.noindex, noindex = _b === void 0 ? false : _b, _c = _a.scrollToTopButton, scrollToTopButton = _c === void 0 ? false : _c, title = _a.title, props = __rest(_a, ["disableGutters", "children", "beta", "container", "hideFooter", "appFooter", "appBar", "cookieConsent", "hideAppBar", "noindex", "scrollToTopButton", "title"]);
+    var disableGutters = _a.disableGutters, children = _a.children, beta = _a.beta, container = _a.container, hideFooter = _a.hideFooter, appFooter = _a.appFooter, appBar = _a.appBar, cookieConsent = _a.cookieConsent, filterBar = _a.filterBar, hideAppBar = _a.hideAppBar, hideFilterBar = _a.hideFilterBar, _b = _a.noindex, noindex = _b === void 0 ? false : _b, _c = _a.scrollToTopButton, scrollToTopButton = _c === void 0 ? false : _c, title = _a.title, props = __rest(_a, ["disableGutters", "children", "beta", "container", "hideFooter", "appFooter", "appBar", "cookieConsent", "filterBar", "hideAppBar", "hideFilterBar", "noindex", "scrollToTopButton", "title"]);
     var theme = useTheme();
     var scrollToTopAnchorId = 'scroll-to-top-anchor';
-    return (jsxs(FlexCol, __assign({ justifyContent: "flex-start", color: theme.palette.text.primary, alignItems: "stretch", width: "100%", maxWidth: "100vw", minHeight: "100vh" }, props, { children: [jsx(Helmet, __assign({ title: title }, { children: noindex ? jsx("meta", { content: "noindex", name: "robots" }, void 0) : null }), void 0), scrollToTopButton ? jsx("div", { id: scrollToTopAnchorId }, void 0) : null, hideAppBar ? null : appBar, beta ? (jsx(FlexRow, __assign({ margin: 1, position: "absolute", top: 0, left: 0, bgcolor: "#cccccc88", paddingX: 1, style: { opacity: 0.5 } }, { children: jsx(Typography, __assign({ variant: "body2" }, { children: "Important: This page is a Beta page. It is possible that some information may not be correct." }), void 0) }), void 0)) : null, container ? (jsx(Container, __assign({ style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }, maxWidth: container, disableGutters: disableGutters }, { children: children }), void 0)) : (children), hideFooter ? null : jsx("footer", { children: appFooter }, void 0), cookieConsent !== null && cookieConsent !== void 0 ? cookieConsent : (jsx(ScopedCssBaseline, { children: jsx(InvertableThemeProvider, __assign({ invert: true }, { children: jsx(CookieConsent, { borderRadius: 0 }, void 0) }), void 0) }, void 0)), scrollToTopButton ? (jsx(ScrollToTopButton, __assign({ anchorId: scrollToTopAnchorId }, { children: jsx(Fab, __assign({ "aria-label": "scroll to top", color: "secondary", size: "small" }, { children: jsx(KeyboardArrowUp, {}, void 0) }), void 0) }), void 0)) : null] }), void 0));
+    return (jsxs(FlexCol, __assign({ justifyContent: "flex-start", color: theme.palette.text.primary, alignItems: "stretch", width: "100%", maxWidth: "100vw", minHeight: "100vh" }, props, { children: [jsx(Helmet, __assign({ title: title }, { children: noindex ? jsx("meta", { content: "noindex", name: "robots" }, void 0) : null }), void 0), scrollToTopButton ? jsx("div", { id: scrollToTopAnchorId }, void 0) : null, hideAppBar ? null : appBar, hideFilterBar ? null : filterBar, beta ? (jsx(FlexRow, __assign({ margin: 1, position: "absolute", top: 0, left: 0, bgcolor: "#cccccc88", paddingX: 1, style: { opacity: 0.5 } }, { children: jsx(Typography, __assign({ variant: "body2" }, { children: "Important: This page is a Beta page. It is possible that some information may not be correct." }), void 0) }), void 0)) : null, container ? (jsx(Container, __assign({ style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }, maxWidth: container, disableGutters: disableGutters }, { children: children }), void 0)) : (children), hideFooter ? null : jsx("footer", { children: appFooter }, void 0), cookieConsent !== null && cookieConsent !== void 0 ? cookieConsent : (jsx(ScopedCssBaseline, { children: jsx(InvertableThemeProvider, __assign({ invert: true }, { children: jsx(CookieConsent, { borderRadius: 0 }, void 0) }), void 0) }, void 0)), scrollToTopButton ? (jsx(ScrollToTopButton, __assign({ anchorId: scrollToTopAnchorId }, { children: jsx(Fab, __assign({ "aria-label": "scroll to top", color: "secondary", size: "small" }, { children: jsx(KeyboardArrowUp, {}, void 0) }), void 0) }), void 0)) : null] }), void 0));
 };
 
 var getPartialPath = function (pathParts, index) {
@@ -2229,6 +2239,26 @@ var useBreakpoint = function () {
     }
 };
 
+var useLocalStorage = function (key, defaultValue) {
+    var _a = __read(useState(function () {
+        try {
+            var item = getLocalStorageObject(key);
+            return item || defaultValue;
+        }
+        catch (ex) {
+            //Error is already logged
+            return defaultValue;
+        }
+    }), 2), storedValue = _a[0], setStoredValue = _a[1];
+    var setValue = function (value) {
+        console.log('setValue', value);
+        setStoredValue(value);
+        setLocalStorageObject(key, value);
+        console.log('getValue from ls', getLocalStorageObject(key));
+    };
+    return [storedValue, setValue];
+};
+
 var useMounted = function () {
     var _a = __read(useState(true), 2), mounted = _a[0], setMounted = _a[1];
     useEffect(function () {
@@ -2352,14 +2382,17 @@ var Experiment = function (props) {
     return jsx(Fragment, { children: children }, void 0);
 };
 
+var OutcomesLocalStorageKey = 'outcomes';
+var ExperimentsLocalStorageKey = 'experiments';
+
 var defaultLocalStorageKey = 'testData';
 var experimentsTestData = {};
 var outcomes = {}; //prevent multi-outcome
 var saveOutcomes = function () {
-    setLocalStorageObject('outcomes', outcomes);
+    setLocalStorageObject(OutcomesLocalStorageKey, outcomes);
 };
 var loadOutcomes = function () {
-    outcomes = getLocalStorageObject('outcomes');
+    outcomes = getLocalStorageObject(OutcomesLocalStorageKey);
 };
 var mergeData = function (data, log) {
     var dataArray = [];
@@ -2403,6 +2436,20 @@ var calcTotalWeight = function (childList) {
     }
     return totalWeight;
 };
+var saveExperimentDebugRanges = function (name, totalWeight, childList) {
+    var experiments = getLocalStorageObject(ExperimentsLocalStorageKey) || {};
+    experiments[name] = {
+        totalWeight: totalWeight,
+        variants: childList.map(function (child) {
+            var _a;
+            return ({
+                name: (_a = child.key) === null || _a === void 0 ? void 0 : _a.toString(),
+                weight: child.props.weight,
+            });
+        }),
+    };
+    setLocalStorageObject(ExperimentsLocalStorageKey, experiments);
+};
 var Experiments = function (props) {
     var e_2, _a;
     var _b, _c;
@@ -2413,6 +2460,7 @@ var Experiments = function (props) {
     var localStorageKey = buildLocalStorageKey(localStorageProp);
     var childList = makeChildrenArray(children);
     var totalWeight = calcTotalWeight(childList);
+    saveExperimentDebugRanges(name, totalWeight, childList);
     var firstTime = outcomes[name] === undefined;
     var targetWeight = (_b = outcomes[name]) !== null && _b !== void 0 ? _b : Math.random() * totalWeight;
     outcomes[name] = targetWeight;
@@ -2448,6 +2496,36 @@ var Experiments = function (props) {
     throw new Error('Experiment Choice Failed');
 };
 
+var ExperimentsDebugger = function (_a) {
+    var props = __rest(_a, []);
+    var _b = __read(useLocalStorage(ExperimentsLocalStorageKey, {}), 1), experiments = _b[0];
+    var _c = __read(useLocalStorage(OutcomesLocalStorageKey, {}), 2), outcomes = _c[0], setOutcomes = _c[1];
+    var sumUpVariants = function (items) { return items.reduce(function (acc, curr) { return acc + curr.weight; }, 0); };
+    var experimentEntries = Object.entries(experiments);
+    if (!experiments || !experimentEntries.length) {
+        return (jsxs(FlexCol, __assign({ alignItems: "stretch" }, props, { children: [jsx(Typography, __assign({ variant: "subtitle1" }, { children: "No Experiments loaded" }), void 0), jsx(Typography, __assign({ variant: "subtitle2" }, { children: "Visit a page with an experiment to load the data" }), void 0)] }), void 0));
+    }
+    return (jsx(FlexCol, __assign({ alignItems: "stretch" }, props, { children: Object.entries(experiments).map(function (data) {
+            var _a = __read(data, 2), name = _a[0], experiment = _a[1];
+            var outcome = (outcomes[name] || 0);
+            var marks = __spreadArray([
+                { label: "".concat(experiment.variants[0].name, " | ").concat(experiment.variants[0].weight), value: 0 }
+            ], __read(experiment.variants.map(function (_a, index) {
+                var weight = _a.weight;
+                return ({
+                    label: index === experiment.variants.length - 1 ? 'End' : "".concat(experiment.variants[index + 1].name, " | ").concat(weight),
+                    value: index === 0 ? weight : sumUpVariants(experiment.variants.slice(0, index + 1)),
+                });
+            })), false);
+            return (jsxs(FlexCol, __assign({ alignItems: "stretch", paddingX: 4, marginBottom: 4 }, props, { children: [jsxs(FlexRow, { children: [name, ":\u00A0", outcome] }, void 0), jsx(FlexRow, { children: jsx(Slider, { "aria-label": "Experiment ".concat(name), defaultValue: outcome, value: outcome, marks: marks, onChange: function (e, value) {
+                                var truncated = Number((Array.isArray(value) ? value[0] : value).toFixed(2));
+                                outcomes[name] = truncated;
+                                // Spread operator triggers rerender
+                                setOutcomes(__assign({}, outcomes));
+                            } }, void 0) }, void 0)] }), "experiment-".concat(name)));
+        }) }), void 0));
+};
+
 var LinkToEx = function (_a) {
     var to = _a.to, props = __rest(_a, ["to"]);
     return jsx(Link, __assign({ component: Link$1, to: to }, props), void 0);
@@ -2549,5 +2627,5 @@ var TokenAmount = function (_a) {
     return (jsx(ButtonEx, __assign({ style: __assign({ backgroundColor: statusColor }, style), variant: "outlined", onClick: onButtonClick }, props, { children: jsxs(FlexRow, __assign({ justifyContent: "space-between", width: "100%", busy: amount === undefined, busySize: 16 }, { children: [jsxs(FlexRow, { children: [logo ? jsx("img", { src: img, height: 24 }, void 0) : null, label ? (jsx(Typography, __assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }), void 0)) : null] }, void 0), jsx(Typography, __assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }), void 0)] }), void 0) }), void 0));
 };
 
-export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useMounted, useNavigateToEthAddress, useSpacing, useWebP, useWindowSize };
+export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useWebP, useWindowSize };
 //# sourceMappingURL=index.js.map