Strongly type form components

Strongly type form components

app/[locale]/ajouter-un-tournoi/TournamentForm.tsx

@@ -74,17 +74,24 @@ const TournamentForm = () => {
           <div className="col-span-4">
             <TextField
               name="tournament.tournament"
+              control={form.control}
               label={t("tournamentNameLabel")}
               placeholder={t("tournamentNamePlaceholder")}
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <DateField name="tournament.date" label={t("dateLabel")} required />
+            <DateField
+              name="tournament.date"
+              control={form.control}
+              label={t("dateLabel")}
+              required
+            />
           </div>
           <div className="col-span-2 sm:col-span-1">
             <TextField
               name="tournament.url"
+              control={form.control}
               label={t("urlLabel")}
               placeholder={t("urlPlaceholder")}
               required
@@ -93,6 +100,7 @@ const TournamentForm = () => {
           <div className="col-span-2 sm:col-span-1">
             <SelectField
               name="tournament.time_control"
+              control={form.control}
               label={t("tcLabel")}
               options={[
                 TimeControl.Classic,
@@ -108,12 +116,14 @@ const TournamentForm = () => {
           <div className="col-span-2 sm:col-span-1">
             <SwitchField
               name="tournament.norm_tournament"
+              control={form.control}
               label={t("normLabel")}
             />
           </div>
           <div className="col-span-4">
             <TextField
               name="tournament.address"
+              control={form.control}
               label={t("addressLabel")}
               placeholder={t("addressPlaceholder")}
               required
@@ -122,6 +132,7 @@ const TournamentForm = () => {
           <div className="col-span-4 sm:col-span-2">
             <TextField
               name="tournament.town"
+              control={form.control}
               label={t("townLabel")}
               placeholder={t("townPlaceholder")}
               required
@@ -130,6 +141,7 @@ const TournamentForm = () => {
           <div className="col-span-2 sm:col-span-1">
             <TextField
               name="tournament.department"
+              control={form.control}
               label={t("departmentLabel")}
               placeholder={t("departmentPlaceholder")}
               required
@@ -138,6 +150,7 @@ const TournamentForm = () => {
           <div className="col-span-2 sm:col-span-1">
             <TextField
               name="tournament.country"
+              control={form.control}
               label={t("countryLabel")}
               placeholder={t("countryPlaceholder")}
               required
@@ -146,6 +159,7 @@ const TournamentForm = () => {
           <div className="col-span-2 sm:col-span-1">
             <TextField
               name="name"
+              control={form.control}
               label={t("yourNameLabel")}
               placeholder={t("yourNamePlaceholder")}
               required
@@ -154,6 +168,7 @@ const TournamentForm = () => {
           <div className="col-span-2 sm:col-span-1">
             <TextField
               name="email"
+              control={form.control}
               label={t("yourEmailLabel")}
               placeholder={t("yourEmailPlaceholder")}
               required
@@ -162,6 +177,7 @@ const TournamentForm = () => {
           <div className="col-span-4 row-span-2 sm:col-span-2">
             <TextAreaField
               name="message"
+              control={form.control}
               label={t("messageLabel")}
               rows={6}
               placeholder={t("messagePlaceholder")}
@@ -171,6 +187,7 @@ const TournamentForm = () => {
           <div className="col-span-2 sm:col-span-1">
             <TextField
               name="tournament.coordinates.0"
+              control={form.control}
               label={t("latLabel")}
               type="number"
               required
@@ -179,6 +196,7 @@ const TournamentForm = () => {
           <div className="col-span-2 sm:col-span-1">
             <TextField
               name="tournament.coordinates.1"
+              control={form.control}
               label={t("lngLabel")}
               type="number"
               required

app/[locale]/contactez-nous/ContactForm.tsx

@@ -55,6 +55,7 @@ const ContactForm = () => {
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         <TextField
           name="email"
+          control={form.control}
           label={t("emailLabel")}
           placeholder={t("emailPlaceholder")}
           required
@@ -62,6 +63,7 @@ const ContactForm = () => {
 
         <TextField
           name="subject"
+          control={form.control}
           label={t("subjectLabel")}
           placeholder={t("subjectPlaceholder")}
           required
@@ -69,6 +71,7 @@ const ContactForm = () => {
 
         <TextAreaField
           name="message"
+          control={form.control}
           rows={6}
           label={t("messageLabel")}
           placeholder={t("messagePlaceholder")}

app/[locale]/elo/ManualEloForm.tsx

@@ -107,6 +107,7 @@ export const ManualEloForm = () => {
         <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
           <TextField
             name="currentElo"
+            control={form.control}
             label={t("currentEloLabel")}
             placeholder={t("currentEloPlaceholder")}
             type="number"
@@ -115,6 +116,7 @@ export const ManualEloForm = () => {
 
           <SelectField
             name="kFactor"
+            control={form.control}
             label={t("yourKFactorLabel")}
             options={["40", "20", "10"].map((k) => ({
               value: k,
@@ -139,6 +141,7 @@ export const ManualEloForm = () => {
                   <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
                     <TextField
                       name={`games.${i}.opponentElo`}
+                      control={form.control}
                       placeholder={t("opponentEloPlaceholder")}
                       type="number"
                       required
@@ -147,6 +150,7 @@ export const ManualEloForm = () => {
                     <div className="flex items-center space-x-2">
                       <RadioGroupField
                         name={`games.${i}.result`}
+                        control={form.control}
                         options={["win", "draw", "loss"].map((result) => ({
                           value: result,
                           label: t("gameResult", { result }),

app/[locale]/elo/page.tsx

@@ -185,6 +185,7 @@ export default function Elo() {
             <div className="flex items-end gap-4">
               <TextField
                 name="url"
+                control={form.control}
                 label={t("resultsUrlLabel")}
                 placeholder={t("resultsUrlLabel")}
               />
@@ -222,6 +223,7 @@ export default function Elo() {
                 <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
                   <SelectField
                     name="player"
+                    control={form.control}
                     required
                     label={t("choosePlayerLabel")}
                     placeholder={t("choosePlayerPlaceholder")}
@@ -231,6 +233,7 @@ export default function Elo() {
 
                   <SelectField
                     name="kFactor"
+                    control={form.control}
                     label={t("kFactorLabel")}
                     options={["40", "20", "10"].map((k) => ({
                       value: k,