Added Linaria for performance optimization (#5693)

- Added Linaria to have compiled CSS on our optimized field displays
- Refactored mocks for performance stories on fields
- Refactored generateRecordChipData into a global context, computed only
when we fetch object metadata items.
- Refactored ChipFieldDisplay 
- Refactored PhoneFieldDisplay

packages/twenty-front/src/modules/ui/navigation/link/components/ContactLink.tsx

@@ -1,43 +1,47 @@
 import * as React from 'react';
-import { Link as ReactLink } from 'react-router-dom';
-import styled from '@emotion/styled';
+import { Theme, withTheme } from '@emotion/react';
+import { styled } from '@linaria/react';
+
+const StyledClickableLink = withTheme(styled.a<{
+  theme: Theme;
+  maxWidth?: number;
+}>`
+  color: inherit;
+  overflow: hidden;
+  text-decoration: underline;
+  text-decoration-color: ${({ theme }) => theme.border.color.strong};
+  text-overflow: ellipsis;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+
+  max-width: ${({ maxWidth }) => maxWidth ?? '100%'};
+
+  &:hover {
+    text-decoration-color: ${({ theme }) => theme.font.color.primary};
+  }
+`);
 
 type ContactLinkProps = {
-  className?: string;
   href: string;
   children?: React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  maxWidth?: number;
 };
 
-const StyledClickable = styled.div`
-  display: flex;
-  overflow: hidden;
-  white-space: nowrap;
-
-  a {
-    color: inherit;
-    overflow: hidden;
-    text-decoration: underline;
-    text-decoration-color: ${({ theme }) => theme.border.color.strong};
-    text-overflow: ellipsis;
-
-    &:hover {
-      text-decoration-color: ${({ theme }) => theme.font.color.primary};
-    }
-  }
-`;
-
 export const ContactLink = ({
-  className,
   href,
   children,
   onClick,
+  maxWidth,
 }: ContactLinkProps) => (
-  <div>
-    <StyledClickable className={className}>
-      <ReactLink target="_blank" onClick={onClick} to={href}>
-        {children}
-      </ReactLink>
-    </StyledClickable>
-  </div>
+  <StyledClickableLink
+    maxWidth={maxWidth}
+    target="_blank"
+    onClick={onClick}
+    href={href}
+  >
+    {children}
+  </StyledClickableLink>
 );

packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx

@@ -10,7 +10,6 @@ const meta: Meta<typeof ContactLink> = {
   component: ContactLink,
   decorators: [ComponentWithRouterDecorator],
   args: {
-    className: 'ContactLink',
     href: '/test',
     children: 'Contact Link',
   },