@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,58 +0,0 @@
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import TimePickerView from '../TimePicker/TimePickerView';
-import { useDatePickerContext } from './DatePicker.context';
-import Days from './DatePickerDays';
-import Footer from './DatePickerFooter';
-import Header from './DatePickerHeader';
-import Months from './DatePickerMonths';
-import Years from './DatePickerYears';
-
-const Calendar = () => {
-  const {
-    hideHeader,
-    hideFooter,
-    calendarView,
-    containerHeight,
-    navigationPosition,
-    currentDate,
-    onSelectDate,
-    timeZone,
-    use12Hours,
-  } = useDatePickerContext();
-
-  const calendarContent =
-    calendarView === 'year' ? (
-      <Years />
-    ) : calendarView === 'month' ? (
-      <Months />
-    ) : calendarView === 'time' ? (
-      <TimePickerView
-        currentDate={currentDate}
-        onSelectDate={onSelectDate}
-        timeZone={timeZone}
-        use12Hours={use12Hours}
-        containerHeight={containerHeight}
-      />
-    ) : (
-      <Days />
-    );
-
-  return (
-    <View style={[styles.container]} testID="calendar">
-      {!hideHeader ? <Header navigationPosition={navigationPosition} /> : null}
-      <View style={styles.containerInner(containerHeight)}>{calendarContent}</View>
-      {!hideFooter ? <Footer /> : null}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    backgroundColor: theme.color.background.secondary,
-    gap: theme.components.datePicker.calendar.gap,
-  },
-  containerInner: (height?: number) => ({ height }),
-}));
-
-export default Calendar;

package/src/components/DatePicker/DatePickerDay.tsx

@@ -1,302 +0,0 @@
-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

@@ -1,241 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

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

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

@@ -1,29 +0,0 @@
-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);