@mizen-labs/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,213 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import type { ReactElement } from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { assignRef } from "../../ref-utils";
+import { Calendar } from "../calendar/calendar";
+import { BoundFieldProvider } from "../field/field-context";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupInput,
+} from "../input-group/input-group";
+import { Popover, PopoverPopup, PopoverTrigger } from "../popover/popover";
+import { datePickerStyles } from "./date-picker.styles";
+import type { DatePickerProps } from "./date-picker.types";
+import {
+	formatIsoDate,
+	getDateInputValidationMessage,
+} from "./date-picker-date";
+import { CalendarIcon } from "./date-picker-icon";
+import { useDatePickerDraft } from "./date-picker-state";
+
+export type { DatePickerProps } from "./date-picker.types";
+
+export function DatePicker(datePickerProps: DatePickerProps): ReactElement {
+	const [isControlled] = useState(() =>
+		Object.hasOwn(datePickerProps, "value")
+	);
+	const [uncontrolledValue, setUncontrolledValue] = useState<Date | undefined>(
+		datePickerProps.defaultValue
+	);
+	const initialValue = useRef(datePickerProps.defaultValue);
+	const committedValue = isControlled
+		? datePickerProps.value
+		: uncontrolledValue;
+
+	const {
+		"aria-describedby": ariaDescribedBy,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		autoFocus,
+		captionLayout,
+		dir,
+		disabled = false,
+		endMonth,
+		id: providedId,
+		invalid: externalInvalid,
+		isDateUnavailable,
+		locale,
+		maxValue,
+		minValue,
+		name,
+		onValueChange,
+		readOnly = false,
+		ref: forwardedInputRef,
+		required,
+		size = "default",
+		startMonth,
+		weekStartsOn,
+	} = datePickerProps;
+
+	const generatedId = useId();
+	const inputId = providedId ?? generatedId;
+
+	const committedText = useMemo(
+		() => formatIsoDate(committedValue),
+		[committedValue]
+	);
+
+	const groupRef = useRef<HTMLDivElement | null>(null);
+	const [isOpen, setIsOpen] = useState(false);
+
+	const constraints = useMemo(
+		() => ({ isDateUnavailable, maxValue, minValue, required }),
+		[isDateUnavailable, maxValue, minValue, required]
+	);
+
+	const {
+		displayText,
+		handleCalendarSelect,
+		handleDraftReset,
+		handleInputBlur,
+		handleInputChange,
+		handleInputFocus,
+		handleInputKeyDown,
+		isLocalInvalid,
+	} = useDatePickerDraft({
+		committedText,
+		committedValue,
+		constraints,
+		disabled,
+		isControlled,
+		onValueChange,
+		readOnly,
+		setIsOpen,
+		setUncontrolledValue,
+	});
+
+	const isEffectivelyInvalid = Boolean(externalInvalid || isLocalInvalid);
+	const setInputRef = useCallback(
+		(node: HTMLInputElement | null) => {
+			if (!node) {
+				return assignRef(forwardedInputRef, node);
+			}
+
+			node.setCustomValidity(
+				disabled || readOnly
+					? ""
+					: getDateInputValidationMessage(displayText, constraints)
+			);
+			const { form } = node;
+			const handleFormReset = (event: Event) => {
+				queueMicrotask(() => {
+					if (event.defaultPrevented || isControlled) {
+						return;
+					}
+					setUncontrolledValue(initialValue.current);
+					setIsOpen(false);
+					handleDraftReset();
+				});
+			};
+			if (!isControlled) {
+				form?.addEventListener("reset", handleFormReset);
+			}
+			const cleanupRef = assignRef(forwardedInputRef, node);
+			return () => {
+				form?.removeEventListener("reset", handleFormReset);
+				cleanupRef?.();
+			};
+		},
+		[
+			constraints,
+			disabled,
+			displayText,
+			forwardedInputRef,
+			handleDraftReset,
+			isControlled,
+			readOnly,
+		]
+	);
+
+	return (
+		<Popover onOpenChange={setIsOpen} open={isOpen}>
+			<BoundFieldProvider value={null}>
+				<InputGroup ref={groupRef}>
+					<InputGroupInput
+						aria-describedby={ariaDescribedBy}
+						aria-label={ariaLabel}
+						aria-labelledby={ariaLabelledBy}
+						autoFocus={autoFocus}
+						disabled={disabled}
+						id={inputId}
+						invalid={isEffectivelyInvalid}
+						name={name}
+						onBlur={handleInputBlur}
+						onChange={handleInputChange}
+						onFocus={handleInputFocus}
+						onKeyDown={handleInputKeyDown}
+						placeholder="YYYY-MM-DD"
+						readOnly={readOnly}
+						ref={setInputRef}
+						required={required}
+						size={size}
+						value={displayText}
+					/>
+					<InputGroupAddon align="inline-end">
+						<PopoverTrigger
+							aria-label="Open calendar"
+							disabled={disabled}
+							{...props(
+								datePickerStyles.triggerButton,
+								disabled && datePickerStyles.triggerButtonDisabled
+							)}
+						>
+							<span {...props(datePickerStyles.triggerIcon)}>
+								<CalendarIcon />
+							</span>
+						</PopoverTrigger>
+					</InputGroupAddon>
+				</InputGroup>
+			</BoundFieldProvider>
+
+			<PopoverPopup
+				align="start"
+				anchor={groupRef}
+				aria-label={ariaLabel ?? "Date picker calendar dialog"}
+				variant="bare"
+			>
+				<Calendar
+					aria-label={ariaLabel ?? "Date picker calendar"}
+					autoFocus
+					captionLayout={captionLayout}
+					defaultMonth={committedValue}
+					dir={dir}
+					disabled={disabled}
+					endMonth={endMonth}
+					isDateUnavailable={isDateUnavailable}
+					locale={locale}
+					maxValue={maxValue}
+					minValue={minValue}
+					mode="single"
+					onValueChange={handleCalendarSelect}
+					readOnly={readOnly}
+					required={required}
+					startMonth={startMonth}
+					value={committedValue}
+					weekStartsOn={weekStartsOn}
+				/>
+			</PopoverPopup>
+		</Popover>
+	);
+}

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

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithRef } from "react";
+import type {
+	CalendarCommonProps,
+	CalendarLocale,
+} from "../calendar/calendar.types";
+
+export interface DatePickerProps {
+	readonly "aria-describedby"?: string | undefined;
+	readonly "aria-label"?: string | undefined;
+	readonly "aria-labelledby"?: string | undefined;
+	autoFocus?: boolean | undefined;
+	captionLayout?: CalendarCommonProps["captionLayout"];
+	defaultValue?: Date | undefined;
+	dir?: "ltr" | "rtl" | undefined;
+	disabled?: boolean | undefined;
+	endMonth?: Date | undefined;
+	id?: string | undefined;
+	invalid?: boolean | undefined;
+	isDateUnavailable?: ((date: Date) => boolean) | undefined;
+	locale?: CalendarLocale | undefined;
+	maxValue?: Date | undefined;
+	minValue?: Date | undefined;
+	name?: string | undefined;
+	onValueChange?: ((value: Date | undefined) => void) | undefined;
+	readOnly?: boolean | undefined;
+	ref?: ComponentPropsWithRef<"input">["ref"] | undefined;
+	required?: boolean | undefined;
+	size?: "default" | "lg" | "sm" | undefined;
+	startMonth?: Date | undefined;
+	value?: Date | undefined;
+	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+}

package/src/components/date-range-picker/date-range-picker-date.ts

@@ -0,0 +1,191 @@
+import type { CalendarRangeValue } from "../calendar/calendar.types";
+import type { DateConstraints } from "../date-picker/date-picker-date";
+import {
+	areDatesEqual,
+	formatIsoDate,
+	isDateConstraintSatisfied,
+	parseIsoDate,
+	startOfDay,
+} from "../date-picker/date-picker-date";
+
+export interface RangeConstraints extends DateConstraints {
+	readonly maxNights?: number | undefined;
+	readonly minNights?: number | undefined;
+}
+
+type RangeValidationStatus = "invalid" | "valid";
+
+export interface RangeValidationResult {
+	readonly range: CalendarRangeValue | undefined;
+	readonly status: RangeValidationStatus;
+}
+
+export function formatIsoRange(range: CalendarRangeValue | undefined): string {
+	if (!range?.from) {
+		return "";
+	}
+	const fromText = formatIsoDate(range.from);
+	if (!range.to) {
+		return fromText;
+	}
+	return `${fromText} – ${formatIsoDate(range.to)}`;
+}
+
+export function countNights(from: Date, to: Date): number {
+	const utcFrom = Date.UTC(from.getFullYear(), from.getMonth(), from.getDate());
+	const utcTo = Date.UTC(to.getFullYear(), to.getMonth(), to.getDate());
+	const diffDays = Math.round((utcTo - utcFrom) / (1000 * 60 * 60 * 24));
+	return Math.max(0, diffDays);
+}
+
+const RANGE_SEPARATOR_REGEX = /\s+[–—-]\s+|[–—]|\/|\s+(?:to)\s+/iu;
+
+export function parseIsoRange(text: string): CalendarRangeValue | undefined {
+	const trimmed = text.trim();
+	if (trimmed === "") {
+		return undefined;
+	}
+
+	const separatorMatch = RANGE_SEPARATOR_REGEX.exec(trimmed);
+	if (!separatorMatch) {
+		const single = parseIsoDate(trimmed);
+		return single ? { from: single } : undefined;
+	}
+
+	const [separator] = separatorMatch;
+	const { index } = separatorMatch;
+	const firstPart = trimmed.slice(0, index).trim();
+	const secondPart = trimmed.slice(index + separator.length).trim();
+
+	if (firstPart === "" || secondPart === "") {
+		return undefined;
+	}
+
+	const from = parseIsoDate(firstPart);
+	const to = parseIsoDate(secondPart);
+
+	if (!(from && to)) {
+		return undefined;
+	}
+
+	if (startOfDay(to).getTime() < startOfDay(from).getTime()) {
+		return undefined;
+	}
+
+	return { from, to };
+}
+
+export function areRangesEqual(
+	a: CalendarRangeValue | undefined,
+	b: CalendarRangeValue | undefined
+): boolean {
+	if (a === undefined && b === undefined) {
+		return true;
+	}
+	if (a === undefined || b === undefined) {
+		return false;
+	}
+	return areDatesEqual(a.from, b.from) && areDatesEqual(a.to, b.to);
+}
+
+function areRangeDaysAvailable(
+	from: Date,
+	to: Date,
+	isUnavailable: (date: Date) => boolean
+): boolean {
+	const current = startOfDay(from);
+	const end = startOfDay(to);
+	while (current.getTime() <= end.getTime()) {
+		if (isUnavailable(current)) {
+			return false;
+		}
+		current.setDate(current.getDate() + 1);
+	}
+	return true;
+}
+
+function areNightsWithinLimits(
+	nights: number,
+	minNights?: number,
+	maxNights?: number
+): boolean {
+	if (minNights !== undefined && nights < minNights) {
+		return false;
+	}
+	return !(maxNights !== undefined && nights > maxNights);
+}
+
+export function isRangeConstraintSatisfied(
+	range: CalendarRangeValue,
+	constraints: RangeConstraints
+): boolean {
+	if (!isDateConstraintSatisfied(range.from, constraints)) {
+		return false;
+	}
+	if (!range.to) {
+		return true;
+	}
+	if (startOfDay(range.to).getTime() < startOfDay(range.from).getTime()) {
+		return false;
+	}
+	if (!isDateConstraintSatisfied(range.to, constraints)) {
+		return false;
+	}
+	const nights = countNights(range.from, range.to);
+	if (
+		!areNightsWithinLimits(nights, constraints.minNights, constraints.maxNights)
+	) {
+		return false;
+	}
+	if (constraints.isDateUnavailable) {
+		return areRangeDaysAvailable(
+			range.from,
+			range.to,
+			constraints.isDateUnavailable
+		);
+	}
+	return true;
+}
+
+export function validateRangeInput(
+	text: string,
+	constraints: RangeConstraints
+): RangeValidationResult {
+	const trimmed = text.trim();
+	if (trimmed === "") {
+		return {
+			range: undefined,
+			status: constraints.required ? "invalid" : "valid",
+		};
+	}
+
+	const parsed = parseIsoRange(trimmed);
+	if (!parsed) {
+		return {
+			range: undefined,
+			status: "invalid",
+		};
+	}
+
+	if (!(parsed.to && isRangeConstraintSatisfied(parsed, constraints))) {
+		return {
+			range: undefined,
+			status: "invalid",
+		};
+	}
+
+	return {
+		range: parsed,
+		status: "valid",
+	};
+}
+
+export function getRangeInputValidationMessage(
+	text: string,
+	constraints: RangeConstraints
+): string {
+	return text !== "" &&
+		validateRangeInput(text, constraints).status === "invalid"
+		? "Enter a valid date range within the allowed limits."
+		: "";
+}

package/src/components/date-range-picker/date-range-picker-state.ts

@@ -0,0 +1,235 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { useCallback, useState } from "react";
+import type { CalendarRangeValue } from "../calendar/calendar.types";
+import type { RangeConstraints } from "./date-range-picker-date";
+import {
+	areRangesEqual,
+	formatIsoRange,
+	getRangeInputValidationMessage,
+	isRangeConstraintSatisfied,
+	validateRangeInput,
+} from "./date-range-picker-date";
+
+export interface UseDateRangePickerDraftOptions {
+	committedText: string;
+	committedValue: CalendarRangeValue | undefined;
+	constraints: RangeConstraints;
+	disabled: boolean;
+	isControlled: boolean;
+	onValueChange?: ((value: CalendarRangeValue | undefined) => void) | undefined;
+	readOnly: boolean;
+	setIsOpen: (open: boolean) => void;
+	setUncontrolledValue: (updater: CalendarRangeValue | undefined) => void;
+}
+
+function getNextCalendarCommit(selectedRange: CalendarRangeValue | undefined): {
+	readonly isComplete: boolean;
+	readonly nextVal: CalendarRangeValue | undefined;
+} {
+	if (!selectedRange) {
+		return { isComplete: false, nextVal: undefined };
+	}
+	const isComplete = selectedRange.to !== undefined;
+	return {
+		isComplete,
+		nextVal: isComplete ? selectedRange : { from: selectedRange.from },
+	};
+}
+
+export function useDateRangePickerDraft({
+	committedText,
+	committedValue,
+	constraints,
+	disabled,
+	isControlled,
+	onValueChange,
+	readOnly,
+	setIsOpen,
+	setUncontrolledValue,
+}: UseDateRangePickerDraftOptions) {
+	const [isFocused, setIsFocused] = useState(false);
+	const [focusedDraft, setFocusedDraft] = useState<string | null>(null);
+	const [invalidState, setInvalidState] = useState<{
+		baseKey: string;
+		text: string;
+	} | null>(null);
+
+	const isInvalidActive =
+		invalidState !== null && invalidState.baseKey === committedText;
+	const handleDraftReset = useCallback(() => {
+		setIsFocused(false);
+		setFocusedDraft(null);
+		setInvalidState(null);
+	}, []);
+
+	let displayText = committedText;
+	if (isFocused) {
+		displayText =
+			focusedDraft ?? (isInvalidActive ? invalidState.text : committedText);
+	} else if (isInvalidActive) {
+		displayText = invalidState.text;
+	}
+
+	const commitCandidate = useCallback(
+		(nextRange: CalendarRangeValue | undefined) => {
+			setInvalidState(null);
+			setFocusedDraft(null);
+			if (areRangesEqual(committedValue, nextRange)) {
+				return;
+			}
+			if (!isControlled) {
+				setUncontrolledValue(nextRange);
+			}
+			onValueChange?.(nextRange);
+		},
+		[committedValue, isControlled, onValueChange, setUncontrolledValue]
+	);
+
+	const handleInputChange = useCallback(
+		(event: ChangeEvent<HTMLInputElement>) => {
+			if (readOnly || disabled) {
+				return;
+			}
+			event.currentTarget.setCustomValidity(
+				getRangeInputValidationMessage(event.currentTarget.value, constraints)
+			);
+			setInvalidState(null);
+			setFocusedDraft(event.target.value);
+		},
+		[constraints, disabled, readOnly]
+	);
+
+	const handleInputFocus = useCallback(() => {
+		if (disabled) {
+			return;
+		}
+		setIsFocused(true);
+	}, [disabled]);
+
+	const handleInputBlur = useCallback(
+		(event: FocusEvent<HTMLInputElement>) => {
+			setIsFocused(false);
+			if (readOnly || disabled) {
+				return;
+			}
+			const currentDraft = focusedDraft ?? event.target.value;
+			setFocusedDraft(null);
+			const result = validateRangeInput(currentDraft, constraints);
+			event.currentTarget.setCustomValidity(
+				getRangeInputValidationMessage(currentDraft, constraints)
+			);
+
+			if (result.status === "valid") {
+				setInvalidState(null);
+				if (!areRangesEqual(committedValue, result.range)) {
+					commitCandidate(result.range);
+				}
+			} else {
+				setInvalidState({
+					baseKey: committedText,
+					text: currentDraft,
+				});
+			}
+		},
+		[
+			commitCandidate,
+			committedText,
+			committedValue,
+			constraints,
+			disabled,
+			focusedDraft,
+			readOnly,
+		]
+	);
+
+	const handleInputKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLInputElement>) => {
+			if (disabled || readOnly) {
+				return;
+			}
+			if (event.key === "Enter") {
+				const currentDraft = focusedDraft ?? event.currentTarget.value;
+				const result = validateRangeInput(currentDraft, constraints);
+				event.currentTarget.setCustomValidity(
+					getRangeInputValidationMessage(currentDraft, constraints)
+				);
+				if (result.status === "valid") {
+					commitCandidate(result.range);
+				} else {
+					setInvalidState({
+						baseKey: committedText,
+						text: currentDraft,
+					});
+					event.preventDefault();
+				}
+			} else if (event.key === "Escape") {
+				event.currentTarget.setCustomValidity(
+					getRangeInputValidationMessage(committedText, constraints)
+				);
+				setFocusedDraft(null);
+				setInvalidState(null);
+				setIsOpen(false);
+			}
+		},
+		[
+			commitCandidate,
+			committedText,
+			constraints,
+			disabled,
+			focusedDraft,
+			readOnly,
+			setIsOpen,
+		]
+	);
+
+	const handleCalendarSelect = useCallback(
+		(selectedRange: CalendarRangeValue | undefined) => {
+			if (readOnly || disabled) {
+				return;
+			}
+			if (
+				selectedRange &&
+				!isRangeConstraintSatisfied(selectedRange, constraints)
+			) {
+				return;
+			}
+			const { isComplete, nextVal } = getNextCalendarCommit(selectedRange);
+			commitCandidate(nextVal);
+			if (isComplete) {
+				setIsOpen(false);
+			}
+		},
+		[commitCandidate, constraints, disabled, readOnly, setIsOpen]
+	);
+
+	const handlePresetSelect = useCallback(
+		(presetRange: CalendarRangeValue) => {
+			if (readOnly || disabled) {
+				return;
+			}
+			if (!isRangeConstraintSatisfied(presetRange, constraints)) {
+				return;
+			}
+			commitCandidate(presetRange);
+			setIsOpen(false);
+		},
+		[commitCandidate, constraints, disabled, readOnly, setIsOpen]
+	);
+
+	const isLocalInvalid = isInvalidActive;
+
+	return {
+		displayText:
+			isFocused || isInvalidActive
+				? displayText
+				: formatIsoRange(committedValue),
+		handleCalendarSelect,
+		handleDraftReset,
+		handleInputBlur,
+		handleInputChange,
+		handleInputFocus,
+		handleInputKeyDown,
+		handlePresetSelect,
+		isLocalInvalid,
+	};
+}