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

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

Browse Source 
### 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>
This commit is contained in:
gitstart-app[bot]
2024-10-21 21:53:43 +02:00
committed by GitHub
parent 25010174f0
commit b45511c955
8 changed files with 24 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

62
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
View File

@ -1,62 +0,0 @@
import styled from '@emotion/styled';
import { Fragment, ReactNode } from 'react';
import { Link } from 'react-router-dom';
export type BreadcrumbProps = {
className?: string;
links: { children: string | ReactNode; href?: string }[];
};
const StyledWrapper = styled.nav`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
display: grid;
font-size: ${({ theme }) => theme.font.size.md};
grid-auto-flow: column;
grid-column-gap: ${({ theme }) => theme.spacing(1)};
max-width: 100%;
min-width: 0;
height: ${({ theme }) => theme.spacing(8)};
`;
const StyledLink = styled(Link)`
color: inherit;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledText = styled.span`
color: ${({ theme }) => theme.font.color.primary};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledDivider = styled.span`
width: ${({ theme }) => theme.spacing(2)};
`;
export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
return (
<StyledWrapper className={className}>
{links.map((link, index) => {
const text = typeof link.children === 'string' ? link.children : '';
return (
<Fragment key={index}>
{link.href ? (
<StyledLink title={text} to={link.href}>
{link.children}
</StyledLink>
) : (
<StyledText title={text}>{link.children}</StyledText>
)}
{index < links.length - 1 && <StyledDivider>/</StyledDivider>}
</Fragment>
);
})}
</StyledWrapper>
);
};

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

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