Merge pull request #41 from bleu-fi/joao/perk-1082-integrate-media-li…

…brary-with-buildforms

Integrate media library with buildforms

src/components/FormBuilder/buildForm.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { BaseField, CommonFieldProps, fieldComponents } from "./index";
 
-type FieldComponentType = (
+export type FieldComponentType = (
   props: CommonFieldProps<BaseField>
 ) => React.ReactNode | null;
 
@@ -31,7 +31,13 @@ export function buildForm(
 
     const name = field.name.replace("RESOURCE_ID", String(index));
 
-    return <FieldComponent field={{ ...field, name, index }} form={form} />;
+    return (
+      <FieldComponent
+        field={{ ...field, name, index }}
+        form={form}
+        customComponents={customComponents}
+      />
+    );
   });
 
   return formElements;

src/components/FormBuilder/builder.tsx

@@ -5,7 +5,6 @@ import { HiddenField } from "./fields/HiddenField";
 import { FileUploadField } from "./fields/FileUploadField";
 import { InputField } from "./fields/InputField";
 import { MultiSelectCheckboxes } from "./fields/MultiSelectCheckboxesField";
-
 import { RadioGroupField } from "./fields/RadioGroupField";
 import { RichTextEditorField } from "./fields/RichTextEditorField";
 import { ColorPickerField } from "./fields/selects/ColorPickerField";
@@ -16,7 +15,6 @@ import { SelectField } from "./fields/selects/SelectField";
 import { SwitchField } from "./fields/SwitchField";
 import { TextAreaField } from "./fields/TextAreaField";
 import { DelegateField } from "./fields/DelegateField";
-import { QuestionsField } from "./fields/QuestionsField";
 
 export const fieldComponents = {
   input: InputField,
@@ -31,7 +29,6 @@ export const fieldComponents = {
   multi_select: MultiSelect,
   field_array: FieldArray,
   hidden: HiddenField,
-  questions: QuestionsField,
   wysiwyg: RichTextEditorField,
   multi_select_checkbox: MultiSelectCheckboxes,
   color_picker: ColorPickerField,

src/components/FormBuilder/fields.tsx

@@ -5,12 +5,12 @@ import { CheckboxFieldProps } from "./fields/CheckboxField";
 import { DatePickerInputProps } from "./fields/DatePickerInput";
 import { FileUploadFieldProps } from "./fields/FileUploadField";
 import { InputFieldProps } from "./fields/InputField";
-import { QuestionsFieldProps } from "./fields/QuestionsField";
 import { RadioGroupFieldProps } from "./fields/RadioGroupField";
 import { RichTextEditorFieldProps } from "./fields/RichTextEditorField";
 import { SelectFieldProps } from "./fields/selects/SelectField";
 import { TextAreaFieldProps } from "./fields/TextAreaField";
 import { FieldArrayFieldProps } from "./fields/FieldArray";
+import { FieldComponentType } from "./buildForm";
 
 export interface BaseField {
   component?: React.ComponentType<CommonFieldProps<BaseField>>;
@@ -33,6 +33,7 @@ export interface BaseField {
 }
 
 export interface CommonFieldProps<T extends BaseField> {
+  customComponents?: { [key: string]: FieldComponentType };
   field: T;
   form: UseFormReturn<FieldValues>;
 }
@@ -98,6 +99,5 @@ export type FormFieldProps =
   | FileUploadFieldProps
   | SelectFieldProps
   | RadioGroupFieldProps
-  | QuestionsFieldProps
   | RichTextEditorFieldProps
   | FieldArrayFieldProps;

src/components/FormBuilder/fields/FieldArray.tsx

@@ -52,7 +52,7 @@ export interface FieldArrayFieldProps extends BaseField {
 }
 
 export const FieldArray = withConditional<FieldArrayFieldProps>(
-  ({ form, field }) => {
+  ({ form, field, customComponents }) => {
     const { fields, append, remove, move } = useFieldArray({
       control: form.control,
       name: field.name,
@@ -157,7 +157,12 @@ export const FieldArray = withConditional<FieldArrayFieldProps>(
                                     <MoveIcon className="size-6 self-center" />
                                   </div>
                                 )}
-                                {buildForm(field.fields, form, Number(index))}
+                                {buildForm(
+                                  field.fields,
+                                  form,
+                                  Number(index),
+                                  customComponents
+                                )}
                                 {field.remove !== false && (
                                   // eslint-disable-next-line jsx-a11y/control-has-associated-label
                                   <button

src/components/FormBuilder/fields/index.ts

@@ -11,7 +11,6 @@ export * from "./HiddenField";
 export * from "./FileUploadField";
 export * from "./InputField";
 export * from "./MultiSelectCheckboxesField";
-export * from "./QuestionsField";
 export * from "./RadioGroupField";
 export * from "./RichTextEditorField";
 export * from "./SwitchField";

src/components/index.ts

@@ -9,3 +9,4 @@ export * from "./RailsApp";
 export * from "./SectionTitle";
 export * from "./OtpInput";
 export * from "./SubmitButton";
+export * from "./StrictModeDroppable";