@arquimedes.co/eureka-forms 3.0.29-test → 3.0.31-date-range

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

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
 import ErkDatePicker from './ErkDatePicker';
-import { within, screen } from '@storybook/testing-library';
-import { userEvent } from '@storybook/testing-library';
+import { useArgs } from 'storybook/internal/preview-api';
 const meta = {
     component: ErkDatePicker,
     tags: ['autodocs'],
@@ -36,7 +34,7 @@ export const ValueAndLabel = {
             args.onChange?.(value);
             setArgs({ value });
         };
-        return _jsx(ErkDatePicker, { ...args, ref: args, onChange: onValueChange });
+        return _jsx(ErkDatePicker, { ...args, onChange: onValueChange });
     },
 };
 export const Full = {
@@ -67,8 +65,7 @@ export const Menu = {
         label: 'Label',
         value: null,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('date-picker');
         await userEvent.click(selector);
     },
@@ -79,8 +76,7 @@ export const DateTimeDateMenu = {
         value: null,
         pickTime: true,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('date-picker');
         await userEvent.click(selector);
     },
@@ -91,11 +87,10 @@ export const DateTimeTimeMenu = {
         value: null,
         pickTime: true,
     },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+    play: async ({ canvas, userEvent }) => {
         const selector = canvas.getByTestId('date-picker');
         await userEvent.click(selector);
-        const time = screen.getByText('12', {
+        const time = canvas.getByText('12', {
             selector: 'h3',
         });
         await userEvent.click(time);

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/Shared/ErkSelect/ErkSelect.stories.d.ts

@@ -1,16 +1,19 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkSelect from './ErkSelect';
 declare const meta: {
     component: typeof ErkSelect;
     tags: string[];
     args: {
         readOnly: false;
+        MenuProps: {
+            disablePortal: false;
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
 export declare const Default: Story;
+export declare const Empty: Story;
 export declare const ValueAndLabel: Story;
 export declare const Full: Story;
 export declare const Error: Story;

package/dist/Shared/ErkSelect/ErkSelect.stories.js

@@ -1,22 +1,36 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/preview-api';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ErkSelect from './ErkSelect';
 import { MenuItem } from '@mui/material';
+import { useArgs } from 'storybook/internal/preview-api';
 const meta = {
     component: ErkSelect,
     tags: ['autodocs'],
     args: {
         readOnly: false,
+        MenuProps: {
+            disablePortal: false,
+        },
     },
 };
 export default meta;
-export const Empty = {
-    args: {},
-};
 export const Default = {
     args: {
         label: 'Label',
     },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return (_jsxs(ErkSelect, { ...args, onChange: onValueChange, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const Empty = {
+    args: {},
+    render: function Component(args) {
+        return _jsx(ErkSelect, { ...args });
+    },
 };
 export const ValueAndLabel = {
     args: {
@@ -37,6 +51,9 @@ export const Full = {
         label: 'Label',
         helperText: 'Helper text',
     },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
 };
 export const Error = {
     args: {
@@ -44,6 +61,9 @@ export const Error = {
         helperText: 'Helper text',
         error: true,
     },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
 };
 export const ErrorColor = {
     args: {
@@ -51,6 +71,9 @@ export const ErrorColor = {
         helperText: 'Helper text',
         error: true,
     },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
 };
 export const DifferentColors = {
     args: {

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkSmartSelect from './ErkSmartSelect';
 declare const meta: {
     component: typeof ErkSmartSelect;