@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/touchable.tsx

@@ -1,355 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import ScreenReaderOnly from './screen-reader-only';
-import * as classes from './touchable.css';
-import {useTheme} from './hooks';
-import {isInsideNovumNativeApp} from './utils/platform';
-import {ENTER, SPACE} from './utils/keys';
-import {getPrefixedDataAttributes} from './utils/dom';
-import {redirect} from './utils/browser';
-import * as tokens from './text-tokens';
-
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {DataAttributes, TrackingEvent} from './utils/types';
-import type {Location} from 'history';
-
-export type PressHandler = (event: React.MouseEvent<HTMLElement>) => void | undefined | Promise<void>;
-
-interface CommonProps {
-    children: React.ReactNode;
-    className?: string;
-    id?: string;
-    disabled?: boolean;
-    style?: React.CSSProperties;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    'aria-label'?: string;
-    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
-    dataAttributes?: DataAttributes;
-    'aria-checked'?: 'true' | 'false' | boolean;
-    'aria-controls'?: string;
-    'aria-disabled'?: boolean;
-    'aria-expanded'?: 'true' | 'false' | boolean;
-    'aria-haspopup'?: 'true' | 'false' | 'menu' | 'dialog' | boolean;
-    'aria-hidden'?: 'true' | 'false' | boolean;
-    'aria-selected'?: 'true' | 'false' | boolean;
-    'aria-labelledby'?: string;
-    'aria-live'?: 'polite' | 'off' | 'assertive';
-    'aria-current'?: React.AriaAttributes['aria-current'];
-    'aria-description'?: string;
-    'aria-describedby'?: string;
-    /** IMPORTANT: try to avoid using role="link" with onPress and first consider other alternatives like to/href + onNavigate */
-    role?: string;
-    type?: 'button' | 'submit';
-    tabIndex?: number;
-    as?: 'a';
-    stopPropagation?: boolean;
-}
-
-type OnPressProps = {
-    onPress: PressHandler;
-};
-
-type HrefProps = {
-    href: string;
-    newTab?: boolean;
-    loadOnTop?: boolean;
-    onNavigate?: () => void | Promise<void>;
-};
-
-type ToProps = {
-    to: string | Location;
-    newTab?: boolean;
-    fullPageOnWebView?: boolean;
-    replace?: boolean;
-    onNavigate?: () => void | Promise<void>;
-};
-
-type SubmitProps = {
-    type: 'submit';
-    formId?: string;
-    onPress?: PressHandler;
-};
-
-export type AlwaysTouchableComponentProps = ExclusifyUnion<OnPressProps | HrefProps | ToProps> &
-    Pick<
-        CommonProps,
-        | 'trackingEvent'
-        | 'dataAttributes'
-        | 'role'
-        | 'aria-label'
-        | 'aria-labelledby'
-        | 'aria-description'
-        | 'aria-describedby'
-        | 'aria-current'
-    >;
-
-export type TouchableComponentProps<Props> = ExclusifyUnion<
-    Props | (OnPressProps & Props) | (HrefProps & Props) | (ToProps & Props)
-> &
-    Pick<
-        CommonProps,
-        | 'trackingEvent'
-        | 'dataAttributes'
-        | 'role'
-        | 'aria-label'
-        | 'aria-labelledby'
-        | 'aria-description'
-        | 'aria-describedby'
-        | 'aria-current'
-    >;
-
-type Maybe<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K> & {maybe: true};
-
-export type TouchableProps = ExclusifyUnion<
-    | OnPressProps
-    | HrefProps
-    | ToProps
-    | Maybe<OnPressProps, 'onPress'>
-    | Maybe<HrefProps, 'href'>
-    | Maybe<ToProps, 'to'>
-    | SubmitProps
-> &
-    CommonProps;
-
-export type TouchableElement = HTMLDivElement | HTMLAnchorElement | HTMLButtonElement;
-
-const RawTouchable = React.forwardRef<TouchableElement, TouchableProps>((props, ref) => {
-    const {texts, analytics, platformOverrides, Link, useHrefDecorator, t} = useTheme();
-    const hrefDecorator = useHrefDecorator();
-    const isClicked = React.useRef(false);
-    let trackingEvents: ReadonlyArray<TrackingEvent> = [];
-    if (props.trackingEvent) {
-        if (Array.isArray(props.trackingEvent)) {
-            trackingEvents = props.trackingEvent;
-        } else {
-            trackingEvents = [props.trackingEvent as TrackingEvent];
-        }
-    }
-
-    const children = props.children;
-
-    const commonProps = {
-        className: props.className,
-        id: props.id,
-        disabled: props.disabled,
-        style: {
-            ...props.style,
-            ...(props['aria-disabled'] ? ({pointerEvents: 'none'} as const) : {}),
-        },
-        role: props.role,
-        tabIndex: props.tabIndex,
-        'aria-disabled': props['aria-disabled'],
-        'aria-hidden': props['aria-hidden'],
-        'aria-live': props['aria-live'],
-        ...getPrefixedDataAttributes(props.dataAttributes, 'Touchable'),
-    };
-
-    // aria props that we want to apply to both <a> and <button> elements, not applicable to <div>
-    const touchableAriaProps = {
-        'aria-checked': props['aria-checked'],
-        'aria-disabled': props.disabled || props['aria-disabled'] ? true : undefined,
-        'aria-controls': props['aria-controls'],
-        'aria-expanded': props['aria-expanded'],
-        'aria-haspopup': props['aria-haspopup'],
-        'aria-selected': props['aria-selected'],
-        'aria-current': props['aria-current'],
-        'aria-label': props['aria-label'],
-        'aria-labelledby': props['aria-labelledby'],
-        'aria-description': props['aria-description'],
-        'aria-describedby': props['aria-describedby'],
-    };
-
-    const type = props.type ? props.type : 'button';
-
-    const openNewTab = !!props.newTab;
-    const openInCurrentPage = props.href?.startsWith('#');
-    const loadOnTop = !openNewTab && !!props.href && !!props.loadOnTop;
-
-    const stopPropagationIfNeeded = (event: React.MouseEvent<HTMLElement>) => {
-        if (props.stopPropagation) {
-            event.stopPropagation();
-        }
-    };
-
-    const onPress = (event: React.MouseEvent<HTMLElement>) => {
-        if (props.onPress) {
-            props.onPress(event);
-        }
-    };
-
-    const getHref = (): string => {
-        if (props.href) {
-            return hrefDecorator(props.href);
-        }
-        if (props.to && props.fullPageOnWebView) {
-            if (typeof props.to === 'string') {
-                return props.to;
-            }
-            return props.to.pathname ?? '';
-        }
-        return '';
-    };
-
-    const trackEvent = () => Promise.all(trackingEvents.map((event) => analytics.logEvent(event)));
-
-    const trackOnce = (callback: () => void) => {
-        if (isClicked.current) return;
-        isClicked.current = true;
-
-        trackEvent().finally(() => {
-            isClicked.current = false;
-            callback();
-        });
-    };
-
-    const handleButtonClick = (event: React.MouseEvent<HTMLElement>) => {
-        stopPropagationIfNeeded(event);
-        // synchronously execute handler when no tracking is needed
-        if (!trackingEvents.length) {
-            onPress(event);
-            return;
-        }
-
-        trackOnce(() => onPress(event));
-    };
-
-    const handleHrefClick = (event: React.MouseEvent<HTMLElement>) => {
-        stopPropagationIfNeeded(event);
-
-        const hasOnNavigate = !!(props.href && props.onNavigate);
-
-        if (!trackingEvents.length && !hasOnNavigate) {
-            return; // let the browser handle the href
-        }
-        event.preventDefault();
-
-        Promise.resolve(hasOnNavigate ? props.onNavigate?.() : undefined).finally(() => {
-            trackOnce(() => redirect(getHref(), openNewTab, loadOnTop));
-        });
-    };
-
-    const handleToClick = (event: React.MouseEvent<HTMLElement>) => {
-        stopPropagationIfNeeded(event);
-        if (props.to && props.onNavigate) {
-            props.onNavigate();
-        }
-        trackEvent();
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-        if (event.key === ENTER || event.key === SPACE) {
-            event.preventDefault();
-            event.currentTarget.click();
-        }
-    };
-
-    const renderScreenReaderOnlyHint = () => {
-        return openNewTab ? (
-            <ScreenReaderOnly>
-                <span>{texts.linkOpensInNewTab || t(tokens.linkOpensInNewTab)}</span>
-            </ScreenReaderOnly>
-        ) : openInCurrentPage ? (
-            <ScreenReaderOnly>
-                <span>{texts.linkOpensInCurrentPage || t(tokens.linkOpensInCurrentPage)}</span>
-            </ScreenReaderOnly>
-        ) : null;
-    };
-
-    if (!!props.href || (props.to && props.fullPageOnWebView && isInsideNovumNativeApp(platformOverrides))) {
-        return (
-            <a
-                {...commonProps}
-                {...touchableAriaProps}
-                onClick={handleHrefClick}
-                onKeyDown={handleKeyDown}
-                href={props.disabled ? undefined : getHref()}
-                target={(() => {
-                    if (openNewTab) return '_blank';
-                    if (loadOnTop) return '_top';
-                    return undefined;
-                })()}
-                rel={openNewTab ? 'noopener noreferrer' : undefined}
-                ref={ref as React.RefObject<HTMLAnchorElement>}
-            >
-                {children}
-                {renderScreenReaderOnlyHint()}
-            </a>
-        );
-    }
-
-    if (props.to) {
-        return (
-            <Link
-                {...commonProps}
-                {...touchableAriaProps}
-                target={props.newTab ? '_blank' : undefined}
-                innerRef={ref as React.RefObject<HTMLAnchorElement>}
-                to={props.disabled ? '' : props.to}
-                replace={props.replace}
-                onClick={handleToClick}
-                onKeyDown={handleKeyDown}
-            >
-                {children}
-                {renderScreenReaderOnlyHint()}
-            </Link>
-        );
-    }
-
-    if (props.onPress) {
-        const elementType = props.as ?? 'button';
-        const role = commonProps.role ?? (props.as === 'a' ? 'button' : undefined);
-        return React.createElement(elementType, {
-            ...commonProps,
-            ...touchableAriaProps,
-            role,
-            // When an <a/> is rendered without an href value, the element is not accesible
-            // by keyboard (using tab key). We add a fictional href to "#" to avoid this.
-            href: elementType === 'a' ? '#' : undefined,
-            // this "form" attribute is useful when the form's submit button
-            // is located outside the <form> element, for example if you use
-            // a ButtonFixedFooter layout inside a form with the submit
-            // button located at the footer, which is redered using a Portal
-            form: type === 'submit' && props.formId ? props.formId : undefined,
-            type,
-            ref: ref as React.RefObject<HTMLButtonElement>,
-            onClick: (e: React.MouseEvent<HTMLElement>) => {
-                // prevent navigating to fictional "#" if element is rendered as <a/>
-                if (elementType === 'a') {
-                    e.preventDefault();
-                }
-                handleButtonClick(e);
-            },
-            children,
-        });
-    }
-
-    return (
-        <div
-            {...commonProps}
-            ref={ref as React.RefObject<HTMLDivElement>}
-            className={classnames(commonProps.className, classes.notTouchable)}
-        >
-            {children}
-        </div>
-    );
-});
-
-const Touchable = React.forwardRef<TouchableElement, TouchableProps>((props, ref) => {
-    return <RawTouchable {...props} className={classnames(classes.touchable, props.className)} ref={ref} />;
-});
-
-// Used internally by Mística's components to avoid styles collisions
-export const BaseTouchable = React.forwardRef<TouchableElement, TouchableProps & {resetMargin?: boolean}>(
-    ({resetMargin = true, ...props}, ref) => {
-        return (
-            <RawTouchable
-                {...props}
-                className={classnames(classes.base, props.className, {[classes.marginReset]: resetMargin})}
-                ref={ref}
-            />
-        );
-    }
-);
-
-export default Touchable;

package/src/types/font-face.d.ts

@@ -1,47 +0,0 @@
-// Spec: https://www.w3.org/TR/css-font-loading/
-export {};
-
-declare global {
-    const FontFace: FontFace;
-
-    interface Document {
-        fonts: FontFaceSet;
-    }
-
-    type CSSOMString = string;
-    type FontFaceLoadStatus = 'unloaded' | 'loading' | 'loaded' | 'error';
-    type FontFaceSetStatus = 'loading' | 'loaded';
-
-    class FontFace extends FontFaceDescriptors {
-        constructor(
-            family: string,
-            source: string | ArrayBuffer,
-            descriptors?: FontFaceDescriptors
-        ): FontFace;
-        readonly status: FontFaceLoadStatus;
-        readonly loaded: Promise<FontFace>;
-        variationSettings: CSSOMString;
-        display: CSSOMString;
-        load(): Promise<FontFace>;
-    }
-
-    interface FontFaceDescriptors {
-        family: CSSOMString;
-        style: CSSOMString;
-        weight: CSSOMString;
-        stretch: CSSOMString;
-        unicodeRange: CSSOMString;
-        variant: CSSOMString;
-        featureSettings: CSSOMString;
-    }
-
-    interface FontFaceSet extends Iterable<FontFace> {
-        readonly status: FontFaceSetStatus;
-        readonly ready: Promise<FontFaceSet>;
-        add(font: FontFace): void;
-        check(font: string, text?: string): boolean; // throws exception
-        load(font: string, text?: string): Promise<Array<FontFace>>;
-        delete(font: FontFace): void;
-        clear(): void;
-    }
-}

package/src/types/libs.d.ts

@@ -1,3 +0,0 @@
-declare module 'jest-environment-puppeteer/setup';
-declare module 'jest-environment-puppeteer/teardown';
-declare module 'static-server';

package/src/utils/__tests__/analytics-test.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import ThemeContextProvider from '../../theme-context-provider';
-import {render, screen} from '@testing-library/react';
-import {makeTheme} from '../../__tests__/test-utils';
-import {TrackingConfig, useTrackingConfig} from '../analytics';
-
-const PrintEventFormat = ({prefix}: {prefix: string}) => {
-    const {eventFormat} = useTrackingConfig();
-    return <div>{`${prefix}: ${eventFormat}`}</div>;
-};
-
-test('TrackingConfig context providers', () => {
-    render(
-        <ThemeContextProvider
-            theme={makeTheme({
-                analytics: {
-                    logEvent: () => Promise.resolve(),
-                    eventFormat: 'google-analytics-4',
-                },
-            })}
-        >
-            <PrintEventFormat prefix="test1" />
-            <TrackingConfig eventFormat="universal-analytics">
-                <PrintEventFormat prefix="test2" />
-                <TrackingConfig eventFormat="google-analytics-4">
-                    <PrintEventFormat prefix="test3" />
-                </TrackingConfig>
-            </TrackingConfig>
-        </ThemeContextProvider>
-    );
-
-    expect(screen.getByText('test1: google-analytics-4')).toBeInTheDocument();
-    expect(screen.getByText('test2: universal-analytics')).toBeInTheDocument();
-    expect(screen.getByText('test3: google-analytics-4')).toBeInTheDocument();
-});

package/src/utils/__tests__/browser-test.tsx

@@ -1,28 +0,0 @@
-import {redirect} from '../browser';
-
-// mock location.assign
-const redirectSpy = jest.fn();
-Object.defineProperty(window, 'location', {value: {...window.location, assign: redirectSpy}});
-
-// mock window.open
-const openSpy = jest.fn();
-window.open = openSpy;
-
-afterEach(() => {
-    jest.resetAllMocks(); // reset spy calls
-});
-
-test('redirect', () => {
-    redirect('https://example.org');
-    expect(redirectSpy.mock.calls).toEqual([['https://example.org']]);
-});
-
-test('open external', () => {
-    redirect('https://example.org', true, false);
-    expect(openSpy.mock.calls).toEqual([['https://example.org', '_blank']]);
-});
-
-test('open loadOnTop', () => {
-    redirect('https://example.org', false, true);
-    expect(openSpy.mock.calls).toEqual([['https://example.org', '_top']]);
-});

package/src/utils/__tests__/dom-test.tsx

@@ -1,23 +0,0 @@
-import {getCssVarValue} from '../dom';
-
-test('getCssVarValue', () => {
-    document.documentElement.style.setProperty('--color-primary', '#FABADA');
-
-    expect(getCssVarValue('--color-primary')).toBe('#FABADA');
-    expect(getCssVarValue('var(--color-primary)')).toBe('#FABADA');
-    expect(getCssVarValue('var(--non-defined)')).toBe('');
-    expect(getCssVarValue('var(--non-defined, #00FFFF)')).toBe('#00FFFF');
-    expect(getCssVarValue('var(--non-defined, var(--color-primary))')).toBe('#FABADA');
-    expect(getCssVarValue('var(--non-defined, var(--non-defined, #00FFFF))')).toBe('#00FFFF');
-
-    expect(() => getCssVarValue('non-css-var')).toThrow();
-});
-
-test('getCssVarValue of element', () => {
-    document.documentElement.style.setProperty('--color-primary', '#FABADA');
-    const div = document.createElement('div');
-    div.style.setProperty('--color-primary', '#ABACAD');
-
-    expect(getCssVarValue('--color-primary', div)).toBe('#ABACAD');
-    expect(getCssVarValue('var(--color-primary)', div)).toBe('#ABACAD');
-});

package/src/utils/__tests__/helpers-test.tsx

@@ -1,166 +0,0 @@
-import {debounce, isEqual} from '../helpers';
-
-beforeEach(() => {
-    jest.useFakeTimers();
-});
-
-test('debounce without leading and with trailing', () => {
-    const fn = jest.fn().mockImplementation((a) => a);
-    const debounced = debounce(fn, 5000);
-
-    debounced(1);
-    jest.advanceTimersByTime(4500);
-    debounced(2);
-    jest.advanceTimersByTime(4500);
-    debounced(3);
-    expect(fn).not.toHaveBeenCalled();
-
-    jest.runAllTimers();
-    expect(fn.mock.calls).toEqual([[3]]);
-});
-
-test('debounce with leading and trailing', () => {
-    const fn = jest.fn().mockImplementation((a) => a);
-    const debounced = debounce(fn, 5000, {leading: true});
-
-    debounced(1);
-    expect(fn.mock.calls).toEqual([[1]]);
-
-    debounced(2);
-    debounced(3);
-    expect(fn.mock.calls).toEqual([[1]]);
-
-    jest.runAllTimers();
-    expect(fn.mock.calls).toEqual([[1], [3]]);
-});
-
-test('debounce with leading and without trailing', () => {
-    const fn = jest.fn().mockImplementation((a) => a);
-    const debounced = debounce(fn, 5000, {leading: true, trailing: false});
-
-    debounced(1);
-    expect(fn.mock.calls).toEqual([[1]]);
-
-    debounced(2);
-    debounced(3);
-    expect(fn.mock.calls).toEqual([[1]]);
-
-    jest.runAllTimers();
-    expect(fn.mock.calls).toEqual([[1]]);
-});
-
-test('debounce with maxWait', () => {
-    const fn = jest.fn().mockImplementation((a) => a);
-    const debounced = debounce(fn, 2500, {maxWait: 3000});
-
-    debounced(1);
-    jest.advanceTimersByTime(2000);
-
-    debounced(2);
-    debounced(3);
-    jest.advanceTimersByTime(2000);
-    expect(fn.mock.calls).toEqual([[3]]);
-
-    debounced(4);
-    jest.runAllTimers();
-
-    expect(fn.mock.calls).toEqual([[3], [4]]);
-});
-
-test("debounce with leading and maxWait don't gets called twice", () => {
-    const fn = jest.fn().mockImplementation((a) => a);
-    const debounced = debounce(fn, 2500, {maxWait: 1000, leading: true});
-
-    debounced(1);
-    jest.runAllTimers();
-
-    expect(fn.mock.calls).toEqual([[1]]);
-});
-
-test('debounce calls the function when maxWait expires', () => {
-    const fn = jest.fn().mockImplementation((a) => a);
-    const debounced = debounce(fn, 1000, {maxWait: 2000});
-
-    debounced(1);
-    jest.advanceTimersByTime(500);
-    debounced(2);
-    jest.advanceTimersByTime(500);
-    debounced(3);
-    jest.advanceTimersByTime(500);
-    debounced(4);
-    jest.advanceTimersByTime(500);
-
-    expect(fn.mock.calls).toEqual([[4]]);
-    jest.runAllTimers();
-    expect(fn.mock.calls).toEqual([[4]]);
-});
-
-test('debounce cancel', () => {
-    const fn = jest.fn().mockImplementation((a) => a);
-    const debounced = debounce(fn, 5000);
-
-    debounced(1);
-    debounced(2);
-    debounced(3);
-
-    debounced.cancel();
-
-    jest.runAllTimers();
-
-    expect(fn).not.toHaveBeenCalled();
-});
-
-test('debounce flush', () => {
-    const fn = jest.fn().mockImplementation((a) => a);
-    const debounced = debounce(fn, 5000);
-
-    debounced(1);
-    debounced(2);
-    debounced(3);
-
-    debounced.flush();
-
-    jest.runAllTimers();
-    expect(fn.mock.calls).toEqual([[3]]);
-});
-
-test('isEqual happy case', () => {
-    const symbol = Symbol('abc');
-
-    const a = {
-        n: 123,
-        s: 'abc',
-        b: true,
-        nan: NaN,
-        nul: null,
-        und: undefined,
-        arr: [1, false, null, undefined, new Date(1234567890), {a: 1, b: 2, c: 3}],
-        date: new Date(1234567890),
-        obj: {a: 1, b: 2, c: 3},
-        symbol,
-    };
-
-    const b = {
-        n: 123,
-        s: 'abc',
-        b: true,
-        nan: NaN,
-        nul: null,
-        und: undefined,
-        arr: [1, false, null, undefined, new Date(1234567890), {a: 1, b: 2, c: 3}],
-        date: new Date(1234567890),
-        obj: {a: 1, b: 2, c: 3},
-        symbol,
-    };
-
-    expect(isEqual(a, b)).toBe(true);
-});
-
-test('isEqual with different primitives', () => {
-    expect(isEqual(1, 2)).toBe(false);
-    expect(isEqual('a', 'b')).toBe(false);
-    expect(isEqual(true, false)).toBe(false);
-    expect(isEqual(null, undefined)).toBe(false);
-    expect(isEqual(Symbol('abc'), Symbol('abc'))).toBe(false);
-    expect(isEqual(new Date(1234567890), new Date(1234567891))).toBe(false);
-});

package/src/utils/analytics.tsx

@@ -1,28 +0,0 @@
-'use client';
-import * as React from 'react';
-
-import type {EventFormat} from '../theme';
-
-// Universal Analytics (legacy)
-export const eventCategories = {userInteraction: 'user_interaction'} as const;
-export const eventActions = {linkTapped: 'link_tapped'} as const;
-
-// Google analytics 4
-export const eventNames = {userInteraction: 'user_interaction'} as const;
-
-const TrackingContext = React.createContext<{eventFormat: EventFormat}>({
-    eventFormat: 'universal-analytics',
-});
-
-type TrackingConfigProps = {
-    children: React.ReactNode;
-    eventFormat: EventFormat;
-};
-
-export const TrackingConfig = ({children, eventFormat}: TrackingConfigProps): JSX.Element => {
-    const value = React.useMemo(() => ({eventFormat}), [eventFormat]);
-
-    return <TrackingContext.Provider value={value}>{children}</TrackingContext.Provider>;
-};
-
-export const useTrackingConfig = (): {eventFormat: EventFormat} => React.useContext(TrackingContext);