scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 20:27:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to twenty-ui - layout/card (#8003)

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

 --- 

### Description

Migrate:

- Card
- CardContent
- CardFooter
- CardHeader

### Demo

Card in Storybook


![](https://assets-service.gitstart.com/4814/d6759b99-7d5f-4177-acdf-1c57786330a3.png)

###### Fixes twentyhq/private-issues#86

---------

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-24 16:36:06 +02:00
committed by GitHub
parent 9b5d0e7850
commit 1dfeba39eb
35 changed files with 48 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { differenceInSeconds, endOfDay, format } from 'date-fns';
import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { CardContent } from 'twenty-ui';
import { TimelineCalendarEvent } from '~/generated/graphql';
type CalendarDayCardContentProps = {

4
packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
View File

@@ -9,6 +9,8 @@ import {
IconArrowRight,
IconLock,
isDefined,
Card,
CardContent,
} from 'twenty-ui';
import { CalendarCurrentEventCursor } from '@/activities/calendar/components/CalendarCurrentEventCursor';
@@ -18,8 +20,6 @@ import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendar
import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import {
CalendarChannelVisibility,
TimelineCalendarEvent,

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

@@ -2,7 +2,7 @@ import { useContext } from 'react';
import { CalendarDayCardContent } from '@/activities/calendar/components/CalendarDayCardContent';
import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
import { Card } from '@/ui/layout/card/components/Card';
import { Card } from 'twenty-ui';
type CalendarMonthCardProps = {
dayTimes: number[];

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

@@ -1,5 +1,5 @@
import { Card } from '@/ui/layout/card/components/Card';
import styled from '@emotion/styled';
import { Card } from 'twenty-ui';
const StyledList = styled(Card)`
& > :not(:last-child) {

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

@@ -1,5 +1,5 @@
import { CardContent } from '@/ui/layout/card/components/CardContent';
import styled from '@emotion/styled';
import { CardContent } from 'twenty-ui';
import React from 'react';
const StyledRowContent = styled(CardContent)<{

2
packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
View File

@@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { Card } from '@/ui/layout/card/components/Card';
import { Card } from 'twenty-ui';
type EventCardProps = {
children: React.ReactNode;

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

@@ -3,10 +3,9 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
import { Card } from '@/ui/layout/card/components/Card';
import styled from '@emotion/styled';
import { Section } from '@react-email/components';
import { H2Title, Toggle } from 'twenty-ui';
import { H2Title, Toggle, Card } from 'twenty-ui';
import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
const StyledDetailsContainer = styled.div`

5
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
View File

@@ -1,10 +1,7 @@
import styled from '@emotion/styled';
import { Button, IconGoogle } from 'twenty-ui';
import { Button, Card, CardContent, CardHeader, IconGoogle } from 'twenty-ui';
import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { CardHeader } from '@/ui/layout/card/components/CardHeader';
const StyledHeader = styled(CardHeader)`
align-items: center;

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 } from 'twenty-ui';
import { H2Title, Toggle, Card } 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 { Card } from '@/ui/layout/card/components/Card';
import { Section } from '@/ui/layout/section/components/Section';
import { MessageChannelVisibility } from '~/generated-metadata/graphql';

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

@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
import { ReactNode } from 'react';
import { Radio } from '@/ui/input/components/Radio';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Card, CardContent } from 'twenty-ui';
type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
{

4
packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
View File

@@ -1,9 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconChevronRight, Pill } from 'twenty-ui';
import { IconChevronRight, Pill, Card, CardContent } from 'twenty-ui';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { ReactNode } from 'react';
type SettingsCardProps = {

6
packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
View File

@@ -1,11 +1,9 @@
import { ComponentType } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent, IconPlus } from 'twenty-ui';
import { ComponentType } from 'react';
import { IconComponent, IconPlus, Card, CardFooter } from 'twenty-ui';
import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
import { Card } from '@/ui/layout/card/components/Card';
import { CardFooter } from '@/ui/layout/card/components/CardFooter';
import { SettingsListItemCardContent } from './SettingsListItemCardContent';

6
packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
View File

@@ -1,9 +1,7 @@
import { ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from 'twenty-ui';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { ReactNode } from 'react';
import { IconComponent, CardContent } from 'twenty-ui';
const StyledRow = styled(CardContent)`
align-items: center;

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

@@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { Card } from '@/ui/layout/card/components/Card';
import { Card } from 'twenty-ui';
const StyledCard = styled(Card)`
background-color: ${({ theme }) => theme.background.secondary};

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

@@ -1,8 +1,7 @@
import styled from '@emotion/styled';
import { useTheme } from '@emotion/react';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { IconComponent } from 'twenty-ui';
import { IconComponent, CardContent } from 'twenty-ui';
import { ReactNode } from 'react';
type SettingsOptionCardContentProps = {

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

@@ -1,7 +1,6 @@
import styled from '@emotion/styled';
import { Radio } from '@/ui/input/components/Radio';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { IconComponent } from 'twenty-ui';
import { IconComponent, CardContent } from 'twenty-ui';
import { useTheme } from '@emotion/react';
const StyledRadioCardContent = styled(CardContent)`

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

@@ -1,8 +1,7 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { ReactNode } from 'react';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Card, CardContent } from 'twenty-ui';
type SettingsSummaryCardProps = {
title: ReactNode;

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

@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
import { ReactNode } from 'react';
import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Card, CardContent } from 'twenty-ui';
type SettingsDataModelPreviewFormCardProps = {
className?: string;

5
packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
View File

@@ -1,12 +1,11 @@
import { Controller, useFormContext } from 'react-hook-form';
import styled from '@emotion/styled';
import { IconCheck, IconX } from 'twenty-ui';
import { Controller, useFormContext } from 'react-hook-form';
import { IconCheck, IconX, CardContent } from 'twenty-ui';
import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/fields/forms/boolean/hooks/useBooleanSettingsFormInitialValues';
import { Select } from '@/ui/input/components/Select';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { isDefined } from '~/utils/isDefined';
export const settingsDataModelFieldBooleanFormSchema = z.object({

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx
View File

@@ -6,7 +6,7 @@ import { currencyFieldDefaultValueSchema } from '@/object-record/record-field/va
import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
import { Select } from '@/ui/input/components/Select';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { CardContent } from 'twenty-ui';
import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
export const settingsDataModelFieldCurrencyFormSchema = z.object({

3
packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
View File

@@ -5,8 +5,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
import { SettingsDataModelFieldToggle } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle';
import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { IconClockShare } from 'twenty-ui';
import { IconClockShare, CardContent } from 'twenty-ui';
export const settingsDataModelFieldDateFormSchema = z.object({
settings: z

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
View File

@@ -4,7 +4,7 @@ import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { numberFieldDefaultValueSchema } from '@/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema';
import { SettingsDataModelFieldNumberDecimalsInput } from '@/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberDecimalInput';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { CardContent } from 'twenty-ui';
import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
export const settingsDataModelFieldNumberFormSchema = z.object({

11
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
View File

@@ -1,7 +1,14 @@
import styled from '@emotion/styled';
import { DropResult } from '@hello-pangea/dnd';
import { Controller, useFormContext } from 'react-hook-form';
import { IconPlus, IconTool, LightButton, MAIN_COLORS } from 'twenty-ui';
import {
CardContent,
CardFooter,
IconPlus,
IconTool,
LightButton,
MAIN_COLORS,
} from 'twenty-ui';
import { z } from 'zod';
import {
@@ -14,8 +21,6 @@ import { selectFieldDefaultValueSchema } from '@/object-record/record-field/vali
import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
import { generateNewSelectOption } from '@/settings/data-model/fields/forms/select/utils/generateNewSelectOption';
import { isSelectOptionDefaultValue } from '@/settings/data-model/utils/isSelectOptionDefaultValue';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { CardFooter } from '@/ui/layout/card/components/CardFooter';
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
import { FieldMetadataType } from '~/generated-metadata/graphql';

6
packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
View File

@@ -1,12 +1,12 @@
import styled from '@emotion/styled';
import {
SettingsDataModelFieldPreview,
// eslint-disable-next-line prettier/prettier
SettingsDataModelFieldPreview,
SettingsDataModelFieldPreviewProps,
} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview';
import { SettingsDataModelObjectSummary } from '@/settings/data-model/objects/components/SettingsDataModelObjectSummary';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Card, CardContent } from 'twenty-ui';
export type SettingsDataModelFieldPreviewCardProps =
SettingsDataModelFieldPreviewProps & {

4
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
View File

@@ -1,7 +1,5 @@
import styled from '@emotion/styled';
import { FloatingButton, IconEye } from 'twenty-ui';
import { Card } from '@/ui/layout/card/components/Card';
import { Card, FloatingButton, IconEye } from 'twenty-ui';
import { SettingsPath } from '@/types/SettingsPath';
import DarkCoverImage from '../../assets/cover-dark.png';

3
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
View File

@@ -11,8 +11,7 @@ import {
SettingsDataModelObjectIdentifiersForm,
SettingsDataModelObjectIdentifiersFormValues,
} from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Card, CardContent } from 'twenty-ui';
type SettingsDataModelObjectSettingsFormCardProps = {
objectMetadataItem: ObjectMetadataItem;

3
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx
View File

@@ -1,7 +1,6 @@
import styled from '@emotion/styled';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Card, CardContent } from 'twenty-ui';
import PreviewBackgroundImage from '../assets/preview-background.svg';
import SyncImage from '../assets/sync.svg?react';

5
packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx
View File

@@ -2,11 +2,8 @@
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { CardHeader } from '@/ui/layout/card/components/CardHeader';
import styled from '@emotion/styled';
import { Button, IconKey } from 'twenty-ui';
import { Button, Card, CardContent, CardHeader, IconKey } from 'twenty-ui';
const StyledHeader = styled(CardHeader)`
align-items: center;

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

@@ -2,10 +2,9 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Card } from '@/ui/layout/card/components/Card';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { IconLink, Toggle } from 'twenty-ui';
import { IconLink, Toggle, Card } from 'twenty-ui';
import { useUpdateWorkspaceMutation } from '~/generated/graphql';
const StyledToggle = styled(Toggle)`

0
packages/twenty-front/src/modules/ui/layout/card/components/Card.tsx → packages/twenty-ui/src/layout/card/components/Card.tsx
View File

0
packages/twenty-front/src/modules/ui/layout/card/components/CardContent.tsx → packages/twenty-ui/src/layout/card/components/CardContent.tsx
View File

0
packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx → packages/twenty-ui/src/layout/card/components/CardFooter.tsx
View File

0
packages/twenty-front/src/modules/ui/layout/card/components/CardHeader.tsx → packages/twenty-ui/src/layout/card/components/CardHeader.tsx
View File

2
packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx → packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx
View File

@@ -1,5 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { ComponentDecorator } from '@ui/testing';
import { Card } from '../Card';
import { CardContent } from '../CardContent';

4
packages/twenty-ui/src/layout/index.ts
View File

@@ -5,4 +5,8 @@ export * from './animated-placeholder/constants/Background';
export * from './animated-placeholder/constants/DarkBackground';
export * from './animated-placeholder/constants/DarkMovingImage';
export * from './animated-placeholder/constants/MovingImage';
export * from './card/components/Card';
export * from './card/components/CardContent';
export * from './card/components/CardFooter';
export * from './card/components/CardHeader';
export * from './expandableContainer/components/ExpandableContainer';