Fix: Use Generic Type for Input Components

frontend/src/components/Checkbox.tsx

@@ -1,28 +1,27 @@
 "use client";
-import { UseFormRegister } from "react-hook-form";
+import { FieldValues, Path, UseFormRegister } from "react-hook-form";
 
 import { cn } from "../lib/utils";
 
 import OtherCheckbox from "./OtherCheckbox";
-import { FormData } from "./StudentForm/types";
 
-type CheckboxProps = {
+type CheckboxProps<T extends FieldValues> = {
   options: string[];
   className?: string;
-  name: keyof FormData;
+  name: Path<T>;
   defaultValue?: string[];
   defaultOtherValue?: string;
-  register: UseFormRegister<FormData>;
+  register: UseFormRegister<T>;
 };
 
-export function Checkbox({
+export function Checkbox<T extends FieldValues>({
   options,
   className,
   name,
   register,
   defaultValue,
   defaultOtherValue,
-}: CheckboxProps) {
+}: CheckboxProps<T>) {
   return (
     <div className={cn("sm:min-w-2/5 min-w-4/5 grid gap-x-5 gap-y-5 sm:grid-cols-3", className)}>
       {options.map((item, index) => {

frontend/src/components/OtherCheckbox.tsx

@@ -1,15 +1,17 @@
 import { useEffect, useState } from "react";
-import { UseFormRegister } from "react-hook-form";
+import { FieldValues, Path, UseFormRegister } from "react-hook-form";
 
-import { FormData } from "./StudentForm/types";
 import { Textfield } from "./Textfield";
 
-type OtherCheckboxProps = {
-  register: UseFormRegister<FormData>;
+type OtherCheckboxProps<T extends FieldValues> = {
+  register: UseFormRegister<T>;
   defaultOtherValue?: string;
 };
 
-export default function OtherCheckbox({ register, defaultOtherValue = "" }: OtherCheckboxProps) {
+export default function OtherCheckbox<T extends FieldValues>({
+  register,
+  defaultOtherValue = "",
+}: OtherCheckboxProps<T>) {
   const [checked, setChecked] = useState(defaultOtherValue !== "");
 
   //Revert other checkbox when clicked outside
@@ -32,7 +34,7 @@ export default function OtherCheckbox({ register, defaultOtherValue = "" }: Othe
     <Textfield
       className="animate-in fade-in"
       register={register}
-      name="other"
+      name={"other" as Path<T>}
       label="Other"
       placeholder="Type Here..."
       defaultValue={defaultOtherValue}

frontend/src/components/Radio.tsx

@@ -1,15 +1,20 @@
-import { FieldValues, UseFormRegister } from "react-hook-form";
+import { FieldValues, Path, UseFormRegister } from "react-hook-form";
 
 import { cn } from "../lib/utils";
 
-type RadioProps = {
+type RadioProps<T extends FieldValues> = {
   options: string[];
   className?: string;
-  name: string;
-  register: UseFormRegister<FieldValues>;
+  name: Path<T>;
+  register: UseFormRegister<T>;
 };
 
-export default function Radio({ options, register, name, className }: RadioProps) {
+export default function Radio<T extends FieldValues>({
+  options,
+  register,
+  name,
+  className,
+}: RadioProps<T>) {
   return (
     <div className={cn("grid gap-3", className)}>
       {options.map((option, index) => {

frontend/src/components/StudentForm/ContactInfo.tsx

@@ -3,17 +3,17 @@ import { UseFormRegister } from "react-hook-form";
 import { cn } from "../../lib/utils";
 import { Textfield } from "../Textfield";
 
-import { FormData, StudentFormData } from "./types";
+import { StudentData, StudentFormData } from "./types";
 
 type ContactRole = "student" | "emergency" | "serviceCoordinator";
 
 type PersonalInfoField = "firstName" | "lastName" | "email" | "phoneNumber";
 
 type ContactInfoProps = {
-  register: UseFormRegister<FormData>;
+  register: UseFormRegister<StudentFormData>;
   classname?: string;
   type: "add" | "edit";
-  data: StudentFormData | null;
+  data: StudentData | null;
 };
 
 type FieldProps = {
@@ -25,7 +25,7 @@ type FieldProps = {
 };
 
 type FinalFieldProps = {
-  name: keyof FormData;
+  name: keyof StudentFormData;
   label: string;
   placeholder: string;
   type?: string;

frontend/src/components/StudentForm/StudentBackground.tsx

@@ -4,13 +4,13 @@ import { cn } from "../../lib/utils";
 import { Checkbox } from "../Checkbox";
 import { Textfield } from "../Textfield";
 
-import { FormData, StudentFormData } from "./types";
+import { StudentData, StudentFormData } from "./types";
 
 type StudentBackgroundProps = {
-  register: UseFormRegister<FormData>;
+  register: UseFormRegister<StudentFormData>;
   classname?: string;
-  setCalendarValue: UseFormSetValue<FormData>;
-  data: StudentFormData | null;
+  setCalendarValue: UseFormSetValue<StudentFormData>;
+  data: StudentData | null;
 };
 
 const dietaryList = ["Nuts", "Eggs", "Seafood", "Pollen", "Dairy", "Other"];

frontend/src/components/StudentForm/StudentInfo.tsx

@@ -4,13 +4,13 @@ import { cn } from "../../lib/utils";
 import { Checkbox } from "../Checkbox";
 import { Textfield } from "../Textfield";
 
-import { FormData, StudentFormData } from "./types";
+import { StudentData, StudentFormData } from "./types";
 
 type StudentInfoProps = {
-  register: UseFormRegister<FormData>;
+  register: UseFormRegister<StudentFormData>;
   classname?: string;
-  setCalendarValue: UseFormSetValue<FormData>;
-  data: StudentFormData | null;
+  setCalendarValue: UseFormSetValue<StudentFormData>;
+  data: StudentData | null;
 };
 
 const regularPrograms = ["Intro", "ENTR"];

frontend/src/components/StudentForm/types.ts

@@ -5,7 +5,7 @@ export type Contact = {
   phoneNumber: string;
 };
 
-export type StudentFormData = {
+export type StudentData = {
   student: Contact;
   emergency: Contact;
   serviceCoordinator: Contact;
@@ -20,7 +20,7 @@ export type StudentFormData = {
   otherString: string;
 };
 
-export type FormData = {
+export type StudentFormData = {
   student_name: string;
   student_last: string;
   student_email: string;

frontend/src/components/StudentFormButton.tsx

@@ -7,7 +7,7 @@ import { Button } from "./Button";
 import ContactInfo from "./StudentForm/ContactInfo";
 import StudentBackground from "./StudentForm/StudentBackground";
 import StudentInfo from "./StudentForm/StudentInfo";
-import { FormData, StudentFormData } from "./StudentForm/types";
+import { StudentData, StudentFormData } from "./StudentForm/types";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "./ui/dialog";
 
 type BaseProps = {
@@ -16,12 +16,12 @@ type BaseProps = {
 
 type EditProps = BaseProps & {
   type: "edit";
-  data: StudentFormData | null;
+  data: StudentData | null;
 };
 
 type AddProps = BaseProps & {
   type: "add";
-  data?: StudentFormData | null;
+  data?: StudentData | null;
 };
 
 type StudentFormProps = EditProps | AddProps;
@@ -31,10 +31,10 @@ export default function StudentFormButton({
   data = null,
   classname,
 }: StudentFormProps) {
-  const { register, setValue: setCalendarValue, reset, handleSubmit } = useForm<FormData>();
+  const { register, setValue: setCalendarValue, reset, handleSubmit } = useForm<StudentFormData>();
 
-  const onSubmit: SubmitHandler<FormData> = (formData: FormData) => {
-    const transformedData: StudentFormData = {
+  const onSubmit: SubmitHandler<StudentFormData> = (formData: StudentFormData) => {
+    const transformedData: StudentData = {
       student: {
         firstName: formData.student_name,
         lastName: formData.student_last,

frontend/src/components/Textfield.tsx

@@ -1,47 +1,45 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { FieldValues, Path, PathValue, UseFormRegister, UseFormSetValue } from "react-hook-form";
 
 import { Calendar } from "../components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover";
 import { cn } from "../lib/utils";
 
-import { FormData } from "./StudentForm/types";
-
-type BaseProps = {
-  register: UseFormRegister<FormData>;
-  name: keyof FormData;
+type BaseProps<T extends FieldValues> = {
+  register: UseFormRegister<T>;
+  name: Path<T>;
   label?: string;
   type?: string;
   placeholder: string;
   defaultValue?: string;
   className?: string;
 };
 
-type WithCalendarProps = BaseProps & {
-  calendar: true; // When calendar is true, setCalendarValue is required
-  setCalendarValue: UseFormSetValue<FormData>;
+type WithCalendarProps<T extends FieldValues> = BaseProps<T> & {
+  calendar?: true; // When calendar is false or not provided, setCalendarValue is optional
+  setCalendarValue?: UseFormSetValue<T>;
 };
 
-type WithoutCalendarProps = BaseProps & {
+type WithoutCalendarProps<T extends FieldValues> = BaseProps<T> & {
   calendar?: false; // When calendar is false or not provided, setCalendarValue is optional
-  setCalendarValue?: UseFormSetValue<FormData>;
+  setCalendarValue?: UseFormSetValue<T>;
 };
 
-type TextFieldProps = WithCalendarProps | WithoutCalendarProps;
+type TextFieldProps<T extends FieldValues> = WithCalendarProps<T> | WithoutCalendarProps<T>;
 
-export function Textfield({
+export function Textfield<T extends FieldValues>({
   register,
   setCalendarValue,
   label,
-  name,
+  name, //Must be a key in form data type specified in useForm hook
   placeholder,
   calendar = false,
   className,
   type = "text",
   defaultValue = "",
-}: TextFieldProps) {
+}: TextFieldProps<T>) {
   const [date, setDate] = useState<Date>();
 
   useEffect(() => {
@@ -51,7 +49,7 @@ export function Textfield({
         month: "2-digit",
         day: "2-digit",
       });
-      setCalendarValue(name, parsedDate);
+      setCalendarValue(name, parsedDate as PathValue<T, Path<T>>);
     }
   }, [date]);
 
@@ -64,7 +62,7 @@ export function Textfield({
         )}
       >
         <input
-          {...register(name)}
+          {...register(name as Path<T>)}
           className="focus-visible:out w-full appearance-none bg-inherit px-2 placeholder-pia_accent outline-none"
           id={label + placeholder}
           type={type}

frontend/src/pages/index.tsx

@@ -1,11 +1,40 @@
+import { useForm } from "react-hook-form";
+
+import { Button } from "../components/Button";
+import { Checkbox } from "../components/Checkbox";
 import StudentFormButton from "../components/StudentFormButton";
+import { Textfield } from "../components/Textfield";
 import sampleStudentData from "../sampleStudentData.json";
 
+type FruitData = {
+  fruits: string[];
+  favoriteFruit: string;
+};
+
 export default function Home() {
+  const { register, handleSubmit, reset } = useForm<FruitData>();
+
+  const onSubmit = (formData: FruitData) => {
+    console.log(formData);
+    reset();
+  };
+
   return (
-    <div className="grid w-40 gap-5">
-      <StudentFormButton type="edit" data={sampleStudentData} />
-      <StudentFormButton type="add" />
+    <div className="w-1/2">
+      <div className="flex gap-5">
+        <StudentFormButton type="edit" data={sampleStudentData} />
+        <StudentFormButton type="add" />
+      </div>
+
+      {/* Example */}
+      <div className="mt-5">
+        <h2 className="text-2xl font-bold">Example</h2>
+        <form className="grid gap-5" onSubmit={handleSubmit(onSubmit)}>
+          <Checkbox name="fruits" register={register} options={["apples", "oranges", "bananas"]} />
+          <Textfield name="favoriteFruit" register={register} placeholder="Favorite Fruit" />
+          <Button label="Submit" />
+        </form>
+      </div>
     </div>
   );
 }