@xylabs/sdk-react 2.8.4 → 2.9.3

package/dist/node/components/Experiments/index.d.ts

@@ -1,3 +1,4 @@
 import { Experiment } from './Experiment';
 import { Experiments } from './Experiments';
-export { Experiment, Experiments };
+import { ExperimentsDebugger } from './ExperimentsDebugger';
+export { Experiment, Experiments, ExperimentsDebugger };

package/dist/node/components/Experiments/models/index.d.ts

@@ -0,0 +1,12 @@
+export declare const OutcomesLocalStorageKey = "outcomes";
+export declare const ExperimentsLocalStorageKey = "experiments";
+export declare type OutcomesData = Record<string, number>;
+export declare type ExperimentsData = Record<string, ExperimentData>;
+export declare type ExperimentData = {
+    totalWeight: number;
+    variants: VariantData[];
+};
+export declare type VariantData = {
+    weight: number;
+    name?: string;
+};

package/dist/node/components/dialogs/ErrorDialog.d.ts

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { DialogProps } from '@mui/material';
-import React from 'react';
 export interface ErrorDialogProps extends DialogProps {
     error?: Error;
     onAction?: (retry: boolean) => void;

package/dist/node/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useBreakpoint';
+export * from './useLocalStorage';
 export * from './useMediaQuery';
 export * from './useMounted';
 export * from './useNavigateToEthAddress';

package/dist/node/hooks/useLocalStorage.d.ts

@@ -0,0 +1 @@
+export declare const useLocalStorage: <T>(key: string, defaultValue: T) => [T, (value: T) => void];

package/dist/node/index.js

@@ -144,6 +144,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) {
@@ -2155,10 +2165,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 = material.useTheme();
     var scrollToTopAnchorId = 'scroll-to-top-anchor';
-    return (jsxRuntime.jsxs(FlexCol, __assign({ justifyContent: "flex-start", color: theme.palette.text.primary, alignItems: "stretch", width: "100%", maxWidth: "100vw", minHeight: "100vh" }, props, { children: [jsxRuntime.jsx(reactHelmet.Helmet, __assign({ title: title }, { children: noindex ? jsxRuntime.jsx("meta", { content: "noindex", name: "robots" }, void 0) : null }), void 0), scrollToTopButton ? jsxRuntime.jsx("div", { id: scrollToTopAnchorId }, void 0) : null, hideAppBar ? null : appBar, beta ? (jsxRuntime.jsx(FlexRow, __assign({ margin: 1, position: "absolute", top: 0, left: 0, bgcolor: "#cccccc88", paddingX: 1, style: { opacity: 0.5 } }, { children: jsxRuntime.jsx(material.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 ? (jsxRuntime.jsx(material.Container, __assign({ style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }, maxWidth: container, disableGutters: disableGutters }, { children: children }), void 0)) : (children), hideFooter ? null : jsxRuntime.jsx("footer", { children: appFooter }, void 0), cookieConsent !== null && cookieConsent !== void 0 ? cookieConsent : (jsxRuntime.jsx(material.ScopedCssBaseline, { children: jsxRuntime.jsx(InvertableThemeProvider, __assign({ invert: true }, { children: jsxRuntime.jsx(CookieConsent, { borderRadius: 0 }, void 0) }), void 0) }, void 0)), scrollToTopButton ? (jsxRuntime.jsx(ScrollToTopButton, __assign({ anchorId: scrollToTopAnchorId }, { children: jsxRuntime.jsx(material.Fab, __assign({ "aria-label": "scroll to top", color: "secondary", size: "small" }, { children: jsxRuntime.jsx(iconsMaterial.KeyboardArrowUp, {}, void 0) }), void 0) }), void 0)) : null] }), void 0));
+    return (jsxRuntime.jsxs(FlexCol, __assign({ justifyContent: "flex-start", color: theme.palette.text.primary, alignItems: "stretch", width: "100%", maxWidth: "100vw", minHeight: "100vh" }, props, { children: [jsxRuntime.jsx(reactHelmet.Helmet, __assign({ title: title }, { children: noindex ? jsxRuntime.jsx("meta", { content: "noindex", name: "robots" }, void 0) : null }), void 0), scrollToTopButton ? jsxRuntime.jsx("div", { id: scrollToTopAnchorId }, void 0) : null, hideAppBar ? null : appBar, hideFilterBar ? null : filterBar, beta ? (jsxRuntime.jsx(FlexRow, __assign({ margin: 1, position: "absolute", top: 0, left: 0, bgcolor: "#cccccc88", paddingX: 1, style: { opacity: 0.5 } }, { children: jsxRuntime.jsx(material.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 ? (jsxRuntime.jsx(material.Container, __assign({ style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }, maxWidth: container, disableGutters: disableGutters }, { children: children }), void 0)) : (children), hideFooter ? null : jsxRuntime.jsx("footer", { children: appFooter }, void 0), cookieConsent !== null && cookieConsent !== void 0 ? cookieConsent : (jsxRuntime.jsx(material.ScopedCssBaseline, { children: jsxRuntime.jsx(InvertableThemeProvider, __assign({ invert: true }, { children: jsxRuntime.jsx(CookieConsent, { borderRadius: 0 }, void 0) }), void 0) }, void 0)), scrollToTopButton ? (jsxRuntime.jsx(ScrollToTopButton, __assign({ anchorId: scrollToTopAnchorId }, { children: jsxRuntime.jsx(material.Fab, __assign({ "aria-label": "scroll to top", color: "secondary", size: "small" }, { children: jsxRuntime.jsx(iconsMaterial.KeyboardArrowUp, {}, void 0) }), void 0) }), void 0)) : null] }), void 0));
 };
 
 var getPartialPath = function (pathParts, index) {
@@ -2238,6 +2248,26 @@ var useBreakpoint = function () {
     }
 };
 
+var useLocalStorage = function (key, defaultValue) {
+    var _a = __read(react.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(react.useState(true), 2), mounted = _a[0], setMounted = _a[1];
     react.useEffect(function () {
@@ -2361,14 +2391,17 @@ var Experiment = function (props) {
     return jsxRuntime.jsx(jsxRuntime.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 = [];
@@ -2412,6 +2445,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;
@@ -2422,6 +2469,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;
@@ -2457,6 +2505,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 (jsxRuntime.jsxs(FlexCol, __assign({ alignItems: "stretch" }, props, { children: [jsxRuntime.jsx(material.Typography, __assign({ variant: "subtitle1" }, { children: "No Experiments loaded" }), void 0), jsxRuntime.jsx(material.Typography, __assign({ variant: "subtitle2" }, { children: "Visit a page with an experiment to load the data" }), void 0)] }), void 0));
+    }
+    return (jsxRuntime.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 (jsxRuntime.jsxs(FlexCol, __assign({ alignItems: "stretch", paddingX: 4, marginBottom: 4 }, props, { children: [jsxRuntime.jsxs(FlexRow, { children: [name, ":\u00A0", outcome] }, void 0), jsxRuntime.jsx(FlexRow, { children: jsxRuntime.jsx(material.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 jsxRuntime.jsx(material.Link, __assign({ component: reactRouterDom.Link, to: to }, props), void 0);
@@ -2581,6 +2659,7 @@ exports.EthersContext = EthersContext;
 exports.EthersLoader = EthersLoader;
 exports.Experiment = Experiment;
 exports.Experiments = Experiments;
+exports.ExperimentsDebugger = ExperimentsDebugger;
 exports.FacebookCustomEvent = FacebookCustomEvent;
 exports.FacebookStandardEvents = FacebookStandardEvents;
 exports.Fbq = Fbq;
@@ -2634,6 +2713,7 @@ exports.setSessionStorageObject = setSessionStorageObject;
 exports.useAsyncEffect = useAsyncEffect;
 exports.useBreakpoint = useBreakpoint;
 exports.useCookieConsent = useCookieConsent;
+exports.useLocalStorage = useLocalStorage;
 exports.useMounted = useMounted;
 exports.useNavigateToEthAddress = useNavigateToEthAddress;
 exports.useSpacing = useSpacing;