@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/form.tsx

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

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

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