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

Migrate to twenty-ui - navigation/link (#7837)

Browse Source 
This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7535](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7535).

 --- 

### Description.  

Migrate link components to `twenty-ui` \
\
Fixes #7535

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-app[bot]
2024-10-22 17:36:26 +02:00
committed by GitHub
parent 02c34d547f
commit 430644448a
71 changed files with 262 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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)};

16
packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
View File

@ -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: <SettingsNavigationDrawerItems />,
footer: <AdvancedSettingsToggle />,
footer: (
<AdvancedSettingsToggle
isAdvancedModeEnabled={isAdvancedModeEnabled}
setIsAdvancedModeEnabled={setIsAdvancedModeEnabled}
/>
),
}
: {
logo:

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

@ -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 = {

2
packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
View File

@ -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';

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

@ -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';

7
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
View File

@ -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;

7
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
View File

@ -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<

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

@ -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`

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

@ -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';

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

@ -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';

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

@ -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 = ({

8
packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
View File

@ -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 = {

11
packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx
View File

@ -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;

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

@ -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 = () => {

3
packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
View File

@ -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';

3
packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
View File

@ -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';

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

@ -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) => {

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

@ -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';

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

@ -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 };

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

@ -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';

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

@ -1,7 +1,7 @@
import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js';
import { MouseEvent } from 'react';
import { ContactLink } from 'twenty-ui';
import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
import { isDefined } from '~/utils/isDefined';
type PhoneDisplayProps = {

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

@ -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';

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

@ -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)`

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

@ -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 extends string | number | null> = {
value: Value;

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

@ -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<string | number | null>;

3
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx
View File

@ -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();

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

@ -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 {

3
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
View File

@ -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';

6
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx
View File

@ -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<typeof NavigationDrawer> = {
title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',
component: NavigationDrawer,
@ -148,6 +148,6 @@ export const Settings: Story = {
</NavigationDrawerSection>
</>
),
footer: <GithubVersionLink />,
footer: <GithubVersionLink version={jsonPage.version} />,
},
};

2
packages/twenty-front/src/pages/auth/Authorize.tsx
View File

@ -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';

3
packages/twenty-front/src/pages/not-found/NotFound.tsx
View File

@ -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`

5
packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx
View File

@ -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,

4
packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx
View File

@ -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';

5
packages/twenty-front/src/pages/onboarding/SyncEmails.tsx
View File

@ -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,

7
packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
View File

@ -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 = () => (
<SubMenuTopBarContainer
title="General"
@ -42,7 +41,7 @@ export const SettingsWorkspace = () => (
<DeleteWorkspace />
</Section>
<Section>
<GithubVersionLink />
<GithubVersionLink version={packageJson.version} />
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>

3
packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx
View File

@ -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';

9
packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
View File

@ -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';

3
packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx
View File

@ -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 (

2
packages/twenty-front/src/utils/__tests__/getDisplayValueByUrlType.test.ts
View File

@ -1,4 +1,4 @@
import { LinkType } from '@/ui/navigation/link/components/SocialLink';
import { LinkType } from 'twenty-ui';
import { getDisplayValueByUrlType } from '~/utils/getDisplayValueByUrlType';
describe('getDisplayValueByUrlType', () => {

3
packages/twenty-front/src/utils/checkUrlType.ts
View File

@ -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) => {

3
packages/twenty-front/src/utils/getDisplayValueByUrlType.ts
View File

@ -1,5 +1,4 @@
import { LinkType } from '@/ui/navigation/link/components/SocialLink';
import { LinkType } from 'twenty-ui';
import { isDefined } from './isDefined';
type getUrlDisplayValueByUrlTypeProps = {

8
packages/twenty-front/tsup.ui.index.tsx
View File

@ -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 {}
}

1
packages/twenty-ui/src/index.ts
View File

@ -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';

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

@ -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';

1
packages/twenty-ui/src/input/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './components/Toggle';

10
packages/twenty-ui/src/navigation/index.ts
View File

@ -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';

0
packages/twenty-front/src/modules/ui/navigation/link/components/ActionLink.tsx → packages/twenty-ui/src/navigation/link/components/ActionLink.tsx
View File

21
packages/twenty-front/src/modules/ui/navigation/link/components/AdvancedSettingsToggle.tsx → packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
View File

@ -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 (
<StyledContainer>

0
packages/twenty-front/src/modules/ui/navigation/link/components/ContactLink.tsx → packages/twenty-ui/src/navigation/link/components/ContactLink.tsx
View File

15
packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx → packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx
View File

@ -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 (
<ActionLink href={GITHUB_LINK} target="_blank" rel="noreferrer">
<IconBrandGithub size={theme.icon.size.md} />
{packageJson.version}
{version}
</ActionLink>
);
};

0
packages/twenty-front/src/modules/ui/navigation/link/components/RawLink.tsx → packages/twenty-ui/src/navigation/link/components/RawLink.tsx
View File

2
packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx → packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx
View File

@ -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;

3
packages/twenty-front/src/modules/ui/navigation/link/components/SocialLink.tsx → packages/twenty-ui/src/navigation/link/components/SocialLink.tsx
View File

@ -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 {

0
packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx → packages/twenty-ui/src/navigation/link/components/UndecoratedLink.tsx
View File

5
packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/ActionLink.stories.tsx → packages/twenty-ui/src/navigation/link/components/__stories__/ActionLink.stories.tsx
View File

@ -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<typeof ActionLink> = {
title: 'UI/navigation/link/ActionLink',

3
packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx → packages/twenty-ui/src/navigation/link/components/__stories__/ContactLink.stories.tsx
View File

@ -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<typeof ContactLink> = {

3
packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/GithubVersionLink.stories.tsx → packages/twenty-ui/src/navigation/link/components/__stories__/GithubVersionLink.stories.tsx
View File

@ -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<typeof GithubVersionLink> = {

3
packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx → packages/twenty-ui/src/navigation/link/components/__stories__/RawLink.stories.tsx
View File

@ -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<typeof RawLink> = {

3
packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx → packages/twenty-ui/src/navigation/link/components/__stories__/RoundedLink.stories.tsx
View File

@ -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<typeof RoundedLink> = {

3
packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx → packages/twenty-ui/src/navigation/link/components/__stories__/SocialLink.stories.tsx
View File

@ -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<typeof SocialLink> = {

5
packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/UndecoratedLink.stories.tsx → packages/twenty-ui/src/navigation/link/components/__stories__/UndecoratedLink.stories.tsx
View File

@ -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<typeof UndecoratedLink> = {
title: 'UI/navigation/link/UndecoratedLink',

8
packages/twenty-ui/src/navigation/link/components/index.ts Normal file
View File

@ -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';

0
packages/twenty-front/src/modules/ui/navigation/link/constants/Cal.ts → packages/twenty-ui/src/navigation/link/constants/Cal.ts
View File

0
packages/twenty-front/src/modules/ui/navigation/link/constants/GithubLink.ts → packages/twenty-ui/src/navigation/link/constants/GithubLink.ts
View File

3
packages/twenty-ui/src/navigation/link/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './components';
export * from './constants/Cal';
export * from './constants/GithubLink';

82
packages/twenty-ui/src/testing/decorators/ComponentWithRouterDecorator.tsx Normal file
View File

@ -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 = () => (
<ComponentStorybookLayout>
<Outlet />
</ComponentStorybookLayout>
);
const createRouter = ({
Story,
args,
initialEntries,
initialIndex,
}: {
Story: () => JSX.Element;
args: StrictArgs;
initialEntries?: {
pathname: string;
}[];
initialIndex?: number;
}) =>
createMemoryRouter(
createRoutesFromElements(
<Route element={<Providers />}>
<Route path={(args.routePath as string) ?? '*'} element={<Story />} />
</Route>,
),
{ initialEntries, initialIndex },
);
export const ComponentWithRouterDecorator: Decorator = (Story, { args }) => {
return (
<RouterProvider
router={createRouter({
Story,
args,
initialEntries:
args.routePath &&
typeof args.routePath === 'string' &&
(args.routeParams === undefined || isRouteParams(args.routeParams))
? [computeLocation(args.routePath, args.routeParams)]
: [{ pathname: '/' }],
})}
/>
);
};

1
packages/twenty-ui/src/testing/index.ts
View File

@ -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';

34
packages/twenty-ui/src/utilities/getDisplayValueByUrlType.ts Normal file
View File

@ -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';
}
}
};

3
packages/twenty-ui/src/utilities/index.ts
View File

@ -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';

2
packages/twenty-website/src/content/twenty-ui/input/toggle.mdx
View File

@ -7,7 +7,7 @@ image: /images/user-guide/table-views/table.png
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { Toggle } from "@/ui/input/components/Toggle";
<SandpackEditor content={`import { Toggle } from "twenty-ui";
export const MyComponent = () => {
return (

8
packages/twenty-website/src/content/twenty-ui/navigation/links.mdx
View File

@ -13,7 +13,7 @@ A stylized link component for displaying contact information.
<SandpackEditor content={`import { BrowserRouter as Router } from 'react-router-dom';
import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
import { ContactLink } from 'twenty-ui';
export const MyComponent = () => {
const handleLinkClick = (event) => {
@ -56,7 +56,7 @@ A stylized link component for displaying links.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { RawLink } from "@/ui/navigation/link/components/RawLink";
<SandpackEditor content={`import { RawLink } from "twenty-ui";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
@ -97,7 +97,7 @@ A rounded-styled link with a Chip component for links.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { RoundedLink } from "@/ui/navigation/link/components/RoundedLink";
<SandpackEditor content={`import { RoundedLink } from "twenty-ui";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
@ -134,7 +134,7 @@ Stylized social links, with support for various social link types, such as URLs,
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { SocialLink } from "@/ui/navigation/link/components/SocialLink";
<SandpackEditor content={`import { SocialLink } from "twenty-ui";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {