@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -0,0 +1,590 @@
+import React, { useCallback, useMemo, useState } from "react"
+import { format, isBefore, isSameDay, isToday, type Locale } from "date-fns"
+import { View, Pressable, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import {
+  KeyboardArrowLeft,
+  KeyboardArrowRight
+} from "@butternutbox/pawprint-icons/core"
+import Reanimated, {
+  Easing,
+  FadeInLeft,
+  FadeInRight,
+  FadeOutLeft,
+  FadeOutRight
+} from "react-native-reanimated"
+import { IconButton } from "../../atoms/IconButton"
+import { Typography } from "../../atoms/Typography"
+
+/**
+ * Visual state for a calendar date cell.
+ *
+ * - `previous`  — Dates before today. Non-interactive, shown in muted text.
+ * - `current`   — Today's date. Bold + underlined, no indicator fill.
+ * - `default`   — A future date with no scheduled delivery. Plain text.
+ * - `nextBox`   — The next scheduled box delivery date. Filled dark indicator.
+ *                 When selected (`selectedDate` matches): dashed-border indicator.
+ *                 When disabled (`isDateDisabled` returns true): shown at reduced opacity (undeliverable — e.g. bank holiday).
+ * - `futureBox` — A future recurring delivery slot (cadence-based, typically weekly).
+ *                 Beige indicator by default.
+ *                 When selected: dashed-border indicator (projected future delivery after user's chosen date).
+ *                 When disabled: shown at reduced opacity (undeliverable — e.g. bank holiday).
+ */
+export type DateItemState =
+  | "default"
+  | "previous"
+  | "current"
+  | "nextBox"
+  | "futureBox"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const slideEaseOut = Easing.out(Easing.quad)
+
+const MONTH_SLIDE_ENTERING = {
+  forward: FadeInRight.duration(250).easing(slideEaseOut),
+  backward: FadeInLeft.duration(250).easing(slideEaseOut)
+} as const
+
+const MONTH_SLIDE_EXITING = {
+  forward: FadeOutLeft.duration(200),
+  backward: FadeOutRight.duration(200)
+} as const
+
+const DEFAULT_WEEK_LABELS: [
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string
+] = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+
+function buildCalendarGrid(year: number, month: number): (Date | null)[][] {
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const startDayOfWeek = (firstDay.getDay() + 6) % 7 // Mon=0, Sun=6
+
+  const rows: (Date | null)[][] = []
+  let currentRow: (Date | null)[] = Array(startDayOfWeek).fill(null)
+
+  for (let day = 1; day <= lastDay.getDate(); day++) {
+    currentRow.push(new Date(year, month, day))
+    if (currentRow.length === 7) {
+      rows.push(currentRow)
+      currentRow = []
+    }
+  }
+
+  if (currentRow.length > 0) {
+    while (currentRow.length < 7) currentRow.push(null)
+    rows.push(currentRow)
+  }
+
+  return rows
+}
+
+function toDateKey(date: Date): string {
+  return format(date, "yyyy-MM-dd")
+}
+
+function defaultGetDateState(date: Date): DateItemState {
+  if (isToday(date)) return "current"
+  if (isBefore(date, new Date())) return "previous"
+  return "default"
+}
+
+function getDefaultMonthLabel(
+  year: number,
+  month: number,
+  locale?: Locale
+): string {
+  return format(new Date(year, month, 1), "MMMM yyyy", { locale })
+}
+
+type DatePickerOwnProps = {
+  year: number
+  month: number
+  selectedDate?: Date | null
+  selectedDates?: Date[]
+  onDateSelect?: (date: Date) => void
+  onPrevMonth?: () => void
+  onNextMonth?: () => void
+  onMonthChange?: (year: number, month: number) => void
+  showWeekHeader?: boolean
+  showPrevControl?: boolean
+  showNextControl?: boolean
+  locale?: Locale
+  monthLabel?: string
+  weekDayLabels?: [string, string, string, string, string, string, string]
+  getDateState?: (date: Date) => DateItemState
+  isDateDisabled?: (date: Date) => boolean
+  minDate?: Date
+  maxDate?: Date
+}
+
+export type DatePickerProps = DatePickerOwnProps &
+  Omit<ViewProps, keyof DatePickerOwnProps>
+
+const StyledContainer = styled(View)<{
+  containerGap: number
+  containerMaxWidth: number
+}>(({ containerGap, containerMaxWidth }) => ({
+  flexDirection: "column",
+  gap: containerGap,
+  maxWidth: containerMaxWidth
+}))
+
+const StyledMonthHeader = styled(View)<{ headerGap: number }>(
+  ({ headerGap }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: headerGap
+  })
+)
+
+const StyledWeekRow = styled(View)({
+  flexDirection: "row"
+})
+
+const StyledWeekCell = styled(View)<{ cellHeight: number }>(
+  ({ cellHeight }) => ({
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    height: cellHeight
+  })
+)
+
+const StyledDatesGrid = styled(View)<{ rowGap: number }>(({ rowGap }) => ({
+  flexDirection: "column",
+  gap: rowGap
+}))
+
+const StyledDateRow = styled(View)({
+  flexDirection: "row"
+})
+
+const StyledDateCell = styled(View)<{ cellHeight: number }>(
+  ({ cellHeight }) => ({
+    flex: 1,
+    height: cellHeight,
+    alignItems: "center",
+    justifyContent: "center"
+  })
+)
+
+const StyledIndicator = styled(View)<{
+  indicatorSize: number
+  indicatorBorderRadius: number
+  indicatorBg: string
+  indicatorBorderWidth: number
+  indicatorBorderColor: string
+  indicatorBorderStyle: "solid" | "dashed"
+}>(
+  ({
+    indicatorSize,
+    indicatorBorderRadius,
+    indicatorBg,
+    indicatorBorderWidth,
+    indicatorBorderColor,
+    indicatorBorderStyle
+  }) => ({
+    width: indicatorSize,
+    height: indicatorSize,
+    borderRadius: indicatorBorderRadius,
+    backgroundColor: indicatorBg,
+    borderWidth: indicatorBorderWidth,
+    borderColor: indicatorBorderColor,
+    borderStyle: indicatorBorderStyle,
+    alignItems: "center",
+    justifyContent: "center"
+  })
+)
+
+/**
+ * A controlled calendar date-picker showing a single month grid.
+ *
+ * Supports date states: default, previous, current, nextBox, futureBox.
+ * Prev/next month navigation and the week-day header are optional.
+ *
+ * Note: Unlike the web version, there is no hover state (not available on mobile).
+ *
+ * @param {number} year - Full year (e.g. 2026).
+ * @param {number} month - Zero-based month index (0–11).
+ * @param {Date | null} [selectedDate] - Currently selected date.
+ * @param {(date: Date) => void} [onDateSelect] - Called when the user selects a date.
+ * @param {() => void} [onPrevMonth] - Called when the prev-month control is pressed.
+ * @param {() => void} [onNextMonth] - Called when the next-month control is pressed.
+ * @param {(year: number, month: number) => void} [onMonthChange] - Called with the new year and month (0-based) whenever the month changes via prev/next.
+ * @param {boolean} [showWeekHeader=true] - Show the Mon–Sun column headers.
+ * @param {boolean} [showPrevControl=true] - Show the left chevron control.
+ * @param {boolean} [showNextControl=true] - Show the right chevron control.
+ * @param {string} [monthLabel] - Override the month/year label (defaults to Intl formatting).
+ * @param {[string,string,string,string,string,string,string]} [weekDayLabels] - Day-column labels Mon→Sun.
+ * @param {(date: Date) => DateItemState} [getDateState] - Returns the visual state for a date.
+ *   Defaults to: past="previous", today="current", future="default".
+ * @param {(date: Date) => boolean} [isDateDisabled] - Returns true to disable a date.
+ * @param {Date} [minDate] - Dates before this (exclusive of time) will be disabled.
+ * @param {Date} [maxDate] - Dates after this (exclusive of time) will be disabled.
+ *
+ * @example
+ * ```tsx
+ * import { DatePicker } from "@butternutbox/pawprint-native"
+ *
+ * const [month, setMonth] = React.useState(new Date().getMonth())
+ * const [year, setYear] = React.useState(new Date().getFullYear())
+ * const [selected, setSelected] = React.useState<Date | null>(null)
+ *
+ * <DatePicker
+ *   year={year}
+ *   month={month}
+ *   selectedDate={selected}
+ *   onDateSelect={setSelected}
+ *   onPrevMonth={() => setMonth(m => m === 0 ? (setYear(y => y - 1), 11) : m - 1)}
+ *   onNextMonth={() => setMonth(m => m === 11 ? (setYear(y => y + 1), 0) : m + 1)}
+ * />
+ * ```
+ */
+export const DatePicker = React.forwardRef<View, DatePickerProps>(
+  (
+    {
+      year,
+      month,
+      selectedDate,
+      selectedDates,
+      onDateSelect,
+      onPrevMonth,
+      onNextMonth,
+      onMonthChange,
+      showWeekHeader = true,
+      showPrevControl = true,
+      showNextControl = true,
+      locale,
+      monthLabel,
+      weekDayLabels = DEFAULT_WEEK_LABELS,
+      getDateState,
+      isDateDisabled,
+      minDate,
+      maxDate,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { datePicker } = theme.tokens.components
+    const dt = datePicker.dateItem
+
+    const [slideDir, setSlideDir] = useState<"forward" | "backward">("forward")
+
+    const {
+      containerGap,
+      containerMaxWidth,
+      headerGap,
+      cellHeight,
+      indicatorSize,
+      indicatorBorderRadius,
+      selectedBorderWidth,
+      disabledOpacity,
+      rowGap
+    } = useMemo(
+      () => ({
+        containerGap: parseTokenValue(datePicker.spacing.gap),
+        containerMaxWidth: parseTokenValue(dt.size.width) * 7,
+        headerGap: parseTokenValue(datePicker.month.spacing.gap),
+        cellHeight: parseTokenValue(dt.size.height),
+        indicatorSize: parseTokenValue(dt.size.indicator),
+        indicatorBorderRadius: parseTokenValue(dt.borderRadius.indicator),
+        selectedBorderWidth: parseTokenValue(dt.borderWidth.indicator.selected),
+        disabledOpacity: parseTokenValue(dt.opacity.disabled),
+        rowGap: parseTokenValue(datePicker.dates.spacing.gap)
+      }),
+      [datePicker, dt]
+    )
+
+    const resolvedGetDateState = useCallback(
+      (date: Date) => getDateState?.(date) ?? defaultGetDateState(date),
+      [getDateState]
+    )
+
+    const resolvedIsDateDisabled = useCallback(
+      (date: Date) => {
+        if (isDateDisabled?.(date)) return true
+        const d = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+        if (minDate) {
+          const min = new Date(
+            minDate.getFullYear(),
+            minDate.getMonth(),
+            minDate.getDate()
+          )
+          if (d < min) return true
+        }
+        if (maxDate) {
+          const max = new Date(
+            maxDate.getFullYear(),
+            maxDate.getMonth(),
+            maxDate.getDate()
+          )
+          if (d > max) return true
+        }
+        return false
+      },
+      [isDateDisabled, minDate, maxDate]
+    )
+
+    const resolvedMonthLabel =
+      monthLabel ?? getDefaultMonthLabel(year, month, locale)
+
+    const calendarRows = useMemo(
+      () => buildCalendarGrid(year, month),
+      [year, month]
+    )
+
+    const selectedDatesSet = useMemo(
+      () => (selectedDates ? new Set(selectedDates.map(toDateKey)) : null),
+      [selectedDates]
+    )
+
+    const resolveDateCellConfig = useCallback(
+      (date: Date) => {
+        const state = resolvedGetDateState(date)
+        const isSelectedPrimary =
+          selectedDate != null && isSameDay(date, selectedDate)
+        const isSelectedSecondary =
+          selectedDatesSet?.has(toDateKey(date)) ?? false
+        const isSelected = isSelectedPrimary || isSelectedSecondary
+
+        let indicatorBg = "transparent"
+        let indicatorBorderColor = "transparent"
+        let textColor: string = dt.colour.text.default
+        let typography:
+          | typeof dt.typography.default
+          | typeof dt.typography.currentDate = dt.typography.default
+        let textDecoration: "underline" | "line-through" | undefined
+
+        if (isSelectedPrimary) {
+          indicatorBg = dt.indicator.colour.background.nextBox.selected
+          textColor = dt.colour.text.nextBox.selected
+          indicatorBorderColor = dt.colour.border.nextBoxSelected
+        } else if (isSelectedSecondary) {
+          indicatorBg = "transparent"
+          textColor = dt.colour.text.futureBox.selected
+          indicatorBorderColor = dt.colour.border.futureBoxSelected
+        } else if (state === "current") {
+          textColor = dt.colour.text.default
+          typography = dt.typography.currentDate
+          textDecoration = "underline"
+        } else if (state === "previous") {
+          textColor = dt.colour.text.previous
+          textDecoration = "line-through"
+        } else if (state === "nextBox") {
+          indicatorBg = dt.indicator.colour.background.nextBox.default
+          textColor = dt.colour.text.nextBox.default
+        } else if (state === "futureBox") {
+          indicatorBg = dt.indicator.colour.background.futureBox.default
+          textColor = dt.colour.text.futureBox.default
+        }
+
+        return {
+          state,
+          indicatorBg,
+          indicatorBorderColor,
+          textColor,
+          typography,
+          textDecoration,
+          isSelected
+        }
+      },
+      [resolvedGetDateState, selectedDate, selectedDatesSet, dt]
+    )
+
+    const handlePrevMonth = useCallback(() => {
+      setSlideDir("backward")
+      onPrevMonth?.()
+      if (onMonthChange) {
+        const newMonth = month === 0 ? 11 : month - 1
+        const newYear = month === 0 ? year - 1 : year
+        onMonthChange(newYear, newMonth)
+      }
+    }, [onPrevMonth, onMonthChange, year, month])
+
+    const handleNextMonth = useCallback(() => {
+      setSlideDir("forward")
+      onNextMonth?.()
+      if (onMonthChange) {
+        const newMonth = month === 11 ? 0 : month + 1
+        const newYear = month === 11 ? year + 1 : year
+        onMonthChange(newYear, newMonth)
+      }
+    }, [onNextMonth, onMonthChange, year, month])
+
+    return (
+      <StyledContainer
+        ref={ref}
+        containerGap={containerGap}
+        containerMaxWidth={containerMaxWidth}
+        {...rest}
+      >
+        {showWeekHeader && (
+          <StyledWeekRow accessibilityElementsHidden>
+            {weekDayLabels.map((label) => (
+              <StyledWeekCell key={label} cellHeight={cellHeight}>
+                <Typography
+                  token={datePicker.week.typography}
+                  align="center"
+                  color={datePicker.week.colour.text.default}
+                >
+                  {label}
+                </Typography>
+              </StyledWeekCell>
+            ))}
+          </StyledWeekRow>
+        )}
+
+        <StyledMonthHeader headerGap={headerGap}>
+          <View style={{ opacity: showPrevControl ? 1 : 0 }}>
+            <IconButton
+              icon={KeyboardArrowLeft}
+              variant="filled"
+              size="sm"
+              colour="primary"
+              aria-label="Previous month"
+              onPress={showPrevControl ? handlePrevMonth : undefined}
+              accessible={showPrevControl}
+            />
+          </View>
+
+          <View style={{ flex: 1 }}>
+            <Typography
+              token={datePicker.month.typography}
+              align="center"
+              color={datePicker.month.colour.text.default}
+            >
+              {resolvedMonthLabel}
+            </Typography>
+          </View>
+
+          <View style={{ opacity: showNextControl ? 1 : 0 }}>
+            <IconButton
+              icon={KeyboardArrowRight}
+              variant="filled"
+              size="sm"
+              colour="primary"
+              aria-label="Next month"
+              onPress={showNextControl ? handleNextMonth : undefined}
+              accessible={showNextControl}
+            />
+          </View>
+        </StyledMonthHeader>
+
+        <Reanimated.View
+          key={`${year}-${month}`}
+          entering={MONTH_SLIDE_ENTERING[slideDir]}
+          exiting={MONTH_SLIDE_EXITING[slideDir]}
+        >
+          <StyledDatesGrid
+            rowGap={rowGap}
+            accessible
+            accessibilityLabel={resolvedMonthLabel}
+          >
+            {calendarRows.map((row, rowIdx) => (
+              <StyledDateRow key={rowIdx}>
+                {row.map((date, colIdx) =>
+                  !date ? (
+                    <StyledDateCell
+                      key={`empty-${rowIdx}-${colIdx}`}
+                      cellHeight={cellHeight}
+                      accessibilityElementsHidden
+                    />
+                  ) : (
+                    <StyledDateCell
+                      key={toDateKey(date)}
+                      cellHeight={cellHeight}
+                    >
+                      {(() => {
+                        const isDisabled = resolvedIsDateDisabled(date)
+                        const {
+                          state,
+                          indicatorBg,
+                          indicatorBorderColor,
+                          textColor,
+                          typography,
+                          textDecoration,
+                          isSelected
+                        } = resolveDateCellConfig(date)
+
+                        // Previous/Undeliverable: disabled default dates get muted text +
+                        // strikethrough; opacity is reserved for disabled nextBox/futureBox.
+                        const isUndeliverable =
+                          isDisabled && state === "default"
+                        const cellOpacity =
+                          isDisabled && !isUndeliverable ? disabledOpacity : 1
+                        const cellTextDecoration = isUndeliverable
+                          ? "line-through"
+                          : textDecoration
+                        const cellTextColor = isUndeliverable
+                          ? dt.colour.text.previous
+                          : textColor
+
+                        return (
+                          <Pressable
+                            onPress={
+                              !isDisabled
+                                ? () => onDateSelect?.(date)
+                                : undefined
+                            }
+                            disabled={isDisabled}
+                            accessible
+                            accessibilityRole="button"
+                            accessibilityLabel={`${date.getDate()} ${resolvedMonthLabel}`}
+                            accessibilityState={{
+                              selected: isSelected,
+                              disabled: isDisabled
+                            }}
+                            accessibilityHint={
+                              state === "current" ? "Today" : undefined
+                            }
+                            style={{ opacity: cellOpacity }}
+                          >
+                            <StyledIndicator
+                              indicatorSize={indicatorSize}
+                              indicatorBorderRadius={indicatorBorderRadius}
+                              indicatorBg={indicatorBg}
+                              indicatorBorderWidth={
+                                indicatorBorderColor !== "transparent"
+                                  ? selectedBorderWidth
+                                  : 0
+                              }
+                              indicatorBorderColor={indicatorBorderColor}
+                              indicatorBorderStyle={
+                                indicatorBorderColor !== "transparent"
+                                  ? "dashed"
+                                  : "solid"
+                              }
+                            >
+                              <Typography
+                                color={cellTextColor as any}
+                                token={typography}
+                                textDecoration={cellTextDecoration}
+                              >
+                                {date.getDate().toString()}
+                              </Typography>
+                            </StyledIndicator>
+                          </Pressable>
+                        )
+                      })()}
+                    </StyledDateCell>
+                  )
+                )}
+              </StyledDateRow>
+            ))}
+          </StyledDatesGrid>
+        </Reanimated.View>
+      </StyledContainer>
+    )
+  }
+)
+
+DatePicker.displayName = "DatePicker"

package/src/components/molecules/DatePicker/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from "./DatePicker"
+export type { DatePickerProps, DateItemState } from "./DatePicker"