refactor: use react-hook-form for Field type config forms (#5326)

Closes #4295

Note: for the sake of an easier code review, I did not rename/move some
files and added "todo" comments instead so Github is able to match those
files with their previous version.

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelDefaultValue.tsx

@@ -1,17 +1,26 @@
+import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { IconCheck, IconX } from 'twenty-ui';
+import { z } from 'zod';
 
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { Select } from '@/ui/input/components/Select';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 
-type SettingsDataModelDefaultValueFormProps = {
-  className?: string;
-  disabled?: boolean;
-  onChange?: (defaultValue: SettingsDataModelDefaultValue) => void;
-  value?: SettingsDataModelDefaultValue;
-};
+// TODO: rename to SettingsDataModelFieldBooleanForm and move to settings/data-model/fields/forms/components
 
-export type SettingsDataModelDefaultValue = any;
+export const settingsDataModelFieldBooleanFormSchema = z.object({
+  defaultValue: z.boolean(),
+});
+
+type SettingsDataModelFieldBooleanFormValues = z.infer<
+  typeof settingsDataModelFieldBooleanFormSchema
+>;
+
+type SettingsDataModelFieldBooleanFormProps = {
+  className?: string;
+  fieldMetadataItem?: Pick<FieldMetadataItem, 'defaultValue'>;
+};
 
 const StyledContainer = styled(CardContent)`
   padding-bottom: ${({ theme }) => theme.spacing(3.5)};
@@ -26,34 +35,42 @@ const StyledLabel = styled.span`
   margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const SettingsDataModelDefaultValueForm = ({
+export const SettingsDataModelFieldBooleanForm = ({
   className,
-  disabled,
-  onChange,
-  value,
-}: SettingsDataModelDefaultValueFormProps) => {
+  fieldMetadataItem,
+}: SettingsDataModelFieldBooleanFormProps) => {
+  const { control } = useFormContext<SettingsDataModelFieldBooleanFormValues>();
+
+  const initialValue = fieldMetadataItem?.defaultValue ?? true;
+
   return (
     <StyledContainer>
       <StyledLabel>Default Value</StyledLabel>
-      <Select
-        className={className}
-        fullWidth
-        disabled={disabled}
-        dropdownId="object-field-default-value-select"
-        value={value}
-        onChange={(value) => onChange?.(value)}
-        options={[
-          {
-            value: true,
-            label: 'True',
-            Icon: IconCheck,
-          },
-          {
-            value: false,
-            label: 'False',
-            Icon: IconX,
-          },
-        ]}
+      <Controller
+        name="defaultValue"
+        control={control}
+        defaultValue={initialValue}
+        render={({ field: { onChange, value } }) => (
+          <Select
+            className={className}
+            fullWidth
+            dropdownId="object-field-default-value-select"
+            value={value}
+            onChange={onChange}
+            options={[
+              {
+                value: true,
+                label: 'True',
+                Icon: IconCheck,
+              },
+              {
+                value: false,
+                label: 'False',
+                Icon: IconX,
+              },
+            ]}
+          />
+        )}
       />
     </StyledContainer>
   );