Refactored all FieldDisplay types for performance optimization (#5768)

This PR is the second part of
https://github.com/twentyhq/twenty/pull/5693.

It optimizes all remaining field types.

The observed improvements are :
- x2 loading time improvement on table rows
- more consistent render time

Here's a summary of measured improvements, what's given here is the
average of hundreds of renders with a React Profiler component. (in our
Storybook performance stories)

| Component | Before (µs) | After (µs) |
| ----- | ------------- | --- |
| TextFieldDisplay | 127 | 83 |
| EmailFieldDisplay | 117 | 83 |
| NumberFieldDisplay | 97 | 56 |
| DateFieldDisplay | 240 | 52 |
| CurrencyFieldDisplay | 236 | 110 |
| FullNameFieldDisplay | 131 | 85 |
| AddressFieldDisplay | 118 | 81 |
| BooleanFieldDisplay | 130 | 100 |
| JSONFieldDisplay | 248 | 49 |
| LinksFieldDisplay | 1180 | 140 |
| LinkFieldDisplay | 140 | 78 |
| MultiSelectFieldDisplay | 770 | 130 |
| SelectFieldDisplay | 230 | 87 |

packages/twenty-ui/src/display/chip/components/Chip.module.css

@@ -1,84 +0,0 @@
-.label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chip {
-  --chip-horizontal-padding: calc(var(--twentycrm-spacing-multiplicator) * 1px);
-  --chip-vertical-padding: calc(var(--twentycrm-spacing-multiplicator) * 1px);
-
-  align-items: center;
-  border-radius: var(--twentycrm-border-radius-sm);
-
-  color: var(--twentycrm-font-color-secondary);
-
-  display: inline-flex;
-  justify-content: center;
-
-  gap: calc(var(--twentycrm-spacing-multiplicator) * 1px);
-  height: calc(var(--twentycrm-spacing-multiplicator) * 3px);
-
-  max-width: calc(100% - var(--chip-horizontal-padding) * 2px);
-  overflow: hidden;
-
-  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
-
-  user-select: none;
-}
-
-.disabled {
-  cursor: not-allowed;
-
-  color: var(--twentycrm-font-color-light);
-
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.accent-text-primary {
-  color: var(--twentycrm-font-color-primary);
-}
-
-.accent-text-secondary {
-  font-weight: var(--twentycrm-font-weight-medium);
-}
-
-.size-large {
-  height: calc(var(--twentycrm-spacing-multiplicator) * 4px);
-}
-
-.variant-regular:hover {
-  background-color: var(--twentycrm-background-transparent-light);
-}
-
-.variant-regular:active {
-  background-color: var(--twentycrm-background-transparent-medium);
-}
-
-.variant-highlighted {
-  background-color: var(--twentycrm-background-transparent-light);
-}
-
-.variant-highlighted:hover {
-  background-color: var(--twentycrm-background-transparent-medium);
-}
-
-.variant-highlighted:active {
-  background-color: var(--twentycrm-background-transparent-strong);
-}
-
-.variant-rounded {
-  --chip-horizontal-padding: calc(var(--twentycrm-spacing-multiplicator) * 2px);
-  --chip-vertical-padding: 1px;
-
-  background-color: var(--twentycrm-background-transparent-light);
-  border: 1px solid var(--twentycrm-border-color-medium);
-  border-radius: 50px;
-}
-
-.variant-transparent {
-  cursor: inherit;
-}

packages/twenty-ui/src/display/chip/components/Chip.tsx

@@ -1,10 +1,9 @@
 import { MouseEvent, ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { Theme, withTheme } from '@emotion/react';
+import { styled } from '@linaria/react';
 
 import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
 
-import styles from './Chip.module.css';
-
 export enum ChipSize {
   Large = 'large',
   Small = 'small',
@@ -34,9 +33,86 @@ type ChipProps = {
   rightComponent?: ReactNode;
   className?: string;
   onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  to?: string;
 };
 
+const StyledContainer = withTheme(styled.div<
+  Pick<
+    ChipProps,
+    'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant'
+  > & { theme: Theme }
+>`
+  --chip-horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --chip-vertical-padding: ${({ theme }) => theme.spacing(1)};
+
+  text-decoration: none;
+  align-items: center;
+
+  color: ${({ theme, accent, disabled }) =>
+    disabled
+      ? theme.font.color.light
+      : accent === ChipAccent.TextPrimary
+        ? theme.font.color.primary
+        : theme.font.color.secondary};
+
+  cursor: ${({ clickable, disabled, variant }) =>
+    variant === ChipVariant.Transparent
+      ? 'inherit'
+      : clickable
+        ? 'pointer'
+        : disabled
+          ? 'not-allowed'
+          : 'inherit'};
+
+  display: inline-flex;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(3)};
+  max-width: ${({ maxWidth }) =>
+    maxWidth
+      ? `calc(${maxWidth}px - 2 * var(--chip-horizontal-padding))`
+      : '200px'};
+
+  overflow: hidden;
+  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
+  user-select: none;
+
+  font-weight: ${({ theme, accent }) =>
+    accent === ChipAccent.TextSecondary ? theme.font.weight.medium : 'inherit'};
+
+  &:hover {
+    background-color: ${({ theme, variant, disabled }) =>
+      variant === ChipVariant.Regular && !disabled
+        ? theme.background.transparent.light
+        : variant === ChipVariant.Highlighted
+          ? theme.background.transparent.medium
+          : 'inherit'};
+  }
+
+  &:active {
+    background-color: ${({ theme, disabled, variant }) =>
+      variant === ChipVariant.Regular && !disabled
+        ? theme.background.transparent.medium
+        : variant === ChipVariant.Highlighted
+          ? theme.background.transparent.strong
+          : 'inherit'};
+  }
+
+  background-color: ${({ theme, variant }) =>
+    variant === ChipVariant.Highlighted
+      ? theme.background.transparent.light
+      : variant === ChipVariant.Rounded
+        ? theme.background.transparent.lighter
+        : 'inherit'};
+
+  border: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded
+      ? `1px solid ${theme.border.color.medium}`
+      : 'none'};
+
+  border-radius: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? '50px' : theme.border.radius.sm};
+`);
+
 export const Chip = ({
   size = ChipSize.Small,
   label,
@@ -49,30 +125,21 @@ export const Chip = ({
   onClick,
 }: ChipProps) => {
   return (
-    <div
+    <StyledContainer
       data-testid="chip"
-      className={clsx({
-        [styles.chip]: true,
-        [styles.clickable]: clickable,
-        [styles.disabled]: disabled,
-        [styles.accentTextPrimary]: accent === ChipAccent.TextPrimary,
-        [styles.accentTextSecondary]: accent === ChipAccent.TextSecondary,
-        [styles.sizeLarge]: size === ChipSize.Large,
-        [styles.variantRegular]: variant === ChipVariant.Regular,
-        [styles.variantHighlighted]: variant === ChipVariant.Highlighted,
-        [styles.variantRounded]: variant === ChipVariant.Rounded,
-        [styles.variantTransparent]: variant === ChipVariant.Transparent,
-      })}
+      accent={accent}
+      clickable={clickable}
+      disabled={disabled}
+      size={size}
+      variant={variant}
       onClick={onClick}
     >
       {leftComponent}
-      <div className={styles.label}>
-        <OverflowingTextWithTooltip
-          size={size === ChipSize.Large ? 'large' : 'small'}
-          text={label}
-        />
-      </div>
+      <OverflowingTextWithTooltip
+        size={size === ChipSize.Large ? 'large' : 'small'}
+        text={label}
+      />
       {rightComponent}
-    </div>
+    </StyledContainer>
   );
 };