@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/decimal-field.tsx

@@ -0,0 +1,160 @@
+'use client';
+import * as React from 'react';
+import {useFieldProps} from './form-context';
+import {useTheme} from './hooks';
+import {TextFieldBaseAutosuggest} from './text-field-base';
+import {createChangeEvent} from './utils/dom';
+import {useRifm} from 'rifm';
+import {combineRefs} from './utils/common';
+
+import type {Locale} from './utils/locale';
+import type {CommonFormFieldProps} from './text-field-base';
+
+const getLocalDecimalChar = (locale: Locale): string => {
+    try {
+        return (1.1).toLocaleString(locale.replace('_', '-'))[1];
+    } catch (e) {
+        return '.';
+    }
+};
+
+const format = (value: any, maxDecimals: number) => {
+    // do not make the localDecimalChar replacement here. Instead, keep the one the user typed.
+    // Make that replacement in `replace` prost-processor. It is what rifm lib expects.
+    const sanitized = String(value ?? '').replace(/[^.,\d]/g, ''); // remove non digits or decimal separator chars;
+    const firstSeparator = /[.,]/.exec(sanitized);
+    const parts = sanitized.split(/[.,]/);
+
+    if (parts.length === 0) {
+        // empty
+        return '';
+    }
+
+    if (firstSeparator && maxDecimals > 0) {
+        // value includes one or more decimal separators, keep the first one
+        return parts.shift() + firstSeparator[0] + parts.join('').slice(0, maxDecimals);
+    } else {
+        // no fractional part, return "as is"
+        return parts[0];
+    }
+};
+
+/**
+ * typed as `any` because `React.HTMLProps<>` has no equivalent in flowtype
+ * not a big problem because this component is not exported to the public API
+ *
+ * The correct type would be:
+ *
+ * type DecimalInputProps = React.HTMLProps<HTMLInputElement> & {inputRef: React.Ref<HTMLInputElement>}
+ */
+type DecimalInputProps = any;
+
+export const DecimalInput = ({
+    inputRef,
+    value,
+    defaultValue,
+    onChange,
+    maxDecimals,
+    ...rest
+}: DecimalInputProps): JSX.Element => {
+    const {i18n} = useTheme();
+    const localDecimalChar = getLocalDecimalChar(i18n.locale);
+
+    const replace = (value: any) => String(value ?? '').replace(/[.,]/g, localDecimalChar); // use local decimal char
+
+    const [selfValue, setSelfValue] = React.useState(defaultValue ?? '');
+    const ref = React.useRef<HTMLInputElement | null>(null);
+
+    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 rifm = useRifm({
+        format: (value) => format(value, maxDecimals),
+        replace,
+        value: controlledValue,
+        onChange: handleChangeValue,
+        accept: /[\d.,]+/g,
+    });
+
+    return (
+        <input
+            {...rest}
+            type="text"
+            inputMode="decimal" // shows decimal keypad in Chrome for Android
+            // shows regular keypad in iOS < 12.2 (there's no way to show a decimal keypad in those versions)
+            // https://bugs.webkit.org/show_bug.cgi?id=183621
+            value={rifm.value}
+            onChange={rifm.onChange}
+            ref={combineRefs(inputRef, ref)}
+        />
+    );
+};
+
+export interface DecimalFieldProps extends CommonFormFieldProps {
+    onChangeValue?: (value: string, rawValue: string) => void;
+    prefix?: React.ReactNode;
+    /** defaults to Infinity */
+    maxDecimals?: number;
+}
+
+const DecimalField = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue,
+    onBlur,
+    value,
+    defaultValue,
+    maxDecimals = Infinity,
+    dataAttributes,
+    ...rest
+}: DecimalFieldProps): JSX.Element => {
+    const processValue = (value: string) => value.trim();
+
+    const fieldProps = useFieldProps({
+        name,
+        label,
+        value,
+        defaultValue,
+        processValue,
+        helperText,
+        optional,
+        error,
+        disabled,
+        onBlur,
+        validate,
+        validateOnBlurInsideForm,
+        onChange,
+        onChangeValue,
+    });
+
+    return (
+        <TextFieldBaseAutosuggest
+            {...rest}
+            {...fieldProps}
+            inputComponent={DecimalInput}
+            inputProps={{maxDecimals}}
+            dataAttributes={{'component-name': 'DecimalField', testid: 'DecimalField', ...dataAttributes}}
+        />
+    );
+};
+
+export default DecimalField;

package/src/desktop-container-type-context.tsx

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+
+export type DesktopContainerType = 'small' | 'medium' | 'large';
+
+const DesktopContainerTypeContext = React.createContext<DesktopContainerType | null>(null);
+
+export const useDesktopContainerType = (): DesktopContainerType | null =>
+    React.useContext(DesktopContainerTypeContext);
+
+export default ({children, value}: {children: React.ReactNode; value: DesktopContainerType}): JSX.Element => {
+    return (
+        <DesktopContainerTypeContext.Provider value={value}>{children}</DesktopContainerTypeContext.Provider>
+    );
+};

package/src/dialog-context.tsx

@@ -0,0 +1,81 @@
+'use client';
+import * as React from 'react';
+
+import type {AlertProps, ConfirmProps, DialogProps, ExtendedDialogProps} from './dialog';
+
+const DialogContext = React.createContext<{
+    mounted: boolean;
+    dialog: DialogProps | null;
+    setDialog: React.Dispatch<React.SetStateAction<DialogProps | null>>;
+}>({mounted: false, dialog: null, setDialog: () => {}});
+
+const ModalDialog = React.lazy(() => import(/* webpackChunkName: "dialog" */ './dialog'));
+
+const throwMissingDialogRootError = () => {
+    throw Error(
+        'Tried to show a dialog but the DialogRoot component was not mounted (missing ThemeContextProvider?)'
+    );
+};
+
+export const useDialog = (): {
+    alert: (params: AlertProps) => void;
+    confirm: (params: ConfirmProps) => void;
+    dialog: (params: ExtendedDialogProps) => void;
+} => {
+    const {dialog: currentDialog, setDialog, mounted} = React.useContext(DialogContext);
+
+    const showDialog = React.useCallback(
+        (params: DialogProps) => {
+            if (!mounted) {
+                throwMissingDialogRootError();
+            }
+            if (params && currentDialog) {
+                throw Error('Tried to show a dialog on top of another dialog');
+            }
+            setDialog({triggerEl: document.activeElement as HTMLElement, ...params});
+        },
+        [setDialog, currentDialog, mounted]
+    );
+
+    return React.useMemo(
+        () => ({
+            alert: (params: AlertProps) => showDialog({type: 'alert', ...params}),
+            confirm: (params: ConfirmProps) => showDialog({type: 'confirm', ...params}),
+            dialog: (params: ExtendedDialogProps) => showDialog({type: 'dialog', ...params}),
+        }),
+        [showDialog]
+    );
+};
+
+type DialogRootProps = {children?: React.ReactNode};
+
+export const DialogRoot = ({children}: DialogRootProps): JSX.Element => {
+    const {mounted} = React.useContext(DialogContext);
+    const [dialog, setDialog] = React.useState<DialogProps | null>(null);
+    const value = React.useMemo(() => ({mounted: true, dialog, setDialog}), [dialog, setDialog]);
+
+    // do not create a new context whith nested theme context providers
+    if (mounted) {
+        return <>{children}</>;
+    }
+
+    return (
+        <DialogContext.Provider value={value}>
+            {children}
+            {dialog && (
+                <React.Suspense fallback={null}>
+                    <ModalDialog
+                        {...dialog}
+                        onDestroy={() => {
+                            setDialog(null);
+                            // The focus doesn't work without this timeout
+                            setTimeout(() => {
+                                dialog.triggerEl?.focus?.();
+                            }, 0);
+                        }}
+                    />
+                </React.Suspense>
+            )}
+        </DialogContext.Provider>
+    );
+};

package/src/dialog.css.ts

@@ -0,0 +1,155 @@
+import {style, keyframes, styleVariants} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+import {vars} from './skins/skin-contract.css';
+import {sprinkles} from './sprinkles.css';
+import {pxToRem} from './utils/css';
+
+export const ANIMATION_DURATION_MS = 200;
+
+const fadeIn = keyframes({
+    '0%': {opacity: 0},
+    '100%': {opacity: 1},
+});
+
+const fadeScale = keyframes({
+    '0%': {
+        opacity: 0,
+        transform: 'scale(.8)',
+    },
+    '100%': {
+        opacity: 1,
+        transform: 'scale(1)',
+    },
+});
+
+export const wrapper = style([
+    sprinkles({
+        position: 'relative',
+    }),
+]);
+
+export const modalOpacityLayer = style([
+    sprinkles({
+        position: 'fixed',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        background: vars.colors.backgroundOverlay,
+    }),
+    {
+        minHeight: 0,
+        minWidth: 0,
+        animation: `${fadeIn} ${ANIMATION_DURATION_MS}ms ease-in-out`,
+        transition: `opacity ${ANIMATION_DURATION_MS}ms ease-in-out`,
+    },
+]);
+
+export const closedOpactityLayer = style({opacity: 0});
+
+export const modalCloseButtonContainer = style([
+    sprinkles({
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        padding: 16,
+    }),
+    {
+        '@media': {
+            [mq.desktopOrBigger]: {
+                padding: 24,
+            },
+        },
+    },
+]);
+
+export const modalContent = style([
+    sprinkles({
+        background: vars.colors.background,
+        borderRadius: vars.borderRadii.container,
+    }),
+    {
+        animation: `${fadeScale} ${ANIMATION_DURATION_MS}ms ease-in-out`,
+        willChange: 'transform, opacity',
+        transition: `opacity ${ANIMATION_DURATION_MS}ms ease-in-out, transform ${ANIMATION_DURATION_MS}ms ease-in-out`,
+    },
+]);
+
+export const closedModalContent = style({opacity: 0, transform: 'scale(.8)'});
+
+const dialogContainer = style([
+    sprinkles({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+    }),
+    {
+        width: 'calc(100vw - 48px)',
+        margin: 'auto',
+        maxHeight: 'calc(100vh - 32px)',
+
+        '@media': {
+            [mq.desktopOrBigger]: {
+                width: 680,
+                padding: 40,
+                maxHeight: 'calc(100vh - 64px)',
+            },
+        },
+    },
+]);
+
+export const variants = styleVariants({
+    dialog: [
+        dialogContainer,
+        sprinkles({
+            paddingTop: 40,
+            paddingBottom: 24,
+            paddingX: 24,
+        }),
+    ],
+    default: [
+        dialogContainer,
+        sprinkles({
+            padding: 24,
+        }),
+    ],
+});
+
+export const dialogContent = style([
+    sprinkles({
+        flex: 1,
+        minHeight: 0,
+    }),
+    {
+        overflowY: 'auto',
+    },
+]);
+
+export const dialogActions = style([
+    sprinkles({
+        paddingTop: 24,
+    }),
+    {
+        '@media': {
+            [mq.desktopOrBigger]: {
+                paddingTop: 32,
+            },
+        },
+    },
+]);
+
+export const iconContainer = style({
+    width: pxToRem(40),
+    height: pxToRem(40),
+
+    '@media': {
+        [mq.desktopOrBigger]: {
+            width: pxToRem(64),
+            height: pxToRem(64),
+        },
+    },
+});