Use rome and initial format

src/components/Form/DynamicForm.tsx

@@ -4,7 +4,7 @@ import {
   FieldValues,
   Path,
   SubmitHandler,
-  useForm
+  useForm,
 } from "react-hook-form";
 import { H4 } from "@components/UI/Typography/H4.js";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
@@ -49,11 +49,11 @@ export function DynamicForm<T extends FieldValues>({
   submitType = "onChange",
   hasSubmitButton,
   defaultValues,
-  fieldGroups
+  fieldGroups,
 }: DynamicFormProps<T>) {
   const { handleSubmit, control, getValues } = useForm<T>({
     mode: submitType,
-    defaultValues: defaultValues
+    defaultValues: defaultValues,
   });
 
   const isDisabled = (disabledBy?: DisabledBy<T>[]): boolean => {
@@ -76,7 +76,7 @@ export function DynamicForm<T extends FieldValues>({
       {...(submitType === "onSubmit"
         ? { onSubmit: handleSubmit(onSubmit) }
         : {
-            onChange: handleSubmit(onSubmit)
+            onChange: handleSubmit(onSubmit),
           })}
     >
       {fieldGroups.map((fieldGroup, index) => (

src/components/Form/DynamicFormField.tsx

@@ -17,7 +17,7 @@ export interface DynamicFormFieldProps<T extends FieldValues> {
 export function DynamicFormField<T extends FieldValues>({
   field,
   control,
-  disabled
+  disabled,
 }: DynamicFormFieldProps<T>) {
   switch (field.type) {
     case "text":

src/components/Form/FormInput.tsx

@@ -1,7 +1,7 @@
 import type { LucideIcon } from "lucide-react";
 import type {
   BaseFormBuilderProps,
-  GenericFormElementProps
+  GenericFormElementProps,
 } from "./DynamicForm.js";
 import { Input } from "../UI/Input.js";
 import { Controller, FieldValues } from "react-hook-form";
@@ -21,7 +21,7 @@ export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
 export function GenericInput<T extends FieldValues>({
   control,
   disabled,
-  field
+  field,
 }: GenericFormElementProps<T, InputFieldProps<T>>) {
   return (
     <Controller
@@ -35,7 +35,7 @@ export function GenericInput<T extends FieldValues>({
             onChange(
               field.type === "number"
                 ? parseInt(e.target.value)
-                : e.target.value
+                : e.target.value,
             )
           }
           disabled={disabled}

src/components/Form/FormSelect.tsx

@@ -1,6 +1,6 @@
 import type {
   BaseFormBuilderProps,
-  GenericFormElementProps
+  GenericFormElementProps,
 } from "./DynamicForm.js";
 import { Controller, FieldValues } from "react-hook-form";
 import {
@@ -8,7 +8,7 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
+  SelectValue,
 } from "../UI/Select.js";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
@@ -24,7 +24,7 @@ export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
 export function SelectInput<T extends FieldValues>({
   control,
   disabled,
-  field
+  field,
 }: GenericFormElementProps<T, SelectFieldProps<T>>) {
   return (
     <Controller
@@ -35,7 +35,7 @@ export function SelectInput<T extends FieldValues>({
           field.properties;
         const optionsEnumValues = enumValue
           ? Object.entries(enumValue).filter(
-              (value) => typeof value[1] === "number"
+              (value) => typeof value[1] === "number",
             )
           : [];
         return (

src/components/Form/FormToggle.tsx

@@ -1,9 +1,10 @@
+import { Switch } from "../UI/Switch.js";
 import type {
   BaseFormBuilderProps,
-  GenericFormElementProps
+  GenericFormElementProps,
 } from "./DynamicForm.js";
-import { Controller, FieldValues } from "react-hook-form";
-import { Switch } from "../UI/Switch.js";
+import { ChangeEvent } from "react";
+import { Controller, FieldPathValue, FieldValues } from "react-hook-form";
 
 export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "toggle";
@@ -12,8 +13,18 @@ export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
 export function ToggleInput<T extends FieldValues>({
   control,
   disabled,
-  field
+  field,
 }: GenericFormElementProps<T, ToggleFieldProps<T>>) {
+  const onChangeHandler = (e: (event: ChangeEvent) => void) => {
+    return (value: boolean) => {
+      e({
+        target: {
+          value: value,
+        },
+      } as unknown as ChangeEvent);
+    };
+  };
+
   return (
     <Controller
       name={field.name}
@@ -21,7 +32,7 @@ export function ToggleInput<T extends FieldValues>({
       render={({ field: { value, onChange, ...rest } }) => (
         <Switch
           checked={value}
-          onCheckedChange={onChange}
+          onCheckedChange={onChangeHandler(onChange)}
           disabled={disabled}
           {...field.properties}
           {...rest}

src/components/Form/FormWrapper.tsx

@@ -11,7 +11,7 @@ export interface FieldWrapperProps {
 export const FieldWrapper = ({
   label,
   description,
-  children
+  children,
 }: FieldWrapperProps): JSX.Element => (
   <div className="pt-6 sm:pt-5">
     <div role="group" aria-labelledby="label-notifications">