Commit Graph

6 Commits

Author SHA1 Message Date
03b3c8a67a Refactored all FieldDisplay types for performance optimization (#5768)
This PR is the second part of
https://github.com/twentyhq/twenty/pull/5693.

It optimizes all remaining field types.

The observed improvements are :
- x2 loading time improvement on table rows
- more consistent render time

Here's a summary of measured improvements, what's given here is the
average of hundreds of renders with a React Profiler component. (in our
Storybook performance stories)

| Component | Before (µs) | After (µs) |
| ----- | ------------- | --- |
| TextFieldDisplay | 127 | 83 |
| EmailFieldDisplay | 117 | 83 |
| NumberFieldDisplay | 97 | 56 |
| DateFieldDisplay | 240 | 52 |
| CurrencyFieldDisplay | 236 | 110 |
| FullNameFieldDisplay | 131 | 85 |
| AddressFieldDisplay | 118 | 81 |
| BooleanFieldDisplay | 130 | 100 |
| JSONFieldDisplay | 248 | 49 |
| LinksFieldDisplay | 1180 | 140 |
| LinkFieldDisplay | 140 | 78 |
| MultiSelectFieldDisplay | 770 | 130 |
| SelectFieldDisplay | 230 | 87 |
2024-06-12 18:36:25 +02:00
9f83cc1426 refactor: move @/ui/display/icon to twenty-ui (#4820)
Split from https://github.com/twentyhq/twenty/pull/4518

Part of https://github.com/twentyhq/twenty/issues/4766
2024-04-12 15:30:48 +02:00
c5349291c8 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>
2024-04-04 15:38:01 +02:00
eef1211463 chore: include react components in twenty-ui test config (#4709)
Split from https://github.com/twentyhq/twenty/pull/4518

Part of https://github.com/twentyhq/twenty/issues/4766

- Re-generates some of the twenty-ui test and storybook config with Nx
- Includes tsx files in twenty-ui tests and compiles them with swc

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-04-04 12:30:49 +02:00
8ae6af6bd7 refactor: move createState to twenty-ui (#4716)
Split from https://github.com/twentyhq/twenty/pull/4518

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
2024-04-01 13:22:51 +02:00
8c0680b918 Setup the foundation for Twenty UI library. (#4423)
* feat: create a separate package for twenty-ui, extract the pill component with hard-coded theme values into it, and use the component inside twenty-front to complete the setup

* feat: extract the light and the dark theme into twenty-ui and update the AppThemeProvider component inside twenty-front to consume themes from twenty-ui

* fix: create a decorator inside preview.tsx to provide a default theme to storybook development server

* fix: remove redundant type declarations and revert back the naming convention for theme declarations

* fix: introduce a default value for pill label within the story for development server

* fix: introduce the nx script into package.json for twenty-ui and resolve imports for theme type within the package

* fix: remove the pill component from the twenty-front package along with the story for it

* fix: revert the package versions to those before running the nx cli command for storybook init

* feat: update readme to include details for building the ui library and starting the storybook development server

* fix: include details about twenty-ui inside jest.config for twenty-front to complete front-jest job

* - Added preview head for font
- Added theme addon for light/dark switch
- Added ComponentDecorator

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-03-13 14:21:18 +01:00