chore: setup twenty-ui absolute path alias (#4732)

Split from https://github.com/twentyhq/twenty/pull/4518

- Setup `@ui/*` as an internal alias to reference `twenty-ui/src`.
- Configures twenty-front to understand the `@ui/*` alias on development
mode, so twenty-ui can be hot reloaded.
- When building on production mode, twenty-front needs twenty-ui to be
built beforehand (which is automatic with the `dependsOn` option).
- Configures twenty-front to understand the `@ui/*` alias when launching
tests, so there is no need to re-build twenty-ui for tests.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-ui/jest.config.ts

@@ -1,9 +1,8 @@
-import { JestConfigWithTsJest } from 'ts-jest';
-
-const jestConfig: JestConfigWithTsJest = {
+export default {
   displayName: 'twenty-ui',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['./setupTests.ts'],
+  testEnvironment: 'jsdom',
   transformIgnorePatterns: ['../../node_modules/'],
   transform: {
     '^.+\\.[tj]sx?$': [
@@ -17,7 +16,7 @@ const jestConfig: JestConfigWithTsJest = {
     ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/packages/twenty-ui',
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  coverageDirectory: './coverage',
 };
 
-export default jestConfig;

packages/twenty-ui/package.json

@@ -1,12 +1,16 @@
 {
   "name": "twenty-ui",
   "version": "0.0.1",
-  "main": "./index.js",
-  "module": "./index.mjs",
-  "typings": "./index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "scripts": {
-    "nx": "NX_DEFAULT_PROJECT=twenty-ui node ../../node_modules/nx/bin/nx.js",
-    "start": "storybook dev -p 6006",
-    "build": "npx vite build"
+    "build": "vite build"
   }
 }

packages/twenty-ui/tsconfig.json

@@ -1,15 +1,16 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "commonjs",
-    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
-    "noImplicitOverride": true,
     "esModuleInterop": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "jsx": "react-jsx"
+    "noEmit": true,
+    "types": ["node"],
+    "paths": {
+      "@ui/*": ["packages/twenty-ui/src/*"]
+    }
   },
   "files": [],
   "include": [],

packages/twenty-ui/tsconfig.lib.json

@@ -1,8 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": ["node"]
+    "outDir": "../../dist/out-tsc"
   },
   "exclude": [
     "**/*.spec.ts",

packages/twenty-ui/tsconfig.spec.json

@@ -7,11 +7,10 @@
   },
   "include": [
     "jest.config.ts",
+    "setupTests.ts",
     "src/**/*.d.ts",
     "src/**/*.spec.ts",
-    "src/**/*.spec.tsx",
     "src/**/*.test.ts",
-    "src/**/*.test.tsx",
     "vite.config.ts"
   ]
 }

packages/twenty-ui/vite.config.ts

@@ -3,6 +3,7 @@ import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import react from '@vitejs/plugin-react-swc';
 import * as path from 'path';
 import { defineConfig } from 'vite';
+import checker from 'vite-plugin-checker';
 import dts from 'vite-plugin-dts';
 
 export default defineConfig({
@@ -14,16 +15,15 @@ export default defineConfig({
     nxViteTsPaths(),
     dts({
       entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
-      skipDiagnostics: true,
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+    checker({
+      typescript: {
+        tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+      },
     }),
   ],
 
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-
   // Configuration for building your library.
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {