feat: add initial datepicker, no ui/ux

components/DatePicker/DatePicker.tsx

@@ -0,0 +1,62 @@
+"use client"
+import { da, de, fi, nb, sv } from "date-fns/locale"
+import { useState } from "react"
+import { type DateRange, DayPicker } from "react-day-picker"
+
+import { Lang } from "@/constants/languages"
+import { dt } from "@/lib/dt"
+
+import useLang from "@/hooks/useLang"
+
+import classNames from "react-day-picker/style.module.css"
+
+const locales = {
+  [Lang.da]: da,
+  [Lang.de]: de,
+  [Lang.fi]: fi,
+  [Lang.no]: nb,
+  [Lang.sv]: sv,
+}
+
+export interface DatePickerProps {
+  handleOnSelect: (selected: DateRange) => void
+  initialSelected?: DateRange
+}
+
+export default function DatePicker({
+  handleOnSelect,
+  initialSelected = {
+    from: undefined,
+    to: undefined,
+  },
+}: DatePickerProps) {
+  const lang = useLang()
+  const [selectedDate, setSelectedDate] = useState<DateRange>(initialSelected)
+
+  function handleSelectDate(selected: DateRange) {
+    handleOnSelect(selected)
+    setSelectedDate(selected)
+  }
+
+  /** English is default language and doesn't need to be imported */
+  const locale = lang === Lang.en ? undefined : locales[lang]
+
+  const currentDate = dt().toDate()
+  const startOfMonth = dt(currentDate).set("date", 1).toDate()
+  const yesterday = dt(currentDate).subtract(1, "day").toDate()
+  return (
+    <DayPicker
+      classNames={classNames}
+      disabled={{ from: startOfMonth, to: yesterday }}
+      excludeDisabled
+      locale={locale}
+      mode="range"
+      onSelect={handleSelectDate}
+      pagedNavigation
+      required
+      selected={selectedDate}
+      showWeekNumber
+      startMonth={currentDate}
+    />
+  )
+}

components/DatePicker/date-picker.module.css

@@ -0,0 +1,31 @@
+.container {
+  overflow: hidden;
+  position: relative;
+
+  &[data-isopen="true"] {
+    overflow: visible;
+  }
+}
+
+.hideWrapper {
+  background-color: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.08);
+  padding: var(--Spacing-x-one-and-half);
+  position: absolute;
+  /** BookingWidget padding + border-width */
+  top: calc(100% + var(--Spacing-x2) + 1px);
+}
+
+.btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  width: 100%;
+}
+
+.body {
+  opacity: 0.8;
+}

components/DatePicker/index.tsx

@@ -0,0 +1,73 @@
+"use client"
+import { useEffect, useRef, useState } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
+
+import { dt } from "@/lib/dt"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
+
+import DatePicker from "./DatePicker"
+
+import styles from "./date-picker.module.css"
+
+import type { DateRange } from "react-day-picker"
+
+import type { DatePickerFormProps } from "@/types/components/datepicker"
+
+export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
+  const lang = useLang()
+  const [isOpen, setIsOpen] = useState(false)
+  const selectedDate = useWatch({ name })
+  const { register, setValue } = useFormContext()
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  function handleOnClick() {
+    setIsOpen((prevIsOpen) => !prevIsOpen)
+  }
+
+  function handleSelectDate(selected: DateRange) {
+    setValue(name, {
+      from: dt(selected.from).format("YYYY-MM-DD"),
+      to: dt(selected.to).format("YYYY-MM-DD"),
+    })
+  }
+
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      const target = evt.target as HTMLElement
+      if (ref.current && target && !ref.current.contains(target)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener("click", handleClickOutside)
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside)
+    }
+  }, [setIsOpen])
+
+  const selectedFromDate = dt(selectedDate.from)
+    .locale(lang)
+    .format("ddd D MMM")
+  const selectedToDate = dt(selectedDate.to).locale(lang).format("ddd D MMM")
+
+  return (
+    <div className={styles.container} data-isopen={isOpen} ref={ref}>
+      <button className={styles.btn} onClick={handleOnClick} type="button">
+        <Body className={styles.body}>
+          {selectedFromDate} - {selectedToDate}
+        </Body>
+      </button>
+      <input {...register("date.from")} type="hidden" />
+      <input {...register("date.to")} type="hidden" />
+      <div aria-modal className={styles.hideWrapper} role="dialog">
+        <DatePicker
+          handleOnSelect={handleSelectDate}
+          initialSelected={selectedDate}
+        />
+      </div>
+    </div>
+  )
+}