@arquimedes.co/eureka-forms 3.0.31 → 3.0.32

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

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

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { SelectProps as MuiSelectProps } from '@mui/material';
-export interface ErkSmartSelectProps extends Omit<MuiSelectProps, 'ref' | 'onInvalid'> {
-    /** 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 */
-    onChange?: (value: any) => void;
-    /** Strig to place in the label */
-    label: string;
-    /** The helper Text to display */
-    helperText?: string;
-    /** The icon to display */
-    IconComponent?: React.ElementType;
-    /** If the options are searchable */
-    searchable?: 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;
-    /** If input is readOnly */
-    readOnly?: boolean;
-    onFocus?: React.FocusEventHandler;
-}
-export default function ErkSmartSelect({ options, value, onChange, label, getValueString, loading, getOptionSelected, IconComponent, size, disabled, readOnly, searchable, inputRef, ...others }: ErkSmartSelectProps): JSX.Element;

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createFilterOptions, CircularProgress, Autocomplete as MuiAutocomplete, styled, } from '@mui/material';
-import ErkSelect from '../ErkSelect/ErkSelect';
-import { StyledTextField } from '../ErkTextField/ErkTextField';
-import ErkMenuItem from '../ErkMenuItem';
-const filter = createFilterOptions();
-const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, readOnly, ...props }) => ({
-    '& .Erk-MuiInputBase-root': {
-        cursor: props.disabled || readOnly ? 'default' : 'text',
-    },
-    '& .Erk-MuiInputBase-input': {
-        paddingRight: 24,
-    },
-    '& .Erk-MuiAutocomplete-endAdornment': {
-        marginLeft: 0,
-        marginRight: 9,
-        cursor: 'inherit',
-        color: theme.palette.text.primary + 'a0',
-        '& .Erk-MuiButtonBase-root': {
-            padding: 0,
-            color: readOnly ? theme.palette.text.primary + 'a0' : undefined,
-        },
-    },
-    '& .Erk-MuiAutocomplete-popupIndicatorOpen': {
-        transform: props.popupIcon ? 'none' : undefined,
-    },
-}));
-export default function ErkSmartSelect({ options, value = '', onChange, label, getValueString = (value) => value?.value, loading = false, getOptionSelected, IconComponent, size = 'small', disabled = false, readOnly = false, searchable = false, inputRef, ...others }) {
-    if (searchable) {
-        return (_jsx(StyledAutoComplete, { fullWidth: true, openOnFocus: true, size: size, loading: loading, disabled: disabled || readOnly, readOnly: readOnly, options: options ?? [], loadingText: "Cargando...", onFocus: others.onFocus, "data-testid": "smart-select", noOptionsText: "No hay opciones", 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(ErkMenuItem, { ...props, children: option.label }, key)), getOptionKey: (option) => getValueString(option), 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, size: size, label: label, labelMargin: 0, 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, labelMargin: 0, disabled: disabled, readOnly: readOnly, 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: [options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
-    }
-}

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.stories.js

@@ -1,159 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ErkSmartSelect from './ErkSmartSelect';
-import { useArgs } from 'storybook/internal/preview-api';
-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 ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-        const option = canvas.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 ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-        const option = canvas.getByTestId('smart-select-empty');
-        await userEvent.click(option);
-    },
-};
-export const FocusedSearchable = {
-    args: {
-        label: 'Label',
-        searchable: true,
-    },
-    play: async ({ canvas, userEvent }) => {
-        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 ({ canvas, userEvent }) => {
-        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 ({ canvas, userEvent }) => {
-        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 ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('smart-select');
-        await userEvent.click(selector);
-    },
-};
-export const SearchableLoadingOpened = {
-    args: {
-        label: 'Label',
-        searchable: true,
-        loading: true,
-    },
-    play: async ({ canvas, userEvent }) => {
-        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.d.ts

@@ -1,34 +0,0 @@
-import { OutlinedTextFieldProps as MuiTextFieldProps } from '@mui/material';
-import React, { CSSProperties } from 'react';
-interface StyleProps extends Pick<CSSProperties, 'textAlign' | 'fontSize' | 'padding' | 'fontWeight' | 'backgroundColor' | 'borderRadius'> {
-    readOnly?: boolean;
-}
-declare module '@mui/material/TextField' {
-    interface TextFieldPropsSizeOverrides {
-        large: true;
-    }
-}
-export declare const StyledTextField: import("@emotion/styled").StyledComponent<{
-    variant?: import("@mui/material").TextFieldVariants | undefined;
-} & Omit<import("@mui/material").FilledTextFieldProps | MuiTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Omit<ErkTextFieldProps, "onChange"> & StyleProps, {}, {}>;
-export type ErkTextFieldSlotProps = Omit<ErkTextFieldProps, 'value' | 'onChange' | 'fullWidth'>;
-export interface ErkTextFieldProps extends Omit<MuiTextFieldProps, 'variant' | 'onChange' | 'ref'>, StyleProps {
-    /** The value of the textfield */
-    value?: string | number;
-    onChange?: (value: string) => void;
-    /** The icon to display */
-    IconComponent?: React.ElementType | React.ReactNode;
-    /** The max length of the string */
-    maxLength?: number;
-    /** Show red border on error */
-    errorBorder?: boolean;
-    /** labelMargin */
-    labelMargin?: number;
-}
-/**
- * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
- */
-declare class ErkTextField extends React.Component<ErkTextFieldProps> {
-    render(): JSX.Element;
-}
-export default ErkTextField;

package/dist/Shared/ErkTextField/ErkTextField.js

@@ -1,146 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, TextField as MuiTextField, useTheme, } from '@mui/material';
-import React, { useCallback, useMemo } from 'react';
-export const StyledTextField = styled(MuiTextField, {
-    shouldForwardProp: (propName) => !['textAlign', 'errorBorder', 'labelMargin', 'minWidth', 'borderRadius'].includes(propName),
-})(({ theme, label, size, error, textAlign, errorBorder, labelMargin = 5, borderRadius = 10, fontSize = size === 'large' ? '1.5rem' : '1rem', padding = '6px 12px', fontWeight = 400, backgroundColor = theme.palette.stepBackgroundColor.default, ...props }) => ({
-    borderRadius,
-    opacity: props.disabled ? 0.5 : 1,
-    marginTop: label ? labelMargin : undefined,
-    minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
-    '& .Erk-MuiInputBase-root': {
-        borderRadius,
-        backgroundColor,
-    },
-    '& input, textarea': {
-        fontSize,
-        textAlign,
-        padding,
-        fontWeight,
-        borderRadius,
-        backgroundColor,
-        color: theme.palette.text.primary,
-        cursor: props.disabled || props.readOnly ? 'default' : 'text',
-        lineHeight: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
-        height: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
-        '&.Mui-readOnly': {
-            color: theme.palette.text.primary,
-            WebkitTextFillColor: theme.palette.text.primary,
-        },
-    },
-    '& .Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
-        fontSize,
-        transform: `translate(12px, ${size === 'small' ? 5 : size === 'medium' ? 9 : 7}px) scale(1)`,
-    },
-    '& .Erk-MuiInputLabel-shrink': {
-        color: error && errorBorder ? theme.palette.error.main : undefined,
-    },
-    '& label': {
-        color: theme.palette.text.primary + '8a',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-    '& .Erk-MuiOutlinedInput-root': {
-        '&.Mui-focused fieldset': {
-            borderColor: error && errorBorder ? theme.palette.error.main : theme.palette.primary.main,
-            borderWidth: 2,
-        },
-        '& .Erk-MuiOutlinedInput-notchedOutline': {
-            borderRadius,
-            borderColor: error && errorBorder ? theme.palette.error.main : theme.palette.outline.main,
-            '& legend': {
-                fontSize: '0.75rem',
-            },
-        },
-    },
-    '& .Erk-MuiOutlinedInput-root:hover:not(.Mui-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
-        borderColor: props.disabled || props.readOnly
-            ? theme.palette.outline.main
-            : error && errorBorder
-                ? theme.palette.error.main
-                : theme.palette.primary.main,
-    },
-    '& label.Mui-focused': {
-        color: theme.palette.primary.main,
-    },
-    '& .Mui-error': {
-        color: theme.palette.error.main,
-        '& fieldset': {
-            borderWidth: error && errorBorder ? 2 : undefined,
-        },
-    },
-    '& .Erk-MuiInputBase-adornedEnd': {
-        paddingRight: '7px',
-    },
-    '& .Erk-MuiFormHelperText-root': {
-        color: theme.palette.helperText.primary,
-        position: 'relative',
-        marginRight: props.maxLength ? 40 : 14,
-        overflow: 'hidden',
-        minHeight: 20,
-        textOverflow: 'ellipsis',
-    },
-    '& .Erk-MuiFormHelperText-root.Mui-error': {
-        color: theme.palette.error.main,
-    },
-    '& .Erk-MuiInputBase-multiline': {
-        padding: 0,
-    },
-    '& .Erk-MuiInputAdornment-root': {
-        marginLeft: 0,
-        marginRight: size === 'medium' ? 2 : 0,
-        fill: theme.palette.text.primary + 'a0',
-        color: theme.palette.text.primary + 'a0',
-    },
-}));
-function CustomTextfield({ onChange, value = '', IconComponent, size = 'small', fullWidth = true, ...others }) {
-    const { readOnly, disabled, maxLength } = others;
-    const { palette } = useTheme();
-    const handleChange = useCallback((event) => {
-        onChange?.(event.target.value);
-    }, [onChange]);
-    const inputProps = useMemo(() => ({
-        ...others.inputProps,
-        spellCheck: true,
-        endAdornment: IconComponent,
-        readOnly: !!readOnly,
-        disabled: !!readOnly || !!disabled,
-    }), [others.inputProps, IconComponent, readOnly, disabled]);
-    const length = maxLength ? value.toString()?.length : null;
-    if (maxLength) {
-        inputProps.inputProps = { maxLength };
-    }
-    const helperText = others.helperText ?? (others.error === false && !others.readOnly ? ' ' : undefined);
-    return (_jsxs("div", { style: {
-            position: 'relative',
-            width: fullWidth ? '100%' : 'fit-content',
-            maxWidth: '100%',
-        }, children: [_jsx(StyledTextField, { ...others, size: size, value: value, variant: "outlined", fullWidth: fullWidth, helperText: helperText, onChange: handleChange, slotProps: { input: inputProps } }), length !== null && (_jsxs("div", { style: helperText
-                    ? {
-                        position: 'absolute',
-                        bottom: '3px',
-                        right: '8px',
-                        minHeight: '20px',
-                        fontSize: '12px',
-                        color: palette.helperText.primary,
-                    }
-                    : {
-                        fontSize: '12px',
-                        color: palette.helperText.primary,
-                        textAlign: 'right',
-                        minHeight: '20px',
-                        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

@@ -1,99 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ErkTextField from './ErkTextField';
-import { useArgs } from 'storybook/internal/preview-api';
-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 ({ canvas, userEvent }) => {
-        const emailInput = canvas.getByRole('textbox');
-        await userEvent.click(emailInput);
-        await userEvent.type(emailInput, 'example-email@email.com', { initialSelectionStart: 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 ({ canvas, userEvent }) => {
-        const emailInput = canvas.getByRole('textbox');
-        await userEvent.click(emailInput);
-    },
-};
-export const FocusedNoLabel = {
-    args: {},
-    play: async ({ canvas, userEvent }) => {
-        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,
-    },
-};

package/dist/Shared/ErkTimePicker/ErkTimePicker.d.ts

@@ -1,32 +0,0 @@
-import { SelectorStyleProps } from '../ErkSelect/ErkSelect';
-import { Time } from '../../@Types/Time';
-import { SelectProps as MuiSelectProps } from '@mui/material';
-import React from 'react';
-interface ErkTimePickerProps extends Omit<MuiSelectProps, 'color' | 'onChange'>, SelectorStyleProps {
-    /** Currently selected value */
-    value?: Time;
-    /** function called when value changes */
-    onChange?: (time: Time) => void;
-    /** Strig to place in the label */
-    label: string;
-    /** The helper Text to display */
-    helperText?: string | null;
-    pickDays?: boolean;
-    minDays?: number;
-    maxDays?: number;
-    pickHours?: boolean;
-    minHours?: number;
-    maxHours?: number;
-    pickMinutes?: boolean;
-    minMinutes?: number;
-    maxMinutes?: number;
-    working?: boolean;
-    labelMargin?: number;
-}
-/**
- * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
- */
-declare class ErkTimePicker extends React.Component<ErkTimePickerProps> {
-    render(): JSX.Element;
-}
-export default ErkTimePicker;