@telefonica/mistica 16.62.0-beta.1 → 16.63.0

package/src/community/ai-card.css.ts

@@ -0,0 +1,135 @@
+import {createVar, globalStyle, style, keyframes} from '@vanilla-extract/css';
+import {sprinkles} from '../sprinkles.css';
+import {vars as skinVars} from '../skins/skin-contract.css';
+import * as mq from '../media-queries.css';
+
+const borderColorVar = createVar();
+
+export const vars = {borderColorVar};
+
+const fill = (color: string) => `linear-gradient(${color}, ${color}) padding-box`;
+const borderLayer = `${borderColorVar} border-box`;
+
+const containerBackground = (overlayColor: string) =>
+    `${fill(overlayColor)}, ${fill(skinVars.colors.backgroundContainer)}, ${borderLayer}`;
+
+export const container = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+        padding: 16,
+        width: '100%',
+    }),
+    {
+        position: 'relative',
+        maxWidth: '100%',
+        minWidth: 288,
+        minHeight: 64,
+        gap: 8,
+        borderRadius: skinVars.borderRadii.container,
+        border: '1px solid transparent',
+        boxSizing: 'border-box',
+        textAlign: 'left',
+        vars: {
+            [borderColorVar]: `linear-gradient(${skinVars.colors.border}, ${skinVars.colors.border})`,
+        },
+        background: containerBackground('transparent'),
+    },
+]);
+
+export const containerInteractive = style({
+    transition: 'background 120ms ease',
+    ':focus-visible': {
+        outline: `2px solid ${skinVars.colors.borderSelected}`,
+        outlineOffset: 2,
+    },
+    ':active': {
+        background: containerBackground(skinVars.colors.backgroundContainerPressed),
+    },
+    '@media': {
+        [mq.supportsHover]: {
+            ':hover': {
+                background: containerBackground(skinVars.colors.backgroundContainerHover),
+            },
+            ':active': {
+                background: containerBackground(skinVars.colors.backgroundContainerPressed),
+            },
+        },
+        [mq.touchableOnly]: {
+            transition: 'none',
+        },
+    },
+});
+
+export const textLine = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+    }),
+    {
+        flex: '1 1 auto',
+        minWidth: 0,
+        maxWidth: '100%',
+    },
+]);
+
+export const slot = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }),
+    {
+        flex: '0 0 auto',
+        lineHeight: 0,
+    },
+]);
+
+globalStyle(`${slot} > svg`, {
+    display: 'block',
+});
+
+export const textWrapper = style({
+    display: 'grid',
+    width: '100%',
+    alignItems: 'center',
+    alignContent: 'center',
+});
+
+const textContent = style({
+    gridArea: '1 / 1',
+    whiteSpace: 'normal',
+    overflowWrap: 'anywhere',
+    wordBreak: 'break-word',
+});
+
+export const ghost = style([
+    textContent,
+    {
+        visibility: 'hidden',
+        pointerEvents: 'none',
+        userSelect: 'none',
+    },
+]);
+
+export const visibleContent = textContent;
+
+const caretBlink = keyframes({
+    '0%': {opacity: 1},
+    '50%': {opacity: 0},
+});
+
+export const caret = style({
+    color: skinVars.colors.textBrand,
+});
+
+export const caretHidden = style({
+    visibility: 'hidden',
+});
+
+export const caretBlinking = style({
+    animationName: caretBlink,
+    animationDuration: '1060ms',
+    animationTimingFunction: 'step-end',
+    animationIterationCount: 'infinite',
+});

package/src/community/ai-card.tsx

@@ -0,0 +1,231 @@
+'use client';
+import * as React from 'react';
+import classnames from 'classnames';
+import {BaseTouchable} from '../touchable';
+import {Text3} from '../text';
+import {vars} from '../skins/skin-contract.css';
+import {useIsInViewport} from '../hooks';
+import {isClientSide} from '../utils/environment';
+import {applyCssVars} from '../utils/css';
+import * as styles from './ai-card.css';
+
+import type {TouchableComponentProps} from '../touchable';
+
+type CommonProps = {
+    /** Static text shown before the animated words. */
+    text: string;
+    /** Words to animate in sequence. typed, held, then erased one by one. Maximum of 4 words. */
+    words?: ReadonlyArray<string>;
+    /** Number of characters to keep at the start of each word during deletion. Omit to erase fully. */
+    deleteChars?: number;
+    /** Wraps the text line after this many characters. */
+    lineBreakAtChars?: number;
+    /** Border color. Accepts any CSS color or gradient string. Defaults to the skin border token. */
+    borderColor?: string;
+    /** Icon or element rendered on the left side of the card. */
+    asset?: React.ReactElement;
+};
+
+export type AiCardProps = TouchableComponentProps<CommonProps>;
+
+type AnimationStage = 'typing' | 'holding' | 'deleting' | 'done';
+
+const TYPING_SPEEDS = [50, 60, 70, 80];
+const DELETE_SPEED = 30;
+const HOLD_DURATION = 2000;
+const MAX_WORDS = 4;
+
+const getRandomTypingSpeed = (previousSpeed?: number) => {
+    const candidates = TYPING_SPEEDS.filter((speed) => speed !== previousSpeed);
+    return candidates[Math.floor(Math.random() * candidates.length)];
+};
+
+const getDeleteFloor = (currentWord: string, nextWord: string, deleteChars?: number) => {
+    const sharedStartFloor = currentWord[0]?.toLowerCase() === nextWord[0]?.toLowerCase() ? 1 : 0;
+    const configuredDeleteFloor = typeof deleteChars === 'number' ? Math.max(0, Math.floor(deleteChars)) : 0;
+    return Math.max(sharedStartFloor, configuredDeleteFloor);
+};
+
+const getPrefersReducedMotion = () =>
+    isClientSide() && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+type AnimationState = {index: number; text: string; stage: AnimationStage};
+
+const INITIAL_STATE: AnimationState = {index: 0, text: '', stage: 'typing'};
+
+const tick = (state: AnimationState, words: ReadonlyArray<string>, deleteChars?: number): AnimationState => {
+    const {index, text, stage} = state;
+    const currentWord = words[index] || '';
+    const nextWord = words[index + 1] || '';
+    const deleteFloor = getDeleteFloor(currentWord, nextWord, deleteChars);
+
+    if (stage === 'typing') {
+        if (text.length < currentWord.length) return {...state, text: currentWord.slice(0, text.length + 1)};
+        return {...state, stage: 'holding'};
+    }
+    if (stage === 'holding') {
+        if (index === words.length - 1) return {...state, stage: 'done'};
+        return text.length > deleteFloor
+            ? {...state, stage: 'deleting'}
+            : {index: index + 1, text, stage: 'typing'};
+    }
+    if (stage === 'deleting') {
+        if (text.length <= deleteFloor) {
+            let commonLen = 0;
+            while (
+                commonLen < text.length &&
+                commonLen < nextWord.length &&
+                text[commonLen] === nextWord[commonLen]
+            ) {
+                commonLen++;
+            }
+            return {index: index + 1, text: text.slice(0, commonLen), stage: 'typing'};
+        }
+        return {...state, text: text.slice(0, -1)};
+    }
+    return state;
+};
+
+const useAiCardAnimation = ({
+    words,
+    deleteChars,
+    prefersReducedMotion,
+    isInViewport,
+}: {
+    words: ReadonlyArray<string>;
+    deleteChars?: number;
+    prefersReducedMotion: boolean;
+    isInViewport: boolean;
+}) => {
+    const wordsKey = words.join('\0');
+    const wordCount = words.length;
+    const [state, setState] = React.useState<AnimationState>(INITIAL_STATE);
+    const prevSpeedRef = React.useRef<number | undefined>(undefined);
+    const wordsRef = React.useRef(words);
+    wordsRef.current = words;
+
+    React.useEffect(() => {
+        setState(
+            prefersReducedMotion && wordCount
+                ? {index: wordCount - 1, text: wordsRef.current.at(-1) || '', stage: 'done'}
+                : INITIAL_STATE
+        );
+    }, [wordsKey, prefersReducedMotion, wordCount]);
+
+    React.useEffect(() => {
+        if (state.stage === 'done' || !isInViewport || prefersReducedMotion || !wordCount) return;
+        let speed: number;
+        if (state.stage === 'typing') {
+            speed = getRandomTypingSpeed(prevSpeedRef.current);
+            prevSpeedRef.current = speed;
+        } else if (state.stage === 'holding') {
+            speed = HOLD_DURATION;
+        } else {
+            speed = DELETE_SPEED;
+        }
+        const id = window.setTimeout(() => setState((s) => tick(s, wordsRef.current, deleteChars)), speed);
+        return () => window.clearTimeout(id);
+    }, [state, isInViewport, prefersReducedMotion, wordCount, deleteChars]);
+
+    return {
+        dynamicText: state.text,
+        isDone: state.stage === 'done',
+        shouldBlinkCaret: !prefersReducedMotion && !!wordCount && state.stage === 'holding' && isInViewport,
+    };
+};
+
+const AiCard = ({
+    text,
+    words = [],
+    deleteChars,
+    lineBreakAtChars,
+    borderColor,
+    asset,
+    dataAttributes,
+    'aria-label': ariaLabel,
+    ...touchableProps
+}: AiCardProps): JSX.Element => {
+    const textLineRef = React.useRef<HTMLDivElement>(null);
+    const prefersReducedMotion = getPrefersReducedMotion();
+    const isInViewport = useIsInViewport(textLineRef, false);
+    const isInteractive = 'onPress' in touchableProps || 'href' in touchableProps || 'to' in touchableProps;
+
+    const safeWords = React.useMemo(
+        () =>
+            words
+                .map((word) => word.trim())
+                .filter((word) => word.length > 0)
+                .slice(0, MAX_WORDS),
+        [words]
+    );
+
+    const longestWord = React.useMemo(
+        () => safeWords.reduce((acc, word) => (word.length > acc.length ? word : acc), safeWords[0] || ''),
+        [safeWords]
+    );
+
+    const {dynamicText, isDone, shouldBlinkCaret} = useAiCardAnimation({
+        words: safeWords,
+        deleteChars,
+        prefersReducedMotion,
+        isInViewport,
+    });
+
+    const lastWord = safeWords.at(-1) ?? '';
+    const autoAriaLabel = [text, lastWord].filter(Boolean).join('') || undefined;
+
+    const textLineStyle: React.CSSProperties =
+        typeof lineBreakAtChars === 'number'
+            ? {maxWidth: `min(100%, ${Math.max(1, Math.floor(lineBreakAtChars))}ch)`}
+            : {};
+
+    return (
+        <BaseTouchable
+            className={classnames(styles.container, {[styles.containerInteractive]: isInteractive})}
+            style={
+                borderColor
+                    ? applyCssVars({
+                          [styles.vars.borderColorVar]: /gradient/.test(borderColor)
+                              ? borderColor
+                              : `linear-gradient(${borderColor}, ${borderColor})`,
+                      })
+                    : undefined
+            }
+            dataAttributes={{'component-name': 'AiCard', testid: 'AiCard', ...dataAttributes}}
+            {...(touchableProps as any)}
+            aria-label={ariaLabel ?? autoAriaLabel}
+        >
+            {asset && (
+                <span className={styles.slot} aria-hidden="true">
+                    {asset}
+                </span>
+            )}
+            <div ref={textLineRef} className={styles.textLine} aria-hidden="true" style={textLineStyle}>
+                <Text3 regular color={vars.colors.textPrimary} as="span">
+                    <span className={styles.textWrapper}>
+                        <span className={styles.ghost}>
+                            {text}
+                            {longestWord}
+                        </span>
+                        <span className={styles.visibleContent}>
+                            {text}
+                            {dynamicText}
+                            {!prefersReducedMotion && !!safeWords.length && (
+                                <span
+                                    className={classnames(styles.caret, {
+                                        [styles.caretBlinking]: shouldBlinkCaret,
+                                        [styles.caretHidden]: isDone,
+                                    })}
+                                >
+                                    |
+                                </span>
+                            )}
+                        </span>
+                    </span>
+                </Text3>
+            </div>
+        </BaseTouchable>
+    );
+};
+
+export default AiCard;

package/src/community/index.tsx

@@ -1,3 +1,4 @@
+export {default as AiCard} from './ai-card';
 export {default as ExampleComponent} from './example-component';
 export {default as AdvancedDataCard} from './advanced-data-card';
 export {

package/src/index.tsx

@@ -274,6 +274,7 @@ export type {TextToken, Dictionary} from './text-tokens';
  * the community.js export has issues because it exports an ES module and next12 interterprets it as a CommonJS module
  * importing from /dist/ is not an option because those modules don't get the context from the theme provider
  */
+export {default as CommunityAiCard} from './community/ai-card';
 export {default as CommunityExampleComponent} from './community/example-component';
 export {default as CommunityAdvancedDataCard} from './community/advanced-data-card';
 export {

package/src/menu.css.ts

@@ -126,6 +126,12 @@ export const itemContent = style({
     alignItems: 'center',
 });
 
+export const itemTextContent = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+});
+
 export const iconContainer = style({
     display: 'flex',
     paddingRight: 8,

package/src/menu.tsx

@@ -10,7 +10,7 @@ import {Portal} from './portal';
 import Box from './box';
 import Inline from './inline';
 import Touchable from './touchable';
-import {Text3} from './text';
+import {Text2, Text3} from './text';
 import {vars} from './skins/skin-contract.css';
 import Divider from './divider';
 import Checkbox from './checkbox';
@@ -53,24 +53,44 @@ const getItemIndexInMenu = (menu: HTMLElement | null, item: HTMLElement | null):
 
 interface MenuItemBaseProps {
     label: string;
+    description?: string;
     Icon?: (props: IconProps) => JSX.Element;
     destructive?: boolean;
     disabled?: boolean;
-    onPress: (item: number) => void;
     dataAttributes?: DataAttributes;
 }
 
-interface MenuItemWithoutControlProps extends MenuItemBaseProps {
+interface MenuItemOnPressProps extends MenuItemBaseProps {
+    onPress: (item: number) => void;
+    controlType?: 'checkbox';
+    checked?: boolean;
+    href?: undefined;
+    to?: undefined;
+}
+
+interface MenuItemHrefProps extends MenuItemBaseProps {
+    href: string;
+    newTab?: boolean;
+    loadOnTop?: boolean;
+    onNavigate?: () => void | Promise<void>;
+    onPress?: undefined;
+    to?: undefined;
     controlType?: undefined;
     checked?: undefined;
 }
 
-interface MenuItemWithControlProps extends MenuItemBaseProps {
-    controlType?: 'checkbox';
-    checked?: boolean;
+interface MenuItemToProps extends MenuItemBaseProps {
+    to: string;
+    newTab?: boolean;
+    fullPageOnWebView?: boolean;
+    onNavigate?: () => void | Promise<void>;
+    onPress?: undefined;
+    href?: undefined;
+    controlType?: undefined;
+    checked?: undefined;
 }
 
-type MenuItemProps = ExclusifyUnion<MenuItemWithControlProps | MenuItemWithoutControlProps>;
+type MenuItemProps = ExclusifyUnion<MenuItemOnPressProps | MenuItemHrefProps | MenuItemToProps>;
 
 export const MenuItem = ({
     label,
@@ -78,8 +98,15 @@ export const MenuItem = ({
     destructive,
     disabled,
     onPress,
+    href,
+    to,
+    newTab,
+    loadOnTop,
+    fullPageOnWebView,
+    onNavigate,
     controlType,
     checked,
+    description,
     dataAttributes,
 }: MenuItemProps): JSX.Element => {
     const {focusedItem, setFocusedItem, closeMenu, isMenuOpen} = useMenuContext();
@@ -93,6 +120,30 @@ export const MenuItem = ({
 
     const menuItemDataAttributes = {testid: 'MenuItem', ...dataAttributes};
 
+    const renderTextContent = (id?: string) => (
+        <div id={id} className={styles.itemTextContent}>
+            <Text3 regular color={contentColor}>
+                {label}
+            </Text3>
+            {description && (
+                <Text2 regular color={vars.colors.textSecondary}>
+                    {description}
+                </Text2>
+            )}
+        </div>
+    );
+
+    const renderItemContent = (labelId?: string) => (
+        <div className={styles.itemContent}>
+            {Icon && (
+                <div className={styles.iconContainer}>
+                    <Icon size={24} color={contentColor} />
+                </div>
+            )}
+            {renderTextContent(labelId)}
+        </div>
+    );
+
     const renderContent = () =>
         controlType === 'checkbox' ? (
             <Checkbox
@@ -101,37 +152,64 @@ export const MenuItem = ({
                 checked={checked}
                 onChange={() => {
                     if (isMenuOpen && itemIndex !== null) {
-                        onPress(itemIndex);
+                        onPress?.(itemIndex);
                         closeMenu();
                     }
                 }}
                 disabled={disabled}
                 role="menuitemcheckbox"
                 dataAttributes={menuItemDataAttributes}
-                render={({controlElement}) => (
+                render={({controlElement, labelId}) => (
                     <Box paddingX={8} paddingY={12}>
                         <Inline space="between" alignItems="center">
-                            <div className={styles.itemContent}>
-                                {Icon && (
-                                    <div className={styles.iconContainer}>
-                                        <Icon size={24} color={contentColor} />
-                                    </div>
-                                )}
-                                <Text3 regular color={contentColor}>
-                                    {label}
-                                </Text3>
-                            </div>
+                            {renderItemContent(labelId)}
                             <Box paddingLeft={16}>{controlElement}</Box>
                         </Inline>
                     </Box>
                 )}
             />
+        ) : href ? (
+            <Touchable
+                ref={itemRef}
+                href={href}
+                newTab={newTab}
+                loadOnTop={loadOnTop}
+                onNavigate={() => {
+                    closeMenu();
+                    onNavigate?.();
+                }}
+                disabled={disabled}
+                role="menuitem"
+                dataAttributes={menuItemDataAttributes}
+            >
+                <Box paddingX={8} paddingY={12}>
+                    {renderItemContent()}
+                </Box>
+            </Touchable>
+        ) : to ? (
+            <Touchable
+                ref={itemRef}
+                to={to}
+                newTab={newTab}
+                fullPageOnWebView={fullPageOnWebView}
+                onNavigate={() => {
+                    closeMenu();
+                    onNavigate?.();
+                }}
+                disabled={disabled}
+                role="menuitem"
+                dataAttributes={menuItemDataAttributes}
+            >
+                <Box paddingX={8} paddingY={12}>
+                    {renderItemContent()}
+                </Box>
+            </Touchable>
         ) : (
             <Touchable
                 ref={itemRef}
                 onPress={() => {
                     if (isMenuOpen && itemIndex !== null) {
-                        onPress(itemIndex);
+                        onPress?.(itemIndex);
                         closeMenu();
                     }
                 }}
@@ -140,16 +218,7 @@ export const MenuItem = ({
                 dataAttributes={menuItemDataAttributes}
             >
                 <Box paddingX={8} paddingY={12}>
-                    <div className={styles.itemContent}>
-                        {Icon && (
-                            <div className={styles.iconContainer}>
-                                <Icon size={24} color={contentColor} />
-                            </div>
-                        )}
-                        <Text3 regular color={contentColor}>
-                            {label}
-                        </Text3>
-                    </div>
+                    {renderItemContent()}
                 </Box>
             </Touchable>
         );

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '16.62.0-beta.1' as string;
+export const PACKAGE_VERSION = '16.63.0' as string;