@arquimedes.co/eureka-forms 3.0.31-test → 3.0.31

package/dist/@Types/FormStep.d.ts

@@ -4,7 +4,7 @@ import { Condition } from './Condition';
 import { EurekaDraft } from './Draft/Draft';
 import * as GSteps from './GenericFormSteps';
 import { Time } from './Time';
-export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper;
+export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper | DatePickerRange;
 export interface Title extends GSteps.GBaseStep {
     type: FormStepTypes.TITLE;
     title?: EurekaDraft;
@@ -48,6 +48,9 @@ export interface TextInput extends GSteps.GTextInput {
 export interface DatePicker extends GSteps.GDatePicker {
     type: FormStepTypes.DATEPICKER;
 }
+export interface DatePickerRange extends GSteps.GDatePickerRange {
+    type: FormStepTypes.DATEPICKER_RANGE;
+}
 export interface Collapsible extends GSteps.GBaseStep {
     type: FormStepTypes.COLLAPSIBLE;
     label: string;

package/dist/@Types/GenericFormSteps.d.ts

@@ -51,6 +51,12 @@ export interface GDatePicker extends GBaseStep {
     required: boolean;
     size: 1 | 2 | 3 | 4;
 }
+export interface GDatePickerRange extends GBaseStep {
+    label: string;
+    description: string | null;
+    required: boolean;
+    size: 1 | 2 | 3 | 4;
+}
 export interface GTimePicker extends GBaseStep {
     label: string;
     description: string | null;

package/dist/FormSteps/DatePickerRangeStep/DatePickerRangeStep.d.ts

@@ -0,0 +1,10 @@
+import { DatePickerRange } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface DatePickerRangeStepProps extends StepProps {
+    /** The DatePickerRangeStep to display */
+    step: DatePickerRange;
+    /** Default value to display */
+    defaultValue?: string[] | null;
+}
+declare function DatePickerRangeStep(props: DatePickerRangeStepProps): JSX.Element;
+export default DatePickerRangeStep;

package/dist/FormSteps/DatePickerRangeStep/DatePickerRangeStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialDatePickerRangeStep from './MaterialDatePickerRangeStep/MaterialDatePickerRangeStep';
+import { useAppSelector } from '../../hooks';
+function DatePickerRangeStep(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialDatePickerRangeStep, { ...props });
+        }
+    }
+}
+export default DatePickerRangeStep;

package/dist/FormSteps/DatePickerRangeStep/MaterialDatePickerRangeStep/MaterialDatePickerRangeStep.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerRangeStepProps } from '../DatePickerRangeStep';
+declare function MaterialDatePickerRangeStep({ step, editable, defaultValue }: DatePickerRangeStepProps): JSX.Element;
+export default MaterialDatePickerRangeStep;

package/dist/FormSteps/DatePickerRangeStep/MaterialDatePickerRangeStep/MaterialDatePickerRangeStep.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import ErkDatePickerRange from '../../../Shared/ErkDatePickerRange/ErkDatePickerRange';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function MaterialDatePickerRangeStep({ step, editable, defaultValue }) {
+    const postview = useAppSelector((state) => state.global.postview);
+    const { ref, value, onChange, error, field } = useFormStep(step, {
+        defaultValue,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    const handleChange = useCallback((dateRange) => {
+        const [start, end] = dateRange;
+        if (start && end) {
+            onChange([start.toISOString(), end.toISOString()]);
+        }
+        else {
+            onChange(null);
+        }
+    }, [onChange]);
+    const dateRangeValue = value && value.length === 2 ? [new Date(value[0]), new Date(value[1])] : [null, null];
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDatePickerRange, { ...field, value: dateRangeValue, inputRef: ref, error: !!error, labelMargin: 0, onChange: handleChange, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
+}
+export default MaterialDatePickerRangeStep;

package/dist/FormSteps/Step.js

@@ -7,6 +7,7 @@ import TitleStep from './TitleStep/TitleStep';
 import ClassifierSelectorStep from './ClassifierSelectorStep/ClassifierSelectorStep';
 import TextAreaStep from './TextAreaStep/TextAreaStep';
 import DatePickerStep from './DatePickerStep/DatePickerStep';
+import DatePickerRangeStep from './DatePickerRangeStep/DatePickerRangeStep';
 import FileUploadStep from './FileUploadStep/FileUploadStep';
 import CheckBoxStep from './CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep';
 import CBRStepMapper from './CBRStepMapper';
@@ -73,6 +74,9 @@ function StepComponent({ step, ...props }) {
         case FormStepTypes.DATEPICKER: {
             return _jsx(DatePickerStep, { ...props, step: step, editable: editable });
         }
+        case FormStepTypes.DATEPICKER_RANGE: {
+            return _jsx(DatePickerRangeStep, { ...props, step: step, editable: editable });
+        }
         case FormStepTypes.SEPARATOR: {
             return _jsx(SeparatorStep, { ...props, step: step, editable: editable });
         }

package/dist/FormSteps/StepFunctions.js

@@ -119,6 +119,7 @@ export const calcDefaultValue = (step) => {
                 return '';
         case FormStepTypes.RATING:
         case FormStepTypes.DATEPICKER:
+        case FormStepTypes.DATEPICKER_RANGE:
         case FormStepTypes.API_SELECTOR:
         case FormStepTypes.ENTITYVALUEPICKER:
             return null;

package/dist/FormSteps/StepFunctions.test.js

@@ -489,6 +489,13 @@ describe('StepFunctions', function () {
             expect(defaultValue3).toBe(null);
             expect(defaultValue4).toBe(null);
         });
+        test('DatePickerRange step type', async () => {
+            const step = {
+                type: FormStepTypes.DATEPICKER_RANGE,
+            };
+            const defaultValue = calcDefaultValue(step);
+            expect(defaultValue).toBe(null);
+        });
         test('Mapper, FileUpload, CBRFormStep types', async () => {
             const step1 = {
                 type: FormStepTypes.MAPPER,

package/dist/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.d.ts

@@ -1,7 +1,7 @@
 import { GSmartSelect } from '../../../@Types/GenericFormSteps';
-import { CheckBox, DatePicker, ClassifierSelector, FormSelector, TimePicker } from '../../../@Types/FormStep';
+import { CheckBox, DatePicker, ClassifierSelector, FormSelector, TimePicker, DatePickerRange } from '../../../@Types/FormStep';
 interface MaterialInputProps {
-    step: GSmartSelect | CheckBox | ClassifierSelector | DatePicker | TimePicker | FormSelector;
+    step: GSmartSelect | CheckBox | ClassifierSelector | DatePicker | TimePicker | FormSelector | DatePickerRange;
     editable: boolean;
     onClick?: () => void;
     children: React.ReactNode;

package/dist/Shared/ErkDatePickerRange/ErkDatePickerRange.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 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

@@ -0,0 +1,160 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { styled, Dialog as MuiDialog } from '@mui/material';
+import { DatePickerToolbar as MuiDatePickerToolbar, } 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 } from 'date-fns';
+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',
+    },
+}));
+const formatDate = (date, showYear) => {
+    if (!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 && 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: {
+            field: SingleInputDateRangeField,
+            day: StyledDay,
+            dialog: StyledDialog,
+            toolbar: StyledDateToolBar,
+            openPickerIcon: CalendarIcon,
+        }, 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

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

package/dist/Shared/ErkDatePickerRange/ErkDatePickerRange.stories.js

@@ -0,0 +1,274 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ErkDatePickerRange from './ErkDatePickerRange';
+import { useArgs } from 'storybook/internal/preview-api';
+import { useState } from 'react';
+const meta = {
+    component: ErkDatePickerRange,
+    tags: ['autodocs'],
+    args: {
+        readOnly: false,
+    },
+    parameters: {
+        dateRange: [new Date('2021-07-01'), new Date('2021-07-21')],
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        label: 'Seleccionar Rango',
+        value: [null, null],
+    },
+};
+export const Default = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Interactive = {
+    args: {
+        label: 'Rango Interactivo',
+        value: [null, null],
+        helperText: 'Seleccione un rango de fechas',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        const handleChange = (newValue) => {
+            setValue(newValue);
+            args.onChange?.(newValue);
+        };
+        return (_jsxs("div", { children: [_jsx(ErkDatePickerRange, { ...args, value: value, onChange: handleChange }), _jsxs("div", { style: { marginTop: '20px', fontSize: '14px' }, children: [_jsx("strong", { children: "Valor seleccionado:" }), _jsxs("div", { children: ["Inicio: ", value[0]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] }), _jsxs("div", { children: ["Fin: ", value[1]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] })] })] }));
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkDatePickerRange, { ...args, onChange: onValueChange });
+    },
+};
+export const Full = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+        helperText: 'Seleccione un rango de fechas',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Error = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+        helperText: 'Error: Rango de fechas inválido',
+        error: true,
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Menu = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const WithSelectedRange = {
+    args: {
+        label: 'Vacaciones',
+        value: [new Date('2024-12-20'), new Date('2025-01-05')],
+        helperText: 'Período de vacaciones',
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkDatePickerRange, { ...args, onChange: onValueChange });
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        disabled: true,
+        helperText: 'Campo deshabilitado',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const ReadOnly = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        readOnly: true,
+        helperText: 'Campo de solo lectura',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithError = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-21'), new Date('2021-07-01')],
+        helperText: 'La fecha de inicio debe ser anterior a la fecha de fin',
+        error: true,
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Required = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+        helperText: 'Este campo es obligatorio',
+        required: true,
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const SmallSize = {
+    args: {
+        label: 'Rango Pequeño',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        size: 'small',
+        helperText: 'Tamaño pequeño',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const MediumSize = {
+    args: {
+        label: 'Rango Mediano',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        size: 'medium',
+        helperText: 'Tamaño mediano',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const CurrentMonth = {
+    args: {
+        label: 'Mes Actual',
+        value: [new Date(2025, 10, 1), new Date(2025, 10, 30)],
+        helperText: 'Noviembre 2025',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const LastWeek = {
+    args: {
+        label: 'Última Semana',
+        value: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()],
+        helperText: 'Últimos 7 días',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const NextMonth = {
+    args: {
+        label: 'Próximo Mes',
+        value: [
+            new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1),
+            new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0),
+        ],
+        helperText: 'Planificación del próximo mes',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithMinMaxDates = {
+    args: {
+        label: 'Reserva de Hotel',
+        value: [null, null],
+        helperText: 'Seleccione fechas entre hoy y 3 meses',
+        minDate: new Date(),
+        maxDate: new Date(new Date().setMonth(new Date().getMonth() + 3)),
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const YearRange = {
+    args: {
+        label: 'Período Fiscal',
+        value: [new Date('2025-01-01'), new Date('2025-12-31')],
+        helperText: 'Año fiscal 2025',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const QuarterRange = {
+    args: {
+        label: 'Trimestre Q1 2025',
+        value: [new Date('2025-01-01'), new Date('2025-03-31')],
+        helperText: 'Primer trimestre del año',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const EventDuration = {
+    args: {
+        label: 'Duración del Evento',
+        value: [new Date('2025-06-15'), new Date('2025-06-18')],
+        helperText: 'Conferencia anual (4 días)',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const MultipleStates = {
+    render: function Component() {
+        const [range1, setRange1] = useState([null, null]);
+        const [range2, setRange2] = useState([new Date('2025-01-01'), new Date('2025-01-31')]);
+        const [range3, setRange3] = useState([null, null]);
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsx(ErkDatePickerRange, { label: "Fecha de Inicio del Proyecto", value: range1, onChange: setRange1, helperText: "Seleccione el per\u00EDodo del proyecto" }), _jsx(ErkDatePickerRange, { label: "Per\u00EDodo de Pruebas", value: range2, onChange: setRange2, helperText: "Enero 2025" }), _jsx(ErkDatePickerRange, { label: "Fecha de Entrega", value: range3, onChange: setRange3, error: range3[0] === null, helperText: range3[0] === null ? 'Este campo es obligatorio' : 'Fecha confirmada', required: true })] }));
+    },
+};

package/dist/constants/FormStepTypes.d.ts

@@ -12,6 +12,7 @@ export declare enum FormStepTypes {
     CHECKBOX = "CHECKBOX",
     TEXTAREA = "TEXTAREA",
     DATEPICKER = "DATEPICKER",
+    DATEPICKER_RANGE = "DATEPICKER_RANGE",
     FILEUPLOAD = "FILEUPLOAD",
     TEXTINPUT = "TEXTINPUT",
     SEPARATOR = "SEPARATOR",

package/dist/constants/FormStepTypes.js

@@ -15,6 +15,7 @@ export var FormStepTypes;
     FormStepTypes["CHECKBOX"] = "CHECKBOX";
     FormStepTypes["TEXTAREA"] = "TEXTAREA";
     FormStepTypes["DATEPICKER"] = "DATEPICKER";
+    FormStepTypes["DATEPICKER_RANGE"] = "DATEPICKER_RANGE";
     FormStepTypes["FILEUPLOAD"] = "FILEUPLOAD";
     FormStepTypes["TEXTINPUT"] = "TEXTINPUT";
     FormStepTypes["SEPARATOR"] = "SEPARATOR";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.31-test",
+  "version": "3.0.31",
   "scripts": {
     "watch": "tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
@@ -51,7 +51,7 @@
     "@faker-js/faker": "^10.0.0",
     "@mui/material": "^7.3.4",
     "@mui/x-data-grid-pro": "^8.13.1",
-    "@mui/x-date-pickers": "^8.3.0",
+    "@mui/x-date-pickers": "^8.12.0",
     "@mui/x-date-pickers-pro": "^8.12.0",
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-onboarding": "^9.1.10",