@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/sheet-native.tsx

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

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

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

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

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

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