Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconX } from '@/ui/display/icon';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { AnimatedFadeOut } from '@/ui/utilities/animation/components/AnimatedFadeOut';
+import { cookieStorage } from '~/utils/cookie-storage';
+
+import CoverImage from '../assets/cover.png';
+
+const StyledCoverImageContainer = styled.div`
+  align-items: center;
+  background-image: url(${CoverImage.toString()});
+  background-size: cover;
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  box-sizing: border-box;
+  display: flex;
+  height: 153px;
+  justify-content: center;
+  position: relative;
+`;
+
+const StyledTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding-top: ${({ theme }) => theme.spacing(5)};
+`;
+
+const StyledLighIconButton = styled(LightIconButton)`
+  position: absolute;
+  right: ${({ theme }) => theme.spacing(1)};
+  top: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const SettingsObjectCoverImage = () => {
+  const theme = useTheme();
+
+  const [cookieState, setCookieState] = useState(
+    cookieStorage.getItem('settings-object-cover-image'),
+  );
+
+  return (
+    <AnimatedFadeOut
+      isOpen={cookieState !== 'closed'}
+      marginBottom={theme.spacing(8)}
+    >
+      <StyledCoverImageContainer>
+        <StyledTitle>Build your business logic</StyledTitle>
+        <StyledLighIconButton
+          Icon={IconX}
+          accent="tertiary"
+          size="small"
+          onClick={() => {
+            cookieStorage.setItem('settings-object-cover-image', 'closed');
+            setCookieState('closed');
+          }}
+        />
+      </StyledCoverImageContainer>
+    </AnimatedFadeOut>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx

@@ -0,0 +1,67 @@
+import { IconDotsVertical } from '@/ui/display/icon';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { IconArchiveOff } from '@/ui/input/constants/icons';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+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';
+
+type SettingsObjectDisabledMenuDropDownProps = {
+  isCustomObject: boolean;
+  onActivate: () => void;
+  onErase: () => void;
+  scopeKey: string;
+};
+
+export const SettingsObjectDisabledMenuDropDown = ({
+  onActivate,
+  scopeKey,
+}: SettingsObjectDisabledMenuDropDownProps) => {
+  const dropdownScopeId = `${scopeKey}-settings-object-disabled-menu-dropdown`;
+
+  const { closeDropdown } = useDropdown({ dropdownScopeId });
+
+  const handleActivate = () => {
+    onActivate();
+    closeDropdown();
+  };
+
+  // const handleErase = () => {
+  //   onErase();
+  //   closeDropdown();
+  // };
+
+  return (
+    <DropdownScope dropdownScopeId={dropdownScopeId}>
+      <Dropdown
+        clickableComponent={
+          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        }
+        dropdownComponents={
+          <DropdownMenu width="160px">
+            <DropdownMenuItemsContainer>
+              <MenuItem
+                text="Activate"
+                LeftIcon={IconArchiveOff}
+                onClick={handleActivate}
+              />
+              {/* {isCustomObject && (
+                <MenuItem
+                  text="Erase"
+                  LeftIcon={IconTrash}
+                  accent="danger"
+                  onClick={handleErase}
+                />
+              )} */}
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+        dropdownHotkeyScope={{
+          scope: dropdownScopeId,
+        }}
+      />
+    </DropdownScope>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx

@@ -0,0 +1,87 @@
+import { Decorator, Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { SettingsObjectDisabledMenuDropDown } from '../SettingsObjectDisabledMenuDropDown';
+
+const handleActivateMockFunction = fn();
+const handleEraseMockFunction = fn();
+
+const ClearMocksDecorator: Decorator = (Story, context) => {
+  if (context.parameters.clearMocks) {
+    handleActivateMockFunction.mockClear();
+    handleEraseMockFunction.mockClear();
+  }
+  return <Story />;
+};
+
+const meta: Meta<typeof SettingsObjectDisabledMenuDropDown> = {
+  title: 'Modules/Settings/DataModel/SettingsObjectDisabledMenuDropDown',
+  component: SettingsObjectDisabledMenuDropDown,
+  args: {
+    scopeKey: 'settings-object-disabled-menu-dropdown',
+    onActivate: handleActivateMockFunction,
+    onErase: handleEraseMockFunction,
+  },
+  decorators: [ComponentDecorator, ClearMocksDecorator],
+  parameters: {
+    clearMocks: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsObjectDisabledMenuDropDown>;
+
+export const Default: Story = {};
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dropdownButton = await canvas.getByRole('button');
+
+    await userEvent.click(dropdownButton);
+  },
+};
+
+export const WithActivate: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dropdownButton = await canvas.getByRole('button');
+
+    await userEvent.click(dropdownButton);
+
+    await expect(handleActivateMockFunction).toHaveBeenCalledTimes(0);
+
+    const activateMenuItem = await canvas.getByText('Activate');
+
+    await userEvent.click(activateMenuItem);
+
+    await expect(handleActivateMockFunction).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(dropdownButton);
+  },
+};
+
+export const WithErase: Story = {
+  args: { isCustomObject: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dropdownButton = await canvas.getByRole('button');
+
+    await userEvent.click(dropdownButton);
+
+    await expect(handleEraseMockFunction).toHaveBeenCalledTimes(0);
+
+    const eraseMenuItem = await canvas.getByText('Erase');
+
+    await userEvent.click(eraseMenuItem);
+
+    await expect(handleEraseMockFunction).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(dropdownButton);
+  },
+};