From 113e9fc8c731fffb23ca630fe14c3b6a6015676a Mon Sep 17 00:00:00 2001 From: "gitstart-app[bot]" <57568882+gitstart-app[bot]@users.noreply.github.com> Date: Tue, 22 Oct 2024 18:08:54 +0200 Subject: [PATCH] Migrate to twenty-ui - utilities/animation (#7951) This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7538](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7538). --- ### Description - Move animation components to `twenty-ui` \ \ \ Fixes #7538 Co-authored-by: gitstart-twenty Co-authored-by: Charles Bochet --- .../emails/components/EmailThreadMessageBody.tsx | 4 +--- .../twenty-front/src/modules/auth/components/Title.tsx | 5 ++--- .../record-board-card/components/RecordBoardCard.tsx | 8 ++++++-- .../components/RecordInlineCellEditButton.tsx | 3 +-- .../components/RecordDetailRelationRecordsListItem.tsx | 2 +- .../components/RecordTableCellButton.tsx | 3 +-- .../layout/expandable-list/components/ExpandableList.tsx | 3 +-- packages/twenty-front/src/pages/auth/Invite.tsx | 6 +++--- packages/twenty-front/src/pages/auth/PasswordReset.tsx | 2 +- packages/twenty-front/src/pages/auth/SignInUp.tsx | 2 +- packages/twenty-front/src/pages/onboarding/InviteTeam.tsx | 4 +--- .../twenty-front/src/pages/onboarding/PaymentSuccess.tsx | 3 +-- .../utilities/animation/components/AnimatedContainer.tsx | 0 .../utilities/animation/components/AnimatedEaseIn.tsx | 2 +- .../utilities/animation/components/AnimatedEaseInOut.tsx | 2 +- .../utilities/animation/components/AnimatedFadeOut.tsx | 2 +- .../utilities/animation/components/AnimatedTextWord.tsx | 0 .../animation/components/AnimatedTranslation.tsx | 0 packages/twenty-ui/src/utilities/animation/index.ts | 6 ++++++ packages/twenty-ui/src/utilities/index.ts | 6 ++++++ 20 files changed, 35 insertions(+), 28 deletions(-) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/utilities/animation/components/AnimatedContainer.tsx (100%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/utilities/animation/components/AnimatedEaseIn.tsx (93%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/utilities/animation/components/AnimatedEaseInOut.tsx (95%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/utilities/animation/components/AnimatedFadeOut.tsx (95%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/utilities/animation/components/AnimatedTextWord.tsx (100%) rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/utilities/animation/components/AnimatedTranslation.tsx (100%) create mode 100644 packages/twenty-ui/src/utilities/animation/index.ts diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx index 128197c60..b31fa54fe 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx @@ -1,8 +1,6 @@ -import React from 'react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; - -import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut'; +import { AnimatedEaseInOut } from 'twenty-ui'; const StyledThreadMessageBody = styled(motion.div)` color: ${({ theme }) => theme.font.color.primary}; diff --git a/packages/twenty-front/src/modules/auth/components/Title.tsx b/packages/twenty-front/src/modules/auth/components/Title.tsx index d0a496b25..7f87362b1 100644 --- a/packages/twenty-front/src/modules/auth/components/Title.tsx +++ b/packages/twenty-front/src/modules/auth/components/Title.tsx @@ -1,7 +1,6 @@ -import React from 'react'; import styled from '@emotion/styled'; - -import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; +import React from 'react'; +import { AnimatedEaseIn } from 'twenty-ui'; type TitleProps = React.PropsWithChildren & { animate?: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx index a2ea5b03d..2fdffd259 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -20,7 +20,6 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox'; import { TextInput } from '@/ui/input/components/TextInput'; -import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; import { RecordBoardScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; @@ -28,7 +27,12 @@ import styled from '@emotion/styled'; import { ReactNode, useContext, useState } from 'react'; import { useInView } from 'react-intersection-observer'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; -import { AvatarChipVariant, IconEye, IconEyeOff } from 'twenty-ui'; +import { + AnimatedEaseInOut, + AvatarChipVariant, + IconEye, + IconEyeOff, +} from 'twenty-ui'; import { useDebouncedCallback } from 'use-debounce'; import { useAddNewCard } from '../../record-board-column/hooks/useAddNewCard'; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx index 2af1e91d7..c14742e8e 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx @@ -1,8 +1,7 @@ import styled from '@emotion/styled'; -import { IconComponent } from 'twenty-ui'; +import { AnimatedContainer, IconComponent } from 'twenty-ui'; import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton'; -import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer'; const StyledInlineCellButtonContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx index eefeb3540..1ed6c37fa 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import { motion } from 'framer-motion'; import { useCallback, useContext } from 'react'; import { + AnimatedEaseInOut, IconChevronDown, IconComponent, IconDotsVertical, @@ -38,7 +39,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; -import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut'; import { RelationDefinitionType } from '~/generated-metadata/graphql'; const StyledListItem = styled(RecordDetailRecordsListItem)<{ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx index 25b0e10f6..957aa7484 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx @@ -1,8 +1,7 @@ import styled from '@emotion/styled'; -import { IconComponent } from 'twenty-ui'; +import { AnimatedContainer, IconComponent } from 'twenty-ui'; import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton'; -import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer'; const StyledButtonContainer = styled.div` margin: ${({ theme }) => theme.spacing(1)}; diff --git a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx index 9f669598b..db901cab9 100644 --- a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx @@ -1,10 +1,9 @@ import styled from '@emotion/styled'; import { ReactElement, useCallback, useEffect, useRef, useState } from 'react'; -import { Chip, ChipVariant } from 'twenty-ui'; +import { AnimatedContainer, Chip, ChipVariant } from 'twenty-ui'; import { ExpandedListDropdown } from '@/ui/layout/expandable-list/components/ExpandedListDropdown'; import { isFirstOverflowingChildElement } from '@/ui/layout/expandable-list/utils/isFirstOverflowingChildElement'; -import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/pages/auth/Invite.tsx b/packages/twenty-front/src/pages/auth/Invite.tsx index f14b7ea75..0afef7d32 100644 --- a/packages/twenty-front/src/pages/auth/Invite.tsx +++ b/packages/twenty-front/src/pages/auth/Invite.tsx @@ -12,13 +12,13 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { Loader } from '@/ui/feedback/loader/components/Loader'; import { MainButton } from '@/ui/input/button/components/MainButton'; import { useWorkspaceSwitching } from '@/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching'; -import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; +import { useSearchParams } from 'react-router-dom'; +import { AnimatedEaseIn } from 'twenty-ui'; import { - useAddUserToWorkspaceMutation, useAddUserToWorkspaceByInviteTokenMutation, + useAddUserToWorkspaceMutation, } from '~/generated/graphql'; import { isDefined } from '~/utils/isDefined'; -import { useSearchParams } from 'react-router-dom'; const StyledContentContainer = styled.div` margin-bottom: ${({ theme }) => theme.spacing(8)}; diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx index 11cf5d016..137810855 100644 --- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx +++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx @@ -23,7 +23,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { MainButton } from '@/ui/input/button/components/MainButton'; import { TextInputV2 } from '@/ui/input/components/TextInputV2'; import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState'; -import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; +import { AnimatedEaseIn } from 'twenty-ui'; import { useUpdatePasswordViaResetTokenMutation, useValidatePasswordResetTokenQuery, diff --git a/packages/twenty-front/src/pages/auth/SignInUp.tsx b/packages/twenty-front/src/pages/auth/SignInUp.tsx index d9eefac9e..2608ceaaa 100644 --- a/packages/twenty-front/src/pages/auth/SignInUp.tsx +++ b/packages/twenty-front/src/pages/auth/SignInUp.tsx @@ -7,7 +7,7 @@ import { SignInUpForm } from '@/auth/sign-in-up/components/SignInUpForm'; import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp'; import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; -import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; +import { AnimatedEaseIn } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; import { SignInUpStep } from '@/auth/states/signInUpStepState'; import { IconLockCustom } from '@ui/display/icon/components/IconLock'; diff --git a/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx b/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx index 33c482578..3b2a3ee94 100644 --- a/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx +++ b/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx @@ -10,7 +10,7 @@ import { } from 'react-hook-form'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { IconCopy } from 'twenty-ui'; +import { ActionLink, AnimatedTranslation, IconCopy } from 'twenty-ui'; import { z } from 'zod'; import { SubTitle } from '@/auth/components/SubTitle'; @@ -25,8 +25,6 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { LightButton } from '@/ui/input/button/components/LightButton'; import { MainButton } from '@/ui/input/button/components/MainButton'; import { TextInputV2 } from '@/ui/input/components/TextInputV2'; -import { ActionLink } from '@/ui/navigation/link/components/ActionLink'; -import { AnimatedTranslation } from '@/ui/utilities/animation/components/AnimatedTranslation'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { OnboardingStatus } from '~/generated/graphql'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx b/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx index f0e3c02d8..e2fb35efc 100644 --- a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx +++ b/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx @@ -1,14 +1,13 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconCheck, RGBA, UndecoratedLink } from 'twenty-ui'; +import { AnimatedEaseIn, IconCheck, RGBA, UndecoratedLink } from 'twenty-ui'; import { SubTitle } from '@/auth/components/SubTitle'; import { Title } from '@/auth/components/Title'; import { currentUserState } from '@/auth/states/currentUserState'; import { AppPath } from '@/types/AppPath'; import { MainButton } from '@/ui/input/button/components/MainButton'; -import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; import { OnboardingStatus } from '~/generated/graphql'; const StyledCheckContainer = styled.div` diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedContainer.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedContainer.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedContainer.tsx rename to packages/twenty-ui/src/utilities/animation/components/AnimatedContainer.tsx diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedEaseIn.tsx similarity index 93% rename from packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx rename to packages/twenty-ui/src/utilities/animation/components/AnimatedEaseIn.tsx index e3a25bf60..1c58cdd6d 100644 --- a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx +++ b/packages/twenty-ui/src/utilities/animation/components/AnimatedEaseIn.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; +import { AnimationDuration } from '@ui/theme'; import { motion } from 'framer-motion'; -import { AnimationDuration } from 'twenty-ui'; type AnimatedEaseInProps = Omit< React.ComponentProps, diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedEaseInOut.tsx similarity index 95% rename from packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx rename to packages/twenty-ui/src/utilities/animation/components/AnimatedEaseInOut.tsx index 8411a4fb3..0020e1cf1 100644 --- a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx +++ b/packages/twenty-ui/src/utilities/animation/components/AnimatedEaseInOut.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; +import { AnimationDuration } from '@ui/theme'; import { AnimatePresence, motion } from 'framer-motion'; -import { AnimationDuration } from 'twenty-ui'; type AnimatedEaseInOutProps = { isOpen: boolean; diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedFadeOut.tsx similarity index 95% rename from packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx rename to packages/twenty-ui/src/utilities/animation/components/AnimatedFadeOut.tsx index 7dd5f4a4b..0f2d2620e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx +++ b/packages/twenty-ui/src/utilities/animation/components/AnimatedFadeOut.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; +import { AnimationDuration } from '@ui/theme'; import { AnimatePresence, motion } from 'framer-motion'; -import { AnimationDuration } from 'twenty-ui'; type AnimatedFadeOutProps = { isOpen: boolean; diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedTextWord.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx rename to packages/twenty-ui/src/utilities/animation/components/AnimatedTextWord.tsx diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedTranslation.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedTranslation.tsx similarity index 100% rename from packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedTranslation.tsx rename to packages/twenty-ui/src/utilities/animation/components/AnimatedTranslation.tsx diff --git a/packages/twenty-ui/src/utilities/animation/index.ts b/packages/twenty-ui/src/utilities/animation/index.ts new file mode 100644 index 000000000..fdde95366 --- /dev/null +++ b/packages/twenty-ui/src/utilities/animation/index.ts @@ -0,0 +1,6 @@ +export * from './components/AnimatedContainer'; +export * from './components/AnimatedEaseIn'; +export * from './components/AnimatedEaseInOut'; +export * from './components/AnimatedFadeOut'; +export * from './components/AnimatedTextWord'; +export * from './components/AnimatedTranslation'; diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts index 1cd3b9109..0def2683e 100644 --- a/packages/twenty-ui/src/utilities/index.ts +++ b/packages/twenty-ui/src/utilities/index.ts @@ -1,3 +1,9 @@ +export * from './animation/components/AnimatedContainer'; +export * from './animation/components/AnimatedEaseIn'; +export * from './animation/components/AnimatedEaseInOut'; +export * from './animation/components/AnimatedFadeOut'; +export * from './animation/components/AnimatedTextWord'; +export * from './animation/components/AnimatedTranslation'; export * from './color/utils/stringToHslColor'; export * from './getDisplayValueByUrlType'; export * from './image/getImageAbsoluteURI';