@maestro_io/maestro-web-sdk 2.1.2 → 2.2.0

package/dist/components/core/ScrollableContainer/ScrollableContainer.js

@@ -1,166 +0,0 @@
-import React from 'react';
-import './ScrollableContainer.styles.css';
-const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-/**
- * ScrollableContainer component provides a context for focusable items
- * that allows them to register themselves and handle scrolling
- * when they become focused.
- * @example
- * ```jsx
- * <ScrollableContainer scrollableContainerRef={scrollableContainerRef}>
- *    <FocusableItem>Item 1</FocusableItem>
- *    <FocusableItem>Item 2</FocusableItem>
- *    <FocusableItem>Item 3</FocusableItem>
- * </ScrollableContainer>
- * ```
- */
-class ScrollableContainer extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "refsMap", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "hash", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ''
-        });
-        Object.defineProperty(this, "lastHash", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ''
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                scrolled: false,
-            }
-        });
-        Object.defineProperty(this, "setRef", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (ref) => {
-                this.refsMap.push(ref);
-                this.hash = Math.random().toString(36).substring(2, 15);
-            }
-        });
-        Object.defineProperty(this, "getOrderedRefs", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                if (this.hash === this.lastHash) {
-                    return this.refsMap;
-                }
-                this.refsMap = this.refsMap.sort((a, b) => {
-                    if (!this.props.scrollableContainerRef)
-                        return 0;
-                    const containerRect = this.props.scrollableContainerRef.getBoundingClientRect();
-                    const aRect = a ? a.getBoundingClientRect() : { top: 0, bottom: 0 };
-                    const bRect = b ? b.getBoundingClientRect() : { top: 0, bottom: 0 };
-                    // Calculate the actual distance from container top (positive means below, negative means above)
-                    const aDistance = aRect.top - containerRect.top;
-                    const bDistance = bRect.top - containerRect.top;
-                    return aDistance - bDistance;
-                });
-                this.lastHash = this.hash;
-                return this.refsMap;
-            }
-        });
-        /**
-         * @description - Scrolls the container to the focused element if necessary
-         */
-        Object.defineProperty(this, "scrollToFocusedElement", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: async (layout) => {
-                if (!this.props.scrollableContainerRef || !layout.node)
-                    return;
-                const refs = this.getOrderedRefs();
-                // Wait for the next frame to ensure the layout is updated
-                if (process.env.NODE_ENV !== 'test') {
-                    await wait(0);
-                }
-                const containerRect = this.props.scrollableContainerRef.getBoundingClientRect();
-                const nodeRect = layout.node.getBoundingClientRect();
-                let index = -1;
-                for (let i = refs.length - 1; i >= 0; i--) {
-                    if (refs[i].contains(layout.node)) {
-                        index = i;
-                        break;
-                    }
-                }
-                if (index === -1) {
-                    console.warn('Element not found in refsMap to focus to. Register the element wrapping it with <FocusableItem />');
-                    return;
-                }
-                let hasOutside = false;
-                refs.slice(index).forEach((el) => {
-                    const rect = el.getBoundingClientRect();
-                    if (rect.bottom > containerRect.bottom || rect.top < containerRect.top) {
-                        hasOutside = true;
-                    }
-                });
-                if (!hasOutside)
-                    return;
-                const target = index === 0
-                    ? 0
-                    : this.props.scrollableContainerRef.scrollTop +
-                        (nodeRect.top -
-                            containerRect.top -
-                            (this.props.containerTopOffset || 0));
-                this.props.scrollableContainerRef.scrollTop = target;
-                const newScrolled = target > 0;
-                if (this.state.scrolled !== newScrolled) {
-                    this.setState({ scrolled: newScrolled });
-                }
-            }
-        });
-    }
-    getChildContext() {
-        return {
-            refsMap: this.refsMap,
-            setRef: this.setRef,
-            scrollToFocusedElement: this.scrollToFocusedElement,
-        };
-    }
-    componentWillUnmount() {
-        this.refsMap = [];
-        this.hash = '';
-        this.lastHash = '';
-    }
-    render() {
-        const { scrollableContainerRef: _, containerTopOffset: __, ...rest } = this.props;
-        return (React.createElement("div", { className: "scrollable-container", "data-scrolled": this.state.scrolled, ...rest }, this.props.children));
-    }
-}
-Object.defineProperty(ScrollableContainer, "childContextTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        refsMap: React.PropTypes.arrayOf(React.PropTypes.instanceOf(HTMLElement)),
-        setRef: React.PropTypes.func,
-        scrollToFocusedElement: React.PropTypes.func,
-    }
-});
-export const DEFAULT_SCROLLABLE_CONTAINER_CONTEXT = {
-    setRef: (_) => { },
-    scrollToFocusedElement: () => { },
-    refsMap: [],
-};
-export const SCROLLABLE_CONTEXT_TYPE = {
-    refsMap: React.PropTypes.arrayOf(React.PropTypes.instanceOf(HTMLElement)),
-    setRef: React.PropTypes.func,
-    scrollToFocusedElement: React.PropTypes.func,
-};
-export default ScrollableContainer;

package/dist/components/core/ScrollableContainer/index.js

@@ -1,2 +0,0 @@
-import ScrollableContainer from './ScrollableContainer';
-export default ScrollableContainer;

package/dist/components/molecules/ActionButton/ActionButton.js

@@ -1,10 +0,0 @@
-import BaseButton from '@/components/atoms/BaseButton';
-import './ActionButton.styles.css';
-import { withFocusable, } from '@/external/spatial-navigation';
-import React from 'react';
-class ActionButton extends React.Component {
-    render() {
-        return (React.createElement(BaseButton, { className: "action-button T05_ALT", ...this.props }, this.props.children));
-    }
-}
-export default withFocusable()(ActionButton);

package/dist/components/molecules/ActionButton/index.js

@@ -1,2 +0,0 @@
-import ActionButton from './ActionButton';
-export default ActionButton;

package/dist/components/molecules/Overlay/Overlay.js

@@ -1,139 +0,0 @@
-// import { Rive as RiveCanvas } from '@rive-app/canvas';
-import React from 'react';
-import { OverlayType } from '@/types/OverlayTypes';
-import Rive from '../../atoms/Rive';
-export const WINNING_BET_RIVE_FILE_URL = 'https://static.gcp.maestro.io/media/664b9c57d59a7a431542d814/67db106027ddcdcd2ecb97d4.riv';
-const AUTO_DISMISS_TIMEOUT = 10400;
-class Overlay extends React.Component {
-    constructor(props) {
-        super(props);
-        Object.defineProperty(this, "autoDismissTimeout", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "handleOverlayAction", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                const { overlayType, onOverlayAction } = this.props;
-                this.setState({ autoDismiss: false });
-                switch (overlayType) {
-                    case OverlayType.WinningBet:
-                        break;
-                    case OverlayType.FantasyPlayerEvent:
-                        break;
-                }
-                // Call custom action handler if provided
-                if (onOverlayAction) {
-                    onOverlayAction(overlayType);
-                }
-            }
-        });
-        Object.defineProperty(this, "trackOverlayViewed", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                if (this.state.hasTrackedView)
-                    return;
-                this.setState({ hasTrackedView: true });
-                if (this.props.onOverlayViewed) {
-                    this.props.onOverlayViewed(this.props.overlayType);
-                }
-            }
-        });
-        Object.defineProperty(this, "onLoadRiveInstance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (riveInstance) => {
-                if (!riveInstance)
-                    return;
-                // Ensure the drawing surface matches the canvas size and device pixel ratio
-                riveInstance.resizeDrawingSurfaceToCanvas();
-                // Set text values after the file is loaded
-                try {
-                    riveInstance.setTextRunValueAtPath('Title', this.overlayTitle, 'compNotification');
-                    riveInstance.setTextRunValueAtPath('Metadata', this.overlayMetadata, 'compNotification');
-                }
-                catch (error) {
-                    console.error('Error setting text values:', error);
-                }
-                // Get state machine inputs and trigger the play input specifically
-                try {
-                    const inputs = riveInstance.stateMachineInputs('stateMachine');
-                    const triggerPlayInput = inputs.find((input) => input.name === 'triggerPlay');
-                    if (triggerPlayInput) {
-                        triggerPlayInput.fire();
-                    }
-                    else if (inputs.length > 0) {
-                        inputs[0].fire();
-                    }
-                }
-                catch (error) {
-                    console.error('Error with state machine inputs:', error);
-                }
-                this.trackOverlayViewed();
-                this.autoDismissTimeout = setTimeout(() => {
-                    if (this.state.autoDismiss) {
-                        this.handleOverlayAction();
-                    }
-                }, AUTO_DISMISS_TIMEOUT);
-            }
-        });
-        this.state = {
-            autoDismiss: true,
-            hasTrackedView: false,
-        };
-    }
-    componentWillUnmount() {
-        if (this.autoDismissTimeout) {
-            clearTimeout(this.autoDismissTimeout);
-        }
-    }
-    get overlayTitle() {
-        const { overlayType, fantasy } = this.props;
-        switch (overlayType) {
-            case OverlayType.WinningBet:
-                return 'You won your bet!';
-            case OverlayType.FantasyPlayerEvent:
-                return fantasy?.title ?? 'Fantasy Update';
-            default:
-                return '';
-        }
-    }
-    get overlayMetadata() {
-        const { overlayType, winningBet, fantasy } = this.props;
-        switch (overlayType) {
-            case OverlayType.WinningBet:
-                return (winningBet?.notificationText ?? 'Click OK to view your winning bets.');
-            case OverlayType.FantasyPlayerEvent:
-                return fantasy?.metadata ?? 'New Player Activity';
-            default:
-                return '';
-        }
-    }
-    render() {
-        const style = {
-            position: 'fixed',
-            zIndex: 999999,
-            left: this.props.position?.left !== undefined
-                ? `${this.props.position.left}px`
-                : undefined,
-            right: this.props.position?.right !== undefined
-                ? `${this.props.position.right}px`
-                : undefined,
-            top: this.props.position?.top !== undefined
-                ? `${this.props.position.top}px`
-                : undefined,
-            bottom: this.props.position?.bottom !== undefined
-                ? `${this.props.position.bottom}px`
-                : undefined,
-        };
-        return (React.createElement(Rive, { id: this.props.id, onEnterPress: this.handleOverlayAction, focusKey: "maestro-overlay", autoFocus: true, autoPlay: true, onLoadRiveInstance: this.onLoadRiveInstance, src: WINNING_BET_RIVE_FILE_URL, style: style }));
-    }
-}
-export default Overlay;

package/dist/components/molecules/Overlay/index.js

@@ -1,2 +0,0 @@
-import Overlay from './Overlay';
-export default Overlay;

package/dist/components/molecules/PanelNavButton/PanelNavButton.js

@@ -1,40 +0,0 @@
-import BaseButton from '@/components/atoms/BaseButton/BaseButton';
-import Icon from '@/components/atoms/SvgIcon/Icon';
-import './PanelNavButton.styles.css';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withFocusable } from '@/external/spatial-navigation';
-class PanelNavButton extends React.Component {
-    render() {
-        const { iconName, active, children, focused } = this.props;
-        return (React.createElement("div", { className: [
-                'panel-nav-button-container',
-                'T02',
-                active ? 'panel-nav-button-active' : '',
-            ].join(' '), "data-focused": focused },
-            React.createElement(BaseButton, null,
-                React.createElement(Icon, { iconName: iconName, height: 36, width: 36 })),
-            children));
-    }
-}
-Object.defineProperty(PanelNavButton, "displayName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'PanelNavButton'
-});
-Object.defineProperty(PanelNavButton, "propTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        iconName: PropTypes.string.isRequired,
-        index: PropTypes.number.isRequired,
-        active: PropTypes.bool.isRequired,
-        children: PropTypes.node,
-        focused: PropTypes.bool,
-        onBecameFocused: PropTypes.func,
-        buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    }
-});
-export default withFocusable()(PanelNavButton);

package/dist/components/molecules/PanelNavButton/index.js

@@ -1,2 +0,0 @@
-import PanelNavButton from './PanelNavButton';
-export default PanelNavButton;

package/dist/components/molecules/SegmentButton/SegmentButton.js

@@ -1,10 +0,0 @@
-import BaseButton from '@/components/atoms/BaseButton/BaseButton';
-import './SegmentButton.styles.css';
-import React from 'react';
-import { withFocusable, } from '@/external/spatial-navigation';
-class SegmentButton extends React.Component {
-    render() {
-        return (React.createElement(BaseButton, { className: "segment-button T05_ALT", "data-focused": this.props.focused, "data-active": this.props.active }, this.props.children));
-    }
-}
-export default withFocusable()(SegmentButton);

package/dist/components/molecules/SegmentButton/index.js

@@ -1,2 +0,0 @@
-import SegmentButton from './SegmentButton';
-export default SegmentButton;

package/dist/components/molecules/WatchButton/WatchButton.js

@@ -1,15 +0,0 @@
-import BaseButton from '@/components/atoms/BaseButton/BaseButton';
-import Icon from '@/components/atoms/SvgIcon';
-import './WatchButton.styles.css';
-import React from 'react';
-class WatchButton extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        return (React.createElement(BaseButton, { className: "watch-button T05_ALT", ...this.props },
-            React.createElement(Icon, { iconName: "play", height: 20, width: 19 }),
-            this.props.children));
-    }
-}
-export default WatchButton;

package/dist/components/molecules/WatchButton/index.js

@@ -1,2 +0,0 @@
-import WatchButton from './WatchButton';
-export default WatchButton;

package/dist/components/organisms/PanelNavigation/PanelNavigation.js

@@ -1,72 +0,0 @@
-import PanelNavButton from '@/components/molecules/PanelNavButton';
-import './PanelNavigation.styles.css';
-import React from 'react';
-import deliverFocus from '@/helpers/deliver-focus';
-import { setFocus } from '@/external/spatial-navigation';
-class PanelNavigationButton extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "handleArrowPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (d, _props, details) => {
-                if (d === 'left' && this.props.itemFocused === 0 && details.layout) {
-                    deliverFocus(details.layout.node);
-                    return;
-                }
-                if (this.props.onArrowPress) {
-                    this.props.onArrowPress(d);
-                }
-            }
-        });
-    }
-    render() {
-        const { item, index } = this.props;
-        return (React.createElement(PanelNavButton, { iconName: item.iconName, key: item.title, index: index, onBecameFocused: this.props.onBecameFocused(index), active: item.active, focusKey: `PANEL_NAV_BUTTON_${index}`, onArrowPress: this.handleArrowPress }, item.title));
-    }
-}
-class PanelNavigation extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                itemFocused: null,
-                lastFocused: null,
-            }
-        });
-        Object.defineProperty(this, "handleBecameFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (index) => () => {
-                if (this.state.lastFocused !== index && this.state.lastFocused) {
-                    setFocus(`PANEL_NAV_BUTTON_${this.state.lastFocused}`);
-                    return;
-                }
-                this.setState({ itemFocused: index, lastFocused: null }, () => {
-                    if (this.props.items[index]) {
-                        this.props.items[index].onEnter();
-                    }
-                });
-            }
-        });
-        Object.defineProperty(this, "handleArrowPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (direction) => {
-                if (direction === 'down') {
-                    this.setState({ lastFocused: this.state.itemFocused });
-                }
-            }
-        });
-    }
-    render() {
-        return (React.createElement("div", { className: "panel-navigation" }, this.props.items.map((item, index) => (React.createElement(PanelNavigationButton, { itemFocused: this.state.itemFocused, onBecameFocused: this.handleBecameFocused, onArrowPress: this.handleArrowPress, key: item.title, item: item, index: index })))));
-    }
-}
-export default PanelNavigation;

package/dist/components/organisms/PanelNavigation/index.js

@@ -1,2 +0,0 @@
-import PanelNavigation from './PanelNavigation';
-export default PanelNavigation;

package/dist/components/organisms/SegmentController/SegmentController.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import SegmentButton from '@/components/molecules/SegmentButton';
-import './SegmentController.styles.css';
-import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
-import { setFocus } from '@/external/spatial-navigation';
-import deliverFocus from '@/helpers/deliver-focus';
-class SegmentController extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "context", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                activeIndex: 0,
-                lastActiveIndex: 0,
-            }
-        });
-        Object.defineProperty(this, "onBecameFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (item, i) => (layout) => {
-                if (this.state.lastActiveIndex !== i &&
-                    this.state.lastActiveIndex !== null) {
-                    setFocus(`segment-controller-${this.state.lastActiveIndex}`);
-                    return;
-                }
-                this.setState({
-                    activeIndex: i,
-                    lastActiveIndex: null,
-                });
-                item.onEnter();
-                this.context.scrollToFocusedElement(layout);
-            }
-        });
-        Object.defineProperty(this, "handleArrowPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (index) => (direction, _props, details) => {
-                if (direction === 'down' || direction === 'up') {
-                    this.setState({ lastActiveIndex: this.state.activeIndex });
-                }
-                if (direction === 'left' && index === 0 && details.layout) {
-                    deliverFocus(details.layout.node.firstElementChild);
-                }
-            }
-        });
-    }
-    render() {
-        return (React.createElement("div", { className: "segment-controller", style: {
-                backgroundColor: this.props.backgroundColor,
-            } }, this.props.items.map((item, index) => (React.createElement(SegmentButton, { focusKey: `segment-controller-${index}`, key: item.title, onBecameFocused: this.onBecameFocused(item, index), onArrowPress: this.handleArrowPress(index), active: this.state.activeIndex === index }, item.title)))));
-    }
-}
-Object.defineProperty(SegmentController, "contextTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: SCROLLABLE_CONTEXT_TYPE
-});
-export default SegmentController;

package/dist/components/organisms/SegmentController/index.js

@@ -1,2 +0,0 @@
-import SegmentController from './SegmentController';
-export default SegmentController;

package/dist/external/AxiosNetworkClient.js

@@ -1,83 +0,0 @@
-import axios from 'axios';
-const REQUEST_TIMEOUT = 5000;
-class AxiosNetworkClient {
-    constructor({ baseURL, retries, delay, backoff, axiosInstance, }) {
-        Object.defineProperty(this, "client", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "retries", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "delay", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "backoff", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.retries = retries;
-        this.delay = delay;
-        this.backoff = backoff;
-        this.client =
-            axiosInstance ||
-                axios.create({
-                    baseURL,
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    timeout: REQUEST_TIMEOUT,
-                });
-    }
-    async retry(operation, attempt = 0) {
-        try {
-            return await operation();
-        }
-        catch (error) {
-            const axiosError = error;
-            // Check if we should retry
-            const shouldRetry = attempt < this.retries &&
-                ((axiosError.response && axiosError.response.status === 429) ||
-                    axiosError.code === 'ECONNABORTED');
-            if (shouldRetry) {
-                const delayTime = this.delay * Math.pow(this.backoff, attempt);
-                console.log(`Retrying request in ${delayTime}ms due to: ${axiosError.message}`);
-                await new Promise((resolve) => setTimeout(resolve, delayTime));
-                return this.retry(operation, attempt + 1);
-            }
-            throw error;
-        }
-    }
-    async get(endpoint, params, headers) {
-        return this.retry(async () => {
-            const response = await this.client.get(endpoint, {
-                params,
-                headers,
-            });
-            return response.data;
-        });
-    }
-    async post(endpoint, data) {
-        return this.retry(async () => {
-            const response = await this.client.post(endpoint, data);
-            return response.data;
-        });
-    }
-    setAuthentication(token, apiKey) {
-        this.client.defaults.headers.common['Authorization'] = token
-            ? `Bearer ${token}`
-            : '';
-        this.client.defaults.headers.common['x-maestro-api-key'] = apiKey || '';
-    }
-}
-export default AxiosNetworkClient;