fix(ts): fix ts errors

src/components/FormBuilder/fields/MultiSelectCheckboxesField.tsx

@@ -12,12 +12,12 @@ import {
 import { withConditional } from "../fields";
 import { SelectFieldProps } from "./selects/SelectField";
 
-export interface MultiSelectCheckboxesField extends SelectFieldProps {
+export interface MultiSelectCheckboxesFieldProps extends SelectFieldProps {
   type: "multi_select_checkbox";
 }
 
 export const MultiSelectCheckboxes =
-  withConditional<MultiSelectCheckboxesField>(({ form, field }) => (
+  withConditional<MultiSelectCheckboxesFieldProps>(({ form, field }) => (
     <FormField
       control={form.control}
       name={field.name}

tests/components/FormBuilder/DatePickerInput.test.tsx

@@ -1,14 +1,15 @@
 import { vi, describe, it, expect } from "vitest";
 import { screen, fireEvent } from "@testing-library/react";
 import { renderFormField } from "tests/helpers/renderFormField";
-import { DatePickerInput } from "#/components";
+import { DatePickerInput, DatePickerInputProps } from "#/components";
 
 describe("DatePickerInput", () => {
   const mockDate = new Date(2022, 0, 1);
-  const field = {
+  const field: DatePickerInputProps = {
     type: "date",
     name: "test",
     defaultValue: "",
+    value: "",
   };
 
   it("renders a date picker input", () => {
@@ -20,7 +21,10 @@ describe("DatePickerInput", () => {
 
   it("displays the selected date in the correct format", () => {
     vi.setSystemTime(mockDate);
-    renderFormField(DatePickerInput, { ...field, defaultValue: mockDate });
+    renderFormField(DatePickerInput, {
+      ...field,
+      defaultValue: mockDate.toDateString(),
+    });
     const buttonElement = screen.getByRole("button");
     expect(buttonElement).toHaveTextContent("Jan 1, 2022");
   });

tests/components/FormBuilder/FieldArray.test.tsx

@@ -1,13 +1,15 @@
 import { describe, it, expect } from "vitest";
 import { screen, fireEvent } from "@testing-library/react";
 import { renderFormField } from "tests/helpers/renderFormField";
-import { FieldArray } from "#/components";
+import { FieldArray, FieldArrayFieldProps } from "#/components";
 
 describe("FieldArray", () => {
   it("renders an 'Add' button", () => {
-    const field = {
+    const field: FieldArrayFieldProps = {
       type: "field_array",
       name: "test",
+      value: "",
+      defaultValues: { name: "" },
       fields: [],
       hasSequence: false,
     };
@@ -18,12 +20,20 @@ describe("FieldArray", () => {
   });
 
   it("adds a new field when the 'Add' button is clicked", () => {
-    const field = {
+    const field: FieldArrayFieldProps = {
       type: "field_array",
       name: "test",
+      value: "",
       label: "Test",
       defaultValues: { name: "" },
-      fields: [{ type: "input", name: "name" }],
+      fields: [
+        {
+          type: "input",
+          name: "name",
+          label: "Name",
+          value: "",
+        },
+      ],
       hasSequence: false,
     };
     const { form } = renderFormField(FieldArray, field);

tests/components/FormBuilder/FileUploadField.test.tsx

@@ -1,11 +1,16 @@
 import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import { renderFormField } from "tests/helpers/renderFormField";
-import { FileUploadField } from "#/components";
+import { FileUploadField, FileUploadFieldProps } from "#/components";
 
 describe("FileUploadField", () => {
   it("renders an upload button", () => {
-    const field = { type: "file", name: "test", mode: "file" };
+    const field: FileUploadFieldProps = {
+      type: "file",
+      name: "test",
+      mode: "file",
+      value: "",
+    };
 
     renderFormField(FileUploadField, field);
 

tests/components/FormBuilder/HiddenField.test.tsx

@@ -1,25 +1,22 @@
 import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
-import { HiddenField } from "#/components";
+import { BaseField, HiddenField } from "#/components";
 import { renderFormField } from "../../../tests/helpers/renderFormField";
 
 describe("HiddenField", () => {
+  const field: BaseField = {
+    type: "hidden",
+    name: "test",
+    value: "hiddenValue",
+  };
   it("renders a hidden input field", () => {
-    const { form } = renderFormField(HiddenField, {
-      type: "hidden",
-      name: "test",
-      value: "hiddenValue",
-    });
+    const { form } = renderFormField(HiddenField, field);
     const hiddenInput = form.getValues("test");
     expect(hiddenInput).toBe("hiddenValue");
   });
 
   it("does not render any visible elements", () => {
-    renderFormField(HiddenField, {
-      type: "hidden",
-      name: "test",
-      value: "hiddenValue",
-    });
+    renderFormField(HiddenField, field);
     const hiddenInput = screen.queryByRole("textbox");
     expect(hiddenInput).not.toBeInTheDocument();
   });

tests/components/FormBuilder/InputField.test.tsx

@@ -1,10 +1,15 @@
 import { describe, it, expect } from "vitest";
 import { screen, fireEvent } from "@testing-library/react";
 import { renderFormField } from "tests/helpers/renderFormField";
-import { InputField } from "#/components";
+import { InputField, InputFieldProps } from "#/components";
 
 describe("InputField", () => {
-  const field = { type: "input", name: "test", value: "" };
+  const field: InputFieldProps = {
+    type: "input",
+    name: "test",
+    value: "",
+    mode: "text",
+  };
   it("renders an input element", () => {
     renderFormField(InputField, field);
     const inputElement = screen.getByRole("textbox");

tests/components/FormBuilder/MultiSelectCheckboxesField.test.tsx

@@ -1,12 +1,16 @@
 import { describe, it, expect } from "vitest";
 import { screen, fireEvent } from "@testing-library/react";
 import { renderFormField } from "tests/helpers/renderFormField";
-import { MultiSelectCheckboxes } from "#/components";
+import {
+  MultiSelectCheckboxes,
+  MultiSelectCheckboxesFieldProps,
+} from "#/components";
 
 describe("MultiSelectCheckboxes", () => {
-  const field = {
+  const field: MultiSelectCheckboxesFieldProps = {
     type: "multi_select_checkbox",
     name: "test",
+    value: "",
     options: [
       { value: "option1", label: "Option 1" },
       { value: "option2", label: "Option 2" },

tests/components/FormBuilder/RadioGroupField.test.tsx

@@ -1,15 +1,22 @@
 import { describe, it, expect } from "vitest";
 import { screen, fireEvent } from "@testing-library/react";
 import { renderFormField } from "tests/helpers/renderFormField";
-import { RadioGroupField } from "#/components";
+import { RadioGroupField, RadioGroupFieldProps } from "#/components";
 
 describe("RadioGroupField", () => {
-  const field = {
+  const field: RadioGroupFieldProps = {
     type: "radio_group",
     name: "test",
-    options: [
-      { value: "option1", label: "Option 1" },
-      { value: "option2", label: "Option 2" },
+    value: "",
+    sections: [
+      {
+        label: "Test",
+        description: "Test description",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+        ],
+      },
     ],
   };
 

tests/components/FormBuilder/RichTextEditorField.test.tsx

@@ -1,10 +1,14 @@
 import { describe, it, expect, vi } from "vitest";
 import { screen, act } from "@testing-library/react";
 import { renderFormField } from "tests/helpers/renderFormField";
-import { RichTextEditorField } from "#/components";
+import { RichTextEditorField, RichTextEditorFieldProps } from "#/components";
 
 describe("RichTextEditorField", () => {
-  const field = { type: "wysiwyg", name: "test" };
+  const field: RichTextEditorFieldProps = {
+    type: "wysiwyg",
+    name: "test",
+    value: "",
+  };
 
   it("renders a rich text editor", async () => {
     const { container } = renderFormField(RichTextEditorField, field);

tests/components/FormBuilder/SwitchField.test.tsx

@@ -1,10 +1,10 @@
 import { describe, it, expect } from "vitest";
 import { screen, fireEvent } from "@testing-library/react";
 import { renderFormField } from "tests/helpers/renderFormField";
-import { SwitchField } from "#/components";
+import { SwitchField, SwitchFieldProps } from "#/components";
 
 describe("SwitchField", () => {
-  const field = { type: "switch", name: "test" };
+  const field: SwitchFieldProps = { type: "switch", name: "test", value: "" };
 
   it("renders a switch element", () => {
     renderFormField(SwitchField, field);

tests/components/FormBuilder/TextAreaField.test.tsx

@@ -1,10 +1,14 @@
 import { describe, it, expect } from "vitest";
 import { screen, fireEvent } from "@testing-library/react";
 import { renderFormField } from "tests/helpers/renderFormField";
-import { TextAreaField } from "#/components";
+import { TextAreaField, TextAreaFieldProps } from "#/components";
 
 describe("TextAreaField", () => {
-  const field = { type: "textarea", name: "test" };
+  const field: TextAreaFieldProps = {
+    type: "textarea",
+    name: "test",
+    value: "",
+  };
 
   it("renders a textarea element", () => {
     renderFormField(TextAreaField, field);

tests/helpers/renderFormField.tsx

@@ -4,20 +4,24 @@ import { useForm, FormProvider, UseFormProps } from "react-hook-form";
 import { CommonFieldProps, FormFieldProps } from "#/components";
 
 export const renderFormField = (
-  FieldComponent: React.ComponentType<CommonFieldProps<FormFieldProps>>,
-  field: FormFieldProps,
-  formProps: UseFormProps
+  FieldComponent: unknown,
+  field: CommonFieldProps<FormFieldProps>["field"],
+  formProps?: UseFormProps
 ): {
   form: CommonFieldProps<FormFieldProps>["form"];
 } & RenderResult => {
   const { result } = renderHook(() => useForm(formProps));
   const form = result.current;
 
+  const Component = FieldComponent as React.ElementType<
+    CommonFieldProps<FormFieldProps>
+  >;
+
   return {
     form,
     ...render(
       <FormProvider {...form}>
-        <FieldComponent form={form} field={field} />
+        <Component form={form} field={field} />
       </FormProvider>
     ),
   };