@eml-payments/ui-kit 1.2.8 → 1.3.0

package/dist/src/components/DatePicker/DatePicker.d.ts

@@ -1,11 +1,11 @@
 import { type FC } from 'react';
 import { type InputProps } from '../Input';
-interface IDatePickerProps extends Omit<InputProps, 'value' | 'variant' | 'onChange'> {
+export type DatePickerProps = Omit<InputProps, 'value' | 'variant' | 'onChange' | 'error'> & {
     currentDate?: Date;
     dateFormat?: string;
     maxDate?: Date;
     minDate?: Date;
+    error?: string;
     onChangeDate?: (date: Date | undefined) => void;
-}
-export declare const DatePicker: FC<IDatePickerProps>;
-export {};
+};
+export declare const DatePicker: FC<DatePickerProps>;

package/dist/src/components/DatePicker/DatePicker.js

@@ -8,15 +8,15 @@ import { Input } from '../Input';
 const formatDate = (date, format) => {
     return date ? dayjs(date).format(format) : '';
 };
-export const DatePicker = ({ placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYYY', currentDate, minDate, maxDate, onChangeDate, ...inputProps }) => {
+export const DatePicker = ({ placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYYY', currentDate, minDate, maxDate, error, onChangeDate, ...inputProps }) => {
     const [date, setDate] = useState(currentDate);
     const [value, setValue] = useState(formatDate(currentDate, dateFormat));
-    const [error, setError] = useState(false);
+    const [defaultError, setDefaultError] = useState('');
     const [open, setOpen] = useState(false);
     const onUpdateDate = (selectedDate) => {
         setDate(selectedDate);
         onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(selectedDate);
-        setError(false);
+        setDefaultError('');
     };
     const handleChangeDate = (selectedDate) => {
         onUpdateDate(selectedDate);
@@ -25,13 +25,24 @@ export const DatePicker = ({ placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYY
     };
     const handleChangeInputValue = (e) => {
         setValue(e.target.value);
+        if (e.target.value === '') {
+            onUpdateDate(undefined);
+            return;
+        }
         const parsedDate = dayjs(e.target.value, dateFormat, true);
-        if (parsedDate.isValid()) {
+        onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(parsedDate.toDate());
+        if (!parsedDate.isValid()) {
+            setDefaultError('Invalid date format');
+            return;
+        }
+        const isWithinRange = (!minDate || parsedDate.isSameOrAfter(dayjs(minDate), 'day')) &&
+            (!maxDate || parsedDate.isSameOrBefore(dayjs(maxDate), 'day'));
+        if (isWithinRange) {
             onUpdateDate(parsedDate.toDate());
         }
         else {
-            setError(true);
+            setDefaultError('Date is out of range');
         }
     };
-    return (_jsx("div", { className: "relative", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverAnchor, { children: _jsx(Input, { type: "text", value: value, placeholder: placeholder, error: error ? 'Invalid date format' : undefined, onChange: handleChangeInputValue, endAdornment: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors cursor-pointer flex items-center justify-center", "aria-label": "Open calendar", children: _jsx(CalendarIcon, { size: 16, className: "text-gray-500" }) }) }), ...inputProps }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "center", sideOffset: 0, children: _jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeDate }) })] }) }));
+    return (_jsx("div", { className: "relative", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverAnchor, { children: _jsx(Input, { type: "text", value: value, placeholder: placeholder, error: error !== null && error !== void 0 ? error : defaultError, onChange: handleChangeInputValue, endAdornment: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors cursor-pointer flex items-center justify-center", "aria-label": "Open calendar", children: _jsx(CalendarIcon, { size: 16, className: "text-gray-500" }) }) }), ...inputProps }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "center", sideOffset: 0, children: _jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeDate }) })] }) }));
 };

package/dist/src/components/DatePicker/DatePicker.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof DatePicker>;
 export declare const Default: Story;
 export declare const WithLabel: Story;
 export declare const WithError: Story;
+export declare const WithDateRange: Story;

package/dist/src/components/DatePicker/DatePicker.stories.js

@@ -11,6 +11,15 @@ const meta = {
             },
         },
     },
+    render: (args) => {
+        const convertedArgs = {
+            ...args,
+            currentDate: args.currentDate ? new Date(args.currentDate) : undefined,
+            minDate: args.minDate ? new Date(args.minDate) : undefined,
+            maxDate: args.maxDate ? new Date(args.maxDate) : undefined,
+        };
+        return _jsx(DatePicker, { ...convertedArgs });
+    },
     argTypes: {
         placeholder: {
             control: 'text',
@@ -29,6 +38,14 @@ const meta = {
             control: 'date',
             description: 'Initial date value',
         },
+        minDate: {
+            control: 'date',
+            description: 'Minimum selectable date',
+        },
+        maxDate: {
+            control: 'date',
+            description: 'Maximum selectable date',
+        },
         onChangeDate: {
             action: 'dateChanged',
             description: 'Callback fired when date changes',
@@ -73,3 +90,17 @@ export const WithError = {
         },
     },
 };
+export const WithDateRange = {
+    args: {
+        label: 'Select Date (Limited Range)',
+        minDate: new Date(2024, 0, 1),
+        maxDate: new Date(2025, 11, 31),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Date picker with minimum and maximum date constraints. Users can only select dates within the specified range.',
+            },
+        },
+    },
+};

package/dist/src/components/index.d.ts

@@ -27,3 +27,6 @@ export * from './Stepper';
 export * from './Skeleton';
 export * from './Counter';
 export * from './SearchInput';
+export * from './Popover';
+export * from './DatePicker';
+export * from './Calendar';

package/dist/src/components/index.js

@@ -27,3 +27,6 @@ export * from './Stepper';
 export * from './Skeleton';
 export * from './Counter';
 export * from './SearchInput';
+export * from './Popover';
+export * from './DatePicker';
+export * from './Calendar';

package/dist/src/utils/dayjs.js

@@ -4,9 +4,13 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import duration from 'dayjs/plugin/duration';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 dayjs.extend(customParseFormat);
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 dayjs.extend(duration);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
 export { dayjs };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.2.8",
+	"version": "1.3.0",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -66,7 +66,6 @@
 		"@tanstack/react-virtual": "^3.13.13",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"date-fns": "^4.1.0",
 		"dayjs": "^1.11.19",
 		"lucide-react": "^0.562.0",
 		"prettier": "^3.6.2",