Migrate to twenty-ui - navigation/breadcrumb (#7793)

### Description

- Move breadcrumb components to `twenty-ui`    \
  \
  \
  Fixes  #7534

---------

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

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

@@ -1,14 +1,12 @@
-import { Section } from '@react-email/components';
-import { useNavigate } from 'react-router-dom';
-import { H2Title } from 'twenty-ui';
-
 import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection';
 import { SettingsIntegrationDatabaseConnectionSummaryCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard';
 import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard';
 import { useDatabaseConnection } from '@/settings/integrations/database-connection/hooks/useDatabaseConnection';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { Section } from '@react-email/components';
+import { useNavigate } from 'react-router-dom';
+import { Breadcrumb, H2Title } from 'twenty-ui';
 
 export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
   const navigate = useNavigate();

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

@@ -1,11 +1,3 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-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 { H2Title } from 'twenty-ui';
-import { z } from 'zod';
-
 import { useUpdateOneDatabaseConnection } from '@/databases/hooks/useUpdateOneDatabaseConnection';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@@ -21,7 +13,13 @@ 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 { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { zodResolver } from '@hookform/resolvers/zod';
+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 { z } from 'zod';
 import {
   RemoteServer,
   RemoteTable,

packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx

@@ -1,11 +1,7 @@
+import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
 import styled from '@emotion/styled';
 import { JSX, ReactNode } from 'react';
-
-import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
-import {
-  Breadcrumb,
-  BreadcrumbProps,
-} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { Breadcrumb, BreadcrumbProps } from 'twenty-ui';
 import { PageBody } from './PageBody';
 import { PageHeader } from './PageHeader';
 

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

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

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

@@ -1,15 +1,9 @@
 import { ThemeType } from 'twenty-ui';
 
 export { ThemeProvider } from '@emotion/react';
-
-declare module '@emotion/react' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface Theme extends ThemeType {}
-}
-
 export * from 'twenty-ui';
-export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar';
 export * from './src/modules/ui/feedback/progress-bar/components/CircularProgressBar';
+export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar';
 export * from './src/modules/ui/input/button/components/Button';
 export * from './src/modules/ui/input/button/components/ButtonGroup';
 export * from './src/modules/ui/input/button/components/FloatingButton';
@@ -17,7 +11,6 @@ export * from './src/modules/ui/input/button/components/FloatingButtonGroup';
 export * from './src/modules/ui/input/button/components/FloatingIconButton';
 export * from './src/modules/ui/input/button/components/FloatingIconButtonGroup';
 export * from './src/modules/ui/input/button/components/LightButton';
-export * from './src/modules/ui/navigation/link/components/ActionLink';
 export * from './src/modules/ui/input/button/components/LightIconButton';
 export * from './src/modules/ui/input/button/components/MainButton';
 export * from './src/modules/ui/input/button/components/RoundedIconButton';
@@ -30,12 +23,12 @@ export * from './src/modules/ui/input/components/IconPicker';
 export * from './src/modules/ui/input/components/ImageInput';
 export * from './src/modules/ui/input/components/Radio';
 export * from './src/modules/ui/input/components/RadioGroup';
-export * from './src/modules/ui/input/button/components/Button';
 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';
@@ -50,6 +43,12 @@ export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelect';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectColor';
 export * from './src/modules/ui/navigation/menu-item/components/MenuItemToggle';
-export * from './src/modules/ui/navigation/bread-crumb/components/Breadcrumb';
 export * from './src/modules/ui/navigation/navigation-bar/components/NavigationBar';
 export * from './src/modules/ui/navigation/step-bar/components/StepBar';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends ThemeType {}
+}
+
+

packages/twenty-ui/src/index.ts

@@ -2,6 +2,7 @@ export * from './accessibility';
 export * from './components';
 export * from './display';
 export * from './layout';
+export * from './navigation';
 export * from './testing';
 export * from './theme';
 export * from './utilities';

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

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