@arquimedes.co/eureka-forms 3.0.34-test → 3.0.35

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -1,266 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { forwardRef } from 'react';
-import { styled, Dialog as MuiDialog } from '@mui/material';
-import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, PickersDay as MuiPickerDay, usePickerContext, } from '@mui/x-date-pickers';
-import { StyledTextField } from '../ErkTextField/ErkTextField';
-import CalendarIcon from '../../Icons/CalendarIcon';
-import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
-const StyledDateTimePicker = styled(MuiDateTimePicker, {
-    shouldForwardProp: (propName) => propName !== 'size',
-})(({ disabled, size }) => ({
-    '& .Erk-MuiInputBase-root': {
-        cursor: disabled ? 'default' : 'pointer',
-        '& input': {
-            cursor: disabled ? 'default' : 'pointer',
-            paddingRight: '0px',
-        },
-    },
-    '& .Erk-MuiInputBase-adornedEnd': {
-        paddingRight: '7px',
-    },
-    '& .Erk-MuiInputAdornment-root': {
-        minWidth: size === 'small' ? 24 : 26,
-        '& .Erk-MuiButtonBase-root': {
-            margin: '-2px',
-            padding: 3,
-            width: size === 'small' ? 28 : 26,
-            height: size === 'small' ? 28 : 26,
-        },
-    },
-    '& .Erk-MuiClock-root': {
-        marginBottom: '16px',
-    },
-}));
-const StyledDatePicker = styled(MuiDatePicker, {
-    shouldForwardProp: (propName) => propName !== 'size',
-})(({ disabled, size }) => ({
-    '& .Erk-MuiInputBase-root': {
-        cursor: disabled ? 'default' : 'pointer',
-        '& input': {
-            cursor: disabled ? 'default' : 'pointer',
-        },
-    },
-    '& .Erk-MuiInputBase-adornedEnd': {
-        paddingRight: '7px',
-    },
-    '& .Erk-MuiInputAdornment-root': {
-        minWidth: size === 'small' ? 24 : 26,
-        '& .Erk-MuiButtonBase-root': {
-            margin: '-2px',
-            padding: 3,
-            width: size === 'small' ? 28 : 26,
-            height: size === 'small' ? 28 : 26,
-        },
-    },
-}));
-const StyledDateTimeToolBar = styled(MuiDateTimePickerToolbar)(({ theme }) => ({
-    '&.Erk-MuiPickersToolbar-root': {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.primary.contrastText,
-        '& span': {
-            fontSize: '1rem',
-            textTransform: 'none',
-            color: theme.palette.primary.contrastText,
-        },
-        '& .Erk-MuiDateTimePickerToolbar-dateContainer': {
-            '& span': {
-                fontSize: '1.1rem',
-            },
-        },
-        '& .Erk-MuiDateTimePickerToolbar-timeDigitsContainer': {
-            '& span': {
-                fontSize: '2.3rem',
-            },
-        },
-        '& .Erk-MuiDateTimePickerToolbar-ampmSelection': {
-            '& span': {
-                color: theme.palette.primary.contrastText + '8b',
-                '&.Mui-selected': {
-                    color: theme.palette.primary.contrastText,
-                    fontWeight: 600,
-                },
-            },
-        },
-    },
-    cursor: 'default',
-    '& .Erk-MuiTypography-root': {
-        textTransform: 'capitalize',
-        color: theme.palette.primary.contrastText,
-    },
-}));
-const StyledDateToolBar = styled(MuiDatePickerToolbar)(({ theme }) => ({
-    '&.Erk-MuiPickersToolbar-root': {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.primary.contrastText,
-        '& span': {
-            fontSize: '1rem',
-            textTransform: 'capitalize',
-            color: theme.palette.primary.contrastText,
-        },
-    },
-    cursor: 'default',
-    '& .Erk-MuiTypography-root': {
-        textTransform: 'capitalize',
-        color: theme.palette.primary.contrastText,
-    },
-}));
-const StyledDialog = styled(MuiDialog)(({ theme }) => ({
-    '& .Erk-MuiDialog-paper': {
-        borderRadius: '5px',
-        backgroundColor: 'transparent',
-    },
-    '& .Erk-MuiPickersLayout-root': {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    '& .Erk-MuiDialogActions-root': {
-        '& .Erk-MuiButtonBase-root': { fontWeight: 700 },
-    },
-    '& .Erk-MuiDialogContent-root': {
-        scrollbarColor: theme.palette.primary.main + ' white',
-    },
-}));
-const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
-    fontWeight: 500,
-    fontSize: '0.9rem',
-    lineHeight: 'normal',
-    '&.Erk-MuiPickersDay-today': {
-        backgroundColor: theme.palette.primary.main + '33',
-    },
-    '&.Erk-MuiPickersDay-dayOutsideMonth': {
-        color: 'rgb(0,0,0,0.4)',
-        '&.Mui-selected': {
-            color: theme.palette.primary.contrastText,
-        },
-    },
-}));
-// eslint-disable-next-line react/display-name
-const CustomTextField = forwardRef((props, ref) => {
-    const pickerContext = usePickerContext();
-    return _jsx(StyledTextField, { ...props, inputRef: ref, onClick: () => pickerContext.setOpen((prev) => !prev) });
-});
-function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', labelMargin = 5, pickTime = false, ...others }) {
-    if (pickTime) {
-        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, disabled: disabled ?? readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
-                actionBar: {
-                    actions: ['clear', 'accept'],
-                },
-                layout: {
-                    sx: {
-                        //Pasar esto al componente de layout?
-                        backgroundColor: '#ffffff',
-                        textTransform: 'capitalize',
-                        '& .Erk-MuiDayCalendar-weekDayLabel': {
-                            gridColumn: 1,
-                            gridRow: 2,
-                        },
-                        '& .Erk-MuiPickersCalendarHeader-root': {
-                            marginTop: '5px',
-                        },
-                        '& .Erk-MuiDateCalendar-root': {
-                            height: 'fit-content',
-                        },
-                        '& .Erk-MuiClock-root': {
-                            fontSize: 16,
-                            marginTop: '34px',
-                            marginBottom: '30px',
-                        },
-                        '& .Erk-MuiTimeClock-arrowSwitcher': {
-                            top: 5,
-                        },
-                    },
-                },
-                monthButton: {
-                    sx: {
-                        textTransform: 'capitalize',
-                    },
-                },
-                toolbar: {
-                    toolbarFormat: 'eee, d MMM',
-                    hidden: false,
-                    toolbarPlaceholder: '– –',
-                },
-                textField: {
-                    error,
-                    size,
-                    disabled,
-                    helperText,
-                    labelMargin,
-                    placeholder: '',
-                    fullWidth: true,
-                    InputProps: {
-                        disabled: disabled ?? readOnly,
-                    },
-                },
-            }, viewRenderers: {
-                hours: renderTimeViewClock,
-                minutes: renderTimeViewClock,
-                seconds: renderTimeViewClock,
-            }, slots: {
-                day: StyledDay,
-                dialog: StyledDialog,
-                toolbar: StyledDateTimeToolBar,
-                textField: CustomTextField,
-                openPickerIcon: CalendarIcon,
-            }, enableAccessibleFieldDOMStructure: false }));
-    }
-    else {
-        return (_jsx(StyledDatePicker, { ...others, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled ?? readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
-                actionBar: {
-                    actions: ['clear', 'accept'],
-                },
-                layout: {
-                    sx: {
-                        backgroundColor: '#ffffff',
-                        textTransform: 'capitalize',
-                        '& .Erk-MuiDayCalendar-weekDayLabel': {
-                            cursor: 'default',
-                        },
-                        '& .Erk-MuiPickersCalendarHeader-root': {
-                            marginTop: '5px',
-                        },
-                        '& .Erk-MuiDateCalendar-root': {
-                            height: 'fit-content',
-                        },
-                    },
-                },
-                monthButton: {
-                    sx: {
-                        textTransform: 'capitalize',
-                    },
-                },
-                toolbar: {
-                    toolbarFormat: 'eee, d MMM',
-                    hidden: false,
-                    toolbarPlaceholder: '– –',
-                },
-                textField: {
-                    size,
-                    error,
-                    disabled,
-                    helperText,
-                    labelMargin,
-                    fullWidth: true,
-                    placeholder: '',
-                    InputProps: {
-                        disabled: disabled ?? readOnly,
-                    },
-                },
-            }, slots: {
-                day: StyledDay,
-                dialog: StyledDialog,
-                toolbar: StyledDateToolBar,
-                textField: CustomTextField,
-                openPickerIcon: CalendarIcon,
-            }, enableAccessibleFieldDOMStructure: false }));
-    }
-}
-/**
- * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
- */
-class ErkDatePicker extends React.Component {
-    render() {
-        return _jsx(CustomDatePicker, { ...this.props });
-    }
-}
-export default ErkDatePicker;

package/dist/Shared/ErkDatePicker/ErkDatePicker.stories.d.ts

@@ -1,23 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import ErkDatePicker from './ErkDatePicker';
-declare const meta: {
-    component: typeof ErkDatePicker;
-    tags: string[];
-    args: {
-        readOnly: 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;

package/dist/Shared/ErkDatePicker/ErkDatePicker.stories.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ErkDatePicker from './ErkDatePicker';
-import { useArgs } from 'storybook/internal/preview-api';
-const meta = {
-    component: ErkDatePicker,
-    tags: ['autodocs'],
-    args: {
-        readOnly: 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(ErkDatePicker, { ...args, 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 ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('date-picker');
-        await userEvent.click(selector);
-    },
-};
-export const DateTimeDateMenu = {
-    args: {
-        label: 'Label',
-        value: null,
-        pickTime: true,
-    },
-    play: async ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('date-picker');
-        await userEvent.click(selector);
-    },
-};
-export const DateTimeTimeMenu = {
-    args: {
-        label: 'Label',
-        value: null,
-        pickTime: true,
-    },
-    play: async ({ canvas, userEvent }) => {
-        const selector = canvas.getByTestId('date-picker');
-        await userEvent.click(selector);
-        const time = canvas.getByText('12', {
-            selector: 'h3',
-        });
-        await userEvent.click(time);
-    },
-};

package/dist/Shared/ErkDatePickerRange/ErkDatePickerRange.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { MobileDateRangePickerProps as MuiDateRangePickerProps } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
-import { DateRange } from '@mui/x-date-pickers-pro';
-import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
-interface ErkDatePickerRangeProps extends Omit<MuiDateRangePickerProps<boolean>, 'ref' | 'onChange' | 'value' | 'slotProps'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
-    onChange?: (dateRange: DateRange<Date>) => void;
-    value?: DateRange<Date>;
-    inputRef?: React.Ref<HTMLInputElement>;
-    /** labelMargin */
-    labelMargin?: number;
-}
-/**
- * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
- */
-declare class ErkDatePickerRange extends React.Component<ErkDatePickerRangeProps> {
-    render(): JSX.Element;
-}
-export default ErkDatePickerRange;

package/dist/Shared/ErkDatePickerRange/ErkDatePickerRange.js

@@ -1,173 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { styled, Dialog as MuiDialog } from '@mui/material';
-import { DatePickerToolbar as MuiDatePickerToolbar, usePickerContext, } from '@mui/x-date-pickers';
-import { MobileDateRangePicker as MuiDateRangePicker, } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
-import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro';
-import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
-import { format, isValid } from 'date-fns';
-import { StyledTextField } from '../ErkTextField/ErkTextField';
-import CalendarIcon from '../../Icons/CalendarIcon';
-const StyledDateRangePicker = styled(MuiDateRangePicker, {
-    shouldForwardProp: (propName) => propName !== 'size',
-})(({ disabled, size }) => ({
-    '& .Erk-MuiInputBase-root': {
-        cursor: disabled ? 'default' : 'pointer',
-        '& input': {
-            cursor: disabled ? 'default' : 'pointer',
-            paddingRight: '0px',
-        },
-    },
-    '& .Erk-MuiInputBase-adornedEnd': {
-        paddingRight: '7px',
-    },
-    '& .Erk-MuiInputAdornment-root': {
-        minWidth: size === 'small' ? 24 : 26,
-        '& .Erk-MuiButtonBase-root': {
-            margin: '-2px',
-            padding: 3,
-            width: size === 'small' ? 28 : 26,
-            height: size === 'small' ? 28 : 26,
-        },
-    },
-}));
-const StyledDateToolBar = styled(MuiDatePickerToolbar)(({ theme }) => ({
-    '&.Erk-MuiPickersToolbar-root': {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.primary.contrastText,
-        maxWidth: 'none',
-        '& span': {
-            fontSize: '1rem',
-            textTransform: 'capitalize',
-            color: theme.palette.primary.contrastText,
-        },
-        '& .Erk-MuiDatePickerToolbar-title': {
-            margin: 'auto auto auto 0px',
-        },
-    },
-    cursor: 'default',
-    '& .Erk-MuiTypography-root': {
-        textTransform: 'capitalize',
-        color: theme.palette.primary.contrastText,
-    },
-}));
-const StyledDialog = styled(MuiDialog)(({ theme }) => ({
-    '& .Erk-MuiDialog-paper': {
-        borderRadius: '5px',
-        backgroundColor: 'transparent',
-    },
-    '& .Erk-MuiPickersLayout-root': {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    '& .Erk-MuiDialogActions-root': {
-        '& .Erk-MuiButtonBase-root': { fontWeight: 700 },
-    },
-    '& .Erk-MuiDialogContent-root': {
-        scrollbarColor: theme.palette.primary.main + ' white',
-    },
-}));
-const StyledDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
-    fontWeight: 500,
-    fontSize: '0.9rem',
-    lineHeight: 'normal',
-    '&.Erk-MuiPickersDay-today:not(.Erk-MuiDateRangePickerDay-rangeIntervalDayHighlight)': {
-        backgroundColor: theme.palette.primary.main + '33',
-    },
-    '&.Erk-MuiPickersDay-dayOutsideMonth': {
-        color: 'rgb(0,0,0,0.4)',
-        '&.Mui-selected': {
-            color: theme.palette.primary.contrastText,
-        },
-    },
-    '&.Erk-MuiDateRangePickerDay-rangeIntervalDayHighlight': {
-        backgroundColor: theme.palette.primary.main + '1a',
-    },
-}));
-// eslint-disable-next-line react/display-name
-const CustomTextField = React.forwardRef((props, ref) => {
-    const pickerContext = usePickerContext();
-    return _jsx(StyledTextField, { ...props, inputRef: ref, onClick: () => pickerContext.setOpen((prev) => !prev) });
-});
-const formatDate = (date, showYear) => {
-    if (!date || !isValid(date))
-        return '';
-    return format(date, showYear ? 'PP' : 'dd MMM');
-};
-function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = 'small', labelMargin = 5, value, onChange, ...others }) {
-    const [startDate, endDate] = value ?? [null, null];
-    const hasCompleteRange = Boolean(startDate) && Boolean(endDate);
-    const showYear = startDate &&
-        endDate &&
-        isValid(startDate) &&
-        isValid(endDate) &&
-        startDate.getFullYear() !== endDate.getFullYear();
-    const formattedStartDate = formatDate(startDate, Boolean(showYear));
-    const formattedEndDate = formatDate(endDate, Boolean(showYear));
-    const toolbarText = hasCompleteRange ? `${formattedStartDate} – ${formattedEndDate}` : '– –';
-    return (_jsx(StyledDateRangePicker, { ...others, value: value, onChange: onChange, size: size, disabled: disabled ?? readOnly, reduceAnimations: true, showDaysOutsideCurrentMonth: true, enableAccessibleFieldDOMStructure: false, slots: {
-            //TODO: create system for shortcuts customs or default (enums)
-            shortcuts: undefined,
-            field: SingleInputDateRangeField,
-            day: StyledDay,
-            dialog: StyledDialog,
-            toolbar: StyledDateToolBar,
-            openPickerIcon: CalendarIcon,
-            textField: CustomTextField,
-        }, slotProps: {
-            actionBar: {
-                actions: ['clear', 'accept'],
-            },
-            layout: {
-                sx: {
-                    backgroundColor: '#ffffff',
-                    textTransform: 'capitalize',
-                    '& .Erk-MuiDayCalendar-weekDayLabel': {
-                        cursor: 'default',
-                    },
-                    '& .Erk-MuiPickersCalendarHeader-root': {
-                        marginTop: '5px',
-                    },
-                    '& .Erk-MuiDateCalendar-root': {
-                        height: 'fit-content',
-                    },
-                    '& .Erk-MuiPickersToolbar-content > *:first-child': {
-                        fontSize: showYear ? '1.3rem' : '1.8rem',
-                    },
-                    /* TODO: Remove the text "you need a license" this is only temporary  */
-                    '& .Erk-MuiDateRangeCalendar-root > *:first-child': {
-                        display: 'none',
-                    },
-                    '& .Erk-MuiPickersMonth-monthButton': {
-                        textTransform: 'capitalize',
-                    },
-                },
-            },
-            toolbar: {
-                toolbarFormat: 'eee, d MMM',
-                hidden: false,
-                toolbarPlaceholder: toolbarText,
-            },
-            textField: {
-                size,
-                error,
-                disabled,
-                helperText,
-                labelMargin,
-                fullWidth: true,
-                placeholder: '',
-                InputProps: {
-                    disabled: disabled ?? readOnly,
-                },
-            },
-        } }));
-}
-/**
- * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
- */
-class ErkDatePickerRange extends React.Component {
-    render() {
-        return _jsx(CustomDatePickerRange, { ...this.props });
-    }
-}
-export default ErkDatePickerRange;

package/dist/Shared/ErkDatePickerRange/ErkDatePickerRange.stories.d.ts

@@ -1,36 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import ErkDatePickerRange from './ErkDatePickerRange';
-declare const meta: {
-    component: typeof ErkDatePickerRange;
-    tags: string[];
-    args: {
-        readOnly: false;
-    };
-    parameters: {
-        dateRange: Date[];
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
-export declare const Default: Story;
-export declare const Interactive: Story;
-export declare const ValueAndLabel: Story;
-export declare const Full: Story;
-export declare const Error: Story;
-export declare const Menu: Story;
-export declare const WithSelectedRange: Story;
-export declare const Disabled: Story;
-export declare const ReadOnly: Story;
-export declare const WithError: Story;
-export declare const Required: Story;
-export declare const SmallSize: Story;
-export declare const MediumSize: Story;
-export declare const CurrentMonth: Story;
-export declare const LastWeek: Story;
-export declare const NextMonth: Story;
-export declare const WithMinMaxDates: Story;
-export declare const YearRange: Story;
-export declare const QuarterRange: Story;
-export declare const EventDuration: Story;
-export declare const MultipleStates: Story;