@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

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

@@ -0,0 +1,96 @@
+import {
+  ChevronDownSmallIcon,
+  ChevronUpSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { memo } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../../Icon';
+import { useDatePickerContext } from '../DatePicker.context';
+import { NavigationPosition } from '../DatePicker.props';
+import MonthButton from './DatePickerMonthButton';
+import { TimeButton } from './DatePickerTimeButton';
+import YearButton from './DatePickerYearButton';
+
+type Props = {
+  position: NavigationPosition;
+};
+
+const Selectors = ({ position }: Props) => {
+  const { mode, calendarView, timePicker, setCalendarView } = useDatePickerContext();
+  styles.useVariants({ position });
+  const onPress = () => {
+    if (calendarView === 'month' || calendarView === 'year') {
+      setCalendarView('day');
+    }
+    if (calendarView === 'day' || calendarView === 'time') {
+      setCalendarView('month');
+    }
+  };
+  return (
+    <View style={[styles.container]}>
+      <View style={styles.monthYearWrap}>
+        <View style={styles.monthAndYear}>
+          {calendarView !== 'year' ? <MonthButton /> : null}
+          <YearButton />
+        </View>
+        <Pressable
+          onPress={onPress}
+          accessibilityRole="button"
+          accessibilityLabel={`Change to ${calendarView === 'month' || calendarView === 'year' ? 'day' : 'month'} view`}
+        >
+          <Icon
+            as={
+              calendarView === 'month' || calendarView === 'year'
+                ? ChevronUpSmallIcon
+                : ChevronDownSmallIcon
+            }
+            style={styles.icon}
+          />
+        </Pressable>
+      </View>
+      {timePicker && mode === 'single' && calendarView !== 'year' ? <TimeButton /> : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    variants: {
+      position: {
+        left: {
+          justifyContent: 'space-between',
+          flexDirection: 'row-reverse',
+        },
+        right: {
+          justifyContent: 'space-between',
+          flexDirection: 'row',
+        },
+        around: {
+          justifyContent: 'space-evenly',
+        },
+      },
+    },
+  },
+  icon: {
+    color: theme.color.icon.primary,
+    width: 20,
+    height: 20,
+  },
+  monthYearWrap: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.components.datePicker.calendar.header.dateGap,
+  },
+  monthAndYear: {
+    gap: 5,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+}));
+
+export default memo(Selectors);

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

@@ -0,0 +1,48 @@
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import { Pressable } from 'react-native';
+import { BodyText } from '../../BodyText';
+import { useDatePickerContext } from '../DatePicker.context';
+import { formatNumber, getParsedDate } from '../utils';
+
+export const TimeButton = () => {
+  const {
+    currentDate,
+    date,
+    calendarView,
+    setCalendarView,
+    numerals = 'latn',
+    use12Hours,
+  } = useDatePickerContext();
+
+  const { hour, hour12, minute, period } = useMemo(
+    () => getParsedDate(date || currentDate),
+    [date, currentDate]
+  );
+
+  const labelText = useMemo(() => {
+    const hourValue = use12Hours ? hour12 : hour;
+
+    const hourLabel =
+      hourValue < 10
+        ? `${formatNumber(0, numerals)}${formatNumber(hourValue, numerals)}`
+        : `${formatNumber(hourValue, numerals)}`;
+
+    const minuteLabel =
+      minute < 10
+        ? `${formatNumber(0, numerals)}${formatNumber(minute, numerals)}`
+        : `${formatNumber(minute, numerals)}`;
+
+    return `${hourLabel}:${minuteLabel} ${use12Hours ? period : ''}`.trim();
+  }, [numerals, hour, hour12, minute, use12Hours, period]);
+
+  return (
+    <Pressable
+      onPress={() => setCalendarView(calendarView === 'time' ? 'day' : 'time')}
+      accessibilityRole="button"
+      accessibilityLabel={dayjs(date || currentDate).format('HH:mm')}
+    >
+      <BodyText weight="semibold">{labelText}</BodyText>
+    </Pressable>
+  );
+};

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

@@ -0,0 +1,50 @@
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+import { useDatePickerContext } from '../DatePicker.context';
+import { formatNumber, getDateYear, getYearRange } from '../utils';
+
+const YearButton = () => {
+  const {
+    currentDate,
+    calendarView,
+    setCalendarView,
+    currentYear,
+    onChangeYear,
+    disableYearPicker,
+    numerals = 'latn',
+  } = useDatePickerContext();
+
+  const years = getYearRange(currentYear);
+  return (
+    <Pressable
+      disabled={disableYearPicker}
+      onPress={() => {
+        setCalendarView(calendarView === 'year' ? 'day' : 'year');
+        onChangeYear(getDateYear(currentDate));
+      }}
+      testID="btn-year"
+      accessibilityRole="button"
+      accessibilityLabel={dayjs(currentDate).format('YYYY')}
+      accessibilityHint={`${calendarView === 'year' ? 'Tap to switch to day view' : 'Tap to switch to year view'}`}
+      style={[styles.container]}
+    >
+      <BodyText weight="semibold">
+        {calendarView === 'year'
+          ? `${formatNumber(years[0] || 0, numerals)} - ${formatNumber(years[years.length - 1] || 0, numerals)}`
+          : formatNumber(parseInt(dayjs(currentDate).format('YYYY')), numerals)}
+      </BodyText>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default memo(YearButton);

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

@@ -0,0 +1,64 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import type { HeaderProps, NavigationProps } from './DatePickerHeader.props';
+import NextButton from './DatePickerNextButton';
+import PrevButton from './DatePickerPrevButton';
+import Selectors from './DatePickerSelectors';
+
+const NavigationButtons = ({}: NavigationProps) => (
+  <View style={styles.navigation}>
+    <PrevButton />
+    <NextButton />
+  </View>
+);
+
+const Header = ({ navigationPosition = 'around' }: HeaderProps) => (
+  <View style={[styles.headerContainer]}>
+    <View style={styles.container}>
+      {navigationPosition === 'left' ? (
+        <>
+          <NavigationButtons />
+          <Selectors position="left" />
+        </>
+      ) : navigationPosition === 'right' ? (
+        <>
+          <Selectors position="right" />
+          <NavigationButtons />
+        </>
+      ) : (
+        <>
+          <PrevButton />
+          <Selectors position="around" />
+          <NextButton />
+        </>
+      )}
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create(theme => ({
+  headerContainer: {
+    paddingVertical: 3,
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  navigation: {
+    flexDirection: 'row',
+    gap: theme.components.datePicker.header.controlGap,
+  },
+}));
+
+const customComparator = (prev: Readonly<HeaderProps>, next: Readonly<HeaderProps>) => {
+  const areEqual =
+    prev.PrevIcon === next.PrevIcon &&
+    prev.NextIcon === next.NextIcon &&
+    prev.navigationPosition === next.navigationPosition;
+
+  return areEqual;
+};
+
+export default memo(Header, customComparator);

package/src/components/DatePicker/DatePickerMonths.tsx

@@ -0,0 +1,101 @@
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useDatePickerContext } from './DatePicker.context';
+import { CONTAINER_HEIGHT } from './enums';
+import { getMonthsArray, getParsedDate, isMonthDisabled } from './utils';
+
+const Months = () => {
+  const {
+    currentDate,
+    onSelectMonth,
+    containerHeight = CONTAINER_HEIGHT,
+    monthsFormat = 'short',
+    minDate,
+    maxDate,
+  } = useDatePickerContext();
+
+  const { month } = getParsedDate(currentDate);
+
+  return (
+    <View style={styles.container} testID="month-selector">
+      <View style={styles.months}>
+        {getMonthsArray().map((item, index) => {
+          const isSelected = index === month;
+          const isDisabled = isMonthDisabled(index, currentDate, {
+            minDate,
+            maxDate,
+          });
+          styles.useVariants({ isSelected, isDisabled });
+
+          return (
+            <View key={index} style={styles.monthCell(containerHeight)}>
+              <Pressable
+                disabled={isDisabled}
+                onPress={() => onSelectMonth(index)}
+                accessibilityRole="button"
+                accessibilityLabel={item.name.full}
+                style={styles.item}
+              >
+                <BodyText key={index} style={styles.label}>
+                  {item.name[monthsFormat]}
+                </BodyText>
+              </Pressable>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  months: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  month: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  monthCell: (containerHeight: number) => ({
+    width: `${99.9 / 3}%`,
+    height: containerHeight / 6,
+    padding: 2,
+  }),
+  label: {
+    variants: {
+      isSelected: {
+        true: {
+          color: theme.color.text.inverted,
+        },
+      },
+    },
+  },
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    borderRadius: theme.borderRadius.md,
+    variants: {
+      isSelected: {
+        true: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      isDisabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+    },
+  },
+}));
+
+export default Months;

package/src/components/DatePicker/DatePickerWeekdays.tsx

@@ -0,0 +1,49 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { WeekdayFormat } from './DatePicker.props';
+import { WEEKDAYS_HEIGHT } from './enums';
+import { getWeekdays } from './utils';
+
+type WeekdaysProps = {
+  firstDayOfWeek: number;
+  weekdaysFormat?: WeekdayFormat;
+  weekdaysHeight?: number;
+};
+
+const Weekdays = ({
+  firstDayOfWeek,
+  weekdaysFormat = 'min',
+  weekdaysHeight = WEEKDAYS_HEIGHT,
+}: WeekdaysProps) => {
+  return (
+    <View style={[styles.container(weekdaysHeight)]} testID="weekdays">
+      {getWeekdays(firstDayOfWeek)?.map((weekday, index) => (
+        <View key={index} style={[styles.weekday]}>
+          <BodyText style={styles.text} accessible={false}>
+            {weekday.name[weekdaysFormat]}
+          </BodyText>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: (weekdaysHeight: number) => ({
+    height: weekdaysHeight,
+    flexDirection: 'row',
+    alignItems: 'center',
+  }),
+  text: {
+    color: theme.color.text.secondary,
+  },
+  weekday: {
+    width: `${99.9 / 7}%`,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}));
+
+export default memo(Weekdays);

package/src/components/DatePicker/DatePickerYears.tsx

@@ -0,0 +1,119 @@
+import { useCallback } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useDatePickerContext } from './DatePicker.context';
+import { CONTAINER_HEIGHT } from './enums';
+import { formatNumber, getDateYear, getYearRange, isYearDisabled } from './utils';
+
+const Years = () => {
+  const {
+    mode,
+    numerals = 'latn',
+    currentDate,
+    currentYear,
+    date,
+    onSelectYear,
+    containerHeight = CONTAINER_HEIGHT,
+    minDate,
+    maxDate,
+  } = useDatePickerContext();
+
+  const selectedYear = getDateYear(date);
+
+  const generateCells = useCallback(() => {
+    const years = getYearRange(currentYear);
+    const activeYear = getDateYear(currentDate);
+    const column = years.map(year => {
+      const isSelected = year === selectedYear;
+      const isActivated = year === activeYear;
+
+      const isDisabled = isYearDisabled(year, { minDate, maxDate });
+
+      styles.useVariants({ isSelected, isDisabled, isActivated });
+
+      return (
+        <View key={year} style={styles.yearCell(containerHeight)}>
+          <Pressable
+            disabled={isDisabled}
+            onPress={() => onSelectYear(year)}
+            accessibilityRole="button"
+            accessibilityLabel={year.toString()}
+            style={styles.year}
+          >
+            <BodyText key={year} style={styles.label}>
+              {formatNumber(year, numerals)}
+            </BodyText>
+          </Pressable>
+        </View>
+      );
+    });
+    return column;
+  }, [
+    onSelectYear,
+    selectedYear,
+    currentYear,
+    currentDate,
+    styles,
+    mode,
+    minDate,
+    maxDate,
+    numerals,
+  ]);
+
+  return (
+    <View style={[styles.container, styles.years]} testID="year-selector">
+      <View style={styles.years}>{generateCells()}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  years: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  year: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    borderRadius: theme.borderRadius.md,
+    variants: {
+      isActivated: {
+        true: {
+          backgroundColor: theme.color.surface.brand.default,
+        },
+      },
+      isDisabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+      isSelected: {
+        true: {},
+      },
+    },
+  },
+  yearCell: (containerHeight: number) => ({
+    width: `${99.9 / 3}%`,
+    height: containerHeight / 6,
+    padding: 2,
+  }),
+  label: {
+    variants: {
+      isActivated: {
+        true: {
+          color: theme.color.text.inverted,
+        },
+      },
+    },
+  },
+}));
+
+export default Years;

package/src/components/DatePicker/TimePicker.tsx

@@ -0,0 +1,141 @@
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useDatePickerContext } from './DatePicker.context';
+import { Numerals, PickerOption } from './DatePicker.props';
+import { CONTAINER_HEIGHT } from './enums';
+import PeriodPicker from './time-picker/period-picker';
+import Wheel from './time-picker/wheel';
+import { formatNumber, getParsedDate } from './utils';
+
+export type Period = 'AM' | 'PM';
+
+const createNumberList = (
+  num: number,
+  numerals: Numerals,
+  startFrom: number = 0
+): PickerOption[] => {
+  return Array.from({ length: num }, (_, i) => ({
+    value: i + startFrom,
+    text:
+      i + startFrom < 10
+        ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
+        : `${formatNumber(i + startFrom, numerals)}`,
+  }));
+};
+
+const TimePicker = () => {
+  const {
+    currentDate,
+    date,
+    onSelectDate,
+    timeZone,
+    numerals = 'latn',
+    use12Hours,
+  } = useDatePickerContext();
+
+  const hours = useMemo(
+    () => createNumberList(use12Hours ? 12 : 24, numerals, use12Hours ? 1 : 0),
+    [numerals, use12Hours]
+  );
+
+  const minutes = useMemo(() => createNumberList(60, numerals), [numerals]);
+
+  const { hour, hour12, minute, period } = getParsedDate(date || currentDate);
+
+  const handleChangeHour = useCallback(
+    (value: number) => {
+      let hour24 = value;
+
+      if (use12Hours) {
+        if (period === 'AM' && value === 12) {
+          hour24 = 0;
+        } else if (period === 'PM' && value < 12) {
+          hour24 = value + 12;
+        } else {
+          hour24 = value;
+        }
+      }
+      const newDate = dayjs.tz(date, timeZone).hour(hour24).minute(minute);
+      onSelectDate(newDate);
+    },
+    [date, onSelectDate, timeZone, use12Hours, period, minute]
+  );
+
+  const handleChangeMinute = useCallback(
+    (value: number) => {
+      const newDate = dayjs.tz(date, timeZone).minute(value);
+      onSelectDate(newDate);
+    },
+    [date, onSelectDate, timeZone]
+  );
+
+  const handlePeriodChange = useCallback(
+    (newPeriod: Period) => {
+      let newHour = hour12;
+      if (newPeriod === 'PM' && hour12 < 12) {
+        newHour = hour12 + 12;
+      } else if (newPeriod === 'AM' && hour12 === 12) {
+        newHour = 0;
+      } else if (newPeriod === 'AM' && hour >= 12) {
+        newHour = hour12;
+      }
+
+      const newDate = dayjs.tz(date || currentDate, timeZone).hour(newHour);
+      onSelectDate(newDate);
+    },
+    [date, currentDate, onSelectDate, timeZone, hour, hour12]
+  );
+
+  return (
+    <ScrollView
+      horizontal={true}
+      scrollEnabled={false}
+      contentContainerStyle={styles.container}
+      testID="time-selector"
+    >
+      <View style={styles.timePickerContainer}>
+        <View style={styles.wheelContainer}>
+          <Wheel value={use12Hours ? hour12 : hour} items={hours} setValue={handleChangeHour} />
+        </View>
+        <BodyText style={styles.timeSeparator}>:</BodyText>
+        <View style={styles.wheelContainer}>
+          <Wheel value={minute} items={minutes} setValue={handleChangeMinute} />
+        </View>
+      </View>
+      {use12Hours && period ? (
+        <View style={styles.periodContainer}>
+          <PeriodPicker value={period} setValue={handlePeriodChange} />
+        </View>
+      ) : null}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wheelContainer: {
+    flex: 1,
+  },
+  timePickerContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: CONTAINER_HEIGHT / 2,
+    height: CONTAINER_HEIGHT / 2,
+    flexDirection: 'row',
+  },
+  timeSeparator: {
+    marginHorizontal: 5,
+  },
+  periodContainer: {
+    marginLeft: 10,
+  },
+});
+
+export default TimePicker;

package/src/components/DatePicker/enums.ts

@@ -0,0 +1,14 @@
+export type CalendarViews = 'day' | 'month' | 'year' | 'time';
+
+export enum CalendarActionKind {
+  SET_CALENDAR_VIEW = 'SET_CALENDAR_VIEW',
+  CHANGE_CURRENT_DATE = 'CHANGE_CURRENT_DATE',
+  CHANGE_CURRENT_YEAR = 'CHANGE_CURRENT_YEAR',
+  CHANGE_SELECTED_DATE = 'CHANGE_SELECTED_DATE',
+  CHANGE_SELECTED_RANGE = 'CHANGE_SELECTED_RANGE',
+  CHANGE_SELECTED_MULTIPLE = 'CHANGE_SELECTED_MULTIPLE',
+  RESET_STATE = 'RESET_STATE',
+}
+
+export const CONTAINER_HEIGHT = 300;
+export const WEEKDAYS_HEIGHT = 25;

package/src/components/DatePicker/index.ts

@@ -0,0 +1,13 @@
+import 'dayjs/locale/en';
+import './polyfill';
+
+export type {
+  CalendarDay,
+  CalendarMode,
+  CalendarMonth,
+  CalendarWeek,
+  CalendarYear,
+  DateType,
+} from './DatePicker.props';
+
+export { default as DatePicker } from './DatePicker';