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-chrome-extension/tsconfig.json

@@ -9,8 +9,8 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "paths": {
-      "@/*": ["packages/twenty-chrome-extension/src/options/modules/*"],
-      "~/*": ["packages/twenty-chrome-extension/src/*"]
+      "@/*": ["./src/options/modules/*"],
+      "~/*": ["./src/*"]
     },
 
     /* Bundler mode */

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": [

packages/twenty-server/package.json

@@ -74,6 +74,8 @@
     "@types/react": "^18.2.39",
     "@types/unzipper": "^0",
     "rimraf": "^5.0.5",
+    "twenty-emails": "workspace:*",
+    "twenty-shared": "workspace:*",
     "typescript": "5.3.3"
   },
   "engines": {

packages/twenty-server/tsconfig.json

@@ -25,9 +25,9 @@
     "resolveJsonModule": true,
     "types": ["jest", "node"],
     "paths": {
-      "src/*": ["packages/twenty-server/src/*"],
-      "test/*": ["packages/twenty-server/test/*"],
-      "twenty-emails": ["packages/twenty-emails/dist"]
+      "src/*": ["./src/*"],
+      "test/*": ["./test/*"],
+      "twenty-emails": ["../twenty-emails/dist"]
     }
   },
   "ts-node": {

packages/twenty-ui/jest.config.ts

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

packages/twenty-ui/package.json

@@ -10,6 +10,9 @@
       "require": "./dist/index.cjs"
     }
   },
+  "dependencies": {
+    "twenty-shared": "workspace:*"
+  },
   "scripts": {
     "build": "npx vite build"
   }

packages/twenty-ui/src/theme/provider/ThemeProvider.tsx

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { ReactNode } from 'react';
 
 import { ThemeContextProvider } from '@ui/theme/provider/ThemeContextProvider';
 

packages/twenty-ui/tsconfig.json

@@ -10,7 +10,7 @@
     "types": ["node"],
     "outDir": "../../.cache/tsc",
     "paths": {
-      "@ui/*": ["packages/twenty-ui/src/*"]
+      "@ui/*": ["./src/*"]
     }
   },
   "files": [],

packages/twenty-ui/tsconfig.spec.json

@@ -2,7 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "baseUrl": "../..",
+    "paths": {
+      "@ui/*": ["./packages/twenty-ui/src/*"]
+    }
   },
   "include": [
     "vite.config.ts",