c596a5e342d28576e1ece54ad86eadcfd7cbd3b5
13 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Raphaël Bosi
|
c596a5e342 |
Rename twenty-ui to twenty-ui-deprecated and twenty-new-ui to twenty-ui to prepare package release (#21315)
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`. |
||
|
Félix Malfait
|
1088f7bbab |
feat: add lingui/no-unlocalized-strings ESLint rule and fix translations (#16610)
## Summary
This PR adds the `lingui/no-unlocalized-strings` ESLint rule to detect
untranslated strings and fixes translation issues across multiple
components.
## Changes
### ESLint Configuration (`eslint.config.react.mjs`)
- Added comprehensive `ignore` patterns for non-translatable strings
(CSS values, HTML attributes, technical identifiers)
- Added `ignoreNames` for props that don't need translation (className,
data-*, aria-*, etc.)
- Added `ignoreFunctions` for console methods, URL APIs, and other
non-user-facing functions
- Disabled rule for debug files, storybook, and test files
### Components Fixed (~19 files)
- Object record components (field inputs, pickers, merge dialogs)
- Settings components (accounts, admin panel)
- Serverless function components
- Record table and title cell components
## Status
🚧 **Work in Progress** - ~124 files remaining to fix
This PR is being submitted as draft to allow progressive fixing of
remaining translation issues.
## Testing
- Run `npx eslint "src/**/*.tsx"` in `packages/twenty-front` to check
remaining issues
|
||
|
Lucas Bordeau
|
d61eb1a951 |
Remove all legacy state management (#13476)
This PR removes every legacy state management logic left in the code base, we only keep our last component state management logic. Removed : - Scoped states logic - Dropdown scope logic - Scope id naming - Component state v1 - Component state v2_alpha # QA | Component | Comments | | --- | --- | | AttachementDropdown | Ok | | ObjectTasks | Ok | | ActivityRichTextEditor | Ok | | App | Ok dialogs work | | AppRouterProviders | Ok dialogs work | | RecordBoardScrollToFocusedCardEffect | Ok | | RecordBoard | Ok | | RecordBoardCard | OK | | useSelectAllCards | Ok | | RecordInlineCell | Ok | | useInlineCell | Ok | | RecordDetailRelationRecordsListItem | Ok | | RecordDetailRelationSectionDropdownToMany | Ok | | RecordDetailRelationSectionDropdownToOne | Ok | | useHandleContainerMouseEnter | Ok | | useResetTableRowSelection | Ok | | useSelectAllRows | Ok | | useSetRecordTableData | Ok | | useRecordTable | Ok | | useRecordTableMoveFocusedCell | Ok | | useRecordTableMoveFocusedRow | Ok | | useMoveHoverToCurrentCell | OK | | useTriggerActionMenuDropdown | Ok | | RecordTableBodyDragDropContextProvider | Ok | | RecordTableHeaderCell | Ok | | useSetCurrentRowSelected | Ok | | useRecordTitleCell | Ok | | SettingsObjectFieldActiveActionDropdown | Ok | | SettingsObjectFieldInactiveActionDropdown | Ok | | SettingsObjectFieldItemTableRow | Ok | | SettingsObjectInactiveMenuDropDown | Ok | | SettingsRoleEditEffect | Ok | | SettingsRolesQueryEffect | Ok | | Dropdown | Ok | | useSelectableList | Ok | | useSelectableListHotKeys | Ok | | useSelectableListListenToEnterHotkeyOnItem | Ok | | useNavigationSection | Ok | | useCreateViewFromCurrentState | Ok | | useDeleteViewFromCurrentState | Ok | | useUpdateViewFromCurrentState | Ok | | ViewPickerFavoriteFoldersDropdown | Ok | | useCreateViewFromCurrentView | Ok | | ViewBarDetails | Ok | | WorkflowRunVisualizer | Ok | | useHandleWorkflowRunDiagramCanvasInit | Ok | | WorkflowDiagramCanvasBase | Ok | | WorkflowRunVisualizerEffect | Ok | | useRemoveStepFilter | Ok | | useRemoveStepFilterGroup | Ok | | useUpsertStepFilterSettings | Ok | | WorkflowFindRecordsFilters | Ok | | SettingsObjects | Ok | |
||
|
Lucas Bordeau
|
a7b9a0710e |
Replaced useDropdown calls by useCloseDropdown, useOpenDropdown and useToggleDropdown (#12958)
This PR replaces the many calls of useDropdown by the new standalone hooks : useCloseDropdown, useOpenDropdown and useToggleDropdown. This will allow to remove useDropdown and then the dropdown recoil component state v1. A big round of QA has been made, with some bugs caught along the way. Closes https://github.com/twentyhq/core-team-issues/issues/1155 Closes https://github.com/twentyhq/core-team-issues/issues/618 ## QA Component|Status|Comment |---|---|---| CurrentWorkspaceMemberFavorites|Ok| FavoriteFolderPickerFooter|Ok| AdvancedFilterAddFilterRuleSelect|Ok| AdvancedFilterRecordFilterGroupOptionsDropdown|Ok| AdvancedFilterRecordFilterOperandSelectContent|Ok| AdvancedFilterRecordFilterOptionsDropdown|Ok| useAdvancedFilterFieldSelectDropdown|Ok| ObjectFilterDropdownBooleanSelect|Ok| ObjectFilterDropdownOptionSelect|Ok| ObjectOptionsDropdown|Ok| ObjectOptionsDropdownLayoutContent|Ok| ObjectSortDropdownButton|Ok| useCloseSortDropdown|Ok| FormDateTimeFieldInput|Ok|Bug detected, cannot select a month or a year, see issue https://github.com/twentyhq/twenty/issues/12922 FormSingleRecordPicker|Ok| MultiItemFieldMenuItem|Ok| RecordDetailRelationRecordsListItem|Ok| RecordDetailRelationSection|Ok| RecordDetailRelationSectionDropdownToMany|Ok| RecordDetailRelationSectionDropdownToOne|Ok| RecordTableColumnAggregateFooterDropdownSubmenuContent|Ok| RecordTableColumnAggregateFooterAggregateOperationMenuItems|Ok| RecordTableColumnAggregateFooterMenuContent|Ok| RecordTableColumnAggregateFooterValueCell|Ok| RecordTableColumnHeadDropdownMenu|Ok| RecordTableHeaderPlusButtonContent|Ok| useTriggerActionMenuDropdown|Ok| MultipleSelectDropdown|Ok| RecordBoardColumnHeaderAggregateDropdownButton|Ok| SettingsDataModelFieldSelectFormOptionRow|Ok| SettingsDataModelNewFieldBreadcrumbDropDown|Ok| SettingsObjectFieldActiveActionDropdown|Ok| SettingsObjectFieldInactiveActionDropdown|Ok| SettingsObjectInactiveMenuDropDown|Ok| SettingsSecurityApprovedAccessDomainRowDropdownMenu|Couldn’t test| SettingsSecuritySSORowDropdownMenu|Couldn’t test| SettingsAccountsRowDropdownMenu|Ok| SettingsRoleAssignment|Ok| SettingsServerlessFunctionTabEnvironmentVariableTableRow|Couldn’t test| MatchColumnToFieldSelect|Ok| SubMatchingSelectDropdownButton|Ok|Removed conflicting duplicate open dropdown SubMatchingSelectRowRightDropdown|Ok| CurrencyPickerDropdownButton|Ok| IconPicker|Ok| DateTimePicker|Ok| PhoneCountryPickerDropdownButton|OK| Select|Ok| Dropdown|Ok|Not QAing all dropdowns in the app because the ones of this QA are enough to show up that Dropdown is behaving correctly on a lot of use cases DropdownMenuInnerSelect|Ok| TabList|Ok|Removed onClickOutside called in dropdown clickable component, validated with Raph who recently worked on this DateInput|Ok| MultiWorkspaceDropdownDefaultComponents|Ok| AdvancedFilterChip|Ok| EditableFilterDropdownButton|Ok| UpdateViewButtonGroup|Ok| ViewBarDetailsAddFilterButton|Ok| ViewBarFilterButton|Ok| ViewBarFilterDropdown|Ok| ViewBarFilterDropdownAdvancedFilterButton|Ok| ViewPickerDropdown|Ok| ViewPickerListContent|Ok| ViewPickerOptionDropdown|Ok| WorkflowEditTriggerDatabaseEventForm|Ok| WorkflowVariablesDropdownWorkflowStepItems|Ok| AttachmentDropdown|Ok| SupportDropdown|Ok| Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com> |
||
|
Raphaël Bosi
|
cbc0d06a2f |
Replace hotkey scopes by focus stack (Part 1 - Dropdowns and Side Panel) (#12673)
This PR is the first part of a refactoring aiming to deprecate the hotkey scopes api in favor of the new focus stack api which is more robust. The refactored components in this PR are the dropdowns and the side panel/command menu. - Replaced `useScopedHotkeys` by `useHotkeysOnFocusedElement` for all dropdown components, selectable lists and the command menu - Introduced `focusId` for all dropdowns and created a common hotkey scope `DropdownHotkeyScope` for backward compatibility - Replaced `setHotkeyScopeAndMemorizePreviousScope` occurrences with `usePushFocusItemToFocusStack` and `goBackToPreviousHotkeyScope` with `removeFocusItemFromFocusStack` Note: Test that the shorcuts and arrow key navigation still work properly when interacting with dropdowns and the command menu. Bugs that I have spotted during the QA but which are already present on main: - Icon picker select with arrow keys doesn’t work inside dropdowns - Some dropdowns are not selectable with arrow keys (no selectable list) - Dropdowns in dropdowns don’t reset the hotkey scope correctly when closing - The table click outside is not triggered after closing a table cell and clicking outside of the table |
||
|
Lucas Bordeau
|
01b40e173b |
Refactored dropdown content and fixed all dropdown width bugs (#12334)
This PR refactors all the dropdown content wrapping mechanism across the entire app. It refactors the internals of the `Dropdown` component and introduces a new generic `DropdownContent` component that is a generic wrapper used for each dropdown. ## Why this PR ? Because we’ve been experiencing continuous regressions for months on the dropdown content width, with weird scrolling behaviors in some and not in others, and every time a solution was found for a particular set of dropdowns, it broke another set of dropdowns, which wasn’t noticed because doing the QA of all dropdowns of the app is very difficult for fixing an apparently small bug. ## Don’t we already have a `DropdownMenu` component ? Indeed, this new `DropdownContent` is almost like `DropdownMenu` and took inspiration from it but `DropdownContent` acts as a generic content container that sets the width of the whole dropdown, whether we have a menu or not. ## Why don’t we put it directly in Dropdown internals ? Because the Dropdown component is using a complex logic with floating-ui middleware to compute its position and size, and for this logic to work correctly, it cannot be responsible for the “wanted” width of its content, because the children components, which the dropdown is not aware of, can request different widths after the dropdown has been mounted. A good example with multiple use cases inside the same dropdown can be found in `AdvancedFilterDropdownFilterInput` Thus, it is the responsibility of the content of the dropdown to determine the width it wants to have. ## What is the difference with DropdownMenuItemsContainer ? We can have multiple `DropdownMenuItemsContainer` in a dropdown, alongside other components like `DropdownMenuSeparator` or `DropdownMenuHeader`, and each of those components behaves differently regarding to its width, paddings, etc. Therefore it is logical that the `DropdownMenuItemsContainer` cannot be responsible for the whole dropdown content width, and trying to do so has been the cause of many regressions for months. Now `DropdownMenuItemsContainer` is taking a width of `auto` by default, which is the best to adapt to a parent which has a defined width. ## How do I set the width of my dropdown now ? By passing a pixel width to the props `widthInPixels` of `DropdownContent`, which only accepts numbers to avoid any confusion with `auto` , `100%` or `160px` and other specific width variables. The `dropdownWidth` props has been removed from `<Dropdown>` to avoid any confusion. Also the `DropdownMenuItemsContainer` is now using `auto` as its default width to fill the available space inside `DropdownContent` . It is highly recommended to use the enum `GenericDropdownContentWidt` to define your width. ## Where to use this new `DropdownContent` component ? There are two main use cases. If the dropdown content is defined directly inline in the Dropdown props, then it is recommended to use it here too. On the other hand if the dropdown content is abstracted in another component, it’s recommended to use this new component alongside the others components like `DropdownMenuItemsContainer`. A good rule of thumb is to place `DropdownContent` where `DropdownMenuItemsContainer`, `DropdownMenuSearchInput`, etc. are placed. ## What if I have a custom width ? Just define a constant like `ICON_PICKER_DROPDOWN_CONTENT_WIDTH` and use it with the props `widthInPixels` . Otherwise there’s a `GenericDropdownContentWidth` enum. The default value being `GenericDropdownContentWidth.Medium` (or 200px), which most dropdowns use. ## QA Component | Comment -- | -- AttachmentDropdown | Fixed overflowing (thanks to DropdownContent) RecordIndexActionMenuDropdown | CommandMenuActionMenuDropdown | SupportDropdown | Fixed overflowing (thanks to DropdownContent) MessageThreadSubscribersDropdownButton | Removed because unused FavoriteFolderNavigationDrawerItemDropdown | Set width at Narrow FavoriteFolderPicker | ViewPickerOptionDropdown | PageFavoriteFolderDropdown | Removed because unused AdvancedFilterAddFilterRuleSelect | AdvancedFilterAddFilterRuleSelect | AdvancedFilterFieldSelectMenu | AdvancedFilterRecordFilterGroupOptionsDropdown | AdvancedFilterRecordFilterOperanceSelect | Set width at Narrow AdvancedFilterLogicalOperatorDropdown | Set width at Narrow AdvancedFilterRecordFilterOptionsDropdown | AdvancedFilterRootRecordFilterGroup | Fixed broken horizontal scrolling behavior AdvancedFilterSubFieldSelectMenu | AdvancedFilterDropdownFilterInput | ObjectFilterDropdownBooleanSelect | ObjectFilterDropdownCountrySelect | Fixed broken menu items container ObjectFilterDropdownCurrencySelect | Set width to Large ObjectFilterDropdownFilterInput | ObjectFilterDropdownOperandDropdown | Fixed width that was not fixed ObjectFilterDropdownFilterInput | Fixed width that wasn’t the same for EditableFilterChip ObjectFilterDropdownOperandSelect | Refactored ObjectOptionsDropdownRecordGroupFieldsContent | Added missing separator ObjectOptionDropdownFieldsContent | ObjectOptionsDropdownHiddenFieldsContent | ObjectOptionsDropdownLayoutContent | ObjectOptionsDropdownLayoutOpenInContent | ObjectOptionsDropdownMenuContent | ObjectOptionsDropdownRecordGroupFieldsContent | ObjectOptionsDropdownRecordGroupsContent | ObjectOptionsDropdownRecordGroupSortContent | ObjectOptionsDropdownHiddenRecordGroupsContent | Removed unnecessary DropdownMenuItemsContainer RecordBoardColumnHeaderAggregateDropdown | Fixed overflowing (thanks to DropdownContent) RecordBoardColumnHeaderAggregateDropdownFieldsContent | Fixed overflowing (thanks to DropdownContent) RecordBoardColumnHeaderAggregateDropdownMenuContent | Fixed overflowing (thanks to DropdownContent) RecordBoardColumnHeaderAggregateDropdownOptionsContent | Fixed overflowing (thanks to DropdownContent) MultiItemFieldInput | Fixed overflowing (thanks to DropdownContent) MultiItemFieldMenuItem | MultipleRecordPicker | Fixed overflowing (thanks to DropdownContent) SingleRecordPicker | RecordTableColumnAggregateDropdownSubmenuContent | RecordTableColumnAggregateFooterMenuContent | RecordTableColumnHeadDropdownMenu | Fixed overflowing (thanks to DropdownContent) RecordTableHeaderPlusButtonContent | MultipleSelectDropdown | Broken width fixed ObjectSortDropdownButton | RecordDetailRelationRecordsListItem | ConfigVariableDatabaseInput | ConfigVariableOptionsDropdownContent | SettingsObjectFieldActiveActionDropdown | Fixed overflowing (thanks to DropdownContent) SettingsObjectFieldDisabledActionDropdown | Set width at Narrow SettingsObjectSummaryCard | Removed because unused SettingsDataModelFieldSelectFormOptionRow | SettingsDataModelNewFieldBreadcrumbDropdown | SettingsObjectInactiveMenuDropDown | SettingsRoleAssignementWorkspaceMemberPickerDropdown | SettingsRolePermissionObjectLevelObjectPickerDropdownContent | SettingsSecurityApprovedAccessDomainRowDropdownMenu | Couldn’t test SettingsSecuritySSORowDropdownMenu | Couldn’t test SettingsAccountsRowDropdownMenu | Fixed overflowing (thanks to DropdownContent) SettingsIntegrationDatabaseConnectionSummaryCard | Couldn’t test SettingsServerlessFunctionTablEnvironmentVariableTableRow | Deactivated scope MatchColumnSelectFieldSelectDropdownContent | Removed now unnecessary width on DropdownMenuItemsContainer MatchColumnSelectSubFieldSelectDropdownContent | SubMatchingSelectInput | CurrencyPickerDropdownSelect | IconPicker | Fixed overflowing (thanks to DropdownContent) PhoneCountryPickerDropdownSelect | Select | Refactored to drilldown wanted width of content, in this case it’s intended ExpandedListDropdown | ShowPageAddButton | Removed because unused MultiWorkspaceDropdownDefaultComponent | MultiWorkspaceDropdownThemesComponent | MultiWorkspaceDropdownWorkspacesListComponent | AdvancedFilterDropdownButton | EditableFilterChip | EditableFilterDropdownButton | UpdateViewButtonGroup | ViewBarFilterDropdown | ViewBarFilterDropdownFieldSelectMenu | ViewPickerContentCreateMode | ViewPickerContentEditMode | ViewPickerListContent | WorkflowEditTriggerDatabaseEventForm | WorkflowVariablesDropdownFieldItems | WorkflowVariablesDropdownObjectItems | WorkflowVariablesDropdownWorkflowStepItems | CommandMenuContextChipGroups | RecordBoardColumnDropdownMenu | MultiSelectInput | SelectInput | CustomSlashMenu | DropdownMenu | Removed and replaced by DropdownContent OverlayContainer and around | <!-- notionvc: 1e23bdb8-2dda-4f8d-a64d-ecc829a768a2 --> ## Miscellaneous Side notes : - The `Select` component is now wrapping the `DropdownContent` because it computes a dynamic width. - The advanced filter dropdown has been fixed, it was broken when resizing the window horizontally, we couldn’t scroll. This specific edge case was taken into account when refactoring the whole dropdown content system - As discussed with Nitin, data-select-disable will probably be removed entirely, so I let it as is, because right now it is not used by the refactored d&d selection. - Duplicate separators under DropdownMenuHeader have been removed. Fixes : https://github.com/twentyhq/twenty/issues/12327 Fixes : https://github.com/twentyhq/core-team-issues/issues/951 |
||
|
Lucas Bordeau
|
3d90eb4eb9 |
Fix broken dropdown auto resize behavior (#11423)
This PR was originally about fixing advanced filter dropdown auto resize to avoid breaking the app main container, but the regression is not limited to advanced filter dropdown, so this PR fixes the regression for every dropdown in the app. This PR adds a max dropdown max width to allow resizing dropdowns horizontally also, which can happen easily for the advanced filter dropdown. In this PR we also start removing `fieldMetadataItemUsedInDropdown` in component `AdvancedFilterDropdownTextInput` because it has no impact outside of this component which is used only once. The autoresize behavior determines the right padding-bottom between mobile and PC. Mobile : <img width="604" alt="Capture d’écran 2025-04-07 à 16 03 12" src="https://github.com/user-attachments/assets/fbdd8020-1bfc-4e01-8a05-3a9f114cdd40" /> PC : <img width="757" alt="Capture d’écran 2025-04-07 à 16 03 30" src="https://github.com/user-attachments/assets/f80a5967-8f60-40bb-ae3c-fa9eb4c65707" /> Fixes https://github.com/twentyhq/core-team-issues/issues/725 Fixes https://github.com/twentyhq/twenty/issues/11409 --------- Co-authored-by: Charles Bochet <charles@twenty.com> |
||
|
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 |
||
|
Félix Malfait
|
056cb7c66d |
Translation followup (#9735)
Address PR comments and more progress on translation |
||
|
Harsh Singh
|
6d62dd9fd1 |
fix: object activate dropdown (#8438)
Fixes: #8436 Fixes: #8435 & other duplicate ```DropdownMenu``` |
||
|
gitstart-app[bot]
|
6264d509bd |
Migrate to twenty-ui - navigation/menu-item (#8213)
This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7536](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7536). --- ### Description Migrate all menu items components to twenty ui and update imports. ```typescript MenuItem MenuItemAvata MenuItemCommand MenuItemCommandHotKeys MenuItemDraggable MenuItemMultiSelect MenuItemMultiSelectAvatar MenuItemMultiSelectTag MenuItemNavigate MenuItemSelect MenuItemSelectAvatar MenuItemSelectColor MenuItemSelectTag MenuItemSuggestion MenuItemToggle ``` \ Also migrate all other dependent components and utilities like `Checkbox` & `Toggle`\ \ Fixes twentyhq/private-issues#82 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com> |
||
|
gitstart-app[bot]
|
0a28c15747 |
Migrate to twenty-ui - input/button (#7994)
This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7529](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7529). --- ### Description - Migrated all button components to `twenty-ui` \ \ `Button`\ `ButtonGroup`\ `ColorPickerButton`\ `FloatingButton`\ `FloatingButtonGroup`\ `FloatingIconButton`\ `FloatingIconButtonGroup`\ `IconButton`\ `IconButtonGroup`\ `LightButton`\ `LightIconButton`\ `LightIconButtonGroup`\ `MainButton`\ \ Fixes twentyhq/private-issues#89 Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com> |
||
|
Charles Bochet
|
eccf0bf8ba |
Enforce front project structure through ESLINT (#7863)
Fixes: https://github.com/twentyhq/twenty/issues/7329 |