feat: add Number field preview in settings (#2397)

Closes #2327

front/src/modules/settings/components/SettingsPageContainer.tsx

@@ -6,6 +6,7 @@ const StyledSettingsPageContainer = styled.div<{ width?: number }>`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(8)};
+  overflow: auto;
   padding: ${({ theme }) => theme.spacing(8)};
   width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth)};
 `;

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

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

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

@@ -12,15 +12,31 @@ const meta: Meta<typeof SettingsObjectFieldPreview> = {
     fieldIconKey: 'IconNotes',
     fieldLabel: 'Description',
     fieldType: 'TEXT',
-    objectIconKey: 'IconUser',
+    isObjectCustom: false,
-    objectLabelPlural: 'People',
+    objectIconKey: 'IconBuildingSkyscraper',
-    objectNamePlural: 'people',
+    objectLabelPlural: 'Companies',
+    objectNamePlural: 'companies',
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof SettingsObjectFieldPreview>;
 
-export const StandardObject: Story = { args: { isObjectCustom: false } };
+export const Text: Story = {};
 
-export const CustomObject: Story = { args: { isObjectCustom: true } };
+export const Number: Story = {
+  args: {
+    fieldIconKey: 'IconUsers',
+    fieldLabel: 'Employees',
+    fieldType: 'NUMBER',
+  },
+};
+
+export const CustomObject: Story = {
+  args: {
+    isObjectCustom: true,
+    objectIconKey: 'IconApps',
+    objectLabelPlural: 'Workspaces',
+    objectNamePlural: 'workspaces',
+  },
+};

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

@@ -9,7 +9,16 @@ const meta: Meta<typeof SettingsObjectFieldTypeSelectSection> = {
   title: 'Modules/Settings/DataModel/SettingsObjectFieldTypeSelectSection',
   component: SettingsObjectFieldTypeSelectSection,
   decorators: [ComponentDecorator],
-  args: { fieldType: 'NUMBER' },
+  args: {
+    fieldType: 'NUMBER',
+    fieldIconKey: 'IconUsers',
+    fieldLabel: 'Employees',
+    fieldName: 'employees',
+    isObjectCustom: false,
+    objectIconKey: 'IconUser',
+    objectLabelPlural: 'People',
+    objectNamePlural: 'people',
+  },
 };
 
 export default meta;
@@ -17,6 +26,10 @@ type Story = StoryObj<typeof SettingsObjectFieldTypeSelectSection>;
 
 export const Default: Story = {};
 
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
 export const WithOpenSelect: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

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

@@ -13,7 +13,7 @@ export const dataTypes: Record<
   MetadataFieldDataType,
   { label: string; Icon: IconComponent; defaultValue?: unknown }
 > = {
-  NUMBER: { label: 'Number', Icon: IconNumbers },
+  NUMBER: { label: 'Number', Icon: IconNumbers, defaultValue: 2000 },
   TEXT: {
     label: 'Text',
     Icon: IconTextSize,