From b45511c955b20e9ddc1bd0025c72cd5451a83b59 Mon Sep 17 00:00:00 2001 From: "gitstart-app[bot]" <57568882+gitstart-app[bot]@users.noreply.github.com> Date: Mon, 21 Oct 2024 21:53:43 +0200 Subject: [PATCH] Migrate to twenty-ui - navigation/breadcrumb (#7793) ### Description - Move breadcrumb components to `twenty-ui` \ \ \ Fixes #7534 --------- Co-authored-by: gitstart-twenty Co-authored-by: Charles Bochet --- ...grationDatabaseConnectionShowContainer.tsx | 8 +++----- ...tegrationEditDatabaseConnectionContent.tsx | 16 +++++++--------- .../components/SubMenuTopBarContainer.tsx | 8 ++------ .../__stories__/Breadcrumb.stories.tsx | 4 +--- packages/twenty-front/tsup.ui.index.tsx | 19 +++++++++---------- packages/twenty-ui/src/index.ts | 1 + .../breadcrumb}/components/Breadcrumb.tsx | 0 packages/twenty-ui/src/navigation/index.ts | 1 + 8 files changed, 24 insertions(+), 33 deletions(-) rename packages/{twenty-front/src/modules/ui/navigation/bread-crumb => twenty-ui/src/navigation/breadcrumb}/components/Breadcrumb.tsx (100%) create mode 100644 packages/twenty-ui/src/navigation/index.ts diff --git a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx index 1e2b75d7c..7e294fff9 100644 --- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx +++ b/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(); diff --git a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx index b1b3ae1a0..1a4d1a5d3 100644 --- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx index 9b26f71bc..78577b08b 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx index a655fc6b6..d88b0ad3e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx +++ b/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 = { title: 'UI/Navigation/Breadcrumb/Breadcrumb', component: Breadcrumb, diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx index edb0ae481..88c2ba996 100644 --- a/packages/twenty-front/tsup.ui.index.tsx +++ b/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 {} +} + + diff --git a/packages/twenty-ui/src/index.ts b/packages/twenty-ui/src/index.ts index 7518172f6..a5a04a16f 100644 --- a/packages/twenty-ui/src/index.ts +++ b/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'; diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-ui/src/navigation/breadcrumb/components/Breadcrumb.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx rename to packages/twenty-ui/src/navigation/breadcrumb/components/Breadcrumb.tsx diff --git a/packages/twenty-ui/src/navigation/index.ts b/packages/twenty-ui/src/navigation/index.ts new file mode 100644 index 000000000..94c4c0952 --- /dev/null +++ b/packages/twenty-ui/src/navigation/index.ts @@ -0,0 +1 @@ +export * from './breadcrumb/components/Breadcrumb';