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>

.github/workflows/ci-front.yaml

@@ -133,7 +133,7 @@ jobs:
         run: npx nx reset:env twenty-front
       - name: Run storybook tests
         if: steps.changed-files.outputs.any_changed == 'true'
-        run: npx nx storybook:serve-and-test:static:performance twenty-front
+        run: npx nx run twenty-front:storybook:serve-and-test:static:performance
   front-chromatic-deployment:
     if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
     needs: front-sb-build

nx.json

@@ -108,7 +108,6 @@
     "storybook:build": {
       "executor": "nx:run-commands",
       "cache": true,
-      "dependsOn": ["^build"],
       "inputs": ["^default", "excludeTests"],
       "outputs": ["{projectRoot}/{options.output-dir}"],
       "options": {
@@ -192,16 +191,7 @@
       "executor": "nx:run-commands",
       "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}'"
-        ],
-        "port": 6006
-      }
-    },
-    "storybook:serve-and-test:static:performance": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:dev {projectName} --configuration=performance --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test:no-coverage {projectName} --port={args.port} --configuration=performance'"
+          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port} --configuration={args.performance}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'"
         ],
         "port": 6006
       }

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/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';

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

@@ -1,7 +1,6 @@
-import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-
-import { isDefined } from '~/utils/isDefined';
+import { isDefined } from '@ui/utilities';
+import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
 
 type ComputeNodeDimensionsProps = {
   children: (

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;