@arquimedes.co/eureka-forms 2.0.32-test → 2.0.34-test

package/dist/mjs/Shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Autocomplete, { createFilterOptions, } from '@material-ui/lab/Autocomplete';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import { cloneElement } from 'react';
+import { MenuItem, Popper } from '@material-ui/core';
+import RoundedSelect from '../RoundedSelect/RoundedSelect';
+import CircularProgress from '@material-ui/core/CircularProgress';
+const filter = createFilterOptions();
+const useTextfieldStyles = (props) => makeStyles(() => ({
+    root: {
+        opacity: props.hidden ? 0.5 : 1,
+        borderRadius: props.borderRadius,
+        '& input, textarea': {
+            cursor: props.cantEdit || props.hidden ? 'default' : 'text',
+            fontWeight: props.fontWeight,
+            color: props.color,
+            fontSize: props.fontSize,
+            '&::placeholder': {
+                fontSize: props.fontSize,
+            },
+            backgroundColor: props.backgroundColor,
+            borderRadius: props.borderRadius,
+            height: props.height,
+            marginTop: '0px !important',
+            padding: '0px 38px 0px 12px !important',
+        },
+        '& .EF-MuiInputBase-root': {
+            padding: '0px !important',
+            pointerEvents: 'all',
+        },
+        '& label': {
+            marginTop: '-4px',
+            fontSize: props.fontSize,
+            color: props.color?.startsWith('#')
+                ? props.color + '8a'
+                : props.color,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            maxWidth: 'calc(100% - 22px)',
+        },
+        '& label.EF-MuiInputLabel-shrink': {
+            marginTop: '0px',
+            maxWidth: 'calc(100% - 5px)',
+        },
+        '& input + fieldset': {
+            borderRadius: props.borderRadius,
+        },
+        '& .EF-MuiInput-underline:after': {
+            borderBottomColor: props.outlineColor,
+        },
+        '& .EF-MuiOutlinedInput-root': {
+            borderRadius: props.borderRadius,
+            '&.Mui-focused fieldset': {
+                borderColor: props.focusColor,
+                borderWidth: props.readOnly ? 1 : 2,
+            },
+            '& .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+                pointerEvents: 'all',
+            },
+            height: props.height,
+            '& .EF-MuiAutocomplete-input': {
+                height: props.height,
+                marginTop: -10,
+            },
+            '& .EF-MuiAutocomplete-input::placeholder': {
+                color: '#787878',
+                opacity: 1,
+            },
+        },
+        '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: props.cantEdit || props.hidden
+                ? props.outlineColor
+                : props.focusColor,
+        },
+        '& label.Mui-focused': {
+            color: props.focusColor,
+        },
+        '& .Mui-error': {
+            color: props.errorColor + ' !important',
+        },
+        '& .EF-MuiFormHelperText-root': {
+            color: props.helperTextColor,
+        },
+        '& .EF-MuiFormHelperText-root.Mui-error': {
+            color: props.errorColor + ' !important',
+        },
+        '& .EF-MuiFormLabel-root.Mui-disabled': {
+            color: '#0000008a',
+        },
+        '& .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: '#0000003b',
+        },
+        '& .EF-MuiAutocomplete-popupIndicator': {
+            padding: 0,
+            color: props.color?.startsWith('#')
+                ? props.color + '8a'
+                : props.color,
+        },
+        '& .EF-MuiAutocomplete-popupIndicatorOpen': {
+            transform: props.showIcon ? 'none' : 'rotate(180deg)',
+        },
+        '& .EF-MuiAutocomplete-clearIndicator': {
+            display: 'none',
+        },
+        '& .EF-MuiAutocomplete-endAdornment': {
+            top: 'calc(50% - 13px)',
+            color: props.color?.startsWith('#')
+                ? props.color + '8a'
+                : props.color,
+        },
+    },
+}));
+export default function RoundedSmartSelect({ options, value = '', handleUpdate, label, getValueString = (value) => value.value, color = '#293241', errorColor = '#cc2936', focusColor = '#3d5a7f', helperTextColor = '#989898', outlineColor = '#b8b8b8', backgroundColor = '#ffffff', cantEdit = false, loading = false, height = '31px', fontSize = '1rem', required, changeListener, error, getOptionSelected, helperText, readOnly = false, borderRadius = 10, fontWeight = '400', icon, searchable = false, containerMargin = '0px', showIcon = true, inputRef, disabled, hidden = false, creatable = false, onBlur, name, onFocus, }) {
+    const props = {
+        color,
+        height,
+        errorColor,
+        focusColor,
+        outlineColor,
+        helperTextColor,
+        backgroundColor,
+        borderRadius,
+        readOnly,
+        fontSize,
+        fontWeight,
+        hidden,
+        cantEdit,
+        showIcon: showIcon && icon !== undefined,
+    };
+    const textFieldClasses = useTextfieldStyles(props)();
+    if (searchable) {
+        return (_jsx(Autocomplete, { onFocus: onFocus, "data-testid": "smart-select", size: "small", fullWidth: true, openOnFocus: true, freeSolo: creatable, disabled: cantEdit || disabled, popupIcon: loading ? (_jsx(CircularProgress, { size: 22, style: { color: '#757575', marginTop: 1 } })) : showIcon && icon ? (icon) : undefined, onOpen: () => { }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options ?? [], getOptionLabel: (option) => {
+                // Value selected with enter, right from the input
+                if (typeof option === 'string') {
+                    return option;
+                }
+                else if (option?.inputValue) {
+                    return option.inputValue ?? '';
+                }
+                else {
+                    // Regular option
+                    return option?.label ?? '';
+                }
+            }, getOptionSelected: getOptionSelected, PopperComponent: ({ style, ...props }) => (_jsx(Popper, { ...props, style: { ...style, zIndex: 1305 } })), value: !loading && value ? value : null, onChange: (event, newValue) => {
+                if (creatable) {
+                    if (typeof newValue === 'string') {
+                        changeListener?.(newValue);
+                        handleUpdate?.(newValue);
+                    }
+                    else if (newValue && newValue.inputValue) {
+                        changeListener?.(newValue.inputValue);
+                        handleUpdate?.(newValue.inputValue); // Create a new value from the user input
+                    }
+                    else {
+                        changeListener?.(newValue?.label);
+                        handleUpdate?.(newValue?.label);
+                    }
+                }
+                else {
+                    changeListener?.(newValue);
+                    handleUpdate?.(newValue);
+                }
+            }, filterOptions: (options, params) => {
+                if (value && value.label === params?.inputValue) {
+                    return options;
+                }
+                else {
+                    const filtered = filter(options, params);
+                    // Suggest the creation of a new value
+                    if (creatable && params.inputValue !== '') {
+                        filtered.push({
+                            inputValue: params.inputValue,
+                            label: `Crear "${params.inputValue}"`,
+                        });
+                    }
+                    return filtered;
+                }
+            }, renderOption: (option) => typeof option === 'string' ? option : option.label, renderInput: (params) => (_jsx(TextField, { classes: textFieldClasses, ...params, inputRef: inputRef, onBlur: onBlur, name: name, variant: "outlined", label: label, required: required, error: !hidden && error, helperText: hidden ? undefined : helperText })), noOptionsText: "No hay opciones" }));
+    }
+    else {
+        return (_jsxs(RoundedSelect, { onBlur: onBlur, onFocus: onFocus, "data-testid": "smart-select", inputRef: inputRef, name: name, fullWidth: true, handleUpdate: (event) => {
+                handleUpdate?.(options?.find((option) => getValueString(option) === event.target.value));
+            }, value: loading ? '' : getValueString(value), color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, backgroundColor: backgroundColor, outlineColor: outlineColor, cantEdit: cantEdit, disabled: cantEdit || disabled, label: label, required: required, readOnly: readOnly, helperText: hidden ? undefined : helperText, containerMargin: containerMargin, height: height, fontSize: fontSize, error: !hidden && error, iconComponent: loading
+                ? () => (_jsx("div", { style: {
+                        marginTop: 3,
+                        marginRight: 8,
+                    }, children: _jsx(CircularProgress, { size: 22, style: {
+                            color: '#757575',
+                        } }) }))
+                : showIcon && icon
+                    ? (props) => cloneElement(icon, props)
+                    : undefined, showIcon: showIcon, children: [_jsx(MenuItem, { value: '', "data-testid": 'smart-select-empty', style: { whiteSpace: 'normal' }, children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }, 'EMPTY'), options?.map((option) => (_jsx(MenuItem, { value: getValueString(option), style: { whiteSpace: 'normal' }, "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(MenuItem, { value: getValueString(value), style: { whiteSpace: 'normal' }, children: value.label ?? '' }, getValueString(value)))] }));
+    }
+}

package/dist/mjs/Shared/RoundedSmartSelect/RoundedSmartSelect.stories.d.ts

@@ -0,0 +1,36 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedSmartSelect from './RoundedSmartSelect';
+declare const meta: {
+    component: typeof RoundedSmartSelect;
+    tags: string[];
+    args: {
+        searchable: false;
+        focusColor: string;
+        helperTextColor: string;
+        outlineColor: string;
+        backgroundColor: string;
+        color: string;
+        readOnly: false;
+        borderRadius: number;
+        fontSize: string;
+        errorColor: string;
+        fontWeight: string;
+        cantEdit: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const Default: Story;
+export declare const Focused: Story;
+export declare const FocusedSearchable: Story;
+export declare const SearchableWithOptions: Story;
+export declare const SearchableWithSearchAndOptions: Story;
+export declare const Loading: Story;
+export declare const LoadingOpened: Story;
+export declare const SearchableLoadingOpened: Story;
+export declare const WithValueandLabel: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;

package/dist/mjs/Shared/RoundedSmartSelect/RoundedSmartSelect.stories.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import RoundedSmartSelect from './RoundedSmartSelect';
+import { within, userEvent, screen } from '@storybook/testing-library';
+const meta = {
+    component: RoundedSmartSelect,
+    tags: ['autodocs'],
+    args: {
+        searchable: false,
+        focusColor: '#3d5a7f',
+        helperTextColor: '#989898',
+        outlineColor: '#0000003b',
+        backgroundColor: '#ffffff',
+        color: '#293241',
+        readOnly: false,
+        borderRadius: 10,
+        fontSize: '1rem',
+        errorColor: '#cc2936',
+        fontWeight: '300',
+        cantEdit: false,
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        label: 'Label',
+    },
+};
+export const Default = {
+    args: {
+        label: 'Label',
+        options: [
+            {
+                label: 'Option',
+                value: 'option',
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+        const option = screen.getByTestId('smart-select-option');
+        await userEvent.click(option);
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.handleUpdate?.(value);
+            setArgs({ value });
+        };
+        return (_jsx(RoundedSmartSelect, { ...args, ref: undefined, handleUpdate: onValueChange }));
+    },
+};
+export const Focused = {
+    args: {
+        label: 'Label',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+        const option = screen.getByTestId('smart-select-empty');
+        await userEvent.click(option);
+    },
+};
+export const FocusedSearchable = {
+    args: {
+        label: 'Label',
+        searchable: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const SearchableWithOptions = {
+    args: {
+        label: 'Label',
+        searchable: true,
+        options: [
+            {
+                label: 'Option',
+                value: 'option',
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const SearchableWithSearchAndOptions = {
+    args: {
+        label: 'Label',
+        searchable: true,
+        value: 'Opt',
+        options: [
+            {
+                label: 'Option',
+                value: 'option',
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const Loading = {
+    args: {
+        label: 'Label',
+        loading: true,
+    },
+};
+export const LoadingOpened = {
+    args: {
+        label: 'Label',
+        loading: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const SearchableLoadingOpened = {
+    args: {
+        label: 'Label',
+        searchable: true,
+        loading: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const WithValueandLabel = {
+    args: {
+        label: 'Label',
+        value: 'Textinput Value',
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const ErrorColor = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+        errorColor: 'blue',
+    },
+};
+export const DifferentColors = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        color: 'blue',
+    },
+};

package/dist/mjs/Shared/RoundedTextField/RoundedTextField.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { TextFieldProps } from '@material-ui/core/TextField';
+interface StyleProps {
+    /** The color of the text */
+    textColor?: string;
+    /** The color of the outline when selected and hovered on */
+    focusColor?: string;
+    /** The color of the error to display */
+    errorColor?: string;
+    /** The color of the outline when it is not selected */
+    outlineColor?: string;
+    /** The backgroundColor of the input */
+    backgroundColor?: string;
+    /** The borderRadius of the input */
+    borderRadius?: number;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    /** The padding of the input */
+    padding?: string;
+    /** The size of the font to display the input in */
+    fontSize?: number | string;
+    /** The weight of the font of the value and the placeholder */
+    fontWeight?: number | string;
+    /** If the input is multiline */
+    multiline?: boolean;
+    /** Cant edit */
+    cantEdit?: boolean;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** The icon to display */
+    icon?: React.ReactNode;
+    /** The max length of the string */
+    maxLength?: number;
+}
+interface RoundedTextFieldProps extends StyleProps {
+    /** The value of the textfield */
+    value?: string;
+}
+/**
+ * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ */
+declare class RoundedTextField extends React.Component<RoundedTextFieldProps & TextFieldProps> {
+    render(): JSX.Element;
+}
+export default RoundedTextField;

package/dist/mjs/Shared/RoundedTextField/RoundedTextField.js

@@ -0,0 +1,129 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+const useTextfieldStyles = (props) => makeStyles(() => ({
+    root: {
+        borderRadius: props.borderRadius,
+        '& input, textarea': {
+            cursor: props.cantEdit ? 'default' : 'text',
+            padding: props.multiline ? props.padding : props.padding,
+            fontWeight: props.fontWeight,
+            color: props.textColor,
+            fontSize: props.fontSize,
+            '&::placeholder': {
+                fontSize: props.fontSize,
+            },
+            backgroundColor: props.backgroundColor,
+            borderRadius: props.borderRadius,
+        },
+        '& label': {
+            marginTop: props.multiline ? '0px' : '-4px',
+            fontSize: props.fontSize,
+            color: props.textColor + '8a',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            maxWidth: 'calc(100% - 22px)',
+        },
+        '& label.EF-MuiInputLabel-shrink': {
+            marginTop: '0px',
+            maxWidth: 'calc(100% - 5px)',
+        },
+        '& input + fieldset': {
+            borderRadius: props.borderRadius,
+        },
+        '& .EF-MuiInput-underline:after': {
+            borderBottomColor: props.outlineColor,
+        },
+        '& .EF-MuiOutlinedInput-root': {
+            borderRadius: props.borderRadius,
+            '&.Mui-focused fieldset': {
+                borderColor: props.focusColor,
+                borderWidth: props.readOnly ? 1 : 2,
+            },
+            '& .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+                '& legend': {
+                    fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                },
+            },
+        },
+        '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: props.cantEdit
+                ? props.outlineColor
+                : props.focusColor,
+        },
+        '& label.Mui-focused': {
+            color: props.focusColor,
+        },
+        '& .Mui-error': {
+            color: props.errorColor,
+        },
+        '& .EF-MuiOutlinedInput-adornedEnd': {
+            paddingRight: '7px',
+        },
+        '& .EF-MuiFormHelperText-root': {
+            color: props.helperTextColor,
+            position: 'relative',
+            marginRight: props.maxLength ? 40 : 14,
+        },
+        '& .EF-MuiFormHelperText-root.Mui-error': {
+            color: props.errorColor,
+        },
+        '& .EF-MuiOutlinedInput-multiline': {
+            padding: 0,
+            backgroundColor: props.backgroundColor,
+        },
+    },
+}));
+function CustomTextfield({ focusColor = '#3d5a7f', helperTextColor = '#989898', outlineColor = '#0000003b', backgroundColor = 'white', textColor = '#293241', readOnly = false, borderRadius = 10, padding = '6px 12px', fontSize = '1rem', errorColor = '#cc2936', fontWeight = '300', multiline = false, cantEdit = false, maxLength, value, icon, ...others }) {
+    const classes = useTextfieldStyles({
+        padding,
+        textColor,
+        errorColor,
+        focusColor,
+        outlineColor,
+        helperTextColor,
+        backgroundColor,
+        borderRadius,
+        readOnly,
+        fontSize,
+        fontWeight,
+        multiline,
+        cantEdit,
+        maxLength,
+    })();
+    const length = maxLength ? value?.length ?? null : null;
+    const inputProps = {
+        readOnly,
+        disabled: cantEdit,
+        endAdornment: icon,
+    };
+    if (maxLength) {
+        inputProps.inputProps = { maxLength };
+    }
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: [_jsx(TextField, { classes: classes, ...others, value: value ?? '', multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: inputProps, helperText: others.helperText ? (_jsxs(React.Fragment, { children: [others.helperText, length !== null && (_jsxs("label", { style: {
+                                position: 'absolute',
+                                top: '1px',
+                                right: '-32px',
+                                fontSize: '12px',
+                                color: helperTextColor,
+                            }, children: [length, "/", maxLength] }))] })) : undefined }), length !== null && !others.helperText && (_jsxs("div", { style: {
+                    fontSize: '12px',
+                    color: helperTextColor,
+                    textAlign: 'right',
+                    paddingRight: '8px',
+                    paddingTop: '2px',
+                    paddingBottom: '2px',
+                }, children: [length, "/", maxLength] }))] }));
+}
+/**
+ * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ */
+class RoundedTextField extends React.Component {
+    render() {
+        return _jsx(CustomTextfield, { ...this.props });
+    }
+}
+export default RoundedTextField;

package/dist/mjs/Shared/RoundedTextField/RoundedTextField.stories.d.ts

@@ -0,0 +1,37 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedTextField from './RoundedTextField';
+declare const meta: {
+    component: typeof RoundedTextField;
+    tags: string[];
+    args: {
+        focusColor: string;
+        helperTextColor: string;
+        outlineColor: string;
+        backgroundColor: string;
+        textColor: string;
+        readOnly: false;
+        borderRadius: number;
+        padding: string;
+        fontSize: string;
+        errorColor: string;
+        fontWeight: string;
+        multiline: false;
+        cantEdit: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const EmptyLabel: Story;
+export declare const Default: Story;
+export declare const Focused: Story;
+export declare const FocusedNoLabel: Story;
+export declare const WithValue: Story;
+export declare const Multiline: Story;
+export declare const WithHelperText: Story;
+export declare const WithValueandLabel: Story;
+export declare const WithMaxLength: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;