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

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 
 const StyledEllipsisDisplay = styled.div<{ maxWidth?: number }>`
   max-width: ${({ maxWidth }) => maxWidth ?? '100%'};
@@ -19,7 +19,7 @@ export const EllipsisDisplay = ({
   maxWidth,
   className,
 }: EllipsisDisplayProps) => (
-  <StyledEllipsisDisplay style={{ maxWidth }} className={className}>
+  <StyledEllipsisDisplay maxWidth={maxWidth} className={className}>
     {children}
   </StyledEllipsisDisplay>
 );

packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx

@@ -1,27 +1,39 @@
 import { MouseEvent } from 'react';
-import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
+import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js';
 
 import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
-
-import { EllipsisDisplay } from './EllipsisDisplay';
+import { isDefined } from '~/utils/isDefined';
 
 type PhoneDisplayProps = {
   value: string | null;
 };
 
-export const PhoneDisplay = ({ value }: PhoneDisplayProps) => (
-  <EllipsisDisplay>
-    {value && isValidPhoneNumber(value) ? (
-      <ContactLink
-        href={parsePhoneNumber(value, 'FR')?.getURI()}
-        onClick={(event: MouseEvent<HTMLElement>) => {
-          event.stopPropagation();
-        }}
-      >
-        {parsePhoneNumber(value, 'FR')?.formatNational() || value}
-      </ContactLink>
-    ) : (
-      <ContactLink href="#">{value}</ContactLink>
-    )}
-  </EllipsisDisplay>
-);
+// TODO: see if we can find a faster way to format the phone number
+export const PhoneDisplay = ({ value }: PhoneDisplayProps) => {
+  if (!isDefined(value)) {
+    return <ContactLink href="#">{value}</ContactLink>;
+  }
+
+  let parsedPhoneNumber: PhoneNumber | null = null;
+
+  try {
+    // TODO: parse according to locale not hard coded FR
+    parsedPhoneNumber = parsePhoneNumber(value, 'FR');
+  } catch (error) {
+    return <ContactLink href="#">{value}</ContactLink>;
+  }
+
+  const URI = parsedPhoneNumber.getURI();
+  const formattedNational = parsedPhoneNumber?.formatNational();
+
+  return (
+    <ContactLink
+      href={URI}
+      onClick={(event: MouseEvent<HTMLElement>) => {
+        event.stopPropagation();
+      }}
+    >
+      {formattedNational || value}
+    </ContactLink>
+  );
+};

packages/twenty-front/src/modules/ui/field/display/components/__stories__/EllipsisDisplay.stories.tsx

@@ -1,20 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
-
-import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
-
-const meta: Meta = {
-  title: 'UI/Input/EllipsisDisplay/EllipsisDisplay',
-  component: EllipsisDisplay,
-  decorators: [ComponentDecorator],
-  args: {
-    maxWidth: 100,
-    children: 'This is a long text that should be truncated',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof EllipsisDisplay>;
-
-export const Default: Story = {};

packages/twenty-front/src/modules/ui/field/display/components/__stories__/perf/EllipsisDisplay.perf.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
@@ -19,6 +19,10 @@ const meta: Meta = {
 
 export default meta;
 
+type Story = StoryObj<typeof EllipsisDisplay>;
+
+export const Default: Story = {};
+
 export const Performance = getProfilingStory({
   componentName: 'EllipsisDisplay',
   averageThresholdInMs: 0.1,