@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/utils/animation.tsx

@@ -1,201 +0,0 @@
-import * as React from 'react';
-import {isRunningAcceptanceTest} from './platform';
-
-import type {Theme} from '../theme';
-
-const areAnimationsSupported = (platformOverrides: Theme['platformOverrides']) =>
-    !isRunningAcceptanceTest(platformOverrides);
-
-type AnimationProps = {
-    children?: React.ReactNode;
-    strokeDasharray?: string;
-    strokeDashoffset?: string;
-    opacity?: number;
-};
-
-export const getAnimateCircleScaleInProps = (
-    to: string | number,
-    platformOverrides: Theme['platformOverrides']
-): null | AnimationProps =>
-    areAnimationsSupported(platformOverrides)
-        ? {
-              children: (
-                  <animate
-                      attributeName="r"
-                      begin="0s"
-                      dur="0.9s"
-                      from="0"
-                      to={to}
-                      keyTimes="0;1"
-                      calcMode="spline"
-                      keySplines="0.65 0 0.25 1"
-                  />
-              ),
-          }
-        : null;
-
-export const getAnimateDrawLineProps = (
-    from: string,
-    begin: string,
-    platformOverrides: Theme['platformOverrides'],
-    keySplines?: string
-): null | AnimationProps =>
-    areAnimationsSupported(platformOverrides)
-        ? {
-              strokeDasharray: from.replace('-', ''),
-              strokeDashoffset: from,
-              children: (
-                  <animate
-                      attributeName="stroke-dashoffset"
-                      from={from}
-                      to="0"
-                      dur="0.7"
-                      repeatCount="1"
-                      begin={begin}
-                      fill="freeze"
-                      keyTimes="0;1"
-                      calcMode="spline"
-                      keySplines={keySplines ?? '0.65 0 0.25 1'}
-                  />
-              ),
-          }
-        : null;
-
-export const getAnimateFadeInProps = (
-    begin: string,
-    platformOverrides: Theme['platformOverrides']
-): null | AnimationProps =>
-    areAnimationsSupported(platformOverrides)
-        ? {
-              opacity: 0,
-              children: (
-                  <animate
-                      attributeName="opacity"
-                      from="0"
-                      to="1"
-                      dur="0.4"
-                      repeatCount="1"
-                      begin={begin}
-                      fill="freeze"
-                      keyTimes="0;1"
-                      calcMode="spline"
-                      keySplines="0.65 0 0.25 1"
-                  />
-              ),
-          }
-        : null;
-
-export const getAnimateHopInProps = (
-    begin: string,
-    platformOverrides: Theme['platformOverrides']
-): null | AnimationProps =>
-    areAnimationsSupported(platformOverrides)
-        ? {
-              children: (
-                  <>
-                      <animate
-                          from="2.5"
-                          to="2"
-                          dur="0.7s"
-                          begin={begin}
-                          keyTimes="0;1"
-                          calcMode="spline"
-                          fill="freeze"
-                          keySplines="0.65 0 0.25 1"
-                      />
-                      <animateTransform
-                          attributeName="transform"
-                          type="translate"
-                          from="-0.5 1"
-                          to="0 0"
-                          dur="0.7s"
-                          begin={begin}
-                          keyTimes="0;1"
-                          calcMode="spline"
-                          fill="freeze"
-                          keySplines="0.65 0 0.25 1"
-                      />
-                  </>
-              ),
-          }
-        : null;
-
-export const getAnimateSweepInProps = (
-    begin: string,
-    platformOverrides: Theme['platformOverrides']
-): null | AnimationProps =>
-    areAnimationsSupported(platformOverrides)
-        ? {
-              opacity: 0,
-              children: (
-                  <>
-                      <animate
-                          attributeName="opacity"
-                          from="0"
-                          to="1"
-                          dur="0.1"
-                          begin={begin}
-                          fill="freeze"
-                          keyTimes="0;1"
-                          calcMode="spline"
-                          keySplines="0.65 0 0.25 1"
-                      />
-                      <animateTransform
-                          attributeName="transform"
-                          type="scale"
-                          from="0 0"
-                          to="1.15 1.15"
-                          dur="0.8s"
-                          begin={begin}
-                          keyTimes="0;1"
-                          additive="sum"
-                          calcMode="spline"
-                          fill="freeze"
-                          keySplines="0.8 0 0 1"
-                      />
-                      <animateTransform
-                          attributeName="transform"
-                          type="rotate"
-                          from="50 21 10"
-                          to="0 21 10"
-                          dur="0.8s"
-                          begin={begin}
-                          keyTimes="0;1"
-                          additive="sum"
-                          calcMode="spline"
-                          fill="freeze"
-                          keySplines="0.8 0 0 1"
-                      />
-                      <animateTransform
-                          attributeName="transform"
-                          type="scale"
-                          from="1.1 1.1"
-                          to="1 1"
-                          dur="0.2s"
-                          begin={`${parseFloat(begin) + 0.8}s`}
-                          keyTimes="0;1"
-                          calcMode="spline"
-                          fill="freeze"
-                          keySplines="0.65 0 0.25 1"
-                      />
-                  </>
-              ),
-          }
-        : null;
-
-const mergeChildren = ({children}: AnimationProps, nextChild?: React.ReactNode) => (
-    <>
-        {children}
-        {nextChild}
-    </>
-);
-
-export const mergeProperties = (...props: Array<AnimationProps | null>): AnimationProps =>
-    props.reduce(
-        (allProps, nextProps) => ({
-            ...allProps,
-            ...(nextProps || {}),
-            children: mergeChildren(allProps, nextProps ? nextProps.children : null),
-        }),
-        {children: null} as any
-    );

package/src/utils/aspect-ratio-support.css.ts

@@ -1,28 +0,0 @@
-import {style, createVar} from '@vanilla-extract/css';
-import {sprinkles} from '../sprinkles.css';
-
-const aspectRatio = createVar();
-
-export const vars = {aspectRatio};
-
-export const wrapper = sprinkles({
-    overflow: 'hidden',
-    maxWidth: '100%',
-    maxHeight: '100%',
-    position: 'relative',
-});
-
-export const container = style({
-    '@supports': {
-        '(aspect-ratio: 1 / 1)': {
-            aspectRatio,
-        },
-    },
-});
-
-export const containerWithWrapper = sprinkles({
-    width: '100%',
-    height: '100%',
-    top: 0,
-    left: 0,
-});

package/src/utils/aspect-ratio-support.tsx

@@ -1,141 +0,0 @@
-'use client';
-import classNames from 'classnames';
-import * as React from 'react';
-import {useIsomorphicLayoutEffect} from '../hooks';
-import * as styles from './aspect-ratio-support.css';
-import {applyCssVars} from './css';
-
-import type {DataAttributes} from './types';
-
-const AspectRatioSupport = React.createContext<boolean>(true);
-
-type Props = {
-    children: React.ReactNode;
-};
-
-export const AspectRatioSupportProvider = ({children}: Props): JSX.Element => {
-    // In SSR (and in first client side render) we assume the browser will support it
-    const [isSupported, setIsSupported] = React.useState(true);
-
-    useIsomorphicLayoutEffect(() => {
-        try {
-            if (!CSS.supports('aspect-ratio', '1 / 1')) {
-                setIsSupported(false);
-            }
-        } catch (e) {
-            // CSS.support is not available in old browsers, in that case we asume aspect-ratio is not supported
-            setIsSupported(false);
-        }
-    }, []);
-
-    return <AspectRatioSupport.Provider value={isSupported}>{children}</AspectRatioSupport.Provider>;
-};
-
-export const useSupportsAspectRatio = (): boolean => React.useContext(AspectRatioSupport);
-
-type AspectRatioContainerProps = {
-    width?: number | string;
-    height?: number | string;
-    aspectRatio?: number;
-    children: React.ReactNode;
-    as?: React.ComponentType<any> | string;
-    style?: React.CSSProperties;
-    className?: string;
-    dataAttributes?: DataAttributes;
-};
-
-export const AspectRatioContainer = (props: AspectRatioContainerProps): JSX.Element => {
-    // forceNonCssAspectRatio is intentionally not included in the props type and should only be used for testing purposes
-    const forceNonCssAspectRatio = !!(props as any).forceNonCssAspectRatio;
-
-    const supportsAspectRatio = useSupportsAspectRatio() && !forceNonCssAspectRatio;
-    // if width or height are numeric, we can calculate the other with the ratio without css.
-    // if aspect ratio is 0, we use the original image proportions
-    const withCssAspectRatio =
-        typeof props.width !== 'number' && typeof props.height !== 'number' && props.aspectRatio !== 0;
-
-    const aspectRatio = withCssAspectRatio ? props.aspectRatio : undefined;
-
-    let width: number | string | undefined = props.width;
-    let height = props.height;
-
-    if (props.width !== undefined && props.height !== undefined) {
-        width = props.width;
-        height = props.height;
-    } else if (typeof props.width === 'number') {
-        height = props.aspectRatio !== 0 ? props.width / (props.aspectRatio ?? 1) : undefined;
-    } else if (typeof props.height === 'number') {
-        width = props.aspectRatio !== 0 ? props.height * (props.aspectRatio ?? 1) : undefined;
-    } else if (props.height) {
-        height = props.height;
-    } else {
-        width = props.width || '100%';
-    }
-
-    const needsWrapper = withCssAspectRatio && !supportsAspectRatio;
-
-    const container = React.createElement(
-        props.as ?? 'div',
-        {
-            className: classNames(props.className, styles.container, {
-                [styles.containerWithWrapper]: needsWrapper,
-            }),
-            style: {
-                ...(needsWrapper
-                    ? {
-                          ...props.style,
-                          position: aspectRatio ? 'absolute' : 'static',
-                          width: '100%',
-                      }
-                    : {
-                          ...props.style,
-                          width: (!isNaN(Number(width)) ? Number(width) : width) ?? 'fit-content',
-                          height: (!isNaN(Number(height)) ? Number(height) : height) ?? 'fit-content',
-                      }),
-                ...applyCssVars({
-                    [styles.vars.aspectRatio]: aspectRatio ? String(aspectRatio) : 'unset',
-                }),
-            },
-            ...(!needsWrapper && props.dataAttributes),
-        },
-        props.children
-    );
-
-    if (needsWrapper) {
-        const paddingTop = (() => {
-            if (!aspectRatio) {
-                return 0;
-            }
-            if (props.width && typeof props.width === 'string' && props.width.endsWith('%')) {
-                return `${parseFloat(props.width) / aspectRatio}%`;
-            }
-            return `${100 / aspectRatio}%`;
-        })();
-
-        return (
-            <div style={{width, height, paddingTop}} className={styles.wrapper} {...props.dataAttributes}>
-                {container}
-            </div>
-        );
-    } else {
-        return container;
-    }
-};
-
-/**
- * @param aspectRatio value in the format of "width:height" or a number, or "auto"
- * @returns number
- */
-export const aspectRatioToNumber = (aspectRatio?: `${number}:${number}` | number | 'auto'): number => {
-    if (!aspectRatio) {
-        return 0;
-    }
-    if (typeof aspectRatio === 'number') {
-        return aspectRatio;
-    }
-    if (aspectRatio.includes(':')) {
-        const [width, height] = aspectRatio.split(':');
-        return +width / +height;
-    }
-    return 0;
-};

package/src/utils/browser.tsx

@@ -1,9 +0,0 @@
-export const redirect = (url: string, external = false, loadOnTop = false): void => {
-    if (external) {
-        window.open(url, '_blank');
-    } else if (loadOnTop) {
-        window.open(url, '_top');
-    } else {
-        window.location.assign(url);
-    }
-};

package/src/utils/color.tsx

@@ -1,46 +0,0 @@
-export const fromHexToRgb = (hexColor: string): [number, number, number] => {
-    if (hexColor.length === 4) {
-        return [
-            parseInt(hexColor.substr(-3, 1).repeat(2), 16),
-            parseInt(hexColor.substr(-2, 1).repeat(2), 16),
-            parseInt(hexColor.substr(-1, 1).repeat(2), 16),
-        ];
-    }
-    if (hexColor.length === 7) {
-        return [
-            parseInt(hexColor.substr(-6, 2), 16),
-            parseInt(hexColor.substr(-4, 2), 16),
-            parseInt(hexColor.substr(-2, 2), 16),
-        ];
-    }
-    throw Error('Bad color');
-};
-
-/**
- * @param color hex color or css variable with rgb components (skinVars.rawColors)
- * @param alpha the alpha value to apply
- * @returns The same color with the alpha channel applied
- */
-export const applyAlpha = (color: string, alpha: number): string => {
-    try {
-        if (color.startsWith('var(')) {
-            // it's a css variable with rgb components. See skin-contract rawColors
-            return `rgba(${color}, ${alpha})`;
-        } else if (color.startsWith('#')) {
-            // it's a hex color
-            return `rgba(${fromHexToRgb(color).join(',')}, ${alpha})`;
-        } else if (color.startsWith('rgb(')) {
-            // it's an rgb color
-            return color.replace('rgb(', 'rgba(').replace(')', `, ${alpha})`);
-        } else if (color.startsWith('rgba(')) {
-            // it's already an rgba color
-            return color.replace(/, [\d.]+\)$/, `, ${alpha})`);
-        } else {
-            // it's a different color format (color name, hsl, etc). We try to use css relative color syntax
-            // Note that this won't work in old browsers https://caniuse.com/css-relative-colors
-            return `rgb(from ${color} r g b / ${Math.round(alpha * 100)}%)`;
-        }
-    } catch (e) {
-        return color;
-    }
-};

package/src/utils/common.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-
-export const combineRefs =
-    <T,>(...refs: Array<React.Ref<T> | undefined>) =>
-    (refValue: T | null): void => {
-        refs.forEach((ref) => {
-            if (ref) {
-                if (typeof ref === 'function') {
-                    ref(refValue);
-                } else if ('current' in ref) {
-                    ref.current = refValue;
-                }
-            }
-        });
-    };
-
-export const getTextFromChildren = (children: React.ReactNode): string => {
-    let text = '';
-
-    React.Children.forEach(children, (child) => {
-        if (typeof child === 'string') {
-            text += child;
-        }
-    });
-
-    return text;
-};

package/src/utils/credit-card.tsx

@@ -1,46 +0,0 @@
-// See: https://en.wikipedia.org/wiki/Payment_card_number#Issuer_identification_number_(IIN)
-// Sample regexes: https://rgxdb.com/
-
-export type CardOptions = {
-    americanExpress?: boolean;
-    visa?: boolean;
-    masterCard?: boolean;
-};
-
-const getMatcher = (regex: RegExp) => (str?: string) => !!str && regex.test(str);
-
-/**
- * Returns true if number looks like an American Express card
- * Do not use for validation
- */
-export const isAmericanExpress: (str?: string) => boolean = getMatcher(/^3[47]/);
-
-/**
- * Returns true if number looks like a Visa card
- * Do not use for validation
- */
-export const isVisa: (str?: string) => boolean = getMatcher(/^4/);
-
-/**
- * Returns true if number looks like a MasterCard card
- * Do not use for validation
- */
-export const isMasterCard: (str?: string) => boolean = getMatcher(/^5/);
-
-export const getCvvLength = (creditCardNumber: string): number =>
-    isAmericanExpress(creditCardNumber) ? 4 : 3;
-
-export const getCreditCardNumberLength = (creditCardNumber?: string): number =>
-    isAmericanExpress(creditCardNumber) ? 15 : 16;
-
-export const isValidCreditCardNumber = (creditCardNumber?: string): boolean => {
-    if (!creditCardNumber) return false;
-    if (
-        !isAmericanExpress(creditCardNumber) &&
-        !isMasterCard(creditCardNumber) &&
-        !isVisa(creditCardNumber)
-    ) {
-        return false;
-    }
-    return getCreditCardNumberLength(creditCardNumber) === creditCardNumber.length;
-};

package/src/utils/css.tsx

@@ -1,25 +0,0 @@
-import {assignInlineVars} from '@vanilla-extract/dynamic';
-import {isRunningAcceptanceTest} from './platform';
-
-const BASE_FONT_SIZE = 16; // browser's default font-size in pixels
-
-export const pxToRem = (px: number | string): string =>
-    `${(parseFloat(px as string) / BASE_FONT_SIZE).toFixed(3)}rem`;
-
-export const applyCssVars = (vars: Record<string, string>): Record<string, string> => {
-    // this object spread is needed to avoid this issue: https://github.com/vanilla-extract-css/vanilla-extract/issues/1246
-    return {...assignInlineVars(vars)};
-};
-
-export const safeAreaInsetLeft = isRunningAcceptanceTest()
-    ? `max(env(safe-area-inset-left), var(--acceptance-test-override-safe-area-inset-left, 0px))`
-    : `env(safe-area-inset-left)`;
-export const safeAreaInsetTop = isRunningAcceptanceTest()
-    ? `max(env(safe-area-inset-top), var(--acceptance-test-override-safe-area-inset-top, 0px))`
-    : `env(safe-area-inset-top)`;
-export const safeAreaInsetBottom = isRunningAcceptanceTest()
-    ? `max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset-bottom, 0px))`
-    : `env(safe-area-inset-bottom)`;
-export const safeAreaInsetRight = isRunningAcceptanceTest()
-    ? `max(env(safe-area-inset-right), var(--acceptance-test-override-safe-area-inset-right, 0px))`
-    : `env(safe-area-inset-right)`;

package/src/utils/document-visibility.tsx

@@ -1,52 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useTheme} from '../hooks';
-import {isAndroid} from './platform';
-
-const isDocumentVisible = () => typeof document !== 'undefined' && document.visibilityState === 'visible';
-
-const DocumentVisibilityContext = React.createContext<boolean>(true);
-
-type Props = {
-    hidden?: boolean;
-    children: React.ReactNode;
-};
-
-export const DocumentVisibilityProvider = ({hidden, children}: Props): JSX.Element => {
-    const {platformOverrides} = useTheme();
-    const [visible, setVisible] = React.useState(!hidden);
-    React.useEffect(() => {
-        const visibilitychangeCallback = () => {
-            setVisible(isDocumentVisible());
-        };
-        const focusCallback = () => {
-            setVisible(true);
-        };
-        const blurCallback = () => {
-            setVisible(false);
-        };
-        setVisible(isDocumentVisible());
-        document.addEventListener('visibilitychange', visibilitychangeCallback);
-        document.addEventListener('focus', focusCallback);
-        document.addEventListener('blur', blurCallback);
-        return () => {
-            document.removeEventListener('visibilitychange', visibilitychangeCallback);
-            document.removeEventListener('focus', focusCallback);
-            document.removeEventListener('blur', blurCallback);
-        };
-    }, []);
-
-    // Workaround for this bug: https://jira.tuenti.io/jira/browse/ACCOUNT-10938
-    // In Android, after ~10 minutes of inactivity, when a background webview receives focus (back navigation from another webview),
-    // visibility change event is not fired, this causes problems like the navigation bar not being updated
-    const isVisibleNow = isDocumentVisible();
-    if (isAndroid(platformOverrides) && isVisibleNow !== visible) {
-        setVisible(isVisibleNow);
-    }
-
-    return (
-        <DocumentVisibilityContext.Provider value={visible}>{children}</DocumentVisibilityContext.Provider>
-    );
-};
-
-export const useDocumentVisibility = (): boolean => React.useContext(DocumentVisibilityContext);