Extract typography components from twenty-front to twenty-ui. (#5466)

Removed the following components from twenty-front and moved them to twenty-ui. - H1Title. - H2Title. - H3Title. Moving components in smaller chunks to ease the process of resolving conflicts. <img width="1255" alt="image" src="https://github.com/twentyhq/twenty/assets/125115953/a3953659-5dfd-4d03-a6de-50b064129d55"> Co-authored-by: Charles Bochet <charles@twenty.com>
2024-05-22 13:52:35 +05:00
parent e2b48e2c4e
commit d1cbd709bd
47 changed files with 60 additions and 80 deletions
--- a/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { format, getYear } from 'date-fns';
+import { H3Title } from 'twenty-ui';

 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE } from '@/activities/calendar/constants/Calendar';
@ -11,7 +12,6 @@ import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMore
 import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { H3Title } from '@/ui/display/typography/components/H3Title';
 import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
 import {
  AnimatedPlaceholderEmptyContainer,
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { H1Title, H1TitleFontColor } from 'twenty-ui';

 import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
@ -9,10 +10,6 @@ import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getT
 import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import {
-  H1Title,
-  H1TitleFontColor,
-} from '@/ui/display/typography/components/H1Title';
 import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
 import {
  AnimatedPlaceholderEmptyContainer,
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx
@ -1,4 +1,5 @@
 import { useRecoilValue } from 'recoil';
+import { H2Title } from 'twenty-ui';

 import { BlocklistItem } from '@/accounts/types/BlocklistItem';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@ -8,7 +9,6 @@ import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput';
 import { SettingsAccountsEmailsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTable';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';

 export const SettingsAccountsEmailsBlocklistSection = () => {
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
@ -1,11 +1,10 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
-import { IconCalendarEvent, IconMailCog } from 'twenty-ui';
+import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui';

 import { SettingsNavigationCard } from '@/settings/components/SettingsNavigationCard';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';

 const StyledCardsContainer = styled.div`
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx
@ -1,5 +1,6 @@
+import { H2Title } from 'twenty-ui';
+
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';

 export const SettingsNewAccountSection = () => {
--- a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx
@ -1,5 +1,6 @@
+import { H2Title } from 'twenty-ui';
+
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
@ -1,9 +1,9 @@
 import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
+import { H2Title } from 'twenty-ui';

 import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
 import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';

 interface SettingsIntegrationGroupProps {
--- 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,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { Section } from '@react-email/components';
+import { H2Title } from 'twenty-ui';

 import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection';
 import { SettingsIntegrationDatabaseConnectionSummaryCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard';
@ -8,7 +9,6 @@ import { useDatabaseConnection } from '@/settings/integrations/database-connecti
 import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';

 export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
--- 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
@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Section } from '@react-email/components';
 import pick from 'lodash.pick';
+import { H2Title } from 'twenty-ui';
 import { z } from 'zod';

 import { useUpdateOneDatabaseConnection } from '@/databases/hooks/useUpdateOneDatabaseConnection';
@ -19,7 +20,6 @@ import { getConnectionDbName } from '@/settings/integrations/utils/getConnection
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Info } from '@/ui/display/info/components/Info';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import {
--- a/packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx
@ -1,7 +1,7 @@
 import { useRecoilValue } from 'recoil';
+import { H2Title } from 'twenty-ui';

 import { currentUserState } from '@/auth/states/currentUserState';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
 import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
--- a/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx
@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { H2Title } from 'twenty-ui';

 import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
 import { currentUserState } from '@/auth/states/currentUserState';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Button } from '@/ui/input/button/components/Button';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useDeleteUserAccountMutation } from '~/generated/graphql';
--- a/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx
@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { H2Title } from 'twenty-ui';

 import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
 import { currentUserState } from '@/auth/states/currentUserState';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 import {
  ConfirmationModal,
  StyledConfirmationButton,
--- a/packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx
+++ b/packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx
@ -1,37 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-
-type H1TitleProps = {
-  title: ReactNode;
-  fontColor?: H1TitleFontColor;
-  className?: string;
-};
-
-export enum H1TitleFontColor {
-  Primary = 'primary',
-  Secondary = 'secondary',
-  Tertiary = 'tertiary',
-}
-
-const StyledTitle = styled.h2<{
-  fontColor: H1TitleFontColor;
-}>`
-  color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
-  font-size: ${({ theme }) => theme.font.size.lg};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  line-height: ${({ theme }) => theme.text.lineHeight.md};
-  margin: 0;
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-`;
-
-export const H1Title = ({
-  title,
-  fontColor = H1TitleFontColor.Tertiary,
-  className,
-}: H1TitleProps) => {
-  return (
-    <StyledTitle fontColor={fontColor} className={className}>
-      {title}
-    </StyledTitle>
-  );
-};
--- a/packages/twenty-front/src/modules/ui/display/typography/components/H2Title.tsx
+++ b/packages/twenty-front/src/modules/ui/display/typography/components/H2Title.tsx
@ -1,50 +0,0 @@
-import styled from '@emotion/styled';
-
-type H2TitleProps = {
-  title: string;
-  description?: string;
-  addornment?: React.ReactNode;
-  className?: string;
-};
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-`;
-
-const StyledTitleContainer = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-`;
-
-const StyledTitle = styled.h2`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin: 0;
-`;
-
-const StyledDescription = styled.h3`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  margin: 0;
-  margin-top: ${({ theme }) => theme.spacing(3)};
-`;
-
-export const H2Title = ({
-  title,
-  description,
-  addornment,
-  className,
-}: H2TitleProps) => (
-  <StyledContainer className={className}>
-    <StyledTitleContainer>
-      <StyledTitle>{title}</StyledTitle>
-      {addornment}
-    </StyledTitleContainer>
-    {description && <StyledDescription>{description}</StyledDescription>}
-  </StyledContainer>
-);
--- a/packages/twenty-front/src/modules/ui/display/typography/components/H3Title.tsx
+++ b/packages/twenty-front/src/modules/ui/display/typography/components/H3Title.tsx
@ -1,19 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-
-type H3TitleProps = {
-  title: ReactNode;
-  className?: string;
-};
-
-const StyledH3Title = styled.h3`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.lg};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin: 0;
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-`;
-
-export const H3Title = ({ title, className }: H3TitleProps) => {
-  return <StyledH3Title className={className}>{title}</StyledH3Title>;
-};
--- a/packages/twenty-front/src/modules/ui/display/typography/components/stories/H1Title.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/display/typography/components/stories/H1Title.stories.tsx
@ -1,40 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
-
-import { H1Title, H1TitleFontColor } from '../H1Title';
-
-const meta: Meta<typeof H1Title> = {
-  title: 'UI/Display/Typography/Title/H1Title',
-  component: H1Title,
-  decorators: [ComponentDecorator],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof H1Title>;
-
-const args = {
-  title: 'Title',
-  fontColor: H1TitleFontColor.Primary,
-};
-
-export const Default: Story = {
-  args,
-  decorators: [ComponentDecorator],
-};
-
-export const Catalog: CatalogStory<Story, typeof H1Title> = {
-  args,
-  decorators: [CatalogDecorator],
-  parameters: {
-    catalog: {
-      dimensions: [
-        {
-          name: 'FontColor',
-          values: Object.values(H1TitleFontColor),
-          props: (fontColor: H1TitleFontColor) => ({ fontColor }),
-        },
-      ],
-    },
-  },
-};
--- a/packages/twenty-front/src/modules/ui/display/typography/components/stories/H2Title.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/display/typography/components/stories/H2Title.stories.tsx
@ -1,31 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
-
-import { H2Title } from '../H2Title';
-
-const args = {
-  title: 'Sub title',
-  description: 'Lorem ipsum dolor sit amet',
-};
-
-const meta: Meta<typeof H2Title> = {
-  title: 'UI/Display/Typography/Title/H2Title',
-  component: H2Title,
-  decorators: [ComponentDecorator],
-  args: {
-    title: args.title,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof H2Title>;
-
-export const Default: Story = {
-  decorators: [ComponentDecorator],
-};
-
-export const WithDescription: Story = {
-  args,
-  decorators: [ComponentDecorator],
-};
--- a/packages/twenty-front/src/modules/ui/display/typography/components/stories/H3Title.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/display/typography/components/stories/H3Title.stories.tsx
@ -1,21 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
-
-import { H3Title } from '../H3Title';
-
-const meta: Meta<typeof H3Title> = {
-  title: 'UI/Display/Typography/Title/H3Title',
-  component: H3Title,
-  decorators: [ComponentDecorator],
-  args: {
-    title: 'H3 title',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof H3Title>;
-
-export const Default: Story = {
-  decorators: [ComponentDecorator],
-};
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
@ -1,12 +1,9 @@
 import { ReactNode, useState } from 'react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
+import { H1Title, H1TitleFontColor } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';

-import {
-  H1Title,
-  H1TitleFontColor,
-} from '@/ui/display/typography/components/H1Title';
 import { Button, ButtonAccent } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Modal } from '@/ui/layout/modal/components/Modal';