@maestro_io/maestro-web-sdk 2.1.0 → 2.1.2

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from './ScrollableContainer';
+/**
+ * Component to be used as a child of `ScrollableContainer`.
+ * Wraps the focusable item and registers it in the context
+ */
+class FocusableItem extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "ref", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+    }
+    componentDidMount() {
+        if (this.ref && this.context.setRef) {
+            this.context.setRef(this.ref);
+        }
+    }
+    render() {
+        return (React.createElement("div", { className: "focusable-item", ref: (e) => (this.ref = e) }, this.props.children));
+    }
+}
+Object.defineProperty(FocusableItem, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default FocusableItem;

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

@@ -0,0 +1,166 @@
+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

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

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

@@ -0,0 +1,10 @@
+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

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

package/dist/components/molecules/Overlay/Overlay.d.ts

@@ -1,4 +1,3 @@
-import { Rive as RiveCanvas } from '@rive-app/canvas';
 import React from 'react';
 import { OverlayType, IFantasyPayload } from '@/types/OverlayTypes';
 import { IWinningBet } from '@/models/IWinningBet';
@@ -29,7 +28,7 @@ declare class Overlay extends React.Component<OverlayProps, OverlayState> {
     get overlayTitle(): string;
     get overlayMetadata(): string;
     private trackOverlayViewed;
-    onLoadRiveInstance: (riveInstance: RiveCanvas | null) => void;
+    onLoadRiveInstance: (riveInstance: any | null) => void;
     render(): React.JSX.Element;
 }
 export default Overlay;

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

@@ -0,0 +1,139 @@
+// 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

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

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

@@ -0,0 +1,40 @@
+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

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

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

@@ -0,0 +1,10 @@
+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

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

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

@@ -0,0 +1,15 @@
+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

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

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

@@ -0,0 +1,72 @@
+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

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

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

@@ -0,0 +1,69 @@
+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.d.ts

@@ -1,3 +1,3 @@
 import SegmentController, { SegmentItem } from './SegmentController';
 export default SegmentController;
-export type { SegmentItem };
+export { SegmentItem };

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

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