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

[REFACTOR] Twenty UI multi barrel (#11301)

Browse Source 
# 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
This commit is contained in:
Paul Rastoin
2025-04-03 11:47:55 +02:00
committed by GitHub
parent 8c9fcfe5a4
commit 4a4e65fe4a
1009 changed files with 5757 additions and 2828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx
View File

@ -4,10 +4,10 @@ import { useCallback } from 'react';
import { Key } from 'ts-key-enum';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { Button } from 'twenty-ui';
import { DialogHotkeyScope } from '../types/DialogHotkeyScope';
import { isDefined } from 'twenty-shared/utils';
import { Button } from 'twenty-ui/input';
const StyledDialogOverlay = styled(motion.div)`
align-items: center;

12
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
View File

@ -4,18 +4,16 @@ import { useLingui } from '@lingui/react/macro';
import { isUndefined } from '@sniptt/guards';
import { ComponentPropsWithoutRef, ReactNode, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { isDefined } from 'twenty-shared/utils';
import {
IconAlertTriangle,
IconInfoCircle,
IconSquareRoundedCheck,
IconX,
LightButton,
LightIconButton,
MOBILE_VIEWPORT,
ProgressBar,
useProgressAnimation,
} from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
} from 'twenty-ui/display';
import { LightButton, LightIconButton } from 'twenty-ui/input';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { ProgressBar, useProgressAnimation } from 'twenty-ui/feedback';
export enum SnackBarVariant {
Default = 'default',

2
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx
View File

@ -1,12 +1,12 @@
import styled from '@emotion/styled';
import { AnimatePresence, motion } from 'framer-motion';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { useSnackBarManagerScopedStates } from '@/ui/feedback/snack-bar-manager/hooks/internal/useSnackBarManagerScopedStates';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { SnackBar } from './SnackBar';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
const StyledSnackBarContainer = styled.div`
display: flex;

11
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx
View File

@ -1,15 +1,14 @@
import { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import {
CatalogDecorator,
CatalogStory,
ComponentDecorator,
} from '@ui/testing';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { SnackBar, SnackBarVariant } from '../SnackBar';
import {
CatalogDecorator,
CatalogStory,
ComponentDecorator,
} from 'twenty-ui/testing';
const meta: Meta<typeof SnackBar> = {
title: 'UI/Feedback/SnackBarManager/SnackBar',

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

@ -1,8 +1,9 @@
import { FieldActorValue } from '@/object-record/record-field/types/FieldMetadata';
import { useMemo } from 'react';
import { ConnectedAccountProvider } from 'twenty-shared/types';
import { AvatarChip } from 'twenty-ui/components';
import {
AvatarChip,
IconApi,
IconCalendar,
IconCsv,
@ -14,8 +15,7 @@ import {
IconRobot,
IconSettingsAutomation,
IconWebhook,
} from 'twenty-ui';
import { ConnectedAccountProvider } from 'twenty-shared/types';
} from 'twenty-ui/display';
type ActorDisplayProps = Partial<FieldActorValue> & {
avatarUrl?: string | null;

3
packages/twenty-front/src/modules/ui/field/display/components/ArrayDisplay.tsx
View File

@ -1,7 +1,6 @@
import { Chip, ChipVariant } from 'twenty-ui';
import { FieldArrayValue } from '@/object-record/record-field/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import { Chip, ChipVariant } from 'twenty-ui/components';
type ArrayDisplayProps = {
value: FieldArrayValue;

3
packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx
View File

@ -1,5 +1,6 @@
import { styled } from '@linaria/react';
import { IconCheck, IconX, THEME_COMMON } from 'twenty-ui';
import { IconCheck, IconX } from 'twenty-ui/display';
import { THEME_COMMON } from 'twenty-ui/theme';
const spacing = THEME_COMMON.spacingMultiplicator * 1;
const iconSizeSm = THEME_COMMON.icon.size.sm;

3
packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx
View File

@ -1,8 +1,7 @@
import { MouseEvent } from 'react';
import { ContactLink } from 'twenty-ui';
import { EllipsisDisplay } from './EllipsisDisplay';
import { isDefined } from 'twenty-shared/utils';
import { ContactLink } from 'twenty-ui/navigation';
const validateEmail = (email: string) => {
// const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

3
packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx
View File

@ -1,10 +1,11 @@
import { useMemo } from 'react';
import { RoundedLink, THEME_COMMON } from 'twenty-ui';
import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
import { RoundedLink } from 'twenty-ui/navigation';
import { THEME_COMMON } from 'twenty-ui/theme';
type EmailsDisplayProps = {
value?: FieldEmailsValue;

2
packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx
View File

@ -1,5 +1,5 @@
import { isNonEmptyString } from '@sniptt/guards';
import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
import { LinkType, RoundedLink, SocialLink } from 'twenty-ui/navigation';
type LinkDisplayProps = {
value?: { url: string; label?: string };

2
packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx
View File

@ -1,5 +1,4 @@
import { useMemo } from 'react';
import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
@ -9,6 +8,7 @@ import {
getUrlHostnameOrThrow,
isDefined,
} from 'twenty-shared/utils';
import { LinkType, RoundedLink, SocialLink } from 'twenty-ui/navigation';
type LinksDisplayProps = {
value?: FieldLinksValue;

6
packages/twenty-front/src/modules/ui/field/display/components/MultiSelectDisplay.tsx
View File

@ -1,7 +1,9 @@
import { SelectOption, Tag, THEME_COMMON } from 'twenty-ui';
import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
import styled from '@emotion/styled';
import { SelectOption } from 'twenty-ui/input';
import { Tag } from 'twenty-ui/components';
import { THEME_COMMON } from 'twenty-ui/theme';
const spacing1 = THEME_COMMON.spacing(1);
const StyledContainer = styled.div`

2
packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx
View File

@ -1,7 +1,7 @@
import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js';
import { MouseEvent } from 'react';
import { ContactLink } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { ContactLink } from 'twenty-ui/navigation';
interface PhoneDisplayProps {
value: PhoneDisplayValueProps;

3
packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx
View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import React, { useMemo } from 'react';
import { RoundedLink, THEME_COMMON } from 'twenty-ui';
import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
@ -9,6 +8,8 @@ import { DEFAULT_PHONE_CALLING_CODE } from '@/object-record/record-field/meta-ty
import { parsePhoneNumber } from 'libphonenumber-js';
import { logError } from '~/utils/logError';
import { isDefined } from 'twenty-shared/utils';
import { RoundedLink } from 'twenty-ui/navigation';
import { THEME_COMMON } from 'twenty-ui/theme';
type PhonesDisplayProps = {
value?: FieldPhonesValue;

4
packages/twenty-front/src/modules/ui/field/display/components/SelectDisplay.tsx
View File

@ -1,4 +1,6 @@
import { IconComponent, Tag, ThemeColor } from 'twenty-ui';
import { IconComponent } from 'twenty-ui/display';
import { Tag } from 'twenty-ui/components';
import { ThemeColor } from 'twenty-ui/theme';
type SelectDisplayProps = {
color: ThemeColor | 'transparent';

2
packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx
View File

@ -1,5 +1,5 @@
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
import { OverflowingTextWithTooltip } from 'twenty-ui';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
type TextDisplayProps = {
text: string;

3
packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx
View File

@ -2,9 +2,8 @@ import styled from '@emotion/styled';
import { MouseEvent } from 'react';
import { checkUrlType } from '~/utils/checkUrlType';
import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
import { EllipsisDisplay } from './EllipsisDisplay';
import { LinkType, RoundedLink, SocialLink } from 'twenty-ui/navigation';
const StyledRawLink = styled(RoundedLink)`
overflow: hidden;

2
packages/twenty-front/src/modules/ui/field/display/components/__stories__/ActorDisplay.stories.tsx
View File

@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ActorDisplay } from '@/ui/field/display/components/ActorDisplay';
import { CatalogDecorator } from 'twenty-ui';
import { CatalogDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Display/ActorDisplay',

2
packages/twenty-front/src/modules/ui/field/display/components/__stories__/perf/EllipsisDisplay.perf.stories.tsx
View File

@ -1,8 +1,8 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta = {
title: 'UI/Input/EllipsisDisplay/EllipsisDisplay',

2
packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
View File

@ -12,8 +12,8 @@ import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDr
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useRecoilValue } from 'recoil';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
const StyledAddressContainer = styled.div`
padding: 4px 8px;

3
packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
View File

@ -2,11 +2,12 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useEffect, useMemo, useRef, useState } from 'react';
import { IMaskInput, IMaskInputProps } from 'react-imask';
import { IconComponent, TEXT_INPUT_STYLE } from 'twenty-ui';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
import { IconComponent } from 'twenty-ui/display';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
type StyledInputProps = React.ComponentProps<'input'> &
IMaskInputProps<HTMLInputElement>;

2
packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
View File

@ -1,5 +1,4 @@
import { useRef, useState } from 'react';
import { Nullable } from 'twenty-ui';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import {
@ -9,6 +8,7 @@ import {
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
} from '@/ui/input/components/internal/date/components/InternalDatePicker';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { Nullable } from 'twenty-ui/utilities';
export type DateInputProps = {
value: Nullable<Date>;

3
packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx
View File

@ -13,8 +13,9 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { isDefined } from 'twenty-shared/utils';
import { MenuItemMultiSelectTag, SelectOption } from 'twenty-ui';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { MenuItemMultiSelectTag } from 'twenty-ui/navigation';
import { SelectOption } from 'twenty-ui/input';
type MultiSelectInputProps = {
selectableListComponentInstanceId: string;

3
packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx
View File

@ -1,10 +1,11 @@
import { styled } from '@linaria/react';
import { useContext, useState } from 'react';
import { IconTwentyStarFilled, THEME_COMMON, ThemeContext } from 'twenty-ui';
import { useClearField } from '@/object-record/record-field/hooks/useClearField';
import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
import { IconTwentyStarFilled } from 'twenty-ui/display';
import { THEME_COMMON, ThemeContext } from 'twenty-ui/theme';
const StyledContainer = styled.div`
align-items: center;

2
packages/twenty-front/src/modules/ui/field/input/components/SelectInput.tsx
View File

@ -1,6 +1,6 @@
import { SelectInput as SelectBaseInput } from '@/ui/input/components/SelectInput';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { SelectOption } from 'twenty-ui';
import { SelectOption } from 'twenty-ui/input';
type SelectInputProps = {
selectableListComponentInstanceId: string;

2
packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
View File

@ -1,12 +1,12 @@
import styled from '@emotion/styled';
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { TEXT_INPUT_STYLE } from 'twenty-ui';
import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { isDefined } from 'twenty-shared/utils';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
export type TextAreaInputProps = {
disabled?: boolean;

2
packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx
View File

@ -1,9 +1,9 @@
import styled from '@emotion/styled';
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import { TEXT_INPUT_STYLE } from 'twenty-ui';
import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
export const StyledTextInput = styled.input`
margin: 0;

3
packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx
View File

@ -3,12 +3,13 @@ import { useRef, useState } from 'react';
import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
import TextareaAutosize from 'react-textarea-autosize';
import { Key } from 'ts-key-enum';
import { Button, IconArrowRight, RoundedIconButton } from 'twenty-ui';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { InputHotkeyScope } from '../types/InputHotkeyScope';
import { Button, RoundedIconButton } from 'twenty-ui/input';
import { IconArrowRight } from 'twenty-ui/display';
const MAX_ROWS = 5;

16
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -1,15 +1,6 @@
import styled from '@emotion/styled';
import { useMemo, useState } from 'react';
import { useRecoilValue } from 'recoil';
import {
IconApps,
IconButton,
IconButtonSize,
IconButtonVariant,
IconComponent,
LightIconButton,
useIcons,
} from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@ -24,6 +15,13 @@ import { arrayToChunks } from '~/utils/array/arrayToChunks';
import { t } from '@lingui/core/macro';
import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
import { IconApps, IconComponent, useIcons } from 'twenty-ui/display';
import {
IconButton,
IconButtonSize,
IconButtonVariant,
LightIconButton,
} from 'twenty-ui/input';
export type IconPickerProps = {
disabled?: boolean;

3
packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
View File

@ -4,9 +4,10 @@ import { Trans, useLingui } from '@lingui/react/macro';
import { isNonEmptyString } from '@sniptt/guards';
import React from 'react';
import { Button, IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
import { Button } from 'twenty-ui/input';
import { IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui/display';
const StyledContainer = styled.div`
display: flex;

2
packages/twenty-front/src/modules/ui/input/components/InputLabel.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { HTMLAttributes } from 'react';
import { Label } from 'twenty-ui';
import { Label } from 'twenty-ui/display';
type InputLabelProps = HTMLAttributes<HTMLLabelElement> & {
htmlFor?: string;

9
packages/twenty-front/src/modules/ui/input/components/Select.tsx
View File

@ -1,11 +1,5 @@
import styled from '@emotion/styled';
import { MouseEvent, useMemo, useRef, useState } from 'react';
import {
IconComponent,
MenuItem,
MenuItemSelect,
SelectOption,
} from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@ -17,6 +11,9 @@ import { SelectControl } from '@/ui/input/components/SelectControl';
import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
import { isDefined } from 'twenty-shared/utils';
import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
import { IconComponent } from 'twenty-ui/display';
import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
import { SelectOption } from 'twenty-ui/input';
export type SelectSizeVariant = 'small' | 'default';

7
packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx
View File

@ -2,11 +2,8 @@ import { SelectSizeVariant } from '@/ui/input/components/Select';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
import {
IconChevronDown,
OverflowingTextWithTooltip,
SelectOption,
} from 'twenty-ui';
import { IconChevronDown, OverflowingTextWithTooltip } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
export type SelectControlTextAccent = 'default' | 'placeholder';

4
packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx
View File

@ -7,7 +7,9 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
import { useEffect, useMemo, useRef, useState } from 'react';
import { Key } from 'ts-key-enum';
import { isDefined } from 'twenty-shared/utils';
import { MenuItemSelectTag, SelectOption, TagColor } from 'twenty-ui';
import { MenuItemSelectTag } from 'twenty-ui/navigation';
import { SelectOption } from 'twenty-ui/input';
import { TagColor } from 'twenty-ui/components';
interface SelectInputProps {
onOptionSelected: (selectedOption: SelectOption) => void;

3
packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
View File

@ -3,10 +3,9 @@ import { FocusEventHandler, useId } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { RGBA } from 'twenty-ui';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { InputHotkeyScope } from '../types/InputHotkeyScope';
import { RGBA } from 'twenty-ui/theme';
const MAX_ROWS = 5;

3
packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
View File

@ -11,9 +11,10 @@ import {
useRef,
useState,
} from 'react';
import { AutogrowWrapper, IconComponent, IconEye, IconEyeOff } from 'twenty-ui';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { AutogrowWrapper } from 'twenty-ui/utilities';
import { IconComponent, IconEye, IconEyeOff } from 'twenty-ui/display';
const StyledContainer = styled.div<
Pick<TextInputV2ComponentProps, 'fullWidth'>

2
packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx
View File

@ -8,7 +8,7 @@ import { isDefined } from 'twenty-shared/utils';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import styled from '@emotion/styled';
import { OverflowingTextWithTooltip } from 'twenty-ui';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
type InputProps = {
value?: string;

6
packages/twenty-front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
View File

@ -1,10 +1,14 @@
import { Meta, StoryObj } from '@storybook/react';
import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
import {
AutosizeTextInput,
AutosizeTextInputVariant,
} from '../AutosizeTextInput';
import {
CatalogDecorator,
CatalogStory,
ComponentDecorator,
} from 'twenty-ui/testing';
const meta: Meta<typeof AutosizeTextInput> = {
title: 'UI/Input/AutosizeTextInput/AutosizeTextInput',

2
packages/twenty-front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx
View File

@ -1,12 +1,12 @@
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';
import { ComponentDecorator } from 'twenty-ui';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
import { sleep } from '~/utils/sleep';
import { IconPicker, IconPickerProps } from '../IconPicker';
import { ComponentDecorator } from 'twenty-ui/testing';
type RenderProps = IconPickerProps;
const Render = (args: RenderProps) => {

2
packages/twenty-front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { workspaceLogoUrl } from '~/testing/mock-data/users';
import { ImageInput } from '../ImageInput';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof ImageInput> = {
title: 'UI/Input/ImageInput/ImageInput',

3
packages/twenty-front/src/modules/ui/input/components/__stories__/Select.stories.tsx
View File

@ -1,9 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import { useState } from 'react';
import { ComponentDecorator, IconPlus } from 'twenty-ui';
import { Select, SelectProps } from '../Select';
import { ComponentDecorator } from 'twenty-ui/testing';
import { IconPlus } from 'twenty-ui/display';
type RenderProps = SelectProps<string | number | boolean | null>;

2
packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx
View File

@ -1,10 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';
import { ComponentDecorator } from 'twenty-ui';
import { expect } from '@storybook/jest';
import { userEvent, within } from '@storybook/test';
import { TextArea, TextAreaProps } from '../TextArea';
import { ComponentDecorator } from 'twenty-ui/testing';
type RenderProps = TextAreaProps;

2
packages/twenty-front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx
View File

@ -1,8 +1,8 @@
import { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';
import { ComponentDecorator } from 'twenty-ui';
import { TextInput, TextInputProps } from '../TextInput';
import { ComponentDecorator } from 'twenty-ui/testing';
type RenderProps = TextInputProps;

2
packages/twenty-front/src/modules/ui/input/components/__stories__/TextInputV2.stories.tsx
View File

@ -1,11 +1,11 @@
import { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';
import { ComponentDecorator } from 'twenty-ui';
import {
TextInputV2,
TextInputV2ComponentProps,
} from '@/ui/input/components/TextInputV2';
import { ComponentDecorator } from 'twenty-ui/testing';
type RenderProps = TextInputV2ComponentProps;

2
packages/twenty-front/src/modules/ui/input/components/__stories__/TitleInput.stories.tsx
View File

@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { TitleInput } from '@/ui/input/components/TitleInput';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof TitleInput> = {
title: 'UI/Input/TitleInput',

3
packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx
View File

@ -1,9 +1,10 @@
import { useMemo } from 'react';
import { IconCircleOff, IconComponentProps, SelectOption } from 'twenty-ui';
import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { Select } from '@/ui/input/components/Select';
import { IconCircleOff, IconComponentProps } from 'twenty-ui/display';
import { SelectOption } from 'twenty-ui/input';
export const CountrySelect = ({
label,

2
packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx
View File

@ -1,6 +1,5 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconChevronDown } from 'twenty-ui';
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@ -9,6 +8,7 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { CurrencyPickerHotkeyScope } from '../types/CurrencyPickerHotkeyScope';
import { CurrencyPickerDropdownSelect } from './CurrencyPickerDropdownSelect';
import { IconChevronDown } from 'twenty-ui/display';
const StyledDropdownButtonContainer = styled.div`
align-items: center;

3
packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
View File

@ -4,9 +4,8 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui';
import { Currency } from './CurrencyPickerDropdownButton';
import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui/navigation';
export const CurrencyPickerDropdownSelect = ({
currencies,

3
packages/twenty-front/src/modules/ui/input/components/internal/date/components/AbsoluteDatePickerHeader.tsx
View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { DateTime } from 'luxon';
import { IconChevronLeft, IconChevronRight, LightIconButton } from 'twenty-ui';
import { Select } from '@/ui/input/components/Select';
import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput';
@ -10,6 +9,8 @@ import {
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
} from './InternalDatePicker';
import { IconChevronLeft, IconChevronRight } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
const StyledCustomDatePickerHeader = styled.div`
align-items: center;

10
packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
View File

@ -1,11 +1,6 @@
import styled from '@emotion/styled';
import { DateTime } from 'luxon';
import ReactDatePicker from 'react-datepicker';
import {
IconCalendarX,
MenuItemLeftContent,
StyledHoverableMenuItemBase,
} from 'twenty-ui';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@ -22,6 +17,11 @@ import { t } from '@lingui/core/macro';
import { useContext } from 'react';
import 'react-datepicker/dist/react-datepicker.css';
import { isDefined } from 'twenty-shared/utils';
import { IconCalendarX } from 'twenty-ui/display';
import {
MenuItemLeftContent,
StyledHoverableMenuItemBase,
} from 'twenty-ui/navigation';
export const MONTH_AND_YEAR_DROPDOWN_ID = 'date-picker-month-and-year-dropdown';
export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =

2
packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx
View File

@ -1,9 +1,9 @@
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';
import { ComponentDecorator } from 'twenty-ui';
import { DateTimePicker } from '../InternalDatePicker';
import { isDefined } from 'twenty-shared/utils';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof DateTimePicker> = {
title: 'UI/Input/Internal/InternalDatePicker',

2
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
View File

@ -5,7 +5,6 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useEffect, useState } from 'react';
import { IconChevronDown, IconWorld } from 'twenty-ui';
import { CountryPickerHotkeyScope } from '../types/CountryPickerHotkeyScope';
@ -13,6 +12,7 @@ import { PhoneCountryPickerDropdownSelect } from './PhoneCountryPickerDropdownSe
import 'react-phone-number-input/style.css';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronDown, IconWorld } from 'twenty-ui/display';
type StyledDropdownButtonProps = {
isUnfolded: boolean;

2
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx
View File

@ -7,7 +7,7 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import 'react-phone-number-input/style.css';
import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui';
import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui/navigation';
const StyledIconContainer = styled.div`
align-items: center;

2
packages/twenty-front/src/modules/ui/input/editor/components/CustomSideMenu.tsx
View File

@ -10,7 +10,7 @@ import {
SideMenuController,
} from '@blocknote/react';
import styled from '@emotion/styled';
import { IconColorSwatch, IconPlus, IconTrash } from 'twenty-ui';
import { IconColorSwatch, IconPlus, IconTrash } from 'twenty-ui/display';
type CustomSideMenuProps = {
editor: typeof BLOCK_SCHEMA.BlockNoteEditor;

2
packages/twenty-front/src/modules/ui/input/editor/components/CustomSideMenuOptions.tsx
View File

@ -1,6 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from 'twenty-ui/display';
const StyledContainer = styled.div<{ Variant: Variants }>`
color: ${({ theme, Variant }) =>

3
packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
View File

@ -1,12 +1,13 @@
import { SuggestionMenuProps } from '@blocknote/react';
import styled from '@emotion/styled';
import { IconComponent, MenuItemSuggestion } from 'twenty-ui';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useFloating } from '@floating-ui/react';
import { createPortal } from 'react-dom';
import { IconComponent } from 'twenty-ui/display';
import { MenuItemSuggestion } from 'twenty-ui/navigation';
export type SuggestionItem = {
title: string;

2
packages/twenty-front/src/modules/ui/input/hooks/__tests__/useIconPicker.test.tsx
View File

@ -1,9 +1,9 @@
import { act } from 'react-dom/test-utils';
import { renderHook } from '@testing-library/react';
import { RecoilRoot } from 'recoil';
import { Icon123, IconApps } from 'twenty-ui';
import { useIconPicker } from '@/ui/input/hooks/useIconPicker';
import { Icon123, IconApps } from 'twenty-ui/display';
describe('useIconPicker', () => {
it('should return correct iconPickerState', async () => {

2
packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx
View File

@ -1,6 +1,6 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { MenuItem } from 'twenty-ui';
import { MenuItem } from 'twenty-ui/navigation';
const StyledCreateNewButton = styled(MenuItem)<{ hovered?: boolean }>`
${({ hovered, theme }) =>

3
packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts
View File

@ -1,4 +1,5 @@
import { createState, IconApps, IconComponent } from 'twenty-ui';
import { createState } from 'twenty-ui/utilities';
import { IconApps, IconComponent } from 'twenty-ui/display';
type IconPickerState = {
Icon: IconComponent;

4
packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableItem.stories.tsx
View File

@ -1,8 +1,10 @@
import { DragDropContext, Droppable } from '@hello-pangea/dnd';
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator, IconBell, MenuItemDraggable } from 'twenty-ui';
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
import { ComponentDecorator } from 'twenty-ui/testing';
import { IconBell } from 'twenty-ui/display';
import { MenuItemDraggable } from 'twenty-ui/navigation';
const meta: Meta<typeof DraggableItem> = {
title: 'UI/Layout/DraggableList/DraggableItem',

4
packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableList.stories.tsx
View File

@ -2,7 +2,9 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator, IconBell, MenuItemDraggable } from 'twenty-ui';
import { ComponentDecorator } from 'twenty-ui/testing';
import { IconBell } from 'twenty-ui/display';
import { MenuItemDraggable } from 'twenty-ui/navigation';
const meta: Meta<typeof DraggableList> = {
title: 'UI/Layout/DraggableList/DraggableList',

3
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx
View File

@ -1,7 +1,8 @@
import { Avatar, AvatarProps, IconComponent, LightIconButton } from 'twenty-ui';
import { MouseEvent, ReactElement } from 'react';
import styled from '@emotion/styled';
import { useTheme } from '@emotion/react';
import { Avatar, AvatarProps, IconComponent } from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
const StyledNonClickableStartIcon = styled.div`
align-items: center;

2
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
View File

@ -2,10 +2,10 @@ import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
import 'react-phone-number-input/style.css';
import { TEXT_INPUT_STYLE } from 'twenty-ui';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
const StyledInput = styled.input<{
withRightComponent?: boolean;

2
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx
View File

@ -1,7 +1,7 @@
import { useInputFocusWithoutScrollOnMount } from '@/ui/input/hooks/useInputFocusWithoutScrollOnMount';
import styled from '@emotion/styled';
import { forwardRef, InputHTMLAttributes } from 'react';
import { TEXT_INPUT_STYLE } from 'twenty-ui';
import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
const StyledDropdownMenuSearchInputContainer = styled.div`
align-items: center;

2
packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx
View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { Label } from 'twenty-ui';
import { Label } from 'twenty-ui/display';
export const StyledDropdownMenuSubheader = styled(Label)`
background-color: ${({ theme }) => theme.background.transparent.lighter};

17
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -3,15 +3,6 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, waitFor, within } from '@storybook/test';
import { PlayFunction } from '@storybook/types';
import { useState } from 'react';
import {
Avatar,
Button,
ComponentDecorator,
IconChevronLeft,
MenuItem,
MenuItemMultiSelectAvatar,
MenuItemSelectAvatar,
} from 'twenty-ui';
import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
@ -23,6 +14,14 @@ import { DropdownMenuSearchInput } from '../DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { Avatar, IconChevronLeft } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { ComponentDecorator } from 'twenty-ui/testing';
import {
MenuItem,
MenuItemMultiSelectAvatar,
MenuItemSelectAvatar,
} from 'twenty-ui/navigation';
const meta: Meta<typeof Dropdown> = {
title: 'UI/Layout/Dropdown/Dropdown',

17
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx
View File

@ -1,19 +1,18 @@
import { Meta, StoryObj } from '@storybook/react';
import {
AVATAR_URL_MOCK,
Avatar,
ComponentDecorator,
IconChevronLeft,
IconChevronRight,
IconPlus,
MenuItem,
} from 'twenty-ui';
import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { AVATAR_URL_MOCK, ComponentDecorator } from 'twenty-ui/testing';
import {
Avatar,
IconChevronLeft,
IconChevronRight,
IconPlus,
} from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
const meta: Meta<typeof DropdownMenuHeader> = {
title: 'UI/Layout/Dropdown/DropdownMenuHeader',

2
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuInput.stories.tsx
View File

@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { DropdownMenuInput } from '../DropdownMenuInput';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof DropdownMenuInput> = {
title: 'UI/Layout/Dropdown/DropdownMenuInput',

3
packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
View File

@ -1,5 +1,4 @@
import { createState } from '@ui/utilities/state/utils/createState';
import { createState } from 'twenty-ui/utilities';
export const activeDropdownFocusIdState = createState<string | null>({
key: 'activeDropdownFocusIdState',
defaultValue: null,

3
packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
View File

@ -1,5 +1,4 @@
import { createState } from '@ui/utilities/state/utils/createState';
import { createState } from 'twenty-ui/utilities';
export const previousDropdownFocusIdState = createState<string | null>({
key: 'previousDropdownFocusIdState',
defaultValue: null,

8
packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx
View File

@ -1,14 +1,12 @@
import styled from '@emotion/styled';
import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
import {
AnimatedContainer,
ChipSize,
OverflowingTextWithTooltip,
} from 'twenty-ui';
import { ExpandedListDropdown } from '@/ui/layout/expandable-list/components/ExpandedListDropdown';
import { isFirstOverflowingChildElement } from '@/ui/layout/expandable-list/utils/isFirstOverflowingChildElement';
import { isDefined } from 'twenty-shared/utils';
import { AnimatedContainer } from 'twenty-ui/utilities';
import { ChipSize } from 'twenty-ui/components';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
const StyledContainer = styled.div`
align-items: center;

6
packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx
View File

@ -4,8 +4,10 @@ import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
import { ComponentDecorator, MAIN_COLOR_NAMES, Tag } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { Tag } from 'twenty-ui/components';
import { ComponentDecorator } from 'twenty-ui/testing';
import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
const StyledContainer = styled.div`
padding: ${({ theme }) => theme.spacing(1)};
@ -58,7 +60,7 @@ export const WithExpandedList: Story = {
const rootCanvas = within(root);
const chipCount = await rootCanvas.findByText('+3');
const chipCount = await rootCanvas.findByText(/^\+\d+$/);
await userEvent.click(chipCount);

4
packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
View File

@ -8,7 +8,9 @@ import {
} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { IconButton, IconX, useIsMobile } from 'twenty-ui';
import { IconButton } from 'twenty-ui/input';
import { IconX } from 'twenty-ui/display';
import { useIsMobile } from 'twenty-ui/utilities';
type FullScreenContainerProps = {
children: JSX.Element | JSX.Element[];

5
packages/twenty-front/src/modules/ui/layout/fullscreen/components/__stories__/FullScreenContainer.stories.tsx
View File

@ -1,8 +1,11 @@
import { FullScreenContainer } from '@/ui/layout/fullscreen/components/FullScreenContainer';
import styled from '@emotion/styled';
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator, ComponentWithRouterDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import {
ComponentDecorator,
ComponentWithRouterDecorator,
} from 'twenty-ui/testing';
const meta: Meta<typeof FullScreenContainer> = {
title: 'UI/Layout/FullScreenContainer',

12
packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
View File

@ -1,21 +1,15 @@
import styled from '@emotion/styled';
import { AnimatePresence, LayoutGroup } from 'framer-motion';
import { ReactNode, useState } from 'react';
import {
Button,
ButtonAccent,
H1Title,
H1TitleFontColor,
Section,
SectionAlignment,
SectionFontColor,
} from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { TextInput } from '@/ui/input/components/TextInput';
import { Modal, ModalVariants } from '@/ui/layout/modal/components/Modal';
import { useLingui } from '@lingui/react/macro';
import { Button, ButtonAccent } from 'twenty-ui/input';
import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
import { Section, SectionAlignment, SectionFontColor } from 'twenty-ui/layout';
export type ConfirmationModalProps = {
isOpen: boolean;

2
packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx
View File

@ -1,8 +1,8 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { ConfirmationModal } from '../ConfirmationModal';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof ConfirmationModal> = {
title: 'UI/Layout/Modal/ConfirmationModal',

2
packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx
View File

@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { Modal } from '../Modal';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof Modal> = {
title: 'UI/Layout/Modal/Modal',

12
packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
View File

@ -1,12 +1,3 @@
import {
AnimatedButton,
AppTooltip,
getOsControlSymbol,
TooltipDelay,
TooltipPosition,
useIsMobile,
} from 'twenty-ui';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { useTheme } from '@emotion/react';
@ -15,6 +6,9 @@ import { i18n } from '@lingui/core';
import { t } from '@lingui/core/macro';
import { motion } from 'framer-motion';
import { useRecoilValue } from 'recoil';
import { AnimatedButton } from 'twenty-ui/input';
import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
const StyledButtonWrapper = styled.div`
z-index: 30;

2
packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
View File

@ -18,7 +18,7 @@ import { Global, css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
import { Outlet } from 'react-router-dom';
import { useScreenSize } from 'twenty-ui';
import { useScreenSize } from 'twenty-ui/utilities';
const StyledLayout = styled.div`
background: ${({ theme }) => theme.background.noisy};

4
packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
View File

@ -1,6 +1,8 @@
import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission';
import { useLingui } from '@lingui/react/macro';
import { Button, IconPlus, useIsMobile } from 'twenty-ui';
import { Button } from 'twenty-ui/input';
import { IconPlus } from 'twenty-ui/display';
import { useIsMobile } from 'twenty-ui/utilities';
type PageAddButtonProps = {
onClick?: () => void;

2
packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx
View File

@ -1,8 +1,8 @@
import styled from '@emotion/styled';
import { ReactNode } from 'react';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { PagePanel } from './PagePanel';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
type PageBodyProps = {
children: ReactNode;

14
packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
View File

@ -2,18 +2,18 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ReactNode } from 'react';
import { useRecoilValue } from 'recoil';
import {
IconComponent,
IconX,
LightIconButton,
MOBILE_VIEWPORT,
OverflowingTextWithTooltip,
} from 'twenty-ui';
import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import {
IconComponent,
IconX,
OverflowingTextWithTooltip,
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
export const PAGE_BAR_MIN_HEIGHT = 40;

4
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
View File

@ -1,5 +1,4 @@
import styled from '@emotion/styled';
import { Button, IconCheckbox, IconNotes, IconPlus, MenuItem } from 'twenty-ui';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
@ -12,6 +11,9 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { isWorkflowSubObjectMetadata } from '@/object-metadata/utils/isWorkflowSubObjectMetadata';
import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission';
import { Dropdown } from '../../dropdown/components/Dropdown';
import { Button } from 'twenty-ui/input';
import { IconCheckbox, IconNotes, IconPlus } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
const StyledContainer = styled.div`
z-index: 1;

7
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
View File

@ -5,12 +5,17 @@ import { Trans } from '@lingui/react/macro';
import { ChangeEvent, ReactNode, useRef } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { isDefined } from 'twenty-shared/utils';
import { AppTooltip, Avatar, AvatarType, IconComponent } from 'twenty-ui';
import { v4 as uuidV4 } from 'uuid';
import {
beautifyExactDateTime,
beautifyPastDateRelativeToNow,
} from '~/utils/date-utils';
import {
AppTooltip,
Avatar,
AvatarType,
IconComponent,
} from 'twenty-ui/display';
type ShowPageSummaryCardProps = {
avatarPlaceholder: string;

3
packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
View File

@ -1,5 +1,4 @@
import { createState } from '@ui/utilities/state/utils/createState';
import { createState } from 'twenty-ui/utilities';
export const isDefaultLayoutAuthModalVisibleState = createState<boolean>({
key: 'isDefaultLayoutAuthModalVisibleState',
defaultValue: true,

3
packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
View File

@ -4,7 +4,8 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ReactElement } from 'react';
import { Link } from 'react-router-dom';
import { Avatar, IconComponent, Pill } from 'twenty-ui';
import { Avatar, IconComponent } from 'twenty-ui/display';
import { Pill } from 'twenty-ui/components';
type TabProps = {
id: string;

2
packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
View File

@ -7,8 +7,8 @@ import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/
import styled from '@emotion/styled';
import * as React from 'react';
import { useEffect } from 'react';
import { IconComponent } from 'twenty-ui';
import { Tab } from './Tab';
import { IconComponent } from 'twenty-ui/display';
export type SingleTabProps<T extends string = string> = {
title: string;

8
packages/twenty-front/src/modules/ui/layout/tab/components/__stories__/Tab.stories.tsx
View File

@ -1,12 +1,12 @@
import { Meta, StoryObj } from '@storybook/react';
import { Tab } from '../Tab';
import {
CatalogDecorator,
CatalogStory,
ComponentDecorator,
IconCheckbox,
} from 'twenty-ui';
import { Tab } from '../Tab';
} from 'twenty-ui/testing';
import { IconCheckbox } from 'twenty-ui/display';
const meta: Meta<typeof Tab> = {
title: 'UI/Layout/Tab/Tab',

3
packages/twenty-front/src/modules/ui/layout/tab/components/__stories__/Tablist.stories.tsx
View File

@ -1,8 +1,9 @@
import { Meta, StoryObj } from '@storybook/react';
import { expect, within } from '@storybook/test';
import { ComponentWithRouterDecorator, IconCheckbox } from 'twenty-ui';
import { TabList } from '../TabList';
import { ComponentWithRouterDecorator } from 'twenty-ui/testing';
import { IconCheckbox } from 'twenty-ui/display';
const tabs = [
{

2
packages/twenty-front/src/modules/ui/layout/tab/types/RecordLayoutTab.ts
View File

@ -1,6 +1,6 @@
import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
import { TabVisibilityConfig } from '@/ui/layout/tab/types/TabVisibilityConfig';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from 'twenty-ui/display';
export type RecordLayoutTab = {
title: string;

2
packages/twenty-front/src/modules/ui/layout/table/components/SortableTableHeader.tsx
View File

@ -2,7 +2,7 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { sortedFieldByTableFamilyState } from '@/ui/layout/table/states/sortedFieldByTableFamilyState';
import { TableSortValue } from '@/ui/layout/table/types/TableSortValue';
import { useRecoilState } from 'recoil';
import { IconArrowDown, IconArrowUp, IconComponent } from 'twenty-ui';
import { IconArrowDown, IconArrowUp, IconComponent } from 'twenty-ui/display';
export const SortableTableHeader = ({
tableId,

2
packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx
View File

@ -1,7 +1,7 @@
import isPropValid from '@emotion/is-prop-valid';
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
const StyledTableRow = styled('div', {
shouldForwardProp: (prop) =>

2
packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx
View File

@ -1,8 +1,8 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ReactNode, useState } from 'react';
import { IconChevronDown, IconChevronUp, Label } from 'twenty-ui';
import { TableBody } from './TableBody';
import { IconChevronDown, IconChevronUp, Label } from 'twenty-ui/display';
type TableSectionProps = {
children: ReactNode;

2
packages/twenty-front/src/modules/ui/layout/table/components/__stories__/Table.stories.tsx
View File

@ -1,11 +1,11 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { Table } from '../Table';
import { TableCell } from '../TableCell';
import { TableHeader } from '../TableHeader';
import { TableRow } from '../TableRow';
import { TableSection } from '../TableSection';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof Table> = {
title: 'UI/Layout/Table/Table',

2
packages/twenty-front/src/modules/ui/layout/table/types/TableFieldMetadata.ts
View File

@ -1,5 +1,5 @@
import { MessageDescriptor } from '@lingui/core';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from 'twenty-ui/display';
export type TableFieldMetadata<ItemType> = {
fieldLabel: MessageDescriptor;

2
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx
View File

@ -4,7 +4,7 @@ import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { ReactNode } from 'react';
import { Link } from 'react-router-dom';
import { IconChevronLeft } from 'twenty-ui';
import { IconChevronLeft } from 'twenty-ui/display';
export type MobileBreadcrumbProps = {
className?: string;

2
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx
View File

@ -1,8 +1,8 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { Breadcrumb } from '../Breadcrumb';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof Breadcrumb> = {
title: 'UI/Navigation/Breadcrumb/Breadcrumb',

7
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx
View File

@ -7,13 +7,14 @@ import {
IconChevronRight,
IconComponent,
IconDotsVertical,
LightIconButton,
LightIconButtonProps,
} from 'twenty-ui/display';
import { LightIconButton, LightIconButtonProps } from 'twenty-ui/input';
import {
MenuItemAccent,
MenuItemLeftContent,
StyledHoverableMenuItemBase,
StyledMenuItemLeftContent,
} from 'twenty-ui';
} from 'twenty-ui/navigation';
export type MenuItemIconButton = {
Wrapper?: FunctionComponent<{ iconButton: ReactElement }>;

10
packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/__stories__/NavigationBar.stories.tsx
View File

@ -1,14 +1,14 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ComponentDecorator } from 'twenty-ui/testing';
import {
ComponentDecorator,
IconCheckbox,
IconList,
IconSearch,
IconSettings,
NavigationBar,
} from 'twenty-ui';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
} from 'twenty-ui/display';
import { NavigationBar } from 'twenty-ui/navigation';
const meta: Meta<typeof NavigationBar> = {
title: 'UI/Navigation/NavigationBar/NavigationBar',

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx
View File

@ -1,4 +1,3 @@
import { Avatar } from 'twenty-ui';
import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
import {
@ -10,6 +9,7 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useRecoilValue } from 'recoil';
import { useTheme } from '@emotion/react';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { Avatar } from 'twenty-ui/display';
export const MultiWorkspaceDropdownClickableComponent = () => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);

Some files were not shown because too many files have changed in this diff Show More