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-ui/src/utilities/dimensions/components/ComputeNodeDimensions.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { isDefined } from '@ui/utilities';
+import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
+
+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-ui/src/utilities/index.ts

@@ -5,9 +5,10 @@ export * from './animation/components/AnimatedFadeOut';
 export * from './animation/components/AnimatedTextWord';
 export * from './animation/components/AnimatedTranslation';
 export * from './color/utils/stringToHslColor';
-export * from './getDisplayValueByUrlType';
+export * from './dimensions/components/ComputeNodeDimensions';
 export * from './image/getImageAbsoluteURI';
 export * from './isDefined';
 export * from './screen-size/hooks/useScreenSize';
 export * from './state/utils/createState';
 export * from './types/Nullable';
+export * from './utils/getDisplayValueByUrlType';

packages/twenty-ui/src/utilities/utils/getDisplayValueByUrlType.ts

@@ -1,5 +1,5 @@
 import { LinkType } from '@ui/navigation/link';
-import { isDefined } from './isDefined';
+import { isDefined } from '../isDefined';
 
 type getUrlDisplayValueByUrlTypeProps = {
   type: LinkType;