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

refactor: move @/ui/display/icon to twenty-ui (#4820)

Browse Source 
Split from https://github.com/twentyhq/twenty/pull/4518

Part of https://github.com/twentyhq/twenty/issues/4766
This commit is contained in:
Thaïs
2024-04-12 15:30:48 +02:00
committed by GitHub
parent 280229bad6
commit 9f83cc1426
142 changed files with 289 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx
View File

@ -1,5 +1,6 @@
import { getDefaultReactSlashMenuItems } from '@blocknote/react';
import {
IconComponent,
IconFile,
IconH1,
IconH2,
@ -11,7 +12,6 @@ import {
IconTable,
} from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu';
import { blockSchema } from './schema';

2
packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx
View File

@ -1,6 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
IconComponent,
IconFile,
IconFileText,
IconFileZip,
@ -12,7 +13,6 @@ import {
} from 'twenty-ui';
import { AttachmentType } from '@/activities/files/types/Attachment';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
const StyledIconContainer = styled.div<{ background: string }>`
align-items: center;

2
packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx
View File

@ -4,6 +4,7 @@ import { MockedProvider } from '@apollo/client/testing';
import { expect } from '@storybook/test';
import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, useRecoilValue } from 'recoil';
import { iconsState } from 'twenty-ui';
import { useAuth } from '@/auth/hooks/useAuth';
import { authProvidersState } from '@/client-config/states/authProvidersState';
@ -12,7 +13,6 @@ import { isDebugModeState } from '@/client-config/states/isDebugModeState';
import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
import { supportChatState } from '@/client-config/states/supportChatState';
import { telemetryState } from '@/client-config/states/telemetryState';
import { iconsState } from '@/ui/display/icon/states/iconsState';
import { email, mocks, password, results, token } from '../__mocks__/useAuth';

2
packages/twenty-front/src/modules/auth/hooks/useAuth.ts
View File

@ -7,6 +7,7 @@ import {
useRecoilState,
useSetRecoilState,
} from 'recoil';
import { iconsState } from 'twenty-ui';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@ -20,7 +21,6 @@ import { isDebugModeState } from '@/client-config/states/isDebugModeState';
import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
import { supportChatState } from '@/client-config/states/supportChatState';
import { telemetryState } from '@/client-config/states/telemetryState';
import { iconsState } from '@/ui/display/icon/states/iconsState';
import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import {

2
packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
View File

@ -4,13 +4,13 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { useRecoilState } from 'recoil';
import { IconGoogle } from 'twenty-ui';
import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword.ts';
import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm.ts';
import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle.ts';
import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts';
import { authProvidersState } from '@/client-config/states/authProvidersState.ts';
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { Loader } from '@/ui/feedback/loader/components/Loader';
import { MainButton } from '@/ui/input/button/components/MainButton';
import { TextInput } from '@/ui/input/components/TextInput';

3
packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
View File

@ -1,8 +1,7 @@
import { isNonEmptyString } from '@sniptt/guards';
import { useRecoilValue } from 'recoil';
import { IconArrowUpRight } from 'twenty-ui';
import { IconArrowUpRight, IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand';

2
packages/twenty-front/src/modules/command-menu/types/Command.ts
View File

@ -1,4 +1,4 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
export enum CommandType {
Navigate = 'Navigate',

16
packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx
View File

@ -1,5 +1,7 @@
import { ErrorInfo, ReactNode } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { ThemeProvider } from '@emotion/react';
import { THEME_LIGHT } from 'twenty-ui';
import { GenericErrorFallback } from '@/error-handler/components/GenericErrorFallback';
@ -9,11 +11,13 @@ export const AppErrorBoundary = ({ children }: { children: ReactNode }) => {
};
return (
<ErrorBoundary
FallbackComponent={GenericErrorFallback}
onError={handleError}
>
{children}
</ErrorBoundary>
<ThemeProvider theme={THEME_LIGHT}>
<ErrorBoundary
FallbackComponent={GenericErrorFallback}
onError={handleError}
>
{children}
</ErrorBoundary>
</ThemeProvider>
);
};

9
packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
View File

@ -1,11 +1,16 @@
import { useNavigate } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { IconCheckbox, IconList, IconSearch, IconSettings } from 'twenty-ui';
import {
IconCheckbox,
IconComponent,
IconList,
IconSearch,
IconSettings,
} from 'twenty-ui';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { AppPath } from '@/types/AppPath';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { NavigationBar } from '@/ui/navigation/navigation-bar/components/NavigationBar';
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';

2
packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
View File

@ -1,9 +1,9 @@
import { useLocation, useNavigate } from 'react-router-dom';
import { useIcons } from 'twenty-ui';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { GraphQLView } from '@/views/types/GraphQLView';
import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';

3
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
View File

@ -1,5 +1,6 @@
import { IconComponent } from 'twenty-ui';
import { EntityChip } from '@/ui/display/chip/components/EntityChip';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Filter } from '../types/Filter';

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
View File

@ -1,8 +1,8 @@
import { useRecoilValue } from 'recoil';
import { useIcons } from 'twenty-ui';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts
View File

@ -1,4 +1,4 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
import { FilterType } from './FilterType';

3
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -1,9 +1,8 @@
import { IconChevronDown } from 'twenty-ui';
import { IconChevronDown, useIcons } from 'twenty-ui';
import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { LightButton } from '@/ui/input/button/components/LightButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';

2
packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts
View File

@ -1,4 +1,4 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
export type RecordBoardColumnAction = {
id: string;

3
packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts
View File

@ -1,8 +1,7 @@
import { useContext } from 'react';
import { IconPencil } from 'twenty-ui';
import { IconComponent, IconPencil } from 'twenty-ui';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
import { FieldContext } from '../contexts/FieldContext';

2
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
View File

@ -1,4 +1,5 @@
import { useContext } from 'react';
import { useIcons } from 'twenty-ui';
import { FieldDisplay } from '@/object-record/record-field/components/FieldDisplay';
import { FieldInput } from '@/object-record/record-field/components/FieldInput';
@ -9,7 +10,6 @@ import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFie
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { useInlineCell } from '../hooks/useInlineCell';

2
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
View File

@ -3,9 +3,9 @@ import { Tooltip } from 'react-tooltip';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { IconComponent } from 'twenty-ui';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';

3
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
View File

@ -1,4 +1,5 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {

2
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx
View File

@ -1,8 +1,8 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
type RecordDetailRelationRecordsListEmptyStateProps = {
relationObjectMetadataItem: ObjectMetadataItem;

2
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
View File

@ -4,6 +4,7 @@ import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import {
IconChevronDown,
IconComponent,
IconDotsVertical,
IconTrash,
IconUnlink,
@ -30,7 +31,6 @@ import { RecordDetailRecordsListItem } from '@/object-record/record-show/record-
import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

2
packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx
View File

@ -1,9 +1,9 @@
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { useIcons } from 'twenty-ui';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';

3
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -2,13 +2,12 @@ import { useCallback } from 'react';
import { Link } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconSettings } from 'twenty-ui';
import { IconSettings, useIcons } from 'twenty-ui';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';

2
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
const StyledEditButtonContainer = styled(motion.div)`

2
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
const StyledEditButtonContainer = styled(motion.div)`

3
packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
View File

@ -1,10 +1,9 @@
import { useRef } from 'react';
import { isNonEmptyString } from '@sniptt/guards';
import { Key } from 'ts-key-enum';
import { IconPlus } from 'twenty-ui';
import { IconComponent, IconPlus } from 'twenty-ui';
import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

3
packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts
View File

@ -1,12 +1,11 @@
import { isNonEmptyString } from '@sniptt/guards';
import { IconComponent, useIcons } from 'twenty-ui';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords';
import { getSpreadSheetValidation } from '@/object-record/spreadsheet-import/util/getSpreadSheetValidation';
import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport';
import { SpreadsheetOptions, Validation } from '@/spreadsheet-import/types';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';

3
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
View File

@ -1,7 +1,7 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconChevronRight } from 'twenty-ui';
import { IconChevronRight, IconGoogleCalendar } from 'twenty-ui';
import { CalendarChannel } from '@/accounts/types/CalendarChannel';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
@ -14,7 +14,6 @@ import {
SettingsAccountsSynchronizationStatusProps,
} from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
const StyledRowRightContainer = styled.div`

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
View File

@ -1,12 +1,12 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { IconGoogle } from 'twenty-ui';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { Status } from '@/ui/display/status/components/Status';
import { SettingsListCard } from '../../components/SettingsListCard';

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { IconGoogle } from 'twenty-ui';
import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { Button } from '@/ui/input/button/components/Button';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';

3
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
View File

@ -1,7 +1,7 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconChevronRight } from 'twenty-ui';
import { IconChevronRight, IconGmail } from 'twenty-ui';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { MessageChannel } from '@/accounts/types/MessageChannel';
@ -14,7 +14,6 @@ import {
SettingsAccountsSynchronizationStatusProps,
} from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { IconGmail } from '@/ui/display/icon/components/IconGmail';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
const StyledRowRightContainer = styled.div`

3
packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
View File

@ -1,10 +1,9 @@
import { ComponentType } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconPlus } from 'twenty-ui';
import { IconComponent, IconPlus } from 'twenty-ui';
import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Card } from '@/ui/layout/card/components/Card';
import { CardFooter } from '@/ui/layout/card/components/CardFooter';

2
packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
View File

@ -1,8 +1,8 @@
import { ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { CardContent } from '@/ui/layout/card/components/CardContent';
const StyledRow = styled(CardContent)`

3
packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
View File

@ -1,9 +1,8 @@
import { ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconChevronRight, Pill } from 'twenty-ui';
import { IconChevronRight, IconComponent, Pill } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';

2
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
View File

@ -1,9 +1,9 @@
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { Select } from '@/ui/input/components/Select';
import { TextInput } from '@/ui/input/components/TextInput';

7
packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
View File

@ -1,6 +1,9 @@
import { IconLayersLinked, IconRelationOneToOne } from 'twenty-ui';
import {
IconComponent,
IconLayersLinked,
IconRelationOneToOne,
} from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { RelationMetadataType } from '~/generated-metadata/graphql';
import OneToManySvg from '../assets/OneToMany.svg';

2
packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts
View File

@ -1,4 +1,5 @@
import {
IconComponent,
IconCurrencyDollar,
IconCurrencyEuro,
IconCurrencyFrank,
@ -8,7 +9,6 @@ import {
} from 'twenty-ui';
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
export const SETTINGS_FIELD_CURRENCY_CODES: Record<
CurrencyCode,

4
packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts
View File

@ -2,6 +2,7 @@ import {
IconCalendarEvent,
IconCheck,
IconCoins,
IconComponent,
IconJson,
IconKey,
IconLink,
@ -13,14 +14,13 @@ import {
IconTag,
IconTags,
IconTextSize,
IconTwentyStar,
IconUser,
} from 'twenty-ui';
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import { DEFAULT_DATE_VALUE } from '@/settings/data-model/constants/DefaultDateValue';
import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FieldMetadataType } from '~/generated-metadata/graphql';
DEFAULT_DATE_VALUE.setFullYear(DEFAULT_DATE_VALUE.getFullYear() + 2);

2
packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
View File

@ -1,5 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@ -11,7 +12,6 @@ import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/compo
import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect';
import { SettingsDataModelSetRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect';
import { useFieldPreview } from '@/settings/data-model/fields/preview/hooks/useFieldPreview';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { FieldMetadataType } from '~/generated-metadata/graphql';
export type SettingsDataModelFieldPreviewProps = {

2
packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
View File

@ -1,8 +1,8 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';

3
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
View File

@ -1,10 +1,9 @@
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent, IconTwentyStar } from 'twenty-ui';
import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FieldMetadataType } from '~/generated-metadata/graphql';
type SettingsObjectFieldDataTypeProps = {

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
View File

@ -2,13 +2,13 @@ import { ReactNode, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { FieldIdentifierType } from '@/settings/data-model/types/FieldIdentifierType';
import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { Nullable } from '~/types/Nullable';

2
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
View File

@ -1,12 +1,12 @@
import { ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';

3
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
View File

@ -1,12 +1,11 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconArchive, IconDotsVertical, IconPencil } from 'twenty-ui';
import { IconArchive, IconDotsVertical, IconPencil, useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';

2
packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
View File

@ -1,10 +1,10 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
export type SettingsDataModelObjectSummaryProps = {
className?: string;

3
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
View File

@ -1,14 +1,13 @@
import { useMemo } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import styled from '@emotion/styled';
import { IconCircleOff } from 'twenty-ui';
import { IconCircleOff, useIcons } from 'twenty-ui';
import { z } from 'zod';
import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getActiveFieldMetadataItems } from '@/object-metadata/utils/getActiveFieldMetadataItems';
import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Select, SelectOption } from '@/ui/input/components/Select';
export const settingsDataModelObjectIdentifiersFormSchema =

2
packages/twenty-front/src/modules/spreadsheet-import/types/index.ts
View File

@ -1,9 +1,9 @@
import { IconComponent } from 'twenty-ui';
import { ReadonlyDeep } from 'type-fest';
import { Columns } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
import { StepState } from '@/spreadsheet-import/steps/components/UploadFlow';
import { Meta } from '@/spreadsheet-import/steps/components/ValidationStep/types';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
export type SpreadsheetOptions<Keys extends string> = {
// Is modal visible.

2
packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx
View File

@ -2,8 +2,8 @@ import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { isNonEmptyString } from '@sniptt/guards';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Avatar, AvatarType } from '@/users/components/Avatar';
import { Nullable } from '~/types/Nullable';

9
packages/twenty-front/src/modules/ui/display/icon/assets/address-book.svg
View File

@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-address-book" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z" />
<path d="M10 16h6" />
<path d="M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
<path d="M4 8h3" />
<path d="M4 12h3" />
<path d="M4 16h3" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 536 B

7
packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg
View File

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" fill="none" viewBox="0 0 14 12">
<path fill="#4285F4" d="M.955 11.252h2.227v-5.41L0 3.456v6.841c0 .528.428.954.955.954Z"/>
<path fill="#34A853" d="M10.818 11.252h2.227a.954.954 0 0 0 .955-.955V3.456l-3.182 2.386"/>
<path fill="#FBBC04" d="M10.818 1.706v4.136L14 3.456V2.183c0-1.18-1.348-1.853-2.291-1.145"/>
<path fill="#EA4335" d="M3.182 5.842V1.706L7 4.57l3.818-2.864v4.136L7 8.706"/>
<path fill="#C5221F" d="M0 2.183v1.273l3.182 2.386V1.706l-.891-.668C1.346.33 0 1.003 0 2.183Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 563 B

10
packages/twenty-front/src/modules/ui/display/icon/assets/google-calendar.svg
View File

@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 76">
<path fill="#fff" d="M58 18H18v40h40z"/>
<path fill="#4285f4" d="M26.2 49.03c-1.495-1.01-2.53-2.485-3.095-4.435l3.47-1.43c.315 1.2.865 2.13 1.65 2.79.78.66 1.73.985 2.84.985 1.135 0 2.11-.345 2.925-1.035s1.225-1.57 1.225-2.635c0-1.09-.43-1.98-1.29-2.67s-1.94-1.035-3.23-1.035H28.69V36.13h1.8c1.11 0 2.045-.3 2.805-.9s1.14-1.42 1.14-2.465c0-.93-.34-1.67-1.02-2.225s-1.54-.835-2.585-.835c-1.02 0-1.83.27-2.43.815a4.784 4.784 0 0 0-1.31 2.005l-3.435-1.43c.455-1.29 1.29-2.43 2.515-3.415s2.79-1.48 4.69-1.48c1.405 0 2.67.27 3.79.815s2 1.3 2.635 2.26c.635.965.95 2.045.95 3.245 0 1.225-.295 2.26-.885 3.11s-1.315 1.5-2.175 1.955v.205a6.605 6.605 0 0 1 2.79 2.175c.725.975 1.09 2.14 1.09 3.5s-.345 2.575-1.035 3.64-1.645 1.905-2.855 2.515c-1.215.61-2.58.92-4.095.92-1.755.005-3.375-.5-4.87-1.51zm21.315-17.22-3.81 2.755-1.905-2.89 6.835-4.93h2.62V50h-3.74z"/>
<path fill="#34a853" d="M58 58H18v18h40z"/>
<path fill="#4285f4" d="M58 0H6C2.685 0 0 2.685 0 6v52h18V18h40z"/>
<path fill="#188038" d="M0 58v12c0 3.315 2.685 6 6 6h12V58z"/>
<path fill="#fbbc04" d="M76 18H58v40h18z"/>
<path fill="#1967d2" d="M76 18V6c0-3.315-2.685-6-6-6H58v18z"/>
<path fill="#ea4335" d="m58 76 18-18H58z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

13
packages/twenty-front/src/modules/ui/display/icon/assets/google.svg
View File

@ -1,13 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
<g clip-path="url(#a)">
<path fill="#4285F4" d="M7 5.727v2.711h3.767a3.228 3.228 0 0 1-1.406 2.107l2.272 1.762c1.323-1.221 2.087-3.016 2.087-5.148 0-.496-.045-.973-.127-1.432H7Z"/>
<path fill="#34A853" d="m3.077 8.332-.512.393L.75 10.137C1.903 12.422 4.263 14 7 14c1.89 0 3.474-.624 4.633-1.693L9.36 10.544c-.624.42-1.42.675-2.361.675-1.82 0-3.366-1.228-3.92-2.883l-.003-.004Z"/>
<path fill="#FBBC05" d="M.75 3.863A6.914 6.914 0 0 0 0 7c0 1.133.274 2.196.75 3.137 0 .007 2.33-1.807 2.33-1.807A4.195 4.195 0 0 1 2.857 7c0-.465.083-.91.223-1.33L.75 3.863Z"/>
<path fill="#EA4335" d="M7 2.787c1.03 0 1.947.357 2.68 1.044l2.004-2.005C10.468.694 8.89 0 7 0A6.988 6.988 0 0 0 .75 3.863L3.08 5.67C3.634 4.015 5.18 2.787 7 2.787Z"/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h13.72v14H0z"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 956 B

3
packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star-filled.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M6.06216 1.53416C6.38434 0.663593 7.61566 0.663591 7.93784 1.53416L9.00134 4.40789C9.10263 4.68158 9.31842 4.89737 9.59211 4.99866L12.4658 6.06216C13.3364 6.38434 13.3364 7.61566 12.4658 7.93784L9.59211 9.00134C9.31842 9.10263 9.10263 9.31842 9.00134 9.59211L7.93784 12.4658C7.61566 13.3364 6.38434 13.3364 6.06216 12.4658L4.99866 9.59211C4.89737 9.31842 4.68158 9.10263 4.40789 9.00134L1.53416 7.93784C0.663593 7.61566 0.663591 6.38434 1.53416 6.06216L4.40789 4.99866C4.68158 4.89737 4.89737 4.68158 4.99866 4.40789L6.06216 1.53416Z" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 668 B

3
packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star.svg
View File

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4673 3.06709C10.9938 1.64431 13.0062 1.6443 13.5327 3.06709L15.2708 7.76367C15.4364 8.21097 15.789 8.56364 16.2363 8.72917L20.9329 10.4673C22.3557 10.9938 22.3557 13.0062 20.9329 13.5327L16.2363 15.2708C15.789 15.4364 15.4364 15.789 15.2708 16.2363L13.5327 20.9329C13.0062 22.3557 10.9938 22.3557 10.4673 20.9329L8.72917 16.2363C8.56364 15.789 8.21097 15.4364 7.76367 15.2708L3.06709 13.5327C1.64431 13.0062 1.6443 10.9938 3.06709 10.4673L7.76367 8.72917C8.21097 8.56364 8.56364 8.21097 8.72917 7.76367L10.4673 3.06709Z" stroke="currentColor" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 663 B

12
packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx
View File

@ -1,12 +0,0 @@
import { TablerIconsProps } from 'twenty-ui';
import IconAddressBookRaw from '../assets/address-book.svg?react';
type IconAddressBookProps = TablerIconsProps;
export const IconAddressBook = (props: IconAddressBookProps): JSX.Element => {
const size = props.size ?? 24;
const stroke = props.stroke ?? 2;
return <IconAddressBookRaw height={size} width={size} strokeWidth={stroke} />;
};

14
packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx
View File

@ -1,14 +0,0 @@
import { useTheme } from '@emotion/react';
import IconGmailRaw from '../assets/gmail.svg?react';
interface IconGmailProps {
size?: number;
}
export const IconGmail = (props: IconGmailProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return <IconGmailRaw height={size} width={size} />;
};

14
packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx
View File

@ -1,14 +0,0 @@
import { useTheme } from '@emotion/react';
import IconGoogleRaw from '../assets/google.svg?react';
interface IconGoogleProps {
size?: number;
}
export const IconGoogle = (props: IconGoogleProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return <IconGoogleRaw height={size} width={size} />;
};

14
packages/twenty-front/src/modules/ui/display/icon/components/IconGoogleCalendar.tsx
View File

@ -1,14 +0,0 @@
import { useTheme } from '@emotion/react';
import IconGoogleCalendarRaw from '../assets/google-calendar.svg?react';
type IconGoogleCalendarProps = {
size?: number;
};
export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return <IconGoogleCalendarRaw height={size} width={size} />;
};

12
packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx
View File

@ -1,12 +0,0 @@
import { TablerIconsProps } from 'twenty-ui';
import IconTwentyStarRaw from '../assets/twenty-star.svg?react';
type IconTwentyStarProps = TablerIconsProps;
export const IconTwentyStar = (props: IconTwentyStarProps): JSX.Element => {
const size = props.size ?? 24;
const stroke = props.stroke ?? 2;
return <IconTwentyStarRaw height={size} width={size} strokeWidth={stroke} />;
};

16
packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx
View File

@ -1,16 +0,0 @@
import { TablerIconsProps } from 'twenty-ui';
import IconTwentyStarFilledRaw from '../assets/twenty-star-filled.svg?react';
type IconTwentyStarFilledProps = TablerIconsProps;
export const IconTwentyStarFilled = (
props: IconTwentyStarFilledProps,
): JSX.Element => {
const size = props.size ?? 24;
const stroke = props.stroke ?? 2;
return (
<IconTwentyStarFilledRaw height={size} width={size} strokeWidth={stroke} />
);
};

20
packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx
View File

@ -1,20 +0,0 @@
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import { iconsState } from '@/ui/display/icon/states/iconsState';
type IconsProviderProps = {
children: JSX.Element;
};
export const IconsProvider = ({ children }: IconsProviderProps) => {
const setIcons = useSetRecoilState(iconsState);
useEffect(() => {
import('../constants/index').then((lazyLoadedIcons) => {
setIcons(lazyLoadedIcons.default);
});
}, [setIcons]);
return children;
};

8398
packages/twenty-front/src/modules/ui/display/icon/constants/index.ts
View File

File diff suppressed because it is too large Load Diff

40
packages/twenty-front/src/modules/ui/display/icon/hooks/__tests__/useIcons.test.ts
View File

@ -1,40 +0,0 @@
import { renderHook } from '@testing-library/react';
import * as recoil from 'recoil';
import { Icon123, IconBuildingSkyscraper, IconUser } from 'twenty-ui';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
describe('useIcons', () => {
const mockedStateIcons = {
IconUser,
Icon123,
IconBuildingSkyscraper,
};
jest
.spyOn(recoil, 'useRecoilValue')
.mockImplementationOnce(() => mockedStateIcons);
const { result } = renderHook(() => useIcons(), {
wrapper: recoil.RecoilRoot,
});
it('returns default icon when no icon key is provided', () => {
expect(result.current.getIcon()).toEqual(Icon123);
});
it('returns the specified icon if the icon key exists in the iconsState', () => {
expect(result.current.getIcon('Icon123')).toEqual(Icon123);
expect(result.current.getIcon('IconUser')).toEqual(IconUser);
expect(result.current.getIcon('IconBuildingSkyscraper')).toEqual(
IconBuildingSkyscraper,
);
});
it('returns default icon if the specified icon key does not exist in the iconsState', () => {
expect(result.current.getIcon('nonExistentKey')).toEqual(Icon123);
});
it('returns all icons in getIcons', () => {
expect(result.current.getIcons()).toEqual(mockedStateIcons);
expect(Object.keys(result.current.getIcons())).toHaveLength(3);
});
});

20
packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts
View File

@ -1,20 +0,0 @@
import { useRecoilValue } from 'recoil';
import { Icon123 } from 'twenty-ui';
import { iconsState } from '@/ui/display/icon/states/iconsState';
export const useIcons = () => {
const icons = useRecoilValue(iconsState);
const defaultIcon = Icon123;
const getIcons = () => {
return icons;
};
const getIcon = (iconKey?: string | null) => {
if (!iconKey) return defaultIcon;
return icons[iconKey] ?? defaultIcon;
};
return { getIcons, getIcon };
};

8
packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts
View File

@ -1,8 +0,0 @@
import { createState } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
export const iconsState = createState<Record<string, IconComponent>>({
key: 'iconsState',
defaultValue: {},
});

10
packages/twenty-front/src/modules/ui/display/icon/types/IconComponent.ts
View File

@ -1,10 +0,0 @@
import { FunctionComponent } from 'react';
export type IconComponentProps = {
className?: string;
color?: string;
size?: number;
stroke?: number;
};
export type IconComponent = FunctionComponent<IconComponentProps>;

2
packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx
View File

@ -1,7 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';

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

@ -1,10 +1,10 @@
import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } 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 { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';

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

@ -1,10 +1,10 @@
import { useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconTwentyStarFilled } from 'twenty-ui';
import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
import { IconTwentyStarFilled } from '@/ui/display/icon/components/IconTwentyStarFilled';
const StyledContainer = styled.div`
align-items: center;

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

@ -1,9 +1,7 @@
import React from 'react';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Pill } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent, Pill } from 'twenty-ui';
export type ButtonSize = 'medium' | 'small';
export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';

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

@ -1,8 +1,7 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
export type FloatingButtonSize = 'small' | 'medium';
export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';

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

@ -1,8 +1,7 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
export type FloatingIconButtonSize = 'small' | 'medium';
export type FloatingIconButtonPosition =

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

@ -1,7 +1,6 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
import {
FloatingIconButton,

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

@ -1,8 +1,7 @@
import React from 'react';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
export type IconButtonSize = 'medium' | 'small';
export type IconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';

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

@ -1,7 +1,6 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
import { IconButton, IconButtonPosition, IconButtonProps } from './IconButton';

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

@ -1,8 +1,7 @@
import { MouseEvent } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
export type LightButtonAccent = 'secondary' | 'tertiary';

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

@ -1,8 +1,7 @@
import { ComponentProps, MouseEvent } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
export type LightIconButtonAccent = 'secondary' | 'tertiary';
export type LightIconButtonSize = 'small' | 'medium';

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

@ -1,7 +1,6 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
import { LightIconButton, LightIconButtonProps } from './LightIconButton';

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

@ -1,8 +1,7 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
type Variant = 'primary' | 'secondary';

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

@ -1,7 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
const StyledIconButton = styled.button`
align-items: center;

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

@ -1,10 +1,8 @@
import { useMemo, useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconApps } from 'twenty-ui';
import { IconApps, IconComponent, useIcons } from 'twenty-ui';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

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

@ -1,9 +1,8 @@
import { useMemo, useRef, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconChevronDown } from 'twenty-ui';
import { IconChevronDown, IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';

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

@ -10,9 +10,8 @@ import {
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Key } from 'ts-key-enum';
import { IconAlertCircle, IconEye, IconEyeOff } from 'twenty-ui';
import { IconAlertCircle, IconComponent, IconEye, IconEyeOff } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';

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

@ -1,6 +1,6 @@
import { useMemo } from 'react';
import { IconComponentProps } from 'twenty-ui';
import { IconComponentProps } from '@/ui/display/icon/types/IconComponent';
import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { Select, SelectOption } from '@/ui/input/components/Select';

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

@ -1,7 +1,7 @@
import { SuggestionMenuProps } from '@blocknote/react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { MenuItemSuggestion } from '@/ui/navigation/menu-item/components/MenuItemSuggestion';

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

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

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

@ -1,8 +1,8 @@
import { ComponentProps, MouseEvent } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
const StyledHeader = styled.li`

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

@ -4,9 +4,8 @@ import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconChevronLeft } from 'twenty-ui';
import { IconChevronLeft, IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
import { IconButton } from '@/ui/input/button/components/IconButton';
import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';

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

@ -1,7 +1,7 @@
import { JSX } from 'react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { PageHeader } from './PageHeader';

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

@ -1,9 +1,7 @@
import * as React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Pill } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent, Pill } from 'twenty-ui';
type TabProps = {
id: string;

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

@ -1,8 +1,8 @@
import * as React from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';

3
packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts
View File

@ -1,4 +1,5 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
export type ActionBarEntry = {

3
packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts
View File

@ -1,4 +1,5 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
export type ContextMenuEntry = {

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

@ -1,6 +1,6 @@
import { MouseEvent } from 'react';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';

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

@ -1,7 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
import {
StyledMenuItemLabel,

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

@ -1,4 +1,5 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconComponent } from 'twenty-ui';
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';

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

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Tag } from '@/ui/display/tag/components/Tag';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';

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

@ -1,7 +1,5 @@
import { useTheme } from '@emotion/react';
import { IconChevronRight } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconChevronRight, IconComponent } from 'twenty-ui';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
import {

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

@ -1,8 +1,6 @@
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconCheck } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconCheck, IconComponent } from 'twenty-ui';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';

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

@ -1,7 +1,7 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';

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