@telefonica/mistica 16.60.0 → 16.61.0

package/src/sheet-native.tsx

@@ -0,0 +1,189 @@
+import type {
+    NativeSheetImplementation,
+    SheetPropsByType,
+    SheetResultByType,
+    SheetType,
+    SheetTypeWithProps,
+    SheetTypeWithPropsUnion,
+} from './sheet-types';
+
+const normalizeDescriptionForNative = (description?: string | Array<string>): string | undefined => {
+    if (Array.isArray(description)) {
+        if (description.length) {
+            return description.join('\n\n');
+        } else {
+            return undefined;
+        }
+    }
+    return description;
+};
+
+const showRadioListNativeSheet = (
+    nativeSheetImplementation: NativeSheetImplementation,
+    {title, subtitle, description, selectedId, items}: SheetPropsByType['RADIO_LIST']
+): Promise<SheetResultByType['RADIO_LIST']> => {
+    return (nativeSheetImplementation as NativeSheetImplementation)({
+        title,
+        subtitle,
+        // TODO: add multiline support to native sheet
+        description: normalizeDescriptionForNative(description),
+        content: [
+            {
+                type: 'LIST',
+                id: 'list-0',
+                listType: 'SINGLE_SELECTION',
+                autoSubmit: true,
+                selectedIds: typeof selectedId === 'string' ? [selectedId] : [],
+                items,
+            },
+        ],
+    }).then(({action, result}) => {
+        if (action === 'SUBMIT') {
+            return {
+                action,
+                selectedId: result[0].selectedIds[0],
+            };
+        } else {
+            return {
+                action,
+                selectedId: null,
+            };
+        }
+    });
+};
+
+const showActionsListNativeSheet = (
+    nativeSheetImplementation: NativeSheetImplementation,
+    {title, subtitle, description, items}: SheetPropsByType['ACTIONS_LIST']
+): Promise<SheetResultByType['ACTIONS_LIST']> => {
+    return (nativeSheetImplementation as NativeSheetImplementation)({
+        title,
+        subtitle,
+        // TODO: add multiline support to native sheet
+        description: normalizeDescriptionForNative(description),
+        content: [
+            {
+                type: 'LIST',
+                id: 'list-0',
+                listType: 'ACTIONS',
+                autoSubmit: true,
+                selectedIds: [],
+                items,
+            },
+        ],
+    }).then(({action, result}) => {
+        if (action === 'SUBMIT') {
+            return {
+                action,
+                selectedId: result[0].selectedIds[0],
+            };
+        } else {
+            return {
+                action,
+                selectedId: null,
+            };
+        }
+    });
+};
+
+const showInfoNativeSheet = async (
+    nativeSheetImplementation: NativeSheetImplementation,
+    {title, subtitle, description, items, button}: SheetPropsByType['INFO']
+): Promise<SheetResultByType['INFO']> => {
+    const infoSheetContent = {
+        type: 'LIST' as const,
+        id: 'list-0',
+        listType: 'INFORMATIVE' as const,
+        autoSubmit: false,
+        selectedIds: [],
+        items,
+    };
+
+    return await (nativeSheetImplementation as NativeSheetImplementation)({
+        title,
+        subtitle,
+        // TODO: add multiline support to native sheet
+        description: normalizeDescriptionForNative(description),
+        content: button
+            ? [
+                  infoSheetContent,
+                  {
+                      type: 'BOTTOM_ACTIONS',
+                      id: 'bottom-actions-0',
+                      button,
+                  },
+              ]
+            : [infoSheetContent],
+    }).then(() => ({
+        // this is an informative sheet, it can only be dismissed
+        action: 'DISMISS',
+    }));
+};
+
+const showActionsNativeSheet = (
+    nativeSheetImplementation: NativeSheetImplementation,
+    {title, subtitle, description, button, secondaryButton, link}: SheetPropsByType['ACTIONS']
+): Promise<SheetResultByType['ACTIONS']> => {
+    return (nativeSheetImplementation as NativeSheetImplementation)({
+        title,
+        subtitle,
+        // TODO: add multiline support to native sheet
+        description: normalizeDescriptionForNative(description),
+        content: [
+            {
+                type: 'BOTTOM_ACTIONS',
+                id: 'bottom-actions-0',
+                button,
+                secondaryButton,
+                link,
+            },
+        ],
+    }).then(({action, result}) => {
+        if (action === 'SUBMIT') {
+            const bottomActionsResult = result.find(({id}) => id === 'bottom-actions-0');
+            const pressedAction = bottomActionsResult?.selectedIds[0];
+            if (pressedAction === 'PRIMARY' || pressedAction === 'SECONDARY' || pressedAction === 'LINK') {
+                return {
+                    action: pressedAction,
+                };
+            }
+        }
+        return {
+            action: 'DISMISS',
+        };
+    });
+};
+
+export const showNativeSheet = <T extends SheetType>(
+    nativeSheetImplementation: NativeSheetImplementation,
+    sheetProps: SheetTypeWithProps<T>
+): Promise<SheetResultByType[T]> => {
+    let nativeResponse: Promise<SheetResultByType[T]>;
+    const {type, props} = sheetProps as SheetTypeWithPropsUnion;
+    switch (type) {
+        case 'INFO':
+            nativeResponse = showInfoNativeSheet(nativeSheetImplementation, props) as Promise<
+                SheetResultByType[T]
+            >;
+            break;
+        case 'ACTIONS_LIST':
+            nativeResponse = showActionsListNativeSheet(nativeSheetImplementation, props) as Promise<
+                SheetResultByType[T]
+            >;
+            break;
+        case 'RADIO_LIST':
+            nativeResponse = showRadioListNativeSheet(nativeSheetImplementation, props) as Promise<
+                SheetResultByType[T]
+            >;
+            break;
+        case 'ACTIONS':
+            nativeResponse = showActionsNativeSheet(nativeSheetImplementation, props) as Promise<
+                SheetResultByType[T]
+            >;
+            break;
+        default:
+            const unknownType: never = type;
+            throw new Error(`Unknown sheet type: ${unknownType}`);
+    }
+    return nativeResponse;
+};

package/src/sheet-radio-list.tsx

@@ -0,0 +1,118 @@
+'use client';
+import * as React from 'react';
+import Sheet, {SheetBody} from './sheet-common';
+import {useScreenSize, useTheme} from './hooks';
+import NegativeBox from './negative-box';
+import {ButtonPrimary} from './button';
+import {RadioGroup} from './radio-button';
+import {Row, RowList} from './list';
+import * as tokens from './text-tokens';
+import Tag from './tag';
+
+import type {TagType} from './tag';
+import type {DataAttributes} from './utils/types';
+
+type RadioListSheetProps = {
+    title?: string;
+    subtitle?: string;
+    description?: string | ReadonlyArray<string>;
+    items: ReadonlyArray<{
+        id: string;
+        tag?: {
+            type?: TagType;
+            text: string;
+        };
+        title?: string;
+        description?: string;
+        asset?: React.ReactNode;
+    }>;
+    selectedId?: string;
+    onClose?: () => void;
+    onSelect?: (id: string) => void;
+    dataAttributes?: DataAttributes;
+    button?: {
+        text: string;
+    };
+};
+
+const RadioListSheet = React.forwardRef<HTMLDivElement, RadioListSheetProps>(
+    ({title, subtitle, description, items, selectedId, onClose, onSelect, button, dataAttributes}, ref) => {
+        const [selectedItemId, setSelectedItemId] = React.useState(selectedId);
+        const hasSelectedRef = React.useRef(false);
+        const {isDesktopOrBigger} = useScreenSize();
+        const {texts, t} = useTheme();
+
+        return (
+            <Sheet
+                onClose={onClose}
+                ref={ref}
+                dataAttributes={{'component-name': 'RadioListSheet', ...dataAttributes}}
+            >
+                {({closeModal, modalTitleId}) => (
+                    <SheetBody
+                        title={title}
+                        subtitle={subtitle}
+                        description={description}
+                        modalTitleId={modalTitleId}
+                        button={
+                            isDesktopOrBigger ? (
+                                <ButtonPrimary
+                                    onPress={() => {
+                                        if (hasSelectedRef.current) {
+                                            onSelect?.(selectedItemId || '');
+                                        }
+                                        closeModal();
+                                    }}
+                                >
+                                    {button?.text || texts.sheetConfirmButton || t(tokens.sheetConfirmButton)}
+                                </ButtonPrimary>
+                            ) : undefined
+                        }
+                    >
+                        <NegativeBox>
+                            <RadioGroup
+                                aria-labelledby={modalTitleId}
+                                name="sheetselection"
+                                value={selectedItemId}
+                                onChange={(value) => {
+                                    setSelectedItemId(value);
+                                    hasSelectedRef.current = true;
+
+                                    // In desktop, the modal is closed with the ButtonPrimary
+                                    if (isDesktopOrBigger) {
+                                        return;
+                                    }
+
+                                    onSelect?.(value);
+                                    // Wait for radio animation to finish before closing the modal
+                                    setTimeout(() => {
+                                        closeModal();
+                                    }, 200);
+                                }}
+                            >
+                                <RowList>
+                                    {items.map((item) => (
+                                        <Row
+                                            key={item.id}
+                                            headline={
+                                                item.tag ? (
+                                                    <Tag type={item.tag.type}>{item.tag.text}</Tag>
+                                                ) : undefined
+                                            }
+                                            title={item.title ?? ''}
+                                            description={item.description}
+                                            asset={item.asset}
+                                            radioValue={item.id}
+                                        />
+                                    ))}
+                                </RowList>
+                            </RadioGroup>
+                        </NegativeBox>
+                    </SheetBody>
+                )}
+            </Sheet>
+        );
+    }
+);
+
+export default RadioListSheet;

package/src/sheet-root.tsx

@@ -0,0 +1,127 @@
+'use client';
+import * as React from 'react';
+
+import type {
+    NativeSheetImplementation,
+    SheetPromiseResolve,
+    SheetResultByType,
+    SheetType,
+    SheetTypeWithProps,
+    SheetTypeWithPropsUnion,
+} from './sheet-types';
+
+const SheetWeb = React.lazy(
+    () =>
+        import(
+            /* webpackChunkName: "sheet-web" */
+            './sheet-web'
+        )
+);
+
+let nativeSheetImplementation: NativeSheetImplementation | null = null;
+
+let configureSheet: ((sheetProps: SheetTypeWithPropsUnion) => void) | null = null;
+let resolveSheetPromise: SheetPromiseResolve | null = null;
+
+let isSheetOpen = false;
+export const showSheet = <T extends SheetType>(
+    sheetProps: SheetTypeWithProps<T>
+): Promise<SheetResultByType[T]> => {
+    const activeElement = document.activeElement as HTMLElement;
+
+    const focusTriggerElement = () => {
+        activeElement?.focus();
+    };
+
+    const webImplementation = () => {
+        if (!configureSheet) {
+            return Promise.reject(
+                new Error('Tried to show a Sheet but the SheetRoot component was not mounted')
+            );
+        }
+
+        if (isSheetOpen) {
+            return Promise.reject(new Error('Tried to show a Sheet but there is already one open'));
+        }
+
+        isSheetOpen = true;
+        configureSheet(sheetProps as SheetTypeWithPropsUnion);
+
+        const sheetPromise = new Promise((resolve) => {
+            resolveSheetPromise = resolve;
+        });
+
+        sheetPromise.finally(() => {
+            isSheetOpen = false;
+            focusTriggerElement();
+        });
+
+        return sheetPromise as Promise<SheetResultByType[T]>;
+    };
+
+    if (nativeSheetImplementation) {
+        const impl = nativeSheetImplementation;
+        return import(/* webpackChunkName: "sheet-native" */ './sheet-native')
+            .then(({showNativeSheet}) => {
+                return showNativeSheet(impl, sheetProps).finally(() => {
+                    focusTriggerElement();
+                });
+            })
+            .catch((error) => {
+                if (error.code === '400') {
+                    // fallback to web implementation if native implementation doesn't support the sheet type
+                    return webImplementation();
+                } else {
+                    throw error;
+                }
+            });
+    } else {
+        return webImplementation();
+    }
+};
+
+type Props = {
+    nativeImplementation?: NativeSheetImplementation;
+    children?: React.ReactNode;
+};
+
+export const SheetRoot = (props: Props): JSX.Element => {
+    const [sheetProps, setSheetProps] = React.useState<SheetTypeWithPropsUnion | null>(null);
+
+    React.useEffect(() => {
+        if (props.nativeImplementation) {
+            nativeSheetImplementation = props.nativeImplementation;
+            return () => {
+                nativeSheetImplementation = null;
+            };
+        }
+    }, [props.nativeImplementation]);
+
+    React.useEffect(() => {
+        configureSheet = <T extends SheetType>(newSheetProps: SheetTypeWithProps<T>) => {
+            setSheetProps(newSheetProps as SheetTypeWithPropsUnion);
+        };
+        return () => {
+            configureSheet = null;
+        };
+    }, []);
+
+    return (
+        <>
+            {props.children}
+            {sheetProps && (
+                <React.Suspense fallback={null}>
+                    <SheetWeb
+                        sheetProps={sheetProps}
+                        onResolve={(result) => {
+                            setSheetProps(null);
+                            resolveSheetPromise?.(result);
+                        }}
+                    />
+                </React.Suspense>
+            )}
+        </>
+    );
+};
+
+export default SheetRoot;

package/src/sheet-types.tsx

@@ -0,0 +1,94 @@
+export type NativeSheetImplementation = (typeof import('@tef-novum/webview-bridge'))['bottomSheet'];
+
+import type {TagType} from './tag';
+import type {ExclusifyUnion, Id} from './utils/utility-types';
+
+type InfoIcon = ExclusifyUnion<
+    | {
+          type: 'small' | 'regular';
+          url: string;
+          urlDark?: string;
+      }
+    | {type: 'bullet'}
+>;
+
+type SheetProps<T> = Id<
+    {
+        title?: string;
+        subtitle?: string;
+        description?: string | Array<string>;
+    } & T
+>;
+
+export type SheetPropsByType = {
+    RADIO_LIST: SheetProps<{
+        selectedId?: string;
+        items: Array<{
+            id: string;
+            tag?: {
+                type?: TagType;
+                text: string;
+            };
+            title?: string;
+            description?: string;
+            icon?: {
+                size?: 'small' | 'large';
+                url: string;
+                urlDark?: string;
+            };
+        }>;
+    }>;
+    ACTIONS_LIST: SheetProps<{
+        items: Array<{
+            id: string;
+            title: string;
+            style?: 'normal' | 'destructive';
+            icon?: {
+                url: string;
+                urlDark?: string;
+            };
+        }>;
+    }>;
+    INFO: SheetProps<{
+        items: Array<{
+            id: string;
+            title: string;
+            description?: string;
+            icon: InfoIcon;
+        }>;
+        button?: {
+            text: string;
+        };
+    }>;
+    ACTIONS: SheetProps<{
+        button: {
+            text: string;
+        };
+        secondaryButton?: {
+            text: string;
+        };
+        link?: {
+            text: string;
+            withChevron?: boolean;
+        };
+    }>;
+};
+
+export type SheetType = keyof SheetPropsByType;
+
+export type SheetResultByType = {
+    RADIO_LIST: {action: 'SUBMIT'; selectedId: string} | {action: 'DISMISS'};
+    ACTIONS_LIST: {action: 'SUBMIT'; selectedId: string} | {action: 'DISMISS'};
+    INFO: {action: 'DISMISS'};
+    ACTIONS: {action: 'PRIMARY' | 'SECONDARY' | 'LINK' | 'DISMISS'};
+};
+
+export type SheetTypeWithProps<T extends SheetType> = Id<{type: T; props: SheetPropsByType[T]}>;
+
+export type SheetTypeWithPropsUnion = {
+    [T in SheetType]: SheetTypeWithProps<T>;
+}[SheetType];
+
+export type SheetPromiseResolve = <T>(
+    value: T extends SheetType ? SheetResultByType[T] : 'You must provide a type parameter'
+) => void;

package/src/sheet-web.tsx

@@ -0,0 +1,140 @@
+'use client';
+import * as React from 'react';
+import {useTheme} from './hooks';
+import Image from './image';
+
+import type {SheetPromiseResolve, SheetTypeWithPropsUnion} from './sheet-types';
+
+const ActionsSheet = React.lazy(
+    () =>
+        import(
+            /* webpackChunkName: "sheet-actions" */
+            './sheet-actions'
+        )
+);
+
+const InfoSheet = React.lazy(
+    () =>
+        import(
+            /* webpackChunkName: "sheet-info" */
+            './sheet-info'
+        )
+);
+const ActionsListSheet = React.lazy(
+    () =>
+        import(
+            /* webpackChunkName: "sheet-action-list" */
+            './sheet-actions-list'
+        )
+);
+
+const RadioListSheet = React.lazy(
+    () =>
+        import(
+            /* webpackChunkName: "sheet-radio-list" */
+            './sheet-radio-list'
+        )
+);
+
+type SheetWebProps = {
+    sheetProps: SheetTypeWithPropsUnion;
+    onResolve: SheetPromiseResolve;
+};
+
+const SheetWeb = ({sheetProps, onResolve}: SheetWebProps): JSX.Element => {
+    const {isDarkMode} = useTheme();
+    const selectionRef = React.useRef<string | null>(null);
+
+    const handleSelect = (id: string): void => {
+        selectionRef.current = id;
+    };
+
+    const handleClose = () => {
+        if (!onResolve) {
+            throw new Error('onResolve handler is not set');
+        }
+        switch (sheetProps.type) {
+            case 'INFO':
+                onResolve<'INFO'>({action: 'DISMISS'});
+                break;
+            case 'ACTIONS_LIST':
+                if (selectionRef.current) {
+                    onResolve<'ACTIONS_LIST'>({
+                        action: 'SUBMIT',
+                        selectedId: selectionRef.current,
+                    });
+                } else {
+                    onResolve<'ACTIONS_LIST'>({action: 'DISMISS'});
+                }
+                break;
+            case 'RADIO_LIST':
+                if (selectionRef.current) {
+                    onResolve<'RADIO_LIST'>({
+                        action: 'SUBMIT',
+                        selectedId: selectionRef.current,
+                    });
+                } else {
+                    onResolve<'RADIO_LIST'>({action: 'DISMISS'});
+                }
+                break;
+            case 'ACTIONS':
+                if (
+                    selectionRef.current === 'PRIMARY' ||
+                    selectionRef.current === 'SECONDARY' ||
+                    selectionRef.current === 'LINK'
+                ) {
+                    onResolve<'ACTIONS'>({action: selectionRef.current});
+                } else {
+                    onResolve<'ACTIONS'>({action: 'DISMISS'});
+                }
+                break;
+            default:
+                // @ts-expect-error sheetProps is never
+                throw new Error(`Unknown sheet type: ${sheetProps.type}`);
+        }
+        selectionRef.current = null;
+    };
+
+    switch (sheetProps.type) {
+        case 'INFO':
+            return <InfoSheet {...sheetProps.props} onClose={handleClose} />;
+
+        case 'ACTIONS_LIST':
+            return <ActionsListSheet {...sheetProps.props} onClose={handleClose} onSelect={handleSelect} />;
+
+        case 'RADIO_LIST':
+            return (
+                <RadioListSheet
+                    {...sheetProps.props}
+                    items={sheetProps.props.items.map((item) => ({
+                        ...item,
+                        asset: item.icon && (
+                            <Image
+                                circular
+                                src={isDarkMode && item.icon.urlDark ? item.icon.urlDark : item.icon.url}
+                                width={item.icon.size === 'small' ? 24 : 40}
+                            />
+                        ),
+                    }))}
+                    onClose={handleClose}
+                    onSelect={handleSelect}
+                />
+            );
+
+        case 'ACTIONS':
+            return (
+                <ActionsSheet
+                    {...sheetProps.props}
+                    buttonLink={sheetProps.props.link}
+                    onClose={handleClose}
+                    onPressButton={handleSelect}
+                />
+            );
+
+        default:
+            // @ts-expect-error sheetProps is never. This switch is exhaustive.
+            throw new Error(`Unknown sheet type: ${sheetProps.type}`);
+    }
+};
+
+export default SheetWeb;

package/src/skeleton-base.tsx

@@ -0,0 +1,38 @@
+'use client';
+import {useThemeVariant} from './theme-variant-context';
+import * as React from 'react';
+import classnames from 'classnames';
+import * as styles from './skeletons.css';
+import {vars} from './skins/skin-contract.css';
+
+type SkeletonBaseProps = {
+    width?: string | number;
+    height?: string | number;
+    radius?: string | number;
+    className?: string;
+    noBorderRadius?: boolean;
+};
+
+const SkeletonBase = ({
+    width = '100%',
+    height = 8,
+    radius = vars.borderRadii.container,
+    className,
+    noBorderRadius = false,
+}: SkeletonBaseProps): JSX.Element => {
+    const variant = useThemeVariant();
+
+    return (
+        <div
+            className={classnames(className, styles.background[variant])}
+            style={{
+                borderRadius: noBorderRadius ? 0 : radius,
+                width,
+                height,
+            }}
+            aria-hidden
+        />
+    );
+};
+
+export default SkeletonBase;