Fix eslint-plugin-twenty (#1640)

* Fixed color rule

* Fixed naming

* Fix effect component rule

* Deactivated broken rules

* Fixed lint

* Complete eslint-plugin-twenty work

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+
+type ComputeNodeDimensionsEffectProps = {
+  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),
+}: ComputeNodeDimensionsEffectProps) => {
+  const nodeWrapperRef = useRef<HTMLSpanElement>(null);
+  const [nodeDimensions, setNodeDimensions] = useState<
+    | {
+        width: number;
+        height: number;
+      }
+    | undefined
+  >(undefined);
+
+  useEffect(() => {
+    nodeWrapperRef.current &&
+      setNodeDimensions({
+        width: nodeWrapperRef.current.offsetWidth,
+        height: nodeWrapperRef.current.offsetHeight,
+      });
+  }, [node]);
+
+  return (
+    <>
+      <StyledNodeWrapper ref={nodeWrapperRef}>{node}</StyledNodeWrapper>
+      {children(nodeDimensions)}
+    </>
+  );
+};