@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/dialog.tsx

@@ -1,423 +0,0 @@
-'use client';
-// https://www.figma.com/file/8TXIyWTJ8plJ06i1qwv97k/%F0%9F%94%B8-Modals-Specs?type=design&node-id=0-21&mode=design&t=kUetunERuhUMfYm2-0
-import * as React from 'react';
-import classnames from 'classnames';
-import {ButtonPrimary, ButtonSecondary, ButtonDanger} from './button';
-import {Portal} from './portal';
-import FocusTrap from './focus-trap';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import {InternalIconButton} from './icon-button';
-import {isWebViewBridgeAvailable, nativeConfirm, nativeAlert} from '@tef-novum/webview-bridge';
-import {useTheme} from './hooks';
-import ButtonLayout from './button-layout';
-import {Text5, Text4, Text3} from './text';
-import {ESC} from './utils/keys';
-import Box from './box';
-import {isRunningAcceptanceTest} from './utils/platform';
-import {useSetModalStateEffect} from './modal-context-provider';
-import Stack from './stack';
-import * as styles from './dialog.css';
-import {vars} from './skins/skin-contract.css';
-import * as tokens from './text-tokens';
-
-import type {ButtonLink} from './button';
-import type {RendersNullableElement} from './utils/types';
-import type {ExclusifyUnion} from './utils/utility-types';
-
-const shouldAnimate = () => process.env.NODE_ENV !== 'test' && !isRunningAcceptanceTest();
-
-interface BaseDialogProps {
-    className?: string;
-    title?: string;
-    message: string;
-    acceptText?: string;
-    onAccept?: () => void;
-    destructive?: boolean;
-    closeButtonLabel?: string;
-}
-
-export type AlertProps = BaseDialogProps;
-
-export interface ConfirmProps extends BaseDialogProps {
-    cancelText?: string;
-    onCancel?: () => void;
-}
-
-export interface ExtendedDialogProps extends BaseDialogProps {
-    asset?: React.ReactElement;
-    subtitle?: string;
-    extra?: React.ReactNode;
-    cancelText?: string;
-    onCancel?: () => void;
-    link?: RendersNullableElement<typeof ButtonLink>;
-}
-
-export type DialogProps = ExclusifyUnion<AlertProps | ConfirmProps | ExtendedDialogProps> & {
-    type: 'dialog' | 'alert' | 'confirm';
-    triggerEl?: HTMLElement;
-};
-
-type InternalDialogProps = DialogProps & {showCancelButton: boolean; showAcceptButton: boolean};
-
-const InternalDialog = (props: InternalDialogProps) => {
-    const {texts, t} = useTheme();
-    const {
-        className,
-        title,
-        message,
-        asset,
-        extra,
-        showCancelButton,
-        showAcceptButton,
-        cancelText = texts.dialogCancelButton || t(tokens.dialogCancelButton),
-        acceptText = texts.dialogAcceptButton || t(tokens.dialogAcceptButton),
-        onCancel: handleCancel,
-        onAccept: handleAccept,
-        destructive = false,
-    } = props;
-    const isDialog = props.type === 'dialog';
-    const showActions = (isDialog && !!props.link) || showAcceptButton || showCancelButton;
-
-    const acceptButtonProps = {
-        onPress: handleAccept || (() => {}),
-        children: acceptText,
-        // @deprecated - testid should be removed but many webapp tests depend on this
-        dataAttributes: {testid: 'dialog-accept-button'},
-    };
-
-    return (
-        <div className={classnames(styles.variants[isDialog ? 'dialog' : 'default'], className)}>
-            {asset && (
-                <Box paddingBottom={24}>
-                    <div className={styles.iconContainer}>
-                        {React.cloneElement<any>(asset, {size: '100%'})}
-                    </div>
-                </Box>
-            )}
-            {title && (
-                <Box paddingBottom={16}>
-                    <Text5 as="h2">{title}</Text5>
-                </Box>
-            )}
-            {props.subtitle && (
-                <Box paddingBottom={16}>
-                    <Text4 regular as="h2">
-                        {props.subtitle}
-                    </Text4>
-                </Box>
-            )}
-            <div className={styles.dialogContent}>
-                <Stack space={16}>
-                    <Text3 color={vars.colors.textSecondary} regular>
-                        {message}
-                    </Text3>
-                    {extra}
-                </Stack>
-            </div>
-
-            {showActions && (
-                <div className={styles.dialogActions}>
-                    <ButtonLayout
-                        link={isDialog ? props.link : undefined}
-                        primaryButton={
-                            showAcceptButton ? (
-                                destructive ? (
-                                    <ButtonDanger
-                                        tabIndex={1} // eslint-disable-line jsx-a11y/tabindex-no-positive
-                                        {...acceptButtonProps}
-                                    />
-                                ) : (
-                                    <ButtonPrimary tabIndex={1} {...acceptButtonProps} /> // eslint-disable-line jsx-a11y/tabindex-no-positive
-                                )
-                            ) : undefined
-                        }
-                        secondaryButton={
-                            showCancelButton ? (
-                                <ButtonSecondary
-                                    tabIndex={2} // eslint-disable-line jsx-a11y/tabindex-no-positive
-                                    onPress={handleCancel || (() => {})}
-                                    // @deprecated - testid should be removed but many webapp tests depend on this
-                                    dataAttributes={{testid: 'dialog-cancel-button'}}
-                                >
-                                    {cancelText}
-                                </ButtonSecondary>
-                            ) : undefined
-                        }
-                    />
-                </div>
-            )}
-        </div>
-    );
-};
-
-const showNativeDialog = ({
-    type,
-    message,
-    title,
-    acceptText,
-    cancelText,
-    destructive,
-    onAccept,
-    onCancel,
-    onDestroy,
-}: {
-    type: string;
-    message: string;
-    title?: string;
-    acceptText: string;
-    cancelText: string;
-    destructive?: boolean;
-    onAccept?: () => void;
-    onCancel?: () => void;
-    onDestroy: () => void;
-}) =>
-    type === 'confirm'
-        ? nativeConfirm({message, title, cancelText, acceptText, destructive}).then((accepted) => {
-              if (accepted) {
-                  onAccept?.();
-              } else {
-                  onCancel?.();
-              }
-              onDestroy();
-          })
-        : nativeAlert({message, title, buttonText: acceptText}).then(() => {
-              onAccept?.();
-              onDestroy();
-          });
-
-type ModalDialogProps = DialogProps & {
-    onDestroy: () => void;
-};
-
-const NativeModalDialog = ({
-    type,
-    onAccept,
-    onCancel,
-    onDestroy,
-    acceptText,
-    cancelText,
-    message,
-    title,
-    destructive,
-}: ModalDialogProps): JSX.Element => {
-    const {texts, t} = useTheme();
-    const paramsRef = React.useRef({
-        type,
-        onAccept,
-        onCancel,
-        onDestroy,
-        acceptText: acceptText || texts.dialogAcceptButton || t(tokens.dialogAcceptButton),
-        cancelText: cancelText || texts.dialogCancelButton || t(tokens.dialogCancelButton),
-        message,
-        title,
-        destructive,
-    });
-    const isOpenRef = React.useRef(false);
-
-    React.useEffect(() => {
-        /** to avoid a double call to showNativeDialog in development with StrictMode */
-        if (isOpenRef.current) {
-            return;
-        }
-        isOpenRef.current = true;
-        showNativeDialog(paramsRef.current).finally(() => {
-            isOpenRef.current = false;
-        });
-    }, []);
-
-    return <></>;
-};
-
-const ModalDialog = (props: ModalDialogProps): JSX.Element => {
-    useSetModalStateEffect();
-    const dialogContentRef = React.useRef<HTMLDivElement>(null);
-    const {texts, t} = useTheme();
-    const [isClosing, setIsClosing] = React.useState<boolean>(false);
-    /** this ref has the same value as the isClosing state but we want it to be immediately accessible to avoid possible race conditions */
-    const isClosingRef = React.useRef<boolean>(false);
-    /** this flag is used to avoid calling close() multiple times when the transitions ends (the CSS could define transitions for multiple styles) */
-    const isClosedRef = React.useRef<boolean>(false);
-    /** this flag is used to disable user interactions while the component is animating */
-    const [isReady, setIsReady] = React.useState<boolean>(false);
-    const dialogWasAcceptedRef = React.useRef<boolean>(false);
-    const animationDurationRef = React.useRef<number>(shouldAnimate() ? styles.ANIMATION_DURATION_MS : 0);
-
-    const shouldRenderNative = props.type !== 'dialog' && isWebViewBridgeAvailable();
-    const shouldDismissOnPressOverlay = props.type === 'dialog';
-    const shouldAcceptOnDismiss = props.type === 'alert';
-
-    const {onAccept, onCancel, onDestroy, ...dialogProps} = props;
-
-    React.useEffect(() => {
-        const timeout = setTimeout(() => {
-            if (!isClosingRef.current) {
-                setIsReady(true);
-            }
-        }, animationDurationRef.current);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-
-    const close = React.useCallback(() => {
-        if (!isClosedRef.current) {
-            isClosedRef.current = true;
-            if (dialogWasAcceptedRef.current) {
-                onAccept?.();
-            } else {
-                onCancel?.();
-            }
-            onDestroy();
-        }
-    }, [onAccept, onCancel, onDestroy]);
-
-    const startClosing = React.useCallback(() => {
-        let timeout: NodeJS.Timeout;
-        if (!isClosingRef.current && isReady) {
-            isClosingRef.current = true;
-            setIsReady(false);
-            setIsClosing(true);
-            timeout = setTimeout(close, animationDurationRef.current);
-        }
-        return () => {
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-        };
-    }, [close, isReady]);
-
-    const handleAccept = React.useCallback(() => {
-        dialogWasAcceptedRef.current = true;
-        startClosing();
-    }, [startClosing]);
-
-    const handleCancel = React.useCallback(() => {
-        dialogWasAcceptedRef.current = false;
-        startClosing();
-    }, [startClosing]);
-
-    const dismiss = React.useCallback(() => {
-        if (isClosingRef.current) {
-            return;
-        }
-        if (shouldAcceptOnDismiss) {
-            handleAccept();
-        } else {
-            handleCancel();
-        }
-    }, [handleAccept, handleCancel, shouldAcceptOnDismiss]);
-
-    const handleKeyDown = React.useCallback(
-        (event: KeyboardEvent) => {
-            if (event.key === ESC) {
-                event.stopPropagation();
-                event.preventDefault();
-                dismiss();
-            }
-        },
-        [dismiss]
-    );
-
-    React.useEffect(() => {
-        if (shouldRenderNative) {
-            return;
-        }
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [handleKeyDown, shouldRenderNative]);
-
-    React.useEffect(() => {
-        if (shouldRenderNative) {
-            return;
-        }
-        // Consider any page navigation as a dismiss
-        window.addEventListener('popstate', dismiss);
-        return () => {
-            window.removeEventListener('popstate', dismiss);
-        };
-    }, [dismiss, shouldRenderNative]);
-
-    const handleOverlayPress = React.useCallback(
-        (event: React.MouseEvent) => {
-            event.stopPropagation();
-            if (shouldDismissOnPressOverlay) {
-                handleCancel();
-            }
-        },
-        [shouldDismissOnPressOverlay, handleCancel]
-    );
-
-    if (shouldRenderNative) {
-        return <NativeModalDialog {...props} />;
-    }
-
-    return (
-        <Portal className={styles.wrapper}>
-            <FocusTrap>
-                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-                <div
-                    onClick={handleOverlayPress}
-                    className={classnames(styles.modalOpacityLayer, {
-                        [styles.closedOpactityLayer]: isClosing,
-                    })}
-                    data-testid="dialog-overlay"
-                    aria-hidden={isClosing || !isReady}
-                >
-                    {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-                    <div role="dialog" onClick={(e) => e.stopPropagation()} data-component-name="Dialog">
-                        <div
-                            ref={dialogContentRef}
-                            onAnimationEnd={(e) => {
-                                if (e.target === dialogContentRef.current) {
-                                    if (!isClosingRef.current) {
-                                        setIsReady(true);
-                                    }
-                                }
-                            }}
-                            onTransitionEnd={(e) => {
-                                if (e.target === dialogContentRef.current) {
-                                    if (isClosingRef.current) {
-                                        close();
-                                    }
-                                }
-                            }}
-                            className={classnames(styles.modalContent, {
-                                [styles.closedModalContent]: isClosing,
-                            })}
-                        >
-                            {shouldDismissOnPressOverlay && (
-                                <div className={styles.modalCloseButtonContainer}>
-                                    <InternalIconButton
-                                        onPress={dismiss}
-                                        aria-label={
-                                            props.closeButtonLabel || texts.modalClose || t(tokens.modalClose)
-                                        }
-                                        bleedLeft
-                                        bleedRight
-                                        bleedY
-                                        Icon={IconCloseRegular}
-                                    />
-                                </div>
-                            )}
-                            <InternalDialog
-                                {...dialogProps}
-                                // "alert" and "confirm" always show the accept button, "dialog" only when the callback is provided
-                                showAcceptButton={props.type !== 'dialog' || !!props.onAccept}
-                                // "alert" never shows the cancel button, "confirm" always shows it, "dialog" only when the callback is provided
-                                showCancelButton={
-                                    props.type === 'confirm' || (props.type === 'dialog' && !!props.onCancel)
-                                }
-                                onCancel={handleCancel}
-                                onAccept={handleAccept}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </FocusTrap>
-        </Portal>
-    );
-};
-
-export default ModalDialog;

package/src/divider.css.ts

@@ -1,10 +0,0 @@
-import {styleVariants} from '@vanilla-extract/css';
-import {vars} from './skins/skin-contract.css';
-
-export const variants = styleVariants({
-    default: {borderBottom: `1px solid ${vars.colors.divider}`},
-    alternative: {borderBottom: `1px solid ${vars.colors.divider}`},
-    brand: {borderBottom: `1px solid ${vars.colors.dividerBrand}`},
-    negative: {borderBottom: `1px solid ${vars.colors.dividerNegative}`},
-    media: {borderBottom: `1px solid ${vars.colors.dividerNegative}`},
-});

package/src/divider.tsx

@@ -1,11 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useThemeVariant} from './theme-variant-context';
-import * as styles from './divider.css';
-
-const Divider = (): JSX.Element => {
-    const variant = useThemeVariant();
-    return <div className={styles.variants[variant]} />;
-};
-
-export default Divider;

package/src/double-field.css.ts

@@ -1,33 +0,0 @@
-import {styleVariants} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {sprinkles} from './sprinkles.css';
-import {DEFAULT_WIDTH} from './text-field-components.css';
-
-const container = sprinkles({
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-});
-
-export const variants = styleVariants({
-    default: [
-        container,
-        {
-            '@media': {
-                [mq.desktopOrBigger]: {
-                    width: DEFAULT_WIDTH,
-                },
-            },
-        },
-    ],
-    fullWidth: [
-        container,
-        {
-            '@media': {
-                [mq.desktopOrBigger]: {
-                    width: '100%',
-                },
-            },
-        },
-    ],
-});

package/src/double-field.tsx

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import Box from './box';
-import * as styles from './double-field.css';
-
-import type CreditCardExpirationField from './credit-card-expiration-field';
-import type CvvField from './cvv-field';
-import type DateField from './date-field';
-import type DecimalField from './decimal-field';
-import type EmailField from './email-field';
-import type IntegerField from './integer-field';
-import type PasswordField from './password-field';
-import type PhoneNumberField from './phone-number-field';
-import type Select from './select';
-import type TextField from './text-field';
-import type {RendersElement} from './utils/types';
-
-type Field =
-    | RendersElement<typeof TextField>
-    | RendersElement<typeof Select>
-    | RendersElement<typeof CvvField>
-    | RendersElement<typeof CreditCardExpirationField>
-    | RendersElement<typeof DecimalField>
-    | RendersElement<typeof IntegerField>
-    | RendersElement<typeof DateField>
-    | RendersElement<typeof PhoneNumberField>
-    | RendersElement<typeof PasswordField>
-    | RendersElement<typeof EmailField>;
-
-type Props = {
-    fullWidth?: boolean;
-    children: Field | [Field, Field];
-    layout?: '50/50' | '40/60' | '60/40';
-};
-
-const DoubleField = ({children, fullWidth, layout}: Props): JSX.Element => {
-    let rightWidth: string;
-    let leftWidth: string;
-    if (layout === '40/60') {
-        leftWidth = '40%';
-        rightWidth = '60%';
-    } else if (layout === '60/40') {
-        leftWidth = '60%';
-        rightWidth = '40%';
-    } else {
-        leftWidth = '50%';
-        rightWidth = '50%';
-    }
-
-    const renderChildren = () => {
-        const [first, second]: any = React.Children.toArray(children);
-        return (
-            <>
-                <Box paddingRight={8} width={leftWidth}>
-                    {React.cloneElement(first, {
-                        fullWidth: true,
-                    })}
-                </Box>
-                <Box paddingLeft={8} width={rightWidth}>
-                    {second &&
-                        React.cloneElement(second, {
-                            fullWidth: true,
-                        })}
-                </Box>
-            </>
-        );
-    };
-
-    return <div className={styles.variants[fullWidth ? 'fullWidth' : 'default']}>{renderChildren()}</div>;
-};
-
-export default DoubleField;

package/src/drawer.css.ts

@@ -1,123 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-
-export const ANIMATION_DURATION_MS = 350;
-const WIDTH_CONTENT = 388;
-
-export const container = style([
-    sprinkles({
-        position: 'fixed',
-        display: 'flex',
-        background: vars.colors.background,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        overflow: 'hidden',
-    }),
-    {
-        left: 0,
-        transition: `transform ${ANIMATION_DURATION_MS}ms cubic-bezier(0.5, 0, 0.5, 1)`,
-        paddingBottom: 'env(safe-area-inset-bottom)',
-        '@media': {
-            [mq.tabletOrBigger]: {
-                left: 'auto',
-                borderTopLeftRadius: vars.borderRadii.container,
-                borderBottomLeftRadius: vars.borderRadii.container,
-                minWidth: `calc(${WIDTH_CONTENT}px + ${vars.spacing.drawerPadding.left} + ${vars.spacing.drawerPadding.right})`,
-                maxWidth: 'calc(100vw - 40px)',
-            },
-        },
-    },
-]);
-
-export const drawer = style([
-    sprinkles({
-        display: 'flex',
-        flexDirection: 'column',
-        flexGrow: 1,
-    }),
-    {
-        paddingTop: vars.spacing.drawerPadding.top,
-    },
-]);
-
-export const titleContainer = style([
-    sprinkles({
-        flexShrink: 0,
-        flexGrow: 0,
-    }),
-    {
-        marginBottom: 16,
-    },
-]);
-
-export const scrollableSection = style([
-    sprinkles({
-        flexGrow: 1,
-        overflowY: 'auto',
-    }),
-]);
-
-export const open = style({
-    transform: 'initial',
-});
-
-export const closed = style({
-    '@media': {
-        [mq.mobile]: {
-            transform: 'translateY(100%)',
-        },
-        [mq.tabletOrBigger]: {
-            transform: 'translateX(100%)',
-        },
-    },
-});
-
-export const overlay = style([
-    sprinkles({
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: vars.colors.backgroundOverlay,
-    }),
-    {
-        transition: `opacity ${ANIMATION_DURATION_MS}ms`,
-        touchAction: 'none',
-    },
-]);
-
-export const overlayClosed = style({
-    opacity: 0,
-});
-
-export const overlayOpen = style({
-    opacity: 1,
-});
-
-export const closeButtonContainer = sprinkles({
-    position: 'absolute',
-    top: 8,
-    right: 8,
-});
-
-export const horizontalPadding = style({
-    paddingLeft: vars.spacing.drawerPadding.left,
-    paddingRight: vars.spacing.drawerPadding.right,
-});
-
-export const bottomPadding = style({
-    paddingBottom: vars.spacing.drawerPadding.bottom,
-});
-
-export const buttonsLayoutContainer = style({
-    padding: `16px ${vars.spacing.drawerPadding.right} ${vars.spacing.drawerPadding.bottom} ${vars.spacing.drawerPadding.left}`,
-    '@media': {
-        [mq.tabletOrBigger]: {
-            padding: `24px ${vars.spacing.drawerPadding.right} ${vars.spacing.drawerPadding.bottom} ${vars.spacing.drawerPadding.left}`,
-        },
-    },
-});