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/display/components/SelectDisplay.tsx

@@ -4,22 +4,8 @@ type SelectDisplayProps = {
   color: ThemeColor | 'transparent';
   label: string;
   Icon?: IconComponent;
-  isUsedInForm?: boolean;
 };
 
-export const SelectDisplay = ({
-  color,
-  label,
-  Icon,
-  isUsedInForm,
-}: SelectDisplayProps) => {
-  return (
-    <Tag
-      preventShrink
-      color={color}
-      text={label}
-      Icon={Icon}
-      preventPadding={isUsedInForm}
-    />
-  );
+export const SelectDisplay = ({ color, label, Icon }: SelectDisplayProps) => {
+  return <Tag preventShrink color={color} text={label} Icon={Icon} />;
 };

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

@@ -1,15 +1,18 @@
-import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
+import { useEffect, useState } from 'react';
 
 import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
 
-const StyledEditableBooleanFieldContainer = styled.div`
+const StyledEditableBooleanFieldContainer = styled.div<{ readonly?: boolean }>`
   align-items: center;
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
   display: flex;
 
   height: 100%;
   width: 100%;
+
+  color: ${({ theme, readonly }) =>
+    readonly ? theme.font.color.tertiary : theme.font.color.primary};
 `;
 
 type BooleanInputProps = {
@@ -39,6 +42,7 @@ export const BooleanInput = ({
   return (
     <StyledEditableBooleanFieldContainer
       onClick={readonly ? undefined : handleClick}
+      readonly={readonly}
       data-testid={testId}
     >
       <BooleanDisplay value={internalValue} />

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}>