Enforce front project structure through ESLINT (#7863)

Fixes: https://github.com/twentyhq/twenty/issues/7329

packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx

@@ -0,0 +1,86 @@
+import styled from '@emotion/styled';
+
+import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
+import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
+import { EventList } from '@/activities/timeline-activities/components/EventList';
+import { TimelineCreateButtonGroup } from '@/activities/timeline-activities/components/TimelineCreateButtonGroup';
+import { useTimelineActivities } from '@/activities/timeline-activities/hooks/useTimelineActivities';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import {
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+const StyledMainContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  border-top: ${({ theme }) =>
+    useIsMobile() ? `1px solid ${theme.border.color.medium}` : 'none'};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+
+  justify-content: center;
+  padding-top: ${({ theme }) => theme.spacing(6)};
+  padding-right: ${({ theme }) => theme.spacing(6)};
+  padding-left: ${({ theme }) => theme.spacing(6)};
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const TimelineActivities = ({
+  targetableObject,
+  isInRightDrawer = false,
+}: {
+  targetableObject: ActivityTargetableObject;
+  isInRightDrawer?: boolean;
+}) => {
+  const { timelineActivities, loading, fetchMoreRecords } =
+    useTimelineActivities(targetableObject);
+
+  const isTimelineActivitiesEmpty =
+    !timelineActivities || timelineActivities.length === 0;
+
+  if (loading === true) {
+    return <SkeletonLoader withSubSections />;
+  }
+
+  if (isTimelineActivitiesEmpty) {
+    return (
+      <AnimatedPlaceholderEmptyContainer
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...EMPTY_PLACEHOLDER_TRANSITION_PROPS}
+      >
+        <AnimatedPlaceholder type="emptyTimeline" />
+        <AnimatedPlaceholderEmptyTextContainer>
+          <AnimatedPlaceholderEmptyTitle>
+            Add your first Activity
+          </AnimatedPlaceholderEmptyTitle>
+          <AnimatedPlaceholderEmptySubTitle>
+            There are no activities associated with this record.{' '}
+          </AnimatedPlaceholderEmptySubTitle>
+        </AnimatedPlaceholderEmptyTextContainer>
+        <TimelineCreateButtonGroup isInRightDrawer={isInRightDrawer} />
+      </AnimatedPlaceholderEmptyContainer>
+    );
+  }
+
+  return (
+    <StyledMainContainer>
+      <EventList
+        targetableObject={targetableObject}
+        title="All"
+        events={timelineActivities ?? []}
+      />
+      <CustomResolverFetchMoreLoader
+        loading={loading}
+        onLastRowVisible={fetchMoreRecords}
+      />
+    </StyledMainContainer>
+  );
+};