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

package/src/Shared/RoundedSmartSelect/RoundedSmartSelect.tsx

@@ -0,0 +1,420 @@
+import Autocomplete, {
+    createFilterOptions,
+} from '@material-ui/lab/Autocomplete';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import React, { cloneElement } from 'react';
+import { MenuItem, Popper, TextFieldProps } from '@material-ui/core';
+import RoundedSelect from '../RoundedSelect/RoundedSelect';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { ClassNameMap } from '@material-ui/core/styles/withStyles';
+
+const filter = createFilterOptions<{ label: string; inputValue?: string }>();
+
+interface StyleProps {
+    /** The color of the outline when selected and hovered on */
+    focusColor?: string;
+    /** The color of the outline when it is not selected */
+    outlineColor?: string;
+    /** The color of the background  */
+    backgroundColor?: string;
+    /** The color of the error to display */
+    errorColor?: string;
+    /** If the style should change on hover */
+    cantEdit?: boolean;
+    /** The hight of the container */
+    height?: string;
+    /** The color of the text in the form */
+    color?: string;
+    /** The fontsize of the content */
+    fontSize?: string;
+    /** The borderRadius of the input */
+    borderRadius?: number;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    /** The weight of the font of the value and the placeholder */
+    fontWeight?: number | string;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** If custom icon exists and should be displayed */
+    showIcon?: boolean;
+    /** If the selector is completely hidden */
+    hidden?: boolean;
+}
+
+const useTextfieldStyles = (props: StyleProps): (() => ClassNameMap) =>
+    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 interface RoundedSmartSelectProps
+    extends Omit<TextFieldProps, 'color' | 'onFocus'>,
+        StyleProps {
+    /** Currently selected value */
+    value: any;
+    /** The array of options to display */
+    options?: any[];
+    /** If the input is loading */
+    loading?: boolean;
+    /** function called when value changes */
+    handleUpdate?: (value: any) => void;
+    /** Strig to place in the label */
+    label: string;
+    /** The helper Text to display */
+    helperText?: string;
+    /** The margin around the selector */
+    containerMargin?: string;
+    /** The icon to display */
+    icon?: React.ReactNode;
+    /** If the options are searchable */
+    searchable?: boolean;
+    /** If can create new option */
+    creatable?: boolean;
+    /** Function to determine the currently selected option */
+    getOptionSelected?: (option: any, value: any) => boolean;
+    /** Function to determine the current value in string format */
+    getValueString?: (value: any) => string;
+    /** Function called on each value change */
+    changeListener?: (value: any) => void;
+    onFocus?: any;
+}
+export default function RoundedSmartSelect({
+    options,
+    value = '',
+    handleUpdate,
+    label,
+    getValueString = (value): string => 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,
+}: RoundedSmartSelectProps): JSX.Element {
+    const props: StyleProps = {
+        color,
+        height,
+        errorColor,
+        focusColor,
+        outlineColor,
+        helperTextColor,
+        backgroundColor,
+        borderRadius,
+        readOnly,
+        fontSize,
+        fontWeight,
+        hidden,
+        cantEdit,
+        showIcon: showIcon && icon !== undefined,
+    };
+
+    const textFieldClasses = useTextfieldStyles(props)();
+    if (searchable) {
+        return (
+            <Autocomplete
+                onFocus={onFocus}
+                data-testid="smart-select"
+                size="small"
+                fullWidth
+                openOnFocus
+                freeSolo={creatable}
+                disabled={cantEdit || disabled}
+                popupIcon={
+                    loading ? (
+                        <CircularProgress
+                            size={22}
+                            style={{ color: '#757575', marginTop: 1 }}
+                        />
+                    ) : showIcon && icon ? (
+                        icon
+                    ) : undefined
+                }
+                onOpen={(): void => {}}
+                loading={loading}
+                loadingText={'Cargando...'}
+                closeIcon={false}
+                options={options ?? []}
+                getOptionLabel={(option: any): string => {
+                    // 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 }: any): JSX.Element => (
+                    <Popper {...props} style={{ ...style, zIndex: 1305 }} />
+                )}
+                value={!loading && value ? value : null}
+                onChange={(event, newValue): void => {
+                    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): any[] => {
+                    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: any): string =>
+                    typeof option === 'string' ? option : option.label
+                }
+                renderInput={(params): JSX.Element => (
+                    <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 (
+            <RoundedSelect
+                onBlur={onBlur}
+                onFocus={onFocus}
+                data-testid="smart-select"
+                inputRef={inputRef}
+                name={name}
+                fullWidth
+                handleUpdate={(event): void => {
+                    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
+                        ? (): React.ReactNode => (
+                              <div
+                                  style={{
+                                      marginTop: 3,
+                                      marginRight: 8,
+                                  }}
+                              >
+                                  <CircularProgress
+                                      size={22}
+                                      style={{
+                                          color: '#757575',
+                                      }}
+                                  />
+                              </div>
+                          )
+                        : showIcon && icon
+                          ? (props: any): React.ReactNode =>
+                                cloneElement(icon as any, props)
+                          : undefined
+                }
+                showIcon={showIcon}
+            >
+                <MenuItem
+                    value={''}
+                    key={'EMPTY'}
+                    data-testid={'smart-select-empty'}
+                    style={{ whiteSpace: 'normal' }}
+                >
+                    <em>{options ? 'Sin Seleccionar' : 'Cargando...'}</em>
+                </MenuItem>
+                {options?.map((option) => (
+                    <MenuItem
+                        value={getValueString(option)}
+                        key={getValueString(option)}
+                        style={{ whiteSpace: 'normal' }}
+                        data-testid={'smart-select-' + getValueString(option)}
+                    >
+                        {option.label}
+                    </MenuItem>
+                ))}
+                {options === undefined && value && !loading && (
+                    <MenuItem
+                        value={getValueString(value)}
+                        key={getValueString(value)}
+                        style={{ whiteSpace: 'normal' }}
+                    >
+                        {value.label ?? ''}
+                    </MenuItem>
+                )}
+            </RoundedSelect>
+        );
+    }
+}

package/src/Shared/RoundedTextField/RoundedTextField.stories.tsx

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import RoundedTextField from './RoundedTextField';
+import { within, userEvent } from '@storybook/testing-library';
+import { ChangeEvent } from 'react';
+
+const meta = {
+    component: RoundedTextField,
+    tags: ['autodocs'],
+    args: {
+        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,
+    },
+} satisfies Meta<typeof RoundedTextField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+    args: {},
+};
+
+export const EmptyLabel: Story = {
+    args: {
+        label: 'Label',
+    },
+};
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+        await userEvent.type(emailInput, 'example-email@email.com', {
+            delay: 100,
+        });
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (
+            event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+        ): void => {
+            const value = event.target.value;
+            args.onChange?.(event);
+            setArgs({ value });
+        };
+        return (
+            <RoundedTextField
+                {...args}
+                ref={undefined}
+                onChange={onValueChange}
+            />
+        );
+    },
+};
+
+export const Focused: Story = {
+    args: {
+        label: 'Label',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+    },
+};
+
+export const FocusedNoLabel: Story = {
+    args: {},
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+    },
+};
+
+export const WithValue: Story = {
+    args: {
+        value: 'Textinput Value',
+    },
+};
+
+export const Multiline: Story = {
+    args: {
+        value: 'TextArea Value',
+        multiline: true,
+        minRows: 4,
+    },
+};
+
+export const WithHelperText: Story = {
+    args: {
+        helperText: 'Helper text',
+    },
+};
+
+export const WithValueandLabel: Story = {
+    args: {
+        label: 'Label',
+        value: 'Textinput Value',
+    },
+};
+
+export const WithMaxLength: Story = {
+    args: {
+        value: 'Value',
+        maxLength: 10,
+    },
+};
+
+export const Full: Story = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        maxLength: 10,
+    },
+};
+
+export const Error: Story = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+
+export const ErrorColor: Story = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+        errorColor: 'blue',
+    },
+};
+
+export const DifferentColors: Story = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        maxLength: 10,
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        textColor: 'blue',
+    },
+};