@evolve.ui/core-components 1.0.0 → 1.1.0

package/src/Countdown/hooks/useGetCountdown.ts

@@ -0,0 +1,103 @@
+import ms from 'ms';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { usePrevious } from '../../hooks/usePrevious';
+import { CountdownFlashpoint } from '../Countdown.types';
+
+type Props = {
+    completionTime: number;
+    flashpoint?: CountdownFlashpoint;
+    forceSeconds?: boolean;
+    startTime?: number;
+};
+
+export const useGetCountdown = ({ completionTime, flashpoint, forceSeconds, startTime }: Props) => {
+    // this will trigger the hook to update the remaining time calculations
+    const intervalRef = useRef<ReturnType<typeof setInterval>>(null);
+
+    const previousStartTime = usePrevious(startTime);
+    const [now, setNow] = useState(startTime ?? Date.now());
+    const [isUrgent, setIsUrgent] = useState(false);
+
+    const timeUntilCompletion = completionTime - now;
+
+    // number of complete days until the end
+    const daysUntilEnd = Math.max(Math.floor(timeUntilCompletion / ms('1d')), 0);
+    // divide into number of hours, and then remove the number of complete days via modulo
+    const hoursUntilEnd = Math.max(Math.floor((timeUntilCompletion / ms('1h')) % 24), 0);
+    // divide into number of minutes, and then remove the number of complete hours via modulo
+    const minutesUntilEnd = Math.max(Math.floor((timeUntilCompletion / ms('1m')) % 60), 0);
+    // divide into number of seconds, and then remove the number of complete minutes via modulo
+    const secondsUntilEnd = Math.max(Math.floor((timeUntilCompletion / ms('1s')) % 60), 0);
+
+    useEffect(() => {
+        if (startTime && startTime !== previousStartTime && intervalRef.current) {
+            clearInterval(intervalRef.current);
+            setNow(startTime);
+
+            const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? ms('1m') : ms('1s');
+            intervalRef.current = setInterval(() => {
+                setNow(startTime + nextIntervalAmount);
+            }, nextIntervalAmount);
+        }
+    }, [forceSeconds, hoursUntilEnd, minutesUntilEnd, previousStartTime, startTime]);
+
+    useEffect(() => {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+        }
+        // if there are hours remaining, we don't show seconds, so we can reduce the number of calls by waiting a full minute for the next countdown update
+        const nextIntervalAmount = hoursUntilEnd > 1 && minutesUntilEnd > 0 && !forceSeconds ? ms('1m') : ms('1s');
+        intervalRef.current = setInterval(() => {
+            setNow((previousNow) => previousNow + nextIntervalAmount);
+        }, nextIntervalAmount);
+        if (flashpoint) {
+            const { duration, value } = flashpoint;
+            const noDaysRemain = daysUntilEnd === 0;
+            const noHoursRemain = hoursUntilEnd === 0;
+            const noMinutesRemain = minutesUntilEnd === 0;
+            // when determining urgency, the smaller value should be zero before it is marked as urgent
+            switch (duration) {
+                case 'd':
+                default: {
+                    const areDaysUrgent = value > daysUntilEnd;
+                    const areRemainingHoursUrgent = value === daysUntilEnd && hoursUntilEnd === 0;
+                    setIsUrgent(areDaysUrgent || areRemainingHoursUrgent);
+                    break;
+                }
+                case 'h': {
+                    const areHoursUrgent = value > hoursUntilEnd;
+                    const areRemainingMinutesUrgent = value === hoursUntilEnd && minutesUntilEnd === 0;
+                    setIsUrgent(noDaysRemain && (areHoursUrgent || areRemainingMinutesUrgent));
+                    break;
+                }
+                case 'm': {
+                    const areMinutesUrgent = value > minutesUntilEnd;
+                    const areRemainingSecondsUrgent = value === minutesUntilEnd && secondsUntilEnd === 0;
+                    setIsUrgent(noDaysRemain && noHoursRemain && (areMinutesUrgent || areRemainingSecondsUrgent));
+                    break;
+                }
+                case 's':
+                    setIsUrgent(noDaysRemain && noHoursRemain && noMinutesRemain && value >= secondsUntilEnd);
+                    break;
+            }
+        }
+
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [daysUntilEnd, flashpoint, forceSeconds, hoursUntilEnd, minutesUntilEnd, secondsUntilEnd]);
+
+    return useMemo(
+        () => ({
+            daysUntilEnd,
+            hoursUntilEnd,
+            isUrgent,
+            minutesUntilEnd,
+            secondsUntilEnd,
+        }),
+        [daysUntilEnd, hoursUntilEnd, isUrgent, minutesUntilEnd, secondsUntilEnd]
+    );
+};

package/src/DateTimeInput/dateInput/DateInput.tsx

@@ -0,0 +1,199 @@
+import { ComponentProps, FocusEvent, FormEvent, forwardRef, useCallback, useEffect, useState } from 'react';
+
+import { TextInput } from '../../TextInput/TextInput';
+import { getDisplayDate } from '../utils';
+
+type Props = {
+    /**
+     * Whether the input allows past dates
+     */
+    allowPastDates?: boolean;
+    /**
+     * This is the date that will be displayed
+     */
+    date?: Date;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * helper text shown below input field, will default to 'mm/dd/yyyy' if no placeholder or help text is provided
+     */
+    helpText?: ComponentProps<typeof TextInput>['helpText'];
+    /**
+     * label for the input field, defaults to 'Date'
+     */
+    labelText?: ComponentProps<typeof TextInput>['labelText'];
+    /**
+     * The setter of a `useState<boolean>` that indicates whether the input date is valid.
+     */
+    onValidDateChange?: (date: Date) => void;
+} & Partial<Omit<ComponentProps<typeof TextInput>, 'type' | 'secure'>>;
+
+export const DateInput = forwardRef<HTMLInputElement, Props>(
+    (
+        {
+            allowPastDates = false,
+            date,
+            disabled,
+            errorText = 'Invalid date',
+            hasError: propsHasError = false,
+            helpText,
+            labelText,
+            onBlur,
+            onChange,
+            onClear,
+            onKeyDown,
+            onValidDateChange,
+            ...rest
+        },
+        ref
+    ) => {
+        const [dateErr, setDateErr] = useState<boolean>(false);
+
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        const hasError = propsHasError || dateErr;
+        const [storedDate, setStoredDate] = useState<Date | undefined>(date);
+        const [displayValue, setDisplayValue] = useState<string>(date !== undefined ? getDisplayDate(date) : '');
+
+        // Local deviation from hammer: hammer keeps two separate `[date]` effects that both
+        // reset displayValue; merged into one here (the second only added setStoredDate).
+        useEffect(() => {
+            if (date !== undefined) {
+                setDateErr(false);
+                setDisplayValue(getDisplayDate(date));
+            } else {
+                setDisplayValue('');
+            }
+            setStoredDate(date);
+        }, [date]);
+
+        const isValidDate = useCallback(
+            (date: Date): boolean => {
+                // Check if it's a valid date first
+                if (date.toString() === 'Invalid Date') {
+                    setDateErr(true);
+                    return false;
+                }
+
+                // Check if date is before today
+                const today = new Date();
+                today.setHours(0, 0, 0, 0); // Reset time to start of day for fair comparison
+
+                const isBeforeToday = date < today;
+                // If allowPastDates is true, allow dates before today
+                const isValid = allowPastDates || !isBeforeToday;
+
+                setDateErr(!isValid);
+                return isValid;
+            },
+            [allowPastDates]
+        );
+
+        const validateAndFormatDate = useCallback(
+            (value: string) => {
+                const date = new Date(value);
+
+                if (!isValidDate(date)) {
+                    return;
+                }
+
+                // localize date format
+                const displayDate = getDisplayDate(date);
+
+                setDisplayValue(displayDate);
+                onValidDateChange?.(date);
+            },
+            [onValidDateChange, isValidDate]
+        );
+
+        const handleOnBlur = useCallback(
+            (e: FocusEvent<HTMLInputElement>) => {
+                const value = e.currentTarget.value;
+
+                // empty date clears errors
+                if (value === '') {
+                    setDateErr(false);
+                    return;
+                }
+
+                validateAndFormatDate(value);
+                onBlur?.(e);
+            },
+            [onBlur, validateAndFormatDate]
+        );
+
+        const handleOnChange = useCallback(
+            (e: FormEvent<HTMLInputElement>) => {
+                // Remove any non-digit characters from the input
+                const digits = e.currentTarget.value.replace(/\D/g, '');
+
+                // Format the digits with slashes
+                let formattedValue = '';
+                if (digits.length > 0) {
+                    // Handle month
+                    formattedValue = digits.slice(0, 2);
+                    if (digits.length > 2) {
+                        // Handle day
+                        formattedValue += '/' + digits.slice(2, 4);
+                        if (digits.length > 4) {
+                            // Handle year
+                            formattedValue += '/' + digits.slice(4, 8);
+                        }
+                    }
+                }
+
+                // Ensure we don't exceed the mm/dd/yyyy format length
+                if (formattedValue.length <= 10) {
+                    setDisplayValue(formattedValue);
+
+                    // If there was a previous error, validate as user types
+                    if (dateErr && formattedValue.length === 10) {
+                        validateAndFormatDate(formattedValue);
+                    } else if (formattedValue.length < 10) {
+                        // Clear error if user is still typing
+                        setDateErr(false);
+                    }
+
+                    onChange?.(e);
+                }
+            },
+            [onChange, dateErr, validateAndFormatDate]
+        );
+
+        const handleKeyDownEnter = useCallback(
+            (event: React.KeyboardEvent<HTMLInputElement>) => {
+                if (event.key === 'Enter') {
+                    validateAndFormatDate(event.currentTarget.value);
+                }
+                onKeyDown?.(event);
+            },
+            [validateAndFormatDate, onKeyDown]
+        );
+
+        return (
+            <TextInput
+                data-testid="date-input"
+                disabled={disabled}
+                errorText={errorText}
+                hasError={hasError}
+                helpText={helpText}
+                labelText={labelText}
+                onBlur={handleOnBlur}
+                onChange={handleOnChange}
+                onClear={() => {
+                    onClear?.();
+                    if (date !== undefined && storedDate !== undefined && date !== storedDate) {
+                        setDisplayValue(getDisplayDate(date));
+                        setStoredDate(date);
+                    }
+                }}
+                onKeyDown={handleKeyDownEnter}
+                ref={ref}
+                type="text"
+                value={displayValue}
+                {...rest}
+            />
+        );
+    }
+);

package/src/DateTimeInput/datePicker/DatePicker.tsx

@@ -0,0 +1,138 @@
+import {
+    autoUpdate,
+    flip,
+    FloatingPortal,
+    offset,
+    shift,
+    useDismiss,
+    useFloating,
+    useInteractions,
+    useMergeRefs,
+    useRole,
+} from '@floating-ui/react';
+import { ComponentProps, forwardRef, useCallback, useEffect, useState } from 'react';
+
+import { IconButton } from '../../IconButton/IconButton';
+import { CalendarBlank } from '../../Icons';
+import { DatePickerTargetId } from '../../providers/targets/DatePickerTarget';
+import { DateInput } from '../dateInput/DateInput';
+import { Calendar } from './components/calendar/Calendar';
+
+const today = new Date();
+
+type Props = {
+    calendarProps?: ComponentProps<typeof Calendar>;
+    closeOnSelect?: boolean;
+    zIndex?: number;
+} & ComponentProps<typeof DateInput>;
+
+export const DatePicker = forwardRef<HTMLInputElement, Props>(
+    (
+        {
+            calendarProps,
+            closeOnSelect,
+            date: dateProp,
+            disabled,
+            onClear,
+            onValidDateChange,
+            small,
+            zIndex = 15,
+            ...rest
+        },
+        ref
+    ) => {
+        const [date, setDate] = useState<Date | undefined>(dateProp);
+
+        useEffect(() => {
+            setDate(dateProp);
+        }, [dateProp]);
+
+        const handleOnClear = useCallback(() => {
+            setDate(undefined);
+            onClear?.();
+        }, [onClear, setDate]);
+
+        // #region floating-ui
+        const [isOpen, setIsOpen] = useState(false);
+        const middleware = [
+            shift(),
+            offset({
+                crossAxis: -8,
+                mainAxis: 12,
+            }),
+            flip(),
+        ];
+        const { context, floatingStyles, refs } = useFloating({
+            middleware: middleware,
+            onOpenChange: setIsOpen,
+            open: isOpen,
+            placement: 'bottom-start',
+            whileElementsMounted: autoUpdate,
+        });
+        // Closes the floating element when a dismissal is requested — by default, when the user presses the escape key or outside of the floating element.
+        const dismiss = useDismiss(context);
+        // Adds the correct ARIA attributes for a dialog to the popover and reference elements
+        const role = useRole(context);
+        // A hook to merge or compose interaction event handlers together, preserving memoization.
+        const { getFloatingProps, getReferenceProps } = useInteractions([dismiss, role]);
+        // Merges an array of refs, returning a memoized callback ref or null.
+        const mergedRef = useMergeRefs([ref, refs.setReference]);
+        // #endregion floating-ui
+
+        return (
+            <>
+                <DateInput
+                    clearAriaLabel="Clear date"
+                    date={date}
+                    disabled={disabled}
+                    onClear={handleOnClear}
+                    onValidDateChange={(value) => {
+                        setDate(value);
+                        onValidDateChange?.(value);
+                    }}
+                    ref={mergedRef}
+                    small={small}
+                    suffix={
+                        <IconButton
+                            aria-label="Open Calendar"
+                            data-testid="open-calendar-button"
+                            disabled={disabled}
+                            icon={CalendarBlank}
+                            onClick={() => setIsOpen(!isOpen)}
+                            size="sm"
+                            type="button"
+                        />
+                    }
+                    {...getReferenceProps()}
+                    {...rest}
+                />
+
+                {isOpen && (
+                    <FloatingPortal id={DatePickerTargetId}>
+                        <div
+                            className="w-full max-w-[312px] cursor-default rounded-container border border-border-secondary bg-background-primary shadow-02"
+                            data-testid="date-picker-popover"
+                            ref={refs.setFloating}
+                            style={{ ...floatingStyles, zIndex }}
+                            {...getFloatingProps()}
+                        >
+                            <Calendar
+                                disabled={{ before: today }}
+                                onSelectDate={(date: Date) => {
+                                    setDate(date);
+                                    onValidDateChange?.(date);
+
+                                    if (closeOnSelect) {
+                                        setIsOpen(false);
+                                    }
+                                }}
+                                selectedDate={date}
+                                {...calendarProps}
+                            />
+                        </div>
+                    </FloatingPortal>
+                )}
+            </>
+        );
+    }
+);

package/src/DateTimeInput/datePicker/components/calendar/Calendar.tsx

@@ -0,0 +1,72 @@
+import { cn } from '@evolve.ui/theme-system';
+import { DayPicker, PropsBase } from 'react-day-picker';
+
+import { IconButton } from '../../../../IconButton/IconButton';
+import { ArrowLeft, ArrowRight } from '../../../../Icons';
+
+const dateToday = new Date();
+
+export type CalendarProps = {
+    onSelectDate?: (date: Date) => void;
+    selectedDate?: Date;
+} & Partial<Omit<PropsBase, 'styles' | 'style' | 'modifiersStyles' | 'components' | 'footer' | 'mode' | 'classNames'>>;
+
+export const Calendar = ({ onSelectDate, selectedDate, ...rest }: CalendarProps) => {
+    return (
+        <DayPicker
+            className="m-sm"
+            classNames={{
+                caption_label: cn('hui-text-h5 pb-sm'),
+                day: cn('h-[40px] w-[40px] rounded-full hover:bg-background-hover'),
+                day_button: cn('hui-text-body-primary h-full w-full text-center'),
+                disabled: cn('bg-background-primary opacity-50 hover:bg-background-primary'),
+                month_caption: cn('flex h-[50px] items-center justify-center'),
+                month_grid: cn('w-full'),
+                months: cn('w-full'),
+                nav: cn('absolute flex w-full justify-between'),
+                outside: cn(''),
+                range_end: '',
+                range_middle: '',
+                range_start: '',
+                root: cn('relative'),
+                selected: cn(
+                    'rounded-full border-none bg-background-info-dark text-text-inverse hover:bg-background-info-dark'
+                ),
+                today: cn('outline -outline-offset-2 outline-border-selected'),
+                week: cn(''),
+                weekday: cn('hui-text-label-mini py-[18px]'),
+                weekdays: cn('border-y border-border-secondary'),
+                weeks: cn('border-t border-border-secondary'),
+            }}
+            components={{
+                NextMonthButton: (props) => (
+                    <IconButton
+                        icon={ArrowRight}
+                        onClick={props.onClick}
+                        size="sm"
+                    />
+                ),
+                PreviousMonthButton: (props) => (
+                    <IconButton
+                        icon={ArrowLeft}
+                        onClick={props.onClick}
+                        size="sm"
+                    />
+                ),
+            }}
+            data-testid="calendar"
+            defaultMonth={dateToday}
+            formatters={{
+                formatWeekdayName: (date) => new Intl.DateTimeFormat('en-US', { weekday: 'short' }).format(date),
+            }}
+            mode="single"
+            onSelect={(value) => {
+                if (value instanceof Date) {
+                    onSelectDate?.(value);
+                }
+            }}
+            selected={selectedDate}
+            {...rest}
+        />
+    );
+};

package/src/DateTimeInput/datePicker/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export { DatePickerTarget } from '../../providers/targets/DatePickerTarget';

package/src/DateTimeInput/timeInput/TimeInput.tsx

@@ -0,0 +1,128 @@
+import { ComponentProps, FocusEvent, FormEvent, forwardRef, useCallback, useEffect, useState } from 'react';
+
+import { TextInput } from '../../TextInput/TextInput';
+import { getDisplayTime } from '../utils';
+import { createDateWithParsedTime, parseTimeValue } from '../utils/parseTimeValue';
+
+type Props = {
+    /**
+     * Whether the input is in 24-hour format
+     */
+    is24hour?: boolean;
+    /**
+     * label for the input field, defaults to 'Select Time'
+     */
+    labelText?: ComponentProps<typeof TextInput>['labelText'];
+    /**
+     * The setter of a `useState<Date>` that indicates whether the input time is valid.
+     * NOTE: if props.time is valid that will be used to set the time date object, otherwise
+     * the date object will use today's date with the input time.
+     */
+    onValidTimeChange?: (time: Date | undefined) => void;
+    /**
+     * Input fields placeholder defaults to '00 : 00 AM'
+     */
+    placeholder?: ComponentProps<typeof TextInput>['placeholder'];
+    /**
+     * This is the time that will be displayed in HH:MM (AM/PM) format
+     */
+    time?: Date;
+} & Partial<Omit<ComponentProps<typeof TextInput>, 'type' | 'secure'>>;
+export const TimeInput = forwardRef<HTMLInputElement, Props>(
+    (
+        {
+            errorText = 'Invalid time',
+            hasError: propsHasError = false,
+            is24hour = false,
+            labelText = 'Select Time',
+            onBlur,
+            onChange,
+            onValidTimeChange,
+            placeholder = '00 : 00 AM',
+            time,
+            ...rest
+        },
+        ref
+    ) => {
+        const [timeErr, setTimeErr] = useState<boolean>(false);
+
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        const hasError = propsHasError || timeErr;
+
+        const [displayValue, setDisplayValue] = useState<string>(
+            time !== undefined ? getDisplayTime(time, is24hour) : ''
+        );
+        useEffect(() => {
+            if (time === undefined || time.toString() !== 'Invalid Date') {
+                setTimeErr(false);
+                setDisplayValue(time !== undefined ? getDisplayTime(time, is24hour) : '');
+            }
+        }, [time, is24hour]);
+
+        const validateAndFormatTime = useCallback(
+            (value: string) => {
+                if (value === '') {
+                    setTimeErr(false);
+                    onValidTimeChange?.(undefined);
+                    return;
+                }
+
+                const parsedTime = parseTimeValue(value);
+                if (parsedTime === undefined) {
+                    setTimeErr(true);
+                    return;
+                }
+
+                const validBaseDate = time !== undefined && time.toString() !== 'Invalid Date' ? time : undefined;
+                const inputTime = createDateWithParsedTime(parsedTime, validBaseDate);
+
+                // localize date format
+                const displayTime = getDisplayTime(inputTime, is24hour);
+
+                setDisplayValue(displayTime);
+                setTimeErr(false);
+                onValidTimeChange?.(inputTime);
+            },
+            [is24hour, onValidTimeChange, time]
+        );
+
+        const handleOnBlur = useCallback(
+            (e: FocusEvent<HTMLInputElement>) => {
+                const value = e.currentTarget.value;
+
+                // empty time clears errors
+                if (value === '') {
+                    setTimeErr(false);
+                }
+
+                validateAndFormatTime(value);
+                onBlur?.(e);
+            },
+            [onBlur, validateAndFormatTime]
+        );
+
+        const handleOnChange = useCallback(
+            (e: FormEvent<HTMLInputElement>) => {
+                setDisplayValue(e.currentTarget.value);
+                onChange?.(e);
+            },
+            [onChange]
+        );
+
+        return (
+            <TextInput
+                data-testid="time-input"
+                errorText={errorText}
+                hasError={hasError}
+                labelText={labelText}
+                onBlur={handleOnBlur}
+                onChange={handleOnChange}
+                placeholder={placeholder}
+                ref={ref}
+                type="text"
+                value={displayValue}
+                {...rest}
+            />
+        );
+    }
+);