@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/src/components/DatePicker/DatePickerDay.tsx

@@ -0,0 +1,302 @@
+import { createPressable } from '@gluestack-ui/pressable';
+import React, { memo, useMemo } from 'react';
+import { Pressable, PressableProps, View, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isEqual } from '../../utils';
+import { BodyText } from '../BodyText';
+import { CalendarDay, DateType } from './DatePicker.props';
+import { CONTAINER_HEIGHT, WEEKDAYS_HEIGHT } from './enums';
+
+interface Props {
+  day: CalendarDay;
+  onSelectDate: (date: DateType) => void;
+  containerHeight?: number;
+  weekdaysHeight?: number;
+}
+
+export const EmptyDay = React.memo(() => {
+  return <View style={styles.dayWrapper} />;
+});
+
+const DayPressable = createPressable({
+  Root: (props: PressableProps & { states?: { active?: boolean; disabled?: boolean } }) => {
+    const { states, style } = props;
+    styles.useVariants({ isActive: states?.active });
+    return <Pressable {...props} style={[styles.dayContainer, style as ViewStyle]} />;
+  },
+});
+
+const Day = ({
+  day,
+  onSelectDate,
+  containerHeight = CONTAINER_HEIGHT,
+  weekdaysHeight = WEEKDAYS_HEIGHT,
+}: Props) => {
+  const {
+    text,
+    date,
+    isDisabled,
+    isCurrentMonth,
+    isToday,
+    isSelected,
+    inRange,
+    leftCrop,
+    rightCrop,
+    isStartOfWeek,
+    isEndOfWeek,
+    isCrop,
+    inMiddle,
+    rangeStart,
+    rangeEnd,
+  } = day;
+
+  styles.useVariants({
+    isToday,
+    isSelected,
+    isDisabled,
+    isCurrentMonth,
+    inMiddle,
+    rangeStart,
+    rangeEnd,
+    isStartOfWeek,
+    isEndOfWeek,
+  });
+
+  const RangeFill = useMemo(() => {
+    if (!inRange) return null;
+    if (!isCrop) {
+      return <View style={[styles.rangeRoot]} />;
+    }
+    return (
+      <>
+        {leftCrop && <View style={[styles.rangeRoot, styles.leftCrop]} />}
+        {rightCrop && <View style={[styles.rangeRoot, styles.rightCrop]} />}
+      </>
+    );
+  }, [inRange, isCrop, leftCrop, rightCrop, styles.rangeRoot]);
+
+  const accessibilityLabel = useMemo(() => {
+    const dayDate = new Date(date);
+    const dayOfWeek = dayDate.toLocaleDateString('en-US', { weekday: 'long' });
+    const dayOfMonth = dayDate.toLocaleDateString('en-US', { day: 'numeric' });
+    const month = dayDate.toLocaleDateString('en-US', { month: 'long' });
+    return `${dayOfWeek}, ${month} ${dayOfMonth}${isSelected ? ', selected' : ''}`;
+  }, [date]);
+
+  return (
+    <View style={styles.dayWrapper}>
+      <View style={[styles.dayCell(containerHeight, weekdaysHeight)]}>
+        {RangeFill}
+        <DayPressable
+          disabled={isDisabled}
+          onPress={() => onSelectDate(date)}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          style={styles.dayContainer}
+        >
+          <BodyText style={[styles.text]}>{text}</BodyText>
+        </DayPressable>
+        <View style={[styles.indicator]} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  dayWrapper: {
+    width: `${99.9 / 7}%`,
+    padding: 2,
+    variants: {
+      isDisabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+      isCurrentMonth: {
+        false: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        isCurrentMonth: false,
+        inMiddle: true,
+        styles: {
+          opacity: 1,
+        },
+      },
+      {
+        isCurrentMonth: false,
+        rangeStart: true,
+        styles: {
+          opacity: 1,
+        },
+      },
+      {
+        isCurrentMonth: false,
+        rangeEnd: true,
+        styles: {
+          opacity: 1,
+        },
+      },
+    ],
+  },
+  dayContainer: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: theme.components.datePicker.calendar.item.borderRadius,
+    variants: {
+      isSelected: {
+        true: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      rangeStart: {
+        true: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      inMiddle: {
+        true: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+            },
+          },
+        },
+      },
+      rangeEnd: {
+        true: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      isActive: {
+        true: {
+          backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        isActive: true,
+        inMiddle: true,
+        styles: {
+          backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+        },
+      },
+    ],
+    _web: {
+      '_focus-visible': {
+        ...theme.helpers.focusVisible,
+      },
+      _active: {
+        backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+      },
+    },
+  },
+  text: {
+    color: theme.color.text.primary,
+    variants: {
+      isSelected: {
+        true: {
+          color: theme.color.text.inverted,
+        },
+      },
+    },
+  },
+  indicator: {
+    position: 'absolute',
+    width: theme.components.datePicker.calendar.item.roundelWidth,
+    height: theme.components.datePicker.calendar.item.roundelHeight,
+    top: 34,
+    left: '50%',
+    transform: [{ translateX: -(theme.components.datePicker.calendar.item.roundelWidth / 2) }],
+    borderRadius: theme.borderRadius.full,
+    variants: {
+      isToday: {
+        true: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      isSelected: {
+        true: {},
+      },
+    },
+    compoundVariants: [
+      {
+        isToday: true,
+        isSelected: true,
+        styles: {
+          backgroundColor: theme.components.datePicker.calendar.item.roundelBackgroundColorInverted,
+        },
+      },
+    ],
+  },
+  dayCell: (containerHeight: number, weekdaysHeight: number) => ({
+    minHeight: (containerHeight - weekdaysHeight) / 6,
+    borderRadius: theme.components.datePicker.calendar.item.borderRadius,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.color.background.secondary,
+  }),
+  rangeWrapper: {
+    flex: 1,
+  },
+  rangeRoot: {
+    position: 'absolute',
+    top: 0,
+    left: -2,
+    right: -2,
+    bottom: 0,
+    variants: {
+      inMiddle: {
+        true: {
+          backgroundColor: theme.components.datePicker.calendar.item.rangeBackground,
+          _web: {
+            _hover: {
+              backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+            },
+          },
+        },
+      },
+      isStartOfWeek: {
+        true: {},
+      },
+      isEndOfWeek: {
+        true: {},
+      },
+    },
+  },
+  leftCrop: {
+    left: '50%',
+    backgroundColor: theme.components.datePicker.calendar.item.rangeBackground,
+    _web: {
+      _hover: {
+        backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+      },
+    },
+  },
+  rightCrop: {
+    right: '50%',
+    backgroundColor: theme.components.datePicker.calendar.item.rangeBackground,
+    _web: {
+      _hover: {
+        backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+      },
+    },
+  },
+}));
+
+const customComparator = (prev: Readonly<Props>, next: Readonly<Props>) => {
+  const areEqual =
+    isEqual(prev.day, next.day) &&
+    prev.onSelectDate === next.onSelectDate &&
+    prev.containerHeight === next.containerHeight;
+
+  return areEqual;
+};
+
+export default memo(Day, customComparator);

package/src/components/DatePicker/DatePickerDays.tsx

@@ -0,0 +1,241 @@
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useDatePickerContext } from './DatePicker.context';
+import { DateType } from './DatePicker.props';
+import Day, { EmptyDay } from './DatePickerDay';
+import Weekdays from './DatePickerWeekdays';
+import {
+  areDatesOnSameDay,
+  getDate,
+  getDaysInMonth,
+  getMonthDays,
+  getParsedDate,
+  isDateBetween,
+} from './utils';
+
+const Days = () => {
+  const {
+    mode,
+    numerals = 'latn',
+    timeZone,
+    date,
+    startDate,
+    endDate,
+    dates,
+    currentDate,
+    onSelectDate,
+    showOutsideDays,
+    minDate,
+    maxDate,
+    enabledDates,
+    disabledDates,
+    firstDayOfWeek,
+    containerHeight,
+    weekdaysHeight,
+    weekdaysFormat,
+    multiRangeMode,
+    hideWeekdays,
+  } = useDatePickerContext();
+
+  const { year, month, hour, minute } = getParsedDate(currentDate);
+
+  const handleSelectDate = useCallback(
+    (selectedDate: DateType) => {
+      const newDate = getDate(selectedDate).hour(hour).minute(minute);
+
+      onSelectDate(newDate);
+    },
+    [onSelectDate, hour, minute]
+  );
+
+  const daysGrid = useMemo(() => {
+    const today = dayjs().tz(timeZone);
+    dayjs.tz.setDefault(timeZone);
+
+    const { fullDaysInMonth, prevMonthDays, prevMonthOffset, daysInCurrentMonth, daysInNextMonth } =
+      getDaysInMonth(currentDate, showOutsideDays, firstDayOfWeek);
+
+    return getMonthDays(
+      currentDate,
+      showOutsideDays,
+      minDate,
+      maxDate,
+      firstDayOfWeek,
+      enabledDates,
+      disabledDates,
+      prevMonthDays,
+      prevMonthOffset,
+      daysInCurrentMonth,
+      daysInNextMonth,
+      numerals
+    ).map((day, index) => {
+      if (!day) return null;
+
+      let leftCrop = day.dayOfMonth === 1;
+      let rightCrop = day.dayOfMonth === fullDaysInMonth;
+      const isFirstDayOfMonth = day.dayOfMonth === 1;
+      const isLastDayOfMonth = day.dayOfMonth === fullDaysInMonth;
+      const isToday = areDatesOnSameDay(day.date, today);
+      let inRange = false;
+      let isSelected = false;
+      let isCrop = false;
+      let inMiddle = false;
+      let rangeStart = false;
+      let rangeEnd = false;
+
+      if (mode === 'range') {
+        rightCrop = false;
+        const selectedStartDay = areDatesOnSameDay(day.date, startDate);
+        const selectedEndDay = areDatesOnSameDay(day.date, endDate);
+        isSelected = selectedStartDay || selectedEndDay;
+        inRange = isDateBetween(day.date, { startDate, endDate });
+
+        if (selectedStartDay) leftCrop = true;
+        if (selectedEndDay) rightCrop = true;
+        if (index % 7 === 0 && !selectedStartDay) leftCrop = false;
+        if (index % 7 === 6 && !selectedEndDay) rightCrop = false;
+
+        if (
+          (isFirstDayOfMonth && selectedEndDay) ||
+          (isLastDayOfMonth && selectedStartDay) ||
+          dayjs(startDate).format('DDMMYYYY') === dayjs(endDate).format('DDMMYYYY')
+        ) {
+          inRange = false;
+        }
+
+        isCrop = inRange && (leftCrop || rightCrop) && !(leftCrop && rightCrop);
+        inMiddle = inRange && !leftCrop && !rightCrop;
+        rangeStart = inRange && leftCrop;
+        rangeEnd = inRange && rightCrop;
+      } else if (mode === 'multiple') {
+        const safeDates = dates || [];
+        isSelected = safeDates.some(d => areDatesOnSameDay(day.date, d));
+
+        // if the selected days in a row, implements range mode style to selected days
+        if (multiRangeMode) {
+          const yesterday = dayjs(day.date).subtract(1, 'day');
+          const tomorrow = dayjs(day.date).add(1, 'day');
+
+          const yesterdaySelected = safeDates.some(d => areDatesOnSameDay(d, yesterday));
+          const tomorrowSelected = safeDates.some(d => areDatesOnSameDay(d, tomorrow));
+
+          // Reset all flags
+          inRange = false;
+          leftCrop = false;
+          rightCrop = false;
+
+          if (isSelected) {
+            // Case: both adjacent days are selected - this is a middle day
+            if (yesterdaySelected && tomorrowSelected) {
+              inRange = true;
+            }
+            // Case: only tomorrow is selected - this is the start of a range
+            else if (tomorrowSelected) {
+              inRange = true;
+              leftCrop = true;
+            }
+            // Case: only yesterday is selected - this is the end of a range
+            else if (yesterdaySelected) {
+              inRange = true;
+              rightCrop = true;
+            }
+
+            // Handle edge cases for first and last days of month
+            // Only apply these special cases when the day is actually part of a range
+            if (inRange) {
+              if (isFirstDayOfMonth && !tomorrowSelected) {
+                inRange = false;
+              }
+              if (isLastDayOfMonth && !yesterdaySelected) {
+                inRange = false;
+              }
+            }
+          }
+          // Set derived flags based on the core flags
+          isCrop = inRange && (leftCrop || rightCrop);
+          inMiddle = inRange && !leftCrop && !rightCrop;
+          rangeStart = inRange && leftCrop;
+          rangeEnd = inRange && rightCrop;
+        }
+      } else if (mode === 'single') {
+        isSelected = areDatesOnSameDay(day.date, date);
+      }
+
+      return {
+        ...day,
+        isToday,
+        isSelected,
+        inRange,
+        leftCrop,
+        rightCrop,
+        isCrop,
+        inMiddle,
+        rangeStart,
+        rangeEnd,
+      };
+    });
+  }, [
+    mode,
+    numerals,
+    timeZone,
+    month,
+    year,
+    showOutsideDays,
+    firstDayOfWeek,
+    minDate,
+    maxDate,
+    enabledDates,
+    disabledDates,
+    date,
+    startDate,
+    endDate,
+    dates,
+    multiRangeMode,
+    currentDate,
+  ]);
+
+  return (
+    <View style={styles.container} testID="day-selector">
+      {!hideWeekdays ? (
+        <Weekdays
+          firstDayOfWeek={firstDayOfWeek}
+          weekdaysFormat={weekdaysFormat}
+          weekdaysHeight={weekdaysHeight}
+        />
+      ) : null}
+      <View style={styles.daysContainer} testID="days">
+        {daysGrid?.map((day, index) => {
+          return day ? (
+            <Day
+              key={index}
+              day={day}
+              onSelectDate={handleSelectDate}
+              containerHeight={containerHeight}
+              weekdaysHeight={weekdaysHeight}
+            />
+          ) : (
+            <EmptyDay key={index} />
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+  },
+  daysContainer: {
+    width: '100%',
+    height: '100%',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+  },
+});
+
+export default Days;

package/src/components/DatePicker/DatePickerFooter.tsx

@@ -0,0 +1,35 @@
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Button } from '../Button';
+import { useDatePickerContext } from './DatePicker.context';
+
+const Footer = () => {
+  const { closeDatePicker, onCancel } = useDatePickerContext();
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+    closeDatePicker();
+  };
+  return (
+    <View style={styles.container} testID="footer">
+      <Button variant="ghost" colorScheme="functional" onPress={handleCancel}>
+        Cancel
+      </Button>
+      <Button variant="ghost" colorScheme="functional" onPress={closeDatePicker}>
+        Ok
+      </Button>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flexDirection: 'row',
+    gap: theme.components.datePicker.calendar.footer.gap,
+    justifyContent: 'flex-end',
+  },
+}));
+
+export default Footer;

package/src/components/DatePicker/DatePickerHeader/DatePickerHeader.props.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { NavigationPosition } from '../DatePicker.props';
+
+export type HeaderProps = {
+  PrevIcon?: React.ReactNode;
+  NextIcon?: React.ReactNode;
+  navigationPosition?: NavigationPosition;
+};
+
+export type NavigationProps = {};

package/src/components/DatePicker/DatePickerHeader/DatePickerMonthButton.tsx

@@ -0,0 +1,29 @@
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { Pressable } from 'react-native';
+import { BodyText } from '../../BodyText';
+import { useDatePickerContext } from '../DatePicker.context';
+
+const MonthButton = () => {
+  const { currentDate, calendarView, setCalendarView, disableMonthPicker, monthCaptionFormat } =
+    useDatePickerContext();
+
+  const currentMonthText = dayjs(currentDate)
+    .locale('en')
+    .format(monthCaptionFormat === 'full' ? 'MMMM' : 'MMM');
+
+  return (
+    <Pressable
+      disabled={disableMonthPicker}
+      onPress={() => setCalendarView(calendarView === 'month' ? 'day' : 'month')}
+      testID="btn-month"
+      accessibilityRole="button"
+      accessibilityLabel={currentMonthText}
+      accessibilityHint={`${calendarView === 'month' ? 'Tap to switch to day view' : 'Tap to switch to month view'}`}
+    >
+      <BodyText weight="semibold">{currentMonthText}</BodyText>
+    </Pressable>
+  );
+};
+
+export default memo(MonthButton);

package/src/components/DatePicker/DatePickerHeader/DatePickerNextButton.tsx

@@ -0,0 +1,46 @@
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { memo, useCallback } from 'react';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../../Icon';
+import { useDatePickerContext } from '../DatePicker.context';
+import { YEAR_PAGE_SIZE } from '../utils';
+
+const NextButton = () => {
+  const { currentYear, onChangeMonth, onChangeYear, calendarView } = useDatePickerContext();
+
+  const onPress = useCallback(() => {
+    switch (calendarView) {
+      case 'day':
+        return onChangeMonth(1);
+      case 'month':
+        return onChangeYear(currentYear + 1);
+      case 'year':
+        return onChangeYear(currentYear + YEAR_PAGE_SIZE);
+      default:
+        return {};
+    }
+  }, [calendarView, currentYear, onChangeMonth, onChangeYear]);
+
+  return (
+    <Pressable
+      disabled={calendarView === 'time'}
+      onPress={onPress}
+      testID="btn-next"
+      accessibilityRole="button"
+      accessibilityLabel={`Next ${calendarView === 'day' ? 'month' : calendarView === 'month' ? 'year' : 'years'}`}
+    >
+      <Icon as={ChevronRightSmallIcon} style={styles.icon} />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    width: 20,
+    height: 20,
+    color: theme.color.icon.primary,
+  },
+}));
+
+export default memo(NextButton);

package/src/components/DatePicker/DatePickerHeader/DatePickerPrevButton.tsx

@@ -0,0 +1,46 @@
+import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { memo, useCallback } from 'react';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../../Icon';
+import { useDatePickerContext } from '../DatePicker.context';
+import { YEAR_PAGE_SIZE } from '../utils';
+
+const PrevButton = () => {
+  const { currentYear, calendarView, onChangeMonth, onChangeYear } = useDatePickerContext();
+
+  const onPress = useCallback(() => {
+    switch (calendarView) {
+      case 'day':
+        return onChangeMonth(-1);
+      case 'month':
+        return onChangeYear(currentYear - 1);
+      case 'year':
+        return onChangeYear(currentYear - YEAR_PAGE_SIZE);
+      default:
+        return {};
+    }
+  }, [calendarView, currentYear, onChangeMonth, onChangeYear]);
+
+  return (
+    <Pressable
+      disabled={calendarView === 'time'}
+      onPress={onPress}
+      testID="btn-prev"
+      accessibilityRole="button"
+      accessibilityLabel={`Prev ${calendarView === 'day' ? 'month' : calendarView === 'month' ? 'year' : 'years'}`}
+    >
+      <Icon as={ChevronLeftSmallIcon} style={styles.icon} />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    width: 20,
+    height: 20,
+    color: theme.color.icon.primary,
+  },
+}));
+
+export default memo(PrevButton);