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

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import { DatePickerProps } from '@material-ui/pickers';
-interface StyleProps {
-    /** The color of the text */
-    textColor?: string;
-    /** The color of the outline when selected and hovered on */
-    focusColor?: string;
-    hoverColor?: 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 secondary color of the dialog */
-    secondaryColor?: string;
-    /** The contrastColor of the input */
-    contrastColor?: string;
-    /** The accent color of the input */
-    accentColor?: string;
-    /** The borderRadius of the input */
-    borderRadius?: number;
-    /** If it should display the timePicker */
-    pickTime?: 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;
-    /** The fontsize of the shrunken label */
-    shrunkenFontSize?: number | string;
-    /** Cant edit */
-    cantEdit?: boolean;
-    /** The color of the helper text when not error */
-    helperTextColor?: string;
-    /** Height of the component */
-    height?: string;
-}
-interface RoundedDatePickerProps extends Omit<DatePickerProps, 'ref'>, StyleProps {
-    ref?: React.RefObject<HTMLDivElement>;
-}
-/**
- * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
- */
-declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps> {
-    render(): JSX.Element;
-}
-export default RoundedDatePicker;

package/dist/mjs/Shared/RoundedDatePicker/RoundedDatePicker.js

@@ -1,297 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { cloneElement } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
-import { DatePicker, DateTimePicker, } from '@material-ui/pickers';
-import { getLocale } from '../../Form/Form';
-import { format } from 'date-fns';
-const useDatePickerStyles = (props) => makeStyles(() => ({
-    root: {
-        borderRadius: props.borderRadius,
-        cursor: props.cantEdit ? 'default' : 'pointer',
-        height: props.height,
-        backgroundColor: props.backgroundColor,
-        '& input, textarea': {
-            cursor: props.cantEdit ? 'default' : 'pointer',
-            padding: props.padding,
-            fontWeight: props.fontWeight,
-            color: props.textColor,
-            fontSize: props.fontSize,
-            '&::placeholder': {
-                fontSize: props.fontSize,
-            },
-            borderRadius: props.borderRadius,
-        },
-        '& .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.outlineColor,
-            '& span': {
-                fontSize: '0.75rem',
-            },
-        },
-        '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.outlineColor,
-        },
-        '&.Mui-focused .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.focusColor,
-            borderWidth: 2,
-        },
-        '&:hover .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.cantEdit
-                ? props.outlineColor
-                : props.focusColor,
-        },
-        '& .EF-MuiInputAdornment-root': {
-            width: 5,
-            '& button': {
-                marginLeft: -25,
-                fontSize: 18,
-                padding: 16,
-            },
-        },
-        '&.Erk-MuiOutlinedInput-adornedEnd': {
-            paddingRight: 11,
-        },
-        '& .Mui-error': {
-            color: props.errorColor,
-        },
-        '&.Mui-disabled': {
-            cursor: 'default',
-        },
-    },
-}));
-const useDatePickerLabelStyles = (props) => makeStyles(() => ({
-    root: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        maxWidth: 'calc(100% - 50px)',
-        marginTop: props.height != '40px' ? '-4px' : '0px',
-        textOverflow: 'ellipsis',
-        fontSize: props.fontSize,
-        color: props.textColor + '8a',
-        '&.Mui-focused': {
-            color: props.focusColor,
-        },
-        '&.EF-MuiInputLabel-shrink': {
-            marginTop: '0px',
-            maxWidth: 'calc(100% - 5px)',
-        },
-        '& .Mui-error': {
-            color: props.errorColor,
-        },
-        '&.Mui-error': {
-            color: props.errorColor,
-        },
-    },
-}));
-const useDatePickerHelperTextStyles = (props) => makeStyles(() => ({
-    root: {
-        color: props.helperTextColor,
-        '&.Mui-error': {
-            color: props.errorColor,
-        },
-    },
-}));
-const useDatePickerDialogStyles = (props) => makeStyles(() => ({
-    datePicker: {
-        '& .EF-MuiPickersModal-dialogRoot': {
-            color: props.textColor,
-            '& .EF-MuiDialogActions-root': {
-                '& .EF-MuiButton-root:hover': {
-                    backgroundColor: props.hoverColor,
-                },
-                '& .EF-MuiButton-label': {
-                    color: props.focusColor,
-                },
-                '& .EF-MuiTouchRipple-root': {
-                    color: props.focusColor,
-                },
-            },
-        },
-        //Days labels
-        '& .EF-MuiPickersDay-day': {
-            color: props.textColor,
-        },
-        // Selected day label
-        '& .EF-MuiPickersDay-daySelected': {
-            color: props.backgroundColor,
-            backgroundColor: props.focusColor,
-        },
-        //Title
-        '& .EF-MuiPickersDatePickerRoot-toolbar': {
-            color: props.backgroundColor,
-            backgroundColor: props.focusColor,
-        },
-        //Title
-        '& .EF-MuiPickersToolbar-toolbar': {
-            color: props.backgroundColor,
-            backgroundColor: props.focusColor,
-        },
-        '& .EF-MuiPickerDTTabs-tabs': {
-            color: props.backgroundColor,
-            backgroundColor: props.focusColor,
-        },
-        '& .EF-MuiPickersYear-yearSelected, .EF-MuiPickersYear-root:focus': {
-            color: props.focusColor,
-        },
-        '& .EF-MuiTabs-indicator': {
-            backgroundColor: props.contrastColor,
-        },
-        '& .EF-MuiPickersClockNumber-clockNumber': {
-            color: props.accentColor,
-        },
-        '& .EF-MuiPickersClockNumber-clockNumberSelected': {
-            color: props.backgroundColor,
-        },
-        '& .EF-MuiPickersClock-pin, .EF-MuiPickersClockPointer-pointer': {
-            backgroundColor: props.focusColor,
-        },
-        '& .EF-MuiPickersClockPointer-noPoint': {
-            backgroundColor: props.focusColor,
-        },
-        '& .EF-MuiPickersClockPointer-thumb': {
-            borderColor: props.focusColor,
-        },
-        '& .EF-MuiPickersDay-dayDisabled': {
-            color: 'rgba(0, 0, 0, 0.38)',
-            pointerEvents: 'all',
-        },
-        '& .EF-MuiPickersDay-current': {
-            color: props.backgroundColor,
-            backgroundColor: props.secondaryColor,
-        },
-        '& .EF-MuiPickersDay-hidden': {
-            opacity: 0.4,
-            pointerEvents: 'none',
-        },
-        '& .EF-MuiPickersDay-hidden.EF-MuiPickersDay-current': {
-            opacity: 0.8,
-            pointerEvents: 'none',
-        },
-    },
-}));
-function CustomDatePicker({ ref, focusColor = '#3d5a7f', secondaryColor = '#98c1d9', outlineColor = '#0000003b', backgroundColor = '#ffffff', textColor = '#293241', contrastColor = '#ee6c4d', accentColor = '#293241', errorColor = '#cc2936', borderRadius = 10, padding = '6px 0px 6px 12px', fontSize = '1rem', shrunkenFontSize = '1rem', helperTextColor = '#989898', fontWeight = '300', height = '31px', cantEdit = false, pickTime = false, onChange, required, ...others }) {
-    const classes = useDatePickerStyles({
-        padding,
-        cantEdit,
-        textColor,
-        focusColor,
-        hoverColor: focusColor + '0a',
-        outlineColor,
-        errorColor,
-        backgroundColor,
-        borderRadius,
-        fontSize,
-        shrunkenFontSize,
-        fontWeight,
-        helperTextColor,
-        height,
-    })();
-    const labelClasses = useDatePickerLabelStyles({
-        padding,
-        cantEdit,
-        textColor,
-        focusColor,
-        hoverColor: focusColor + '0a',
-        errorColor,
-        outlineColor,
-        backgroundColor,
-        borderRadius,
-        fontSize,
-        shrunkenFontSize,
-        fontWeight,
-        helperTextColor,
-        height,
-    })();
-    const { datePicker } = useDatePickerDialogStyles({
-        padding,
-        cantEdit,
-        textColor,
-        secondaryColor,
-        accentColor,
-        contrastColor,
-        focusColor,
-        hoverColor: focusColor + '0a',
-        errorColor,
-        outlineColor,
-        backgroundColor,
-        borderRadius,
-        fontSize,
-        shrunkenFontSize,
-        fontWeight,
-        helperTextColor,
-        height,
-    })();
-    const helperTextStyles = useDatePickerHelperTextStyles({
-        padding,
-        textColor,
-        focusColor,
-        errorColor,
-        outlineColor,
-        backgroundColor,
-        borderRadius,
-        fontSize,
-        shrunkenFontSize,
-        fontWeight,
-        helperTextColor,
-        height,
-    })();
-    if (pickTime) {
-        return (_jsx(DateTimePicker, { ...others, ref: ref, inputVariant: "outlined", "data-testid": "date-picker", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
-                disableEnforceFocus: true,
-                className: datePicker,
-                cancelLabel: '',
-            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
-            , InputProps: {
-                required,
-                classes,
-                disabled: cantEdit,
-                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
-                        color: '#757575',
-                        fontSize: 20,
-                    } })),
-            }, FormHelperTextProps: {
-                classes: helperTextStyles,
-            }, renderDay: (day, selectedDate, dayInCurrentMonth, dayComponent) => {
-                if (!day) {
-                    return dayComponent;
-                }
-                return (_jsx("div", { onClick: () => {
-                        onChange(day);
-                    }, children: cloneElement(dayComponent) }));
-            }, variant: "dialog" }));
-    }
-    else {
-        return (_jsx(DatePicker, { ...others, ref: ref, "data-testid": "date-picker", inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
-                disableEnforceFocus: true,
-                className: datePicker,
-                cancelLabel: '',
-            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
-            , InputProps: {
-                required,
-                classes,
-                disabled: cantEdit,
-                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
-                        color: '#757575',
-                        fontSize: 20,
-                    } })),
-            }, FormHelperTextProps: {
-                classes: helperTextStyles,
-            }, renderDay: (day, selectedDate, dayInCurrentMonth, dayComponent) => {
-                if (!day) {
-                    return dayComponent;
-                }
-                return (_jsx("div", { onClick: () => {
-                        onChange(day);
-                    }, children: cloneElement(dayComponent) }));
-            }, variant: "dialog" }));
-    }
-}
-/**
- * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
- */
-class RoundedDatePicker extends React.Component {
-    render() {
-        return _jsx(CustomDatePicker, { ...this.props });
-    }
-}
-export default RoundedDatePicker;

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

@@ -1,36 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import RoundedDatePicker from './RoundedDatePicker';
-declare const meta: {
-    component: typeof RoundedDatePicker;
-    tags: string[];
-    args: {
-        focusColor: string;
-        secondaryColor: string;
-        helperTextColor: string;
-        outlineColor: string;
-        backgroundColor: string;
-        textColor: string;
-        contrastColor: string;
-        accentColor: string;
-        errorColor: string;
-        fontSize: string;
-        fontWeight: string;
-        cantEdit: false;
-    };
-    parameters: {
-        date: Date;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
-export declare const Default: Story;
-export declare const ValueAndLabel: Story;
-export declare const Full: Story;
-export declare const FullDateTime: Story;
-export declare const Error: Story;
-export declare const Menu: Story;
-export declare const DateTimeDateMenu: Story;
-export declare const DateTimeTimeMenu: Story;
-export declare const ErrorColor: Story;
-export declare const DifferentColors: Story;

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

@@ -1,137 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
-import RoundedDatePicker from './RoundedDatePicker';
-import { within, screen } from '@storybook/testing-library';
-import { userEvent } from '@storybook/testing-library';
-const meta = {
-    component: RoundedDatePicker,
-    tags: ['autodocs'],
-    args: {
-        focusColor: '#3d5a7f',
-        secondaryColor: '#98c1d9',
-        helperTextColor: '#989898',
-        outlineColor: '#0000003b',
-        backgroundColor: '#ffffff',
-        textColor: '#293241',
-        contrastColor: '#ee6c4d',
-        accentColor: '#293241',
-        errorColor: '#cc2936',
-        fontSize: '1rem',
-        fontWeight: '300',
-        cantEdit: false,
-    },
-    parameters: {
-        date: new Date('07-21-2021'),
-    },
-};
-export default meta;
-export const Empty = {
-    args: {
-        value: null,
-    },
-};
-export const Default = {
-    args: {
-        label: 'Label',
-        value: new Date('07-21-2021'),
-    },
-};
-export const ValueAndLabel = {
-    args: {
-        label: 'Label',
-        value: null,
-    },
-    render: function Component(args) {
-        const [, setArgs] = useArgs();
-        const onValueChange = (value) => {
-            args.onChange?.(value);
-            setArgs({ value });
-        };
-        return (_jsx(RoundedDatePicker, { ...args, ref: args.ref, onChange: onValueChange }));
-    },
-};
-export const Full = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-    },
-};
-export const FullDateTime = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-        pickTime: true,
-    },
-};
-export const Error = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-        error: true,
-    },
-};
-export const Menu = {
-    args: {
-        label: 'Label',
-        value: null,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('date-picker');
-        await userEvent.click(selector);
-    },
-};
-export const DateTimeDateMenu = {
-    args: {
-        label: 'Label',
-        value: null,
-        pickTime: true,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('date-picker');
-        await userEvent.click(selector);
-    },
-};
-export const DateTimeTimeMenu = {
-    args: {
-        label: 'Label',
-        value: null,
-        pickTime: true,
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const selector = canvas.getByTestId('date-picker');
-        await userEvent.click(selector);
-        const time = screen.getByText('12', {
-            selector: 'h3',
-        });
-        await userEvent.click(time);
-    },
-};
-export const ErrorColor = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-        error: true,
-        errorColor: 'blue',
-    },
-};
-export const DifferentColors = {
-    args: {
-        label: 'Label',
-        value: null,
-        helperText: 'Helper text',
-        helperTextColor: 'green',
-        outlineColor: 'purple',
-        backgroundColor: 'red',
-        textColor: 'blue',
-    },
-    render: function Component(args) {
-        return _jsx(RoundedDatePicker, { ...args, ref: args.ref });
-    },
-};

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

@@ -1,68 +0,0 @@
-import React from 'react';
-import { SelectProps } from '@material-ui/core/Select';
-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 weight of the font of the value and the placeholder */
-    fontWeight?: any;
-    /** If input is readOnly */
-    readOnly?: boolean;
-    /** The color of the helper text when not error */
-    helperTextColor?: string;
-    /** The borderRadius of the input */
-    borderRadius?: number;
-    /** The padding to the left of the input */
-    paddingLeft?: number;
-    /** The padding to the right of the input */
-    paddingRight?: number;
-    /** If custom icon exists and should be displayed */
-    showIcon?: boolean;
-}
-interface RoundedSelectProps extends Omit<SelectProps, 'color'>, StyleProps {
-    /** children to display in the options */
-    children?: any;
-    /** Currently selected value */
-    value: any;
-    /** function called when value changes */
-    handleUpdate?: (event: React.ChangeEvent<{
-        name?: string | undefined;
-        value: any;
-    }>, child?: React.ReactNode) => void;
-    /** String to place in the label */
-    label?: string;
-    /** Minimum width in px of the component */
-    minWidth?: number;
-    /** The color of the outline when selected and hovered on */
-    focusColor?: string;
-    /** If outline should be error color */
-    highlightError?: boolean;
-    /** The helper Text to display */
-    helperText?: string;
-    /** the margin around the selector */
-    containerMargin?: string;
-    /** The icon to display */
-    iconComponent?: any;
-    /** the components ref */
-    ref?: any;
-}
-/**
- * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
- */
-declare class RoundedSelect extends React.Component<RoundedSelectProps> {
-    render(): JSX.Element;
-}
-export default RoundedSelect;