@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/phone-number-field-lite.tsx

@@ -0,0 +1,265 @@
+'use client';
+import * as React from 'react';
+import {useRifm} from 'rifm';
+import {useFieldProps} from './form-context';
+import {TextFieldBaseAutosuggest} from './text-field-base';
+import {useTheme} from './hooks';
+import {createChangeEvent} from './utils/dom';
+import {combineRefs} from './utils/common';
+
+import type {CommonFormFieldProps} from './text-field-base';
+import type {RegionCode} from './utils/region-code';
+
+const COUNTRY_CODE_TO_REGION_CODE: Record<string, RegionCode> = {
+    '+34': 'ES',
+    '+55': 'BR',
+    '+49': 'DE',
+    '+44': 'GB',
+};
+
+const REGION_CODE_TO_COUNTRY_CODE: Record<string, string> = Object.fromEntries(
+    Object.entries(COUNTRY_CODE_TO_REGION_CODE).map(([k, v]) => [v, k])
+);
+
+const clean = (number: string): string => {
+    return number.trim().replace(/[^\d\+]/g, ''); // keep digits and "+"
+};
+
+const asE164 = (number: string, regionCode: RegionCode): string => {
+    if (number.startsWith('+')) {
+        return number;
+    }
+
+    switch (regionCode) {
+        case 'ES':
+            return `${REGION_CODE_TO_COUNTRY_CODE[regionCode]} ${number}`;
+        case 'BR':
+            return `${REGION_CODE_TO_COUNTRY_CODE[regionCode]} ${number.replace(/[\(\)]/g, '')}`;
+        case 'DE':
+            return `${REGION_CODE_TO_COUNTRY_CODE[regionCode]} ${number.replace(/^0/, '')}`;
+        case 'GB':
+            return `${REGION_CODE_TO_COUNTRY_CODE[regionCode]} ${number.replace(/^0/, '')}`;
+        default:
+            return number;
+    }
+};
+
+/**
+ * Simple phone formatter for a few countries and a subset of phone numbers
+ *
+ * Formatting conditions have been adapted to exactly match libphonenumber's as you type formatting
+ * Not all formatting rules are implemented, only the most common ones. For a more complete solution, use PhoneNumberField
+ */
+export const formatPhoneLite = (regionCode: RegionCode, number: string): string => {
+    const cleanNumber = clean(number);
+    const isE164 = cleanNumber.startsWith('+');
+    let digits = cleanNumber.replace(/\D/g, ''); // keep digits only
+    let countryCode = '';
+    let formattingRegionCode = regionCode;
+
+    if (isE164) {
+        // check if the number matches a known country code
+        countryCode =
+            Object.keys(COUNTRY_CODE_TO_REGION_CODE).find((code) => cleanNumber.startsWith(code)) || '';
+
+        if (countryCode) {
+            digits = cleanNumber.slice(countryCode.length); // remove country code
+            formattingRegionCode = COUNTRY_CODE_TO_REGION_CODE[countryCode]; // override region code, the country code has precedence
+        } else {
+            // unknown E164 is returned without formatting
+            return '+' + digits;
+        }
+    }
+
+    if (formattingRegionCode === 'ES') {
+        // https://en.wikipedia.org/wiki/Telephone_numbers_in_Spain
+        // Example mobile: 654 83 44 55
+        // Example landline: 914 44 10 25
+        if (digits.length <= 9) {
+            return `${countryCode} ${digits.slice(0, 3)} ${digits.slice(3, 5)} ${digits.slice(5, 7)} ${digits.slice(7)}`.trim();
+        }
+    } else if (formattingRegionCode === 'BR') {
+        // https://en.wikipedia.org/wiki/Telephone_numbers_in_Brazil
+        // Example mobile: (xx) (6..9)xxxx-xxxx
+        // Example landline: (xx) xxxx-xxxx
+        let national: string | undefined;
+        if (digits.length === 11) {
+            national = `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7)}`.replace(/\D+$/, '');
+        } else if (digits.length > 2 && digits.length < 11) {
+            if (digits[2] > '5') {
+                // mobile
+                national = `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7)}`.replace(
+                    /\D+$/,
+                    ''
+                );
+            } else {
+                // landline
+                national = `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`.replace(
+                    /\D+$/,
+                    ''
+                );
+            }
+        }
+        if (national) {
+            return isE164 ? asE164(national, formattingRegionCode) : national;
+        }
+    } else if (formattingRegionCode === 'DE') {
+        // https://en.wikipedia.org/wiki/Telephone_numbers_in_Germany
+        // Only formatting mobile numbers, landline numbers have a lot of variations:
+        // https://en.wikipedia.org/wiki/Telephone_numbers_in_Germany#/media/File:Karte_Telefonvorwahlen_Deutschland.png
+        // Example mobile: 0157 89012345
+        // Example E164: +49 1578 9012345
+        const zeroPadded = isE164 ? '0' + digits : digits;
+        if (zeroPadded.length >= 4 && zeroPadded.match(/^(015|016|017)/)) {
+            let national: string | undefined;
+            if (zeroPadded.length <= 12 && zeroPadded.startsWith('015')) {
+                national = `${zeroPadded.slice(0, 5)} ${zeroPadded.slice(5)}`.trim();
+            } else {
+                national = `${countryCode} ${zeroPadded.slice(0, 4)} ${zeroPadded.slice(4)}`.trim();
+            }
+            return isE164 ? asE164(national, formattingRegionCode) : national;
+        }
+    } else if (formattingRegionCode === 'GB') {
+        // https://en.wikipedia.org/wiki/Telephone_numbers_in_the_United_Kingdom#Mobile_telephones
+        // Like in DE, only mobile numbers are formatted
+        // Example mobile: 07xxx xxxxxx
+        const zeroPadded = isE164 ? '0' + digits : digits;
+        if (zeroPadded.length <= 11 && zeroPadded.startsWith('07')) {
+            const national = `${zeroPadded.slice(0, 5)} ${zeroPadded.slice(5)}`.trim();
+            return isE164 ? asE164(national, formattingRegionCode) : national;
+        }
+    }
+    return isE164 ? `${countryCode} ${digits}` : digits;
+};
+
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onInput'> & {
+    inputRef?: React.Ref<HTMLInputElement>;
+    value?: string;
+    defaultValue?: string;
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
+    prefix?: string;
+    format?: (number: string) => string;
+};
+
+const PhoneInput = ({
+    inputRef,
+    value,
+    defaultValue,
+    onChange,
+    prefix,
+    format: formatFromProps,
+    ...other
+}: InputProps) => {
+    const [selfValue, setSelfValue] = React.useState(defaultValue || '');
+    const ref = React.useRef<HTMLInputElement | null>(null);
+    const {
+        i18n: {phoneNumberFormattingRegionCode: regionCode},
+    } = useTheme();
+
+    const isControlledByParent = typeof value !== 'undefined';
+    const controlledValue = (isControlledByParent ? value : selfValue) as string;
+
+    const handleChangeValue = React.useCallback(
+        (newFormattedValue: string) => {
+            if (!isControlledByParent) {
+                setSelfValue(newFormattedValue);
+            }
+            if (ref.current) {
+                onChange?.(createChangeEvent(ref.current, newFormattedValue));
+            }
+        },
+        [isControlledByParent, onChange]
+    );
+
+    const format = React.useCallback(
+        (number: string): string => {
+            if (formatFromProps) {
+                return formatFromProps(number);
+            }
+            return formatPhoneLite(regionCode, number);
+        },
+        [formatFromProps, regionCode]
+    );
+
+    const rifm = useRifm({
+        format,
+        value: controlledValue,
+        accept: /[\d\+]+/g,
+        onChange: handleChangeValue,
+    });
+
+    return (
+        <input
+            {...other}
+            value={rifm.value}
+            onChange={rifm.onChange}
+            type="tel" // shows telephone keypad in Android and iOS
+            ref={combineRefs(inputRef, ref)}
+        />
+    );
+};
+
+export interface PhoneNumberFieldProps extends CommonFormFieldProps {
+    onChangeValue?: (value: string, rawValue: string) => void;
+    prefix?: string;
+    getSuggestions?: (value: string) => Array<string>;
+    format?: (number: string) => string;
+    e164?: boolean;
+}
+
+const PhoneNumberFieldLite = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue,
+    onBlur,
+    value,
+    defaultValue,
+    dataAttributes,
+    e164,
+    ...rest
+}: PhoneNumberFieldProps): JSX.Element => {
+    const {
+        i18n: {phoneNumberFormattingRegionCode},
+    } = useTheme();
+
+    const processValue = (value: string) => {
+        return e164 ? clean(asE164(value, phoneNumberFormattingRegionCode)) : clean(value);
+    };
+
+    const fieldProps = useFieldProps({
+        name,
+        label,
+        value,
+        defaultValue,
+        processValue,
+        helperText,
+        optional,
+        error,
+        disabled,
+        onBlur,
+        validate,
+        validateOnBlurInsideForm,
+        onChange,
+        onChangeValue,
+    });
+
+    return (
+        <TextFieldBaseAutosuggest
+            {...rest}
+            {...fieldProps}
+            type="phone"
+            inputProps={{prefix: rest.prefix}}
+            inputComponent={PhoneInput}
+            dataAttributes={{'component-name': 'PhoneNumberFieldLite', ...dataAttributes}}
+        />
+    );
+};
+
+export default PhoneNumberFieldLite;

package/src/phone-number-field.tsx

@@ -0,0 +1,171 @@
+'use client';
+import * as React from 'react';
+import {useRifm} from 'rifm';
+import {formatAsYouType, formatToE164, parse, getRegionCodeForCountryCode} from '@telefonica/libphonenumber';
+import {useFieldProps} from './form-context';
+import {TextFieldBaseAutosuggest} from './text-field-base';
+import {useTheme} from './hooks';
+import {createChangeEvent} from './utils/dom';
+import {combineRefs} from './utils/common';
+
+import type {CommonFormFieldProps} from './text-field-base';
+import type {RegionCode} from './utils/region-code';
+
+const formatPhone = (regionCode: RegionCode, number: string): string =>
+    formatAsYouType(number.replace(/[^\d+*#]/g, ''), regionCode);
+
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onInput'> & {
+    inputRef?: React.Ref<HTMLInputElement>;
+    value?: string;
+    defaultValue?: string;
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
+    prefix?: string;
+};
+
+const isValidPrefix = (prefix: string): boolean => !!prefix.match(/^\+\d+$/);
+
+const PhoneInput = ({inputRef, value, defaultValue, onChange, prefix, ...other}: InputProps) => {
+    const [selfValue, setSelfValue] = React.useState(defaultValue ?? '');
+    const ref = React.useRef<HTMLInputElement | null>(null);
+    const {i18n} = useTheme();
+
+    const regionCode = i18n.phoneNumberFormattingRegionCode;
+    const isControlledByParent = typeof value !== 'undefined';
+    const controlledValue = (isControlledByParent ? value : selfValue) as string;
+
+    const handleChangeValue = React.useCallback(
+        (newFormattedValue: string) => {
+            if (!isControlledByParent) {
+                setSelfValue(newFormattedValue);
+            }
+            if (ref.current) {
+                onChange?.(createChangeEvent(ref.current, newFormattedValue));
+            }
+        },
+        [isControlledByParent, onChange]
+    );
+
+    const format = React.useCallback(
+        // The final replacement of "-" to "@" is to workaround a bug in rifm library
+        // otherwise the cursor position is incorrectly positioned
+        // also note the "@" is replaced back to "-" in `replace` param in `useRifm`
+        (value: string): string => {
+            let result = '';
+
+            // If a prefix is defined, we format the concatenation of prefix + value and
+            // then remove the prefix from the result
+            if (prefix && isValidPrefix(prefix)) {
+                const prefixedValue = prefix + value;
+                result = formatPhone(regionCode, prefixedValue);
+                if (result.startsWith(prefix)) {
+                    result = result.slice(prefix.length).trim();
+                } else {
+                    // fallback to regular formatting
+                    result = formatPhone(regionCode, value);
+                }
+            } else {
+                result = formatPhone(regionCode, value);
+            }
+            return result.replace(/-/g, '@');
+        },
+        [regionCode, prefix]
+    );
+
+    const rifm = useRifm({
+        format,
+        value: controlledValue,
+        onChange: handleChangeValue,
+        accept: /[\d\-+#*]+/g,
+        replace: (s) => s.replace(/@/g, '-'),
+    });
+
+    return (
+        <input
+            {...other}
+            value={rifm.value}
+            onChange={rifm.onChange}
+            type="tel" // shows telephone keypad in Android and iOS
+            ref={combineRefs(inputRef, ref)}
+        />
+    );
+};
+
+export interface PhoneNumberFieldProps extends CommonFormFieldProps {
+    onChangeValue?: (value: string, rawValue: string) => void;
+    prefix?: string;
+    getSuggestions?: (value: string) => Array<string>;
+    e164?: boolean;
+}
+
+const PhoneNumberField = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue,
+    onBlur,
+    value,
+    defaultValue,
+    e164,
+    dataAttributes,
+    ...rest
+}: PhoneNumberFieldProps): JSX.Element => {
+    const {i18n} = useTheme();
+
+    const processValue = (value: string) => {
+        if (e164) {
+            try {
+                const numericPrefix = (rest.prefix ?? '').replace(/[^\d]/g, '');
+                let regionCode = getRegionCodeForCountryCode(numericPrefix);
+                if (!regionCode || regionCode === 'ZZ') {
+                    regionCode = i18n.phoneNumberFormattingRegionCode;
+                }
+                return formatToE164(parse(value, regionCode));
+            } catch (e) {
+                return '';
+            }
+        } else {
+            // keep only digits
+            return value.replace(/[^\d]/g, '');
+        }
+    };
+
+    const fieldProps = useFieldProps({
+        name,
+        label,
+        value,
+        defaultValue,
+        processValue,
+        helperText,
+        optional,
+        error,
+        disabled,
+        onBlur,
+        validate,
+        validateOnBlurInsideForm,
+        onChange,
+        onChangeValue,
+    });
+
+    return (
+        <TextFieldBaseAutosuggest
+            {...rest}
+            {...fieldProps}
+            type="phone"
+            inputProps={{prefix: rest.prefix}}
+            inputComponent={PhoneInput}
+            dataAttributes={{
+                'component-name': 'PhoneNumberField',
+                testid: 'PhoneNumberField',
+                ...dataAttributes,
+            }}
+        />
+    );
+};
+
+export default PhoneNumberField;

package/src/pin-field.css.ts

@@ -0,0 +1,90 @@
+import {vars} from './skins/skin-contract.css';
+import {sprinkles} from './sprinkles.css';
+import {keyframes, style} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+import {pxToRem} from './utils/css';
+
+export const pinInputLineHeight = pxToRem(16);
+const mobileFontSize = pxToRem(16);
+const desktopFontSize = pxToRem(18);
+
+export const fieldContainer = style({
+    width: 'fit-content',
+});
+
+export const disabled = style({
+    opacity: 0.5,
+    cursor: 'default',
+});
+
+const fieldCommonStyles = style([
+    sprinkles({
+        border: 'input',
+        display: 'flex',
+        borderRadius: vars.borderRadii.input,
+        position: 'relative',
+        background: vars.colors.backgroundContainer,
+    }),
+    {
+        width: `calc(${pinInputLineHeight} * 3)`,
+    },
+]);
+
+export const field = fieldCommonStyles;
+
+export const focusedField = style([
+    field,
+    {
+        border: `1px solid ${vars.colors.controlActivated}`,
+    },
+]);
+
+export const readOnlyField = style([
+    fieldCommonStyles,
+    {
+        background: vars.colors.neutralLow,
+    },
+]);
+
+export const input = style({
+    textAlign: 'center',
+});
+
+export const passwordInput = sprinkles({
+    color: 'transparent',
+});
+
+const passwordDotAnimation = keyframes({
+    '0%': {
+        scale: 0,
+    },
+    '100%': {
+        scale: 1,
+    },
+});
+
+export const passwordDot = style({
+    userSelect: 'none',
+    pointerEvents: 'none',
+    fontFamily: 'Lucida Grande, Arial, sans-serif', // same font we use for password input
+    fontSize: mobileFontSize,
+    '@media': {
+        [mq.desktopOrBigger]: {
+            fontSize: desktopFontSize,
+        },
+    },
+    color: vars.colors.textPrimary,
+    animationName: passwordDotAnimation,
+    animationDuration: '0.3s',
+    animationTimingFunction: 'cubic-bezier(0.77, 0, 0.175, 1)',
+    transformOrigin: 'center',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 'auto', // center the div
+    width: pinInputLineHeight,
+    height: pinInputLineHeight,
+    textAlign: 'center',
+});