Enforce front project structure through ESLINT (#7863)

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

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

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+
+import { Card } from '@/ui/layout/card/components/Card';
+
+type EventCardProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+};
+
+const StyledCardContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: ${({ theme }) => theme.spacing(2)};
+  width: 400px;
+  padding: ${({ theme }) => theme.spacing(2)} 0px
+    ${({ theme }) => theme.spacing(1)} 0px;
+`;
+
+const StyledCard = styled(Card)`
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+
+  display: flex;
+  padding: ${({ theme }) => theme.spacing(2)};
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+  align-self: stretch;
+`;
+
+export const EventCard = ({ children, isOpen }: EventCardProps) => {
+  return (
+    isOpen && (
+      <StyledCardContainer>
+        <StyledCard fullWidth>{children}</StyledCard>
+      </StyledCardContainer>
+    )
+  );
+};

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

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui';
+
+import { IconButton } from '@/ui/input/button/components/IconButton';
+
+type EventCardToggleButtonProps = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+};
+
+const StyledButtonContainer = styled.div`
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+`;
+
+export const EventCardToggleButton = ({
+  isOpen,
+  setIsOpen,
+}: EventCardToggleButtonProps) => {
+  return (
+    <StyledButtonContainer>
+      <IconButton
+        Icon={isOpen ? IconChevronUp : IconChevronDown}
+        onClick={() => setIsOpen(!isOpen)}
+        size="small"
+        variant="secondary"
+      />
+    </StyledButtonContainer>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { IconCirclePlus, IconEditCircle, IconTrash, useIcons } from 'twenty-ui';
+
+import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const EventIconDynamicComponent = ({
+  event,
+  linkedObjectMetadataItem,
+}: {
+  event: TimelineActivity;
+  linkedObjectMetadataItem: ObjectMetadataItem | null;
+}) => {
+  const { getIcon } = useIcons();
+  const [, eventAction] = event.name.split('.');
+
+  if (eventAction === 'created') {
+    return <IconCirclePlus />;
+  }
+  if (eventAction === 'updated') {
+    return <IconEditCircle />;
+  }
+  if (eventAction === 'deleted') {
+    return <IconTrash />;
+  }
+
+  const IconComponent = getIcon(linkedObjectMetadataItem?.icon);
+
+  return <IconComponent />;
+};

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

@@ -0,0 +1,98 @@
+import styled from '@emotion/styled';
+
+import { EventRowActivity } from '@/activities/timeline-activities/rows/activity/components/EventRowActivity';
+import { EventRowCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventRowCalendarEvent';
+import { EventRowMainObject } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObject';
+import { EventRowMessage } from '@/activities/timeline-activities/rows/message/components/EventRowMessage';
+import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export interface EventRowDynamicComponentProps {
+  labelIdentifierValue: string;
+  event: TimelineActivity;
+  mainObjectMetadataItem: ObjectMetadataItem;
+  linkedObjectMetadataItem: ObjectMetadataItem | null;
+  authorFullName: string;
+}
+
+export const StyledEventRowItemColumn = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const StyledEventRowItemAction = styled(StyledEventRowItemColumn)`
+  color: ${({ theme }) => theme.font.color.secondary};
+`;
+
+export const EventRowDynamicComponent = ({
+  labelIdentifierValue,
+  event,
+  mainObjectMetadataItem,
+  linkedObjectMetadataItem,
+  authorFullName,
+}: EventRowDynamicComponentProps) => {
+  const [eventName] = event.name.split('.');
+
+  switch (eventName) {
+    case 'calendarEvent':
+      return (
+        <EventRowCalendarEvent
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+        />
+      );
+    case 'message':
+      return (
+        <EventRowMessage
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+        />
+      );
+    case 'linked-task':
+      return (
+        <EventRowActivity
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+          objectNameSingular={CoreObjectNameSingular.Task}
+        />
+      );
+    case 'linked-note':
+      return (
+        <EventRowActivity
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+          objectNameSingular={CoreObjectNameSingular.Note}
+        />
+      );
+    case mainObjectMetadataItem?.nameSingular:
+      return (
+        <EventRowMainObject
+          labelIdentifierValue={labelIdentifierValue}
+          event={event}
+          mainObjectMetadataItem={mainObjectMetadataItem}
+          linkedObjectMetadataItem={linkedObjectMetadataItem}
+          authorFullName={authorFullName}
+        />
+      );
+    default:
+      throw new Error(
+        `Cannot find event component for event name ${eventName}`,
+      );
+  }
+};