Migrate to twenty-ui - utilities/dimensions (#7949)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7539](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7539).

 --- 

### Description

- Move the utilities/dimensions from twenty-front to twenty-ui and
update imports\

Fixes twentyhq/private-issues#79

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/.storybook/main.ts

@@ -50,7 +50,11 @@ const config: StorybookConfig = {
     const { mergeConfig } = await import('vite');
 
     return mergeConfig(config, {
-      // Add dependencies to pre-optimization
+      resolve: {
+        alias: {
+          'react-dom/client': 'react-dom/profiling',
+        },
+      },
     });
   },
 };

packages/twenty-front/project.json

@@ -70,6 +70,12 @@
     "storybook:build": {
       "options": {
         "env": { "NODE_OPTIONS": "--max_old_space_size=6500" }
+      },
+      "configurations": {
+        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
+        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
+        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
+        "performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
       }
     },
     "storybook:serve:dev": {
@@ -82,7 +88,13 @@
       }
     },
     "storybook:serve:static": {
-      "options": { "port": 6006 }
+      "options": { "port": 6006 },
+      "configurations": {
+        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
+        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
+        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
+        "performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
+      }
     },
     "storybook:coverage": {
       "configurations": {
@@ -104,9 +116,6 @@
     },
     "storybook:serve-and-test:static": {
       "options": {
-        "commands": [
-          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'"
-        ],
         "port": 6006
       },
       "configurations": {
@@ -116,15 +125,6 @@
         "performance": { "scope": "performance" }
       }
     },
-    "storybook:serve-and-test:static:performance": {},
-    "storybook:test:no-coverage": {
-      "configurations": {
-        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
-        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
-        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
-        "performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
-      }
-    },
     "graphql:generate": {
       "executor": "nx:run-commands",
       "defaultConfiguration": "data",

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

@@ -1,10 +1,10 @@
-import { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
+import { ChangeEvent } from 'react';
 
 import { StyledTextInput as UIStyledTextInput } from '@/ui/field/input/components/TextInput';
-import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 
+import { ComputeNodeDimensions } from 'twenty-ui';
 import { InputHotkeyScope } from '../types/InputHotkeyScope';
 
 export type EntityTitleDoubleTextInputProps = {

packages/twenty-front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx

@@ -1,54 +0,0 @@
-import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
-import styled from '@emotion/styled';
-
-import { isDefined } from '~/utils/isDefined';
-
-type ComputeNodeDimensionsProps = {
-  children: (
-    dimensions: { height: number; width: number } | undefined,
-  ) => ReactNode;
-  node?: ReactNode;
-};
-
-const StyledNodeWrapper = styled.span`
-  pointer-events: none;
-  position: fixed;
-  visibility: hidden;
-`;
-
-export const ComputeNodeDimensions = ({
-  children,
-  node = children(undefined),
-}: ComputeNodeDimensionsProps) => {
-  const nodeWrapperRef = useRef<HTMLSpanElement>(null);
-  const [nodeDimensions, setNodeDimensions] = useState<
-    | {
-        width: number;
-        height: number;
-      }
-    | undefined
-  >(undefined);
-
-  useLayoutEffect(() => {
-    if (!nodeWrapperRef.current) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(() => {
-      if (isDefined(nodeWrapperRef.current)) {
-        setNodeDimensions({
-          width: nodeWrapperRef.current.offsetWidth,
-          height: nodeWrapperRef.current.offsetHeight,
-        });
-      }
-    });
-    resizeObserver.observe(nodeWrapperRef.current);
-    return () => resizeObserver.disconnect();
-  }, [nodeWrapperRef]);
-
-  return (
-    <>
-      <StyledNodeWrapper ref={nodeWrapperRef}>{node}</StyledNodeWrapper>
-      {nodeDimensions && children(nodeDimensions)}
-    </>
-  );
-};

packages/twenty-front/src/testing/profiling/components/ProfilingReporter.tsx

@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
 import styled from '@emotion/styled';
+import { useMemo } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { PROFILING_REPORTER_DIV_ID } from '~/testing/profiling/constants/ProfilingReporterDivId';