@drivenets/design-system 0.7.3 → 0.8.0

package/src/components/ds-date-picker/ds-date-picker.tsx

@@ -0,0 +1,209 @@
+import { type ChangeEvent, Fragment, useEffect, useRef, useState } from 'react';
+import { DatePicker, type DateValue } from '@ark-ui/react/date-picker';
+import { Portal } from '@ark-ui/react/portal';
+import type { DsDatePickerProps } from './ds-date-picker.types';
+import {
+	formatDate,
+	fromIntlDate,
+	isSameDay,
+	parseDate,
+	toIntlDate,
+	validateDateString,
+} from './ds-date-picker.utils';
+import { DsTimePicker } from '../ds-time-picker';
+import { DsIcon } from '../ds-icon';
+import styles from './ds-date-picker.module.scss';
+import { useControlled } from '../../utils/use-controlled';
+import { DsTextInput } from '../ds-text-input';
+import { DsButton } from '../ds-button';
+import { DayView } from './components/day-view';
+import { MonthView } from './components/month-view';
+import { YearView } from './components/year-view';
+
+const DsDatePicker = ({
+	placeholder,
+	className,
+	withTime = false,
+	closeOnSelect = true,
+	disablePortal = false,
+	hideClearButton = false,
+	locale,
+	slotProps,
+	onChange,
+	onOpenChange,
+	value: _value,
+	defaultValue: _defaultValue,
+	min: _min,
+	max: _max,
+	disabled,
+	readOnly,
+	id,
+	...restProps
+}: DsDatePickerProps) => {
+	const defaultValue = toIntlDate(_defaultValue);
+
+	const [value, setValue] = useControlled<DateValue | null>(
+		toIntlDate(_value),
+		onChange ? (v) => onChange(fromIntlDate(v)) : undefined,
+		defaultValue ?? null,
+	);
+
+	const min = toIntlDate(_min);
+	const max = toIntlDate(_max);
+
+	const [isFocused, setIsFocused] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const formattedValue = formatDate(value, withTime);
+
+	// Reformat on value change, but skip while focused to avoid disrupting typing
+	useEffect(() => {
+		if (!isFocused && inputRef.current) {
+			inputRef.current.value = formattedValue;
+		}
+	}, [isFocused, formattedValue]);
+
+	const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const text = e.target.value;
+
+		const isValid = validateDateString({ text, min, max, withTime });
+
+		if (isValid) {
+			const parsedValue = parseDate(text);
+			setValue(parsedValue);
+		}
+	};
+
+	const resetInput = () => {
+		if (inputRef.current) {
+			inputRef.current.value = value ? formattedValue : '';
+		}
+	};
+
+	const handleFocus = () => {
+		setIsFocused(true);
+	};
+
+	const handleBlur = () => {
+		setIsFocused(false);
+
+		const text = inputRef.current?.value || '';
+		const isValid = validateDateString({ text, min, max, withTime });
+
+		if (isValid) {
+			setValue(parseDate(text));
+		} else {
+			resetInput();
+		}
+	};
+
+	const showClearButton = !hideClearButton && !disabled && !readOnly && !!value;
+	const Wrapper = disablePortal ? Fragment : Portal;
+
+	return (
+		<DatePicker.Root
+			className={className}
+			value={value ? [value] : undefined}
+			defaultValue={defaultValue ? [defaultValue] : undefined}
+			onValueChange={(details) => {
+				setValue(details.value[0] ?? null);
+			}}
+			selectionMode="single"
+			positioning={{ placement: 'bottom-start', gutter: 4 }}
+			closeOnSelect={withTime ? false : closeOnSelect}
+			min={min}
+			max={max}
+			disabled={disabled}
+			readOnly={readOnly}
+			open={isOpen}
+			onOpenChange={(details) => {
+				if (!isFocused) {
+					setIsOpen(details.open);
+					onOpenChange?.(details.open);
+				}
+			}}
+			{...restProps}
+		>
+			<DatePicker.Control className={styles.control}>
+				<DsTextInput
+					ref={inputRef}
+					id={id}
+					placeholder={placeholder ?? (withTime ? 'mm/dd/yyyy, hh:mm AM/PM' : 'mm/dd/yyyy')}
+					defaultValue={formattedValue}
+					onChange={handleInputChange}
+					onFocus={handleFocus}
+					onBlur={handleBlur}
+					disabled={disabled}
+					readOnly={readOnly}
+					{...slotProps?.input}
+					slots={{
+						...slotProps?.input?.slots,
+						endAdornment: (
+							<>
+								{showClearButton && (
+									<DatePicker.ClearTrigger asChild onClick={() => setValue(null)}>
+										<DsButton
+											design="v1.2"
+											size="tiny"
+											buttonType="tertiary"
+											disabled={disabled}
+											aria-label={locale?.clearLabel ?? 'Clear date'}
+										>
+											<DsIcon icon="close" size="tiny" />
+										</DsButton>
+									</DatePicker.ClearTrigger>
+								)}
+								<DatePicker.Trigger asChild>
+									<DsButton
+										design="v1.2"
+										size="tiny"
+										buttonType="tertiary"
+										disabled={disabled}
+										aria-label={locale?.openCalendarLabel ?? 'Open calendar'}
+									>
+										<DsIcon icon="calendar_today" size="tiny" />
+									</DsButton>
+								</DatePicker.Trigger>
+							</>
+						),
+					}}
+				/>
+			</DatePicker.Control>
+
+			<Wrapper>
+				<DatePicker.Positioner className={styles.positioner}>
+					<DatePicker.Content className={styles.content}>
+						<DayView>
+							{withTime && (
+								<DsTimePicker
+									value={fromIntlDate(value)}
+									onChange={(v) => {
+										setValue(toIntlDate(v));
+									}}
+									min={isSameDay(value, min) ? _min : undefined}
+									max={isSameDay(value, max) ? _max : undefined}
+									disabled={disabled || !value}
+									readOnly={readOnly}
+									{...slotProps?.timePicker}
+									slotProps={{
+										popover: {
+											...slotProps?.timePicker?.slotProps?.popover,
+											className: styles.timePickerPopoverContent,
+										},
+										...slotProps?.timePicker?.slotProps,
+									}}
+								/>
+							)}
+						</DayView>
+						<MonthView />
+						<YearView />
+					</DatePicker.Content>
+				</DatePicker.Positioner>
+			</Wrapper>
+		</DatePicker.Root>
+	);
+};
+
+export default DsDatePicker;

package/src/components/ds-date-picker/ds-date-picker.types.ts

@@ -0,0 +1,94 @@
+import type { DatePickerRootProps } from '@ark-ui/react/date-picker';
+import type { DsTextInputProps } from '../ds-text-input';
+import type { DsTimePickerProps } from '../ds-time-picker';
+
+export interface DsDatePickerLocale {
+	openCalendarLabel?: string;
+	timeTriggerLabel?: string;
+	clearLabel?: string;
+}
+
+export interface DsDatePickerSlotProps {
+	input?: DsTextInputProps;
+	timePicker?: DsTimePickerProps;
+}
+
+export interface DsDatePickerProps extends Pick<
+	DatePickerRootProps,
+	'disabled' | 'readOnly' | 'id' | 'open' | 'name'
+> {
+	/**
+	 * Controlled value as Date object.
+	 * `null` means the date is empty.
+	 * `undefined` means value is not provided, so component will be uncontrolled.
+	 */
+	value?: Date | null;
+
+	/**
+	 * Default value for uncontrolled mode
+	 */
+	defaultValue?: Date;
+
+	/**
+	 * Callback when the value changes
+	 * @param value - Date object or null when cleared
+	 */
+	onChange?: (value: Date | null) => void;
+
+	/**
+	 * Callback when the calendar open state changes
+	 */
+	onOpenChange?: (open: boolean) => void;
+
+	/**
+	 * Minimum allowed datetime as Date object
+	 */
+	min?: Date;
+
+	/**
+	 * Maximum allowed datetime as Date object
+	 */
+	max?: Date;
+
+	/**
+	 * Whether to show the time picker alongside the date picker
+	 * @default false
+	 */
+	withTime?: boolean;
+
+	/**
+	 * Placeholder text for the input
+	 * @default 'mm/dd/yyyy'
+	 */
+	placeholder?: string;
+
+	/**
+	 * Whether to close the calendar when a date is selected. This is ignored when withTime is true.
+	 * @default true
+	 */
+	closeOnSelect?: boolean;
+
+	className?: string;
+
+	/**
+	 * Whether to disable the portal for the calendar content
+	 * @default false
+	 */
+	disablePortal?: boolean;
+
+	/**
+	 * Whether to hide the clear button
+	 * @default true
+	 */
+	hideClearButton?: boolean;
+
+	/**
+	 * Localizable aria-labels and text
+	 */
+	locale?: DsDatePickerLocale;
+
+	/**
+	 * Props forwarded to sub-component slots
+	 */
+	slotProps?: DsDatePickerSlotProps;
+}

package/src/components/ds-date-picker/ds-date-picker.utils.ts

@@ -0,0 +1,87 @@
+import { type DateValue } from '@ark-ui/react/date-picker';
+import { fromDate, getLocalTimeZone } from '@internationalized/date';
+
+export const toIntlDate = <T extends Date | null | undefined>(date: T): T extends Date ? DateValue : T =>
+	date ? (fromDate(date, getLocalTimeZone()) as never) : (date as never);
+
+export const fromIntlDate = <T extends DateValue | null | undefined>(
+	date: T,
+): T extends DateValue ? Date : T => (date ? (date.toDate(getLocalTimeZone()) as never) : (date as never));
+
+/**
+ * Format a DateValue to string (MM/DD/YYYY or MM/DD/YYYY hh:mm AM/PM)
+ */
+export const formatDate = (date: DateValue | null, withTime = false): string => {
+	if (!date) {
+		return '';
+	}
+
+	const options: Intl.DateTimeFormatOptions = {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit',
+	};
+
+	if (withTime) {
+		options.hour = '2-digit';
+		options.minute = '2-digit';
+		options.hour12 = true;
+	}
+
+	return new Intl.DateTimeFormat('en-US', options).format(fromIntlDate(date));
+};
+
+/**
+ * Parse a date string (MM/DD/YYYY or MM/DD/YYYY, hh:mm AM/PM) to DateValue
+ */
+export const parseDate = (dateStr: string): DateValue | null => {
+	const parsed = new Date(dateStr);
+	if (isNaN(parsed.getTime())) {
+		return null;
+	}
+
+	return fromDate(parsed, getLocalTimeZone());
+};
+
+/**
+ * Validate date string
+ */
+export const validateDateString = ({
+	text,
+	min,
+	max,
+}: {
+	text: string;
+	min?: DateValue | null;
+	max?: DateValue | null;
+	withTime?: boolean;
+}): boolean => {
+	if (!text.trim()) {
+		return true;
+	}
+
+	const date = parseDate(text);
+	if (!date) {
+		return false;
+	}
+
+	if (min && date.compare(min) < 0) {
+		return false;
+	}
+	if (max && date.compare(max) > 0) {
+		return false;
+	}
+
+	return true;
+};
+
+export const isSameDay = (
+	date1: DateValue | null | undefined,
+	date2: DateValue | null | undefined,
+): boolean => {
+	if (!date1 || !date2) {
+		return false;
+	}
+
+	return date1.year === date2.year && date1.month === date2.month && date1.day === date2.day;
+};

package/src/components/ds-date-picker/ds-date-picker.utils.unit.test.ts

@@ -0,0 +1,226 @@
+import { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';
+import { assert, describe, expect, it } from 'vitest';
+import {
+	formatDate,
+	fromIntlDate,
+	isSameDay,
+	parseDate,
+	toIntlDate,
+	validateDateString,
+} from './ds-date-picker.utils';
+
+const createDate = (year: number, month: number, day: number, hours = 0, minutes = 0) => {
+	const d = new Date(year, month - 1, day);
+	d.setHours(hours, minutes, 0, 0);
+	return d;
+};
+
+const createDateValue = (year: number, month: number, day: number, hours?: number, minutes?: number) => {
+	if (hours !== undefined && minutes !== undefined) {
+		return new CalendarDateTime(year, month, day, hours, minutes, 0);
+	}
+	return new CalendarDate(year, month, day);
+};
+
+function assertDateValue(value: unknown): asserts value is CalendarDate | CalendarDateTime {
+	expect(value).toBeDefined();
+	expect(value).toHaveProperty('year');
+	expect(value).toHaveProperty('month');
+	expect(value).toHaveProperty('day');
+}
+
+describe('Date Picker Utils', () => {
+	describe('toIntlDate', () => {
+		it('should return null for null input', () => {
+			expect(toIntlDate(null)).toBeNull();
+		});
+
+		it('should return undefined for undefined input', () => {
+			// eslint-disable-next-line @typescript-eslint/no-confusing-void-expression
+			expect(toIntlDate(undefined)).toBeUndefined();
+		});
+
+		it('should convert valid Date to DateValue with correct year/month/day', () => {
+			const date = createDate(2024, 3, 15);
+			const result = toIntlDate(date);
+
+			assertDateValue(result);
+			expect(result.year).toBe(2024);
+			expect(result.month).toBe(3);
+			expect(result.day).toBe(15);
+		});
+	});
+
+	describe('fromIntlDate', () => {
+		it('should return null for null input', () => {
+			expect(fromIntlDate(null)).toBeNull();
+		});
+
+		it('should return undefined for undefined input', () => {
+			// eslint-disable-next-line @typescript-eslint/no-confusing-void-expression
+			expect(fromIntlDate(undefined)).toBeUndefined();
+		});
+
+		it('should convert valid DateValue to Date with correct year/month/day', () => {
+			const dateValue = createDateValue(2024, 3, 15);
+			const result = fromIntlDate(dateValue);
+
+			expect(result).toBeInstanceOf(Date);
+			expect(result.getFullYear()).toBe(2024);
+			expect(result.getMonth()).toBe(2);
+			expect(result.getDate()).toBe(15);
+		});
+
+		it('should handle CalendarDateTime with time components', () => {
+			const dateValue = createDateValue(2024, 3, 15, 14, 30);
+			const result = fromIntlDate(dateValue);
+
+			expect(result).toBeInstanceOf(Date);
+			expect(result.getHours()).toBe(14);
+			expect(result.getMinutes()).toBe(30);
+		});
+	});
+
+	describe('formatDate', () => {
+		it('should return empty string for null', () => {
+			expect(formatDate(null)).toBe('');
+		});
+
+		it('should format date as MM/DD/YYYY with zero-padding', () => {
+			const dateValue = createDateValue(2024, 1, 5);
+			expect(formatDate(dateValue)).toBe('01/05/2024');
+		});
+
+		it('should format date with time when withTime=true', () => {
+			const dateValue = createDateValue(2024, 3, 15, 14, 30);
+			expect(formatDate(dateValue, true)).toBe('03/15/2024, 02:30 PM');
+		});
+
+		it('should format midnight and noon correctly', () => {
+			expect(formatDate(createDateValue(2024, 3, 15, 0, 0), true)).toBe('03/15/2024, 12:00 AM');
+			expect(formatDate(createDateValue(2024, 3, 15, 12, 0), true)).toBe('03/15/2024, 12:00 PM');
+		});
+	});
+
+	describe('parseDate', () => {
+		it('should return null for empty or whitespace string', () => {
+			expect(parseDate('')).toBeNull();
+			expect(parseDate('   ')).toBeNull();
+		});
+
+		it('should parse valid MM/DD/YYYY format', () => {
+			const result = parseDate('03/15/2024');
+
+			assertDateValue(result);
+			expect(result.year).toBe(2024);
+			expect(result.month).toBe(3);
+			expect(result.day).toBe(15);
+		});
+
+		it('should parse valid MM/DD/YYYY hh:mm AM/PM format when withTime=true', () => {
+			const result = parseDate('03/15/2024 02:30 PM');
+
+			assertDateValue(result);
+			assert(result instanceof ZonedDateTime);
+			expect(result.hour).toBe(14);
+			expect(result.minute).toBe(30);
+		});
+
+		it('should return null for invalid format', () => {
+			expect(parseDate('not a date')).toBeNull();
+		});
+
+		it('should convert 12 AM to hour 0 and keep 12 PM as hour 12', () => {
+			const midnight = parseDate('03/15/2024 12:00 AM');
+			const noon = parseDate('03/15/2024 12:00 PM');
+
+			assert(midnight instanceof ZonedDateTime);
+			assert(noon instanceof ZonedDateTime);
+
+			expect(midnight.hour).toBe(0);
+			expect(noon.hour).toBe(12);
+		});
+
+		it('should return null for invalid hour or minute values', () => {
+			expect(parseDate('03/15/2024 13:00 PM')).toBeNull();
+			expect(parseDate('03/15/2024 09:60 AM')).toBeNull();
+		});
+	});
+
+	describe('validateDateString', () => {
+		it('should return true for empty string', () => {
+			expect(validateDateString({ text: '' })).toBe(true);
+		});
+
+		it('should return false for invalid format', () => {
+			expect(validateDateString({ text: 'not a date' })).toBe(false);
+			expect(validateDateString({ text: 'not a date', withTime: true })).toBe(false);
+		});
+
+		it('should return false when date is before min', () => {
+			const min = createDateValue(2024, 3, 1);
+
+			expect(validateDateString({ text: '02/28/2024', min })).toBe(false);
+		});
+
+		it('should return false when date is after max', () => {
+			const max = createDateValue(2024, 3, 31);
+
+			expect(validateDateString({ text: '04/01/2024', max })).toBe(false);
+		});
+
+		it('should return true when date is within bounds', () => {
+			const min = createDateValue(2024, 3, 1);
+			const max = createDateValue(2024, 3, 31);
+
+			expect(validateDateString({ text: '03/15/2024', min, max })).toBe(true);
+		});
+	});
+
+	describe('isSameDay', () => {
+		it('should return false for null or undefined inputs', () => {
+			const date = createDateValue(2024, 3, 15);
+			expect(isSameDay(null, date)).toBe(false);
+			expect(isSameDay(date, null)).toBe(false);
+			expect(isSameDay(null, null)).toBe(false);
+		});
+
+		it('should return true when dates have same year/month/day', () => {
+			const date1 = createDateValue(2024, 3, 15);
+			const date2 = createDateValue(2024, 3, 15);
+			expect(isSameDay(date1, date2)).toBe(true);
+		});
+
+		it('should return false when dates differ', () => {
+			const date1 = createDateValue(2024, 3, 15);
+			expect(isSameDay(date1, createDateValue(2025, 3, 15))).toBe(false);
+			expect(isSameDay(date1, createDateValue(2024, 4, 15))).toBe(false);
+			expect(isSameDay(date1, createDateValue(2024, 3, 16))).toBe(false);
+		});
+
+		it('should ignore time components', () => {
+			const date1 = createDateValue(2024, 3, 15, 9, 0);
+			const date2 = createDateValue(2024, 3, 15, 17, 30);
+			expect(isSameDay(date1, date2)).toBe(true);
+		});
+	});
+
+	describe('round-trip conversion', () => {
+		it('should preserve date through Date → DateValue → Date conversion', () => {
+			const original = createDate(2024, 3, 15, 14, 30);
+			const dateValue = toIntlDate(original);
+			const result = fromIntlDate(dateValue);
+
+			expect(result.getFullYear()).toBe(original.getFullYear());
+			expect(result.getMonth()).toBe(original.getMonth());
+			expect(result.getDate()).toBe(original.getDate());
+			expect(result.getHours()).toBe(original.getHours());
+			expect(result.getMinutes()).toBe(original.getMinutes());
+		});
+
+		it('should preserve date through string → DateValue → string conversion', () => {
+			expect(formatDate(parseDate('03/15/2024'))).toBe('03/15/2024');
+			expect(formatDate(parseDate('03/15/2024 02:30 PM'), true)).toBe('03/15/2024, 02:30 PM');
+		});
+	});
+});

package/src/components/ds-date-picker/index.ts

@@ -0,0 +1,2 @@
+export { default as DsDatePicker } from './ds-date-picker';
+export type { DsDatePickerProps, DsDatePickerLocale, DsDatePickerSlotProps } from './ds-date-picker.types';

package/src/components/ds-date-range-picker/ds-date-range-picker.module.scss

@@ -0,0 +1,20 @@
+.root {
+	display: flex;
+	gap: var(--spacing-xs);
+}
+
+.horizontal {
+	align-items: flex-end;
+}
+
+.vertical {
+	flex-direction: column;
+}
+
+.clearButton {
+	align-self: flex-end;
+}
+
+.formControl {
+	flex: 1;
+}