Cosmetic refactoring on context menu (#1209)

* Cosmetic refactoring on context menu

* Fix lint

* Fix lint

* Fix lint

* Fix lint

* Fix lint

* Fix lint

front/src/modules/ui/context-menu/components/ContextMenu.tsx

@@ -2,12 +2,14 @@ import React, { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
-import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState';
-import { contextMenuPositionState } from '@/ui/context-menu/states/ContextMenuPositionState';
+import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState';
+import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
-import { contextMenuEntriesState } from '../states/ContextMenuEntriesState';
-import { contextMenuOpenState } from '../states/ContextMenuIsOpenState';
+import { contextMenuEntriesState } from '../states/contextMenuEntriesState';
+import { contextMenuIsOpenState } from '../states/contextMenuIsOpenState';
 import { PositionType } from '../types/PositionType';
 
 type OwnProps = {
@@ -39,9 +41,9 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
 
 export function ContextMenu({ selectedIds }: OwnProps) {
   const position = useRecoilValue(contextMenuPositionState);
-  const contextMenuOpen = useRecoilValue(contextMenuOpenState);
+  const contextMenuOpen = useRecoilValue(contextMenuIsOpenState);
   const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
-  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
   const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
   const wrapperRef = useRef(null);
 
@@ -58,7 +60,11 @@ export function ContextMenu({ selectedIds }: OwnProps) {
   }
   return (
     <StyledContainerContextMenu ref={wrapperRef} position={position}>
-      {contextMenuEntries}
+      <DropdownMenu>
+        <DropdownMenuItemsContainer>
+          {contextMenuEntries}
+        </DropdownMenuItemsContainer>
+      </DropdownMenu>
     </StyledContainerContextMenu>
   );
 }

front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx

@@ -1,41 +1,17 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
+
+type ContextMenuEntryAccent = 'regular' | 'danger';
+
 type OwnProps = {
   icon: ReactNode;
   label: string;
-  type?: 'standard' | 'danger';
+  accent?: ContextMenuEntryAccent;
   onClick: () => void;
 };
 
-type StyledButtonProps = {
-  type: 'standard' | 'danger';
-};
-
-const StyledButton = styled.div<StyledButtonProps>`
-  align-items: center;
-  align-self: stretch;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${(props) =>
-    props.type === 'danger'
-      ? props.theme.color.red
-      : props.theme.font.color.secondary};
-  cursor: pointer;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-
-  height: 32px;
-  padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-  transition: background 0.1s ease;
-  user-select: none;
-
-  &:hover {
-    background: ${({ theme, type }) =>
-      type === 'danger' ? theme.tag.background.red : theme.background.tertiary};
-  }
-`;
-
 const StyledButtonLabel = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-left: ${({ theme }) => theme.spacing(2)};
@@ -44,13 +20,13 @@ const StyledButtonLabel = styled.div`
 export function ContextMenuEntry({
   label,
   icon,
-  type = 'standard',
+  accent = 'regular',
   onClick,
 }: OwnProps) {
   return (
-    <StyledButton type={type} onClick={onClick}>
+    <DropdownMenuItem onClick={onClick} accent={accent}>
       {icon}
       <StyledButtonLabel>{label}</StyledButtonLabel>
-    </StyledButton>
+    </DropdownMenuItem>
   );
 }

front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx

@@ -2,25 +2,25 @@ import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';
 
-import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries';
+import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
 import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
-import { contextMenuOpenState } from '../../states/ContextMenuIsOpenState';
-import { contextMenuPositionState } from '../../states/ContextMenuPositionState';
+import { contextMenuIsOpenState } from '../../states/contextMenuIsOpenState';
+import { contextMenuPositionState } from '../../states/contextMenuPositionState';
 import { ContextMenu } from '../ContextMenu';
 
 function FilledContextMenu(props: { selectedIds: string[] }) {
-  const setContextMenu = useContextMenuEntries();
-  setContextMenu();
+  const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
+  setContextMenuEntries();
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
   setContextMenuPosition({
     x: 100,
     y: 10,
   });
-  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
   setContextMenuOpenState(true);
   return <ContextMenu selectedIds={props.selectedIds} />;
 }

front/src/modules/ui/context-menu/states/ContextMenuIsOpenState.ts

@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const contextMenuOpenState = atom<boolean>({
-  key: 'contextMenuOpenState',
-  default: false,
-});

front/src/modules/ui/context-menu/states/contextMenuIsOpenState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const contextMenuIsOpenState = atom<boolean>({
+  key: 'contextMenuIsOpenState',
+  default: false,
+});