feat: add Url field preview in settings (#2402)

* feat: add Url field preview in settings

Closes #2326

* feat: add Date field type in settings (#2414)

Closes #2331

front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx

@@ -64,7 +64,9 @@ export const SettingsObjectFieldTypeSelectSection = ({
         }),
       )}
     />
-    {['BOOLEAN', 'MONEY', 'NUMBER', 'TEXT'].includes(fieldType) && (
+    {['BOOLEAN', 'DATE', 'MONEY', 'NUMBER', 'TEXT', 'URL'].includes(
+      fieldType,
+    ) && (
       <StyledSettingsObjectFieldTypeCard
         preview={
           <SettingsObjectFieldPreview

front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx

@@ -1,3 +1,4 @@
+import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
@@ -40,6 +41,29 @@ export const Currency: Story = {
   },
 };
 
+export const Date: Story = {
+  args: {
+    fieldIconKey: 'IconCalendarEvent',
+    fieldLabel: 'Registration Date',
+    fieldType: 'DATE',
+  },
+};
+
+export const Link: Story = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  args: {
+    fieldIconKey: 'IconWorldWww',
+    fieldLabel: 'Website',
+    fieldType: 'URL',
+  },
+};
+
 export const Number: Story = {
   args: {
     fieldIconKey: 'IconUsers',

front/src/modules/settings/data-model/constants/dataTypes.ts

@@ -1,4 +1,5 @@
 import {
+  IconCalendarEvent,
   IconCheck,
   IconCoins,
   IconLink,
@@ -11,23 +12,35 @@ import { Currency } from '~/generated-metadata/graphql';
 
 import { MetadataFieldDataType } from '../types/ObjectFieldDataType';
 
+const defaultDateValue = new Date();
+defaultDateValue.setFullYear(defaultDateValue.getFullYear() + 2);
+
 export const dataTypes: Record<
   MetadataFieldDataType,
   { label: string; Icon: IconComponent; defaultValue?: unknown }
 > = {
-  BOOLEAN: { label: 'True/False', Icon: IconCheck, defaultValue: true },
-  MONEY: {
-    label: 'Currency',
-    Icon: IconCoins,
-    defaultValue: { amount: 2000, currency: Currency.Usd },
-  },
-  NUMBER: { label: 'Number', Icon: IconNumbers, defaultValue: 2000 },
-  RELATION: { label: 'Relation', Icon: IconPlug },
   TEXT: {
     label: 'Text',
     Icon: IconTextSize,
     defaultValue:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna enim, dapibus non enim in, lacinia faucibus nunc. Sed interdum ante sed felis facilisis, eget ultricies neque molestie. Mauris auctor, justo eu volutpat cursus, libero erat tempus nulla, non sodales lorem lacus a est.',
   },
-  URL: { label: 'Link', Icon: IconLink },
+  NUMBER: { label: 'Number', Icon: IconNumbers, defaultValue: 2000 },
+  URL: {
+    label: 'Link',
+    Icon: IconLink,
+    defaultValue: { link: 'www.twenty.com', text: '' },
+  },
+  BOOLEAN: { label: 'True/False', Icon: IconCheck, defaultValue: true },
+  DATE: {
+    label: 'Date',
+    Icon: IconCalendarEvent,
+    defaultValue: defaultDateValue.toISOString(),
+  },
+  MONEY: {
+    label: 'Currency',
+    Icon: IconCoins,
+    defaultValue: { amount: 2000, currency: Currency.Usd },
+  },
+  RELATION: { label: 'Relation', Icon: IconPlug },
 };

front/src/modules/settings/data-model/types/ObjectFieldDataType.ts

@@ -1,5 +1,6 @@
 export type MetadataFieldDataType =
   | 'BOOLEAN'
+  | 'DATE'
   | 'MONEY'
   | 'NUMBER'
   | 'RELATION'