@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/utils/dom.tsx

@@ -0,0 +1,155 @@
+import {isServerSide} from './environment';
+
+import type {DataAttributes} from './types';
+
+/**
+ * Returns true if provided type is supported <input> type
+ */
+export const isInputTypeSupported = (type: string): boolean => {
+    if (isServerSide()) {
+        return false;
+    }
+    const input = document.createElement('input');
+    input.setAttribute('type', type);
+    return input.type === type;
+};
+
+export const cancelEvent = (event: Event | React.SyntheticEvent): void => {
+    event.stopPropagation();
+    event.preventDefault();
+};
+
+export const createChangeEvent = (
+    target: HTMLInputElement,
+    value: string
+): React.ChangeEvent<HTMLInputElement> => {
+    const event = new Event('change') as any;
+    target.value = value;
+    return {...event, target, currentTarget: target};
+};
+
+/**
+ * Detect passive event listeners support
+ * See passiveeventlisteners.js at https://github.com/Modernizr/Modernizr/
+ */
+let supportsPassive = false;
+try {
+    const options = Object.defineProperty({}, 'passive', {
+        get() {
+            supportsPassive = true;
+            return undefined;
+        },
+    });
+    window.addEventListener('test' as any, () => {}, options);
+} catch (e) {
+    // does not support passive event listeners :(
+}
+
+export const addPassiveEventListener = (
+    el: EventTarget,
+    eventName: string,
+    listener: (e: any) => void
+): void => el.addEventListener(eventName, listener, supportsPassive ? {passive: true} : false);
+
+export const removePassiveEventListener = (
+    el: EventTarget,
+    eventName: string,
+    listener: (e: any) => void
+): void => el.removeEventListener(eventName, listener, false);
+
+/**
+ * Prefixes given attributes with `data-`
+ *
+ * For example: `{foo: 'bar'}` => `{data-foo: 'bar'}`
+ */
+export const getPrefixedDataAttributes = (attrs?: DataAttributes, componentName?: string): DataAttributes => {
+    const result: DataAttributes = componentName
+        ? // TODO: remove deprecated component-name in next major release
+          {'data-component-name': componentName, 'data-testid': componentName}
+        : {};
+    if (attrs) {
+        Object.keys(attrs).forEach((key) => {
+            result['data-' + key] = attrs[key];
+        });
+    }
+    return result;
+};
+
+type ScrollAxis = 'X' | 'Y';
+
+const isScrollable = (el: Element, axis: ScrollAxis): boolean => {
+    const overflowKey: 'overflowX' | 'overflowY' = `overflow${axis}`;
+    const overflowValue = window.getComputedStyle(el)[overflowKey];
+    return ['auto', 'scroll', 'overlay'].includes(overflowValue);
+};
+
+export const getScrollableParentElement = (el?: HTMLElement | null, axis: ScrollAxis = 'Y'): HTMLElement => {
+    let result = el?.parentElement;
+    while (result && !isScrollable(result, axis)) {
+        result = result.parentElement;
+    }
+    return result || document.documentElement;
+};
+
+export const getScrollDistanceToBottom = (el: HTMLElement): number =>
+    el.scrollHeight - el.scrollTop - el.clientHeight;
+
+export const hasScroll = (el: HTMLElement): boolean => el.scrollHeight > el.clientHeight;
+
+type ResizeListener = (entries: Array<ResizeObserverEntry>, observer: ResizeObserver) => void;
+export const listenResize = (element: Element, handler: ResizeListener): (() => void) => {
+    const getResizeObserverPromise = (): Promise<typeof window.ResizeObserver | null> => {
+        if (isServerSide()) {
+            return Promise.resolve(null);
+        }
+        return window.ResizeObserver
+            ? Promise.resolve(ResizeObserver)
+            : import(/* webpackChunkName: "@juggle/resize-observer" */ '@juggle/resize-observer').then(
+                  (m: any) => m.ResizeObserver
+              );
+    };
+    let cancelled = false;
+    let resizeObserver: ResizeObserver | null = null;
+    getResizeObserverPromise().then((ResizeObserver) => {
+        if (!cancelled && ResizeObserver) {
+            resizeObserver = new ResizeObserver(handler);
+            resizeObserver.observe(element);
+        }
+    });
+
+    return () => {
+        cancelled = true;
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+        }
+    };
+};
+
+const parseVarCall = (cssVar: string) => {
+    const [varName, fallback] = cssVar
+        .replace(/^var\(/, '')
+        .replace(/\)$/, '')
+        .split(/\s*,\s*(.*)/);
+    return {varName, fallback};
+};
+
+export const isCssVar = (cssVar: string): boolean => cssVar.startsWith('var(') || cssVar.startsWith('--');
+
+export const getCssVarValue = (cssVar: string, element?: Element): string => {
+    if (!isCssVar(cssVar)) {
+        throw new Error(`Invalid css var: ${cssVar}`);
+    }
+
+    if (cssVar.startsWith('var(')) {
+        const {varName, fallback} = parseVarCall(cssVar);
+        const value = getCssVarValue(varName, element);
+        if (!value && fallback) {
+            if (!isCssVar(fallback)) {
+                return fallback;
+            }
+            return getCssVarValue(fallback, element);
+        }
+        return value;
+    }
+    return getComputedStyle(element ?? document.documentElement).getPropertyValue(cssVar);
+};

package/src/utils/environment.tsx

@@ -0,0 +1,6 @@
+export const isServerSide = (): boolean => typeof window === 'undefined';
+
+export const isClientSide = (): boolean => !isServerSide();
+
+export const isTouchableDevice = (): boolean =>
+    isClientSide() ? window.matchMedia('(pointer: coarse)').matches : false;

package/src/utils/headings.tsx

@@ -0,0 +1,18 @@
+import type {HeadingType} from './types';
+
+/**
+ * @returns {boolean} - Returns true if the first heading is bigger, false otherwise.
+ */
+export const isBiggerHeading = (heading: HeadingType, otherHeading?: HeadingType): boolean => {
+    // In case headings are equal, we consider that the first one has more priority
+    if (!otherHeading || heading === otherHeading) {
+        return true;
+    }
+
+    if (heading === 'span') {
+        return false;
+    }
+
+    // Both are header tags
+    return heading < otherHeading;
+};

package/src/utils/helpers.tsx

@@ -0,0 +1,182 @@
+/** These functions are copies of the ones located in webapp packages */
+
+type Debounced<T> = T & {cancel: () => void; flush: () => void};
+
+/**
+ * Creates a debounced function that delays invoking func until after wait milliseconds
+ * have elapsed since the last time the debounced function was invoked. The debounced function
+ * comes with a cancel method to cancel delayed func invocations and a flush method to immediately
+ * invoke them. The func is invoked with the last arguments provided to the debounced function.
+ * Subsequent calls to the debounced function return the result of the last func invocation.
+ */
+export const debounce = <T extends (...args: Array<any>) => any>(
+    func: T,
+    wait: number,
+    options: {
+        leading?: boolean;
+        trailing?: boolean;
+        maxWait?: number;
+    } = {}
+): Debounced<T> => {
+    const waitTime = wait;
+    const leading = options.leading ?? false;
+    const trailing = options.trailing ?? true;
+    const maxWait = options.maxWait !== undefined ? Math.max(options.maxWait, waitTime) : undefined;
+
+    let currentArgs: Parameters<T> | undefined;
+    let lastInvokeTime = 0;
+    let lastCallTime = -1;
+    let result: any;
+
+    let timerId: ReturnType<typeof setTimeout> | undefined;
+
+    const invokeFunction = (time: number): any => {
+        lastInvokeTime = time;
+        if (currentArgs) {
+            result = func(...currentArgs);
+        }
+        currentArgs = undefined;
+        return result;
+    };
+
+    const shouldInvoke = (time: number): boolean => {
+        const timeSinceLastCall = time - lastCallTime;
+        const timeSinceLastInvoke = time - lastInvokeTime;
+
+        return (
+            lastCallTime < 0 ||
+            timeSinceLastCall >= wait ||
+            timeSinceLastCall < 0 ||
+            (maxWait !== undefined && timeSinceLastInvoke >= maxWait)
+        );
+    };
+
+    const remainingWait = (time: number): number => {
+        const timeSinceLastCall = time - lastCallTime;
+        const timeSinceLastInvoke = time - lastInvokeTime;
+        const timeWaiting = wait - timeSinceLastCall;
+        return maxWait !== undefined ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+    };
+
+    const trailingEdge = (time: number): any => {
+        timerId = undefined;
+
+        if (trailing && currentArgs) {
+            return invokeFunction(time);
+        }
+
+        currentArgs = undefined;
+        return result;
+    };
+
+    const timerExpired = (): any => {
+        const time = Date.now();
+        if (shouldInvoke(time)) {
+            return trailingEdge(time);
+        }
+        timerId = setTimeout(timerExpired, remainingWait(time));
+    };
+
+    const leadingEdge = (time: number): any => {
+        lastInvokeTime = time;
+
+        timerId = setTimeout(timerExpired, waitTime);
+        return leading ? invokeFunction(time) : result;
+    };
+
+    const debounced = (...args: Parameters<T>) => {
+        const time = Date.now();
+        const isInvoking = shouldInvoke(time);
+
+        currentArgs = args;
+        lastCallTime = time;
+
+        if (isInvoking) {
+            if (timerId === undefined) {
+                return leadingEdge(lastCallTime);
+            }
+            if (maxWait !== undefined) {
+                timerId = setTimeout(timerExpired, waitTime);
+                return invokeFunction(lastCallTime);
+            }
+        }
+        if (timerId === undefined) {
+            timerId = setTimeout(timerExpired, waitTime);
+        }
+        return result;
+    };
+
+    debounced.cancel = (): void => {
+        if (timerId !== undefined) {
+            clearTimeout(timerId);
+            timerId = undefined;
+        }
+        lastInvokeTime = 0;
+        lastCallTime = -1;
+        currentArgs = undefined;
+    };
+
+    debounced.flush = (): any => {
+        return timerId === undefined ? result : trailingEdge(Date.now());
+    };
+
+    return debounced as Debounced<T>;
+};
+
+const isPrimitive = (v: unknown): v is string | number | undefined | null | boolean | symbol => {
+    if (v === null) {
+        return true;
+    }
+    if (typeof v === 'object' || typeof v === 'function') {
+        return false;
+    }
+    return true;
+};
+
+/**
+ * Performs a deep comparison between two values to determine if they are equivalent.
+ */
+export const isEqual = (a: unknown, b: unknown): boolean => {
+    if (a === b) {
+        return true;
+    }
+
+    if (typeof a === 'number' && typeof b === 'number' && isNaN(a) && isNaN(b)) {
+        return true;
+    }
+
+    if (isPrimitive(a) || isPrimitive(b)) {
+        return false;
+    }
+
+    if (typeof a !== typeof b) {
+        return false;
+    }
+
+    if (typeof a === 'function') {
+        // no need to check typeof b === 'function' because of the previous check
+        return false;
+    }
+
+    if (Array.isArray(a) || Array.isArray(b)) {
+        if (Array.isArray(a) && Array.isArray(b)) {
+            return a.length === b.length && a.every((value, index) => isEqual(value, b[index]));
+        }
+        return false;
+    }
+
+    if (a instanceof Date || b instanceof Date) {
+        if (a instanceof Date && b instanceof Date) {
+            return a.getTime() === b.getTime();
+        }
+        return false;
+    }
+
+    const keysA = Object.keys(a as any);
+    const keysB = Object.keys(b as any);
+    if (keysA.length === keysB.length) {
+        return keysA.every((key) => isEqual((a as any)[key], (b as any)[key]));
+    }
+
+    return false;
+};

package/src/utils/keys.tsx

@@ -0,0 +1,8 @@
+export const LEFT = 'ArrowLeft';
+export const UP = 'ArrowUp';
+export const RIGHT = 'ArrowRight';
+export const DOWN = 'ArrowDown';
+export const ENTER = 'Enter';
+export const ESC = 'Escape';
+export const SPACE = ' ';
+export const TAB = 'Tab';

package/src/utils/locale.tsx

@@ -0,0 +1,27 @@
+export type Locale =
+    | 'ca-ES'
+    | 'en-US'
+    | 'en-GB'
+    | 'de-DE'
+    | 'es-AR'
+    | 'es-CO'
+    | 'es-EC'
+    | 'es-ES'
+    | 'es-MX'
+    | 'es-PE'
+    | 'es-UY'
+    | 'eu-ES'
+    | 'gl-ES'
+    | 'pt-BR';
+
+const SUPPORTED_LANGUAGES = ['en', 'es', 'pt', 'de'] as const;
+
+export type Language = (typeof SUPPORTED_LANGUAGES)[number];
+
+export const localeToLanguage = (locale: Locale): Language => {
+    const lang = locale.split('-')[0] as Language;
+    if (SUPPORTED_LANGUAGES.includes(lang)) {
+        return lang;
+    }
+    return 'en';
+};

package/src/utils/platform.tsx

@@ -0,0 +1,94 @@
+import {isWebViewBridgeAvailable} from '@tef-novum/webview-bridge';
+
+import type {Theme} from '../theme';
+
+const getUserAgent = (platformOverrides: Theme['platformOverrides'] = {}): string => {
+    if (typeof self === 'undefined') {
+        return platformOverrides.userAgent ?? '';
+    }
+    return self.navigator?.userAgent ?? '';
+};
+
+export const isInsideNovumNativeApp = (platformOverrides: Theme['platformOverrides'] = {}): boolean => {
+    if (typeof platformOverrides.insideNovumNativeApp !== 'undefined') {
+        return platformOverrides.insideNovumNativeApp;
+    }
+    return isWebViewBridgeAvailable();
+};
+
+export const isRunningAcceptanceTest = (platformOverrides: Theme['platformOverrides'] = {}): boolean =>
+    getUserAgent(platformOverrides).includes('acceptance-test') && !process.env.SSR_TEST;
+
+const isEdgeOrIE = Boolean(typeof self !== 'undefined' && (self as any).MSStream);
+
+export const isAndroid = (platformOverrides: Theme['platformOverrides']): boolean => {
+    if (platformOverrides.platform === 'android') {
+        return true;
+    }
+
+    return getUserAgent(platformOverrides).toLowerCase().includes('android') && !isEdgeOrIE;
+};
+
+export const isIos = (platformOverrides: Theme['platformOverrides']): boolean => {
+    if (platformOverrides.platform === 'ios') {
+        return true;
+    }
+
+    // IE and Edge mobile browsers includes Android and iPhone in the user agent
+    if (/iPad|iPhone|iPod/.test(getUserAgent(platformOverrides)) && !isEdgeOrIE) {
+        return true;
+    }
+
+    // In iOS13, iPad uses the Mac OS user-agent, but we know it's an iOS device when it runs inside our
+    // native app and is not Android
+    if (isInsideNovumNativeApp(platformOverrides) && !isAndroid(platformOverrides)) {
+        return true;
+    }
+
+    return false;
+};
+
+/**
+ * Returns true if the browser is a safari browser:
+ * webview, mobile, desktop or a browser like Chrome for iOS which is just a safari with a skin
+ *
+ * Note that this function checks the navigator vendor. It doesn't use platformOverrides or userAgent.
+ */
+export const isSafari = (): boolean => {
+    return navigator.vendor.includes('Apple');
+};
+
+export const isFirefox = (platformOverrides?: Theme['platformOverrides']): boolean =>
+    !!getUserAgent(platformOverrides).match(/Firefox\/([0-9]+)\./);
+
+export const isChrome = (platformOverrides: Theme['platformOverrides']): boolean =>
+    !!getUserAgent(platformOverrides).match(/Chrom(e|ium)\/([0-9]+)\./);
+
+const SEMVER_ZERO = '0.0.0';
+export const getIosVersion = (platformOverrides: Theme['platformOverrides']): string => {
+    if (!isIos(platformOverrides)) {
+        return SEMVER_ZERO;
+    }
+    const raw = getUserAgent(platformOverrides).match(/OS ((\d+_?){1,3})[\s_]/);
+    if (!raw || !raw[1]) {
+        return SEMVER_ZERO;
+    }
+    const [major, minor = '0', patch = '0'] = raw[1].split('_');
+    return [major, minor, patch].join('.');
+};
+
+export const getPlatform = (
+    platformOverrides: Theme['platformOverrides'] = {}
+): 'ios' | 'android' | 'desktop' => {
+    const overridenPlatform = platformOverrides.platform;
+    if (overridenPlatform) {
+        return overridenPlatform;
+    }
+    if (isIos(platformOverrides)) {
+        return 'ios';
+    }
+    if (isAndroid(platformOverrides)) {
+        return 'android';
+    }
+    return 'desktop';
+};

package/src/utils/region-code.tsx

@@ -0,0 +1 @@
+export type RegionCode = 'AR' | 'BR' | 'CO' | 'DE' | 'EC' | 'ES' | 'GB' | 'MX' | 'PE' | 'UY';

package/src/utils/renders-element.tsx

@@ -0,0 +1,6 @@
+import type * as React from 'react';
+
+export type RendersElement<T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
+    React.ReactComponentElement<T>;
+export type RendersNullableElement<T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
+    React.ReactComponentElement<T> | null;

package/src/utils/time.tsx

@@ -0,0 +1,22 @@
+export const getLocalDateString = (date: Date): string => {
+    const yyyy = date.getFullYear();
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const dd = String(date.getDate()).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd}`;
+};
+
+export const getLocalYearMonthString = (date: Date): string => {
+    const yyyy = date.getFullYear();
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    return `${yyyy}-${mm}`;
+};
+
+export const getLocalTimeString = (date: Date): string => {
+    const h = String(date.getHours()).padStart(2, '0');
+    const m = String(date.getMinutes()).padStart(2, '0');
+    return `${h}:${m}`;
+};
+
+export const getLocalDateTimeString = (date: Date): string => {
+    return `${getLocalDateString(date)}T${getLocalTimeString(date)}`;
+};

package/src/utils/types.tsx

@@ -0,0 +1,19 @@
+export type {RendersElement, RendersNullableElement} from './renders-element';
+
+export type {TrackingEvent} from '@tef-novum/webview-bridge';
+
+export type DataAttributes = {
+    [name: string]: string | number | boolean | undefined;
+    testid?: string;
+};
+
+export type IconProps = {
+    color?: string;
+    size?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+export type ByBreakpoint<T> = T | {mobile: T; tablet?: T; desktop: T};
+
+export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';

package/src/utils/utility-types.tsx

@@ -0,0 +1,8 @@
+type AllKeys<T> = T extends unknown ? keyof T : never;
+export type Id<T> = T extends infer U ? {[K in keyof U]: U[K]} : never;
+type _ExclusifyUnion<T, K extends PropertyKey> = T extends unknown
+    ? Id<T & Partial<Record<Exclude<K, keyof T>, never>>>
+    : never;
+
+// https://juhanajauhiainen.com/posts/how-to-type-an-object-with-exclusive-or-properties-in-typescript
+export type ExclusifyUnion<T> = _ExclusifyUnion<T, AllKeys<T>>;

package/src/video.css.ts

@@ -0,0 +1,11 @@
+import {sprinkles} from './sprinkles.css';
+
+export const video = sprinkles({
+    top: 0,
+    left: 0,
+    display: 'block',
+    background: 'transparent',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    objectFit: 'cover',
+});