Fix import twenty-shared (#9754)

In this PR:
- removing rootDir / baseUrl from any tsconfig.json
- we need to keep it in tsconfig.spec.json and also specify rootDir in
jest.config.ts moduleMapper because of the way nx jest executor works
(automatically moving back to root)
- we need to explictly specify the depencies to twenty-shared /
twenty-emails (built packages) in packages package.json to help nx
understand dependencies

packages/twenty-front/jest.config.ts

@@ -27,7 +27,9 @@ const jestConfig: JestConfigWithTsJest = {
     '\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
       '<rootDir>/__mocks__/imageMock.js',
     '\\.css$': '<rootDir>/__mocks__/styleMock.js',
-    ...pathsToModuleNameMapper(tsConfig.compilerOptions.paths),
+    ...pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
+      prefix: '<rootDir>/../../',
+    }),
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   extensionsToTreatAsEsm: ['.ts', '.tsx'],

packages/twenty-front/package.json

@@ -49,7 +49,8 @@
     "docx": "^9.1.0",
     "file-saver": "^2.0.5",
     "recoil-sync": "^0.2.0",
-    "transliteration": "^2.3.5"
+    "transliteration": "^2.3.5",
+    "twenty-shared": "workspace:*"
   },
   "devDependencies": {
     "@types/file-saver": "^2"

packages/twenty-front/src/modules/action-menu/actions/record-actions/workflow-run-record-actions/hooks/useWorkflowRunRecordActions.tsx

@@ -13,7 +13,6 @@ import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
 import { useRecoilValue } from 'recoil';
 import { capitalize } from 'twenty-shared';
 import { IconSettingsAutomation, isDefined } from 'twenty-ui';
-
 export const useWorkflowRunRecordActions = ({
   objectMetadataItem,
 }: {

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepHeader.tsx

@@ -1,8 +1,8 @@
 import { TextInput } from '@/ui/field/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'packages/twenty-ui';
 import { useState } from 'react';
+import { IconComponent } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 
 const StyledHeader = styled.div`

packages/twenty-front/tsconfig.json

@@ -21,10 +21,10 @@
     "forceConsistentCasingInFileNames": true,
     "outDir": "../../.cache/tsc",
     "paths": {
-      "@/*": ["packages/twenty-front/src/modules/*"],
-      "~/*": ["packages/twenty-front/src/*"],
-      "twenty-ui": ["packages/twenty-ui/src/index.ts"],
-      "@ui/*": ["packages/twenty-ui/src/*"]
+      "@/*": ["./src/modules/*"],
+      "~/*": ["./src/*"],
+      "twenty-ui": ["../twenty-ui/src/index.ts"],
+      "@ui/*": ["../twenty-ui/src/*"]
     }
   },
   "files": [],

packages/twenty-front/tsconfig.spec.json

@@ -2,11 +2,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "types": ["jest", "node"],
+    "baseUrl": "../..",
     "paths": {
-     "@/*": ["packages/twenty-front/src/modules/*"],
-      "~/*": ["packages/twenty-front/src/*"],
-      "twenty-ui": ["packages/twenty-ui/src/index.ts"],
-      "@ui/*": ["packages/twenty-ui/src/*"]
+     "@/*": ["./packages/twenty-front/src/modules/*"],
+      "~/*": ["./packages/twenty-front/src/*"],
+      "twenty-ui": ["./packages/twenty-ui/src/index.ts"],
+      "@ui/*": ["./packages/twenty-ui/src/*"]
     }
   },
   "include": [