Feat/performance-refactor-styled-component (#5516)

In this PR I'm optimizing a whole RecordTableCell in real conditions
with a complex RelationFieldDisplay component :
- Broke down getObjectRecordIdentifier into multiple utils
- Precompute memoized function for getting chip data per field with
useRecordChipDataGenerator()
- Refactored RelationFieldDisplay
- Use CSS modules where performance is needed instead of styled
components
- Create a CSS theme with global CSS variables to be used by CSS modules

packages/twenty-front/.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { Preview } from '@storybook/react';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
@@ -31,6 +32,11 @@ const preview: Preview = {
     (Story) => {
       const theme = useDarkMode() ? THEME_DARK : THEME_LIGHT;
 
+      useEffect(() => {
+        document.documentElement.className =
+          theme.name === 'dark' ? 'dark' : 'light';
+      }, [theme]);
+
       return (
         <ThemeProvider theme={theme}>
           <Story />

packages/twenty-front/.storybook/test-runner-jest.config.js

@@ -11,5 +11,5 @@ export default {
   /** Add your own overrides below
    * @see https://jestjs.io/docs/configuration
    */
-  testTimeout: 2 * MINUTES_IN_MS,
+  testTimeout: 5 * MINUTES_IN_MS,
 };