@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/theme-context-provider.tsx

@@ -1,370 +0,0 @@
-'use client';
-import * as React from 'react';
-import {assignInlineVars} from '@vanilla-extract/dynamic';
-import {DialogRoot} from './dialog-context';
-import ScreenSizeContextProvider from './screen-size-context-provider';
-import {dimensions, getMisticaLinkComponent, NAVBAR_HEIGHT_MOBILE} from './theme';
-import {getPlatform, isInsideNovumNativeApp} from './utils/platform';
-import ThemeContext from './theme-context';
-import {useIsomorphicLayoutEffect} from './hooks';
-import TabFocus from './tab-focus';
-import ModalContextProvider from './modal-context-provider';
-import TooltipContextProvider from './tooltip-context-provider';
-import {DocumentVisibilityProvider} from './utils/document-visibility';
-import {AspectRatioSupportProvider} from './utils/aspect-ratio-support';
-import {TrackingConfig} from './utils/analytics';
-import {vars} from './skins/skin-contract.css';
-import {fromHexToRgb} from './utils/color';
-import {
-    defaultBorderRadiiConfig,
-    defaultSpacing,
-    defaultTextPresetsConfig,
-    defaultThemeVariantsConfig,
-} from './skins/defaults';
-import {isClientSide} from './utils/environment';
-import {PACKAGE_VERSION} from './package-version';
-import {SnackbarRoot} from './snackbar-context';
-import {mapToWeight} from './text';
-import * as mq from './media-queries.css';
-import * as styles from './theme-context.css';
-import {localeToLanguage} from './utils/locale';
-
-import type {Colors, TextPresetsConfig} from './skins/types';
-import type {Theme, ThemeConfig} from './theme';
-import type {TextToken} from './text-tokens';
-
-// Check there is only one version of mistica installed in the page.
-if (process.env.NODE_ENV !== 'production' && isClientSide()) {
-    // @ts-expect-error __mistica_version__ does not exist in window
-    if (window['__mistica_version__'] && window['__mistica_version__'] !== PACKAGE_VERSION) {
-        throw new Error(`There is more than one version of @telefonica/mistica running on the same page`);
-    } else {
-        // @ts-expect-error __mistica_version__ does not exist in window
-        window['__mistica_version__'] = PACKAGE_VERSION;
-    }
-}
-
-const darkModeMedia = '(prefers-color-scheme: dark)';
-export const useIsOsDarkModeEnabled = (): boolean => {
-    const [isDarkMode, setIsDarkMode] = React.useState(false);
-
-    useIsomorphicLayoutEffect(() => {
-        if (!window.matchMedia) {
-            return;
-        }
-
-        const mq = window.matchMedia(darkModeMedia);
-
-        const listener = () => {
-            setIsDarkMode(mq.matches);
-        };
-
-        mq.addEventListener('change', listener);
-        listener();
-
-        return () => {
-            mq.removeEventListener('change', listener);
-        };
-    }, []);
-
-    return isDarkMode;
-};
-
-type Props = {
-    theme: ThemeConfig;
-    as?: string;
-    withoutStyles?: boolean;
-    children?: React.ReactNode;
-};
-
-const useDefaultHrefDecorator = () => {
-    return (href: string) => href;
-};
-
-const sanitizeDimensions = (dimensions: ThemeConfig['dimensions']): Partial<Theme['dimensions']> => {
-    return {
-        headerMobileHeight:
-            dimensions?.headerMobileHeight === 'mistica'
-                ? NAVBAR_HEIGHT_MOBILE
-                : dimensions?.headerMobileHeight,
-    };
-};
-
-const SetupStackingContext = () => {
-    const ref = React.useRef<HTMLDivElement>(null);
-    const [hasContentIsolation, setHasContentIsolation] = React.useState(false);
-    const [isFirstRender, setIsFirstRender] = React.useState(true);
-
-    useIsomorphicLayoutEffect(() => {
-        if (isFirstRender) {
-            // Given that we don't render the extra div in server side, we skip creating it in the first client
-            // render in order to avoid hydration issues
-            setIsFirstRender(false);
-        } else {
-            // Set isolation: isolate to the parent of the provider. This way, we avoid content inside portals
-            // from being rendered under content that is inside the provider (in case it has z-index defined).
-            const root = ref.current?.parentElement;
-            if (root) {
-                root.style.isolation = 'isolate';
-                setHasContentIsolation(true);
-            }
-        }
-    }, [isFirstRender]);
-
-    // Don't render the div in server side, because effects are not executed in there and it makes the div useless
-    if (hasContentIsolation || !isClientSide() || isFirstRender) {
-        return null;
-    }
-    return <div ref={ref} style={{display: 'none'}} />;
-};
-
-type TextPresetsVars = {
-    [key in keyof TextPresetsConfig]: {
-        weight: string;
-        size: string;
-        lineHeight: string;
-    };
-};
-
-// Define the same colors in css variables as rgb components, to allow applying alpha aftherwards. See utils/color.tsx
-const makeRawColors = (colors: Colors): Colors =>
-    Object.fromEntries(
-        Object.entries(colors).map(([colorName, colorValue]) => {
-            let rawColorValue = '';
-            if (colorValue.startsWith('#')) {
-                const [r, g, b] = fromHexToRgb(colorValue);
-                rawColorValue = `${r}, ${g}, ${b}`;
-            }
-            return [colorName, rawColorValue];
-        })
-    ) as Colors;
-
-const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Props): JSX.Element => {
-    const isOsDarkModeEnabled = useIsOsDarkModeEnabled();
-
-    const colorScheme = theme.colorScheme ?? 'auto';
-    const lightColors: Colors = theme.skin.colors;
-    const darkColors: Colors = {...theme.skin.colors, ...theme.skin.darkModeColors};
-    const isDarkModeEnabled = (colorScheme === 'auto' && isOsDarkModeEnabled) || colorScheme === 'dark';
-    const colors: Colors = isDarkModeEnabled ? darkColors : lightColors;
-
-    const language = localeToLanguage(theme.i18n.locale);
-
-    const translate = React.useCallback(
-        (token: TextToken | string, ...params: Array<string | number>): string => {
-            const text = typeof token === 'string' ? token : token[language] || token.en;
-            if (!params.length) {
-                return text;
-            }
-            // replace token parameters: 1$s, 2$s, 3$s, etc.
-            return text.replace(/\d+\$s/g, (substr) => {
-                return String(params[parseInt(substr) - 1] ?? substr);
-            });
-        },
-        [language]
-    );
-
-    const contextTheme = React.useMemo((): Theme => {
-        const platformOverrides = {
-            platform: getPlatform(),
-            insideNovumNativeApp: isInsideNovumNativeApp(),
-            ...theme.platformOverrides,
-        };
-
-        const textTokenValues = Object.entries(defaultTextPresetsConfig).map(([token, defaultConfig]) => {
-            return {
-                [token]: {...defaultConfig, ...theme.skin.textPresets?.[token as keyof TextPresetsConfig]},
-            };
-        });
-
-        const textPresets = Object.assign({}, ...textTokenValues) as TextPresetsConfig;
-
-        return {
-            skinName: theme.skin.name,
-            i18n: {
-                ...theme.i18n,
-            },
-            platformOverrides,
-            texts: {
-                ...theme.texts,
-            },
-            analytics: {
-                logEvent: () => Promise.resolve(),
-                eventFormat: 'universal-analytics',
-                ...theme.analytics,
-            },
-            colorValues: colors,
-            dimensions: {
-                ...dimensions,
-                ...sanitizeDimensions(theme.dimensions),
-            },
-            borderRadii: theme.skin.borderRadii ?? defaultBorderRadiiConfig,
-            textPresets,
-            spacing: theme.skin.spacing ?? defaultSpacing,
-            themeVariants: theme.skin.themeVariants ?? defaultThemeVariantsConfig,
-            Link: getMisticaLinkComponent(theme.Link),
-            isDarkMode: isDarkModeEnabled,
-            isIos: getPlatform(platformOverrides) === 'ios',
-            useHrefDecorator: theme.useHrefDecorator ?? useDefaultHrefDecorator,
-            t: translate,
-            preventCopyInFormFields: theme.preventCopyInFormFields ?? false,
-        };
-    }, [colors, theme, isDarkModeEnabled, translate]);
-
-    const textPresetsVars = React.useMemo(() => {
-        // Get an object mapping textPresets tokens to objects containing the token's weight
-        // For example, {title1: {weight: '700'}}
-        const tokenValues = Object.entries(contextTheme.textPresets).map(([token, config]) => {
-            // Map light/regular/medium/bold to valid css fontWeight values
-            return {
-                [token]: {
-                    ...(config.weight && {weight: String(mapToWeight[config.weight])}),
-                    ...(config.size && {size: `${config.size.desktop}px`}),
-                    ...(config.lineHeight && {lineHeight: `${config.lineHeight.desktop}px`}),
-                },
-            };
-        });
-
-        return Object.assign({}, ...tokenValues) as TextPresetsVars;
-    }, [contextTheme]);
-
-    const textPresetsResponsiveVars = React.useMemo(() => {
-        const tokenValues = Object.entries(contextTheme.textPresets).map(([token, config]) => {
-            return {
-                [token]: {
-                    ...(config.weight && {weight: String(mapToWeight[config.weight])}),
-                    // Use mobile values for size/lineHeight
-                    ...(config.size && {size: `${config.size.mobile}px`}),
-                    ...(config.lineHeight && {lineHeight: `${config.lineHeight.mobile}px`}),
-                },
-            };
-        });
-
-        return Object.assign({}, ...tokenValues) as TextPresetsVars;
-    }, [contextTheme]);
-
-    const spacingDesktopVars = React.useMemo(() => {
-        const tokenValues = Object.entries(contextTheme.spacing).map(([token, values]) => {
-            return {
-                [token]: {
-                    ...('top' in values && {top: `${values.top.desktop}px`}),
-                    ...('right' in values && {right: `${values.right.desktop}px`}),
-                    ...('bottom' in values && {bottom: `${values.bottom.desktop}px`}),
-                    ...('left' in values && {left: `${values.left.desktop}px`}),
-                },
-            };
-        });
-        return Object.assign({}, ...tokenValues) as typeof vars.spacing;
-    }, [contextTheme]);
-
-    const spacingMobileVars = React.useMemo(() => {
-        const tokenValues = Object.entries(contextTheme.spacing).map(([token, values]) => {
-            return {
-                [token]: {
-                    ...('top' in values && {top: `${values.top.mobile}px`}),
-                    ...('right' in values && {right: `${values.right.mobile}px`}),
-                    ...('bottom' in values && {bottom: `${values.bottom.mobile}px`}),
-                    ...('left' in values && {left: `${values.left.mobile}px`}),
-                },
-            };
-        });
-        return Object.assign({}, ...tokenValues) as typeof vars.spacing;
-    }, [contextTheme]);
-
-    const renderStyles = (selector: string) => {
-        if (withoutStyles || (process.env.NODE_ENV === 'test' && !process.env.SSR_TEST)) {
-            return null;
-        }
-
-        const lightRawColors = makeRawColors(lightColors);
-        const darkRawColors = makeRawColors(darkColors);
-
-        const [defaultColors, defaultRawColors] =
-            colorScheme === 'auto' || colorScheme === 'light'
-                ? [lightColors, lightRawColors]
-                : [darkColors, darkRawColors];
-
-        const darkModeMediaQuery =
-            colorScheme === 'auto'
-                ? `@media (prefers-color-scheme: dark) {
-                    ${selector} {
-                        ${assignInlineVars(vars.colors, darkColors)};
-                        ${assignInlineVars(vars.rawColors, darkRawColors)}
-                    }
-                }`
-                : '';
-
-        return (
-            <style>
-                {`
-                ${selector} {
-                    ${assignInlineVars(vars, {
-                        colors: defaultColors,
-                        rawColors: defaultRawColors,
-                        textPresets: textPresetsVars,
-                        borderRadii: theme.skin.borderRadii ?? defaultBorderRadiiConfig,
-                        spacing: spacingDesktopVars,
-                    })}
-                }
-                @media ${mq.tabletOrSmaller} {
-                    ${selector} {
-                        ${assignInlineVars(vars.textPresets, textPresetsResponsiveVars)}
-                        ${assignInlineVars(vars.spacing, spacingMobileVars)}
-                    }
-                }
-                ${darkModeMediaQuery}
-            `}
-            </style>
-        );
-    };
-
-    return (
-        <>
-            <TabFocus disabled={!theme.enableTabFocus}>
-                <ModalContextProvider>
-                    <TooltipContextProvider>
-                        <ThemeContext.Provider value={contextTheme}>
-                            <TrackingConfig eventFormat={contextTheme.analytics.eventFormat}>
-                                <AspectRatioSupportProvider>
-                                    <DocumentVisibilityProvider>
-                                        <ScreenSizeContextProvider>
-                                            <DialogRoot>
-                                                <SnackbarRoot>
-                                                    {as ? (
-                                                        <>
-                                                            {renderStyles(`.${styles.themeVars}`)}
-                                                            {React.createElement(
-                                                                as,
-                                                                {
-                                                                    style: {
-                                                                        isolation: 'isolate',
-                                                                    },
-                                                                    className: withoutStyles
-                                                                        ? undefined
-                                                                        : styles.themeVars,
-                                                                },
-                                                                children
-                                                            )}
-                                                        </>
-                                                    ) : (
-                                                        <>
-                                                            {renderStyles(':root')}
-                                                            {children}
-                                                        </>
-                                                    )}
-                                                </SnackbarRoot>
-                                            </DialogRoot>
-                                        </ScreenSizeContextProvider>
-                                    </DocumentVisibilityProvider>
-                                </AspectRatioSupportProvider>
-                            </TrackingConfig>
-                        </ThemeContext.Provider>
-                    </TooltipContextProvider>
-                </ModalContextProvider>
-            </TabFocus>
-            {!as && <SetupStackingContext />}
-        </>
-    );
-};
-
-export default ThemeContextProvider;

package/src/theme-context.css.ts

@@ -1,3 +0,0 @@
-import {style} from '@vanilla-extract/css';
-
-export const themeVars = style({});

package/src/theme-context.tsx

@@ -1,8 +0,0 @@
-'use client';
-import * as React from 'react';
-
-import type {Theme} from './theme';
-
-const ThemeContext = React.createContext<Theme | null>(null);
-
-export default ThemeContext;

package/src/theme-variant-context.tsx

@@ -1,51 +0,0 @@
-'use client';
-import * as React from 'react';
-
-export type NonDeprecatedVariant = 'default' | 'brand' | 'negative' | 'alternative' | 'media';
-
-export type Variant =
-    | 'default'
-    | 'brand'
-    | 'negative'
-    | 'alternative'
-    | 'media'
-    /** @deprecated use 'brand' instead */
-    | 'inverse';
-
-export const normalizeVariant = <T extends Variant>(variant: T): T extends 'inverse' ? 'brand' : T => {
-    if (variant === 'inverse') {
-        return 'brand' as T extends 'inverse' ? 'brand' : T;
-    }
-    return variant as T extends 'inverse' ? 'brand' : T;
-};
-
-const ThemeVariantContext = React.createContext<Variant>('default');
-
-type ThemeVariantProps = {
-    /** @deprecated Use variant = 'brand' instead */
-    isInverse?: boolean;
-    variant?: Variant;
-    children: React.ReactNode;
-};
-
-export const ThemeVariant = ({isInverse, variant, children}: ThemeVariantProps): JSX.Element => (
-    <ThemeVariantContext.Provider value={variant ?? (isInverse ? 'brand' : 'default')}>
-        {children}
-    </ThemeVariantContext.Provider>
-);
-
-export const useThemeVariant = (): NonDeprecatedVariant =>
-    normalizeVariant(React.useContext(ThemeVariantContext));
-
-/**
- * @deprecated use `useThemeVariant` instead
- */
-export const useIsInverseVariant = (): boolean => useThemeVariant() === 'brand';
-
-/**
- * @deprecated use `useThemeVariant` instead
- */
-export const useIsInverseOrMediaVariant = (): boolean => {
-    const variant = useThemeVariant();
-    return variant === 'brand' || variant === 'media';
-};

package/src/theme.tsx

@@ -1,184 +0,0 @@
-import * as React from 'react';
-
-import type {RegionCode} from './utils/region-code';
-import type {Locale} from './utils/locale';
-import type {
-    BorderRadiiConfig,
-    Colors,
-    Skin,
-    SkinName,
-    SpacingConfig,
-    TextPresetsConfig,
-    ThemeVariantsConfig,
-} from './skins/types';
-import type {TrackingEvent} from './utils/types';
-import type {Dictionary, TextToken} from './text-tokens';
-
-export const NAVBAR_HEIGHT_MOBILE = 56;
-export const NAVBAR_HEIGHT_DESKTOP = 80;
-export const NAVBAR_HEIGHT_DESKTOP_LARGE = 2 * NAVBAR_HEIGHT_DESKTOP;
-
-export const dimensions = {
-    headerMobileHeight: NAVBAR_HEIGHT_MOBILE,
-    headerDesktopHeight: NAVBAR_HEIGHT_DESKTOP,
-};
-
-/**
- * https://reactrouter.com/en/main/components/link
- * https://nextjs.org/docs/app/api-reference/components/link
- */
-type LinkComponent = React.ComponentType<{
-    style?: React.CSSProperties;
-    className?: string;
-    'aria-label'?: string;
-    disabled?: boolean;
-    role?: string;
-    'data-testid'?: string;
-    'aria-checked'?: React.AnchorHTMLAttributes<HTMLAnchorElement>['aria-checked'];
-    'aria-controls'?: string;
-    'aria-expanded'?: React.AnchorHTMLAttributes<HTMLAnchorElement>['aria-expanded'];
-    'aria-hidden'?: React.AnchorHTMLAttributes<HTMLAnchorElement>['aria-hidden'];
-    'aria-selected'?: React.AnchorHTMLAttributes<HTMLAnchorElement>['aria-selected'];
-    tabIndex?: number;
-    innerRef?: React.RefObject<HTMLAnchorElement>;
-    to:
-        | string
-        | {
-              pathname?: string;
-              search?: string;
-              state?: unknown;
-              hash?: string;
-              key?: string;
-          };
-    replace?: boolean;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement>;
-    children: React.ReactNode;
-    target?: string;
-}>;
-
-const AnchorLink: LinkComponent = ({to, innerRef, ...props}) => (
-    <a ref={innerRef} href={typeof to === 'string' ? to : to?.pathname} {...props}>
-        {props.children}
-    </a>
-);
-
-const getReactRouter5Link = (ReactRouterLink: React.ComponentType<any>): LinkComponent => ReactRouterLink;
-
-const getReactRouter6Link =
-    (ReactRouterLink: React.ComponentType<any>): LinkComponent =>
-    ({innerRef, ...props}) => <ReactRouterLink ref={innerRef} {...props} />;
-
-const getNext12Link =
-    (NextLink: React.ComponentType<any>): LinkComponent =>
-    ({to, innerRef, children, ...props}) => (
-        <NextLink href={to}>
-            <a ref={innerRef} {...props}>
-                {children}
-            </a>
-        </NextLink>
-    );
-
-const getNext13Or14Link =
-    (NextLink: React.ComponentType<any>): LinkComponent =>
-    ({to, innerRef, children, ...props}) => (
-        <NextLink href={to} ref={innerRef} {...props}>
-            {children}
-        </NextLink>
-    );
-
-export const getMisticaLinkComponent = (Link?: ThemeConfig['Link']): LinkComponent => {
-    if (!Link) {
-        return AnchorLink;
-    }
-    // the $$typeof check is because components like forwardRefs are objects
-    // see https://github.com/facebook/react/blob/main/packages/shared/isValidElementType.js
-    if (typeof Link === 'function' || (Link as any).$$typeof) {
-        return Link as LinkComponent;
-    }
-    switch (Link.type) {
-        case 'ReactRouter5':
-            // webapp, flow-frontend
-            return getReactRouter5Link(Link.Component);
-        case 'ReactRouter6':
-            // nt_core
-            return getReactRouter6Link(Link.Component);
-        case 'Next12':
-            // zeus-web
-            return getNext12Link(Link.Component);
-        case 'Next13':
-        case 'Next14':
-            // hello-world-web, global-checkout-webview
-            return getNext13Or14Link(Link.Component);
-        default:
-            const exhaustiveCheck: never = Link.type;
-            throw new Error(`Invalid Link type: ${exhaustiveCheck}`);
-    }
-};
-
-export type ColorScheme = 'dark' | 'light' | 'auto';
-export type EventFormat = 'universal-analytics' | 'google-analytics-4';
-
-// This is the type expected by ThemeContextProvider theme prop.
-// This config is provided by the user of the lib
-export type ThemeConfig = Readonly<{
-    skin: Readonly<Skin>;
-    colorScheme?: ColorScheme; // light by default. TODO: Change to auto by default in next major version
-    i18n: Readonly<{
-        locale: Locale;
-        phoneNumberFormattingRegionCode: RegionCode;
-    }>;
-    platformOverrides?: Readonly<{
-        platform?: 'ios' | 'android' | 'desktop';
-        insideNovumNativeApp?: boolean;
-        userAgent?: string;
-    }>;
-    texts?: Partial<Dictionary>;
-    analytics?: Readonly<{
-        logEvent: (trackingEvent: TrackingEvent) => Promise<void>;
-        eventFormat?: EventFormat;
-    }>;
-    dimensions?: Readonly<{headerMobileHeight: number | 'mistica'}>;
-    Link?:
-        | LinkComponent
-        | {
-              type: 'ReactRouter5' | 'ReactRouter6' | 'Next12' | 'Next13' | 'Next14';
-              Component: React.ComponentType<any>;
-          };
-    useHrefDecorator?: () => (href: string) => string;
-    /** @deprecated Better use default browser behavior for :focus-visible */
-    enableTabFocus?: boolean;
-    preventCopyInFormFields?: boolean;
-}>;
-
-// This is the lib INTERNAL context
-export type Theme = {
-    skinName: SkinName;
-    i18n: {
-        locale: Locale;
-        phoneNumberFormattingRegionCode: RegionCode;
-    };
-    platformOverrides: {
-        platform?: 'ios' | 'android' | 'desktop';
-        insideNovumNativeApp?: boolean;
-        userAgent?: string;
-    };
-    texts: Partial<Dictionary>;
-    analytics: {
-        logEvent: (trackingEvent: TrackingEvent) => Promise<void>;
-        eventFormat: EventFormat;
-    };
-    // TODO: rename this props to navigationBarHeight (or something similar) in next major
-    dimensions: {headerMobileHeight: number; headerDesktopHeight: number};
-    colorValues: Colors;
-    borderRadii: BorderRadiiConfig;
-    textPresets: TextPresetsConfig;
-    spacing: SpacingConfig;
-    themeVariants: ThemeVariantsConfig;
-    Link: LinkComponent;
-    isDarkMode: boolean;
-    isIos: boolean;
-    useHrefDecorator: () => (href: string) => string;
-    t: (token: TextToken | string, ...params: Array<string | number>) => string;
-    preventCopyInFormFields: boolean;
-};