Allow input and display of floats for Number fields (#7340)

### Description

- We added a decimal field for a Number Field type in the settings
- We updated the Number Field type create a form with decimals input
- We are not implementing the dropdown present on the Figma because it
seems not related

### Demo


<https://www.loom.com/share/18a8d4b712a14f6d8b66806764f8467f?sid=3fc79b46-ae32-46e3-8635-d0eee02e53b2>

Fixes #6987

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>

packages/twenty-front/src/utils/__tests__/cast-as-integer-or-null.test.ts

@@ -1,72 +0,0 @@
-import {
-  canBeCastAsIntegerOrNull,
-  castAsIntegerOrNull,
-} from '../cast-as-integer-or-null';
-
-describe('canBeCastAsIntegerOrNull', () => {
-  it(`should return true if null`, () => {
-    expect(canBeCastAsIntegerOrNull(null)).toBeTruthy();
-  });
-
-  it(`should return true if number`, () => {
-    expect(canBeCastAsIntegerOrNull(9)).toBeTruthy();
-  });
-
-  it(`should return true if empty string`, () => {
-    expect(canBeCastAsIntegerOrNull('')).toBeTruthy();
-  });
-
-  it(`should return true if integer string`, () => {
-    expect(canBeCastAsIntegerOrNull('9')).toBeTruthy();
-  });
-
-  it(`should return false if undefined`, () => {
-    expect(canBeCastAsIntegerOrNull(undefined)).toBeFalsy();
-  });
-
-  it(`should return false if non numeric string`, () => {
-    expect(canBeCastAsIntegerOrNull('9a')).toBeFalsy();
-  });
-
-  it(`should return false if non numeric string #2`, () => {
-    expect(canBeCastAsIntegerOrNull('a9a')).toBeFalsy();
-  });
-
-  it(`should return false if float`, () => {
-    expect(canBeCastAsIntegerOrNull(0.9)).toBeFalsy();
-  });
-
-  it(`should return false if float string`, () => {
-    expect(canBeCastAsIntegerOrNull('0.9')).toBeFalsy();
-  });
-});
-
-describe('castAsIntegerOrNull', () => {
-  it(`should cast null to null`, () => {
-    expect(castAsIntegerOrNull(null)).toBe(null);
-  });
-
-  it(`should cast empty string to null`, () => {
-    expect(castAsIntegerOrNull('')).toBe(null);
-  });
-
-  it(`should cast an integer to an integer`, () => {
-    expect(castAsIntegerOrNull(9)).toBe(9);
-  });
-
-  it(`should cast an integer string to an integer`, () => {
-    expect(castAsIntegerOrNull('9')).toBe(9);
-  });
-
-  it(`should throw if trying to cast a float string to an integer`, () => {
-    expect(() => castAsIntegerOrNull('9.9')).toThrow(Error);
-  });
-
-  it(`should throw if trying to cast a non numeric string to an integer`, () => {
-    expect(() => castAsIntegerOrNull('9.9a')).toThrow(Error);
-  });
-
-  it(`should throw if trying to cast an undefined to an integer`, () => {
-    expect(() => castAsIntegerOrNull(undefined)).toThrow(Error);
-  });
-});

packages/twenty-front/src/utils/__tests__/cast-as-number-or-null.test.ts

@@ -0,0 +1,72 @@
+import {
+  canBeCastAsNumberOrNull,
+  castAsNumberOrNull,
+} from '../cast-as-number-or-null';
+
+describe('canBeCastAsNumberOrNull', () => {
+  it(`should return true if null`, () => {
+    expect(canBeCastAsNumberOrNull(null)).toBeTruthy();
+  });
+
+  it(`should return true if number`, () => {
+    expect(canBeCastAsNumberOrNull(9)).toBeTruthy();
+  });
+
+  it(`should return true if empty string`, () => {
+    expect(canBeCastAsNumberOrNull('')).toBeTruthy();
+  });
+
+  it(`should return true if integer string`, () => {
+    expect(canBeCastAsNumberOrNull('9')).toBeTruthy();
+  });
+
+  it(`should return false if undefined`, () => {
+    expect(canBeCastAsNumberOrNull(undefined)).toBeFalsy();
+  });
+
+  it(`should return false if non numeric string`, () => {
+    expect(canBeCastAsNumberOrNull('9a')).toBeFalsy();
+  });
+
+  it(`should return false if non numeric string #2`, () => {
+    expect(canBeCastAsNumberOrNull('a9a')).toBeFalsy();
+  });
+
+  it(`should return true if float`, () => {
+    expect(canBeCastAsNumberOrNull(0.9)).toBeTruthy();
+  });
+
+  it(`should return true if float string`, () => {
+    expect(canBeCastAsNumberOrNull('0.9')).toBeTruthy();
+  });
+});
+
+describe('castAsNumberOrNull', () => {
+  it(`should cast null to null`, () => {
+    expect(castAsNumberOrNull(null)).toBe(null);
+  });
+
+  it(`should cast empty string to null`, () => {
+    expect(castAsNumberOrNull('')).toBe(null);
+  });
+
+  it(`should cast an integer to an integer`, () => {
+    expect(castAsNumberOrNull(9)).toBe(9);
+  });
+
+  it(`should cast an integer string to an integer`, () => {
+    expect(castAsNumberOrNull('9')).toBe(9);
+  });
+
+  it(`should throw if trying to cast a float string to an integer`, () => {
+    expect(castAsNumberOrNull('9.9')).toBe(9.9);
+  });
+
+  it(`should throw if trying to cast a non numeric string to an integer`, () => {
+    expect(() => castAsNumberOrNull('9.9a')).toThrow(Error);
+  });
+
+  it(`should throw if trying to cast an undefined to an integer`, () => {
+    expect(() => castAsNumberOrNull(undefined)).toThrow(Error);
+  });
+});

packages/twenty-front/src/utils/cast-as-number-or-null.ts

@@ -4,7 +4,7 @@ import { logError } from './logError';
 
 const DEBUG_MODE = false;
 
-export const canBeCastAsIntegerOrNull = (
+export const canBeCastAsNumberOrNull = (
   probableNumberOrNull: string | undefined | number | null,
 ): probableNumberOrNull is number | null => {
   if (probableNumberOrNull === undefined) {
@@ -16,7 +16,7 @@ export const canBeCastAsIntegerOrNull = (
   if (isNumber(probableNumberOrNull)) {
     if (DEBUG_MODE) logError('typeof probableNumberOrNull === "number"');
 
-    return Number.isInteger(probableNumberOrNull);
+    return true;
   }
 
   if (isNull(probableNumberOrNull)) {
@@ -39,8 +39,8 @@ export const canBeCastAsIntegerOrNull = (
 
       return false;
     }
-    if (Number.isInteger(stringAsNumber)) {
-      if (DEBUG_MODE) logError('Number.isInteger(stringAsNumber)');
+    if (isNumber(stringAsNumber)) {
+      if (DEBUG_MODE) logError('isNumber(stringAsNumber)');
 
       return true;
     }
@@ -49,10 +49,10 @@ export const canBeCastAsIntegerOrNull = (
   return false;
 };
 
-export const castAsIntegerOrNull = (
+export const castAsNumberOrNull = (
   probableNumberOrNull: string | undefined | number | null,
 ): number | null => {
-  if (canBeCastAsIntegerOrNull(probableNumberOrNull) === false) {
+  if (canBeCastAsNumberOrNull(probableNumberOrNull) === false) {
     throw new Error('Cannot cast to number or null');
   }
 

packages/twenty-front/src/utils/format/number.ts

@@ -1,2 +1,8 @@
-export const formatNumber = (value: number): string =>
-  value.toLocaleString('en-US');
+export const DEFAULT_DECIMAL_VALUE = 0;
+
+export const formatNumber = (value: number, decimals?: number): string => {
+  return value.toLocaleString('en-US', {
+    minimumFractionDigits: decimals ?? DEFAULT_DECIMAL_VALUE,
+    maximumFractionDigits: decimals ?? DEFAULT_DECIMAL_VALUE,
+  });
+};