Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -0,0 +1,75 @@
+import styled from '@emotion/styled';
+
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { ActivityType } from '@/activities/types/Activity';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { PageHotkeyScope } from '@/types/PageHotkeyScope';
+import { IconCheckbox, IconNotes, IconPlus } from '@/ui/display/icon/index';
+import { IconButton } from '@/ui/input/button/components/IconButton';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+
+import { Dropdown } from '../../dropdown/components/Dropdown';
+import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
+import { DropdownScope } from '../../dropdown/scopes/DropdownScope';
+
+const StyledContainer = styled.div`
+  z-index: 1;
+`;
+
+export const ShowPageAddButton = ({
+  entity,
+}: {
+  entity: ActivityTargetableEntity;
+}) => {
+  const { closeDropdown, toggleDropdown } = useDropdown({
+    dropdownScopeId: 'add-show-page',
+  });
+  const openCreateActivity = useOpenCreateActivityDrawer();
+
+  const handleSelect = (type: ActivityType) => {
+    openCreateActivity({ type, targetableEntities: [entity] });
+    closeDropdown();
+  };
+
+  return (
+    <StyledContainer>
+      <DropdownScope dropdownScopeId="add-show-page">
+        <Dropdown
+          clickableComponent={
+            <IconButton
+              Icon={IconPlus}
+              size="medium"
+              dataTestId="add-showpage-button"
+              accent="default"
+              variant="secondary"
+              onClick={toggleDropdown}
+            />
+          }
+          dropdownComponents={
+            <DropdownMenu>
+              <DropdownMenuItemsContainer>
+                <MenuItem
+                  onClick={() => handleSelect('Note')}
+                  accent="default"
+                  LeftIcon={IconNotes}
+                  text="Note"
+                />
+                <MenuItem
+                  onClick={() => handleSelect('Task')}
+                  accent="default"
+                  LeftIcon={IconCheckbox}
+                  text="Task"
+                />
+              </DropdownMenuItemsContainer>
+            </DropdownMenu>
+          }
+          dropdownHotkeyScope={{
+            scope: PageHotkeyScope.ShowPage,
+          }}
+        />
+      </DropdownScope>
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -0,0 +1,61 @@
+import { ReactElement } from 'react';
+import styled from '@emotion/styled';
+
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+
+const StyledOuterContainer = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  border-bottom-left-radius: 8px;
+  border-right: ${({ theme }) => {
+    const isMobile = useIsMobile();
+    return !isMobile ? `1px solid ${theme.border.color.medium}` : 'none';
+  }};
+  border-top-left-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+
+  z-index: 10;
+`;
+
+const StyledInnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0px ${({ theme }) => theme.spacing(2)} 0px
+    ${({ theme }) => theme.spacing(3)};
+  width: ${({ theme }) => {
+    const isMobile = useIsMobile();
+
+    return isMobile ? `calc(100% - ${theme.spacing(5)})` : '320px';
+  }};
+`;
+
+const StyledIntermediateContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({ theme }) => theme.spacing(3)};
+`;
+
+export type ShowPageLeftContainerProps = {
+  children: ReactElement[];
+};
+
+export const ShowPageLeftContainer = ({
+  children,
+}: ShowPageLeftContainerProps) => {
+  const isMobile = useIsMobile();
+  return isMobile ? (
+    <StyledOuterContainer>
+      <StyledInnerContainer>{children}</StyledInnerContainer>
+    </StyledOuterContainer>
+  ) : (
+    <StyledOuterContainer>
+      <ScrollWrapper>
+        <StyledIntermediateContainer>
+          <StyledInnerContainer>{children}</StyledInnerContainer>
+        </StyledIntermediateContainer>
+      </ScrollWrapper>
+    </StyledOuterContainer>
+  );
+};

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -0,0 +1,109 @@
+import styled from '@emotion/styled';
+
+import { Attachments } from '@/activities/files/components/Attachments';
+import { Notes } from '@/activities/notes/components/Notes';
+import { EntityTasks } from '@/activities/tasks/components/EntityTasks';
+import { Timeline } from '@/activities/timeline/components/Timeline';
+import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import {
+  IconCheckbox,
+  IconMail,
+  IconNotes,
+  IconPaperclip,
+  IconTimelineEvent,
+} from '@/ui/display/icon';
+import { TabList } from '@/ui/layout/tab/components/TabList';
+import { activeTabIdScopedState } from '@/ui/layout/tab/states/activeTabIdScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { ShowPageRecoilScopeContext } from '../../states/ShowPageRecoilScopeContext';
+
+const StyledShowPageRightContainer = styled.div`
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: start;
+  overflow: ${() => (useIsMobile() ? 'none' : 'hidden')};
+  width: calc(100% + 4px);
+`;
+
+const StyledTabListContainer = styled.div`
+  align-items: center;
+  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+  box-sizing: border-box;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: 40px;
+`;
+
+type ShowPageRightContainerProps = {
+  entity: ActivityTargetableEntity;
+  timeline?: boolean;
+  tasks?: boolean;
+  notes?: boolean;
+  emails?: boolean;
+};
+
+export const ShowPageRightContainer = ({
+  entity,
+  timeline,
+  tasks,
+  notes,
+  emails,
+}: ShowPageRightContainerProps) => {
+  const TASK_TABS = [
+    {
+      id: 'timeline',
+      title: 'Timeline',
+      Icon: IconTimelineEvent,
+      hide: !timeline,
+      disabled: entity.type === 'Custom',
+    },
+    {
+      id: 'tasks',
+      title: 'Tasks',
+      Icon: IconCheckbox,
+      hide: !tasks,
+      disabled: entity.type === 'Custom',
+    },
+    {
+      id: 'notes',
+      title: 'Notes',
+      Icon: IconNotes,
+      hide: !notes,
+      disabled: entity.type === 'Custom',
+    },
+    {
+      id: 'files',
+      title: 'Files',
+      Icon: IconPaperclip,
+      hide: !notes,
+      disabled: entity.type === 'Custom',
+    },
+    {
+      id: 'emails',
+      title: 'Emails',
+      Icon: IconMail,
+      hide: !emails,
+      disabled: true,
+    },
+  ];
+
+  const [activeTabId] = useRecoilScopedState(
+    activeTabIdScopedState,
+    ShowPageRecoilScopeContext,
+  );
+
+  return (
+    <StyledShowPageRightContainer>
+      <StyledTabListContainer>
+        <TabList context={ShowPageRecoilScopeContext} tabs={TASK_TABS} />
+      </StyledTabListContainer>
+      {activeTabId === 'timeline' && <Timeline entity={entity} />}
+      {activeTabId === 'tasks' && <EntityTasks entity={entity} />}
+      {activeTabId === 'notes' && <Notes entity={entity} />}
+      {activeTabId === 'files' && <Attachments targetableEntity={entity} />}
+    </StyledShowPageRightContainer>
+  );
+};

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -0,0 +1,136 @@
+import { ChangeEvent, useRef } from 'react';
+import { Tooltip } from 'react-tooltip';
+import styled from '@emotion/styled';
+import { v4 as uuidV4 } from 'uuid';
+
+import { Avatar, AvatarType } from '@/users/components/Avatar';
+import {
+  beautifyExactDateTime,
+  beautifyPastDateRelativeToNow,
+} from '~/utils/date-utils';
+
+import { OverflowingTextWithTooltip } from '../../../display/tooltip/OverflowingTextWithTooltip';
+
+type ShowPageSummaryCardProps = {
+  id?: string;
+  logoOrAvatar?: string;
+  title: string;
+  date: string;
+  renderTitleEditComponent?: () => JSX.Element;
+  onUploadPicture?: (file: File) => void;
+  avatarType: AvatarType;
+};
+
+const StyledShowPageSummaryCard = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
+    ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledInfoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+`;
+
+const StyledDate = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  cursor: pointer;
+`;
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-direction: row;
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  justify-content: center;
+  width: 100%;
+`;
+
+const StyledTooltip = styled(Tooltip)`
+  background-color: ${({ theme }) => theme.background.primary};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+
+  color: ${({ theme }) => theme.font.color.primary};
+
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledAvatarWrapper = styled.div`
+  cursor: pointer;
+`;
+
+const StyledFileInput = styled.input`
+  display: none;
+`;
+
+export const ShowPageSummaryCard = ({
+  id,
+  logoOrAvatar,
+  title,
+  date,
+  avatarType,
+  renderTitleEditComponent,
+  onUploadPicture,
+}: ShowPageSummaryCardProps) => {
+  const beautifiedCreatedAt =
+    date !== '' ? beautifyPastDateRelativeToNow(date) : '';
+  const exactCreatedAt = date !== '' ? beautifyExactDateTime(date) : '';
+  const dateElementId = `date-id-${uuidV4()}`;
+  const inputFileRef = useRef<HTMLInputElement>(null);
+
+  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) onUploadPicture?.(e.target.files[0]);
+  };
+
+  const handleAvatarClick = () => {
+    inputFileRef?.current?.click?.();
+  };
+
+  return (
+    <StyledShowPageSummaryCard>
+      <StyledAvatarWrapper>
+        <Avatar
+          avatarUrl={logoOrAvatar}
+          onClick={onUploadPicture ? handleAvatarClick : undefined}
+          size="xl"
+          colorId={id}
+          placeholder={title}
+          type={avatarType}
+        />
+        <StyledFileInput
+          ref={inputFileRef}
+          onChange={onFileChange}
+          type="file"
+        />
+      </StyledAvatarWrapper>
+
+      <StyledInfoContainer>
+        <StyledTitle>
+          {renderTitleEditComponent ? (
+            renderTitleEditComponent()
+          ) : (
+            <OverflowingTextWithTooltip text={title} />
+          )}
+        </StyledTitle>
+        <StyledDate id={dateElementId}>Added {beautifiedCreatedAt}</StyledDate>
+        <StyledTooltip
+          anchorSelect={`#${dateElementId}`}
+          content={exactCreatedAt}
+          clickable
+          noArrow
+          place="right"
+        />
+      </StyledInfoContainer>
+    </StyledShowPageSummaryCard>
+  );
+};