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

Migrate to twenty-ui - layout/section (#8068)

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

 --- 

Description \
\
Move Section component from twenty-front to twenty-ui and update
imports\
\
\
Fixes twentyhq/private-issues#85

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
This commit is contained in:
gitstart-app[bot]
2024-10-28 13:08:55 +01:00
committed by GitHub
parent 1aa961dedf
commit fa0933b292
46 changed files with 60 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
View File

@ -8,6 +8,7 @@ import {
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
H3Title,
Section,
} from 'twenty-ui';
import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
@ -21,7 +22,6 @@ import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { Section } from '@/ui/layout/section/components/Section';
import { TimelineCalendarEventsWithTotal } from '~/generated/graphql';
const StyledContainer = styled.div`

2
packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
View File

@ -8,6 +8,7 @@ import {
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
H1Title,
H1TitleFontColor,
Section,
} from 'twenty-ui';
import { ActivityList } from '@/activities/components/ActivityList';
@ -20,7 +21,6 @@ import { getTimelineThreadsFromPersonId } from '@/activities/emails/graphql/quer
import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { Section } from '@/ui/layout/section/components/Section';
import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';
const StyledContainer = styled.div`

2
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSection.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { Section } from '@/ui/layout/section/components/Section';
import { Section } from 'twenty-ui';
const StyledRecordDetailSection = styled(Section)`
border-top: 1px solid ${({ theme }) => theme.border.color.light};

3
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistSection.tsx
View File

@ -1,5 +1,5 @@
import { useRecoilValue } from 'recoil';
import { H2Title } from 'twenty-ui';
import { H2Title, Section } from 'twenty-ui';
import { BlocklistItem } from '@/accounts/types/BlocklistItem';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@ -9,7 +9,6 @@ import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsBlocklistTable';
import { Section } from '@/ui/layout/section/components/Section';
export const SettingsAccountsBlocklistSection = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);

3
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { H2Title, Toggle, Card } from 'twenty-ui';
import { Card, H2Title, Section, Toggle } from 'twenty-ui';
import {
MessageChannel,
@ -10,7 +10,6 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
import { Section } from '@/ui/layout/section/components/Section';
import { MessageChannelVisibility } from '~/generated-metadata/graphql';
type SettingsAccountsMessageChannelDetailsProps = {

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
View File

@ -4,13 +4,13 @@ import {
IconCalendarEvent,
IconMailCog,
MOBILE_VIEWPORT,
Section,
UndecoratedLink,
} from 'twenty-ui';
import { SettingsCard } from '@/settings/components/SettingsCard';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Section } from '@/ui/layout/section/components/Section';
import { useTheme } from '@emotion/react';
const StyledCardsContainer = styled.div`

3
packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx
View File

@ -1,7 +1,6 @@
import { H2Title } from 'twenty-ui';
import { H2Title, Section } from 'twenty-ui';
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
import { Section } from '@/ui/layout/section/components/Section';
export const SettingsNewAccountSection = () => {
return (

3
packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx
View File

@ -1,7 +1,6 @@
import { H2Title } from 'twenty-ui';
import { H2Title, Section } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { Section } from '@/ui/layout/section/components/Section';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';

5
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
View File

@ -1,10 +1,9 @@
import { Link } from 'react-router-dom';
import styled from '@emotion/styled';
import { H2Title } from 'twenty-ui';
import { Link } from 'react-router-dom';
import { H2Title, Section } from 'twenty-ui';
import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
import { Section } from '@/ui/layout/section/components/Section';
interface SettingsIntegrationGroupProps {
integrationGroup: SettingsIntegrationCategory;

3
packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersForm.tsx
View File

@ -6,11 +6,10 @@ import { SettingsSSOOIDCForm } from '@/settings/security/components/SettingsSSOO
import { SettingsSSOSAMLForm } from '@/settings/security/components/SettingsSSOSAMLForm';
import { SettingSecurityNewSSOIdentityFormValues } from '@/settings/security/types/SSOIdentityProvider';
import { TextInput } from '@/ui/input/components/TextInput';
import { Section } from '@/ui/layout/section/components/Section';
import styled from '@emotion/styled';
import { ReactElement } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { H2Title, IconComponent, IconKey } from 'twenty-ui';
import { H2Title, IconComponent, IconKey, Section } from 'twenty-ui';
import { IdpType } from '~/generated/graphql';
const StyledInputsContainer = styled.div`

3
packages/twenty-front/src/modules/settings/security/components/SettingsSSOOIDCForm.tsx
View File

@ -3,11 +3,10 @@
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { TextInput } from '@/ui/input/components/TextInput';
import { Section } from '@/ui/layout/section/components/Section';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Controller, useFormContext } from 'react-hook-form';
import { Button, H2Title, IconCopy } from 'twenty-ui';
import { Button, H2Title, IconCopy, Section } from 'twenty-ui';
const StyledInputsContainer = styled.div`
display: flex;

2
packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx
View File

@ -5,7 +5,6 @@ import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAM
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { TextInput } from '@/ui/input/components/TextInput';
import { Section } from '@/ui/layout/section/components/Section';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ChangeEvent, useRef } from 'react';
@ -17,6 +16,7 @@ import {
IconCopy,
IconDownload,
IconUpload,
Section,
} from 'twenty-ui';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { isDefined } from '~/utils/isDefined';

3
packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx
View File

@ -1,9 +1,8 @@
import { ServerlessFunctionNewFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
import { TextArea } from '@/ui/input/components/TextArea';
import { TextInput } from '@/ui/input/components/TextInput';
import { Section } from '@/ui/layout/section/components/Section';
import styled from '@emotion/styled';
import { H2Title } from 'twenty-ui';
import { H2Title, Section } from 'twenty-ui';
const StyledInputsContainer = styled.div`
display: flex;

2
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
View File

@ -7,7 +7,6 @@ import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-fun
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { CoreEditorHeader } from '@/ui/input/code-editor/components/CodeEditorHeader';
import { Section } from '@/ui/layout/section/components/Section';
import { TabList } from '@/ui/layout/tab/components/TabList';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@ -21,6 +20,7 @@ import {
IconGitCommit,
IconPlayerPlay,
IconRestore,
Section,
} from 'twenty-ui';
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';

5
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionSettingsTab.tsx
View File

@ -1,18 +1,17 @@
import { SettingsServerlessFunctionNewForm } from '@/settings/serverless-functions/components/SettingsServerlessFunctionNewForm';
import { SettingsServerlessFunctionTabEnvironmentVariablesSection } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection';
import { useDeleteOneServerlessFunction } from '@/settings/serverless-functions/hooks/useDeleteOneServerlessFunction';
import { ServerlessFunctionFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { Section } from '@/ui/layout/section/components/Section';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Key } from 'ts-key-enum';
import { Button, H2Title } from 'twenty-ui';
import { Button, H2Title, Section } from 'twenty-ui';
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
import { SettingsServerlessFunctionTabEnvironmentVariablesSection } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection';
export const SettingsServerlessFunctionSettingsTab = ({
formValues,

2
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection.tsx
View File

@ -1,7 +1,6 @@
import { SettingsServerlessFunctionTabEnvironmentVariableTableRow } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow';
import { ServerlessFunctionFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
import { TextInput } from '@/ui/input/components/TextInput';
import { Section } from '@/ui/layout/section/components/Section';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
@ -15,6 +14,7 @@ import {
IconPlus,
IconSearch,
MOBILE_VIEWPORT,
Section,
} from 'twenty-ui';
import { v4 } from 'uuid';

3
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx
View File

@ -1,5 +1,4 @@
import { Section } from '@/ui/layout/section/components/Section';
import { Button, H2Title, IconPlayerPlay } from 'twenty-ui';
import { Button, H2Title, IconPlayerPlay, Section } from 'twenty-ui';
import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
import { SettingsServerlessFunctionCodeEditorContainer } from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditorContainer';

15
packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
View File

@ -1,17 +1,20 @@
import styled from '@emotion/styled';
import { AnimatePresence, LayoutGroup } from 'framer-motion';
import { ReactNode, useState } from 'react';
import { Button, ButtonAccent, H1Title, H1TitleFontColor } from 'twenty-ui';
import {
Button,
ButtonAccent,
H1Title,
H1TitleFontColor,
Section,
SectionAlignment,
SectionFontColor,
} from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { TextInput } from '@/ui/input/components/TextInput';
import { Modal, ModalVariants } from '@/ui/layout/modal/components/Modal';
import {
Section,
SectionAlignment,
SectionFontColor,
} from '@/ui/layout/section/components/Section';
export type ConfirmationModalProps = {
isOpen: boolean;

48
packages/twenty-front/src/modules/ui/layout/section/components/Section.tsx
View File

@ -1,48 +0,0 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
type SectionProps = {
children: ReactNode;
className?: string;
alignment?: SectionAlignment;
fullWidth?: boolean;
fontColor?: SectionFontColor;
};
export enum SectionAlignment {
Left = 'left',
Center = 'center',
}
export enum SectionFontColor {
Primary = 'primary',
Secondary = 'secondary',
Tertiary = 'tertiary',
}
const StyledSection = styled.div<{
alignment: SectionAlignment;
fullWidth: boolean;
fontColor: SectionFontColor;
}>`
color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
text-align: ${({ alignment }) => alignment};
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
`;
export const Section = ({
children,
className,
alignment = SectionAlignment.Left,
fullWidth = true,
fontColor = SectionFontColor.Primary,
}: SectionProps) => (
<StyledSection
className={className}
alignment={alignment}
fullWidth={fullWidth}
fontColor={fontColor}
>
{children}
</StyledSection>
);