Reorganise components

components/form/DateField/components/DatePickerCustomHeader.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { format } from "date-fns";
+import { enGB, fr } from "date-fns/locale";
+import { useLocale } from "next-intl";
+import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
+import { IoChevronBack, IoChevronForward } from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+
+const chevronClasses = {
+  chevronRoot: "h-4 w-4 dark:text-white",
+  chevronClassDisabled: "!text-neutral-500",
+};
+
+export const DatePickerCustomHeader = ({
+  date,
+  decreaseMonth,
+  increaseMonth,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+}: ReactDatePickerCustomHeaderProps) => {
+  // Bit of a hack. inputRef doesn't work because DatePicker doesn't correctly propagate props
+  const locale = useLocale();
+
+  return (
+    <div className="mb-2 flex !w-full items-center justify-between border-b border-neutral-500 px-6 pb-4">
+      <button
+        onClick={decreaseMonth}
+        disabled={prevMonthButtonDisabled}
+        className={chevronClasses.chevronRoot}
+      >
+        <IoChevronBack
+          className={twMerge(
+            chevronClasses.chevronRoot,
+            prevMonthButtonDisabled && chevronClasses.chevronClassDisabled,
+          )}
+        />
+      </button>
+      {format(date, "LLLL yyyy", { locale: locale === "fr" ? fr : enGB })}
+      <button
+        onClick={increaseMonth}
+        disabled={nextMonthButtonDisabled}
+        className={chevronClasses.chevronRoot}
+      >
+        <IoChevronForward
+          className={twMerge(
+            chevronClasses.chevronRoot,
+            nextMonthButtonDisabled && chevronClasses.chevronClassDisabled,
+          )}
+        />
+      </button>
+    </div>
+  );
+};

components/form/DateField/components/InputDatePicker.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from "react";
+
+import InputMask from "react-input-mask";
+import { twMerge } from "tailwind-merge";
+
+interface InputProps {
+  error?: boolean;
+  className?: string;
+  inputContainerClass?: string;
+  inputClass?: string;
+  mask?: string | (string | RegExp)[];
+}
+
+type AllProps = React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> &
+  InputProps;
+
+export const InputDatePicker = forwardRef<HTMLInputElement, AllProps>(
+  (
+    {
+      error,
+      className,
+      children,
+      inputContainerClass,
+      inputClass,
+      mask,
+      ...props
+    },
+    inputRef,
+  ) => {
+    return (
+      <div
+        className={twMerge(
+          "flex w-full content-center rounded-lg border p-3 text-sm",
+          "border-gray-300 bg-gray-50 text-gray-900 shadow-sm",
+          "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 ",
+          !error &&
+            "focus-within:border-primary-500 focus-within:ring-primary-500 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500",
+          error && "!border-orange-700 focus:!border-orange-700",
+          inputContainerClass,
+        )}
+      >
+        <InputMask
+          ref={inputRef as any}
+          mask={mask ?? ""}
+          className={twMerge(
+            "w-full border-none bg-transparent text-sm outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0",
+            "text-gray-900 dark:text-white",
+            inputClass,
+          )}
+          onKeyDown={(e) => {
+            if (e.code === "Enter") {
+              e.stopPropagation();
+            }
+          }}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+
+InputDatePicker.displayName = "InputDatePicker";

components/form/DateField/components/index.ts

@@ -0,0 +1 @@
+export * from "./InputDatePicker";

components/form/DateField/index.tsx

@@ -0,0 +1,129 @@
+import React, { useRef } from "react";
+
+import { getYear, isValid, parse } from "date-fns";
+import fr from "date-fns/locale/fr";
+import { get, range } from "lodash";
+import { useLocale, useTranslations } from "next-intl";
+import DatePicker from "react-datepicker";
+import { registerLocale } from "react-datepicker";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "../Field";
+
+import { InputDatePicker } from "./components";
+import { DatePickerCustomHeader } from "./components/DatePickerCustomHeader";
+
+registerLocale("fr", fr);
+
+type DateFieldProps = FieldProps & {
+  maxDate?: Date;
+  minDate?: Date;
+  dateFormat?: string;
+  className?: string;
+  datePickerPopperClass?: string;
+  required?: boolean;
+};
+
+export const DateField = ({
+  minDate,
+  maxDate,
+  dateFormat = "dd/MM/yyyy",
+  className,
+  datePickerPopperClass,
+
+  name,
+  ...otherFieldProps
+}: DateFieldProps) => {
+  const locale = useLocale();
+  const at = useTranslations("App");
+  const min = minDate ? minDate.getFullYear() : 1900;
+
+  const inputRef = useRef(null);
+
+  const form = useFormContext();
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = name && !!get(errors, name)?.message;
+
+  return (
+    <Field name={name} {...otherFieldProps}>
+      <div className={twMerge("relative flex w-full flex-col", className)}>
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <DatePicker
+              locale={locale}
+              closeOnScroll={true}
+              placeholderText={at("datePlaceholder")}
+              portalId="calendar-portal"
+              dateFormat={dateFormat}
+              disabledKeyboardNavigation={true}
+              formatWeekDay={(day: string) => (
+                <div className="flex h-8 flex-col items-center justify-center">
+                  {day.slice(0, 3)}
+                </div>
+              )}
+              weekDayClassName={() =>
+                "text-xs h-8 w-8 flex-1 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white"
+              }
+              dayClassName={() =>
+                "text-xs h-8 w-8 flex-1 bg-gray-50 cursor-pointer hover:font-bold text-gray-900 dark:bg-gray-700 dark:text-white"
+              }
+              value={field.value}
+              selected={field.value}
+              onSelect={field.onChange}
+              onChange={field.onChange}
+              onChangeRaw={(e) => {
+                // Called when the user types in the input
+                if (e.currentTarget.value) {
+                  const value = e.currentTarget.value;
+                  const date = parse(value, at("dateParseFormat"), new Date());
+                  if (
+                    isValid(date) &&
+                    date.getFullYear() >= min &&
+                    maxDate &&
+                    getYear(maxDate) >= getYear(date)
+                  ) {
+                    field.onChange(date);
+                  }
+                }
+              }}
+              popperPlacement="bottom-start"
+              popperClassName={twMerge(
+                "z-50 mt-[12px] rounded border",
+                "border-gray-300 bg-gray-50 text-gray-900",
+                "dark:border-gray-600 dark:bg-gray-700 dark:text-white",
+
+                datePickerPopperClass,
+              )}
+              showPopperArrow={false}
+              calendarClassName={twMerge(
+                "border-gray-300 bg-gray-50 text-gray-900",
+                "dark:border-gray-600 dark:bg-gray-700 dark:text-white",
+              )}
+              minDate={minDate}
+              showFullMonthYearPicker
+              maxDate={maxDate}
+              renderCustomHeader={(props) => (
+                <DatePickerCustomHeader {...props} />
+              )}
+              customInput={
+                <InputDatePicker
+                  mask={at("dateMask")}
+                  inputClass="p-0"
+                  className="text-left"
+                  ref={inputRef}
+                  error={!!hasError}
+                />
+              }
+            />
+          )}
+        />
+      </div>
+    </Field>
+  );
+};