Refactor/new menu item (#1448)

* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests

front/src/modules/people/components/PeopleCard.tsx

@@ -1,15 +1,14 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getOperationName } from '@apollo/client/utilities';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 
 import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
-import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { IconDotsVertical, IconLinkOff, IconTrash } from '@/ui/icon';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { Avatar } from '@/users/components/Avatar';
 import {
@@ -72,10 +71,6 @@ const StyledJobTitle = styled.div`
   }
 `;
 
-const StyledRemoveOption = styled.div`
-  color: ${({ theme }) => theme.color.red};
-`;
-
 export function PeopleCard({
   person,
   hasBottomBorder = true,
@@ -93,8 +88,6 @@ export function PeopleCard({
     placement: 'right-start',
   });
 
-  const theme = useTheme();
-
   useListenClickOutside({
     refs: [refs.floating],
     callback: () => {
@@ -175,14 +168,17 @@ export function PeopleCard({
               <StyledDropdownMenuItemsContainer
                 onClick={(e) => e.stopPropagation()}
               >
-                <DropdownMenuSelectableItem onClick={handleDetachPerson}>
-                  <IconLinkOff size={14} />
-                  Detach relation
-                </DropdownMenuSelectableItem>
-                <DropdownMenuSelectableItem onClick={handleDeletePerson}>
-                  <IconTrash size={14} color={theme.font.color.danger} />
-                  <StyledRemoveOption>Delete person</StyledRemoveOption>
-                </DropdownMenuSelectableItem>
+                <MenuItem
+                  onClick={handleDetachPerson}
+                  LeftIcon={IconLinkOff}
+                  text="Detach relation"
+                />
+                <MenuItem
+                  onClick={handleDeletePerson}
+                  LeftIcon={IconTrash}
+                  text="Delete person"
+                  accent="danger"
+                />
               </StyledDropdownMenuItemsContainer>
             </StyledDropdownMenu>
           )}

front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx

@@ -27,7 +27,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
     {
       key: 'displayName',
       name: 'People',
-      icon: <IconUser />,
+      Icon: IconUser,
       size: 210,
       index: 0,
       metadata: {
@@ -43,7 +43,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
     {
       key: 'email',
       name: 'Email',
-      icon: <IconMail />,
+      Icon: IconMail,
       size: 150,
       index: 1,
       metadata: {
@@ -55,7 +55,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
     {
       key: 'company',
       name: 'Company',
-      icon: <IconBuildingSkyscraper />,
+      Icon: IconBuildingSkyscraper,
       size: 150,
       index: 2,
       metadata: {
@@ -67,7 +67,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
     {
       key: 'phone',
       name: 'Phone',
-      icon: <IconPhone />,
+      Icon: IconPhone,
       size: 150,
       index: 3,
       metadata: {
@@ -79,7 +79,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
     {
       key: 'createdAt',
       name: 'Creation',
-      icon: <IconCalendarEvent />,
+      Icon: IconCalendarEvent,
       size: 150,
       index: 4,
       metadata: {
@@ -90,7 +90,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
     {
       key: 'city',
       name: 'City',
-      icon: <IconMap />,
+      Icon: IconMap,
       size: 150,
       index: 5,
       metadata: {
@@ -102,7 +102,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
     {
       key: 'jobTitle',
       name: 'Job title',
-      icon: <IconBriefcase />,
+      Icon: IconBriefcase,
       size: 150,
       index: 6,
       metadata: {
@@ -114,7 +114,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
     {
       key: 'linkedin',
       name: 'LinkedIn',
-      icon: <IconBrandLinkedin />,
+      Icon: IconBrandLinkedin,
       size: 150,
       index: 7,
       metadata: {
@@ -126,7 +126,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
     {
       key: 'x',
       name: 'Twitter',
-      icon: <IconBrandX />,
+      Icon: IconBrandX,
       size: 150,
       index: 8,
       metadata: {

front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx

@@ -60,19 +60,19 @@ export function usePersonTableContextMenuEntries() {
       setContextMenuEntries([
         <ContextMenuEntry
           label="Note"
-          icon={<IconNotes size={16} />}
+          Icon={IconNotes}
           onClick={() => handleActivityClick(ActivityType.Note)}
           key="note"
         />,
         <ContextMenuEntry
           label="Task"
-          icon={<IconCheckbox size={16} />}
+          Icon={IconCheckbox}
           onClick={() => handleActivityClick(ActivityType.Task)}
           key="task"
         />,
         <ContextMenuEntry
           label="Delete"
-          icon={<IconTrash size={16} />}
+          Icon={IconTrash}
           accent="danger"
           onClick={handleDeleteClick}
           key="delete"

front/src/modules/people/utils/fieldsForPerson.tsx

@@ -1,5 +1,6 @@
 import { isValidPhoneNumber } from 'libphonenumber-js';
 
+import { Fields } from '@/spreadsheet-import/types';
 import {
   IconBrandLinkedin,
   IconBrandX,
@@ -11,7 +12,7 @@ import {
 
 export const fieldsForPerson = [
   {
-    icon: <IconUser />,
+    icon: IconUser,
     label: 'Firstname',
     key: 'firstName',
     alternateMatches: ['first name', 'first', 'firstname'],
@@ -21,7 +22,7 @@ export const fieldsForPerson = [
     example: 'Tim',
   },
   {
-    icon: <IconUser />,
+    icon: IconUser,
     label: 'Lastname',
     key: 'lastName',
     alternateMatches: ['last name', 'last', 'lastname'],
@@ -31,7 +32,7 @@ export const fieldsForPerson = [
     example: 'Cook',
   },
   {
-    icon: <IconMail />,
+    icon: IconMail,
     label: 'Email',
     key: 'email',
     alternateMatches: ['email', 'mail'],
@@ -41,7 +42,7 @@ export const fieldsForPerson = [
     example: 'tim@apple.dev',
   },
   {
-    icon: <IconBrandLinkedin />,
+    icon: IconBrandLinkedin,
     label: 'Linkedin URL',
     key: 'linkedinUrl',
     alternateMatches: ['linkedIn', 'linkedin', 'linkedin url'],
@@ -51,7 +52,7 @@ export const fieldsForPerson = [
     example: 'https://www.linkedin.com/in/timcook',
   },
   {
-    icon: <IconBrandX />,
+    icon: IconBrandX,
     label: 'X URL',
     key: 'xUrl',
     alternateMatches: ['x', 'x url'],
@@ -61,7 +62,7 @@ export const fieldsForPerson = [
     example: 'https://x.com/tim_cook',
   },
   {
-    icon: <IconBriefcase />,
+    icon: IconBriefcase,
     label: 'Job title',
     key: 'jobTitle',
     alternateMatches: ['job', 'job title'],
@@ -71,7 +72,7 @@ export const fieldsForPerson = [
     example: 'CEO',
   },
   {
-    icon: <IconBriefcase />,
+    icon: IconBriefcase,
     label: 'Phone',
     key: 'phone',
     fieldType: {
@@ -88,7 +89,7 @@ export const fieldsForPerson = [
     ],
   },
   {
-    icon: <IconMap />,
+    icon: IconMap,
     label: 'City',
     key: 'city',
     fieldType: {
@@ -96,4 +97,4 @@ export const fieldsForPerson = [
     },
     example: 'Seattle',
   },
-] as const;
+] as Fields<string>;