@telefonica/mistica 16.60.0 → 16.61.0

package/src/theme-context-provider.tsx

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

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

package/src/theme-context.tsx

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

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

@@ -0,0 +1,184 @@
+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;
+};