@telefonica/mistica 16.62.0-beta.1 → 16.62.0

package/src/community/__stories__/ai-card-story.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import AiCard from '../ai-card';
+import Box from '../../box';
+import ResponsiveLayout from '../../responsive-layout';
+import IconArtificialIntelligenceFilled from '../../generated/mistica-icons/icon-artificial-intelligence-filled';
+import {vars} from '../../skins/skin-contract.css';
+
+export default {
+    title: 'Community/AiCard',
+    parameters: {fullScreen: true},
+};
+
+const assetOptions: Record<string, React.ReactElement> = {
+    'AI Icon (gradient)': (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path
+                d="M6.53957 16.0123C6.71957 15.6223 7.26973 15.6223 7.44973 16.0123L8.23977 17.7623L9.99953 18.5523C10.3894 18.7324 10.3895 19.2825 9.99953 19.4625L8.24953 20.2525L7.45949 22.0123C7.27949 22.4022 6.71964 22.4021 6.53957 22.0123L5.74953 20.2623L3.99953 19.4722C3.60953 19.2922 3.60953 18.7421 3.99953 18.5621L5.74953 17.772L6.53957 16.0123ZM15.0073 5.99861C15.3574 5.21869 16.4767 5.21864 16.8267 5.99861L18.4165 9.49861L21.9165 11.0885C22.6965 11.4485 22.6965 12.5588 21.9165 12.9088L18.4165 14.4986L16.8267 17.9986C16.4666 18.7783 15.3575 18.7783 15.0073 17.9986L13.4165 14.4986L9.91652 12.9088C9.13679 12.5487 9.13685 11.4386 9.91652 11.0885L13.4165 9.49861L15.0073 5.99861ZM4.33254 1.97322C4.5126 1.58347 5.06166 1.58347 5.24172 1.97322L6.03176 3.72322L7.7925 4.51326C8.18211 4.69337 8.18215 5.24334 7.7925 5.42342L6.0425 6.21345L5.25246 7.97322C5.07248 8.36318 4.5126 8.3631 4.33254 7.97322L3.5425 6.22322L1.7925 5.43318C1.4025 5.25318 1.4025 4.70302 1.7925 4.52302L3.5425 3.73299L4.33254 1.97322Z"
+                fill="url(#ai-icon-gradient)"
+            />
+            <defs>
+                <linearGradient
+                    id="ai-icon-gradient"
+                    x1="18.84"
+                    y1="5.30652"
+                    x2="5.4224"
+                    y2="18.9388"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stopColor="#AE42E4" />
+                    <stop offset="0.32" stopColor="#BD4AFF" />
+                    <stop offset="1" stopColor="#EF7E9C" />
+                </linearGradient>
+            </defs>
+        </svg>
+    ),
+    'AI Icon (brand)': <IconArtificialIntelligenceFilled color={vars.colors.textBrand} />,
+};
+
+type Args = {
+    text: string;
+    words: string | Array<string>;
+    deleteChars: number;
+    lineBreakAtChars: number;
+    borderColor: string;
+    asset: string;
+};
+
+const parseWords = (raw: string | Array<string>): Array<string> =>
+    Array.isArray(raw)
+        ? raw.map((w) => String(w).trim()).filter(Boolean)
+        : String(raw)
+              .split(',')
+              .map((word) => word.trim())
+              .filter(Boolean);
+
+export const Default: StoryComponent<Args> = ({
+    text,
+    words,
+    deleteChars,
+    lineBreakAtChars,
+    borderColor,
+    asset,
+}) => (
+    <ResponsiveLayout>
+        <Box paddingY={24}>
+            <AiCard
+                text={text}
+                words={parseWords(words)}
+                deleteChars={deleteChars > 0 ? deleteChars : undefined}
+                lineBreakAtChars={lineBreakAtChars > 0 ? lineBreakAtChars : undefined}
+                borderColor={borderColor || undefined}
+                asset={assetOptions[asset]}
+                onPress={() => {}}
+                dataAttributes={{testid: 'ai-card'}}
+            />
+        </Box>
+    </ResponsiveLayout>
+);
+
+Default.storyName = 'AiCard';
+Default.args = {
+    text: 'Lorem ipsum dolor sit amet, ',
+    words: ['consectetur', 'praesent', 'tempor', 'aliquam'],
+    deleteChars: 0,
+    lineBreakAtChars: 0,
+    borderColor: 'linear-gradient(200deg, #AE42E459 17.51%, #BD4AFF59 38.3%, #EB3C7D59 82.5%)',
+    asset: 'AI Icon (gradient)',
+};
+Default.argTypes = {
+    deleteChars: {control: {type: 'number', min: 0, step: 1}},
+    lineBreakAtChars: {control: {type: 'number', min: 0, step: 1}},
+    borderColor: {control: {type: 'text'}},
+    words: {
+        control: {type: 'array'},
+        description: 'List of words for the AiCard animation.',
+    },
+    asset: {
+        options: Object.keys(assetOptions),
+        control: {type: 'select'},
+    },
+};

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,6 +53,7 @@ const getItemIndexInMenu = (menu: HTMLElement | null, item: HTMLElement | null):
 
 interface MenuItemBaseProps {
     label: string;
+    description?: string;
     Icon?: (props: IconProps) => JSX.Element;
     destructive?: boolean;
     disabled?: boolean;
@@ -80,6 +81,7 @@ export const MenuItem = ({
     onPress,
     controlType,
     checked,
+    description,
     dataAttributes,
 }: MenuItemProps): JSX.Element => {
     const {focusedItem, setFocusedItem, closeMenu, isMenuOpen} = useMenuContext();
@@ -93,6 +95,19 @@ 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 renderContent = () =>
         controlType === 'checkbox' ? (
             <Checkbox
@@ -108,7 +123,7 @@ export const MenuItem = ({
                 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}>
@@ -117,9 +132,7 @@ export const MenuItem = ({
                                         <Icon size={24} color={contentColor} />
                                     </div>
                                 )}
-                                <Text3 regular color={contentColor}>
-                                    {label}
-                                </Text3>
+                                {renderTextContent(labelId)}
                             </div>
                             <Box paddingLeft={16}>{controlElement}</Box>
                         </Inline>
@@ -146,9 +159,7 @@ export const MenuItem = ({
                                 <Icon size={24} color={contentColor} />
                             </div>
                         )}
-                        <Text3 regular color={contentColor}>
-                            {label}
-                        </Text3>
+                        {renderTextContent()}
                     </div>
                 </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.62.0' as string;