@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.1

package/.storybook/preview.tsx

@@ -73,6 +73,9 @@ const preview = {
           'Hooks',
           'Layout Components',
           'All Components',
+          'Primitives',
+          'Typography',
+          'Forms',
         ],
       },
     },

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.3.1 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.4.1 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.3.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.4.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.4.1
+
+### Patch Changes
+
+- [#544](https://github.com/utilitywarehouse/hearth/pull/544) [`98e6423`](https://github.com/utilitywarehouse/hearth/commit/98e642347a0aca8c23babb15ea6b5c70b6adca0f) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds legacy colour palette for backwards compatibility
+
+## 0.4.0
+
+### Minor Changes
+
+- [#511](https://github.com/utilitywarehouse/hearth/pull/511) [`04f804c`](https://github.com/utilitywarehouse/hearth/commit/04f804ca93d6e8881f649a0374a3b878c3217623) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `DatePicker` and `DatePickerInput` components
+
+### Patch Changes
+
+- [#511](https://github.com/utilitywarehouse/hearth/pull/511) [`04f804c`](https://github.com/utilitywarehouse/hearth/commit/04f804ca93d6e8881f649a0374a3b878c3217623) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `useTheme` typing
+
 ## 0.3.1
 
 ### Patch Changes

package/build/components/CurrencyInput/CurrencyInput.js

@@ -21,7 +21,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
         }
     };
     const displayValue = autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
-    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
+    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';
 const styles = StyleSheet.create(theme => ({

package/build/components/DatePicker/DatePicker.context.d.ts

@@ -0,0 +1,19 @@
+import type { DatePickerBaseProps, DateType } from './DatePicker.props';
+import { CalendarViews } from './enums';
+export interface DatePickerContextType extends DatePickerBaseProps {
+    showOutsideDays: boolean;
+    firstDayOfWeek: number;
+    calendarView: CalendarViews;
+    currentDate: DateType;
+    currentYear: number;
+    numerals: 'latn';
+    setCalendarView: (value: CalendarViews) => void;
+    onSelectDate: (date: DateType) => void;
+    onSelectMonth: (month: number) => void;
+    onSelectYear: (year: number) => void;
+    onChangeMonth: (value: number) => void;
+    onChangeYear: (value: number) => void;
+    closeDatePicker: () => void;
+}
+export declare const DatePickerContext: import("react").Context<DatePickerContextType>;
+export declare const useDatePickerContext: () => DatePickerContextType;

package/build/components/DatePicker/DatePicker.context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const DatePickerContext = createContext({});
+export const useDatePickerContext = () => useContext(DatePickerContext);

package/build/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,19 @@
+import type { DatePickerBaseProps, DateType, MultiChange, RangeChange, SingleChange } from './DatePicker.props';
+export interface DatePickerSingleProps extends DatePickerBaseProps {
+    mode: 'single';
+    date?: DateType;
+    onChange?: SingleChange;
+}
+export interface DatePickerRangeProps extends DatePickerBaseProps {
+    mode: 'range';
+    startDate?: DateType;
+    endDate?: DateType;
+    onChange?: RangeChange;
+}
+export interface DatePickerMultipleProps extends DatePickerBaseProps {
+    mode: 'multiple';
+    dates?: DateType[];
+    onChange?: MultiChange;
+}
+declare const DateTimePicker: (props: DatePickerSingleProps | DatePickerRangeProps | DatePickerMultipleProps) => import("react/jsx-runtime").JSX.Element;
+export default DateTimePicker;

package/build/components/DatePicker/DatePicker.js

@@ -0,0 +1,479 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import localeData from 'dayjs/plugin/localeData';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from 'react';
+import { AccessibilityInfo, findNodeHandle, Platform, View as RNView } from 'react-native';
+import { usePrevious } from '../../hooks/usePrevious';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
+import { DatePickerContext } from './DatePicker.context';
+import Calendar from './DatePickerCalendar';
+import { CalendarActionKind, CONTAINER_HEIGHT, WEEKDAYS_HEIGHT } from './enums';
+import { areDatesOnSameDay, dateToUnix, getEndOfDay, getStartOfDay, removeTime } from './utils';
+dayjs.extend(localeData);
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(duration);
+const DateTimePicker = (props) => {
+    const numerals = 'latn';
+    const { mode = 'single', timeZone, showOutsideDays = true, timePicker = false, firstDayOfWeek = 1, 
+    // startYear,
+    // endYear,
+    minDate, maxDate, enabledDates, disabledDates, date, startDate, endDate, dates, min, max, onChange, initialView = 'day', containerHeight = CONTAINER_HEIGHT, weekdaysHeight = WEEKDAYS_HEIGHT, navigationPosition = 'right', weekdaysFormat = 'min', monthsFormat = 'short', monthCaptionFormat = 'full', multiRangeMode, hideHeader, hideFooter, hideWeekdays, disableMonthPicker, disableYearPicker, month, year, onMonthChange = () => { }, onYearChange = () => { }, use12Hours, ref, onCancel = () => { }, } = props;
+    dayjs.tz.setDefault(timeZone);
+    dayjs.locale('en');
+    const modalRef = useRef(null);
+    const calendarViewRef = useRef(null);
+    const scrollViewRef = useRef(null);
+    // Forward ref methods to parent component
+    useImperativeHandle(ref, () => modalRef.current);
+    const closeDatePicker = useCallback(() => {
+        modalRef.current?.close();
+    }, [modalRef.current]);
+    const prevTimezone = usePrevious(timeZone);
+    const initialCalendarView = useMemo(() => (mode !== 'single' && initialView === 'time' ? 'day' : initialView), [mode, initialView]);
+    const firstDay = useMemo(() => (firstDayOfWeek && firstDayOfWeek > 0 && firstDayOfWeek <= 6 ? firstDayOfWeek : 0), [firstDayOfWeek]);
+    const initialState = useMemo(() => {
+        let initialDate = dayjs().tz(timeZone);
+        if (mode === 'single' && date) {
+            initialDate = dayjs(date);
+        }
+        if (mode === 'range' && startDate) {
+            initialDate = dayjs(startDate);
+        }
+        if (mode === 'multiple' && dates && dates.length > 0) {
+            initialDate = dayjs(dates[0]);
+        }
+        if (minDate && initialDate.isBefore(minDate)) {
+            initialDate = dayjs(minDate);
+        }
+        if (month !== undefined && month && month >= 0 && month <= 11) {
+            initialDate = initialDate.month(month);
+        }
+        if (year !== undefined && year >= 0) {
+            initialDate = initialDate.year(year);
+        }
+        let _date = (date ? dayjs(date) : date);
+        if (_date && maxDate && dayjs(_date).isAfter(maxDate)) {
+            _date = dayjs(maxDate);
+        }
+        if (_date && minDate && dayjs(_date).isBefore(minDate)) {
+            _date = dayjs(minDate);
+        }
+        let start = (startDate ? dayjs(startDate) : startDate);
+        if (start && maxDate && dayjs(start).isAfter(maxDate)) {
+            start = dayjs(maxDate);
+        }
+        if (start && minDate && dayjs(start).isBefore(minDate)) {
+            start = dayjs(minDate);
+        }
+        let end = (endDate ? dayjs(endDate) : endDate);
+        if (end && maxDate && dayjs(end).isAfter(maxDate)) {
+            end = dayjs(maxDate);
+        }
+        if (end && minDate && dayjs(end).isBefore(minDate)) {
+            end = dayjs(minDate);
+        }
+        return {
+            date: _date,
+            startDate: start,
+            endDate: end,
+            dates,
+            calendarView: initialCalendarView,
+            currentDate: initialDate,
+            currentYear: initialDate.year(),
+        };
+    }, [
+        mode,
+        date,
+        startDate,
+        endDate,
+        dates,
+        minDate,
+        maxDate,
+        month,
+        year,
+        timeZone,
+        initialCalendarView,
+    ]);
+    const [state, dispatch] = useReducer((prevState, action) => {
+        switch (action.type) {
+            case CalendarActionKind.SET_CALENDAR_VIEW:
+                return {
+                    ...prevState,
+                    calendarView: action.payload,
+                };
+            case CalendarActionKind.CHANGE_CURRENT_DATE:
+                return {
+                    ...prevState,
+                    currentDate: action.payload,
+                };
+            case CalendarActionKind.CHANGE_CURRENT_YEAR:
+                return {
+                    ...prevState,
+                    currentYear: action.payload,
+                };
+            case CalendarActionKind.CHANGE_SELECTED_DATE:
+                const { date: selectedDate } = action.payload;
+                return {
+                    ...prevState,
+                    date: selectedDate,
+                    currentDate: selectedDate,
+                };
+            case CalendarActionKind.CHANGE_SELECTED_RANGE:
+                const { startDate: start, endDate: end } = action.payload;
+                return {
+                    ...prevState,
+                    startDate: start,
+                    endDate: end,
+                };
+            case CalendarActionKind.CHANGE_SELECTED_MULTIPLE:
+                const { dates: selectedDates } = action.payload;
+                return {
+                    ...prevState,
+                    dates: selectedDates,
+                };
+            case CalendarActionKind.RESET_STATE:
+                return action.payload;
+            default:
+                return prevState;
+        }
+    }, initialState);
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    useEffect(() => {
+        const newState = {
+            ...initialState,
+        };
+        dispatch({ type: CalendarActionKind.RESET_STATE, payload: newState });
+    }, []);
+    useEffect(() => {
+        if (prevTimezone !== timeZone) {
+            const newDate = dayjs().tz(timeZone);
+            dispatch({
+                type: CalendarActionKind.CHANGE_CURRENT_DATE,
+                payload: newDate,
+            });
+        }
+    }, [timeZone, prevTimezone]);
+    useEffect(() => {
+        if (mode === 'single') {
+            let _date = (date &&
+                (timePicker ? dayjs.tz(date, timeZone) : getStartOfDay(dayjs.tz(date, timeZone)))) ??
+                date;
+            if (_date && maxDate && dayjs.tz(_date, timeZone).isAfter(maxDate)) {
+                _date = dayjs.tz(maxDate, timeZone);
+            }
+            if (_date && minDate && dayjs.tz(_date, timeZone).isBefore(minDate)) {
+                _date = dayjs.tz(minDate, timeZone);
+            }
+            dispatch({
+                type: CalendarActionKind.CHANGE_SELECTED_DATE,
+                payload: { date: _date },
+            });
+            if (prevTimezone !== timeZone) {
+                onChange({
+                    date: _date ? dayjs(_date).toDate() : _date,
+                });
+            }
+        }
+        else if (mode === 'range') {
+            let start = (startDate ? dayjs.tz(startDate, timeZone) : startDate);
+            if (start && maxDate && dayjs.tz(start, timeZone).isAfter(maxDate)) {
+                start = dayjs.tz(maxDate, timeZone);
+            }
+            if (start && minDate && dayjs.tz(start, timeZone).isBefore(minDate)) {
+                start = dayjs.tz(minDate, timeZone);
+            }
+            let end = (endDate ? dayjs.tz(endDate, timeZone) : endDate);
+            if (end && maxDate && dayjs.tz(end, timeZone).isAfter(maxDate)) {
+                end = dayjs.tz(maxDate, timeZone);
+            }
+            if (end && minDate && dayjs.tz(end, timeZone).isBefore(minDate)) {
+                end = dayjs.tz(minDate, timeZone);
+            }
+            dispatch({
+                type: CalendarActionKind.CHANGE_SELECTED_RANGE,
+                payload: {
+                    startDate: start,
+                    endDate: end,
+                },
+            });
+            if (prevTimezone !== timeZone) {
+                onChange({
+                    startDate: start ? dayjs(start).toDate() : start,
+                    endDate: end ? dayjs(end).toDate() : end,
+                });
+            }
+        }
+        else if (mode === 'multiple') {
+            const _dates = dates?.map(date => dayjs(date).tz(timeZone));
+            dispatch({
+                type: CalendarActionKind.CHANGE_SELECTED_MULTIPLE,
+                payload: { dates: _dates },
+            });
+            if (prevTimezone !== timeZone) {
+                onChange({
+                    dates: _dates.map(item => dayjs(item).toDate()),
+                    change: 'updated',
+                });
+            }
+        }
+    }, [mode, date, startDate, endDate, dates, minDate, maxDate, timePicker, prevTimezone, timeZone]);
+    const setCalendarView = useCallback((view) => {
+        dispatch({ type: CalendarActionKind.SET_CALENDAR_VIEW, payload: view });
+    }, []);
+    const onSelectDate = useCallback((selectedDate) => {
+        if (onChange) {
+            if (mode === 'single') {
+                const newDate = timePicker
+                    ? dayjs.tz(selectedDate, timeZone)
+                    : dayjs.tz(getStartOfDay(selectedDate), timeZone);
+                dispatch({
+                    type: CalendarActionKind.CHANGE_CURRENT_DATE,
+                    payload: newDate,
+                });
+                onChange({
+                    date: newDate ? dayjs(newDate).toDate() : newDate,
+                });
+            }
+            else if (mode === 'range') {
+                // set time to 00:00:00
+                let start = removeTime(stateRef.current.startDate, timeZone);
+                let end = removeTime(stateRef.current.endDate, timeZone);
+                const selected = removeTime(selectedDate, timeZone);
+                let isStart = true;
+                let isReset = false;
+                if (dateToUnix(selected) !== dateToUnix(end) &&
+                    dateToUnix(selected) >= dateToUnix(start) &&
+                    dateToUnix(start) !== dateToUnix(end)) {
+                    isStart = false;
+                }
+                else if (start && dateToUnix(selected) === dateToUnix(start)) {
+                    isReset = true;
+                }
+                if (start && end) {
+                    if (dateToUnix(start) === dateToUnix(end) && dateToUnix(selected) > dateToUnix(start)) {
+                        isStart = false;
+                    }
+                    if (dateToUnix(selected) > dateToUnix(start) &&
+                        dateToUnix(selected) === dateToUnix(end)) {
+                        end = undefined;
+                    }
+                }
+                if (start && !end && dateToUnix(selected) < dateToUnix(start)) {
+                    end = start;
+                }
+                if (isStart && end && (min || max)) {
+                    const numberOfDays = dayjs(end).diff(selected, 'day');
+                    if ((max && numberOfDays > max) || (min && numberOfDays < min)) {
+                        isStart = true;
+                        end = undefined;
+                    }
+                }
+                if (!isStart && start && (min || max)) {
+                    const numberOfDays = dayjs(selected).diff(start, 'day');
+                    if (dateToUnix(selected) === dateToUnix(start)) {
+                        isReset = true;
+                    }
+                    else if ((max && numberOfDays > max) || (min && numberOfDays < min)) {
+                        isStart = true;
+                        end = undefined;
+                    }
+                }
+                if (isReset) {
+                    onChange({
+                        startDate: undefined,
+                        endDate: undefined,
+                    });
+                }
+                else {
+                    onChange({
+                        startDate: isStart
+                            ? dayjs(selected).toDate()
+                            : start
+                                ? dayjs.tz(start).toDate()
+                                : start,
+                        endDate: !isStart
+                            ? dayjs.tz(getEndOfDay(selected), timeZone).toDate()
+                            : end
+                                ? dayjs.tz(getEndOfDay(end), timeZone).toDate()
+                                : end,
+                    });
+                }
+            }
+            else if (mode === 'multiple') {
+                const safeDates = stateRef.current.dates || [];
+                const newDate = dayjs(selectedDate, timeZone).startOf('day');
+                const exists = safeDates.some(ed => areDatesOnSameDay(ed, newDate));
+                const newDates = exists
+                    ? safeDates.filter(ed => !areDatesOnSameDay(ed, newDate))
+                    : [...safeDates, newDate];
+                if (max && newDates.length > max) {
+                    return;
+                }
+                newDates.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1));
+                const _dates = newDates.map(date => dayjs(date).tz(timeZone));
+                onChange({
+                    dates: _dates.map(item => dayjs(item).toDate()),
+                    datePressed: newDate ? dayjs(newDate).toDate() : newDate,
+                    change: exists ? 'removed' : 'added',
+                });
+            }
+        }
+    }, [mode, timePicker, min, max, timeZone]);
+    // set the active displayed month
+    const onSelectMonth = useCallback((value) => {
+        const currentMonth = dayjs(stateRef.current.currentDate).month();
+        const newDate = dayjs(stateRef.current.currentDate).month(value);
+        // Only call onMonthChange if the month actually changed
+        if (value !== currentMonth) {
+            onMonthChange(value);
+        }
+        dispatch({
+            type: CalendarActionKind.CHANGE_CURRENT_DATE,
+            payload: newDate,
+        });
+        setCalendarView('day');
+    }, [setCalendarView, onMonthChange]);
+    // set the active displayed year
+    const onSelectYear = useCallback((value) => {
+        const currentYear = dayjs(stateRef.current.currentDate).year();
+        const newDate = dayjs(stateRef.current.currentDate).year(value);
+        // Only call onYearChange if the year actually changed
+        if (value !== currentYear) {
+            onYearChange(value);
+        }
+        dispatch({
+            type: CalendarActionKind.CHANGE_CURRENT_DATE,
+            payload: newDate,
+        });
+        setCalendarView('day');
+    }, [setCalendarView, onYearChange]);
+    const onChangeMonth = useCallback((value) => {
+        const newDate = dayjs(stateRef.current.currentDate).add(value, 'month');
+        dispatch({
+            type: CalendarActionKind.CHANGE_CURRENT_DATE,
+            payload: dayjs(newDate),
+        });
+    }, [stateRef, dispatch]);
+    const onChangeYear = useCallback((value) => {
+        dispatch({
+            type: CalendarActionKind.CHANGE_CURRENT_YEAR,
+            payload: value,
+        });
+    }, [dispatch]);
+    useEffect(() => {
+        if (month !== undefined && month >= 0 && month <= 11) {
+            onSelectMonth(month);
+        }
+    }, [month]);
+    useEffect(() => {
+        if (year !== undefined && year >= 0) {
+            onSelectYear(year);
+        }
+    }, [year]);
+    const baseContextValue = useMemo(() => ({
+        mode,
+        numerals,
+        timeZone,
+        showOutsideDays,
+        timePicker,
+        minDate,
+        maxDate,
+        min,
+        max,
+        enabledDates,
+        disabledDates,
+        firstDayOfWeek: firstDay,
+        containerHeight,
+        weekdaysHeight,
+        navigationPosition,
+        weekdaysFormat,
+        monthsFormat,
+        monthCaptionFormat,
+        multiRangeMode,
+        hideHeader,
+        hideFooter,
+        hideWeekdays,
+        disableMonthPicker,
+        disableYearPicker,
+        use12Hours,
+        closeDatePicker,
+    }), [
+        mode,
+        numerals,
+        timeZone,
+        showOutsideDays,
+        timePicker,
+        minDate,
+        maxDate,
+        min,
+        max,
+        enabledDates,
+        disabledDates,
+        firstDay,
+        containerHeight,
+        weekdaysHeight,
+        navigationPosition,
+        weekdaysFormat,
+        monthsFormat,
+        monthCaptionFormat,
+        multiRangeMode,
+        hideHeader,
+        hideFooter,
+        hideWeekdays,
+        disableMonthPicker,
+        disableYearPicker,
+        use12Hours,
+        closeDatePicker,
+    ]);
+    const handlerContextValue = useMemo(() => ({
+        setCalendarView,
+        onSelectDate,
+        onSelectMonth,
+        onSelectYear,
+        onChangeMonth,
+        onChangeYear,
+        onCancel,
+    }), [
+        setCalendarView,
+        onSelectDate,
+        onSelectMonth,
+        onSelectYear,
+        onChangeMonth,
+        onChangeYear,
+        onCancel,
+    ]);
+    const memoizedValue = useMemo(() => ({
+        ...state,
+        ...baseContextValue,
+        ...handlerContextValue,
+    }), [state, baseContextValue, handlerContextValue]);
+    const handleChange = useCallback((index) => {
+        if (index > -1) {
+            // Add a small delay to ensure the bottom sheet is fully rendered
+            setTimeout(() => {
+                // Announce to screen readers
+                AccessibilityInfo.announceForAccessibility('Date picker opened.');
+                // Set focus for screen readers - different refs for iOS vs Android
+                const scrollViewTargetRef = scrollViewRef.current?.getInnerViewNode();
+                const targetRef = calendarViewRef.current;
+                if ((Platform.OS === 'android' && targetRef) || scrollViewTargetRef) {
+                    const nodeHandle = findNodeHandle(Platform.OS === 'android' ? targetRef : scrollViewTargetRef);
+                    if (nodeHandle) {
+                        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+                    }
+                }
+            }, 50);
+        }
+    }, []);
+    return (_jsx(BottomSheetModal, { ref: modalRef, onChange: handleChange, accessible: false, children: _jsx(BottomSheetScrollView, { ref: scrollViewRef, children: _jsx(RNView, { ref: calendarViewRef, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Date picker calendar' : undefined, importantForAccessibility: Platform.OS === 'android' ? 'yes' : 'auto', children: _jsx(DatePickerContext.Provider, { value: memoizedValue, children: _jsx(Calendar, {}) }) }) }) }));
+};
+export default DateTimePicker;