Finalize the readonly for a few form fields #1 (#9524)

There are many fields so I will cut my work in several small PRs.

Here, I updated the following fields:

- [x] `FormBooleanFieldInput`
- [x] `FormCurrencyFieldInput`
- [x] `FormNumberFieldInput`
- [x] `FormDateFieldInput`
- [x] `FormDateTimeFieldInput`
- [x] `FormMultiSelectFieldInput`
- [x] `FormSelectFieldInput`

The updates in the components are relatively small. I wrote Storybook
tests, and this is why the PR is quite big.

The changes in the components should mostly the same.

I added a disabled state to some inputs.

I created a specialized `VariableChip` as its styles started diverging
from the original `SortOrFilterChip`.

packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx

@@ -9,6 +9,10 @@ export const StyledTextInput = styled.input`
   margin: 0;
   ${TEXT_INPUT_STYLE}
   width: 100%;
+
+  &:disabled {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
 `;
 
 type TextInputProps = {
@@ -25,6 +29,7 @@ type TextInputProps = {
   onChange?: (newText: string) => void;
   copyButton?: boolean;
   shouldTrim?: boolean;
+  disabled?: boolean;
 };
 
 const getValue = (value: string, shouldTrim: boolean) => {
@@ -49,6 +54,7 @@ export const TextInput = ({
   onChange,
   copyButton = true,
   shouldTrim = true,
+  disabled,
 }: TextInputProps) => {
   const [internalText, setInternalText] = useState(value);
 
@@ -85,6 +91,7 @@ export const TextInput = ({
         onChange={handleChange}
         autoFocus={autoFocus}
         value={internalText}
+        disabled={disabled}
       />
       {copyButton && (
         <div ref={copyRef}>