Add email composite field (#9061)

Same as links, only adding primary email

packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx

@@ -1,5 +1,6 @@
 import { FormAddressFieldInput } from '@/object-record/record-field/form-types/components/FormAddressFieldInput';
 import { FormBooleanFieldInput } from '@/object-record/record-field/form-types/components/FormBooleanFieldInput';
+import { FormEmailsFieldInput } from '@/object-record/record-field/form-types/components/FormEmailsFieldInput';
 import { FormFullNameFieldInput } from '@/object-record/record-field/form-types/components/FormFullNameFieldInput';
 import { FormLinksFieldInput } from '@/object-record/record-field/form-types/components/FormLinksFieldInput';
 import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
@@ -9,12 +10,14 @@ import { VariablePickerComponent } from '@/object-record/record-field/form-types
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
 import {
   FieldAddressValue,
+  FieldEmailsValue,
   FieldFullNameValue,
   FieldLinksValue,
   FieldMetadata,
 } from '@/object-record/record-field/types/FieldMetadata';
 import { isFieldAddress } from '@/object-record/record-field/types/guards/isFieldAddress';
 import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean';
+import { isFieldEmails } from '@/object-record/record-field/types/guards/isFieldEmails';
 import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
 import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
 import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
@@ -88,5 +91,12 @@ export const FormFieldInput = ({
       onPersist={onPersist}
       VariablePicker={VariablePicker}
     />
+  ) : isFieldEmails(field) ? (
+    <FormEmailsFieldInput
+      label={field.label}
+      defaultValue={defaultValue as FieldEmailsValue | undefined}
+      onPersist={onPersist}
+      VariablePicker={VariablePicker}
+    />
   ) : null;
 };

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormEmailsFieldInput.tsx

@@ -0,0 +1,45 @@
+import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
+import { FormNestedFieldInputContainer } from '@/object-record/record-field/form-types/components/FormNestedFieldInputContainer';
+import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
+import { InputLabel } from '@/ui/input/components/InputLabel';
+
+type FormEmailsFieldInputProps = {
+  label?: string;
+  defaultValue?: FieldEmailsValue;
+  onPersist: (value: FieldEmailsValue) => void;
+  VariablePicker?: VariablePickerComponent;
+  readonly?: boolean;
+};
+
+export const FormEmailsFieldInput = ({
+  label,
+  defaultValue,
+  onPersist,
+  readonly,
+  VariablePicker,
+}: FormEmailsFieldInputProps) => {
+  const handleChange = (email: string) => {
+    onPersist({
+      primaryEmail: email,
+      additionalEmails: [],
+    });
+  };
+
+  return (
+    <FormFieldInputContainer>
+      {label ? <InputLabel>{label}</InputLabel> : null}
+      <FormNestedFieldInputContainer>
+        <FormTextFieldInput
+          label="Primary Email"
+          defaultValue={defaultValue?.primaryEmail}
+          onPersist={handleChange}
+          placeholder={'Primary Email'}
+          readonly={readonly}
+          VariablePicker={VariablePicker}
+        />
+      </FormNestedFieldInputContainer>
+    </FormFieldInputContainer>
+  );
+};

packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { FormEmailsFieldInput } from '../FormEmailsFieldInput';
+
+const meta: Meta<typeof FormEmailsFieldInput> = {
+  title: 'UI/Data/Field/Form/Input/FormEmailsFieldInput',
+  component: FormEmailsFieldInput,
+  args: {},
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormEmailsFieldInput>;
+
+export const Default: Story = {
+  args: {
+    label: 'Emails',
+    defaultValue: {
+      primaryEmail: 'tim@twenty.com',
+      additionalEmails: [],
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Emails');
+    await canvas.findByText('Primary Email');
+    await canvas.findByText('tim@twenty.com');
+  },
+};