@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/form.tsx

@@ -1,287 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useTheme} from './hooks';
-import {FormContext} from './form-context';
-import classnames from 'classnames';
-import * as styles from './form.css';
-import * as tokens from './text-tokens';
-import ScreenReaderOnly from './screen-reader-only';
-import {isIos} from './utils/platform';
-import {getPrefixedDataAttributes} from './utils/dom';
-
-import type {DataAttributes} from './utils/types';
-import type {FormStatus, FormErrors, FieldRegistration} from './form-context';
-
-if (
-    process.env.NODE_ENV !== 'test' &&
-    typeof document !== 'undefined' &&
-    !('scrollBehavior' in document.documentElement.style)
-) {
-    // polyfill for element.scrollIntoView
-    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-    import('scroll-behavior-polyfill').finally(() => {});
-}
-
-export type FormValues = {[name: string]: any};
-
-type HTMLFieldElement = HTMLSelectElement | HTMLInputElement;
-
-type FormProps = {
-    id?: string;
-    onSubmit: (values: FormValues, rawValues: FormValues) => Promise<void> | void;
-    initialValues?: FormValues;
-    autoJump?: boolean;
-    children: React.ReactNode;
-    onValidationErrors?: (errors: FormErrors) => void;
-    getErrorMessageForScreenReader?: (errors: FormErrors) => string;
-    className?: string;
-    dataAttributes?: DataAttributes;
-};
-
-const Form = ({
-    children,
-    className,
-    onSubmit,
-    initialValues = {},
-    autoJump = false,
-    onValidationErrors,
-    getErrorMessageForScreenReader,
-    id: idProp,
-    dataAttributes,
-}: FormProps): JSX.Element => {
-    const isMountedRef = React.useRef(true); // https://github.com/facebook/react/issues/14369#issuecomment-468305796
-    const [values, setValues] = React.useState(initialValues);
-    const [rawValues, setRawValues] = React.useState(initialValues);
-    const [formStatus, setFormStatus] = React.useState<FormStatus>('filling');
-    const [formErrors, setFormErrors] = React.useState<FormErrors>({});
-    const fieldRegistrations = React.useRef(new Map<string, FieldRegistration>());
-    const formRef = React.useRef<HTMLFormElement | null>(null);
-    const {texts, t, platformOverrides} = useTheme();
-    const reactId = React.useId();
-    const id = idProp || reactId;
-
-    React.useEffect(() => {
-        /**
-         * When using React with Strict Mode on, the component's effects are executed twice. If we don't set the ref's value to true
-         * the first time the effect is triggered, this value will be set to false forever, preventing handleSubmit()
-         * from resetting the formStatus to filling after the submit action is handled.
-         * https://react.dev/reference/react/StrictMode#strictmode
-         */
-        isMountedRef.current = true;
-        return () => {
-            isMountedRef.current = false;
-        };
-    }, []);
-
-    const register = React.useCallback(
-        (name: string, {input, validator, focusableElement, label, required}: FieldRegistration) => {
-            if (input || focusableElement) {
-                fieldRegistrations.current.set(name, {
-                    input,
-                    validator,
-                    focusableElement,
-                    label,
-                    required,
-                });
-            } else {
-                fieldRegistrations.current.delete(name);
-            }
-        },
-        []
-    );
-
-    const setFormError = React.useCallback(
-        ({name, error}: {name: string; error?: string}) =>
-            setFormErrors((formErrors) => ({...formErrors, [name]: error})),
-        []
-    );
-
-    /**
-     * In iOS the pickers/selects are automatically opened when the input is focused
-     * This is not what we want so, for some specific elements, we disable the autofocus on error
-     */
-    const shouldAutofocusFieldOnError = React.useCallback(
-        (element: HTMLFieldElement): boolean => {
-            if (!isIos(platformOverrides)) {
-                return true;
-            }
-            if (element.tagName === 'SELECT') {
-                return false;
-            }
-            if (['date', 'datetime-local', 'time', 'month'].includes(element.type)) {
-                return false;
-            }
-            return true;
-        },
-        [platformOverrides]
-    );
-
-    /**
-     * returns true if all fields are ok and focuses the first field with an error
-     */
-    const validateFields = React.useCallback((): FormErrors => {
-        const errors: FormErrors = {};
-        for (const [name, {input, validator, required}] of fieldRegistrations.current) {
-            if (input) {
-                const isRequired = required ?? input.required;
-
-                if (input.disabled) {
-                    continue;
-                }
-                if (isRequired && !rawValues[name]?.trim()) {
-                    errors[name] = texts.formFieldErrorIsMandatory || t(tokens.formFieldErrorIsMandatory);
-                } else {
-                    const error = validator?.(values[name], rawValues[name]);
-                    if (error) {
-                        errors[name] = error;
-                    }
-                }
-            }
-        }
-
-        const elementsWithErrors = Object.keys(errors)
-            .map((name) => {
-                const reg = fieldRegistrations.current.get(name);
-                return reg?.focusableElement || reg?.input;
-            })
-            .filter(Boolean) as Array<HTMLFieldElement>; // casted to remove inferred nulls/undefines
-
-        if (elementsWithErrors.length) {
-            elementsWithErrors.sort((a, b) =>
-                a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
-            );
-            const firstElementWithError = elementsWithErrors[0];
-            if (shouldAutofocusFieldOnError(firstElementWithError)) {
-                firstElementWithError.focus();
-            }
-            try {
-                // polyfilled, see import at the top of this file
-                firstElementWithError.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
-            } catch (e) {
-                // ignore errors
-                // element.scrollIntoView not available in unit test environment
-            }
-        }
-
-        setFormErrors(errors);
-        if (onValidationErrors && Object.keys(errors).length > 0) {
-            onValidationErrors(errors);
-        }
-        return errors;
-    }, [
-        onValidationErrors,
-        rawValues,
-        texts.formFieldErrorIsMandatory,
-        t,
-        values,
-        shouldAutofocusFieldOnError,
-    ]);
-
-    const jumpToNext = React.useCallback(
-        (currentName: string) => {
-            // jump is delayed because if executed synchronously it happens before react updates states
-            // after onChange events and the validators executed onBlur still read from the old state
-            setTimeout(() => {
-                if (autoJump && formRef.current) {
-                    const elements: Array<HTMLElement> = Array.from(
-                        formRef.current.querySelectorAll('input, select')
-                    );
-                    const currentElement = fieldRegistrations.current.get(currentName)?.input;
-                    const currentIndex = elements.indexOf(currentElement as HTMLElement);
-                    if (currentIndex >= 0) {
-                        const nextElement = elements[currentIndex + 1];
-                        if (nextElement) {
-                            nextElement.focus();
-                        } else {
-                            currentElement?.blur();
-                        }
-                    }
-                }
-            }, 100);
-        },
-        [autoJump]
-    );
-
-    const getNonDisabledValues = (values: {[name: string]: string}) =>
-        [...fieldRegistrations.current.keys()].reduce(
-            (nonDisabled, name) =>
-                fieldRegistrations.current.get(name)?.input?.disabled
-                    ? nonDisabled
-                    : {...nonDisabled, [name]: values[name]},
-            {}
-        );
-
-    const handleSubmit = React.useCallback(
-        (e?: React.FormEvent<HTMLFormElement>) => {
-            e?.preventDefault();
-            setFormStatus('sending');
-            if (Object.keys(validateFields()).length > 0) {
-                setFormStatus('filling');
-                return Promise.resolve();
-            }
-            return Promise.resolve(
-                onSubmit(getNonDisabledValues(values), getNonDisabledValues(rawValues))
-            ).finally(() => {
-                if (isMountedRef.current) {
-                    setFormStatus('filling');
-                }
-            });
-        },
-        [onSubmit, rawValues, validateFields, values]
-    );
-
-    const setValue = React.useCallback(({name, value}: {name: string; value: any}) => {
-        setValues((values) => ({...values, [name]: value}));
-    }, []);
-
-    const setRawValue = React.useCallback(({name, value}: {name: string; value: any}) => {
-        setRawValues((rawValues) => ({...rawValues, [name]: value}));
-    }, []);
-
-    const fieldsWithErrorLabels = Object.entries(formErrors)
-        .map(([name, errorMessage]) => errorMessage && fieldRegistrations.current.get(name)?.label)
-        .filter(Boolean);
-
-    const hasMultipleFormErrors = fieldsWithErrorLabels.length > 1;
-
-    return (
-        <FormContext.Provider
-            value={{
-                formStatus,
-                values,
-                setValue,
-                rawValues,
-                setRawValue,
-                formErrors,
-                setFormError,
-                register,
-                jumpToNext,
-                validate: validateFields,
-                submit: handleSubmit,
-                formId: id,
-            }}
-        >
-            <form
-                id={id}
-                onSubmit={handleSubmit}
-                ref={formRef}
-                className={classnames(styles.form, className)}
-                noValidate
-                {...getPrefixedDataAttributes(dataAttributes, 'Form')}
-            >
-                {hasMultipleFormErrors ? (
-                    <ScreenReaderOnly>
-                        <span role="alert">
-                            {getErrorMessageForScreenReader
-                                ? getErrorMessageForScreenReader(formErrors)
-                                : `${texts.formErrorsAlertMessage || t(tokens.formErrorsAlertMessage)} ${fieldsWithErrorLabels.join(', ')}`}
-                        </span>
-                    </ScreenReaderOnly>
-                ) : null}
-                {children}
-            </form>
-        </FormContext.Provider>
-    );
-};
-
-export default Form;

package/src/grid-layout.css.ts

@@ -1,68 +0,0 @@
-import {createVar, fallbackVar, globalStyle, style} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-
-export const desktopSmallColumn = style({});
-export const desktopMediumColumn = style({});
-export const desktopLargeColumn = style({});
-
-const verticalSpace = createVar();
-
-const collapsedGrid = {
-    gridTemplateColumns: 'minmax(0, 1fr)',
-    gridColumnGap: 16,
-    gap: fallbackVar(verticalSpace, '0px'),
-};
-
-export const grid = style({
-    display: 'grid',
-    '@media': {
-        [mq.extraLargeDesktop]: {
-            gridTemplateColumns: 'repeat(12, 1fr)',
-            gridColumnGap: 24,
-        },
-        [mq.largeDesktop]: {
-            gridTemplateColumns: 'repeat(12, 1fr)',
-            gridColumnGap: 24,
-        },
-        [mq.desktop]: {
-            gridTemplateColumns: 'repeat(12, 1fr)',
-            gridColumnGap: 24,
-        },
-        [mq.tablet]: {
-            gridTemplateColumns: 'repeat(12, 1fr)',
-            gridColumnGap: 16,
-        },
-        [mq.mobile]: collapsedGrid,
-    },
-});
-
-export const collapsedInTablet = style({
-    '@media': {
-        [mq.tablet]: collapsedGrid,
-    },
-});
-
-const colSpan = createVar();
-export const span = style({
-    '@media': {
-        [mq.desktopOrBigger]: {
-            gridColumn: `span ${colSpan}`,
-        },
-        [mq.tablet]: {
-            gridColumn: `span ${colSpan}`,
-        },
-        [mq.mobile]: {
-            gridColumn: 'span 1',
-        },
-    },
-});
-
-globalStyle(`${collapsedInTablet} ${span}`, {
-    '@media': {
-        [mq.tablet]: {
-            gridColumn: 'span 1',
-        },
-    },
-});
-
-export const vars = {colSpan, verticalSpace};

package/src/grid-layout.tsx

@@ -1,201 +0,0 @@
-import * as React from 'react';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './grid-layout.css';
-import classnames from 'classnames';
-import DesktopContainerTypeContextProvider from './desktop-container-type-context';
-import {applyCssVars} from './utils/css';
-
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {DataAttributes} from './utils/types';
-
-export type VerticalSpace = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
-
-type CommonProps = {
-    verticalSpace?: VerticalSpace;
-    collapseBreakpoint?: 'tablet' | 'mobile';
-    dataAttributes?: DataAttributes;
-};
-
-type PropsChildren = {
-    children: React.ReactNode;
-};
-
-type PropsTemplate6plus6 = {
-    template: '6+6';
-    left: React.ReactNode;
-    right: React.ReactNode;
-};
-
-type PropsTemplate8plus4 = {
-    template: '8+4';
-    left: React.ReactNode;
-    right: React.ReactNode;
-};
-
-type PropsTemplate4plus6 = {
-    template: '4+6';
-    left: React.ReactNode;
-    right: React.ReactNode;
-};
-
-type PropsTemplate5plus4 = {
-    template: '5+4';
-    left: React.ReactNode;
-    right: React.ReactNode;
-};
-
-type PropsTemplate3plus9 = {
-    template: '3+9';
-    left: React.ReactNode;
-    right: React.ReactNode;
-};
-
-type PropsTemplate10 = {
-    template: '10';
-    children: React.ReactNode;
-};
-
-type PropsTemplate8 = {
-    template: '8';
-    children: React.ReactNode;
-};
-
-type Props = CommonProps &
-    ExclusifyUnion<
-        | PropsChildren
-        | PropsTemplate6plus6
-        | PropsTemplate8plus4
-        | PropsTemplate4plus6
-        | PropsTemplate5plus4
-        | PropsTemplate3plus9
-        | PropsTemplate10
-        | PropsTemplate8
-    >;
-
-const GridLayout = ({
-    dataAttributes,
-    template,
-    left,
-    right,
-    verticalSpace,
-    collapseBreakpoint = 'tablet',
-    children,
-}: Props): JSX.Element => {
-    const prefixedDataAttributes = getPrefixedDataAttributes(dataAttributes, 'GridLayout');
-
-    const spanStyles = (n: number) => ({
-        className: classnames(styles.span, {
-            [styles.desktopLargeColumn]: n >= 10,
-            [styles.desktopMediumColumn]: n > 5 && n < 10,
-            [styles.desktopSmallColumn]: n <= 5,
-        }),
-        style: applyCssVars({[styles.vars.colSpan]: String(n)}),
-    });
-
-    const gridStyles = {
-        className: classnames(styles.grid, {[styles.collapsedInTablet]: collapseBreakpoint === 'tablet'}),
-        style: verticalSpace
-            ? applyCssVars({
-                  [styles.vars.verticalSpace]: `${verticalSpace}px`,
-              })
-            : undefined,
-    };
-
-    if (template === '6+6') {
-        return (
-            <div {...gridStyles} {...prefixedDataAttributes}>
-                <DesktopContainerTypeContextProvider value="medium">
-                    <div {...spanStyles(6)}>{left}</div>
-                    <div {...spanStyles(6)}>{right}</div>
-                </DesktopContainerTypeContextProvider>
-            </div>
-        );
-    }
-
-    if (template === '8+4') {
-        return (
-            <div {...gridStyles} {...prefixedDataAttributes}>
-                <DesktopContainerTypeContextProvider value="medium">
-                    <div {...spanStyles(8)}>{left}</div>
-                </DesktopContainerTypeContextProvider>
-                <DesktopContainerTypeContextProvider value="small">
-                    <div {...spanStyles(4)}>{right}</div>
-                </DesktopContainerTypeContextProvider>
-            </div>
-        );
-    }
-
-    if (template === '4+6') {
-        return (
-            <div {...gridStyles} {...prefixedDataAttributes}>
-                <DesktopContainerTypeContextProvider value="small">
-                    <div {...spanStyles(4)}>{left}</div>
-                </DesktopContainerTypeContextProvider>
-                <div {...spanStyles(1)} />
-                <DesktopContainerTypeContextProvider value="medium">
-                    <div {...spanStyles(6)}>{right}</div>
-                </DesktopContainerTypeContextProvider>
-                <div {...spanStyles(1)} />
-            </div>
-        );
-    }
-
-    if (template === '5+4') {
-        return (
-            <div {...gridStyles} {...prefixedDataAttributes}>
-                <DesktopContainerTypeContextProvider value="small">
-                    <div {...spanStyles(1)} />
-                    <div {...spanStyles(5)}>{left}</div>
-                    <div {...spanStyles(1)} />
-                    <div {...spanStyles(4)}>{right}</div>
-                    <div {...spanStyles(1)} />
-                </DesktopContainerTypeContextProvider>
-            </div>
-        );
-    }
-
-    if (template === '3+9') {
-        return (
-            <div {...gridStyles} {...prefixedDataAttributes}>
-                <DesktopContainerTypeContextProvider value="small">
-                    <div {...spanStyles(3)}>{left}</div>
-                </DesktopContainerTypeContextProvider>
-                <DesktopContainerTypeContextProvider value="medium">
-                    <div {...spanStyles(9)}>{right}</div>
-                </DesktopContainerTypeContextProvider>
-            </div>
-        );
-    }
-
-    if (template === '10') {
-        return (
-            <div {...gridStyles} {...prefixedDataAttributes}>
-                <div {...spanStyles(1)} />
-                <DesktopContainerTypeContextProvider value="large">
-                    <div {...spanStyles(10)}>{children}</div>
-                </DesktopContainerTypeContextProvider>
-                <div {...spanStyles(1)} />
-            </div>
-        );
-    }
-
-    if (template === '8') {
-        return (
-            <div {...gridStyles} {...prefixedDataAttributes}>
-                <div {...spanStyles(2)} />
-                <DesktopContainerTypeContextProvider value="medium">
-                    <div {...spanStyles(8)}>{children}</div>
-                </DesktopContainerTypeContextProvider>
-                <div {...spanStyles(2)} />
-            </div>
-        );
-    }
-
-    return (
-        <div {...gridStyles} {...prefixedDataAttributes}>
-            {children}
-        </div>
-    );
-};
-
-export default GridLayout;