[MONOREPO] Twenty-ui as a package #9941

prastoin · 2025-01-30T17:09:56Z

Introduction

In this PR we've migrated from a TypeScriptproject dependency using custom paths to a local package dependency, now consuming the built version of twenty-ui and added it as an external third party dependency provisioned by yarn workspaces

Encountered a bug between built and code types

When compiling your TypeScript if you use custom module import paths, they will appear in built project too.
But won't be resolvable.
Enters in scene third party library solutions such as resolve-alias entry in vite config ( requires manual configuration) or in our case vite-tsconfig-paths

When you don't resolve custom imports in your compiled TypeScript project it might have side effect on dependent project importing your type. They will might infer types from incorrectly fixed by TypeScript types ( from my understanding ). Which can mutate some field from optional to required, bug we encountered on the IconComponent

Closes twentyhq/core-team-issues#281

prastoin · 2025-01-30T17:25:40Z

packages/twenty-ui/tsconfig.build.json

@@ -1,5 +1,11 @@
 {
  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,


Context: same motivations as for #9838

greptile-apps

PR Summary

This PR migrates the project from TypeScript path aliases to using twenty-ui as a proper package dependency, focusing on improving module resolution and type inference.

Removes custom path mappings (@ui/*) from tsconfig files and replaces them with direct imports from twenty-ui package
Adds baseUrl configuration in build configs to ensure proper module resolution
Updates import statements across multiple state management files to use twenty-ui package instead of local paths
Fixes potential type inference issues where optional fields could be incorrectly marked as required in built packages
Configures twenty-ui package with declaration file generation and source maps for better type support

_{108 file(s) reviewed, 6 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts

greptile-apps · 2025-01-30T23:54:17Z

packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';

 export const isCurrentUserLoadedState = createState<boolean>({


logic: The file name in the export ('isCurrentUserLoadedState') doesn't match the file name ('isCurrentUserLoadingState.ts'). This inconsistency should be addressed.

...nty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts

greptile-apps · 2025-01-31T00:00:42Z

...s/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';

 export const viewableRecordIdState = createState<string | null>({
  key: 'activities/viewable-record-id',


logic: The key 'activities/viewable-record-id' seems misplaced since this file is in the object-record module, not activities. Should be 'object-record/viewable-record-id'.

...ront/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts

greptile-apps · 2025-01-31T00:07:38Z

packages/twenty-ui/tsconfig.build.json

+    "declaration": true,
+    "declarationMap": true,


style: Enabling both declaration and declarationMap will generate larger build artifacts. Consider if source maps are really needed for declaration files in production builds.

prastoin · 2025-01-31T18:10:41Z

Started a biggest refactor to eject from one for all barrel on the twenty-ui package a bit earlier than planned because encountered breaking changes while importing the whole barrel in jest tests and so on

Will extract the barrel ejection migration into a scoped PR for the moment POCing here

github-actions · 2025-01-31T18:10:55Z

TODOs/FIXMEs:

// TODO outsource the URL computation, should not be done within twenty-ui: packages/twenty-ui/src/display/avatar/components/Avatar.tsx
// TODO CHECK IF REMOVEABLE: packages/twenty-ui/vite.config.ts

Generated by 🚫 dangerJS against b3526f7

prastoin · 2025-01-31T18:11:34Z

The upcoming pain point that will be updating the 1k imports from twenty-ui in the twenty-front ~

prastoin · 2025-01-31T20:13:59Z

@greptileai trigger

greptile-apps

PR Summary

(updates since last review)

This PR continues the migration from TypeScript path aliases to package-based dependencies, focusing on UI components and their dependencies.

Added required baseUrl prop to Avatar components across stories and implementations to fix server URL handling
Migrated icon imports from internal @ui/display to @tabler/icons-react for better package independence
Removed barrel files (index.ts) across multiple directories to enforce explicit imports
Fixed import paths in button components to use direct paths instead of aliases (e.g., @ui/display/icon/types/IconComponent)
Removed generateBarrels.js script and related configuration as part of eliminating barrel exports

The changes maintain functionality while improving module resolution and type inference. The removal of barrel files and addition of explicit imports should make dependencies clearer and prevent potential circular dependencies.

_{107 file(s) reviewed, 21 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

packages/twenty-front/src/modules/ui/field/display/components/ActorDisplay.tsx

greptile-apps · 2025-01-31T20:16:17Z

packages/twenty-front/vite.config.ts

    optimizeDeps: {
-      exclude: ['../../node_modules/.vite', '../../node_modules/.cache'],
+      exclude: ['../../node_modules/.vite/*', '../../node_modules/.cache/*'],
    },


style: The wildcard pattern '../../node_modules/.vite/*' might not catch all subdirectories. Consider using '../../node_modules/.vite/**' for recursive matching.

greptile-apps · 2025-01-31T20:16:30Z

packages/twenty-ui/jest.config.ts

@@ -8,7 +8,7 @@ const jestConfig: JestConfigWithTsJest = {
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['./setupTests.ts'],
  testEnvironment: 'jsdom',
-  transformIgnorePatterns: ['../../node_modules/'],
+  transformIgnorePatterns: ['../../node_modules/', "./dist/"],


style: inconsistent quote style used for paths - './dist/' uses double quotes while '../../node_modules/' uses single quotes

greptile-apps · 2025-01-31T20:16:33Z

packages/twenty-ui/package.json

  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+    "./*": {
+      "import": {
+        "types": "./dist/*.d.ts",
+        "default": "./dist/*.js"
+      }
    }
  },


logic: This exports configuration may cause issues with CommonJS environments since the 'require' export was removed. Consider keeping both ESM and CommonJS exports if backward compatibility is needed.

greptile-apps · 2025-01-31T20:16:34Z

packages/twenty-ui/package.json

+    "./*": {
+      "import": {
+        "types": "./dist/*.d.ts",
+        "default": "./dist/*.js"
+      }


style: The wildcard pattern './' with dist/.d.ts could potentially expose internal implementation details. Consider being more explicit about which files can be imported.

packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx

greptile-apps · 2025-01-31T20:35:32Z

packages/twenty-ui/src/testing/constants.ts

@@ -0,0 +1 @@
+export const SERVER_URL_MOCK = 'http://localhost:3000'


style: Consider using an environment variable instead of a hardcoded URL to make the mock URL configurable across different environments

packages/twenty-ui/src/utilities/config/index.ts

greptile-apps · 2025-01-31T20:39:04Z

packages/twenty-ui/vite.config.ts

+      copyPublicDir: false,
+      minify: false,


style: disabling minification in production build could impact performance and bundle size

greptile-apps · 2025-01-31T20:39:05Z

packages/twenty-ui/vite.config.ts

+            .sync('src/**/*.{ts,tsx}', {
+              ignore: ['src/**/*.d.ts'],
+            })


style: consider also ignoring test files (*.test.ts, .spec.ts) and story files (.stories.tsx) to avoid including them in the build

Suggested change

.sync('src/**/*.{ts,tsx}', {

ignore: ['src/**/*.d.ts'],

})

.sync('src/**/*.{ts,tsx}', {

ignore: ['src/**/*.d.ts', 'src/**/*.test.{ts,tsx}', 'src/**/*.spec.{ts,tsx}', 'src/**/*.stories.{ts,tsx}'],

})

Gooood booot, exactly what I couldnt' see yesterday !

…ared` (#9967) # Introduction Avoid having multiple `isDefined` definition across our pacakges Also avoid importing `isDefined` from `twenty-ui` which exposes a huge barrel for a such little util function ## In a nutshell Removed own `isDefined.ts` definition from `twenty-ui` `twenty-front` and `twenty-server` to move it to `twenty-shared`. Updated imports for each packages, and added explicit dependencies to `twenty-shared` if not already in place Related PR #9941

prastoin · 2025-02-04T16:24:37Z

Closing this to be reopened later

prastoin added -PR: wip -PR: awaiting author labels Jan 30, 2025

prastoin self-assigned this Jan 30, 2025

prastoin force-pushed the twenty-ui-as-package-2 branch from 70fec70 to 1b6de04 Compare January 30, 2025 17:13

prastoin commented Jan 30, 2025

View reviewed changes

prastoin marked this pull request as ready for review January 30, 2025 23:51

greptile-apps bot reviewed Jan 31, 2025

View reviewed changes

prastoin marked this pull request as draft January 31, 2025 12:31

greptile-apps bot reviewed Jan 31, 2025

View reviewed changes

prastoin mentioned this pull request Feb 1, 2025

[CHORE] Avoid isDefined duplicated reference, move it to twenty-shared #9967

Merged

prastoin added 15 commits February 1, 2025 16:09

chore(front): twenty-ui as local package dep

f0c7c8c

chore(front): replace imports

6ae1f64

lint(front): fix

9e42ff2

chore(front): remove twenty-ui tsconfig paths

def6e62

chore(ui): tsconfig build declaration and declarationMap

7e36ab0

chore(shared): remove unused paths

152bad4

fix(ui): vite-tsconfig-paths needs baseurl

3256c48

fix(front): vite config tsconfigPaths for own import

18b0701

fix(front,shared): define baseUrl for build tsc project

e6d99f9

fix(front): tscongig spec invalid json

3addc85

fix(ui,front): wyw include

9634cd0

refactor(ui): eject from barrels

2447c86

chore: wip jest is running tests from dist

d093c69

chore(ui): var typo

48d1e5d

fix(ui): avoid building tests

796f00b

prastoin added 2 commits February 1, 2025 16:12

refactor(ui,front,shared): move createState utils to shared

1e1cb38

feat(ui): testing and theme barrel

da03822

prastoin force-pushed the twenty-ui-as-package-2 branch from 5fcbcf7 to da03822 Compare February 1, 2025 15:12

prastoin added 4 commits February 1, 2025 21:43

feat(ui): tablerIcon barrel

a917496

chore: wip prettier ornganize imports

8e2188f

fix(shared): export createState util

9652826

wip fix twenty-ui imports

b3526f7

prastoin closed this Feb 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MONOREPO] Twenty-ui as a package #9941

[MONOREPO] Twenty-ui as a package #9941

prastoin commented Jan 30, 2025 •

edited

Loading

prastoin Jan 30, 2025

greptile-apps bot left a comment

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 31, 2025

greptile-apps bot Jan 31, 2025

prastoin commented Jan 31, 2025

github-actions bot commented Jan 31, 2025 •

edited

Loading

prastoin commented Jan 31, 2025

prastoin commented Jan 31, 2025

greptile-apps bot left a comment

greptile-apps bot Jan 31, 2025

greptile-apps bot Jan 31, 2025

greptile-apps bot Jan 31, 2025

greptile-apps bot Jan 31, 2025

greptile-apps bot Jan 31, 2025

greptile-apps bot Jan 31, 2025

prastoin Feb 1, 2025

greptile-apps bot Jan 31, 2025

prastoin Feb 1, 2025

prastoin commented Feb 4, 2025

		@@ -0,0 +1 @@
		export const SERVER_URL_MOCK = 'http://localhost:3000'

[MONOREPO] Twenty-ui as a package #9941

[MONOREPO] Twenty-ui as a package #9941

Conversation

prastoin commented Jan 30, 2025 • edited Loading

Introduction

Encountered a bug between built and code types

prastoin Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 31, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 31, 2025

Choose a reason for hiding this comment

prastoin commented Jan 31, 2025

github-actions bot commented Jan 31, 2025 • edited Loading

TODOs/FIXMEs:

prastoin commented Jan 31, 2025

prastoin commented Jan 31, 2025

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Jan 31, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 31, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 31, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 31, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 31, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 31, 2025

Choose a reason for hiding this comment

prastoin Feb 1, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 31, 2025

Choose a reason for hiding this comment

prastoin Feb 1, 2025

Choose a reason for hiding this comment

prastoin commented Feb 4, 2025

prastoin commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 31, 2025 •

edited

Loading