houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename twenty-ui to twenty-ui-deprecated and twenty-new-ui to twenty-ui to prepare package release (#21315)

Browse Source 
## 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`.
This commit is contained in:
Raphaël Bosi
2026-06-08 18:12:28 +02:00
committed by GitHub
parent a91e737e69
commit c596a5e342
2320 changed files with 6313 additions and 4856 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/spreadsheet-import/steps/components/ImportDataStep.tsx
+3 -3
View File
@@ -3,11 +3,11 @@ import { StepNavigationButton } from '@/spreadsheet-import/components/StepNaviga
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import { spreadsheetImportCreatedRecordsProgressState } from '@/spreadsheet-import/states/spreadsheetImportCreatedRecordsProgressState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { ModalContent } from 'twenty-ui/layout';
import { ModalContent } from 'twenty-ui-deprecated/layout';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { t } from '@lingui/core/macro';
import { Loader } from 'twenty-ui/feedback';
import { Loader } from 'twenty-ui-deprecated/feedback';
const StyledHeader = styled.span`
color: ${themeCssVariables.font.color.primary};
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ import { setIgnoreColumn } from '@/spreadsheet-import/utils/setIgnoreColumn';
import { setSubColumn } from '@/spreadsheet-import/utils/setSubColumn';
import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
import { ModalContent } from 'twenty-ui/layout';
import { ModalContent } from 'twenty-ui-deprecated/layout';
import { DO_NOT_IMPORT_OPTION_KEY } from '@/spreadsheet-import/constants/DoNotImportOptionKey';
import { ColumnGrid } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid';
@@ -31,7 +31,7 @@ import { type SpreadsheetImportField } from '@/spreadsheet-import/types/Spreadsh
import { useAtomFamilySelectorState } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorState';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { Trans, useLingui } from '@lingui/react/macro';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledColumnsContainer = styled.div`
align-items: center;
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
import { t } from '@lingui/core/macro';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import React from 'react';
const StyledGridContainer = styled.div`
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledControlContainer = styled.div<{ cursor: string }>`
align-items: center;
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx
+7 -4
View File
@@ -9,10 +9,13 @@ import { type SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/Sprea
import { getFieldOptions } from '@/spreadsheet-import/utils/getFieldOptions';
import { styled } from '@linaria/react';
import { useContext } from 'react';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { Tag, type TagColor } from 'twenty-ui/components';
import { IconChevronDown } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import {
ThemeContext,
themeCssVariables,
} from 'twenty-ui-deprecated/theme-constants';
import { Tag, type TagColor } from 'twenty-ui-deprecated/components';
import { IconChevronDown } from 'twenty-ui-deprecated/display';
import { type SelectOption } from 'twenty-ui-deprecated/input';
const StyledIconChevronDownContainer = styled.div`
color: ${themeCssVariables.font.color.tertiary};
display: flex;
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectInput.tsx
+3 -3
View File
@@ -3,9 +3,9 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useMemo, useRef, useState } from 'react';
import { type TagColor } from 'twenty-ui/components';
import { type SelectOption } from 'twenty-ui/input';
import { MenuItemSelectTag } from 'twenty-ui/navigation';
import { type TagColor } from 'twenty-ui-deprecated/components';
import { type SelectOption } from 'twenty-ui-deprecated/input';
import { MenuItemSelectTag } from 'twenty-ui-deprecated/navigation';
import { normalizeSearchText } from '~/utils/normalizeSearchText';
interface SubMatchingSelectInputProps {
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRow.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import {
} from '@/spreadsheet-import/types/SpreadsheetColumn';
import { type SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledRowContainer = styled.div`
align-items: center;
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowLeftSelect.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { SubMatchingSelectControlContainer } from '@/spreadsheet-import/steps/co
import { type SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
const StyledLabel = styled.span`
color: ${themeCssVariables.font.color.primary};
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowRightDropdown.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ import { type SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/Sprea
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { styled } from '@linaria/react';
import { type SelectOption } from 'twenty-ui/input';
import { type SelectOption } from 'twenty-ui-deprecated/input';
const StyledDropdownContainer = styled.div`
width: 100%;
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { MatchColumnToFieldSelect } from '@/spreadsheet-import/components/MatchColumnToFieldSelect';
import { DO_NOT_IMPORT_OPTION_KEY } from '@/spreadsheet-import/constants/DoNotImportOptionKey';
@@ -10,7 +10,7 @@ import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetC
import { spreadsheetImportBuildFieldOptions } from '@/spreadsheet-import/utils/spreadsheetImportBuildFieldOptions';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useLingui } from '@lingui/react/macro';
import { IconForbid } from 'twenty-ui/display';
import { IconForbid } from 'twenty-ui-deprecated/display';
const StyledContainer = styled.div`
display: flex;
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn.tsx
+2 -2
View File
@@ -6,12 +6,12 @@ import { type SpreadsheetColumn } from '@/spreadsheet-import/types/SpreadsheetCo
import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { t } from '@lingui/core/macro';
import { useLingui } from '@lingui/react/macro';
import { useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { AnimatedExpandableContainer } from 'twenty-ui/layout';
import { AnimatedExpandableContainer } from 'twenty-ui-deprecated/layout';
const getExpandableContainerTitle = (
fields: SpreadsheetImportFields,
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx
+9 -2
View File
@@ -1,8 +1,15 @@
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui/display';
import {
Banner,
IconChevronDown,
IconInfoCircle,
} from 'twenty-ui-deprecated/display';
import { useContext } from 'react';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import {
ThemeContext,
themeCssVariables,
} from 'twenty-ui-deprecated/theme-constants';
const StyledBannerContainer = styled.div<{ allMatched: boolean }>`
> div {
packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { type ImportedRow } from '@/spreadsheet-import/types';
packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
+2 -2
View File
@@ -1,12 +1,12 @@
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { useCallback, useState } from 'react';
import { Heading } from '@/spreadsheet-import/components/Heading';
import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
import { type ImportedRow } from '@/spreadsheet-import/types';
import { ModalContent } from 'twenty-ui/layout';
import { ModalContent } from 'twenty-ui-deprecated/layout';
import { useComputeColumnSuggestionsAndAutoMatch } from '@/spreadsheet-import/hooks/useComputeColumnSuggestionsAndAutoMatch';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { useRowSelection, type Column, type FormatterProps } from 'react-data-gr
import { t } from '@lingui/core/macro';
import { type ImportedRow } from '@/spreadsheet-import/types';
import { Radio } from 'twenty-ui/input';
import { Radio } from 'twenty-ui-deprecated/input';
const SELECT_COLUMN_KEY = 'select-row';
packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
+3 -3
View File
@@ -9,10 +9,10 @@ import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/Spre
import { exceedsMaxRecords } from '@/spreadsheet-import/utils/exceedsMaxRecords';
import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
import { ModalContent } from 'twenty-ui/layout';
import { ModalContent } from 'twenty-ui-deprecated/layout';
import { useLingui } from '@lingui/react/macro';
import { Radio } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { Radio } from 'twenty-ui-deprecated/input';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { type WorkBook } from 'xlsx-ugnis';
const StyledRadioContainer = styled.div`
packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx
+3 -3
View File
@@ -1,18 +1,18 @@
import { useCallback, useContext, useState } from 'react';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ModalContent } from 'twenty-ui/layout';
import { ModalContent } from 'twenty-ui-deprecated/layout';
import { ImportDataStep } from '@/spreadsheet-import/steps/components/ImportDataStep';
import { type SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
import { CircularProgressBar } from 'twenty-ui/feedback';
import { CircularProgressBar } from 'twenty-ui-deprecated/feedback';
import { MatchColumnsStep } from './MatchColumnsStep/MatchColumnsStep';
import { SelectHeaderStep } from './SelectHeaderStep/SelectHeaderStep';
import { SelectSheetStep } from './SelectSheetStep/SelectSheetStep';
import { UploadStep } from './UploadStep/UploadStep';
import { ValidationStep } from './ValidationStep/ValidationStep';
import { ThemeContext } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
type SpreadsheetImportStepperProps = {
nextStep: () => void;
packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer.tsx
+2 -2
View File
@@ -7,8 +7,8 @@ import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useLingui } from '@lingui/react/macro';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ModalHeader } from 'twenty-ui/layout';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { ModalHeader } from 'twenty-ui-deprecated/layout';
import { SpreadsheetImportStepper } from './SpreadsheetImportStepper';
export const SpreadsheetImportStepperContainer = () => {
packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro';
import { useCallback, useState } from 'react';
import { type WorkBook } from 'xlsx-ugnis';
import { ModalContent } from 'twenty-ui/layout';
import { ModalContent } from 'twenty-ui-deprecated/layout';
import { useComputeColumnSuggestionsAndAutoMatch } from '@/spreadsheet-import/hooks/useComputeColumnSuggestionsAndAutoMatch';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { useState } from 'react';
import { useDropzone } from 'react-dropzone';
import { read, type WorkBook } from 'xlsx-ugnis';
@@ -11,7 +11,7 @@ import { useDownloadFakeRecords } from '@/spreadsheet-import/steps/components/Up
import { readFileAsync } from '@/spreadsheet-import/utils/readFilesAsync';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Trans, useLingui } from '@lingui/react/macro';
import { MainButton } from 'twenty-ui/input';
import { MainButton } from 'twenty-ui-deprecated/input';
const StyledContainer = styled.div`
align-items: center;
packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
+5 -4
View File
@@ -21,13 +21,14 @@ import {
useMemo,
useState,
} from 'react';
import { ModalContent } from 'twenty-ui/layout';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ModalContent } from 'twenty-ui-deprecated/layout';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
// @ts-expect-error Todo: remove usage of react-data-grid`
import { type RowsChangeData } from 'react-data-grid';
import { isDefined } from 'twenty-shared/utils';
import { IconTrash } from 'twenty-ui/display';
import { Button, Toggle } from 'twenty-ui/input';
import { IconTrash } from 'twenty-ui-deprecated/display';
import { Button } from 'twenty-ui-deprecated/input';
import { Toggle } from 'twenty-ui/input';
import { generateColumns } from './components/columns';
import { type ImportedStructuredRowMetadata } from './types';
packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
+4 -3
View File
@@ -1,6 +1,6 @@
import { t } from '@lingui/core/macro';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
// @ts-expect-error // Todo: remove usage of react-data-grid
import { type Column, useRowSelection } from 'react-data-grid';
import { createPortal } from 'react-dom';
@@ -13,8 +13,9 @@ import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
import camelCase from 'lodash.camelcase';
import { isDefined } from 'twenty-shared/utils';
import { AppTooltip, TooltipDelay } from 'twenty-ui/display';
import { Checkbox, CheckboxVariant, Toggle } from 'twenty-ui/input';
import { AppTooltip, TooltipDelay } from 'twenty-ui-deprecated/display';
import { Checkbox, CheckboxVariant } from 'twenty-ui-deprecated/input';
import { Toggle } from 'twenty-ui/input';
import { type ImportedStructuredRowMetadata } from '@/spreadsheet-import/steps/components/ValidationStep/types';
const StyledHeaderContainer = styled.div`