@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/snackbar-context.tsx

@@ -1,98 +0,0 @@
-'use client';
-import * as React from 'react';
-import {isWebViewBridgeAvailable} from '@tef-novum/webview-bridge';
-import {showNativeSnackbar} from './snackbar-native';
-
-import type {ImperativeHandle, Props as SnackbarProps, SnackbarCloseHandler} from './snackbar';
-
-type SnackbarEntry = SnackbarProps & {
-    id: string;
-};
-
-const SnackbarContext = React.createContext<{
-    snackbars: Array<SnackbarEntry>;
-    setSnackbars: React.Dispatch<React.SetStateAction<Array<SnackbarEntry>>>;
-}>({
-    snackbars: [],
-    setSnackbars: () => {},
-});
-
-const Snackbar = React.lazy(() => import(/* webpackChunkName: "snackbar" */ './snackbar'));
-
-export const SnackbarRoot = ({children}: {children: React.ReactNode}): JSX.Element => {
-    const [snackbars, setSnackbars] = React.useState<Array<SnackbarEntry>>([]);
-    const snackbarRef = React.useRef<ImperativeHandle & HTMLDivElement>(null);
-    const isClosingRef = React.useRef(false);
-
-    React.useEffect(() => {
-        // multiple snackbars, close the current one
-        if (snackbars.length > 1 && !isClosingRef.current) {
-            isClosingRef.current = true;
-            snackbarRef.current?.close({action: 'CONSECUTIVE'});
-        }
-    }, [snackbars]);
-
-    const handleClose: SnackbarCloseHandler = ({action}) => {
-        isClosingRef.current = false;
-        setSnackbars((snackbars) => snackbars.slice(1));
-        snackbars[0].onClose?.({action});
-    };
-
-    const value = React.useMemo(() => {
-        return {
-            snackbars,
-            setSnackbars,
-        };
-    }, [snackbars]);
-
-    const currentSnackbar = snackbars[0];
-
-    return (
-        <SnackbarContext.Provider value={value}>
-            {children}
-            {!!currentSnackbar && (
-                <React.Suspense fallback={null}>
-                    <Snackbar
-                        // remount when the snackbar changes. In native, this will make a new bridge call
-                        key={currentSnackbar.id}
-                        ref={snackbarRef}
-                        message={currentSnackbar.message}
-                        buttonText={currentSnackbar.buttonText}
-                        buttonAccessibilityLabel={currentSnackbar.buttonAccessibilityLabel}
-                        duration={currentSnackbar.duration}
-                        type={currentSnackbar.type}
-                        withDismiss={currentSnackbar.withDismiss}
-                        dataAttributes={currentSnackbar.dataAttributes}
-                        onClose={handleClose}
-                    />
-                </React.Suspense>
-            )}
-        </SnackbarContext.Provider>
-    );
-};
-
-export const useSnackbar = (): {
-    openSnackbar: (params: SnackbarProps) => void;
-    snackbars: ReadonlyArray<Readonly<SnackbarEntry>>;
-} => {
-    const {snackbars, setSnackbars} = React.useContext(SnackbarContext);
-
-    const openSnackbar = React.useCallback(
-        (params: SnackbarProps) => {
-            if (isWebViewBridgeAvailable()) {
-                showNativeSnackbar(params).then(({action}) => {
-                    params.onClose?.({action});
-                });
-            } else {
-                const uniqueIdentifier = Date.now() + '-' + Math.random();
-                setSnackbars((snackbars) => [...snackbars, {...params, id: uniqueIdentifier}]);
-            }
-        },
-        [setSnackbars]
-    );
-
-    return {
-        openSnackbar,
-        snackbars,
-    };
-};

package/src/snackbar-native.ts

@@ -1,37 +0,0 @@
-import {nativeMessage} from '@tef-novum/webview-bridge';
-
-const CLOSE_ACTIONS = ['DISMISS', 'TIMEOUT', 'CONSECUTIVE', 'BUTTON'] as const;
-export type CloseAction = (typeof CLOSE_ACTIONS)[number];
-export type SnackbarType = 'INFORMATIVE' | 'CRITICAL';
-
-export const showNativeSnackbar = ({
-    message,
-    duration,
-    buttonText,
-    buttonAccessibilityLabel,
-    type = 'INFORMATIVE',
-    withDismiss,
-}: {
-    message: string;
-    duration?: 'PERSISTENT';
-    buttonText?: string;
-    buttonAccessibilityLabel?: string;
-    type?: SnackbarType;
-    withDismiss?: boolean;
-}): Promise<{action: CloseAction}> => {
-    return nativeMessage({
-        message,
-        duration,
-        buttonText,
-        buttonAccessibilityLabel,
-        type,
-        withDismiss,
-    }).then((unknownResult: unknown) => {
-        const result = unknownResult as {action?: CloseAction} | undefined;
-        if (result?.action && CLOSE_ACTIONS.includes(result.action)) {
-            return {action: result.action};
-        } else {
-            return {action: 'DISMISS'};
-        }
-    });
-};

package/src/snackbar.css.ts

@@ -1,176 +0,0 @@
-import {style, styleVariants} from '@vanilla-extract/css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-import * as mq from './media-queries.css';
-import {applyAlpha} from './utils/color';
-
-export const TRANSITION_TIME_IN_MS = 300;
-
-export const snackbar = style([
-    sprinkles({
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-    }),
-    {
-        transition: `visibility ${TRANSITION_TIME_IN_MS}ms`,
-        visibility: 'hidden',
-    },
-]);
-
-export const snackbarContainer = style([
-    sprinkles({
-        position: 'relative',
-    }),
-    {
-        zIndex: 1, // Render above everything, including other portals
-    },
-]);
-
-export const snackbarOpen = style({
-    visibility: 'visible',
-});
-
-export const wrapper = style([
-    sprinkles({
-        position: 'fixed',
-        borderRadius: vars.borderRadii.popup,
-    }),
-    {
-        maxWidth: 800,
-        minWidth: 360,
-        minHeight: 48,
-        padding: `14px 16px`,
-        bottom: 40,
-        opacity: 0,
-        transform: 'translateY(100px)',
-        transition: `transform ${TRANSITION_TIME_IN_MS}ms ease-in-out, opacity ${TRANSITION_TIME_IN_MS}ms ease-in-out`,
-
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                left: 8,
-                right: 8,
-                bottom: 8,
-                minWidth: 0,
-            },
-        },
-    },
-]);
-
-export const wrapperCritical = sprinkles({background: vars.colors.feedbackErrorBackground});
-export const wrapperInfo = sprinkles({background: vars.colors.feedbackInfoBackground});
-
-export const wrapperOpen = style({
-    opacity: 1,
-    transform: 'initial',
-    animationDuration: `${TRANSITION_TIME_IN_MS}ms`,
-});
-
-const baseContent = sprinkles({
-    display: 'flex',
-    justifyContent: 'space-between',
-});
-
-export const contentWithLongButton = style([
-    baseContent,
-    sprinkles({
-        flexDirection: 'column',
-    }),
-]);
-
-export const contentWithoutLongButton = style([
-    baseContent,
-    sprinkles({
-        flexDirection: 'row',
-        alignItems: 'center',
-    }),
-]);
-
-export const textContainer = sprinkles({
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-});
-
-const hoverStyles = {
-    transition: 'background-color 0.1s ease-in-out',
-    ':active': {
-        background: applyAlpha(vars.rawColors.inverse, 0.2),
-    },
-    '@media': {
-        [mq.supportsHover]: {
-            ':hover': {
-                background: applyAlpha(vars.rawColors.inverse, 0.1),
-            },
-            ':active': {
-                background: applyAlpha(vars.rawColors.inverse, 0.2),
-            },
-        },
-        [mq.touchableOnly]: {
-            transition: 'none',
-        },
-    },
-} as const;
-
-export const button = style([
-    {
-        flexShrink: 0,
-        marginTop: -6,
-        marginLeft: 16,
-        marginBottom: -6,
-        marginRight: -8,
-        cursor: 'pointer',
-        borderRadius: vars.borderRadii.button,
-
-        '@media': {
-            [mq.desktopOrBigger]: {
-                marginLeft: 48,
-            },
-        },
-    },
-    hoverStyles,
-]);
-
-export const longButton = style({
-    marginTop: 18,
-    marginLeft: -8,
-    alignSelf: 'flex-end',
-    '@media': {
-        [mq.desktopOrBigger]: {
-            marginLeft: -8,
-        },
-    },
-});
-
-export const buttonTouchable = sprinkles({
-    paddingY: 4,
-    paddingX: 8,
-    border: 'none',
-    padding: 0,
-    background: 'transparent',
-});
-
-const dismissButtonBase = sprinkles({
-    display: 'flex',
-    position: 'absolute',
-    alignItems: 'center',
-    justifyContent: 'center',
-    right: 8,
-});
-
-export const dismissButton = styleVariants({
-    centered: [dismissButtonBase, {top: 'calc(50% - 16px)'}],
-    topRight: [dismissButtonBase, sprinkles({top: 8})],
-});
-
-export const dismissIcon = style([
-    sprinkles({
-        width: 32,
-        height: 32,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: '50%',
-    }),
-    hoverStyles,
-]);

package/src/snackbar.tsx

@@ -1,258 +0,0 @@
-'use client';
-import * as React from 'react';
-import Touchable, {BaseTouchable} from './touchable';
-import classNames from 'classnames';
-import {isWebViewBridgeAvailable} from '@tef-novum/webview-bridge';
-import {useElementDimensions, useScreenSize, useTheme} from './hooks';
-import {Text2, Text3} from './text';
-import * as styles from './snackbar.css';
-import {vars} from './skins/skin-contract.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import {Portal} from './portal';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import * as tokens from './text-tokens';
-import {showNativeSnackbar} from './snackbar-native';
-
-import type {SnackbarType, CloseAction} from './snackbar-native';
-import type {DataAttributes} from './utils/types';
-
-export type SnackbarCloseHandler = (result: {action: CloseAction}) => unknown;
-
-const DEFAULT_DURATION_WITHOUT_BUTTON = 5000;
-const DEFAULT_DURATION_WITH_BUTTON = 10000;
-
-export type Props = {
-    buttonText?: string;
-    buttonAccessibilityLabel?: string;
-    closeButtonLabel?: string;
-    duration?: 'PERSISTENT';
-    message: string;
-    onClose?: SnackbarCloseHandler;
-    type?: SnackbarType;
-    children?: void;
-    dataAttributes?: DataAttributes;
-    withDismiss?: boolean;
-};
-
-export type ImperativeHandle = {
-    close: SnackbarCloseHandler;
-};
-
-const SnackbarComponent = React.forwardRef<ImperativeHandle, Props>(
-    (
-        {
-            message,
-            buttonText,
-            buttonAccessibilityLabel,
-            closeButtonLabel,
-            duration,
-            onClose,
-            type,
-            withDismiss = false,
-            dataAttributes,
-        },
-        ref
-    ) => {
-        const {texts, t} = useTheme();
-        const [isOpen, setIsOpen] = React.useState(false);
-        const {width: buttonWidth, ref: buttonRef} = useElementDimensions();
-        const {isDesktopOrBigger} = useScreenSize();
-        const longButtonWidth = isDesktopOrBigger ? 160 : 128;
-        const hasLongButton = buttonWidth > longButtonWidth;
-        const elementRef = React.useRef<HTMLDivElement>(null);
-        const shouldShowDismissButton = (duration === 'PERSISTENT' && !buttonText) || withDismiss;
-        const defaultDuration = buttonText ? DEFAULT_DURATION_WITH_BUTTON : DEFAULT_DURATION_WITHOUT_BUTTON;
-
-        const onCloseRef = React.useRef(onClose);
-        React.useEffect(() => {
-            onCloseRef.current = onClose;
-        }, [onClose]);
-
-        const close = React.useCallback<SnackbarCloseHandler>((result) => {
-            setIsOpen(false);
-            setTimeout(
-                () => {
-                    onCloseRef.current?.(result);
-                },
-                process.env.NODE_ENV === 'test' ? 0 : styles.TRANSITION_TIME_IN_MS
-            );
-        }, []);
-
-        React.useImperativeHandle(ref, () => {
-            return {...elementRef, close};
-        }, [close]);
-
-        React.useEffect(() => {
-            const openTimeout = setTimeout(() => {
-                setIsOpen(true);
-            }, 50);
-
-            const closeTimeout =
-                duration !== 'PERSISTENT'
-                    ? setTimeout(() => close({action: 'TIMEOUT'}), defaultDuration)
-                    : undefined;
-
-            return () => {
-                clearTimeout(openTimeout);
-                clearTimeout(closeTimeout);
-            };
-        }, [close, duration, defaultDuration]);
-
-        return (
-            <Portal className={styles.snackbarContainer}>
-                <div
-                    ref={elementRef}
-                    className={classNames(styles.snackbar, {[styles.snackbarOpen]: isOpen})}
-                >
-                    <div
-                        role="alert"
-                        className={classNames(
-                            styles.wrapper,
-                            type === 'CRITICAL' ? styles.wrapperCritical : styles.wrapperInfo,
-                            {[styles.wrapperOpen]: isOpen}
-                        )}
-                        {...getPrefixedDataAttributes(dataAttributes, 'SnackBar')}
-                    >
-                        <div
-                            className={classNames(
-                                hasLongButton ? styles.contentWithLongButton : styles.contentWithoutLongButton
-                            )}
-                            style={shouldShowDismissButton && !hasLongButton ? {paddingRight: 32} : undefined}
-                        >
-                            <div
-                                style={
-                                    shouldShowDismissButton && hasLongButton ? {paddingRight: 32} : undefined
-                                }
-                            >
-                                <Text2 regular color={vars.colors.textPrimaryNegative}>
-                                    {message}
-                                </Text2>
-                            </div>
-                            {buttonText && (
-                                <div
-                                    className={classNames(styles.button, {
-                                        [styles.longButton]: hasLongButton,
-                                    })}
-                                >
-                                    <BaseTouchable
-                                        className={styles.buttonTouchable}
-                                        ref={buttonRef}
-                                        onPress={() => {
-                                            close({action: 'BUTTON'});
-                                        }}
-                                        aria-label={buttonAccessibilityLabel}
-                                    >
-                                        <Text3
-                                            medium
-                                            forceMobileSizes
-                                            truncate
-                                            color={
-                                                type === 'CRITICAL'
-                                                    ? vars.colors.textPrimaryNegative
-                                                    : vars.colors.textLinkSnackbar
-                                            }
-                                        >
-                                            {buttonText}
-                                        </Text3>
-                                    </BaseTouchable>
-                                </div>
-                            )}
-                        </div>
-                        {shouldShowDismissButton ? (
-                            <Touchable
-                                onPress={() => {
-                                    close({action: 'DISMISS'});
-                                }}
-                                aria-label={
-                                    closeButtonLabel || texts.closeButtonLabel || t(tokens.closeButtonLabel)
-                                }
-                                className={styles.dismissButton[hasLongButton ? 'topRight' : 'centered']}
-                                style={{display: 'flex', width: 32, height: 32}}
-                            >
-                                <div className={styles.dismissIcon}>
-                                    <IconCloseRegular color={vars.colors.inverse} size={20} />
-                                </div>
-                            </Touchable>
-                        ) : null}
-                    </div>
-                </div>
-            </Portal>
-        );
-    }
-);
-
-const Snackbar = React.forwardRef<ImperativeHandle & HTMLDivElement, Props>(
-    (
-        {
-            message,
-            buttonText,
-            buttonAccessibilityLabel,
-            closeButtonLabel,
-            duration,
-            onClose: onCloseProp = () => {},
-            type = 'INFORMATIVE',
-            withDismiss,
-            dataAttributes,
-        },
-        ref
-    ) => {
-        const renderNative = isWebViewBridgeAvailable();
-        const onCloseRef = React.useRef(onCloseProp);
-        const isOpenRef = React.useRef(false);
-
-        React.useEffect(() => {
-            onCloseRef.current = onCloseProp;
-        }, [onCloseProp]);
-
-        React.useEffect(() => {
-            /** the isOpenRef check is to avoid a double call to nativeMessage in development with StrictMode */
-            if (renderNative && !isOpenRef.current) {
-                isOpenRef.current = true;
-                showNativeSnackbar({
-                    message,
-                    duration,
-                    buttonText,
-                    buttonAccessibilityLabel,
-                    type,
-                    withDismiss,
-                })
-                    .then(({action}) => {
-                        onCloseRef.current({action});
-                    })
-                    .finally(() => {
-                        isOpenRef.current = false;
-                    });
-            }
-        }, [
-            buttonAccessibilityLabel,
-            closeButtonLabel,
-            buttonText,
-            duration,
-            message,
-            renderNative,
-            type,
-            withDismiss,
-        ]);
-
-        if (renderNative) {
-            return null;
-        }
-
-        return (
-            <SnackbarComponent
-                ref={ref}
-                message={message}
-                duration={duration}
-                buttonText={buttonText}
-                buttonAccessibilityLabel={buttonAccessibilityLabel}
-                closeButtonLabel={closeButtonLabel}
-                type={type}
-                onClose={onCloseRef.current}
-                withDismiss={withDismiss}
-                dataAttributes={dataAttributes}
-            />
-        );
-    }
-);
-
-export default Snackbar;

package/src/spinner.css.ts

@@ -1,66 +0,0 @@
-import {keyframes, style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-
-const rotatorKeyframes = keyframes({
-    '0%': {
-        transform: 'rotate(0deg)',
-    },
-    '100%': {
-        transform: 'rotate(270deg)',
-    },
-});
-
-const dashKeyframes = keyframes({
-    '0%': {
-        strokeDashoffset: 187,
-    },
-    '50%': {
-        strokeDashoffset: 46.75,
-        transform: 'rotate(135deg)',
-    },
-    '100%': {
-        strokeDashoffset: 187,
-        transform: 'rotate(450deg)',
-    },
-});
-
-const spinnerIosKeyframes = keyframes({
-    '0%': {
-        opacity: 1,
-    },
-    '100%': {
-        opacity: 0,
-    },
-});
-
-export const spinnerDefault = style([
-    sprinkles({flexShrink: 0, display: 'block'}),
-    {
-        animation: `${rotatorKeyframes} 1.4s linear infinite`,
-    },
-]);
-
-export const spinnerDefaultPath = style({
-    strokeDasharray: 187,
-    strokeDashoffset: 0,
-    transformOrigin: 'center',
-    animation: `${dashKeyframes} 1.4s ease-in-out infinite`,
-});
-
-export const spinnerIos = sprinkles({
-    flexShrink: 0,
-    display: 'block',
-});
-
-export const spinnerIosSvgPath = style({
-    animation: `${spinnerIosKeyframes} 1s infinite linear`,
-    selectors: {
-        '&:nth-of-type(2)': {animationDelay: '-.880s'},
-        '&:nth-of-type(3)': {animationDelay: '-.750s'},
-        '&:nth-of-type(4)': {animationDelay: '-.625s'},
-        '&:nth-of-type(5)': {animationDelay: '-.500s'},
-        '&:nth-of-type(6)': {animationDelay: '-.375s'},
-        '&:nth-of-type(7)': {animationDelay: '-.250s'},
-        '&:nth-of-type(8)': {animationDelay: '-.125s'},
-    },
-});