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

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -0,0 +1,275 @@
+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, readOnly, size }) => ({
+    '& .Erk-MuiInputBase-root': {
+        cursor: (disabled || readOnly) ? 'default' : 'pointer',
+        '& input': {
+            cursor: (disabled || readOnly) ? 'default' : 'pointer',
+            paddingRight: '0px',
+        },
+    },
+    '& .Erk-MuiInputBase-adornedEnd': {
+        paddingRight: '7px',
+    },
+    '& .Erk-MuiInputAdornment-root': {
+        minWidth: size === 'small' ? 24 : 26,
+        pointerEvents: readOnly ? 'none' : undefined,
+        '& .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, readOnly, size }) => ({
+    '& .Erk-MuiInputBase-root': {
+        cursor: (disabled || readOnly) ? 'default' : 'pointer',
+        '& input': {
+            cursor: (disabled || readOnly) ? 'default' : 'pointer',
+        },
+    },
+    '& .Erk-MuiInputBase-adornedEnd': {
+        paddingRight: '7px',
+    },
+    '& .Erk-MuiInputAdornment-root': {
+        minWidth: size === 'small' ? 24 : 26,
+        pointerEvents: readOnly ? 'none' : undefined,
+        '& .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();
+    const handleClick = () => {
+        if (!props.disabled && !props.readOnly) {
+            pickerContext.setOpen((prev) => !prev);
+        }
+    };
+    return _jsx(StyledTextField, { ...props, inputRef: ref, onClick: handleClick });
+});
+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: 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,
+                    readOnly: !disabled && readOnly,
+                    helperText,
+                    labelMargin,
+                    placeholder: '',
+                    fullWidth: true,
+                    InputProps: {
+                        readOnly: !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, 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,
+                    readOnly: !disabled && readOnly,
+                    helperText,
+                    labelMargin,
+                    fullWidth: true,
+                    placeholder: '',
+                    InputProps: {
+                        readOnly: !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

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

@@ -0,0 +1,98 @@
+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/ErkDateRangePicker/ErkDateRangePicker.d.ts

@@ -0,0 +1,18 @@
+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 ErkDateRangePickerProps 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 ErkDateRangePicker extends React.Component<ErkDateRangePickerProps> {
+    render(): JSX.Element;
+}
+export default ErkDateRangePicker;

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js

@@ -0,0 +1,180 @@
+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, readOnly, size }) => ({
+    '& .Erk-MuiInputBase-root': {
+        cursor: disabled || readOnly ? 'default' : 'pointer',
+        '& input': {
+            cursor: disabled || readOnly ? 'default' : 'pointer',
+            paddingRight: '0px',
+        },
+    },
+    '& .Erk-MuiInputBase-adornedEnd': {
+        paddingRight: '7px',
+    },
+    '& .Erk-MuiInputAdornment-root': {
+        minWidth: size === 'small' ? 24 : 26,
+        pointerEvents: readOnly ? 'none' : undefined,
+        '& .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();
+    const handleClick = () => {
+        if (!props.disabled && !props.readOnly) {
+            pickerContext.setOpen((prev) => !prev);
+        }
+    };
+    return _jsx(StyledTextField, { ...props, inputRef: ref, onClick: handleClick });
+});
+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: 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,
+                readOnly: !disabled && readOnly,
+                helperText,
+                labelMargin,
+                fullWidth: true,
+                placeholder: '',
+                InputProps: {
+                    readOnly: !disabled && readOnly,
+                },
+            },
+        } }));
+}
+/**
+ * Generic datepicker with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkDateRangePicker extends React.Component {
+    render() {
+        return _jsx(CustomDatePickerRange, { ...this.props });
+    }
+}
+export default ErkDateRangePicker;

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

@@ -0,0 +1,36 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ErkDateRangePicker from './ErkDateRangePicker';
+declare const meta: {
+    component: typeof ErkDateRangePicker;
+    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;