@arquimedes.co/eureka-forms 2.0.99 → 3.0.0-refactor

package/dist/Shared/ErkSelect/ErkSelect.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { FormControl, FormHelperText as MuiFormHelperText, InputLabel as MuiInputLabel, Select as MuiSelect, styled, InputAdornment, } from '@mui/material';
+export const StyledSelect = styled(MuiSelect)(({ theme, ...props }) => ({
+    borderRadius: 10,
+    opacity: props.disabled ? 0.5 : 1,
+    backgroundColor: theme.palette.background.default,
+    '&.EF-MuiInputBase-adornedEnd': {
+        paddingRight: 7,
+    },
+    '& .EF-MuiSelect-select': {
+        fontSize: '1rem',
+        padding: '6px 12px',
+        lineHeight: '1.188em',
+        height: '1.188em',
+        '&.EF-MuiInputBase-inputAdornedEnd': {
+            paddingRight: 0,
+        },
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    '& .EF-MuiOutlinedInput-notchedOutline': {
+        borderColor: theme.palette.outline.main,
+    },
+    '&:hover:not(.Mui-readOnly) .EF-MuiOutlinedInput-notchedOutline': {
+        borderColor: props.disabled || props.readOnly ? theme.palette.outline.main : theme.palette.primary.main,
+    },
+    '& .Mui-disabled, &.Mui-readOnly': {
+        cursor: 'default',
+        pointerEvents: 'none',
+    },
+    '&.EF-MuiInputBase-root.Mui-focused': {
+        '& .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.primary.main,
+            borderWidth: 2,
+        },
+    },
+    '& .EF-MuiInputAdornment-root': {
+        marginLeft: 0,
+        color: theme.palette.text.primary + 'a0',
+    },
+    '& .EF-MuiSelect-iconOpen': {
+        transform: props.IconComponent ? 'none' : undefined,
+    },
+}));
+export const StyledInputLabel = styled(MuiInputLabel)(({ theme, ...props }) => ({
+    color: theme.palette.text.primary + '8a',
+    '&.EF-MuiInputLabel-root.Mui-focused': {
+        color: theme.palette.primary.main,
+    },
+    '&.EF-MuiFormLabel-root:not(.EF-MuiInputLabel-shrink)': {
+        transform: 'translate(12px, 5px) scale(1)',
+        maxWidth: 'calc(100% - 40px)',
+    },
+    '&.Mui-error': {
+        color: theme.palette.error.main,
+    },
+    opacity: props.disabled ? 0.5 : 1,
+}));
+export const StyledHelperText = styled(MuiFormHelperText)(({ theme, ...props }) => ({
+    color: theme.palette.helperText.primary,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    opacity: props.disabled ? 0.5 : 1,
+    '&.Mui-error': {
+        color: theme.palette.error.main,
+    },
+}));
+function CustomSelect({ label, error, onChange, children, required, value = '', helperText, readOnly = false, disabled = false, IconComponent, ...others }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(FormControl, { fullWidth: true, size: "small", error: error, variant: "outlined", required: required, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, children: label })), _jsx(StyledSelect, { ...others, open: open, readOnly: readOnly, disabled: disabled, label: label, value: value, onChange: (event) => onChange?.(event?.target?.value), IconComponent: IconComponent ? () => _jsx(_Fragment, {}) : undefined, endAdornment: IconComponent ? (_jsx(InputAdornment, { position: "end", onClick: (e) => {
+                        e.stopPropagation();
+                        if (!readOnly && !disabled)
+                            setOpen(!open);
+                    }, children: _jsx(IconComponent, {}) })) : undefined, onFocus: (e) => {
+                    if (!e.relatedTarget?.closest('.EF-MuiPaper-root')) {
+                        setOpen(true);
+                    }
+                }, onOpen: () => setOpen(true), onClose: () => setOpen(false), inputProps: { disabled: readOnly || disabled }, children: children }), helperText && _jsx(StyledHelperText, { disabled: disabled, children: helperText })] }));
+}
+/**
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkSelect extends React.Component {
+    render() {
+        return _jsx(CustomSelect, { ...this.props });
+    }
+}
+export default ErkSelect;

package/dist/Shared/ErkSelect/ErkSelect.stories.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import ErkSelect from './ErkSelect';
+import { MenuItem } from '@mui/material';
+const meta = {
+    component: ErkSelect,
+    tags: ['autodocs'],
+    args: {
+        readOnly: false,
+    },
+};
+export default meta;
+export const Empty = {
+    args: {},
+};
+export const Default = {
+    args: {
+        label: 'Label',
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: 'option',
+    },
+    render: function Component({ ref, ...args }) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return (_jsx(ErkSelect, { ...args, onChange: onValueChange, inputRef: ref, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const ErrorColor = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const DifferentColors = {
+    args: {
+        label: 'Label',
+        value: 'option',
+        helperText: 'Helper text',
+    },
+    render: function Component({ ref, ...args }) {
+        return (_jsx(ErkSelect, { ...args, inputRef: ref, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+    },
+};

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createFilterOptions, MenuItem, CircularProgress, Autocomplete as MuiAutocomplete, styled, } from '@mui/material';
+import ErkSelect from '../ErkSelect/ErkSelect';
+import { StyledTextField } from '../ErkTextField/ErkTextField';
+const filter = createFilterOptions();
+const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, ...props }) => ({
+    '& .EF-MuiInputBase-root': {
+        cursor: props.disabled || props.readOnly ? 'default' : 'text',
+    },
+    '& .EF-MuiInputBase-input': {
+        paddingRight: 24,
+    },
+    '& .EF-MuiAutocomplete-endAdornment': {
+        marginLeft: 0,
+        marginRight: 9,
+        cursor: 'inherit',
+        color: theme.palette.text.primary + 'a0',
+        '& .EF-MuiButtonBase-root': {
+            padding: 0,
+        },
+    },
+    '& .EF-MuiAutocomplete-popupIndicatorOpen': {
+        transform: props.popupIcon ? 'none' : undefined,
+    },
+}));
+export default function ErkSmartSelect({ options, value = '', onChange, label, getValueString = (value) => value?.value, loading = false, getOptionSelected, IconComponent, disabled = false, readOnly = false, searchable = false, inputRef, ...others }) {
+    if (searchable) {
+        return (_jsx(StyledAutoComplete, { fullWidth: true, openOnFocus: true, loading: loading, options: options ?? [], loadingText: "Cargando...", onFocus: others.onFocus, "data-testid": "smart-select", noOptionsText: "No hay opciones", disabled: readOnly || disabled, value: !loading && value ? value : null, onChange: (_event, newValue) => onChange?.(newValue), popupIcon: loading ? _jsx(CircularProgress, { size: 22 }) : IconComponent ? _jsx(IconComponent, {}) : undefined, filterOptions: (options, params) => {
+                if (value && value.label === params?.inputValue) {
+                    return options;
+                }
+                else {
+                    return filter(options, params);
+                }
+            }, renderOption: ({ key, ...props }, option) => (_jsx(MenuItem, { ...props, children: option.label }, key)), 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 ?? '';
+                }
+            }, slotProps: {
+                popper: {
+                    sx: { zIndex: 1305 },
+                },
+            }, renderInput: (params) => (_jsx(StyledTextField, { ...params, label: label, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
+    }
+    else {
+        return (_jsxs(ErkSelect, { ...others, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, 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/Shared/ErkSmartSelect/ErkSmartSelect.stories.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import ErkSmartSelect from './ErkSmartSelect';
+import { within, userEvent, screen } from '@storybook/testing-library';
+const meta = {
+    component: ErkSmartSelect,
+    tags: ['autodocs'],
+    args: {
+        searchable: false,
+        readOnly: 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.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkSmartSelect, { ...args, onChange: 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,
+    },
+};
+export const DifferentColors = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+    },
+};

package/dist/Shared/ErkTextField/ErkTextField.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled, TextField as MuiTextField, } from '@mui/material';
+import React, { useCallback, useMemo } from 'react';
+import { useAppSelector } from '../../hooks';
+export const StyledTextField = styled(MuiTextField)(({ theme, padding = '6px 12px', ...props }) => ({
+    borderRadius: 10,
+    opacity: props.disabled ? 0.5 : 1,
+    '& input, textarea': {
+        cursor: props.disabled || props.readOnly ? 'default' : 'text',
+        padding,
+        fontWeight: 400,
+        color: theme.palette.text.primary,
+        fontSize: '1rem',
+        lineHeight: '1.188em', //Esto.
+        height: '1.188em', //Esto.
+        borderRadius: 10,
+    },
+    '& .EF-MuiFormLabel-root:not(.EF-MuiInputLabel-shrink)': {
+        transform: 'translate(12px, 5px) scale(1)', //Quitando esto y el height queda con height de 40px
+    },
+    '& label': {
+        color: theme.palette.text.primary + '8a',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    '& input + fieldset': {},
+    '& .EF-MuiOutlinedInput-root': {
+        '&.Mui-focused fieldset': {
+            borderColor: theme.palette.primary.main,
+            borderWidth: 2,
+        },
+        '& .EF-MuiOutlinedInput-notchedOutline': {
+            borderRadius: 10,
+            borderColor: theme.palette.outline.main,
+            '& legend': {
+                fontSize: '0.75rem',
+            },
+        },
+    },
+    '& .EF-MuiOutlinedInput-root:hover:not(.Mui-readOnly) .EF-MuiOutlinedInput-notchedOutline': {
+        borderColor: props.disabled || props.readOnly ? theme.palette.outline.main : theme.palette.primary.main,
+    },
+    '& label.Mui-focused': {
+        color: theme.palette.primary.main,
+    },
+    '& .Mui-error': {
+        color: theme.palette.error.main,
+    },
+    '& .EF-MuiInputBase-adornedEnd': {
+        paddingRight: '7px',
+    },
+    '& .EF-MuiFormHelperText-root': {
+        color: theme.palette.helperText.primary,
+        position: 'relative',
+        marginRight: props.maxLength ? 40 : 14,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    '& .EF-MuiFormHelperText-root.Mui-error': {
+        color: theme.palette.error.main,
+    },
+    '& .EF-MuiInputBase-multiline': {
+        padding: 0,
+    },
+    '& .EF-MuiInputAdornment-root': {
+        paddingTop: 2,
+        marginRight: 0,
+    },
+}));
+function CustomTextfield({ value = '', onChange, IconComponent, ...others }) {
+    const { readOnly, disabled, maxLength } = others;
+    const { descriptionTextColor } = useAppSelector((state) => state.global.formStyle);
+    const handleChange = useCallback((event) => {
+        onChange?.(event.target.value);
+    }, [onChange]);
+    const inputProps = useMemo(() => ({
+        spellCheck: true,
+        endAdornment: IconComponent,
+        disabled: !!readOnly || !!disabled,
+    }), [disabled, readOnly, IconComponent]);
+    const length = maxLength ? value?.length : null;
+    if (maxLength) {
+        inputProps.inputProps = { maxLength };
+    }
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: [_jsx(StyledTextField, { ...others, value: value, fullWidth: true, size: "small", variant: "outlined", onChange: handleChange, slotProps: { input: inputProps } }), length !== null && (_jsxs("div", { style: others.helperText
+                    ? {
+                        position: 'absolute',
+                        bottom: '3px',
+                        right: '8px',
+                        fontSize: '12px',
+                        color: descriptionTextColor,
+                    }
+                    : {
+                        fontSize: '12px',
+                        color: descriptionTextColor,
+                        textAlign: 'right',
+                        paddingRight: '8px',
+                        paddingTop: '2px',
+                        paddingBottom: '2px',
+                    }, children: [length, "/", maxLength] }))] }));
+}
+/**
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkTextField extends React.Component {
+    render() {
+        return _jsx(CustomTextfield, { ...this.props });
+    }
+}
+export default ErkTextField;

package/dist/Shared/ErkTextField/ErkTextField.stories.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import ErkTextField from './ErkTextField';
+import { within, userEvent } from '@storybook/testing-library';
+const meta = {
+    component: ErkTextField,
+    tags: ['autodocs'],
+    args: {
+        disabled: false,
+        multiline: false,
+    },
+};
+export default meta;
+export const Empty = {
+    args: {},
+};
+export const EmptyLabel = {
+    args: {
+        label: 'Label',
+    },
+};
+export const Default = {
+    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 = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkTextField, { ...args, ref: undefined, onChange: onValueChange });
+    },
+};
+export const Focused = {
+    args: {
+        label: 'Label',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+    },
+};
+export const FocusedNoLabel = {
+    args: {},
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+    },
+};
+export const WithValue = {
+    args: {
+        value: 'Textinput Value',
+    },
+};
+export const Multiline = {
+    args: {
+        value: 'TextArea Value',
+        multiline: true,
+        minRows: 4,
+    },
+};
+export const WithHelperText = {
+    args: {
+        helperText: 'Helper text',
+    },
+};
+export const WithValueandLabel = {
+    args: {
+        label: 'Label',
+        value: 'Textinput Value',
+    },
+};
+export const WithMaxLength = {
+    args: {
+        value: 'Value',
+        maxLength: 10,
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        maxLength: 10,
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+    },
+};