Update packages (and fix intl)

2026-07-23 04:26:57 +00:00 · 2023-09-13 20:33:56 +02:00
parent cebf5d98b8
commit bff704077c
43 changed files with 1147 additions and 1597 deletions
@@ -0,0 +1,50 @@
+import { useTranslations } from "next-intl";
+import Link from "next-intl/link";
+import { FaGithub, FaRegEnvelope } from "react-icons/fa";
+
+import ThemeSwitcher from "@/app/[locale]/components/ThemeSwitcher";
+
+export default function Footer() {
+  const t = useTranslations("Footer");
+
+  return (
+    <footer
+      className="fixed bottom-0 z-30 flex h-20 w-[100vw] flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700"
+      data-test="footer"
+    >
+      <div className="text-center">
+        &copy; {new Date().getFullYear()} - Owen&nbsp;Rees & Timothy&nbsp;Armes
+      </div>
+
+      <div className="flex items-center py-2 hover:[&_a]:opacity-80">
+        <Link
+          href="https://github.com/TheRealOwenRees/echecsfrance"
+          target="_blank"
+          aria-label={t("githubAria")}
+          className="mr-4"
+        >
+          <FaGithub />
+        </Link>
+        <Link
+          href="/contactez-nous"
+          aria-label={t("contactAria")}
+          className="mr-4"
+        >
+          <FaRegEnvelope />
+        </Link>
+        <div className="mr-4 space-x-2 text-xs">
+          <Link href="/" locale="fr">
+            FR
+          </Link>
+          <span>|</span>
+          <Link href="/" locale="en">
+            EN
+          </Link>
+        </div>
+        <div className="text-xs hover:opacity-80">
+          <ThemeSwitcher />
+        </div>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,50 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+import { twMerge } from "tailwind-merge";
+
+import HamburgerMenu from "./HamburgerMenu";
+
+const Hamburger = () => {
+  const [menuVisible, setMenuVisible] = useState(false);
+  const hamburgerButtonRef = useRef<HTMLDivElement>(null);
+  return (
+    <>
+      <div
+        ref={hamburgerButtonRef}
+        className="hamburger-button relative z-[99999] space-y-2"
+        data-test="hamburger-button"
+        onClick={() => setMenuVisible(!menuVisible)}
+      >
+        <div
+          className={twMerge(
+            "h-0.5 w-8 bg-gray-600 transition-all duration-300 ease-in-out dark:bg-white",
+            menuVisible &&
+              "translate-x-[1px] translate-y-2.5 rotate-45 bg-white",
+          )}
+        ></div>
+        <div
+          className={twMerge(
+            "h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white",
+            menuVisible && "scale-0 bg-white opacity-0",
+          )}
+        ></div>
+        <div
+          className={twMerge(
+            "h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white",
+            menuVisible && "-translate-y-2.5 -rotate-45 bg-white",
+          )}
+        ></div>
+      </div>
+
+      <HamburgerMenu
+        menuVisible={menuVisible}
+        setMenuVisible={setMenuVisible}
+        hamburgerButtonRef={hamburgerButtonRef}
+      />
+    </>
+  );
+};
+
+export default Hamburger;
@@ -0,0 +1,94 @@
+import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
+
+import { useTranslations } from "next-intl";
+import Link from "next-intl/link";
+import { twMerge } from "tailwind-merge";
+
+import useHamburgerClose from "@/hooks/useHamburgerClose";
+
+interface HamburgerMenuState {
+  menuVisible: boolean;
+  setMenuVisible: Dispatch<SetStateAction<boolean>>;
+  hamburgerButtonRef: RefObject<HTMLDivElement>;
+}
+
+const HamburgerMenu = ({
+  menuVisible,
+  setMenuVisible,
+  hamburgerButtonRef,
+}: HamburgerMenuState) => {
+  const t = useTranslations("Nav");
+  const [mouseOverMenu, setMouseOverMenu] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>();
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const menuTimeout = () => {
+    timeoutRef.current = setTimeout(() => {
+      setMenuVisible(false);
+      setMouseOverMenu(false);
+    }, 4000);
+  };
+
+  const handleMouseEnterMenu = () => {
+    setMouseOverMenu(true);
+    clearTimeout(timeoutRef.current);
+  };
+
+  const handleMouseLeaveMenu = () => {
+    setMouseOverMenu(false);
+    clearTimeout(timeoutRef.current);
+  };
+
+  useHamburgerClose({
+    menuVisible,
+    setMenuVisible,
+    menuRef,
+    hamburgerButtonRef,
+    mouseOverMenu,
+    setMouseOverMenu,
+    timeoutRef,
+    menuTimeout,
+  });
+
+  return (
+    <div
+      ref={menuRef}
+      className={twMerge(
+        "fixed right-0 top-0 z-[9999] h-[calc(100svh-5rem)] w-full",
+        "flex items-center justify-center bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden",
+        !menuVisible && "translate-x-full",
+      )}
+      onMouseEnter={handleMouseEnterMenu}
+      onMouseLeave={handleMouseLeaveMenu}
+    >
+      <ul className="list-reset text-white">
+        <li className="py-5 text-center text-xl">
+          <Link
+            href="/tournois"
+            className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
+          >
+            {t("tournaments")}
+          </Link>
+        </li>
+        <li className="py-5 text-center text-xl">
+          <Link
+            href="/qui-sommes-nous"
+            className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
+          >
+            {t("about")}
+          </Link>
+        </li>
+        <li className="py-5 text-center text-xl">
+          <Link
+            href="/contactez-nous"
+            className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
+          >
+            {t("contact")}
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default HamburgerMenu;
@@ -0,0 +1,31 @@
+import { Dispatch, SetStateAction } from "react";
+
+import { ResponseMessage } from "@/types";
+
+const InfoMessage = ({
+  responseMessage,
+}: {
+  responseMessage: ResponseMessage;
+}) => (
+  <p
+    className={`${
+      responseMessage.isSuccessful ? "text-green-600" : "text-red-600"
+    } italic`}
+    data-test="info-message"
+  >
+    {responseMessage.message}
+  </p>
+);
+
+export const clearMessage = (
+  setResponseMessage: Dispatch<SetStateAction<ResponseMessage>>,
+) => {
+  setTimeout(() => {
+    setResponseMessage({
+      isSuccessful: false,
+      message: "",
+    });
+  }, 10000);
+};
+
+export default InfoMessage;
@@ -0,0 +1,12 @@
+import { useTranslations } from "next-intl";
+
+const LoadingMap = () => {
+  const t = useTranslations("Tournaments");
+  return (
+    <div className="grid h-content place-self-center bg-white text-center text-gray-900 dark:bg-gray-800 dark:text-white">
+      <p>{t("loading")}</p>
+    </div>
+  );
+};
+
+export default LoadingMap;
@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+
+import { useSetAtom } from "jotai";
+import L from "leaflet";
+import { useMapEvent } from "react-leaflet";
+
+import { mapBoundsAtom } from "@/app/atoms";
+
+const MapEvents = () => {
+  const setMapBounds = useSetAtom(mapBoundsAtom);
+
+  const worldBounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180));
+  const franceBounds = L.latLngBounds(
+    L.latLng(42.08, -5.12),
+    L.latLng(51.17, 9.53),
+  );
+
+  const map = useMapEvent("moveend", () => {
+    // Set the map bounds atoms when the user pans/zooms
+    setMapBounds(map.getBounds());
+  });
+
+  // viewport agnostic centering of France & max world bounds
+  useEffect(() => {
+    map.setView(franceBounds.getCenter(), map.getBoundsZoom(franceBounds));
+    map.setMaxBounds(worldBounds);
+    map.options.maxBoundsViscosity = 1.0; // Prevents going past bounds while dragging
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return null;
+};
+
+export default MapEvents;
@@ -0,0 +1,54 @@
+import { useTranslations } from "next-intl";
+import Link from "next-intl/link";
+
+import Hamburger from "./Hamburger";
+
+export default function Navbar() {
+  const t = useTranslations("Nav");
+
+  const links = [
+    { title: t("tournaments"), route: "/tournois" },
+    { title: t("about"), route: "/qui-sommes-nous" },
+    { title: t("contact"), route: "/contactez-nous" },
+  ];
+
+  return (
+    <nav
+      className="relative mt-0 h-16 w-full overflow-x-clip border-b-[1px] bg-white px-5 dark:border-gray-700 dark:bg-gray-800"
+      data-test="navbar"
+    >
+      <div className="container mx-auto flex h-full items-center justify-between">
+        <Link
+          className="font-extrabold text-gray-900 no-underline hover:no-underline dark:text-white"
+          href="/"
+        >
+          <span className="font-title text-2xl text-gray-800 dark:text-white">
+            {t("title")}
+          </span>
+        </Link>
+
+        <div className="md:hidden" data-test="mobile-menu">
+          <Hamburger />
+        </div>
+
+        <div
+          className="hidden h-full justify-center md:flex md:w-1/2 md:justify-end"
+          data-test="desktop-menu"
+        >
+          <ul className="list-reset flex h-full flex-1 items-center gap-14 text-gray-900 no-underline dark:text-white md:flex-none">
+            {links.map(({ title, route }) => (
+              <li key={route} className="h-full">
+                <Link
+                  className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-primary-600"
+                  href={route}
+                >
+                  {title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+
+import { AbstractIntlMessages, NextIntlClientProvider } from "next-intl";
+
+import "@/css/globals.css";
+
+import Footer from "./Footer";
+import Navbar from "./Navbar";
+
+const TestableLayout = ({
+  children,
+  locale,
+  messages,
+}: {
+  children: ReactNode;
+  locale: string;
+  messages: AbstractIntlMessages;
+}) => {
+  return (
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      <div className="bg-white font-sans leading-normal tracking-normal dark:bg-gray-800">
+        <Navbar />
+        <div className="relative min-h-content">{children}</div>
+        <Footer />
+      </div>
+    </NextIntlClientProvider>
+  );
+};
+
+export default TestableLayout;
@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import useDarkMode from "@/hooks/useDarkMode";
+
+const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
+  const [colorTheme, setTheme] = useDarkMode();
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="cursor-pointer">
+      {colorTheme === "light" ? (
+        <div data-test="toggle-dark" onClick={() => setTheme("light")}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="inline-block h-4 w-4"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+      ) : (
+        <div data-test="toggle" onClick={() => setTheme("dark")}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="inline-block h-4 w-4"
+          >
+            <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+          </svg>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ThemeSwitcher;
@@ -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>
+  );
+};
@@ -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";
@@ -0,0 +1 @@
+export * from "./InputDatePicker";
@@ -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>
+  );
+};
@@ -0,0 +1,21 @@
+import { useTranslations } from "next-intl";
+
+type ErrorMessageProps = {
+  errorMessage: string;
+};
+
+export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => {
+  const t = useTranslations();
+
+  type TranslationKey = Parameters<typeof t>[0];
+
+  return errorMessage !== undefined ? (
+    <div className="mt-2 font-medium text-orange-700">
+      <p>
+        {errorMessage.startsWith("FormValidation")
+          ? t(errorMessage as TranslationKey)
+          : errorMessage}
+      </p>
+    </div>
+  ) : null;
+};
@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+
+import { get } from "lodash";
+import { useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { ErrorMessage } from "./ErrorMessage";
+import { Label } from "./Label";
+
+export type FieldProps = {
+  name: string;
+  className?: string;
+  labelClassName?: string;
+  childrenWrapperClassName?: string;
+  label?: React.ReactNode;
+  hideErrorMessage?: boolean;
+};
+
+export const Field = (
+  props: Omit<FieldProps, "name"> & {
+    required?: boolean;
+    name?: string;
+    children: ReactNode;
+  },
+) => {
+  const {
+    name,
+    className,
+    labelClassName,
+    childrenWrapperClassName,
+    label,
+    children,
+    required,
+    hideErrorMessage = false,
+  } = props;
+
+  const form = useFormContext();
+
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = name && !!get(errors, name)?.message;
+
+  return (
+    <div className={twMerge("flex w-full flex-col items-start", className)}>
+      {label ? (
+        <Label htmlFor={name} required={required} className={labelClassName}>
+          {label}
+        </Label>
+      ) : null}
+
+      <div
+        className={twMerge(
+          "flex w-full",
+          label && "mt-2",
+          childrenWrapperClassName,
+        )}
+      >
+        {children}
+      </div>
+
+      {hideErrorMessage || !hasError ? null : (
+        <ErrorMessage errorMessage={String(get(errors, name)?.message)} />
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,31 @@
+import { twMerge } from "tailwind-merge";
+
+type LabelProps = React.DetailedHTMLProps<
+  React.LabelHTMLAttributes<HTMLLabelElement>,
+  HTMLLabelElement
+> & {
+  required?: boolean;
+  className?: string;
+  tooltip?: React.ReactNode;
+};
+
+export const Label = ({
+  required,
+  className,
+  children,
+  tooltip,
+  ...labelProps
+}: LabelProps) => {
+  return (
+    <label
+      {...labelProps}
+      className={twMerge(
+        "flex items-center text-sm font-medium text-gray-900 dark:text-gray-300",
+        required && "after:ml-0.5 after:content-['*']",
+        className,
+      )}
+    >
+      <div>{children}</div>
+    </label>
+  );
+};
@@ -0,0 +1,200 @@
+import { Fragment, useRef } from "react";
+
+import { Listbox, Transition } from "@headlessui/react";
+import { useTranslations } from "next-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import {
+  IoChevronDown,
+  IoCloseOutline,
+  IoSearchOutline,
+} from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export type SelectOption = {
+  value: string;
+  label: React.ReactNode;
+  selectedLabel?: React.ReactNode;
+  disabled?: boolean;
+};
+
+type SelectFieldProps = FieldProps & {
+  required?: boolean;
+  placeholder?: string;
+  noOptionsMessage?: string;
+  options: SelectOption[];
+  searchable?: boolean;
+  listboxClassName?: string;
+  dropdownClassName?: string;
+  searchValue?: string;
+  onChangeSearchValue?: (value: string) => void;
+  onOptionSelected?: (option: SelectOption) => void;
+};
+
+export const SelectField = ({
+  name,
+  label,
+  className,
+  labelClassName,
+  childrenWrapperClassName,
+  hideErrorMessage = false,
+
+  required,
+  placeholder,
+  noOptionsMessage,
+  options,
+  searchable,
+  searchValue = "",
+  onChangeSearchValue,
+  onOptionSelected,
+  listboxClassName,
+  dropdownClassName,
+}: SelectFieldProps) => {
+  const at = useTranslations("App");
+  const form = useFormContext();
+
+  // We need to keep track of the selected option to be able to continue to
+  // display it when the user searches for something else
+  const curOption = useRef<SelectOption | null>(null);
+
+  return (
+    <Field
+      {...{
+        name,
+        label,
+        required,
+        className,
+        labelClassName,
+        childrenWrapperClassName,
+        hideErrorMessage,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field: { onChange, value, name } }) => {
+            const selectedOption =
+              curOption.current?.value === value
+                ? curOption.current
+                : options.find((option) => option.value === value);
+
+            return (
+              <Listbox
+                value={value ?? null}
+                name={name}
+                onChange={(value) => {
+                  curOption.current =
+                    options.find((option) => option.value === value) ?? null;
+                  onChangeSearchValue?.("");
+                  onChange(value);
+                  onOptionSelected?.(curOption.current!);
+                }}
+              >
+                {({ open }) => (
+                  <div className="relative w-full">
+                    <Listbox.Button
+                      className={twMerge(
+                        "group flex w-full items-center justify-between rounded-lg border p-3 text-sm",
+                        "border-gray-300 bg-gray-50  text-gray-900 shadow-sm focus-within:border-primary-500 focus-within:ring-primary-500",
+                        "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500",
+                        listboxClassName,
+                      )}
+                    >
+                      <span className="block truncate pr-2 text-gray-900 dark:text-white">
+                        {selectedOption?.selectedLabel ??
+                          selectedOption?.label ??
+                          placeholder ??
+                          at("selectPlaceholder")}
+                      </span>
+                      <span className="pointer-events-none flex items-center pr-2">
+                        <IoChevronDown
+                          className="h-3 w-3 text-gray-900 dark:text-white"
+                          aria-hidden="true"
+                        />
+                      </span>
+                    </Listbox.Button>
+
+                    <Transition
+                      as={Fragment}
+                      show={open}
+                      leave="transition ease-in duration-200"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <div
+                        className={twMerge(
+                          "absolute z-10 mt-1 flex w-full flex-col overflow-y-hidden rounded border py-3 text-white focus:outline-none [&>ul]:outline-none",
+                          "border-gray-300 bg-gray-50  text-gray-900",
+                          "dark:border-gray-600 dark:bg-gray-700 dark:text-white",
+
+                          dropdownClassName,
+                        )}
+                      >
+                        <Listbox.Options className="flex max-h-[180px] flex-1 flex-col justify-stretch">
+                          {searchable && (
+                            <div className="mx-3 mb-4 flex h-[40px] w-auto flex-1 items-center justify-between rounded border px-4 dark:border-neutral-500 dark:bg-neutral-600 focus-within:dark:border-neutral-200">
+                              <IoSearchOutline
+                                width="16px"
+                                className="h-4 w-4 flex-shrink-0 text-gray-900 dark:text-white"
+                              />
+                              <input
+                                className="w-full flex-1 border-none bg-transparent ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0"
+                                value={searchValue}
+                                onChange={
+                                  onChangeSearchValue
+                                    ? (e) => onChangeSearchValue(e.target.value)
+                                    : undefined
+                                }
+                                placeholder={at("searchPlaceholder")}
+                                type="search"
+                              />
+                              {searchValue.trim() !== "" && (
+                                <button
+                                  className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
+                                  type="button"
+                                  onClick={() => onChangeSearchValue?.("")}
+                                >
+                                  <IoCloseOutline className="h-4 w-4 text-gray-900 transition-all duration-200 dark:text-white" />
+                                </button>
+                              )}
+                            </div>
+                          )}
+
+                          {options.length === 0 ? (
+                            <div className="w-full text-center">
+                              {noOptionsMessage ?? at("noOptionsMessage")}
+                            </div>
+                          ) : (
+                            <div className="flex-1 overflow-scroll">
+                              {options.map((option) => (
+                                <Listbox.Option
+                                  key={option.value}
+                                  value={option.value}
+                                  disabled={option.disabled}
+                                  className={twMerge(
+                                    "w-full px-3 py-2 text-left",
+                                    !option.disabled &&
+                                      "hover:bg-primary-500 hover:text-white",
+                                    option.disabled && "opacity-50",
+                                  )}
+                                >
+                                  {option.label}
+                                </Listbox.Option>
+                              ))}
+                            </div>
+                          )}
+                        </Listbox.Options>
+                      </div>
+                    </Transition>
+                  </div>
+                )}
+              </Listbox>
+            );
+          }}
+        />
+      </div>
+    </Field>
+  );
+};
@@ -0,0 +1,60 @@
+import React from "react";
+
+import { Switch, SwitchProps } from "@headlessui/react";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export const SwitchField = (props: FieldProps & SwitchProps<"button">) => {
+  const {
+    name,
+    label,
+    disabled,
+    className,
+    labelClassName,
+
+    childrenWrapperClassName,
+    hideErrorMessage,
+
+    ...rest
+  } = props;
+  const form = useFormContext();
+
+  return (
+    <Field
+      {...{
+        name,
+        type: "checkbox",
+        label,
+        disabled,
+        className,
+        labelClassName,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <div className="flex h-[40px] items-center">
+              <Switch
+                checked={field.value}
+                onChange={field.onChange}
+                className={twMerge(
+                  "relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none",
+                  "ui-not-checked:bg-neutral-300 ui-not-checked:hover:bg-neutral-400",
+                  "ui-not-checked:dark:bg-neutral-500 ui-not-checked:dark:hover:bg-neutral-600",
+                  "ui-checked:bg-primary-500 ui-checked:hover:bg-primary-600",
+                )}
+                {...rest}
+              >
+                <span className="ui-checked:translate-x-[19px] ui-not-checked:translate-x-[3px] inline-block h-[14px] w-[14px] transform rounded-full bg-white transition-transform" />
+              </Switch>
+            </div>
+          )}
+        />
+      </div>
+    </Field>
+  );
+};
@@ -0,0 +1,88 @@
+import React from "react";
+
+import { get } from "lodash";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export const TextAreaField = (
+  props: FieldProps &
+    React.HTMLProps<HTMLTextAreaElement> & {
+      handleChanged?: (props: { name: string }) => void;
+      startIcon?: React.ReactNode;
+    },
+) => {
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    className,
+    labelClassName,
+    childrenWrapperClassName,
+    hideErrorMessage = false,
+
+    startIcon,
+    handleChanged,
+
+    ...rest
+  } = props;
+  const form = useFormContext();
+
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = !!get(errors, name)?.message;
+
+  return (
+    <Field
+      {...{
+        name,
+        label,
+        required,
+        className,
+        labelClassName,
+        childrenWrapperClassName,
+        hideErrorMessage,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <div className="relative">
+              {startIcon && (
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  {startIcon}
+                </div>
+              )}
+              <textarea
+                {...form.register(name, {
+                  required,
+                })}
+                aria-required={required}
+                aria-invalid={hasError}
+                disabled={disabled}
+                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 focus:border-primary-500 focus:ring-primary-500",
+                  "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
+                  hasError && "!border-orange-700 focus:!border-orange-700",
+                  disabled && "dark:bg-gray-50",
+                )}
+                {...rest}
+                onChange={(e) => {
+                  field.onChange(e);
+                }}
+                value={field.value}
+              />
+            </div>
+          )}
+        />
+      </div>
+    </Field>
+  );
+};
@@ -0,0 +1,111 @@
+import React from "react";
+
+import { get } from "lodash";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export const TextField = (
+  props: FieldProps &
+    React.HTMLProps<HTMLInputElement> & {
+      handleChanged?: (props: { name: string }) => void;
+      startIcon?: React.ReactNode;
+    },
+) => {
+  const {
+    name,
+    type = "text",
+    label,
+    required,
+    disabled,
+    className,
+    labelClassName,
+    childrenWrapperClassName,
+    hideErrorMessage = false,
+
+    startIcon,
+    handleChanged,
+
+    ...rest
+  } = props;
+  const form = useFormContext();
+
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = !!get(errors, name)?.message;
+
+  const input = (value: string | number) => {
+    return typeof value === "number"
+      ? isNaN(value)
+        ? ""
+        : value.toString()
+      : value ?? "";
+  };
+
+  const output =
+    type === "number"
+      ? (e: React.ChangeEvent<HTMLInputElement>) => {
+          const output = parseFloat(e.target.value);
+          return isNaN(output) ? 0 : output;
+        }
+      : (e: React.ChangeEvent<HTMLInputElement>) => e.target.value;
+
+  return (
+    <Field
+      {...{
+        name,
+        label,
+        required,
+        className,
+        labelClassName,
+        childrenWrapperClassName,
+        hideErrorMessage,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <div className="relative">
+              {startIcon && (
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  {startIcon}
+                </div>
+              )}
+              <input
+                type={type}
+                {...form.register(name, {
+                  valueAsNumber: type === "number",
+                  required,
+                })}
+                aria-required={required}
+                aria-invalid={hasError}
+                disabled={disabled}
+                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 focus:border-primary-500 focus:ring-primary-500",
+                  "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
+                  hasError && "!border-orange-700 focus:!border-orange-700",
+                  disabled && "dark:bg-gray-50",
+                  startIcon && "pl-10",
+                )}
+                {...rest}
+                onChange={(e) => {
+                  field.onChange(output(e));
+                }}
+                value={input(field.value)}
+                onBlur={() => {
+                  if (handleChanged) handleChanged({ name });
+                }}
+              />
+            </div>
+          )}
+        />
+      </div>
+    </Field>
+  );
+};