@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/touchable.tsx

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+'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);