diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx index 120eacb5fd58..ba4add297683 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx @@ -5,7 +5,7 @@ import { useMemo, useState } from 'react'; import { Controller } from 'react-hook-form'; import { useRecoilState, useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { IconGoogle, IconMicrosoft, IconKey } from 'twenty-ui'; +import { ActionLink, IconGoogle, IconKey, IconMicrosoft } from 'twenty-ui'; import { FooterNote } from '@/auth/sign-in-up/components/FooterNote'; import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator'; @@ -14,15 +14,14 @@ import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp'; import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm'; import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle'; import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft'; +import { SignInUpStep } from '@/auth/states/signInUpStepState'; import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState'; import { authProvidersState } from '@/client-config/states/authProvidersState'; import { captchaProviderState } from '@/client-config/states/captchaProviderState'; import { Loader } from '@/ui/feedback/loader/components/Loader'; import { MainButton } from '@/ui/input/button/components/MainButton'; import { TextInput } from '@/ui/input/components/TextInput'; -import { ActionLink } from '@/ui/navigation/link/components/ActionLink'; import { isDefined } from '~/utils/isDefined'; -import { SignInUpStep } from '@/auth/states/signInUpStepState'; const StyledContentContainer = styled.div` margin-bottom: ${({ theme }) => theme.spacing(8)}; diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx index b286b4e91d63..2b4038b7d757 100644 --- a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx @@ -1,4 +1,4 @@ -import { useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue } from 'recoil'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems'; @@ -7,12 +7,12 @@ import { NavigationDrawer, NavigationDrawerProps, } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer'; - +import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState'; import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI'; import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer'; -import { AdvancedSettingsToggle } from '@/ui/navigation/link/components/AdvancedSettingsToggle'; +import { AdvancedSettingsToggle } from 'twenty-ui'; import { MainNavigationDrawerItems } from './MainNavigationDrawerItems'; export type AppNavigationDrawerProps = { @@ -25,12 +25,20 @@ export const AppNavigationDrawer = ({ const isSettingsDrawer = useIsSettingsDrawer(); const currentWorkspace = useRecoilValue(currentWorkspaceState); + const [isAdvancedModeEnabled, setIsAdvancedModeEnabled] = useRecoilState( + isAdvancedModeEnabledState, + ); const drawerProps: NavigationDrawerProps = isSettingsDrawer ? { title: 'Exit Settings', children: , - footer: , + footer: ( + + ), } : { logo: diff --git a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx index 16b207dbe12f..5e073040f46a 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx @@ -1,9 +1,8 @@ -import { AvatarChip, AvatarChipVariant } from 'twenty-ui'; +import { AvatarChip, AvatarChipVariant, UndecoratedLink } from 'twenty-ui'; import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage'; import { useRecordChipData } from '@/object-record/hooks/useRecordChipData'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { MouseEvent } from 'react'; export type RecordChipProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index 9396d30da07c..5f036cc54697 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -9,6 +9,7 @@ import { IconRotate2, IconSettings, IconTag, + UndecoratedLink, } from 'twenty-ui'; import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular'; @@ -30,7 +31,6 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate'; import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx index f258a921383f..f5843543331d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx @@ -1,7 +1,7 @@ import { useCallback, useContext } from 'react'; import { useLocation } from 'react-router-dom'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { IconSettings, useIcons } from 'twenty-ui'; +import { IconSettings, UndecoratedLink, useIcons } from 'twenty-ui'; import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; @@ -12,7 +12,6 @@ import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefin import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx index f6b2e90393b1..3152e98ba0c7 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx @@ -2,13 +2,12 @@ import { CalendarChannel } from '@/accounts/types/CalendarChannel'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard'; +import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; +import { Card } from '@/ui/layout/card/components/Card'; import styled from '@emotion/styled'; import { Section } from '@react-email/components'; -import { H2Title } from 'twenty-ui'; +import { H2Title, Toggle } from 'twenty-ui'; import { CalendarChannelVisibility } from '~/generated-metadata/graphql'; -import { Card } from '@/ui/layout/card/components/Card'; -import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; -import { Toggle } from '@/ui/input/components/Toggle'; const StyledDetailsContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx index c28fa1056109..cfe203a15a90 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { H2Title } from 'twenty-ui'; +import { H2Title, Toggle } from 'twenty-ui'; import { MessageChannel, @@ -9,11 +9,10 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard'; import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard'; +import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; +import { Card } from '@/ui/layout/card/components/Card'; import { Section } from '@/ui/layout/section/components/Section'; import { MessageChannelVisibility } from '~/generated-metadata/graphql'; -import { Card } from '@/ui/layout/card/components/Card'; -import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; -import { Toggle } from '@/ui/input/components/Toggle'; type SettingsAccountsMessageChannelDetailsProps = { messageChannel: Pick< diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx index 5da069e0b2ca..5c10785d1075 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx @@ -4,13 +4,13 @@ import { IconCalendarEvent, IconMailCog, MOBILE_VIEWPORT, + UndecoratedLink, } from 'twenty-ui'; import { SettingsCard } from '@/settings/components/SettingsCard'; import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; import { SettingsPath } from '@/types/SettingsPath'; import { Section } from '@/ui/layout/section/components/Section'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { useTheme } from '@emotion/react'; const StyledCardsContainer = styled.div` diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle.tsx index e859d652daca..5a994207300a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle.tsx @@ -1,4 +1,3 @@ -import { Toggle } from '@/ui/input/components/Toggle'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { createPortal } from 'react-dom'; @@ -6,6 +5,7 @@ import { AppTooltip, IconComponent, IconInfoCircle, + Toggle, TooltipDelay, } from 'twenty-ui'; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx index 962fb7aaba5d..69644d6ab835 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx @@ -9,13 +9,12 @@ import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fiel import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues'; import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType'; import { TextInput } from '@/ui/input/components/TextInput'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { Section } from '@react-email/components'; import { useState } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; -import { H2Title, IconSearch } from 'twenty-ui'; +import { H2Title, IconSearch, UndecoratedLink } from 'twenty-ui'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect'; diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx index f2d92a4ea1c7..88c9084cf86d 100644 --- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx +++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; +import { Toggle } from 'twenty-ui'; -import { Toggle } from '@/ui/input/components/Toggle'; import { RemoteTableStatus } from '~/generated-metadata/graphql'; export const SettingsIntegrationRemoteTableSyncStatusToggle = ({ diff --git a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx index a29353d223da..ccc7dc0abb2c 100644 --- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx +++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx @@ -1,5 +1,10 @@ import styled from '@emotion/styled'; -import { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui'; +import { + IconDotsVertical, + IconPencil, + IconTrash, + UndecoratedLink, +} from 'twenty-ui'; import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard'; import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus'; @@ -7,7 +12,6 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsIntegrationDatabaseConnectionSummaryCardProps = { diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx index 7e4b3b22d651..b2855d93b69b 100644 --- a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx +++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx @@ -1,13 +1,12 @@ -import { IconLink } from 'twenty-ui'; +import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; +import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; +import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { Card } from '@/ui/layout/card/components/Card'; import styled from '@emotion/styled'; -import { Toggle } from '@/ui/input/components/Toggle'; -import { useUpdateWorkspaceMutation } from '~/generated/graphql'; -import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; import { useRecoilState } from 'recoil'; -import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; -import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; +import { IconLink, Toggle } from 'twenty-ui'; +import { useUpdateWorkspaceMutation } from '~/generated/graphql'; const StyledToggle = styled(Toggle)` margin-left: auto; diff --git a/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx b/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx index 2b700540dd76..f38d318b375d 100644 --- a/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx +++ b/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx @@ -3,7 +3,7 @@ import { useRecoilState } from 'recoil'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; -import { Toggle } from '@/ui/input/components/Toggle'; +import { Toggle } from 'twenty-ui'; import { useUpdateWorkspaceMutation } from '~/generated/graphql'; export const ToggleImpersonate = () => { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx index 21b6d034923c..f74e6dcc742c 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx @@ -8,7 +8,7 @@ import { } from 'react'; // @ts-expect-error Todo: remove usage of react-data-grid` import { RowsChangeData } from 'react-data-grid'; -import { IconTrash } from 'twenty-ui'; +import { IconTrash, Toggle } from 'twenty-ui'; import { Heading } from '@/spreadsheet-import/components/Heading'; import { SpreadsheetImportTable } from '@/spreadsheet-import/components/SpreadsheetImportTable'; @@ -25,7 +25,6 @@ import { import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations'; import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager'; import { Button } from '@/ui/input/button/components/Button'; -import { Toggle } from '@/ui/input/components/Toggle'; import { isDefined } from '~/utils/isDefined'; import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep'; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx index f2aa7983f410..de907c23f16e 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx @@ -2,13 +2,12 @@ import styled from '@emotion/styled'; // @ts-expect-error // Todo: remove usage of react-data-grid import { Column, useRowSelection } from 'react-data-grid'; import { createPortal } from 'react-dom'; -import { AppTooltip } from 'twenty-ui'; +import { AppTooltip, Toggle } from 'twenty-ui'; import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect'; import { Fields, ImportedStructuredRow } from '@/spreadsheet-import/types'; import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox'; import { TextInput } from '@/ui/input/components/TextInput'; -import { Toggle } from '@/ui/input/components/Toggle'; import { isDefined } from '~/utils/isDefined'; import { ImportedStructuredRowMetadata } from '../types'; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx index 2fe096c17628..75089eaf6f16 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx @@ -1,8 +1,8 @@ import { MouseEvent } from 'react'; -import { ContactLink } from '@/ui/navigation/link/components/ContactLink'; import { isDefined } from '~/utils/isDefined'; +import { ContactLink } from 'twenty-ui'; import { EllipsisDisplay } from './EllipsisDisplay'; const validateEmail = (email: string) => { diff --git a/packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx index 8b7e67780a2a..e2737dadce15 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx @@ -1,9 +1,8 @@ import { useMemo } from 'react'; -import { THEME_COMMON } from 'twenty-ui'; +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 { RoundedLink } from '@/ui/navigation/link/components/RoundedLink'; import styled from '@emotion/styled'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx index 963887f11e0d..f5cef6d9d12f 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx @@ -1,10 +1,5 @@ import { isNonEmptyString } from '@sniptt/guards'; - -import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink'; -import { - LinkType, - SocialLink, -} from '@/ui/navigation/link/components/SocialLink'; +import { LinkType, RoundedLink, SocialLink } from 'twenty-ui'; type LinkDisplayProps = { value?: { url: string; label?: string }; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx index 339859dfe62a..8b4b52a63ba7 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx @@ -1,14 +1,9 @@ -import { useMemo } from 'react'; import { styled } from '@linaria/react'; -import { THEME_COMMON } from 'twenty-ui'; +import { useMemo } from 'react'; +import { LinkType, RoundedLink, SocialLink, THEME_COMMON } from 'twenty-ui'; import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata'; import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList'; -import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink'; -import { - LinkType, - SocialLink, -} from '@/ui/navigation/link/components/SocialLink'; import { checkUrlType } from '~/utils/checkUrlType'; import { isDefined } from '~/utils/isDefined'; import { getAbsoluteUrl } from '~/utils/url/getAbsoluteUrl'; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx index 7c79ac85e7f6..02c518278fbb 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx @@ -1,7 +1,7 @@ import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js'; import { MouseEvent } from 'react'; +import { ContactLink } from 'twenty-ui'; -import { ContactLink } from '@/ui/navigation/link/components/ContactLink'; import { isDefined } from '~/utils/isDefined'; type PhoneDisplayProps = { diff --git a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx index deee867fc16e..6dbca8829d90 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx @@ -1,10 +1,9 @@ import styled from '@emotion/styled'; import { useMemo } from 'react'; -import { THEME_COMMON } from 'twenty-ui'; +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'; -import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink'; import { parsePhoneNumber } from 'libphonenumber-js'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx index 561b1d0dd319..976ba1c0800b 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx @@ -1,13 +1,9 @@ -import { MouseEvent } from 'react'; import styled from '@emotion/styled'; +import { MouseEvent } from 'react'; -import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink'; -import { - LinkType, - SocialLink, -} from '@/ui/navigation/link/components/SocialLink'; import { checkUrlType } from '~/utils/checkUrlType'; +import { LinkType, RoundedLink, SocialLink } from 'twenty-ui'; import { EllipsisDisplay } from './EllipsisDisplay'; const StyledRawLink = styled(RoundedLink)` diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx index ba29909b509d..ec574e083dde 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import React, { MouseEvent, useMemo, useRef, useState } from 'react'; +import { MouseEvent, useMemo, useRef, useState } from 'react'; import { IconChevronDown, IconComponent } from 'twenty-ui'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; @@ -10,8 +10,8 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { SelectHotkeyScope } from '../types/SelectHotkeyScope'; import { isDefined } from '~/utils/isDefined'; +import { SelectHotkeyScope } from '../types/SelectHotkeyScope'; export type SelectOption = { value: Value; diff --git a/packages/twenty-front/src/modules/ui/input/components/__stories__/Select.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/__stories__/Select.stories.tsx index f24c7a1c9414..5b46bc8cb159 100644 --- a/packages/twenty-front/src/modules/ui/input/components/__stories__/Select.stories.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/__stories__/Select.stories.tsx @@ -1,10 +1,9 @@ -import { useState } from 'react'; import { Meta, StoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/test'; -import { ComponentDecorator } from 'twenty-ui'; +import { useState } from 'react'; +import { ComponentDecorator, IconPlus } from 'twenty-ui'; import { Select, SelectProps } from '../Select'; -import { IconPlus } from 'packages/twenty-ui'; type RenderProps = SelectProps; diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx index f3d187a9400a..a0b96b0501a4 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx @@ -1,7 +1,6 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; -import { IconExternalLink } from 'twenty-ui'; +import { IconExternalLink, UndecoratedLink } from 'twenty-ui'; export const RightDrawerTopBarExpandButton = ({ to }: { to: string }) => { const { closeRightDrawer } = useRightDrawer(); diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx index 2692c65773a2..256c038e8a14 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx @@ -1,6 +1,4 @@ -import { IconComponent } from 'twenty-ui'; - -import { Toggle, ToggleSize } from '@/ui/input/components/Toggle'; +import { IconComponent, Toggle, ToggleSize } from 'twenty-ui'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx index 486027966164..ec0c5bcfe061 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx @@ -1,9 +1,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { IconX } from 'twenty-ui'; +import { IconX, UndecoratedLink } from 'twenty-ui'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx index 1fe45b7822ac..93db01f85838 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { + GithubVersionLink, IconAt, IconBell, IconBuildingSkyscraper, @@ -18,18 +19,17 @@ import { import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; import { SettingsPath } from '@/types/SettingsPath'; -import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink'; import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { CurrentWorkspaceMemberFavorites } from '@/favorites/components/CurrentWorkspaceMemberFavorites'; import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem'; +import jsonPage from '../../../../../../../package.json'; import { NavigationDrawer } from '../NavigationDrawer'; import { NavigationDrawerItem } from '../NavigationDrawerItem'; import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup'; import { NavigationDrawerSection } from '../NavigationDrawerSection'; import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle'; - const meta: Meta = { title: 'UI/Navigation/NavigationDrawer/NavigationDrawer', component: NavigationDrawer, @@ -148,6 +148,6 @@ export const Settings: Story = { ), - footer: , + footer: , }, }; diff --git a/packages/twenty-front/src/pages/auth/Authorize.tsx b/packages/twenty-front/src/pages/auth/Authorize.tsx index 20be8c5017a0..b97c31815dfe 100644 --- a/packages/twenty-front/src/pages/auth/Authorize.tsx +++ b/packages/twenty-front/src/pages/auth/Authorize.tsx @@ -4,7 +4,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'; import { AppPath } from '@/types/AppPath'; import { MainButton } from '@/ui/input/button/components/MainButton'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; +import { UndecoratedLink } from 'twenty-ui'; import { useAuthorizeAppMutation } from '~/generated/graphql'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/pages/not-found/NotFound.tsx b/packages/twenty-front/src/pages/not-found/NotFound.tsx index 3283d402b2e6..3843244ae9e7 100644 --- a/packages/twenty-front/src/pages/not-found/NotFound.tsx +++ b/packages/twenty-front/src/pages/not-found/NotFound.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage'; import { AppPath } from '@/types/AppPath'; import { MainButton } from '@/ui/input/button/components/MainButton'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; + import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle'; import { AnimatedPlaceholder, @@ -11,6 +11,7 @@ import { AnimatedPlaceholderErrorContainer, AnimatedPlaceholderErrorSubTitle, AnimatedPlaceholderErrorTitle, + UndecoratedLink, } from 'twenty-ui'; const StyledBackDrop = styled.div` diff --git a/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx b/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx index 02fc25fbb992..d9e934e57c01 100644 --- a/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx +++ b/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; import styled from '@emotion/styled'; import { isNonEmptyString, isNumber } from '@sniptt/guards'; +import { useState } from 'react'; import { useRecoilValue } from 'recoil'; import { SubTitle } from '@/auth/components/SubTitle'; @@ -15,8 +15,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { MainButton } from '@/ui/input/button/components/MainButton'; import { CardPicker } from '@/ui/input/components/CardPicker'; -import { ActionLink } from '@/ui/navigation/link/components/ActionLink'; -import { CAL_LINK } from '@/ui/navigation/link/constants/Cal'; +import { ActionLink, CAL_LINK } from 'twenty-ui'; import { ProductPriceEntity, SubscriptionInterval, diff --git a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx b/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx index ce57c50795ad..f0e3c02d8ff8 100644 --- a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx +++ b/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx @@ -1,15 +1,13 @@ -import React from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconCheck, RGBA } from 'twenty-ui'; +import { IconCheck, RGBA, UndecoratedLink } from 'twenty-ui'; import { SubTitle } from '@/auth/components/SubTitle'; import { Title } from '@/auth/components/Title'; import { currentUserState } from '@/auth/states/currentUserState'; import { AppPath } from '@/types/AppPath'; import { MainButton } from '@/ui/input/button/components/MainButton'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; import { OnboardingStatus } from '~/generated/graphql'; diff --git a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx b/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx index c80eed892c75..259f519e4e78 100644 --- a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx +++ b/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx @@ -1,9 +1,9 @@ -import React, { useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useState } from 'react'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { IconGoogle } from 'twenty-ui'; +import { ActionLink, IconGoogle } from 'twenty-ui'; import { SubTitle } from '@/auth/components/SubTitle'; import { Title } from '@/auth/components/Title'; @@ -14,7 +14,6 @@ import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerG import { AppPath } from '@/types/AppPath'; import { PageHotkeyScope } from '@/types/PageHotkeyScope'; import { MainButton } from '@/ui/input/button/components/MainButton'; -import { ActionLink } from '@/ui/navigation/link/components/ActionLink'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { CalendarChannelVisibility, diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx index f61342a4c586..2dcad9d36bee 100644 --- a/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx +++ b/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx @@ -1,4 +1,4 @@ -import { H2Title } from 'twenty-ui'; +import { GithubVersionLink, H2Title } from 'twenty-ui'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace'; @@ -9,8 +9,7 @@ import { WorkspaceLogoUploader } from '@/settings/workspace/components/Workspace import { SettingsPath } from '@/types/SettingsPath'; import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer'; import { Section } from '@/ui/layout/section/components/Section'; -import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink'; - +import packageJson from '../../../package.json'; export const SettingsWorkspace = () => ( (
- +
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx index d973ab8f3cd2..c40a6baea278 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx @@ -7,13 +7,12 @@ import { SettingsPath } from '@/types/SettingsPath'; import { Button } from '@/ui/input/button/components/Button'; import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer'; import { Section } from '@/ui/layout/section/components/Section'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import styled from '@emotion/styled'; import { useNavigate } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; -import { H2Title, IconPlus } from 'twenty-ui'; +import { H2Title, IconPlus, UndecoratedLink } from 'twenty-ui'; import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsObjectFieldTable'; import { SettingsObjectIndexTable } from '~/pages/settings/data-model/SettingsObjectIndexTable'; diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx index ba5fd0fd600b..03b3a60c3053 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx @@ -1,6 +1,12 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { H2Title, IconChevronRight, IconPlus, IconSearch } from 'twenty-ui'; +import { + H2Title, + IconChevronRight, + IconPlus, + IconSearch, + UndecoratedLink, +} from 'twenty-ui'; import { useDeleteOneObjectMetadataItem } from '@/object-metadata/hooks/useDeleteOneObjectMetadataItem'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; @@ -26,7 +32,6 @@ import { Table } from '@/ui/layout/table/components/Table'; import { TableHeader } from '@/ui/layout/table/components/TableHeader'; import { TableSection } from '@/ui/layout/table/components/TableSection'; import { useSortedArray } from '@/ui/layout/table/hooks/useSortedArray'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; import { isNonEmptyArray } from '@sniptt/guards'; import { useMemo, useState } from 'react'; import { SETTINGS_OBJECT_TABLE_METADATA } from '~/pages/settings/data-model/constants/SettingsObjectTableMetadata'; diff --git a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx index 1d240653c974..c694ad694283 100644 --- a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx +++ b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx @@ -4,8 +4,7 @@ import { SettingsPath } from '@/types/SettingsPath'; import { Button } from '@/ui/input/button/components/Button'; import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer'; import { Section } from '@/ui/layout/section/components/Section'; -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; -import { IconPlus } from 'twenty-ui'; +import { IconPlus, UndecoratedLink } from 'twenty-ui'; export const SettingsServerlessFunctions = () => { return ( diff --git a/packages/twenty-front/src/utils/__tests__/getDisplayValueByUrlType.test.ts b/packages/twenty-front/src/utils/__tests__/getDisplayValueByUrlType.test.ts index 58f447bec1a9..aff9792f5676 100644 --- a/packages/twenty-front/src/utils/__tests__/getDisplayValueByUrlType.test.ts +++ b/packages/twenty-front/src/utils/__tests__/getDisplayValueByUrlType.test.ts @@ -1,4 +1,4 @@ -import { LinkType } from '@/ui/navigation/link/components/SocialLink'; +import { LinkType } from 'twenty-ui'; import { getDisplayValueByUrlType } from '~/utils/getDisplayValueByUrlType'; describe('getDisplayValueByUrlType', () => { diff --git a/packages/twenty-front/src/utils/checkUrlType.ts b/packages/twenty-front/src/utils/checkUrlType.ts index 13f1499c2082..a806478b9b3d 100644 --- a/packages/twenty-front/src/utils/checkUrlType.ts +++ b/packages/twenty-front/src/utils/checkUrlType.ts @@ -1,5 +1,4 @@ -import { LinkType } from '@/ui/navigation/link/components/SocialLink'; - +import { LinkType } from 'twenty-ui'; import { isDefined } from './isDefined'; export const checkUrlType = (url: string) => { diff --git a/packages/twenty-front/src/utils/getDisplayValueByUrlType.ts b/packages/twenty-front/src/utils/getDisplayValueByUrlType.ts index 5e5087d5c0ba..cc1accb5685a 100644 --- a/packages/twenty-front/src/utils/getDisplayValueByUrlType.ts +++ b/packages/twenty-front/src/utils/getDisplayValueByUrlType.ts @@ -1,5 +1,4 @@ -import { LinkType } from '@/ui/navigation/link/components/SocialLink'; - +import { LinkType } from 'twenty-ui'; import { isDefined } from './isDefined'; type getUrlDisplayValueByUrlTypeProps = { diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx index 88c2ba996dba..01b5aea3d2c3 100644 --- a/packages/twenty-front/tsup.ui.index.tsx +++ b/packages/twenty-front/tsup.ui.index.tsx @@ -26,13 +26,7 @@ export * from './src/modules/ui/input/components/RadioGroup'; export * from './src/modules/ui/input/components/Select'; export * from './src/modules/ui/input/components/TextArea'; export * from './src/modules/ui/input/components/TextInput'; -export * from './src/modules/ui/input/components/Toggle'; export * from './src/modules/ui/input/editor/components/BlockEditor'; -export * from './src/modules/ui/navigation/link/components/ActionLink'; -export * from './src/modules/ui/navigation/link/components/ContactLink'; -export * from './src/modules/ui/navigation/link/components/RawLink'; -export * from './src/modules/ui/navigation/link/components/RoundedLink'; -export * from './src/modules/ui/navigation/link/components/SocialLink'; export * from './src/modules/ui/navigation/menu-item/components/MenuItem'; export * from './src/modules/ui/navigation/menu-item/components/MenuItemCommand'; export * from './src/modules/ui/navigation/menu-item/components/MenuItemDraggable'; @@ -50,5 +44,3 @@ declare module '@emotion/react' { // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface Theme extends ThemeType {} } - - diff --git a/packages/twenty-ui/src/index.ts b/packages/twenty-ui/src/index.ts index a5a04a16ff03..a05da58616ab 100644 --- a/packages/twenty-ui/src/index.ts +++ b/packages/twenty-ui/src/index.ts @@ -1,6 +1,7 @@ export * from './accessibility'; export * from './components'; export * from './display'; +export * from './input'; export * from './layout'; export * from './navigation'; export * from './testing'; diff --git a/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx b/packages/twenty-ui/src/input/components/Toggle.tsx similarity index 97% rename from packages/twenty-front/src/modules/ui/input/components/Toggle.tsx rename to packages/twenty-ui/src/input/components/Toggle.tsx index f6c28cc2f571..86b9975101e7 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx +++ b/packages/twenty-ui/src/input/components/Toggle.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; +import { VisibilityHiddenInput } from '@ui/accessibility'; import { motion } from 'framer-motion'; -import { VisibilityHiddenInput } from 'twenty-ui'; export type ToggleSize = 'small' | 'medium'; diff --git a/packages/twenty-ui/src/input/index.ts b/packages/twenty-ui/src/input/index.ts new file mode 100644 index 000000000000..133f827052db --- /dev/null +++ b/packages/twenty-ui/src/input/index.ts @@ -0,0 +1 @@ +export * from './components/Toggle'; diff --git a/packages/twenty-ui/src/navigation/index.ts b/packages/twenty-ui/src/navigation/index.ts index 94c4c0952d2a..89cbeb8eb0d7 100644 --- a/packages/twenty-ui/src/navigation/index.ts +++ b/packages/twenty-ui/src/navigation/index.ts @@ -1 +1,11 @@ export * from './breadcrumb/components/Breadcrumb'; +export * from './link/components/ActionLink'; +export * from './link/components/AdvancedSettingsToggle'; +export * from './link/components/ContactLink'; +export * from './link/components/GithubVersionLink'; +export * from './link/components/RawLink'; +export * from './link/components/RoundedLink'; +export * from './link/components/SocialLink'; +export * from './link/components/UndecoratedLink'; +export * from './link/constants/Cal'; +export * from './link/constants/GithubLink'; diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/ActionLink.tsx b/packages/twenty-ui/src/navigation/link/components/ActionLink.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/navigation/link/components/ActionLink.tsx rename to packages/twenty-ui/src/navigation/link/components/ActionLink.tsx diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx similarity index 77% rename from packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx rename to packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx index 9a74cca8148c..0506455d0c7b 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx +++ b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx @@ -1,9 +1,8 @@ -import { Toggle } from '@/ui/input/components/Toggle'; -import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState'; import styled from '@emotion/styled'; +import { IconTool } from '@ui/display'; +import { Toggle } from '@ui/input'; +import { MAIN_COLORS } from '@ui/theme'; import { useId } from 'react'; -import { useRecoilState } from 'recoil'; -import { IconTool, MAIN_COLORS } from 'twenty-ui'; const StyledContainer = styled.div` align-items: center; @@ -38,15 +37,19 @@ const StyledIconTool = styled(IconTool)` margin-right: ${({ theme }) => theme.spacing(0.5)}; `; -export const AdvancedSettingsToggle = () => { - const [isAdvancedModeEnabled, setIsAdvancedModeEnabled] = useRecoilState( - isAdvancedModeEnabledState, - ); - const inputId = useId(); +type AdvancedSettingsToggleProps = { + isAdvancedModeEnabled: boolean; + setIsAdvancedModeEnabled: (enabled: boolean) => void; +}; +export const AdvancedSettingsToggle = ({ + isAdvancedModeEnabled, + setIsAdvancedModeEnabled, +}: AdvancedSettingsToggleProps) => { const onChange = (newValue: boolean) => { setIsAdvancedModeEnabled(newValue); }; + const inputId = useId(); return ( diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/ContactLink.tsx b/packages/twenty-ui/src/navigation/link/components/ContactLink.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/navigation/link/components/ContactLink.tsx rename to packages/twenty-ui/src/navigation/link/components/ContactLink.tsx diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx b/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx similarity index 51% rename from packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx rename to packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx index 0d2ed27331cc..10e4534d6ea4 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx @@ -1,18 +1,19 @@ import { useTheme } from '@emotion/react'; -import { IconBrandGithub } from 'twenty-ui'; - -import { ActionLink } from '@/ui/navigation/link/components/ActionLink'; - -import packageJson from '../../../../../../package.json'; +import { IconBrandGithub } from '@ui/display'; +import { ActionLink } from '@ui/navigation/link/components/ActionLink'; import { GITHUB_LINK } from '../constants/GithubLink'; -export const GithubVersionLink = () => { +interface GithubVersionLinkProps { + version: string; +} + +export const GithubVersionLink = ({ version }: GithubVersionLinkProps) => { const theme = useTheme(); return ( - {packageJson.version} + {version} ); }; diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/RawLink.tsx b/packages/twenty-ui/src/navigation/link/components/RawLink.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/navigation/link/components/RawLink.tsx rename to packages/twenty-ui/src/navigation/link/components/RawLink.tsx diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx b/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx similarity index 96% rename from packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx rename to packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx index 4db0e8dd2c4f..ef3b05953ec2 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { isNonEmptyString } from '@sniptt/guards'; +import { FONT_COMMON, THEME_COMMON, ThemeContext } from '@ui/theme'; import { MouseEvent, useContext } from 'react'; -import { FONT_COMMON, THEME_COMMON, ThemeContext } from 'twenty-ui'; type RoundedLinkProps = { href: string; diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/SocialLink.tsx b/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx similarity index 87% rename from packages/twenty-front/src/modules/ui/navigation/link/components/SocialLink.tsx rename to packages/twenty-ui/src/navigation/link/components/SocialLink.tsx index aa98b456917f..a5b756e30b00 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/SocialLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { getDisplayValueByUrlType } from '~/utils/getDisplayValueByUrlType'; - +import { getDisplayValueByUrlType } from '@ui/utilities'; import { RoundedLink } from './RoundedLink'; export enum LinkType { diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx b/packages/twenty-ui/src/navigation/link/components/UndecoratedLink.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx rename to packages/twenty-ui/src/navigation/link/components/UndecoratedLink.tsx diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/ActionLink.stories.tsx b/packages/twenty-ui/src/navigation/link/components/__stories__/ActionLink.stories.tsx similarity index 82% rename from packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/ActionLink.stories.tsx rename to packages/twenty-ui/src/navigation/link/components/__stories__/ActionLink.stories.tsx index bb7dc0de6ad7..eaf20ade7f7b 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/ActionLink.stories.tsx +++ b/packages/twenty-ui/src/navigation/link/components/__stories__/ActionLink.stories.tsx @@ -1,7 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentDecorator } from 'twenty-ui'; - -import { ActionLink } from '@/ui/navigation/link/components/ActionLink'; +import { ActionLink } from '@ui/navigation/link/components/ActionLink'; +import { ComponentDecorator } from '@ui/testing'; const meta: Meta = { title: 'UI/navigation/link/ActionLink', diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx b/packages/twenty-ui/src/navigation/link/components/__stories__/ContactLink.stories.tsx similarity index 87% rename from packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx rename to packages/twenty-ui/src/navigation/link/components/__stories__/ContactLink.stories.tsx index f4bcf867b5fa..4051c937499e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx +++ b/packages/twenty-ui/src/navigation/link/components/__stories__/ContactLink.stories.tsx @@ -1,8 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { fn } from '@storybook/test'; -import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; - +import { ComponentWithRouterDecorator } from '@ui/testing'; import { ContactLink } from '../ContactLink'; const meta: Meta = { diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/GithubVersionLink.stories.tsx b/packages/twenty-ui/src/navigation/link/components/__stories__/GithubVersionLink.stories.tsx similarity index 79% rename from packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/GithubVersionLink.stories.tsx rename to packages/twenty-ui/src/navigation/link/components/__stories__/GithubVersionLink.stories.tsx index e21fe63249d7..2e06aea8a6ea 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/GithubVersionLink.stories.tsx +++ b/packages/twenty-ui/src/navigation/link/components/__stories__/GithubVersionLink.stories.tsx @@ -1,7 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; -import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; - +import { ComponentWithRouterDecorator } from '@ui/testing'; import { GithubVersionLink } from '../GithubVersionLink'; const meta: Meta = { diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx b/packages/twenty-ui/src/navigation/link/components/__stories__/RawLink.stories.tsx similarity index 89% rename from packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx rename to packages/twenty-ui/src/navigation/link/components/__stories__/RawLink.stories.tsx index c2f83757f1d3..8be070812a23 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx +++ b/packages/twenty-ui/src/navigation/link/components/__stories__/RawLink.stories.tsx @@ -1,8 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; -import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; - +import { ComponentWithRouterDecorator } from '@ui/testing'; import { RawLink } from '../RawLink'; const meta: Meta = { diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx b/packages/twenty-ui/src/navigation/link/components/__stories__/RoundedLink.stories.tsx similarity index 89% rename from packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx rename to packages/twenty-ui/src/navigation/link/components/__stories__/RoundedLink.stories.tsx index 898213169d13..5b9107f1a775 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx +++ b/packages/twenty-ui/src/navigation/link/components/__stories__/RoundedLink.stories.tsx @@ -1,8 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; -import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; - +import { ComponentWithRouterDecorator } from '@ui/testing'; import { RoundedLink } from '../RoundedLink'; const meta: Meta = { diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx b/packages/twenty-ui/src/navigation/link/components/__stories__/SocialLink.stories.tsx similarity index 91% rename from packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx rename to packages/twenty-ui/src/navigation/link/components/__stories__/SocialLink.stories.tsx index 48fc83fd16b5..0b5880d2cec6 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx +++ b/packages/twenty-ui/src/navigation/link/components/__stories__/SocialLink.stories.tsx @@ -1,8 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; -import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; - +import { ComponentWithRouterDecorator } from '@ui/testing'; import { LinkType, SocialLink } from '../SocialLink'; const meta: Meta = { diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/UndecoratedLink.stories.tsx b/packages/twenty-ui/src/navigation/link/components/__stories__/UndecoratedLink.stories.tsx similarity index 79% rename from packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/UndecoratedLink.stories.tsx rename to packages/twenty-ui/src/navigation/link/components/__stories__/UndecoratedLink.stories.tsx index 1765a9f9e357..172cb915450e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/UndecoratedLink.stories.tsx +++ b/packages/twenty-ui/src/navigation/link/components/__stories__/UndecoratedLink.stories.tsx @@ -1,9 +1,8 @@ import { expect } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/test'; - -import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink'; -import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; +import { UndecoratedLink } from '@ui/navigation/link/components/UndecoratedLink'; +import { ComponentWithRouterDecorator } from '@ui/testing'; const meta: Meta = { title: 'UI/navigation/link/UndecoratedLink', diff --git a/packages/twenty-ui/src/navigation/link/components/index.ts b/packages/twenty-ui/src/navigation/link/components/index.ts new file mode 100644 index 000000000000..153a89d7af7a --- /dev/null +++ b/packages/twenty-ui/src/navigation/link/components/index.ts @@ -0,0 +1,8 @@ +export * from './ActionLink'; +export * from './AdvancedSettingsToggle'; +export * from './ContactLink'; +export * from './GithubVersionLink'; +export * from './RawLink'; +export * from './RoundedLink'; +export * from './SocialLink'; +export * from './UndecoratedLink'; diff --git a/packages/twenty-front/src/modules/ui/navigation/link/constants/Cal.ts b/packages/twenty-ui/src/navigation/link/constants/Cal.ts similarity index 100% rename from packages/twenty-front/src/modules/ui/navigation/link/constants/Cal.ts rename to packages/twenty-ui/src/navigation/link/constants/Cal.ts diff --git a/packages/twenty-front/src/modules/ui/navigation/link/constants/GithubLink.ts b/packages/twenty-ui/src/navigation/link/constants/GithubLink.ts similarity index 100% rename from packages/twenty-front/src/modules/ui/navigation/link/constants/GithubLink.ts rename to packages/twenty-ui/src/navigation/link/constants/GithubLink.ts diff --git a/packages/twenty-ui/src/navigation/link/index.ts b/packages/twenty-ui/src/navigation/link/index.ts new file mode 100644 index 000000000000..c46a592e0131 --- /dev/null +++ b/packages/twenty-ui/src/navigation/link/index.ts @@ -0,0 +1,3 @@ +export * from './components'; +export * from './constants/Cal'; +export * from './constants/GithubLink'; diff --git a/packages/twenty-ui/src/testing/decorators/ComponentWithRouterDecorator.tsx b/packages/twenty-ui/src/testing/decorators/ComponentWithRouterDecorator.tsx new file mode 100644 index 000000000000..2ebe92443bbf --- /dev/null +++ b/packages/twenty-ui/src/testing/decorators/ComponentWithRouterDecorator.tsx @@ -0,0 +1,82 @@ +import { Decorator } from '@storybook/react'; +import { + createMemoryRouter, + createRoutesFromElements, + Outlet, + Route, + RouterProvider, +} from 'react-router-dom'; + +import { ComponentStorybookLayout } from '../ComponentStorybookLayout'; + +interface StrictArgs { + [name: string]: unknown; +} +export type RouteParams = { + [param: string]: string; +}; + +export const isRouteParams = (obj: any): obj is RouteParams => { + if (typeof obj !== 'object' || obj === null) { + return false; + } + + return Object.keys(obj).every((key) => typeof obj[key] === 'string'); +}; + +export const computeLocation = ( + routePath: string, + routeParams?: RouteParams, +) => { + return { + pathname: routePath.replace( + /:(\w+)/g, + (paramName) => routeParams?.[paramName] ?? '', + ), + }; +}; + +const Providers = () => ( + + + +); + +const createRouter = ({ + Story, + args, + initialEntries, + initialIndex, +}: { + Story: () => JSX.Element; + args: StrictArgs; + initialEntries?: { + pathname: string; + }[]; + initialIndex?: number; +}) => + createMemoryRouter( + createRoutesFromElements( + }> + } /> + , + ), + { initialEntries, initialIndex }, + ); + +export const ComponentWithRouterDecorator: Decorator = (Story, { args }) => { + return ( + + ); +}; diff --git a/packages/twenty-ui/src/testing/index.ts b/packages/twenty-ui/src/testing/index.ts index 95631bbd7d22..dc67f4a8d5b9 100644 --- a/packages/twenty-ui/src/testing/index.ts +++ b/packages/twenty-ui/src/testing/index.ts @@ -1,6 +1,7 @@ export * from './ComponentStorybookLayout'; export * from './decorators/CatalogDecorator'; export * from './decorators/ComponentDecorator'; +export * from './decorators/ComponentWithRouterDecorator'; export * from './decorators/RouterDecorator'; export * from './mocks/avatarUrlMock'; export * from './types/CatalogStory'; diff --git a/packages/twenty-ui/src/utilities/getDisplayValueByUrlType.ts b/packages/twenty-ui/src/utilities/getDisplayValueByUrlType.ts new file mode 100644 index 000000000000..2325d96c3869 --- /dev/null +++ b/packages/twenty-ui/src/utilities/getDisplayValueByUrlType.ts @@ -0,0 +1,34 @@ +import { LinkType } from '@ui/navigation/link'; +import { isDefined } from './isDefined'; + +type getUrlDisplayValueByUrlTypeProps = { + type: LinkType; + href: string; +}; + +export const getDisplayValueByUrlType = ({ + type, + href, +}: getUrlDisplayValueByUrlTypeProps) => { + if (type === 'linkedin') { + const matches = href.match( + /(?:https?:\/\/)?(?:www.)?linkedin.com\/(?:in|company|school)\/(.*)/, + ); + if (isDefined(matches?.[1])) { + return decodeURIComponent(matches?.[1]); + } else { + return 'LinkedIn'; + } + } + + if (type === 'twitter') { + const matches = href.match( + /(?:https?:\/\/)?(?:www.)?twitter.com\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/, + ); + if (isDefined(matches?.[1])) { + return `@${matches?.[1]}`; + } else { + return '@twitter'; + } + } +}; diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts index f6f4d3659cbc..1cd3b910941d 100644 --- a/packages/twenty-ui/src/utilities/index.ts +++ b/packages/twenty-ui/src/utilities/index.ts @@ -1,6 +1,7 @@ export * from './color/utils/stringToHslColor'; +export * from './getDisplayValueByUrlType'; export * from './image/getImageAbsoluteURI'; export * from './isDefined'; +export * from './screen-size/hooks/useScreenSize'; export * from './state/utils/createState'; export * from './types/Nullable'; -export * from './screen-size/hooks/useScreenSize'; diff --git a/packages/twenty-website/src/content/twenty-ui/input/toggle.mdx b/packages/twenty-website/src/content/twenty-ui/input/toggle.mdx index cd78b7b58e6d..b86636943963 100644 --- a/packages/twenty-website/src/content/twenty-ui/input/toggle.mdx +++ b/packages/twenty-website/src/content/twenty-ui/input/toggle.mdx @@ -7,7 +7,7 @@ image: /images/user-guide/table-views/table.png - { return ( diff --git a/packages/twenty-website/src/content/twenty-ui/navigation/links.mdx b/packages/twenty-website/src/content/twenty-ui/navigation/links.mdx index 2abf0babf811..dce088149e1f 100644 --- a/packages/twenty-website/src/content/twenty-ui/navigation/links.mdx +++ b/packages/twenty-website/src/content/twenty-ui/navigation/links.mdx @@ -13,7 +13,7 @@ A stylized link component for displaying contact information. { const handleLinkClick = (event) => { @@ -56,7 +56,7 @@ A stylized link component for displaying links. - { @@ -97,7 +97,7 @@ A rounded-styled link with a Chip component for links. - { @@ -134,7 +134,7 @@ Stylized social links, with support for various social link types, such as URLs, - {