Migrate to twenty-ui - display (#8004)

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

 --- 

### Description

Migrate:

- Info display component
- Status display component
- SeparatorLineText display component

### Demo

###### SeparatorLineText In Storybook


![](https://assets-service.gitstart.com/4814/c0a2cd49-e545-469a-b3d3-c02eb462b60d.png)

Info Component on Storybook


![](https://assets-service.gitstart.com/4814/6f3019c5-99e0-4365-a81e-241294887f9e.png)

Status Component on Storybook


![](https://assets-service.gitstart.com/4814/29b5142a-468f-4d7e-88ff-4f3bfdd5abda.png)

###### Fixes twentyhq/private-issues#95

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/__stories__/AppRouter.stories.tsx

@@ -1,18 +1,18 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 import { HelmetProvider } from 'react-helmet-async';
 import { RecoilRoot } from 'recoil';
-import { IconsProvider } from 'twenty-ui';
 
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import indexAppPath from '@/navigation/utils/indexAppPath';
-import { AppPath } from '@/types/AppPath';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 
 import { AppRouter } from '@/app/components/AppRouter';
+import { AppPath } from '@/types/AppPath';
+import { IconsProvider } from 'twenty-ui';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedUserData } from '~/testing/mock-data/users';
 

packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts

@@ -2,6 +2,7 @@ import { useIsLogged } from '@/auth/hooks/useIsLogged';
 import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePath';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { AppPath } from '@/types/AppPath';
+
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
 

packages/twenty-front/src/hooks/useCleanRecoilState.ts

@@ -1,8 +1,9 @@
-import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
-import { SettingsPath } from '@/types/SettingsPath';
 import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
-import { useRecoilValue, useResetRecoilState } from 'recoil';
 import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { useRecoilValue, useResetRecoilState } from 'recoil';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+
 import { isDefined } from '~/utils/isDefined';
 
 export const useCleanRecoilState = () => {

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -10,12 +10,12 @@ import { previousUrlState } from '@/auth/states/previousUrlState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { workspacesState } from '@/auth/states/workspaces';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
-import { AppPath } from '@/types/AppPath';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 import { isDefined } from '~/utils/isDefined';
 
+import { AppPath } from '@/types/AppPath';
 import { ApolloFactory, Options } from '../services/apollo.factory';
 
 export const useApolloFactory = (options: Partial<Options<any>> = {}) => {

packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { IconCheckbox } from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import {
@@ -21,6 +20,7 @@ import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { IconCheckbox } from 'twenty-ui';
 import { useCleanRecoilState } from '~/hooks/useCleanRecoilState';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -5,20 +5,20 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
-import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { isDefined } from '~/utils/isDefined';
 
-import { useAuth } from '../../hooks/useAuth';
+import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
+import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO';
 import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
-import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
-import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO';
+import { AppPath } from '@/types/AppPath';
+import { useAuth } from '../../hooks/useAuth';
 
 export enum SignInUpMode {
   SignIn = 'sign-in',

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts

@@ -3,11 +3,12 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { AppPath } from '@/types/AppPath';
+
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
 
+import { AppPath } from '@/types/AppPath';
 import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx

@@ -4,13 +4,12 @@ import { MemoryRouter } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 
 import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState';
-import { AppPath } from '@/types/AppPath';
-
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
+import { AppPath } from '@/types/AppPath';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import {
   AppNavigationDrawer,

packages/twenty-front/src/modules/navigation/utils/__tests__/indexAppPath.test.ts

@@ -1,5 +1,4 @@
 import { AppPath } from '@/types/AppPath';
-
 import indexAppPath from '../indexAppPath';
 
 describe('getIndexAppPath', () => {

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx

@@ -2,7 +2,7 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
 import { SyncStatus } from '@/settings/accounts/constants/SyncStatus';
 import { computeSyncStatus } from '@/settings/accounts/utils/computeSyncStatus';
-import { Status } from '@/ui/display/status/components/Status';
+import { Status } from 'twenty-ui';
 import styled from '@emotion/styled';
 
 const StyledRowRightContainer = styled.div`

packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerGoogleApisOAuth.ts

@@ -1,6 +1,6 @@
+import { AppPath } from '@/types/AppPath';
 import { useCallback } from 'react';
 
-import { AppPath } from '@/types/AppPath';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import {
   CalendarChannelVisibility,

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx

@@ -1,10 +1,17 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Link } from 'react-router-dom';
-import { Button, IconArrowUpRight, IconBolt, IconPlus, Pill } from 'twenty-ui';
+import {
+  Button,
+  IconArrowUpRight,
+  IconBolt,
+  IconPlus,
+  Pill,
+  Status,
+} from 'twenty-ui';
 
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
-import { Status } from '@/ui/display/status/components/Status';
+import { Link } from 'react-router-dom';
+
 import { isDefined } from '~/utils/isDefined';
 
 interface SettingsIntegrationComponentProps {

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus.tsx

@@ -1,5 +1,5 @@
 import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
-import { Status } from '@/ui/display/status/components/Status';
+import { Status } from 'twenty-ui';
 import { RemoteTableStatus } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx

@@ -10,7 +10,6 @@ import {
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Info } from '@/ui/display/info/components/Info';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -18,7 +17,7 @@ import { Section } from '@react-email/components';
 import pick from 'lodash.pick';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { Breadcrumb, H2Title } from 'twenty-ui';
+import { Breadcrumb, H2Title, Info } from 'twenty-ui';
 import { z } from 'zod';
 import {
   RemoteServer,

packages/twenty-front/src/modules/settings/integrations/database-connection/hooks/useDatabaseConnection.ts

@@ -1,6 +1,6 @@
+import { WatchQueryFetchPolicy } from '@apollo/client';
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { WatchQueryFetchPolicy } from '@apollo/client';
 
 import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection';
 import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';

packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentityProviderRowRightContainer.tsx

@@ -3,7 +3,7 @@
 import { SettingsSecuritySSORowDropdownMenu } from '@/settings/security/components/SettingsSecuritySSORowDropdownMenu';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProviders.state';
 import { getColorBySSOIdentityProviderStatus } from '@/settings/security/utils/getColorBySSOIdentityProviderStatus';
-import { Status } from '@/ui/display/status/components/Status';
+import { Status } from 'twenty-ui';
 import styled from '@emotion/styled';
 import { UnwrapRecoilValue } from 'recoil';
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching.ts

@@ -1,18 +1,18 @@
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { useAuth } from '@/auth/hooks/useAuth';
+import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
+import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import {
+  SignInUpStep,
+  signInUpStepState,
+} from '@/auth/states/signInUpStepState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { AppPath } from '@/types/AppPath';
 import { useGenerateJwtMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 import { sleep } from '~/utils/sleep';
-import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
-import {
-  SignInUpStep,
-  signInUpStepState,
-} from '@/auth/states/signInUpStepState';
-import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO';
-import { useAuth } from '@/auth/hooks/useAuth';
 
 export const useWorkspaceSwitching = () => {
   const setTokenPair = useSetRecoilState(tokenPairState);

packages/twenty-front/src/pages/auth/Authorize.tsx

@@ -2,6 +2,7 @@ import { AppPath } from '@/types/AppPath';
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+
 import { MainButton, UndecoratedLink } from 'twenty-ui';
 import { useAuthorizeAppMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';

packages/twenty-front/src/pages/auth/__stories__/Invite.stories.tsx

@@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fireEvent, within } from '@storybook/test';
 import { HttpResponse, graphql } from 'msw';
 
-import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { GET_WORKSPACE_FROM_INVITE_HASH } from '@/workspace/graphql/queries/getWorkspaceFromInviteHash';
 import {
@@ -12,6 +11,7 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
+import { AppPath } from '@/types/AppPath';
 import { Invite } from '../Invite';
 
 const meta: Meta<PageDecoratorArgs> = {

packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -1,9 +1,8 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { fireEvent, within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
-import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import {
   PageDecorator,
@@ -11,6 +10,7 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
+import { AppPath } from '@/types/AppPath';
 import { SignInUp } from '../SignInUp';
 
 const meta: Meta<PageDecoratorArgs> = {

packages/twenty-front/src/pages/impersonate/ImpersonateEffect.tsx

@@ -1,6 +1,6 @@
+import { isNonEmptyString } from '@sniptt/guards';
 import { useCallback, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useIsLogged } from '@/auth/hooks/useIsLogged';

packages/twenty-front/src/pages/impersonate/__stories__/ImpersonateEffect.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   PageDecoratorArgs,
@@ -8,6 +7,7 @@ import {
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/utils/sleep';
 
+import { AppPath } from '@/types/AppPath';
 import { ImpersonateEffect } from '../ImpersonateEffect';
 
 const meta: Meta<PageDecoratorArgs> = {

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

@@ -1,5 +1,6 @@
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
 import { AppPath } from '@/types/AppPath';
+
 import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 import styled from '@emotion/styled';
 import {

packages/twenty-front/src/pages/onboarding/InviteTeam.tsx

@@ -4,7 +4,6 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { SeparatorLineText } from '@/ui/display/text/components/SeparatorLineText';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
@@ -27,8 +26,10 @@ import {
   IconCopy,
   LightButton,
   MainButton,
+  SeparatorLineText,
 } from 'twenty-ui';
 import { z } from 'zod';
+
 import { OnboardingStatus } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 import { useCreateWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useCreateWorkspaceInvitation';

packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx

@@ -1,7 +1,3 @@
-import { SubTitle } from '@/auth/components/SubTitle';
-import { Title } from '@/auth/components/Title';
-import { currentUserState } from '@/auth/states/currentUserState';
-import { AppPath } from '@/types/AppPath';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
@@ -12,6 +8,11 @@ import {
   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 { OnboardingStatus } from '~/generated/graphql';
 
 const StyledCheckContainer = styled.div`

packages/twenty-front/src/pages/onboarding/SyncEmails.tsx

@@ -1,12 +1,3 @@
-import { SubTitle } from '@/auth/components/SubTitle';
-import { Title } from '@/auth/components/Title';
-import { currentUserState } from '@/auth/states/currentUserState';
-import { OnboardingSyncEmailsSettingsCard } from '@/onboarding/components/OnboardingSyncEmailsSettingsCard';
-import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
-import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { AppPath } from '@/types/AppPath';
-import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
@@ -14,6 +5,16 @@ import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { ActionLink, IconGoogle, MainButton } from 'twenty-ui';
 
+import { SubTitle } from '@/auth/components/SubTitle';
+import { Title } from '@/auth/components/Title';
+import { currentUserState } from '@/auth/states/currentUserState';
+import { OnboardingSyncEmailsSettingsCard } from '@/onboarding/components/OnboardingSyncEmailsSettingsCard';
+import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
+import { PageHotkeyScope } from '@/types/PageHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+
+import { AppPath } from '@/types/AppPath';
 import {
   CalendarChannelVisibility,
   MessageChannelVisibility,

packages/twenty-front/src/pages/onboarding/__stories__/CreateProfile.stories.tsx

@@ -1,7 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';

packages/twenty-front/src/pages/onboarding/__stories__/CreateWorkspace.stories.tsx

@@ -1,7 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';

packages/twenty-front/src/pages/onboarding/__stories__/InviteTeam.stories.tsx

@@ -1,10 +1,10 @@
+import { AppPath } from '@/types/AppPath';
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { OnboardingStatus } from '~/generated/graphql';
-import { AppPath } from '~/modules/types/AppPath';
 import { GET_CURRENT_USER } from '~/modules/users/graphql/queries/getCurrentUser';
 import { InviteTeam } from '~/pages/onboarding/InviteTeam';
 import {

packages/twenty-front/src/pages/onboarding/__stories__/PaymentSuccess.stories.tsx

@@ -1,7 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';

packages/twenty-front/src/pages/onboarding/__stories__/SyncEmails.stories.tsx

@@ -1,10 +1,10 @@
+import { AppPath } from '@/types/AppPath';
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
-import { graphql, HttpResponse } from 'msw';
+import { HttpResponse, graphql } from 'msw';
 
 import { OnboardingStatus } from '~/generated/graphql';
-import { AppPath } from '~/modules/types/AppPath';
 import { GET_CURRENT_USER } from '~/modules/users/graphql/queries/getCurrentUser';
 import { SyncEmails } from '~/pages/onboarding/SyncEmails';
 import {

packages/twenty-front/src/pages/settings/SettingsBilling.tsx

@@ -6,6 +6,7 @@ import {
   IconCalendarEvent,
   IconCircleX,
   IconCreditCard,
+  Info,
 } from 'twenty-ui';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -15,7 +16,6 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Info } from '@/ui/display/info/components/Info';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';

packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -1,3 +1,20 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { isNonEmptyArray } from '@sniptt/guards';
+import { useState } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import {
+  AppTooltip,
+  Avatar,
+  H2Title,
+  IconButton,
+  IconMail,
+  IconReload,
+  IconTrash,
+  Status,
+  TooltipDelay,
+} from 'twenty-ui';
+
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -16,25 +33,9 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
 import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { isNonEmptyArray } from '@sniptt/guards';
 import { formatDistanceToNow } from 'date-fns';
-import { useState } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import {
-  AppTooltip,
-  Avatar,
-  H2Title,
-  IconButton,
-  IconMail,
-  IconReload,
-  IconTrash,
-  TooltipDelay,
-} from 'twenty-ui';
 import { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
-import { Status } from '../../modules/ui/display/status/components/Status';
 import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
 import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
 import { useDeleteWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useDeleteWorkspaceInvitation';

packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx

@@ -1,4 +1,12 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import { zodResolver } from '@hookform/resolvers/zod';
+import pick from 'lodash.pick';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button, H2Title, IconArchive } from 'twenty-ui';
+import { z } from 'zod';
+
 import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
 import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@@ -22,14 +30,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
-import { zodResolver } from '@hookform/resolvers/zod';
-import pick from 'lodash.pick';
-import { useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import { Button, H2Title, IconArchive } from 'twenty-ui';
-import { z } from 'zod';
 import { computeMetadataNameFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 
 const objectEditFormSchema = z
@@ -81,8 +82,8 @@ export const SettingsObjectEdit = () => {
   ) => {
     let values = formValues;
     if (
-      formValues.shouldSyncLabelAndName ??
-      activeObjectMetadataItem.shouldSyncLabelAndName
+      formValues.shouldSyncLabelAndName === true ||
+      activeObjectMetadataItem.shouldSyncLabelAndName === true
     ) {
       values = {
         ...values,

packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx

@@ -1,3 +1,13 @@
+import { useApolloClient } from '@apollo/client';
+import { zodResolver } from '@hookform/resolvers/zod';
+import omit from 'lodash.omit';
+import pick from 'lodash.pick';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button, H2Title, IconArchive, IconArchiveOff } from 'twenty-ui';
+import { z } from 'zod';
+
 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
@@ -23,15 +33,6 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { useApolloClient } from '@apollo/client';
-import { zodResolver } from '@hookform/resolvers/zod';
-import omit from 'lodash.omit';
-import pick from 'lodash.pick';
-import { useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
-import { Button, H2Title, IconArchive, IconArchiveOff } from 'twenty-ui';
-import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx

@@ -2,7 +2,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title } from 'twenty-ui';
 import { z } from 'zod';
 
 import { useCreateOneDatabaseConnection } from '@/databases/hooks/useCreateOneDatabaseConnection';
@@ -23,6 +22,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
+import { H2Title } from 'twenty-ui';
 import { CreateRemoteServerInput } from '~/generated-metadata/graphql';
 
 const createRemoteServerInputPostgresSchema =

packages/twenty-front/tsup.ui.index.tsx

@@ -2,7 +2,6 @@ import { ThemeType } from 'twenty-ui';
 
 export { ThemeProvider } from '@emotion/react';
 export * from 'twenty-ui';
-
 export * from './src/modules/ui/input/components/AutosizeTextInput';
 export * from './src/modules/ui/input/components/Checkbox';
 export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput';

packages/twenty-ui/src/display/index.ts

@@ -46,7 +46,10 @@ export * from './icon/hooks/useIcons';
 export * from './icon/providers/IconsProvider';
 export * from './icon/states/iconsState';
 export * from './icon/types/IconComponent';
+export * from './info/components/Info';
+export * from './status/components/Status';
 export * from './tag/components/Tag';
+export * from './text/components/SeparatorLineText';
 export * from './tooltip/AppTooltip';
 export * from './tooltip/OverflowingTextWithTooltip';
 export * from './typography/components/H1Title';

packages/twenty-ui/src/display/info/components/Info.tsx

@@ -1,10 +1,10 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconInfoCircle } from '@ui/display/icon/components/TablerIcons';
+
+import { Button } from '@ui/input/button/components/Button';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Button, IconInfoCircle } from 'twenty-ui';
-
-import { AppPath } from '@/types/AppPath';
 
 export type InfoAccent = 'blue' | 'danger';
 export type InfoProps = {
@@ -12,7 +12,7 @@ export type InfoProps = {
   text: string;
   buttonTitle?: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  to?: AppPath;
+  to?: string;
 };
 
 const StyledTextContainer = styled.div`

packages/twenty-ui/src/display/info/components/__stories__/Info.stories.tsx

@@ -1,7 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
+import {
+  CatalogDecorator,
+  CatalogStory,
+  ComponentDecorator,
+} from '@ui/testing';
 
-import { Info, InfoAccent } from '@/ui/display/info/components/Info';
+import { Info, InfoAccent } from '../Info';
 
 const meta: Meta<typeof Info> = {
   title: 'UI/Display/Info',

packages/twenty-ui/src/display/status/components/Status.tsx

@@ -1,5 +1,8 @@
 import styled from '@emotion/styled';
-import { Loader, ThemeColor, themeColorSchema } from 'twenty-ui';
+import { ThemeColor } from '@ui/theme';
+import { themeColorSchema } from '@ui/theme/utils/themeColorSchema';
+
+import { Loader } from '@ui/feedback/loader/components/Loader';
 
 const StyledStatus = styled.h3<{
   color: ThemeColor;

packages/twenty-ui/src/display/status/components/__stories__/Status.stories.tsx

@@ -4,9 +4,8 @@ import {
   CatalogDecorator,
   CatalogStory,
   ComponentDecorator,
-  MAIN_COLOR_NAMES,
-  ThemeColor,
-} from 'twenty-ui';
+} from '@ui/testing';
+import { ThemeColor, MAIN_COLOR_NAMES } from '@ui/theme';
 
 import { Status } from '../Status';
 

packages/twenty-ui/src/display/text/components/__stories__/SeparatorLineText.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
+import { ComponentDecorator } from '@ui/testing';
 
 import { SeparatorLineText } from '../SeparatorLineText';
 

packages/twenty-ui/src/input/button/components/Button.tsx

@@ -1,8 +1,8 @@
 import isPropValid from '@emotion/is-prop-valid';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Pill } from '@ui/components';
-import { IconComponent } from '@ui/display';
+import { Pill } from '@ui/components/Pill/Pill';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import React from 'react';
 import { Link } from 'react-router-dom';