Commit Graph

25 Commits

Author SHA1 Message Date
Charles Bochet 3bfdc2c83f chore(twenty-front): migrate command-menu, workflow, page-layout and UI modules from Emotion to Linaria (PR 4-6/10) (#18342)
## Summary

Continues the Emotion → Linaria migration (PR 4-6 from the [migration
plan](docs/emotion-to-linaria-migration-plan.md)). Migrates **311
files** across four module groups:

| Module | Files |
|---|---|
| command-menu | 53 |
| workflow | 84 |
| page-layout | 84 |
| UI (partial - first ~80 files) | ~80 |
| twenty-ui (TEXT_INPUT_STYLE) | 1 |
| misc (hooks, keyboard-shortcut-menu, file-upload) | ~9 |

### Migration patterns applied

- `import styled from '@emotion/styled'` → `import { styled } from
'@linaria/react'`
- `import { useTheme } from '@emotion/react'` → `import { useContext }
from 'react'` + `import { ThemeContext } from 'twenty-ui/theme'`
- `${({ theme }) => theme.X.Y.Z}` → `${themeCssVariables.X.Y.Z}` (static
CSS variables)
- `theme.spacing(N)` → `themeCssVariables.spacing[N]`
- `styled(motion.div)` → `motion.create(StyledBase)` (11 components)
- `styled(Component)<TypeParams>` → wrapper div approach for non-HTML
elements
- Multi-declaration interpolations split into one CSS property per
interpolation
- Interpolation return types fixed (`&&` → ternary `? : ''`)
- `TEXT_INPUT_STYLE` converted from function to static string constant
(backward compatible)
- Emotion `<Global>` replaced with `useEffect` style injection
- Complex runtime-dependent styles use CSS custom properties via
`style={}` prop

### After this PR

- **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI:
~44)
- **No breaking changes**: CSS variables resolve identically to the
previous Emotion theme values
2026-03-03 16:42:03 +01:00
Lucas Bordeau 3f0ee0139c Refactor record-field into ui sub-folder (#13888)
This PR prepares the refactor of record field definition and column
definition.

We need to separate the two concepts of FieldInput and FieldContext at
the cell level, and the new RecordField concept that will replace
FieldDefinition at the metadata and state level.

So we create a new ui sub-folder in the already existing record-field
folder, in order to separate those two concepts that are still very
close.
2025-08-13 11:31:39 +02:00
Félix Malfait 464a480043 Continue ESLINT9 Migration (#13795)
Might already fix #13793
2025-08-10 23:25:58 +02:00
Raphaël Bosi eba997be98 Replace hotkey scopes by focus stack (Part 6 - Remove Hotkey scopes 🫳🎤) (#13127)
# Replace hotkey scopes by focus stack (Part 6 - Remove Hotkey scopes)

This PR is the last part of a refactoring aiming to deprecate the hotkey
scopes api in favor of the new focus stack api which is more robust.
Part 1: https://github.com/twentyhq/twenty/pull/12673
Part 2: https://github.com/twentyhq/twenty/pull/12798
Part 3: https://github.com/twentyhq/twenty/pull/12910
Part 4: https://github.com/twentyhq/twenty/pull/12933
Part 5: https://github.com/twentyhq/twenty/pull/13106

In this part, we completely remove the hotkey scopes.
2025-07-09 17:21:14 +02:00
Raphaël Bosi c6e5bab4e9 Replace hotkey scopes by focus stack (Part 4 - Inputs) (#12933)
# Replace hotkey scopes by focus stack (Part 4 - Inputs)

This PR is the 4th part of a refactoring aiming to deprecate the hotkey
scopes api in favor of the new focus stack api which is more robust.
Part 1: https://github.com/twentyhq/twenty/pull/12673
Part 2: https://github.com/twentyhq/twenty/pull/12798
Part 3: https://github.com/twentyhq/twenty/pull/12910

In this part, I refactored all inputs in the app so that each input has
a unique id which can be used to track the focused element.
2025-07-07 15:42:12 +02:00
Paul Rastoin 4a4e65fe4a [REFACTOR] Twenty UI multi barrel (#11301)
# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203
2025-04-03 09:47:55 +00:00
Paul Rastoin 9ad8287dbc [REFACTOR] twenty-shared multi barrel and CJS/ESM build with preconstruct (#11083)
# Introduction

In this PR we've migrated `twenty-shared` from a `vite` app
[libary-mode](https://vite.dev/guide/build#library-mode) to a
[preconstruct](https://preconstruct.tools/) "atomic" application ( in
the future would like to introduce preconstruct to handle of all our
atomic dependencies such as `twenty-emails` `twenty-ui` etc it will be
integrated at the monorepo's root directly, would be to invasive in the
first, starting incremental via `twenty-shared`)

For more information regarding the motivations please refer to nor:
- https://github.com/twentyhq/core-team-issues/issues/587
-
https://github.com/twentyhq/core-team-issues/issues/281#issuecomment-2630949682

close https://github.com/twentyhq/core-team-issues/issues/589
close https://github.com/twentyhq/core-team-issues/issues/590

## How to test
In order to ease the review this PR will ship all the codegen at the
very end, the actual meaning full diff is `+2,411 −114`
In order to migrate existing dependent packages to `twenty-shared` multi
barrel new arch you need to run in local:
```sh
yarn tsx packages/twenty-shared/scripts/migrateFromSingleToMultiBarrelImport.ts && \
npx nx run-many -t lint --fix -p twenty-front twenty-ui twenty-server twenty-emails twenty-shared twenty-zapier
```
Note that `migrateFromSingleToMultiBarrelImport` is idempotent, it's atm
included in the PR but should not be merged. ( such as codegen will be
added before merging this script will be removed )

## Misc
- related opened issue preconstruct
https://github.com/preconstruct/preconstruct/issues/617

## Closed related PR
- https://github.com/twentyhq/twenty/pull/11028
- https://github.com/twentyhq/twenty/pull/10993
- https://github.com/twentyhq/twenty/pull/10960

## Upcoming enhancement: ( in others dedicated PRs )
- 1/ refactor generate barrel to export atomic module instead of `*`
- 2/ generate barrel own package with several files and tests
- 3/ Migration twenty-ui the same way
- 4/ Use `preconstruct` at monorepo global level

## Conclusion
As always any suggestions are welcomed !
2025-03-22 19:16:06 +01:00
Paul Rastoin 7fd89678b7 [CHORE] Avoid isDefined duplicated reference, move it to twenty-shared (#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 https://github.com/twentyhq/twenty/pull/9941
2025-02-01 12:10:10 +01:00
Lucas Bordeau 860dec3428 Fixed dropdown blur and unified components (#9062)
- Removed disableBlur property from dropdown because it is no longer
needed since there's only one OverlayContainer component so there can be
only one blur at a time.
- Removed blur CSS properties from every component that used it because
one standalone OverlayContainer is able to handle all cases if placed
properly.
- Also removed disableBackgroundBlur property from SingleRecordSelect
- Removed FieldInputOverlay and FieldTextAreaOverlay components that
were a first attempt to create something like an OverlayContainer
- Used new unified OverlayContainer in RecordInlineCell and
RecordTableCell
- Fixed ScrollWrapper so that it works well both for dropdown with non
overflowing content and dropdown with overflowing content.
- Removed export default value on SearchVariablesDropdown as it is not
used in this codebase
- Refactored SearchVariablesDropdown function as component anti-pattern
- Refactored SearchVariablesDropdownFieldItems UI problems with
separator and missing ScrollWrapper behavior
- Refactored SearchVariablesDropdownObjectItems with UI problems with
separator and missing ScrollWrapper behavior
- Fixed blur bug on Firefox due to wrong placement of the element that
had the CSS property. Blur works on Firefox it it's on the container
that has the highest level in the tree.
- Fixed bug in ActivityTargetInlineCell by removing an unnecessary
container component StyledSelectContainer
- Unified problems of field height with a new common component
FieldInputContainer, instead of putting width and height at the wrong
abstraction level, width and height are a field's concern not a
dropdown, overlay or low-level input concern.
- Fixed block editor dropdown with new OverlayContainer
- Aligning field dropdown with their anchor on inline and table cells,
there are still many small pixel misalignments that give a low quality
impression.
- Fixed FormDateFieldInput that was missing OverlayContainer
2024-12-17 14:28:26 +00:00
Guillim 041b1f21bf line breaks in tooltips & text (#8783)
This feature goal is to :

1 - clean variables not used any longer

2 - add line breaks for tooltips and text wrapped

<img width="329" alt="Screenshot 2024-11-27 at 18 37 18"
src="https://github.com/user-attachments/assets/b3d7ed76-df30-4377-9d73-08d55c0f5c49">
<img width="468" alt="Screenshot 2024-11-27 at 18 37 31"
src="https://github.com/user-attachments/assets/48ef343e-6071-4a89-a73f-fb271f8284c0">


Request From @Bonapara

---------

Co-authored-by: guillim <guillaume@twenty.com>
2024-11-28 14:30:23 +01:00
Shyamsunder Tard 9073bdf21a Background Blur added across multiple Input Fields in Edit Popups (#8277)
Fix #5644 

**Apply background blur to input fields across UI for improved
consistency and appearance with Theme compatibility :**

1. Updated **TextAreaInput.tsx** to apply background blur to text input
fields (e.g., City name).

2. Enhanced **PhonesFieldInput.tsx** to apply background blur for
seamless styling in phone number input sections.

3. Modified **TextInputV2.tsx** to add background blur in address
inputs, workspace fields (e.g., Blocklist, Name fields), invitation
inputs, profile name/email fields, and other input areas.

4. Updated **DateTimeInput.tsx** and **DateInput.tsx** to improve the
appearance of date, time, and calendar popup fields with background
blur.

5. Refined **DropdownMenuInput.tsx** and **DropdownMenuSearchInput.tsx**
to add background blur to inputs for Emails, Domain name, and search
fields across the web (e.g., Time Zone dropdowns, phone number country
search).

Some images are attached for reference.

<img width="235" alt="1_b"
src="https://github.com/user-attachments/assets/bd72e69a-712e-4226-8fda-0cb737d4cbd1">
<img width="229" alt="1_w"
src="https://github.com/user-attachments/assets/bb8eb60b-31fb-44c6-ac2a-ca28638b5e07">
<img width="234" alt="2_b"
src="https://github.com/user-attachments/assets/a4f0a9de-dea1-4ef8-926b-99de984c081b">
<img width="239" alt="2_w"
src="https://github.com/user-attachments/assets/4d2c7331-4bbf-4ea2-adad-76c7cde4072c">
<img width="225" alt="3_b"
src="https://github.com/user-attachments/assets/458f4759-8428-43ae-a6b6-aa38ab6fb0f8">
<img width="219" alt="3_w"
src="https://github.com/user-attachments/assets/5ddb67c5-e59d-47cc-b2e7-44b3a7b794e6">
<img width="646" alt="4_b"
src="https://github.com/user-attachments/assets/01252bce-a34a-4dda-a801-654ccc5e7841">
<img width="637" alt="4_w"
src="https://github.com/user-attachments/assets/ea60deab-7594-4aef-ac63-0cedc9168951">
<img width="648" alt="5_b"
src="https://github.com/user-attachments/assets/465789ec-55b3-4750-a2bc-a9e156b1101e">
<img width="642" alt="5_w"
src="https://github.com/user-attachments/assets/8b58977a-f543-4018-a4ee-b1ff5b9180a3">
<img width="647" alt="6_b"
src="https://github.com/user-attachments/assets/88030efe-bd16-43e4-9744-ee223aa04298">
<img width="642" alt="6_w"
src="https://github.com/user-attachments/assets/4ca2c365-ab1e-47e9-ba4a-bdb738500f56">
<img width="647" alt="7_b"
src="https://github.com/user-attachments/assets/224c3da5-cf57-4652-bd29-681c2098917e">
<img width="655" alt="7_w"
src="https://github.com/user-attachments/assets/eecc2d51-ce1f-47c9-845c-c6fe15a40fa5">
<img width="317" alt="8_b"
src="https://github.com/user-attachments/assets/e899b4a2-4849-4d1c-805b-5a950a53d6cc">
<img width="335" alt="8_w"
src="https://github.com/user-attachments/assets/73fef887-0a46-4557-aca4-d07c9dc298d1">
<img width="246" alt="9_b"
src="https://github.com/user-attachments/assets/99c5627a-e7ba-4453-9666-8d73b0d676ee">
<img width="238" alt="9_w"
src="https://github.com/user-attachments/assets/bb36e4ea-3b78-48f5-822f-cc5012e5d434">
<img width="218" alt="10_b"
src="https://github.com/user-attachments/assets/450fa833-12ad-40b7-80f5-17de6af582bd">
<img width="225" alt="10_w"
src="https://github.com/user-attachments/assets/3fe6d128-4146-4316-821e-2ebd65fd12d5">
<img width="647" alt="11_b"
src="https://github.com/user-attachments/assets/ec39f88f-0beb-4cf0-b35f-b4f78b4e75ff">
<img width="663" alt="11_w"
src="https://github.com/user-attachments/assets/6eb19fe7-604c-4cb9-9623-208e541df751">
<img width="235" alt="12_b"
src="https://github.com/user-attachments/assets/98e68530-f5c5-43d1-839e-a8c14582b72a">
<img width="245" alt="12_w"
src="https://github.com/user-attachments/assets/e3f0aec9-6a32-4784-a36c-d187303d3310">

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-11-19 12:21:01 +01:00
Ngan Phan 57eaa01d35 Adjust Floating Input Padding and Border Color (#7328)
This PR fix the padding and border color of floating text input #7286 
The text area automatically has padding of 4px so I reset it to 0 and
adjusting container padding to 8px.
2024-10-02 09:39:46 +02:00
Nabhag Motivaras c97c71762e fix: Input fields to have expected behaviour in case of empty / only whitespaces string (#6736)
# ISSUE
- Closes #6734
- Closes #6633
- Closes #6733
- Closes #6816

# Description

- [x] Don't allow Empty (whitespaces) Objects to Create, all the
keyboard shortcuts are also handled for this.



https://github.com/user-attachments/assets/1c9add4e-f13f-458b-8f76-63bd868413a2



https://github.com/user-attachments/assets/e72b6ee3-74e4-4517-a230-3eb10db80dc7

Note: we do have one other issue with FullName field #6740 Inorder to
test use **shift**.




- [x] Api Keys Input Name Field -> New and Detail View Name field
shouldn't be empty or string with whitespaces, we won't able to have
whitespaces in both. **Try Entering just spaces**



https://github.com/user-attachments/assets/b521b49f-648c-4585-9d15-8ff4faed3c3a


- [x] Similar to above, Empty webhook endpoint url under
**/settings/developers/webhooks/new** won't be created. **Try Entering
just spaces**

- [x] New Functions or Updating Functions will not able to have
whitespaces, empty string as Name. **Try Entering just spaces**



https://github.com/user-attachments/assets/09fcf394-c6d9-4080-8efd-462b054a22d0



- [x] under **settings/workspace-members** changes will lead and solve
that user won't be able to enter Invite by email as just whitespaces +
button is now getting disabled when there is no correct email. **Try
Entering just spaces**



https://github.com/user-attachments/assets/b352edfa-113b-4645-80fd-db6f120ab5db



- [x] Text Input Field, will not allow to start entering with
whitespaces and won't take just whitespaces as value spaces between
words will work.


https://github.com/user-attachments/assets/8c1a0812-45be-4ed2-bd3d-bb4f92147976

- [x] Similarly Number works as per above including shortcuts. 


https://github.com/user-attachments/assets/9f69cc87-5c3c-43ee-93c4-fa887bc0d7ee


- [x] Similarly FullName field works as per above including shortcuts



https://github.com/user-attachments/assets/7bb006b2-abf7-44cd-a214-7a2fc68df169

- [x] Pasting fullName is been Improved. 

- Case 1 (Two Words): If there are exactly two words, return them as is.
- Case 2 (More than Two Words): If there are more than two words, return
the first two words only.
- Case 3 (One Word): If there is only one word, return it as the first
name, with an empty string as the last name.
- WhiteSpaces have been handled. 

```
console.log(splitFullName("John     Doe")); // ["John", "Doe"]
console.log(splitFullName("        ")); // ["", ""]
console.log(splitFullName("John")); // ["John", ""]
console.log(splitFullName("  John   Doe  ")); // ["John", "Doe"]
console.log(splitFullName("John Michael  Andrew Doe")); // ["John", "Michael"]
```

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-09-20 21:25:50 +02:00
Siddhant Rai 8d8bf1c128 fix: text field overflow beyond cell limits (#5834)
- fixes #5775 


https://github.com/twentyhq/twenty/assets/47355538/9e440018-ec1e-4faa-a9f3-7131615cf9f1

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-06-14 11:41:49 +02:00
Félix Malfait a0d9fdb3de Fix bugs and telemetry (#5832)
Bugfix 1:
<img width="491" alt="Screenshot 2024-06-12 at 07 19 42"
src="https://github.com/twentyhq/twenty/assets/6399865/e3ad2771-4edd-453d-9d85-f429177dfd15">

Bugfix 2:
<img width="259" alt="Screenshot 2024-06-12 at 07 47 02"
src="https://github.com/twentyhq/twenty/assets/6399865/2f82c90e-2180-4290-b12e-e72910fb108c">

Change 3:
I remove the "telemetry anonymization enabled" parameter as it was
misleading, we were anonymization ids but still forwarding the workspace
name which is imo more sensitive than an ID
2024-06-12 08:11:48 +02:00
Marie f7cdd14c75 Use same overlay background for field inputs (#5719)
Fixes #5593
2024-06-03 17:17:25 +02:00
Abdullah cfd83d6b8e [UI] Remove theme constants from twenty-front and use the ones exported from twenty-ui. (#5558)
Some parts of the Frontend used theme constants exported from
`modules/ui` while other parts used theme constants exported from
`twenty-ui`.

This PR centralizes theme constants by removing them from `modules/ui`
completely.
2024-05-25 16:09:25 +02:00
Anchit Sinha ce195826f5 4599-feat(front): Add Copy Button to Floating Inputs (#4789)
Closes #4599 

**Changes:**
- Added copy button to floating inputs of Text, Number, Phone, Link and
Email fields.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Weiko <corentin@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
2024-05-14 17:02:53 +02:00
gitstart-app[bot] 584d90ec89 Create new field type JSON (#4729)
### Description
Create new field type JSON

### Refs
https://github.com/twentyhq/twenty/issues/3900

### Demo


https://github.com/twentyhq/twenty/assets/140154534/9ebdf4d4-f332-4940-b9d8-d9cf91935b67

Fixes #3900

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
2024-04-11 11:41:36 +02:00
Lucas Bordeau 581dfafe11 Renamed nullable utils into isDefined and isUndefinedOrNull (#4402)
* Renamed nullable utils into isDefined and isUndefinedOrNull
2024-03-11 14:28:57 +01:00
gitstart-app[bot] 17511be0cf TWNTY-3794 - ESLint rule: only take explicit boolean predicates in if statements (#4354)
* ESLint rule: only take explicit boolean predicates in if statements

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>

* Merge main

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>

* Fix frontend linter errors

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>

* Fix jest

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>

* Fix lint on new code

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
2024-03-09 10:48:19 +01:00
gitstart-app[bot] f543191552 TWNTY-3825 - ESLint rule: const naming (#4171)
* ESLint rule: const naming

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>

* refactor: Reverts changes on `twenty-server`

Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>
2024-02-25 13:52:48 +01:00
Jeet Desai dda9eaca2a Place cursor at end when entering cell (#3743)
#3723 #3724 place cursor at end when entering cell
2024-02-01 17:37:32 +01:00
Charles Bochet ada8f55574 Refactor Field Inputs (#3658)
* Rename field to record-field folder

* Simplify FieldInput

* Fix perfs

* Fixes

* Fixes

* Fix tests

* Fix tests
2024-01-27 23:42:39 +01:00
Jeet Desai 74a54da403 replace text input by texterarea (#3473)
* #3472 replace text input by texterarea

* background color change in dark mode

* box shadow and hide overflow

* added tooltip in overflow text

* resolved comment on #3473

* resolved comments in #3473
2024-01-18 09:49:36 +01:00