Move to proper place and fix imports

twentyhq · Apr 30, 2024 · ee17e78 · ee17e78
1 parent d09bbb3
commit ee17e78
Show file tree

Hide file tree

Showing 23 changed files with 62 additions and 75 deletions.
diff --git a/...c/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/...c/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx
@@ -7,8 +7,8 @@ import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui';
 import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
 import { ParticipantChip } from '@/activities/components/ParticipantChip';
 import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
-import { ExpandableList } from '@/ui/display/expandable-list/ExpandableList';
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
+import { ExpandableList } from '@/ui/layout/expandable-list/ExpandableList';
 import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompleted.ts';
 
 const StyledInlineCellBaseContainer = styled.div`

diff --git a/packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx b/packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx
@@ -5,7 +5,7 @@ import { RecordChip } from '@/object-record/components/RecordChip';
 import {
   ExpandableList,
   ExpandableListProps,
-} from '@/ui/display/expandable-list/ExpandableList';
+} from '@/ui/layout/expandable-list/ExpandableList';
 
 const StyledContainer = styled.div<{ maxWidth?: number }>`
   display: flex;

diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
@@ -7,7 +7,7 @@ import {
 } from 'twenty-ui';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
-import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell.tsx';
+import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell';
 import { Activity } from '@/activities/types/Activity';
 import { getActivitySummary } from '@/activities/utils/getActivitySummary';
 import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
@@ -17,7 +17,7 @@ import { captchaProviderState } from '@/client-config/states/captchaProviderStat
 import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { ActionLink } from '@/ui/navigation/link/components/ActionLink.tsx';
+import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
 import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 import { isDefined } from '~/utils/isDefined';
 

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResetPassword.ts b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResetPassword.ts
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { useEmailPasswordResetLinkMutation } from '~/generated/graphql.tsx';
+import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
 
 export const useHandleResetPassword = () => {
   const { enqueueSnackBar } = useSnackBar();

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts
@@ -6,7 +6,7 @@ import { CurrentWorkspace } from '@/auth/states/currentWorkspaceState';
 import { previousUrlState } from '@/auth/states/previousUrlState';
 import { billingState } from '@/client-config/states/billingState';
 import { AppPath } from '@/types/AppPath';
-import { WorkspaceMember } from '~/generated/graphql.tsx';
+import { WorkspaceMember } from '~/generated/graphql';
 
 export const useNavigateAfterSignInUp = () => {
   const navigate = useNavigate();

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts
@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom';
 
-import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql.tsx';
+import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
 
 export const useWorkspaceFromInviteHash = () => {
   const workspaceInviteHash = useParams().workspaceInviteHash;

diff --git a/packages/twenty-front/src/modules/billing/components/SubscriptionCard.tsx b/packages/twenty-front/src/modules/billing/components/SubscriptionCard.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { SubscriptionCardPrice } from '@/billing/components/SubscriptionCardPrice.tsx';
+import { SubscriptionCardPrice } from '@/billing/components/SubscriptionCardPrice';
 import { capitalize } from '~/utils/string/capitalize';
 
 type SubscriptionCardProps = {

diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { ExpandableListProps } from '@/ui/display/expandable-list/ExpandableList';
+import { ExpandableListProps } from '@/ui/layout/expandable-list/ExpandableList';
 
 import { FieldContext } from '../contexts/FieldContext';
 import { AddressFieldDisplay } from '../meta-types/display/components/AddressFieldDisplay';
@@ -12,7 +12,7 @@ import { EmailFieldDisplay } from '../meta-types/display/components/EmailFieldDi
 import { FullNameFieldDisplay } from '../meta-types/display/components/FullNameFieldDisplay';
 import { JsonFieldDisplay } from '../meta-types/display/components/JsonFieldDisplay';
 import { LinkFieldDisplay } from '../meta-types/display/components/LinkFieldDisplay';
-import { MultiSelectFieldDisplay } from '../meta-types/display/components/MultiSelectFieldDisplay.tsx';
+import { MultiSelectFieldDisplay } from '../meta-types/display/components/MultiSelectFieldDisplay';
 import { NumberFieldDisplay } from '../meta-types/display/components/NumberFieldDisplay';
 import { PhoneFieldDisplay } from '../meta-types/display/components/PhoneFieldDisplay';
 import { RelationFieldDisplay } from '../meta-types/display/components/RelationFieldDisplay';

diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { AddressFieldInput } from '@/object-record/record-field/meta-types/input/components/AddressFieldInput';
 import { DateFieldInput } from '@/object-record/record-field/meta-types/input/components/DateFieldInput';
 import { FullNameFieldInput } from '@/object-record/record-field/meta-types/input/components/FullNameFieldInput';
-import { MultiSelectFieldInput } from '@/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx';
+import { MultiSelectFieldInput } from '@/object-record/record-field/meta-types/input/components/MultiSelectFieldInput';
 import { RawJsonFieldInput } from '@/object-record/record-field/meta-types/input/components/RawJsonFieldInput';
 import { SelectFieldInput } from '@/object-record/record-field/meta-types/input/components/SelectFieldInput';
 import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';

diff --git a/...ules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx b/...ules/object-record/record-field/meta-types/display/components/MultiSelectFieldDisplay.tsx
@@ -1,9 +1,9 @@
 import { useMultiSelectField } from '@/object-record/record-field/meta-types/hooks/useMultiSelectField';
+import { Tag } from '@/ui/display/tag/components/Tag';
 import {
   ExpandableList,
   ExpandableListProps,
-} from '@/ui/display/expandable-list/ExpandableList';
-import { Tag } from '@/ui/display/tag/components/Tag';
+} from '@/ui/layout/expandable-list/ExpandableList';
 
 type MultiSelectFieldDisplayProps = ExpandableListProps;
 export const MultiSelectFieldDisplay = ({

diff --git a/...enty-front/src/modules/object-record/record-field/meta-types/hooks/useMultiSelectField.ts b/...enty-front/src/modules/object-record/record-field/meta-types/hooks/useMultiSelectField.ts
@@ -9,7 +9,7 @@ import { assertFieldMetadata } from '@/object-record/record-field/types/guards/a
 import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/isFieldMultiSelect';
 import { isFieldMultiSelectValue } from '@/object-record/record-field/types/guards/isFieldMultiSelectValue';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
-import { FieldMetadataType } from '~/generated/graphql.tsx';
+import { FieldMetadataType } from '~/generated/graphql';
 
 export const useMultiSelectField = () => {
   const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext);

diff --git a/.../modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx b/.../modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
@@ -7,7 +7,7 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { MenuItemMultiSelectTag } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx';
+import { MenuItemMultiSelectTag } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectTag';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 

diff --git a/...ont/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/...ont/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@@ -6,9 +6,9 @@ import { motion } from 'framer-motion';
 import { IconComponent } from 'twenty-ui';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-import { AnimationDivProps } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx';
-import { ExpandableListProps } from '@/ui/display/expandable-list/ExpandableList';
+import { AnimationDivProps } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
+import { ExpandableListProps } from '@/ui/layout/expandable-list/ExpandableList';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { useInlineCell } from '../hooks/useInlineCell';

diff --git a/...ules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/...ules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
@@ -20,7 +20,7 @@ import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/rec
 import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
 import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
 import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
-import { ExpandableListProps } from '@/ui/display/expandable-list/ExpandableList';
+import { ExpandableListProps } from '@/ui/layout/expandable-list/ExpandableList';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';

diff --git a/...les/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx b/...les/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { IconComponent } from 'twenty-ui';
 
-import { AnimationDivProps } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx';
+import { AnimationDivProps } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
 
 const StyledEditButtonContainer = styled(motion.div)`

diff --git a/packages/twenty-front/src/modules/ui/display/info/components/Info.tsx b/packages/twenty-front/src/modules/ui/display/info/components/Info.tsx
@@ -3,7 +3,7 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconInfoCircle } from 'twenty-ui';
 
-import { Button } from '@/ui/input/button/components/Button.tsx';
+import { Button } from '@/ui/input/button/components/Button';
 
 export type InfoAccent = 'blue' | 'danger';
 export type InfoProps = {

diff --git a/packages/twenty-front/src/modules/ui/input/components/CardPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/CardPicker.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import { Radio } from '@/ui/input/components/Radio.tsx';
+import { Radio } from '@/ui/input/components/Radio';
+
 const StyledSubscriptionCardContainer = styled.button`
   background-color: ${({ theme }) => theme.background.secondary};
   border: 1px solid ${({ theme }) => theme.border.color.medium};

diff --git a/...lay/expandable-list/ChildrenContainer.tsx → ...out/expandable-list/ChildrenContainer.tsx b/...lay/expandable-list/ChildrenContainer.tsx → ...out/expandable-list/ChildrenContainer.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import styled from '@emotion/styled';
 
-import { ChildrenProperty } from '@/ui/display/expandable-list/ExpandableList';
+import { ChildrenProperty } from '@/ui/layout/expandable-list/ExpandableList';
 
 const StyledChildContainer = styled.div<{
   shrink?: number;
@@ -23,14 +23,12 @@ const StyledChildrenContainer = styled.div`
 export const ChildrenContainer = ({
   children,
   childrenProperties,
-  setChildrenProperties,
+  setChildrenWidths,
   isFocusedMode,
 }: {
   children: ReactElement[];
   childrenProperties: Record<number, ChildrenProperty>;
-  setChildrenProperties: Dispatch<
-    SetStateAction<Record<number, ChildrenProperty>>
-  >;
+  setChildrenWidths: Dispatch<SetStateAction<Record<number, number>>>;
   isFocusedMode: boolean;
 }) => {
   return (
@@ -40,13 +38,8 @@ export const ChildrenContainer = ({
           <StyledChildContainer
             ref={(el) => {
               if (!el || isFocusedMode) return;
-              setChildrenProperties((prevState) => {
-                prevState[index] = {
-                  ...prevState[index],
-                  width: el.getBoundingClientRect().width,
-                  shrink: 0,
-                  isVisible: true,
-                };
+              setChildrenWidths((prevState) => {
+                prevState[index] = el.getBoundingClientRect().width;
                 return prevState;
               });
             }}

diff --git a/...isplay/expandable-list/ExpandableList.tsx → ...layout/expandable-list/ExpandableList.tsx b/...isplay/expandable-list/ExpandableList.tsx → ...layout/expandable-list/ExpandableList.tsx
@@ -4,10 +4,10 @@ import { offset, useFloating } from '@floating-ui/react';
 import { motion } from 'framer-motion';
 import { Chip, ChipVariant } from 'twenty-ui';
 
-import { AnimationDivProps } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx';
-import { ChildrenContainer } from '@/ui/display/expandable-list/ChildrenContainer.tsx';
-import { getChipContentWidth } from '@/ui/display/expandable-list/getChipContentWidth.ts';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu.tsx';
+import { AnimationDivProps } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { ChildrenContainer } from '@/ui/layout/expandable-list/ChildrenContainer';
+import { getChipContentWidth } from '@/ui/layout/expandable-list/getChipContentWidth';
 
 const GAP_WIDTH = 4;
 
@@ -46,40 +46,58 @@ export type ExpandableListProps = {
 };
 
 export type ChildrenProperty = {
-  width: number;
   shrink: number;
   isVisible: boolean;
 };
 
 export const ExpandableList = ({
   children,
   isHovered,
-  forceDisplayHiddenCount = false,
   reference,
+  forceDisplayHiddenCount = false,
   withOutline = false,
 }: {
   children: ReactElement[];
 } & ExpandableListProps) => {
   const [containerWidth, setContainerWidth] = useState(0);
   const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
-  const [childrenProperties, setChildrenProperties] = useState<
-    Record<number, ChildrenProperty>
-  >({});
+  const [childrenWidths, setChildrenWidths] = useState<Record<number, number>>(
+    {},
+  );
+  const getChildrenProperties = () => {
+    let cumulatedChildrenWidth = 0;
+    const result: Record<number, ChildrenProperty> = {};
+    Object.values(childrenWidths).forEach((width, index) => {
+      // Because there is a 4px gap between children
+      const childWidth = width + GAP_WIDTH;
+      let shrink = 1;
+      let isVisible = true;
+
+      if (cumulatedChildrenWidth > availableWidth) {
+        isVisible = false;
+      } else if (cumulatedChildrenWidth + childWidth <= availableWidth) {
+        shrink = 0;
+      }
+      result[index] = { shrink, isVisible };
+      cumulatedChildrenWidth += childWidth;
+    });
+    return result;
+  };
 
   // Because Chip width depends on the number of hidden children which depends on the Chip width, we have a circular dependency
   // To avoid it, we set the Chip width and make sure it can display its content (a number greater than 1)
   const chipContentWidth = getChipContentWidth(children.length);
   const chipContainerWidth = chipContentWidth + 2 * GAP_WIDTH; // Because Chip component has 4px padding-left and right
   const availableWidth = containerWidth - (chipContainerWidth + GAP_WIDTH); // Because there is a 4px gap between ChildrenContainer and ChipContainer
 
-  const hiddenChildrenCount = Object.values(childrenProperties).filter(
-    (childProperties) => !childProperties.isVisible,
-  ).length;
-
   const isFocusedMode =
     (isHovered || forceDisplayHiddenCount) &&
-    Object.values(childrenProperties).length > 0;
+    Object.values(childrenWidths).length > 0;
 
+  const childrenProperties = getChildrenProperties();
+  const hiddenChildrenCount = Object.values(childrenProperties).filter(
+    (childProperties) => !childProperties.isVisible,
+  ).length;
   const displayHiddenCountChip = isFocusedMode && hiddenChildrenCount > 0;
 
   const { refs, floatingStyles } = useFloating({
@@ -100,31 +118,6 @@ export const ExpandableList = ({
     }
   }, [isHovered]);
 
-  useEffect(() => {
-    if (isFocusedMode) {
-      let cumulatedChildrenWidth = 0;
-      Object.values(childrenProperties).forEach((childProperties, index) => {
-        // Because there is a 4px gap between children
-        const childWidth = childProperties.width + GAP_WIDTH;
-        let shrink = 1;
-        let isVisible = true;
-
-        if (cumulatedChildrenWidth > availableWidth) {
-          isVisible = false;
-        } else if (cumulatedChildrenWidth + childWidth <= availableWidth) {
-          shrink = 0;
-        }
-        setChildrenProperties((prevState) => {
-          return {
-            ...prevState,
-            [index]: { width: prevState[index].width, shrink, isVisible },
-          };
-        });
-        cumulatedChildrenWidth += childWidth;
-      });
-    }
-  }, [isFocusedMode, childrenProperties, availableWidth]);
-
   return (
     <StyledContainer
       ref={(el) => {
@@ -134,7 +127,7 @@ export const ExpandableList = ({
     >
       <ChildrenContainer
         childrenProperties={childrenProperties}
-        setChildrenProperties={setChildrenProperties}
+        setChildrenWidths={setChildrenWidths}
         isFocusedMode={isFocusedMode}
       >
         {children}

diff --git a/...ay/expandable-list/getChipContentWidth.ts → ...ut/expandable-list/getChipContentWidth.ts b/...ay/expandable-list/getChipContentWidth.ts → ...ut/expandable-list/getChipContentWidth.ts
diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx b/packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { IconBrandGithub } from 'twenty-ui';
 
-import { ActionLink } from '@/ui/navigation/link/components/ActionLink.tsx';
+import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
 
 import packageJson from '../../../../../../package.json';
 import { GITHUB_LINK } from '../constants/GithubLink';

diff --git a/...twenty-front/src/modules/ui/navigation/link/components/__stories__/ActionLink.stories.tsx b/...twenty-front/src/modules/ui/navigation/link/components/__stories__/ActionLink.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
-import { ActionLink } from '@/ui/navigation/link/components/ActionLink.tsx';
+import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
 
 const meta: Meta<typeof ActionLink> = {
   title: 'UI/navigation/link/ActionLink',