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

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

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedButton from './RoundedButton';
+declare const meta: {
+    component: typeof RoundedButton;
+    tags: string[];
+    args: {
+        text: string;
+        backgroundColor: string;
+        color: string;
+        disabled: false;
+        fontSize: string;
+        padding: string;
+        borderRadius: number;
+        height: number;
+        bold: false;
+        width: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const DifferentColors: Story;

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

@@ -0,0 +1,36 @@
+import RoundedButton from './RoundedButton';
+const meta = {
+    component: RoundedButton,
+    tags: ['autodocs'],
+    args: {
+        text: 'Label',
+        backgroundColor: '#3d5a7f',
+        color: '#ffffff',
+        disabled: false,
+        fontSize: '1rem',
+        padding: '0 13px 0 13px',
+        borderRadius: 10,
+        height: 28,
+        bold: false,
+        width: 'fit-content',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Label',
+    },
+};
+export const Disabled = {
+    args: {
+        text: 'Label',
+        disabled: true,
+    },
+};
+export const DifferentColors = {
+    args: {
+        text: 'Label',
+        backgroundColor: 'red',
+        color: 'blue',
+    },
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { CheckboxProps } from '@material-ui/core';
+interface StyleProps {
+    error?: boolean;
+    padding?: string;
+    uncheckedColor?: string;
+    checkedColor?: string;
+    checkedHoverColor?: string;
+    errorColor?: string;
+    disabledColor?: string;
+    size?: number | string;
+    cantEdit?: boolean;
+}
+interface ComponentProps extends StyleProps, Omit<CheckboxProps, 'size' | 'onChange'> {
+    onChange?: (checked: boolean) => void;
+    checked: boolean;
+}
+/**
+ * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
+ */
+declare class RoundedCheckBox extends React.Component<ComponentProps> {
+    render(): JSX.Element;
+}
+export default RoundedCheckBox;

package/dist/mjs/Shared/RoundedCheckBox/RoundedCheckBox.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Checkbox, makeStyles } from '@material-ui/core';
+import CheckBoxRoundedIcon from '@material-ui/icons/CheckBoxRounded';
+import CheckBoxOutlineBlankRoundedIcon from '@material-ui/icons/CheckBoxOutlineBlankRounded';
+const useCheckBoxStyles = (props) => makeStyles(() => ({
+    root: {
+        padding: props.padding,
+        fontSize: props.size,
+        color: props.error ? props.errorColor : props.uncheckedColor,
+        '&.Mui-checked': {
+            color: props.checkedColor,
+        },
+        '&.Mui-checked:hover': {
+            backgroundColor: props.checkedHoverColor,
+        },
+        '&.Mui-disabled': {
+            cursor: 'default',
+            pointerEvents: 'all !important',
+            color: props.cantEdit
+                ? props.disabledColor
+                : props.checkedColor,
+        },
+        '&:hover': {
+            backgroundColor: props.cantEdit
+                ? 'transparent'
+                : props.checkedHoverColor,
+        },
+    },
+}));
+/**
+ * Generic rounded checkbox
+ */
+function CustomCheckBox({ padding = '9px', onChange, error = false, size = '1.5rem', checkedColor = '#3d5a7f', uncheckedColor = '#787878', disabledColor = '#A0A0A0', errorColor = '#cc2936', cantEdit = false, checked, ...others }) {
+    const classes = useCheckBoxStyles({
+        size,
+        error,
+        padding,
+        cantEdit,
+        errorColor,
+        checkedColor,
+        disabledColor,
+        uncheckedColor,
+        checkedHoverColor: checkedColor + '0a',
+    })();
+    return (_jsx(Checkbox, { ...others, disabled: cantEdit, classes: classes, checked: checked, onChange: onChange, required: true, icon: _jsx(CheckBoxOutlineBlankRoundedIcon, { fontSize: "inherit" }), checkedIcon: _jsx(CheckBoxRoundedIcon, { fontSize: "inherit" }) }));
+}
+/**
+ * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
+ */
+class RoundedCheckBox extends React.Component {
+    render() {
+        return _jsx(CustomCheckBox, { ...this.props });
+    }
+}
+export default RoundedCheckBox;

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

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedCheckBox from './RoundedCheckBox';
+declare const meta: {
+    component: typeof RoundedCheckBox;
+    tags: string[];
+    args: {
+        checkedColor: string;
+        uncheckedColor: string;
+        disabledColor: string;
+        size: string;
+        errorColor: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Uncheked: Story;
+export declare const Checked: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;

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

@@ -0,0 +1,50 @@
+import RoundedCheckBox from './RoundedCheckBox';
+const meta = {
+    component: RoundedCheckBox,
+    tags: ['autodocs'],
+    args: {
+        checkedColor: '#3d5a7f',
+        uncheckedColor: '#787878',
+        disabledColor: '#A0A0A0',
+        size: '1.5rem',
+        errorColor: '#cc2936',
+    },
+};
+export default meta;
+export const Uncheked = {
+    args: {
+        checked: false,
+    },
+};
+export const Checked = {
+    args: {
+        checked: true,
+    },
+};
+export const Error = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};
+export const Disabled = {
+    args: {
+        checked: false,
+        disabled: true,
+    },
+};
+export const ErrorColor = {
+    args: {
+        checked: false,
+        error: true,
+        errorColor: 'blue',
+    },
+};
+export const DifferentColors = {
+    args: {
+        checked: true,
+        checkedColor: 'red',
+        uncheckedColor: 'blue',
+        disabledColor: '#A0A0A0',
+    },
+};

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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,297 @@
+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

@@ -0,0 +1,36 @@
+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;