@telefonica/mistica 16.60.0 → 16.61.0

package/src/dialog.tsx

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

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

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

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

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

@@ -0,0 +1,123 @@
+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}`,
+        },
+    },
+});