@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/molecules/CopyField/hooks/index.ts

@@ -0,0 +1 @@
+export { useCopyField } from "./useCopyField"

package/src/components/molecules/CopyField/hooks/useCopyField.ts

@@ -0,0 +1,25 @@
+import { useState } from "react"
+
+type UseCopyFieldOptions = {
+  initialValue?: string
+  onCopy?: (value: string) => void
+}
+
+export const useCopyField = (options: UseCopyFieldOptions = {}) => {
+  const { initialValue = "", onCopy } = options
+  const [value, setValue] = useState(initialValue)
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue)
+  }
+
+  const handleCopy = (copiedValue: string) => {
+    onCopy?.(copiedValue)
+  }
+
+  return {
+    value,
+    onValueChange: handleValueChange,
+    onCopy: handleCopy
+  }
+}

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

@@ -0,0 +1,4 @@
+export { CopyField } from "./CopyField"
+export type { CopyFieldProps } from "./CopyField"
+export { CopyFieldInput } from "./CopyFieldInput"
+export { useCopyField } from "./hooks"

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

@@ -0,0 +1,298 @@
+import React, { useEffect, useState } from "react"
+import { View, ScrollView, StyleSheet } from "react-native"
+import { addDays, differenceInCalendarDays, isAfter, isSameDay } from "date-fns"
+import { DatePicker } from "./DatePicker"
+import type { DateItemState } from "./DatePicker"
+
+const now = new Date()
+const THIS_YEAR = now.getFullYear()
+const THIS_MONTH = now.getMonth()
+
+function monthOffset(year: number, month: number, offset: number) {
+  const d = new Date(year, month + offset, 1)
+  return { year: d.getFullYear(), month: d.getMonth() }
+}
+
+export default {
+  title: "Molecules/DatePicker",
+  component: DatePicker,
+  argTypes: {
+    year: {
+      control: { type: "number" },
+      description: "Full year (e.g. 2026)"
+    },
+    month: {
+      control: { type: "number", min: 0, max: 11 },
+      description: "Zero-based month index (0–11)"
+    },
+    showWeekHeader: {
+      control: { type: "boolean" },
+      description: "Show the Mon–Sun column headers"
+    },
+    showPrevControl: {
+      control: { type: "boolean" },
+      description: "Show the left chevron navigation control"
+    },
+    showNextControl: {
+      control: { type: "boolean" },
+      description: "Show the right chevron navigation control"
+    },
+    monthLabel: {
+      control: { type: "text" },
+      description:
+        "Override the month/year label. Defaults to Intl.DateTimeFormat output."
+    }
+  }
+}
+
+function useCalendarState(initialYear = THIS_YEAR, initialMonth = THIS_MONTH) {
+  const [year, setYear] = useState(initialYear)
+  const [month, setMonth] = useState(initialMonth)
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
+
+  const prevMonth = () => {
+    if (month === 0) {
+      setYear((y) => y - 1)
+      setMonth(11)
+    } else {
+      setMonth((m) => m - 1)
+    }
+  }
+
+  const nextMonth = () => {
+    if (month === 11) {
+      setYear((y) => y + 1)
+      setMonth(0)
+    } else {
+      setMonth((m) => m + 1)
+    }
+  }
+
+  return { year, month, selectedDate, setSelectedDate, prevMonth, nextMonth }
+}
+
+export const Playground = {
+  args: {
+    year: THIS_YEAR,
+    month: THIS_MONTH,
+    showWeekHeader: true,
+    showPrevControl: true,
+    showNextControl: true
+  },
+  render: (args: {
+    year: number
+    month: number
+    showWeekHeader: boolean
+    showPrevControl: boolean
+    showNextControl: boolean
+  }) => {
+    const { year, month, selectedDate, setSelectedDate, prevMonth, nextMonth } =
+      useCalendarState(args.year, args.month)
+    return (
+      <View style={styles.container}>
+        <DatePicker
+          {...args}
+          year={year}
+          month={month}
+          selectedDate={selectedDate}
+          onDateSelect={setSelectedDate}
+          onPrevMonth={prevMonth}
+          onNextMonth={nextMonth}
+        />
+      </View>
+    )
+  }
+}
+
+const NEXT_BOX_DATE = addDays(new Date(), 4)
+const SCHEDULED_BOX_DATES = [
+  addDays(NEXT_BOX_DATE, 21),
+  addDays(NEXT_BOX_DATE, 42),
+  addDays(NEXT_BOX_DATE, 63)
+]
+// Simulates a bank holiday on the second scheduled slot; actual delivery bumps by 1 day
+const UNDELIVERABLE_DATE = SCHEDULED_BOX_DATES[1]
+const FUTURE_BOX_DATES = SCHEDULED_BOX_DATES.map((d) =>
+  isSameDay(d, UNDELIVERABLE_DATE) ? addDays(d, 1) : d
+)
+
+const deliveryDateState =
+  (currentDeliveryDate: Date, futureDates: Date[]) =>
+  (date: Date): DateItemState => {
+    const today = new Date()
+    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+    const t = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+    if (d.getTime() < t.getTime()) return "previous"
+    if (d.getTime() === t.getTime()) return "current"
+    if (isSameDay(date, currentDeliveryDate)) return "nextBox"
+    if (futureDates.some((fd) => isSameDay(fd, date))) return "futureBox"
+    return "default"
+  }
+
+function computeForecastedDates(
+  selectedDate: Date,
+  currentDeliveryDate: Date,
+  futureDates: Date[],
+  isUndeliverable: (date: Date) => boolean
+): Date[] {
+  const offset = differenceInCalendarDays(selectedDate, currentDeliveryDate)
+  return futureDates
+    .filter((d) => isAfter(d, currentDeliveryDate))
+    .map((d) => {
+      const projected = addDays(d, offset)
+      return isUndeliverable(projected) ? addDays(projected, 1) : projected
+    })
+}
+
+export const WithDeliveryDates = {
+  render: () => {
+    const { year, month, prevMonth, nextMonth } = useCalendarState()
+    const [selectedDate, setSelectedDate] = useState<Date | null>(null)
+    const [forecastedDates, setForecastedDates] = useState<Date[]>([])
+
+    useEffect(() => {
+      if (!selectedDate) {
+        setForecastedDates([])
+      } else {
+        setForecastedDates(
+          computeForecastedDates(
+            selectedDate,
+            NEXT_BOX_DATE,
+            FUTURE_BOX_DATES,
+            (date) => isSameDay(date, UNDELIVERABLE_DATE)
+          )
+        )
+      }
+    }, [selectedDate])
+
+    const handleSelect = (date: Date) => {
+      if (isSameDay(date, NEXT_BOX_DATE)) {
+        setSelectedDate(null)
+      } else {
+        setSelectedDate(date)
+      }
+    }
+
+    return (
+      <View style={styles.container}>
+        <DatePicker
+          year={year}
+          month={month}
+          selectedDate={selectedDate}
+          selectedDates={forecastedDates}
+          onDateSelect={handleSelect}
+          onPrevMonth={prevMonth}
+          onNextMonth={nextMonth}
+          getDateState={deliveryDateState(NEXT_BOX_DATE, FUTURE_BOX_DATES)}
+          isDateDisabled={(date) => isSameDay(date, UNDELIVERABLE_DATE)}
+        />
+      </View>
+    )
+  }
+}
+
+export const NoWeekHeader = {
+  render: () => {
+    const { year, month, selectedDate, setSelectedDate, prevMonth, nextMonth } =
+      useCalendarState()
+    return (
+      <View style={styles.container}>
+        <DatePicker
+          year={year}
+          month={month}
+          selectedDate={selectedDate}
+          onDateSelect={setSelectedDate}
+          onPrevMonth={prevMonth}
+          onNextMonth={nextMonth}
+          showWeekHeader={false}
+          getDateState={() => "default"}
+        />
+      </View>
+    )
+  }
+}
+
+export const NoControls = {
+  render: () => (
+    <View style={styles.container}>
+      <DatePicker
+        year={THIS_YEAR}
+        month={THIS_MONTH}
+        showPrevControl={false}
+        showNextControl={false}
+        getDateState={() => "default"}
+      />
+    </View>
+  )
+}
+
+export const ThreeMonthsStacked = {
+  render: () => {
+    const m1 = { year: THIS_YEAR, month: THIS_MONTH }
+    const m2 = monthOffset(THIS_YEAR, THIS_MONTH, 1)
+    const m3 = monthOffset(THIS_YEAR, THIS_MONTH, 2)
+    return (
+      <ScrollView contentContainerStyle={styles.container}>
+        <View style={styles.stack}>
+          <DatePicker
+            {...m1}
+            showPrevControl={false}
+            showNextControl={false}
+            getDateState={deliveryDateState(NEXT_BOX_DATE, FUTURE_BOX_DATES)}
+            isDateDisabled={(date) => isSameDay(date, UNDELIVERABLE_DATE)}
+          />
+          <DatePicker
+            {...m2}
+            showPrevControl={false}
+            showNextControl={false}
+            showWeekHeader={false}
+            getDateState={deliveryDateState(NEXT_BOX_DATE, FUTURE_BOX_DATES)}
+            isDateDisabled={(date) => isSameDay(date, UNDELIVERABLE_DATE)}
+          />
+          <DatePicker
+            {...m3}
+            showPrevControl={false}
+            showNextControl={false}
+            showWeekHeader={false}
+            getDateState={deliveryDateState(NEXT_BOX_DATE, FUTURE_BOX_DATES)}
+            isDateDisabled={(date) => isSameDay(date, UNDELIVERABLE_DATE)}
+          />
+        </View>
+      </ScrollView>
+    )
+  }
+}
+
+export const AllDateStates = {
+  render: () => (
+    <View style={styles.container}>
+      <DatePicker
+        year={THIS_YEAR}
+        month={THIS_MONTH}
+        selectedDate={new Date(THIS_YEAR, THIS_MONTH, 11)}
+        selectedDates={[new Date(THIS_YEAR, THIS_MONTH, 25)]}
+        showPrevControl={false}
+        showNextControl={false}
+        getDateState={(date) => {
+          const d = date.getDate()
+          if (d <= 5) return "previous"
+          if (d === 6) return "current"
+          if (d === 8 || d === 11) return "nextBox"
+          if (d === 25 || d === 26) return "futureBox"
+          return "default"
+        }}
+        isDateDisabled={(date) => date.getDate() === 18}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16
+  },
+  stack: {
+    flexDirection: "column",
+    gap: 24
+  }
+})

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

@@ -0,0 +1,201 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { DatePicker } from "./DatePicker"
+
+const MARCH_2026 = { year: 2026, month: 2 }
+
+describe("DatePicker", () => {
+  describe("rendering", () => {
+    it("renders the month label", () => {
+      renderWithTheme(<DatePicker {...MARCH_2026} />)
+      expect(screen.getByText("March 2026")).toBeInTheDocument()
+    })
+
+    it("renders week headers by default", () => {
+      renderWithTheme(<DatePicker {...MARCH_2026} />)
+      expect(screen.getByText("Mon")).toBeInTheDocument()
+      expect(screen.getByText("Sun")).toBeInTheDocument()
+    })
+
+    it("hides week headers when showWeekHeader=false", () => {
+      renderWithTheme(<DatePicker {...MARCH_2026} showWeekHeader={false} />)
+      expect(screen.queryByText("Mon")).not.toBeInTheDocument()
+    })
+
+    it("renders all days of the month", () => {
+      renderWithTheme(<DatePicker {...MARCH_2026} />)
+      expect(screen.getByLabelText("1 March 2026")).toBeInTheDocument()
+      expect(screen.getByLabelText("31 March 2026")).toBeInTheDocument()
+    })
+
+    it("accepts a custom month label", () => {
+      renderWithTheme(<DatePicker {...MARCH_2026} monthLabel="März 2026" />)
+      expect(screen.getByText("März 2026")).toBeInTheDocument()
+    })
+
+    it("accepts custom week day labels", () => {
+      renderWithTheme(
+        <DatePicker
+          {...MARCH_2026}
+          weekDayLabels={["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]}
+        />
+      )
+      expect(screen.getByText("Mo")).toBeInTheDocument()
+    })
+  })
+
+  describe("navigation controls", () => {
+    it("renders prev and next buttons by default", () => {
+      renderWithTheme(<DatePicker {...MARCH_2026} />)
+      expect(screen.getByLabelText("Previous month")).toBeInTheDocument()
+      expect(screen.getByLabelText("Next month")).toBeInTheDocument()
+    })
+
+    it("calls onPrevMonth when prev button is pressed", async () => {
+      const user = userEvent.setup()
+      const onPrevMonth = vi.fn()
+      renderWithTheme(<DatePicker {...MARCH_2026} onPrevMonth={onPrevMonth} />)
+      await user.click(screen.getByLabelText("Previous month"))
+      expect(onPrevMonth).toHaveBeenCalledOnce()
+    })
+
+    it("calls onNextMonth when next button is pressed", async () => {
+      const user = userEvent.setup()
+      const onNextMonth = vi.fn()
+      renderWithTheme(<DatePicker {...MARCH_2026} onNextMonth={onNextMonth} />)
+      await user.click(screen.getByLabelText("Next month"))
+      expect(onNextMonth).toHaveBeenCalledOnce()
+    })
+
+    it("calls onMonthChange with correct year/month when prev is pressed", async () => {
+      const user = userEvent.setup()
+      const onMonthChange = vi.fn()
+      renderWithTheme(
+        <DatePicker {...MARCH_2026} onMonthChange={onMonthChange} />
+      )
+      await user.click(screen.getByLabelText("Previous month"))
+      expect(onMonthChange).toHaveBeenCalledWith(2026, 1)
+    })
+
+    it("calls onMonthChange with correct year/month when next is pressed", async () => {
+      const user = userEvent.setup()
+      const onMonthChange = vi.fn()
+      renderWithTheme(
+        <DatePicker {...MARCH_2026} onMonthChange={onMonthChange} />
+      )
+      await user.click(screen.getByLabelText("Next month"))
+      expect(onMonthChange).toHaveBeenCalledWith(2026, 3)
+    })
+  })
+
+  describe("date selection", () => {
+    it("calls onDateSelect with the correct date when a day is pressed", async () => {
+      const user = userEvent.setup()
+      const onDateSelect = vi.fn()
+      renderWithTheme(
+        <DatePicker
+          {...MARCH_2026}
+          onDateSelect={onDateSelect}
+          getDateState={() => "default"}
+        />
+      )
+      await user.click(screen.getByLabelText("15 March 2026"))
+      expect(onDateSelect).toHaveBeenCalledOnce()
+      const calledDate: Date = onDateSelect.mock.calls[0][0]
+      expect(calledDate.getDate()).toBe(15)
+      expect(calledDate.getMonth()).toBe(2)
+      expect(calledDate.getFullYear()).toBe(2026)
+    })
+
+    it("does not call onDateSelect for disabled dates", async () => {
+      const user = userEvent.setup()
+      const onDateSelect = vi.fn()
+      renderWithTheme(
+        <DatePicker
+          {...MARCH_2026}
+          onDateSelect={onDateSelect}
+          isDateDisabled={() => true}
+        />
+      )
+      await user.click(screen.getByLabelText("10 March 2026"))
+      expect(onDateSelect).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("marks a selected date with aria-selected", () => {
+      renderWithTheme(
+        <DatePicker
+          {...MARCH_2026}
+          selectedDate={new Date(2026, 2, 11)}
+          getDateState={() => "nextBox"}
+        />
+      )
+      expect(screen.getByLabelText("11 March 2026")).toHaveAttribute(
+        "aria-selected",
+        "true"
+      )
+    })
+
+    it("marks a disabled date with aria-disabled", () => {
+      renderWithTheme(
+        <DatePicker
+          {...MARCH_2026}
+          isDateDisabled={(date) => date.getDate() === 10}
+        />
+      )
+      expect(screen.getByLabelText("10 March 2026")).toHaveAttribute(
+        "aria-disabled",
+        "true"
+      )
+    })
+  })
+
+  describe("minDate / maxDate", () => {
+    it("disables dates before minDate", async () => {
+      const user = userEvent.setup()
+      const onDateSelect = vi.fn()
+      renderWithTheme(
+        <DatePicker
+          {...MARCH_2026}
+          minDate={new Date(2026, 2, 10)}
+          onDateSelect={onDateSelect}
+        />
+      )
+      await user.click(screen.getByLabelText("5 March 2026"))
+      expect(onDateSelect).not.toHaveBeenCalled()
+    })
+
+    it("allows the minDate itself", async () => {
+      const user = userEvent.setup()
+      const onDateSelect = vi.fn()
+      renderWithTheme(
+        <DatePicker
+          {...MARCH_2026}
+          minDate={new Date(2026, 2, 10)}
+          onDateSelect={onDateSelect}
+          getDateState={() => "default"}
+        />
+      )
+      await user.click(screen.getByLabelText("10 March 2026"))
+      expect(onDateSelect).toHaveBeenCalledOnce()
+    })
+
+    it("disables dates after maxDate", async () => {
+      const user = userEvent.setup()
+      const onDateSelect = vi.fn()
+      renderWithTheme(
+        <DatePicker
+          {...MARCH_2026}
+          maxDate={new Date(2026, 2, 20)}
+          onDateSelect={onDateSelect}
+        />
+      )
+      await user.click(screen.getByLabelText("25 March 2026"))
+      expect(onDateSelect).not.toHaveBeenCalled()
+    })
+  })
+})