Reactive form preview (#8663)

## Description

This PR fixes issues with field previews not updating immediately when
settings are changed in the Data Model Editor. The changes affect number
field types, ensuring that the preview updates in real-time as settings
are modified.

### Fixed Issues
- Number field preview not updating when changing decimals or number
type (e.g., percentage)

Recording

https://www.loom.com/share/14a30f67266d4a08a694c759ae06b0f3?sid=c0de35ef-9982-438b-b822-94ed106f6891

~~Fixes #8663~~
Fixes #8556

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx

@@ -117,7 +117,7 @@ export const settingsDataModelFieldSettingsFormSchema = z.discriminatedUnion(
 type SettingsDataModelFieldSettingsFormCardProps = {
   fieldMetadataItem: Pick<
     FieldMetadataItem,
-    'icon' | 'label' | 'type' | 'isCustom'
+    'icon' | 'label' | 'type' | 'isCustom' | 'settings'
   > &
     Partial<Omit<FieldMetadataItem, 'icon' | 'label' | 'type'>>;
 } & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextSettingsFormCard.tsx

@@ -8,6 +8,7 @@ import {
   SettingsDataModelFieldPreviewCard,
   SettingsDataModelFieldPreviewCardProps,
 } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
+import { useFormContext } from 'react-hook-form';
 
 type SettingsDataModelFieldTextSettingsFormCardProps = {
   disabled?: boolean;
@@ -26,11 +27,16 @@ export const SettingsDataModelFieldTextSettingsFormCard = ({
   fieldMetadataItem,
   objectMetadataItem,
 }: SettingsDataModelFieldTextSettingsFormCardProps) => {
+  const { watch } = useFormContext();
+
   return (
     <SettingsDataModelPreviewFormCard
       preview={
         <StyledFieldPreviewCard
-          fieldMetadataItem={fieldMetadataItem}
+          fieldMetadataItem={{
+            ...fieldMetadataItem,
+            settings: watch('settings'),
+          }}
           objectMetadataItem={objectMetadataItem}
         />
       }

packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberSettingsFormCard.tsx

@@ -7,12 +7,13 @@ import {
   SettingsDataModelFieldPreviewCard,
   SettingsDataModelFieldPreviewCardProps,
 } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
+import { useFormContext } from 'react-hook-form';
 
 type SettingsDataModelFieldNumberSettingsFormCardProps = {
   disabled?: boolean;
   fieldMetadataItem: Pick<
     FieldMetadataItem,
-    'icon' | 'label' | 'type' | 'defaultValue'
+    'icon' | 'label' | 'type' | 'defaultValue' | 'settings'
   >;
 } & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
 
@@ -26,11 +27,18 @@ export const SettingsDataModelFieldNumberSettingsFormCard = ({
   fieldMetadataItem,
   objectMetadataItem,
 }: SettingsDataModelFieldNumberSettingsFormCardProps) => {
+  const { watch } = useFormContext();
+
   return (
     <SettingsDataModelPreviewFormCard
       preview={
         <StyledFieldPreviewCard
-          fieldMetadataItem={fieldMetadataItem}
+          fieldMetadataItem={{
+            icon: watch('icon'),
+            label: watch('label') || 'New Field',
+            settings: watch('settings') || null,
+            type: fieldMetadataItem.type,
+          }}
           objectMetadataItem={objectMetadataItem}
         />
       }

packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx

@@ -227,6 +227,7 @@ export const SettingsObjectNewFieldConfigure = () => {
                 fieldMetadataItem={{
                   icon: formConfig.watch('icon'),
                   label: formConfig.watch('label') || 'New Field',
+                  settings: formConfig.watch('settings') || null,
                   type: fieldType as FieldMetadataType,
                 }}
                 objectMetadataItem={activeObjectMetadataItem}