From a1853ec61872d98c02f75bf6b90826f9a3049fcd Mon Sep 17 00:00:00 2001
From: wadjih-bencheikh18 <jw_bencheikh@esi.dz>
Date: Sat, 25 Nov 2023 11:58:43 +0100
Subject: [PATCH 1/2] refactor!: remove ContextMenu and Dropdown components

---
 src/components/dropdown-menu/DropdownMenu.tsx | 160 --------
 src/components/dropdown-menu/MenuItems.tsx    | 146 --------
 src/components/dropdown-menu/index.ts         |   2 -
 .../dropdown-menu/useContextMenuPlacement.ts  |  76 ----
 src/components/index.ts                       |   1 -
 stories/components/dropdown.stories.tsx       | 347 ++++++------------
 6 files changed, 117 insertions(+), 615 deletions(-)
 delete mode 100644 src/components/dropdown-menu/DropdownMenu.tsx
 delete mode 100644 src/components/dropdown-menu/MenuItems.tsx
 delete mode 100644 src/components/dropdown-menu/index.ts
 delete mode 100644 src/components/dropdown-menu/useContextMenuPlacement.ts

diff --git a/src/components/dropdown-menu/DropdownMenu.tsx b/src/components/dropdown-menu/DropdownMenu.tsx
deleted file mode 100644
index 87913b9c..00000000
--- a/src/components/dropdown-menu/DropdownMenu.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
-// @ts-ignore This import fails when compiling to CJS.
-import { Menu } from '@headlessui/react';
-import type { Placement } from '@popperjs/core';
-import { ReactNode, useRef, ElementType, ComponentProps } from 'react';
-
-import { useModifiedPopper } from '../hooks/useModifiedPopper';
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
-import { useOnOff } from '../hooks/useOnOff';
-import { Portal } from '../root-layout/Portal';
-
-import { MenuItems, MenuOption, MenuOptions } from './MenuItems';
-import { useContextMenuPlacement } from './useContextMenuPlacement';
-
-interface DropdownMenuBaseProps<T> {
-  /**
-   * Placement for react-popper
-   */
-  placement?: Placement;
-
-  options: MenuOptions<T>;
-  onSelect: (selected: MenuOption<T>) => void;
-}
-
-type ElementProps<E = unknown> = E extends ElementType
-  ? ComponentProps<E>
-  : never;
-
-interface DropdownMenuClickProps<T> extends DropdownMenuBaseProps<T> {
-  /**
-   * Node to be inside the Button
-   */
-  children: ReactNode;
-  trigger: 'click';
-}
-
-interface DropdownMenuContextProps<T, E> extends DropdownMenuBaseProps<T> {
-  trigger: 'contextMenu';
-  children: ReactNode;
-  as?: E;
-}
-
-export type DropdownMenuProps<T, E> =
-  | DropdownMenuContextProps<T, E>
-  | DropdownMenuClickProps<T>;
-
-export function DropdownMenu<T = unknown, E extends ElementType = 'div'>(
-  props: DropdownMenuProps<T, E> &
-    Omit<ElementProps<E>, keyof DropdownMenuProps<T, E>>,
-) {
-  const { trigger, ...otherProps } = props;
-
-  if (trigger === 'contextMenu') {
-    return <DropdownContextMenu<T, E> {...props} />;
-  }
-  return (
-    <DropdownClickMenu {...otherProps}>{props.children}</DropdownClickMenu>
-  );
-}
-
-function DropdownContextMenu<T, E extends ElementType = 'div'>(
-  props: Omit<DropdownMenuContextProps<T, E>, 'trigger'> &
-    Omit<ElementProps<E>, keyof DropdownMenuProps<T, E>>,
-) {
-  const {
-    children,
-    onSelect,
-    as: Wrapper = 'div',
-    placement = 'right-start',
-    options,
-    ...otherProps
-  } = props;
-
-  const {
-    isPopperElementOpen,
-    closePopperElement,
-    handleContextMenu,
-    setPopperElement,
-    styles,
-    attributes,
-  } = useContextMenuPlacement(placement);
-
-  const ref = useRef<HTMLDivElement>(null);
-  useOnClickOutside(ref, closePopperElement);
-
-  const { style = {}, ...otherWrapperProps } = otherProps as ElementProps<E>;
-
-  return (
-    <Wrapper
-      style={{ ...(!props?.as && { display: 'contents' }), ...style }}
-      {...otherWrapperProps}
-      onContextMenu={handleContextMenu}
-    >
-      <>
-        {isPopperElementOpen && (
-          <Portal>
-            <div ref={ref}>
-              <div
-                ref={setPopperElement}
-                style={styles.popper}
-                {...attributes.popper}
-              >
-                <Menu>
-                  <MenuItems
-                    itemsStatic
-                    onSelect={(selected) => {
-                      closePopperElement();
-                      onSelect(selected);
-                    }}
-                    options={options}
-                  />
-                </Menu>
-              </div>
-            </div>
-          </Portal>
-        )}
-
-        {children}
-      </>
-    </Wrapper>
-  );
-}
-
-function DropdownClickMenu<T, E>(
-  props: Omit<DropdownMenuProps<T, E>, 'trigger'> & { children: ReactNode },
-) {
-  const { placement = 'bottom-start', onSelect, ...otherProps } = props;
-
-  const [isOpened, , closeItems, toggle] = useOnOff(false);
-
-  const ref = useRef<HTMLDivElement>(null);
-  useOnClickOutside(ref, closeItems);
-
-  const { setReferenceElement, setPopperElement, popperProps } =
-    useModifiedPopper<HTMLButtonElement>({ placement, offset: 6 });
-
-  return (
-    <Menu>
-      <Menu.Button ref={setReferenceElement} onClick={toggle}>
-        {props.children}
-      </Menu.Button>
-      {isOpened && (
-        <Portal>
-          <div ref={ref}>
-            <div ref={setPopperElement} {...popperProps}>
-              <MenuItems
-                itemsStatic
-                onSelect={(selected) => {
-                  closeItems();
-                  onSelect(selected);
-                }}
-                {...otherProps}
-              />
-            </div>
-          </div>
-        </Portal>
-      )}
-    </Menu>
-  );
-}
diff --git a/src/components/dropdown-menu/MenuItems.tsx b/src/components/dropdown-menu/MenuItems.tsx
deleted file mode 100644
index 258711c1..00000000
--- a/src/components/dropdown-menu/MenuItems.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import styled from '@emotion/styled';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
-// @ts-ignore This import fails when compiling to CJS.
-import { Menu } from '@headlessui/react';
-import type { ReactNode } from 'react';
-
-export interface MenuOption<T> {
-  type: 'option';
-  label: ReactNode;
-  icon?: ReactNode;
-  disabled?: boolean;
-  data?: T;
-}
-
-export interface MenuDivider {
-  type: 'divider';
-}
-
-export type MenuOptions<T> = Array<MenuOption<T> | MenuDivider>;
-
-const ItemDiv = styled.div<{
-  disabled: boolean;
-  active: boolean;
-}>`
-  display: contents;
-  cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
-  font-size: 0.875rem;
-  color: ${(props) => (!props.disabled ? 'black' : 'rgb(163, 163, 163)')};
-  & > div {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    ${(props) => props.active && 'background-color: rgb(243, 244, 246);'}
-  }
-
-  ${(props) =>
-    !props.disabled &&
-    `
-          &:hover > div {
-            background-color: rgb(243, 244, 246);
-          }
-        `}
-`;
-
-const Divider = styled.hr`
-  width: 100%;
-  color: rgb(229, 229, 229);
-  margin-top: 5px;
-  margin-bottom: 5px;
-  grid-column: 1 / -1;
-`;
-
-const ItemsDiv = styled.div<{
-  hasOneIconOrMore: boolean;
-}>`
-  display: grid;
-  grid-template-columns: [icon-start] ${(props) =>
-      props.hasOneIconOrMore ? '40px' : '0px'} [label-start] auto;
-  width: fit-content;
-  align-items: center;
-  border-radius: 6px;
-  background-color: white;
-  box-shadow:
-    rgba(0, 0, 0, 0.3) 0px 19px 38px,
-    rgba(0, 0, 0, 0.22) 0px 5px 12px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  --cell-padding: 16px;
-`;
-
-const LabelDiv = styled.div`
-  grid-column-start: label-start;
-  padding-right: var(--cell-padding);
-  padding-left: var(--cell-padding);
-`;
-
-const IconDiv = styled.div`
-  grid-column-start: icon-start;
-  width: 100%;
-  height: 100%;
-  padding-left: var(--cell-padding);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export interface MenuItemsProps<T> {
-  options: MenuOptions<T>;
-  onSelect: (selected: MenuOption<T>) => void;
-  itemsStatic?: boolean;
-}
-
-export function MenuItems<T>(props: MenuItemsProps<T>) {
-  const { options, onSelect, itemsStatic } = props;
-  const hasOneOrMoreIcon = options.some(
-    (option) => option.type === 'option' && option.icon,
-  );
-
-  return (
-    <Menu.Items
-      as={ItemsDiv}
-      static={itemsStatic}
-      hasOneIconOrMore={hasOneOrMoreIcon}
-    >
-      {options.map((option, index) => (
-        <Item
-          // eslint-disable-next-line react/no-array-index-key
-          key={index}
-          onSelect={onSelect}
-          option={option}
-        />
-      ))}
-    </Menu.Items>
-  );
-}
-
-interface ItemProps<T> {
-  option: MenuOptions<T>[number];
-  onSelect: MenuItemsProps<T>['onSelect'];
-}
-
-function Item<T>(props: ItemProps<T>) {
-  const { option, onSelect } = props;
-  const isDivider = option.type === 'divider';
-
-  if (isDivider) {
-    return <Divider />;
-  }
-
-  return (
-    <Menu.Item disabled={option.disabled}>
-      {({ active }) => (
-        <ItemDiv
-          onClick={(event) => {
-            event.stopPropagation();
-            onSelect(option);
-          }}
-          active={active}
-          disabled={option.disabled || false}
-        >
-          <IconDiv>{option.icon}</IconDiv>
-          <LabelDiv>{option.label}</LabelDiv>
-        </ItemDiv>
-      )}
-    </Menu.Item>
-  );
-}
diff --git a/src/components/dropdown-menu/index.ts b/src/components/dropdown-menu/index.ts
deleted file mode 100644
index 123eed9a..00000000
--- a/src/components/dropdown-menu/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './DropdownMenu';
-export type { MenuOptions, MenuOption, MenuDivider } from './MenuItems';
diff --git a/src/components/dropdown-menu/useContextMenuPlacement.ts b/src/components/dropdown-menu/useContextMenuPlacement.ts
deleted file mode 100644
index 687d1b5d..00000000
--- a/src/components/dropdown-menu/useContextMenuPlacement.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { Placement } from '@popperjs/core';
-import React, { useCallback, useMemo, useState } from 'react';
-import { usePopper } from 'react-popper';
-
-interface PositionState {
-  clientX: number;
-  clientY: number;
-  pageX: number;
-  pageY: number;
-}
-
-export function useContextMenuPlacement(placement: Placement) {
-  const [positionState, setPositionState] = useState<PositionState | null>(
-    null,
-  );
-
-  const handleContextMenu = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      const { clientX, clientY, pageX, pageY } = event;
-      event.preventDefault();
-
-      setPositionState({
-        clientX,
-        clientY,
-        pageX,
-        pageY,
-      });
-    },
-    [],
-  );
-
-  const boundingClientRect = useMemo(() => {
-    return {
-      top: positionState?.clientY || 0,
-      left: positionState?.clientX || 0,
-      x: positionState?.pageX || 0,
-      y: positionState?.pageY || 0,
-
-      bottom: 0,
-      right: 0,
-      height: 0,
-      width: 0,
-      toJSON: () => '',
-    };
-  }, [positionState]);
-
-  const virtualElement = useMemo(() => {
-    return {
-      getBoundingClientRect: () => boundingClientRect,
-    };
-  }, [boundingClientRect]);
-
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null,
-  );
-
-  const { styles, attributes, state } = usePopper(
-    virtualElement,
-    popperElement,
-    {
-      placement,
-    },
-  );
-
-  return {
-    setPopperElement,
-    styles,
-    attributes,
-    popperState: state,
-    isPopperElementOpen: positionState !== null,
-    handleContextMenu,
-    closePopperElement: () => {
-      setPositionState(null);
-    },
-  };
-}
diff --git a/src/components/index.ts b/src/components/index.ts
index b6c11aa1..959850aa 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,7 +2,6 @@ export * from './accordion/index';
 export * from './button/index';
 export * from './color-picker/index';
 export * from './drop-zone/index';
-export * from './dropdown-menu/index';
 export * from './forms/index';
 export * from './fullscreen/index';
 export * from './header/index';
diff --git a/stories/components/dropdown.stories.tsx b/stories/components/dropdown.stories.tsx
index 4c2a40ff..669ea7d2 100644
--- a/stories/components/dropdown.stories.tsx
+++ b/stories/components/dropdown.stories.tsx
@@ -1,72 +1,43 @@
+import {
+  ContextMenu,
+  Menu,
+  MenuDivider,
+  MenuItem,
+  Popover,
+} from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import { Menu } from '@headlessui/react';
 import { useMemo } from 'react';
-import {
-  FaMeteor,
-  FaAddressBook,
-  FaAccessibleIcon,
-  Fa500Px,
-  FaAccusoft,
-  FaAcquisitionsIncorporated,
-  FaAd,
-  FaAddressCard,
-  FaAdjust,
-} from 'react-icons/fa';
 
-import {
-  MenuItems,
-  MenuOptions,
-} from '../../src/components/dropdown-menu/MenuItems';
-import {
-  DropdownMenu,
-  Table,
-  ValueRenderers,
-} from '../../src/components/index';
+import { Button, Table, ValueRenderers } from '../../src/components/index';
 import data from '../data/table.json';
 
 export default {
   title: 'Components / DropdownMenu',
 };
 
-const defaultOptions: MenuOptions<string> = [
-  { label: 'Default workspace', type: 'option' },
-];
-
-function noop() {
-  // do nothing
-}
-
-const ButtonStyled = styled.div`
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  color: white;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  background-color: rgb(107 114 128);
-  border-color: transparent;
-  border-radius: 0.375rem;
-  border-width: 1px;
-`;
+const defaultOptions = <MenuItem text="Default workspace" />;
 
 export function Dropdown() {
-  const options = useMemo<MenuOptions<string>>(() => {
-    return [
-      { label: 'Default workspace', type: 'option' },
-      { label: 'Exercise', type: 'option', icon: <FaMeteor /> },
-      { type: 'divider' },
-      { label: 'Test', type: 'option', disabled: true },
-      { label: 'Test 2', type: 'option' },
-    ];
-  }, []);
+  const content = (
+    <Menu>
+      <MenuItem text="Default workspace" />
+      <MenuItem text="Exercise" icon="person" />
+      <MenuDivider />
+      <MenuItem text="Tests">
+        <MenuItem text="Test" disabled />
+        <MenuItem text="Test 2" />
+      </MenuItem>
+    </Menu>
+  );
 
   return (
-    <DropdownMenu trigger="click" onSelect={noop} options={options}>
-      <ButtonStyled>Default workspace</ButtonStyled>
-    </DropdownMenu>
+    <Popover content={content}>
+      <Button
+        alignText="left"
+        rightIcon="caret-down"
+        text="Default workspace"
+      />
+    </Popover>
   );
 }
 
@@ -80,158 +51,106 @@ const DivContextDropdown = styled.div`
 `;
 
 export function ContextDropdown() {
-  const options = useMemo<MenuOptions<string>>(() => {
-    return [
-      { label: 'Default workspace', type: 'option' },
-      { label: 'Exercise', type: 'option', icon: <FaMeteor /> },
-      { type: 'divider' },
-      { label: 'Test', type: 'option', disabled: true },
-      { label: 'Test 2', type: 'option' },
-    ];
-  }, []);
+  const content = (
+    <Menu>
+      <MenuItem text="Default workspace" />
+      <MenuItem text="Exercise" icon="person" />
+      <MenuDivider />
+      <MenuItem text="Tests">
+        <MenuItem text="Test" disabled />
+        <MenuItem text="Test 2" />
+      </MenuItem>
+    </Menu>
+  );
 
   return (
-    <DropdownMenu trigger="contextMenu" onSelect={noop} options={options}>
+    <ContextMenu content={content}>
       <DivContextDropdown tabIndex={1}>
         <p>Hello, World!</p>
       </DivContextDropdown>
-    </DropdownMenu>
+    </ContextMenu>
   );
 }
 
 export function WithIcon() {
-  const options = useMemo<MenuOptions<string>>(() => {
-    return [
-      ...defaultOptions,
-      { label: 'Exercise', type: 'option', icon: <FaMeteor /> },
-    ];
-  }, []);
+  const options = [
+    defaultOptions,
+    <MenuItem key="1" text="Exercise" icon="person" />,
+  ];
 
-  return (
-    <Menu>
-      <MenuItems itemsStatic options={options} onSelect={noop} />
-    </Menu>
-  );
+  return <Menu>{options}</Menu>;
 }
 
 export function WithoutIcon() {
-  const options = useMemo<MenuOptions<string>>(() => {
-    return [...defaultOptions, { label: 'Exercise', type: 'option' }];
-  }, []);
+  const options = [defaultOptions, <MenuItem key="1" text="Exercise" />];
 
-  return (
-    <Menu>
-      <MenuItems itemsStatic options={options} onSelect={noop} />
-    </Menu>
-  );
+  return <Menu>{options}</Menu>;
 }
 
 export function WithDisabled() {
-  const options = useMemo<MenuOptions<string>>(() => {
-    return [
-      ...defaultOptions,
-      { label: 'Exercise', type: 'option', disabled: true },
-    ];
-  }, []);
+  const options = [
+    defaultOptions,
+    <MenuItem key="1" text="Exercise" disabled />,
+  ];
 
-  return (
-    <Menu>
-      <MenuItems itemsStatic options={options} onSelect={noop} />
-    </Menu>
-  );
+  return <Menu>{options}</Menu>;
 }
 
 export function WithDivider() {
-  const options = useMemo<MenuOptions<string>>(() => {
+  const options = useMemo(() => {
     return [
-      ...defaultOptions,
-      { type: 'divider' },
-      { label: 'Exercise', type: 'option' },
+      defaultOptions,
+      <MenuDivider key="0" />,
+      <MenuItem key="1" text="Exercise" />,
     ];
   }, []);
 
-  return (
-    <Menu>
-      <MenuItems itemsStatic options={options} onSelect={noop} />
-    </Menu>
-  );
+  return <Menu>{options}</Menu>;
 }
 
 export function Complex() {
-  const options = useMemo<MenuOptions<string>>(() => {
-    return [
-      { label: 'Back', type: 'option', icon: <FaAddressBook /> },
-      {
-        label: 'Forward',
-        type: 'option',
-        disabled: true,
-        icon: <FaAccessibleIcon />,
-      },
-      { label: 'Refresh', type: 'option', icon: <Fa500Px /> },
-      { type: 'divider' },
-      { label: 'Save as', type: 'option', icon: <FaAccusoft /> },
-      { label: 'Print', type: 'option', icon: <FaAcquisitionsIncorporated /> },
-      { label: 'Cast media to device', type: 'option', icon: <FaAd /> },
-      { type: 'divider' },
-      {
-        label: 'Send page to your devices',
-        type: 'option',
-        icon: <FaAddressCard />,
-      },
-      {
-        label: 'Create QR Code for this page',
-        type: 'option',
-        icon: <FaAdjust />,
-      },
-    ];
-  }, []);
-
   return (
     <Menu>
-      <MenuItems itemsStatic options={options} onSelect={noop} />
+      <MenuItem text="Back" icon="book" />
+      <MenuItem text="Forward" icon="step-forward" disabled />
+      <MenuItem text="Refresh" icon="refresh" />
+      <MenuDivider />
+      <MenuItem text="Save as" icon="saved" />
+      <MenuItem text="Print" icon="print" />
+      <MenuItem text="Cast media to device" icon="video" />
+      <MenuDivider />
+      <MenuItem text="Send page to your devices" icon="add" />
+      <MenuItem text="Create QR Code for this page" icon="settings" />
     </Menu>
   );
 }
 export function TableWithHeaderDropDownMenu() {
-  const options = useMemo<MenuOptions<string>>(() => {
-    return [
-      { label: 'Back', type: 'option', icon: <FaAddressBook /> },
-      {
-        label: 'Forward',
-        type: 'option',
-        disabled: true,
-        icon: <FaAccessibleIcon />,
-      },
-      { label: 'Refresh', type: 'option', icon: <Fa500Px /> },
-      { type: 'divider' },
-      { label: 'Save as', type: 'option', icon: <FaAccusoft /> },
-      { label: 'Print', type: 'option', icon: <FaAcquisitionsIncorporated /> },
-      { label: 'Cast media to device', type: 'option', icon: <FaAd /> },
-      { type: 'divider' },
-      {
-        label: 'Send page to your devices',
-        type: 'option',
-        icon: <FaAddressCard />,
-      },
-      {
-        label: 'Create QR Code for this page',
-        type: 'option',
-        icon: <FaAdjust />,
-      },
-    ];
-  }, []);
+  const content = (
+    <Menu>
+      <MenuItem text="Back" icon="book" />
+      <MenuItem text="Forward" icon="step-forward" disabled />
+      <MenuItem text="Refresh" icon="refresh" />
+      <MenuDivider />
+      <MenuItem text="Save as" icon="saved" />
+      <MenuItem text="Print" icon="print" />
+      <MenuItem text="Cast media to device" icon="video" />
+      <MenuDivider />
+      <MenuItem text="Send page to your devices" icon="add" />
+      <MenuItem text="Create QR Code for this page" icon="settings" />
+    </Menu>
+  );
 
   return (
     <table>
       <thead>
         <tr>
-          <ColumnWithDropdownMenu value="id" options={options} />
-          <ColumnWithDropdownMenu value="name" options={options} />
-          <ColumnWithDropdownMenu value="rn" options={options} />
-          <ColumnWithDropdownMenu value="mw" options={options} />
-          <ColumnWithDropdownMenu value="em" options={options} />
-          <ColumnWithDropdownMenu value="isExpensive" options={options} />
-          <ColumnWithDropdownMenu value="color" options={options} />
+          <ColumnWithDropdownMenu value="id" content={content} />
+          <ColumnWithDropdownMenu value="name" content={content} />
+          <ColumnWithDropdownMenu value="rn" content={content} />
+          <ColumnWithDropdownMenu value="mw" content={content} />
+          <ColumnWithDropdownMenu value="em" content={content} />
+          <ColumnWithDropdownMenu value="isExpensive" content={content} />
+          <ColumnWithDropdownMenu value="color" content={content} />
         </tr>
       </thead>
       <tbody>
@@ -255,17 +174,15 @@ export function TableWithHeaderDropDownMenu() {
 
 function ColumnWithDropdownMenu({
   value,
-  options,
+  content,
 }: {
   value: string;
-  options: MenuOptions<string>;
+  content: JSX.Element;
 }) {
   return (
-    <td>
-      <DropdownMenu trigger="contextMenu" onSelect={noop} options={options}>
-        <div>{value}</div>
-      </DropdownMenu>
-    </td>
+    <ContextMenu content={content} tagName="th">
+      {value}
+    </ContextMenu>
   );
 }
 
@@ -279,79 +196,49 @@ const TableWithContext = styled.table`
 `;
 
 export function TableWithContextMenu() {
-  const headerOptions = useMemo<MenuOptions<string>>(() => {
-    return [
-      { label: 'Copy', type: 'option', icon: <FaAddressBook /> },
-      {
-        label: 'Past',
-        type: 'option',
-        disabled: true,
-        icon: <FaAccessibleIcon />,
-      },
-    ];
-  }, []);
-  const options = useMemo<MenuOptions<string>>(() => {
-    return [
-      { label: 'Back', type: 'option', icon: <FaAddressBook /> },
-      {
-        label: 'Forward',
-        type: 'option',
-        disabled: true,
-        icon: <FaAccessibleIcon />,
-      },
-      { label: 'Refresh', type: 'option', icon: <Fa500Px /> },
-      { type: 'divider' },
-      { label: 'Save as', type: 'option', icon: <FaAccusoft /> },
-      { label: 'Print', type: 'option', icon: <FaAcquisitionsIncorporated /> },
-      { label: 'Cast media to device', type: 'option', icon: <FaAd /> },
-      { type: 'divider' },
-      {
-        label: 'Send page to your devices',
-        type: 'option',
-        icon: <FaAddressCard />,
-      },
-      {
-        label: 'Create QR Code for this page',
-        type: 'option',
-        icon: <FaAdjust />,
-      },
-    ];
-  }, []);
+  const headerContent = (
+    <Menu>
+      <MenuItem text="Copy" icon="book" />
+      <MenuItem text="Paste" icon="paste-variable" disabled />
+    </Menu>
+  );
+  const content = (
+    <Menu>
+      <MenuItem text="Back" icon="book" />
+      <MenuItem text="Forward" icon="step-forward" disabled />
+      <MenuItem text="Refresh" icon="refresh" />
+      <MenuDivider />
+      <MenuItem text="Save as" icon="saved" />
+      <MenuItem text="Print" icon="print" />
+      <MenuItem text="Cast media to device" icon="video" />
+      <MenuDivider />
+      <MenuItem text="Send page to your devices" icon="add" />
+      <MenuItem text="Create QR Code for this page" icon="settings" />
+    </Menu>
+  );
 
   return (
     <TableWithContext>
       <thead>
-        <DropdownMenu
-          as="tr"
-          trigger="contextMenu"
-          onSelect={noop}
-          options={headerOptions}
-        >
+        <ContextMenu content={headerContent} tagName="tr">
           <th>id</th>
           <th>name</th>
           <th>rn</th>
           <th>mw</th>
           <th>em</th>
           <th>isExpensive</th>
-        </DropdownMenu>
+        </ContextMenu>
       </thead>
       <tbody>
         {data.slice(0, 2).map(({ id, name, rn, mw, em, isExpensive }) => (
-          <DropdownMenu
-            key={id}
-            trigger="contextMenu"
-            as="tr"
-            onSelect={noop}
-            options={options}
-            style={{ height: '50px' }}
-          >
+          <ContextMenu key={id} tagName="tr" content={content}>
             <td>{id}</td>
             <td>{name}</td>
             <td>{rn}</td>
             <td>{mw}</td>
             <td>{em}</td>
             <td>{isExpensive}</td>
-          </DropdownMenu>
+          </ContextMenu>
         ))}
       </tbody>
     </TableWithContext>

From 232def0fce1281675d77c44ffe0c103770e698af Mon Sep 17 00:00:00 2001
From: wadjih-bencheikh18 <jw_bencheikh@esi.dz>
Date: Sun, 3 Dec 2023 22:39:48 +0100
Subject: [PATCH 2/2] refactor: context-menu, dropdown and menus

---
 stories/components/context-menu.stories.tsx | 162 +++++++++++++++
 stories/components/dropdown.stories.tsx     | 219 +-------------------
 stories/components/menus.stories.tsx        | 108 ++++++++++
 3 files changed, 272 insertions(+), 217 deletions(-)
 create mode 100644 stories/components/context-menu.stories.tsx
 create mode 100644 stories/components/menus.stories.tsx

diff --git a/stories/components/context-menu.stories.tsx b/stories/components/context-menu.stories.tsx
new file mode 100644
index 00000000..2746aac9
--- /dev/null
+++ b/stories/components/context-menu.stories.tsx
@@ -0,0 +1,162 @@
+/** @jsxImportSource @emotion/react */
+import { ContextMenu, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { Table, ValueRenderers } from '../../src/components/index';
+import data from '../data/table.json';
+
+export default {
+  title: 'Components / ContextMenu',
+};
+
+export function ContextDropdown() {
+  const content = (
+    <Menu>
+      <MenuItem text="Default workspace" />
+      <MenuItem text="Exercise" icon="person" />
+      <MenuDivider />
+      <MenuItem text="Tests">
+        <MenuItem text="Test" disabled />
+        <MenuItem text="Test 2" />
+      </MenuItem>
+    </Menu>
+  );
+
+  return (
+    <ContextMenu
+      content={content}
+      css={css`
+        height: 500px;
+        width: 500px;
+        border: 1px solid black;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      `}
+    >
+      <p>Hello, World!</p>
+    </ContextMenu>
+  );
+}
+
+export function TableWithHeaderDropDownMenu() {
+  const content = (
+    <Menu>
+      <MenuItem text="Back" icon="book" />
+      <MenuItem text="Forward" icon="step-forward" disabled />
+      <MenuItem text="Refresh" icon="refresh" />
+      <MenuDivider />
+      <MenuItem text="Save as" icon="saved" />
+      <MenuItem text="Print" icon="print" />
+      <MenuItem text="Cast media to device" icon="video" />
+      <MenuDivider />
+      <MenuItem text="Send page to your devices" icon="add" />
+      <MenuItem text="Create QR Code for this page" icon="settings" />
+    </Menu>
+  );
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <ColumnWithDropdownMenu value="id" content={content} />
+          <ColumnWithDropdownMenu value="name" content={content} />
+          <ColumnWithDropdownMenu value="rn" content={content} />
+          <ColumnWithDropdownMenu value="mw" content={content} />
+          <ColumnWithDropdownMenu value="em" content={content} />
+          <ColumnWithDropdownMenu value="isExpensive" content={content} />
+          <ColumnWithDropdownMenu value="color" content={content} />
+        </tr>
+      </thead>
+      <tbody>
+        {data
+          .slice(0, 2)
+          .map(({ id, name, rn, mw, em, isExpensive, color }) => (
+            <Table.Row key={id}>
+              <ValueRenderers.Text value={id} />
+              <ValueRenderers.Text value={name} />
+              <ValueRenderers.Text value={rn} />
+              <ValueRenderers.Number value={mw} fixed={2} />
+              <ValueRenderers.Number value={em} fixed={4} />
+              <ValueRenderers.Boolean value={isExpensive} />
+              <ValueRenderers.Color value={color} />
+            </Table.Row>
+          ))}
+      </tbody>
+    </table>
+  );
+}
+
+function ColumnWithDropdownMenu({
+  value,
+  content,
+}: {
+  value: string;
+  content: JSX.Element;
+}) {
+  return (
+    <ContextMenu content={content} tagName="th">
+      {value}
+    </ContextMenu>
+  );
+}
+
+const TableWithContext = styled.table`
+  border: 0.55px solid gray;
+  th,
+  td {
+    border: 0.55px solid gray;
+    padding: 0.4em;
+  }
+`;
+
+export function TableWithContextMenu() {
+  const headerContent = (
+    <Menu>
+      <MenuItem text="Copy" icon="book" />
+      <MenuItem text="Paste" icon="paste-variable" disabled />
+    </Menu>
+  );
+  const content = (
+    <Menu>
+      <MenuItem text="Back" icon="book" />
+      <MenuItem text="Forward" icon="step-forward" disabled />
+      <MenuItem text="Refresh" icon="refresh" />
+      <MenuDivider />
+      <MenuItem text="Save as" icon="saved" />
+      <MenuItem text="Print" icon="print" />
+      <MenuItem text="Cast media to device" icon="video" />
+      <MenuDivider />
+      <MenuItem text="Send page to your devices" icon="add" />
+      <MenuItem text="Create QR Code for this page" icon="settings" />
+    </Menu>
+  );
+
+  return (
+    <TableWithContext>
+      <thead>
+        <ContextMenu content={headerContent} tagName="tr">
+          <th>id</th>
+          <th>name</th>
+          <th>rn</th>
+          <th>mw</th>
+          <th>em</th>
+          <th>isExpensive</th>
+        </ContextMenu>
+      </thead>
+      <tbody>
+        {data.slice(0, 2).map(({ id, name, rn, mw, em, isExpensive }) => (
+          <ContextMenu key={id} tagName="tr" content={content}>
+            <td>{id}</td>
+            <td>{name}</td>
+            <td>{rn}</td>
+            <td>{mw}</td>
+            <td>{em}</td>
+            <td>{isExpensive}</td>
+          </ContextMenu>
+        ))}
+      </tbody>
+    </TableWithContext>
+  );
+}
diff --git a/stories/components/dropdown.stories.tsx b/stories/components/dropdown.stories.tsx
index 669ea7d2..ce0f6491 100644
--- a/stories/components/dropdown.stories.tsx
+++ b/stories/components/dropdown.stories.tsx
@@ -1,22 +1,11 @@
-import {
-  ContextMenu,
-  Menu,
-  MenuDivider,
-  MenuItem,
-  Popover,
-} from '@blueprintjs/core';
-import styled from '@emotion/styled';
-import { useMemo } from 'react';
+import { Menu, MenuDivider, MenuItem, Popover } from '@blueprintjs/core';
 
-import { Button, Table, ValueRenderers } from '../../src/components/index';
-import data from '../data/table.json';
+import { Button } from '../../src/components/index';
 
 export default {
   title: 'Components / DropdownMenu',
 };
 
-const defaultOptions = <MenuItem text="Default workspace" />;
-
 export function Dropdown() {
   const content = (
     <Menu>
@@ -40,207 +29,3 @@ export function Dropdown() {
     </Popover>
   );
 }
-
-const DivContextDropdown = styled.div`
-  height: 500px;
-  width: 500px;
-  border: 1px solid black;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export function ContextDropdown() {
-  const content = (
-    <Menu>
-      <MenuItem text="Default workspace" />
-      <MenuItem text="Exercise" icon="person" />
-      <MenuDivider />
-      <MenuItem text="Tests">
-        <MenuItem text="Test" disabled />
-        <MenuItem text="Test 2" />
-      </MenuItem>
-    </Menu>
-  );
-
-  return (
-    <ContextMenu content={content}>
-      <DivContextDropdown tabIndex={1}>
-        <p>Hello, World!</p>
-      </DivContextDropdown>
-    </ContextMenu>
-  );
-}
-
-export function WithIcon() {
-  const options = [
-    defaultOptions,
-    <MenuItem key="1" text="Exercise" icon="person" />,
-  ];
-
-  return <Menu>{options}</Menu>;
-}
-
-export function WithoutIcon() {
-  const options = [defaultOptions, <MenuItem key="1" text="Exercise" />];
-
-  return <Menu>{options}</Menu>;
-}
-
-export function WithDisabled() {
-  const options = [
-    defaultOptions,
-    <MenuItem key="1" text="Exercise" disabled />,
-  ];
-
-  return <Menu>{options}</Menu>;
-}
-
-export function WithDivider() {
-  const options = useMemo(() => {
-    return [
-      defaultOptions,
-      <MenuDivider key="0" />,
-      <MenuItem key="1" text="Exercise" />,
-    ];
-  }, []);
-
-  return <Menu>{options}</Menu>;
-}
-
-export function Complex() {
-  return (
-    <Menu>
-      <MenuItem text="Back" icon="book" />
-      <MenuItem text="Forward" icon="step-forward" disabled />
-      <MenuItem text="Refresh" icon="refresh" />
-      <MenuDivider />
-      <MenuItem text="Save as" icon="saved" />
-      <MenuItem text="Print" icon="print" />
-      <MenuItem text="Cast media to device" icon="video" />
-      <MenuDivider />
-      <MenuItem text="Send page to your devices" icon="add" />
-      <MenuItem text="Create QR Code for this page" icon="settings" />
-    </Menu>
-  );
-}
-export function TableWithHeaderDropDownMenu() {
-  const content = (
-    <Menu>
-      <MenuItem text="Back" icon="book" />
-      <MenuItem text="Forward" icon="step-forward" disabled />
-      <MenuItem text="Refresh" icon="refresh" />
-      <MenuDivider />
-      <MenuItem text="Save as" icon="saved" />
-      <MenuItem text="Print" icon="print" />
-      <MenuItem text="Cast media to device" icon="video" />
-      <MenuDivider />
-      <MenuItem text="Send page to your devices" icon="add" />
-      <MenuItem text="Create QR Code for this page" icon="settings" />
-    </Menu>
-  );
-
-  return (
-    <table>
-      <thead>
-        <tr>
-          <ColumnWithDropdownMenu value="id" content={content} />
-          <ColumnWithDropdownMenu value="name" content={content} />
-          <ColumnWithDropdownMenu value="rn" content={content} />
-          <ColumnWithDropdownMenu value="mw" content={content} />
-          <ColumnWithDropdownMenu value="em" content={content} />
-          <ColumnWithDropdownMenu value="isExpensive" content={content} />
-          <ColumnWithDropdownMenu value="color" content={content} />
-        </tr>
-      </thead>
-      <tbody>
-        {data
-          .slice(0, 2)
-          .map(({ id, name, rn, mw, em, isExpensive, color }) => (
-            <Table.Row key={id}>
-              <ValueRenderers.Text value={id} />
-              <ValueRenderers.Text value={name} />
-              <ValueRenderers.Text value={rn} />
-              <ValueRenderers.Number value={mw} fixed={2} />
-              <ValueRenderers.Number value={em} fixed={4} />
-              <ValueRenderers.Boolean value={isExpensive} />
-              <ValueRenderers.Color value={color} />
-            </Table.Row>
-          ))}
-      </tbody>
-    </table>
-  );
-}
-
-function ColumnWithDropdownMenu({
-  value,
-  content,
-}: {
-  value: string;
-  content: JSX.Element;
-}) {
-  return (
-    <ContextMenu content={content} tagName="th">
-      {value}
-    </ContextMenu>
-  );
-}
-
-const TableWithContext = styled.table`
-  border: 0.55px solid gray;
-  th,
-  td {
-    border: 0.55px solid gray;
-    padding: 0.4em;
-  }
-`;
-
-export function TableWithContextMenu() {
-  const headerContent = (
-    <Menu>
-      <MenuItem text="Copy" icon="book" />
-      <MenuItem text="Paste" icon="paste-variable" disabled />
-    </Menu>
-  );
-  const content = (
-    <Menu>
-      <MenuItem text="Back" icon="book" />
-      <MenuItem text="Forward" icon="step-forward" disabled />
-      <MenuItem text="Refresh" icon="refresh" />
-      <MenuDivider />
-      <MenuItem text="Save as" icon="saved" />
-      <MenuItem text="Print" icon="print" />
-      <MenuItem text="Cast media to device" icon="video" />
-      <MenuDivider />
-      <MenuItem text="Send page to your devices" icon="add" />
-      <MenuItem text="Create QR Code for this page" icon="settings" />
-    </Menu>
-  );
-
-  return (
-    <TableWithContext>
-      <thead>
-        <ContextMenu content={headerContent} tagName="tr">
-          <th>id</th>
-          <th>name</th>
-          <th>rn</th>
-          <th>mw</th>
-          <th>em</th>
-          <th>isExpensive</th>
-        </ContextMenu>
-      </thead>
-      <tbody>
-        {data.slice(0, 2).map(({ id, name, rn, mw, em, isExpensive }) => (
-          <ContextMenu key={id} tagName="tr" content={content}>
-            <td>{id}</td>
-            <td>{name}</td>
-            <td>{rn}</td>
-            <td>{mw}</td>
-            <td>{em}</td>
-            <td>{isExpensive}</td>
-          </ContextMenu>
-        ))}
-      </tbody>
-    </TableWithContext>
-  );
-}
diff --git a/stories/components/menus.stories.tsx b/stories/components/menus.stories.tsx
new file mode 100644
index 00000000..bc746215
--- /dev/null
+++ b/stories/components/menus.stories.tsx
@@ -0,0 +1,108 @@
+/** @jsxImportSource @emotion/react */
+import { Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import { css } from '@emotion/react';
+import { useMemo } from 'react';
+
+export default {
+  title: 'Components / Menus',
+};
+
+export function WithIcon() {
+  const options = [
+    defaultOptions,
+    <MenuItem key="1" text="Exercise" icon="person" />,
+  ];
+
+  return (
+    <Menu
+      css={css`
+        width: 300px;
+        padding: 0;
+        border: 1px solid black;
+      `}
+    >
+      {options}
+    </Menu>
+  );
+}
+
+const defaultOptions = <MenuItem text="Default workspace" />;
+export function WithoutIcon() {
+  const options = [defaultOptions, <MenuItem key="1" text="Exercise" />];
+
+  return (
+    <Menu
+      css={css`
+        width: 300px;
+        padding: 0;
+        border: 1px solid black;
+      `}
+    >
+      {options}
+    </Menu>
+  );
+}
+
+export function WithDisabled() {
+  const options = [
+    defaultOptions,
+    <MenuItem key="1" text="Exercise" disabled />,
+  ];
+
+  return (
+    <Menu
+      css={css`
+        width: 300px;
+        padding: 0;
+        border: 1px solid black;
+      `}
+    >
+      {options}
+    </Menu>
+  );
+}
+
+export function WithDivider() {
+  const options = useMemo(() => {
+    return [
+      defaultOptions,
+      <MenuDivider key="0" />,
+      <MenuItem key="1" text="Exercise" />,
+    ];
+  }, []);
+
+  return (
+    <Menu
+      css={css`
+        width: 300px;
+        padding: 0;
+        border: 1px solid black;
+      `}
+    >
+      {options}
+    </Menu>
+  );
+}
+
+export function Complex() {
+  return (
+    <Menu
+      css={css`
+        width: 300px;
+        padding: 0;
+        border: 1px solid black;
+      `}
+    >
+      <MenuItem text="Back" icon="book" />
+      <MenuItem text="Forward" icon="step-forward" disabled />
+      <MenuItem text="Refresh" icon="refresh" />
+      <MenuDivider />
+      <MenuItem text="Save as" icon="saved" />
+      <MenuItem text="Print" icon="print" />
+      <MenuItem text="Cast media to device" icon="video" />
+      <MenuDivider />
+      <MenuItem text="Send page to your devices" icon="add" />
+      <MenuItem text="Create QR Code for this page" icon="settings" />
+    </Menu>
+  );
+}