feat(ui): implemented dropdown component

frontend/src/components/v2/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,111 @@
+import { faPlus, faTrash, faUndo } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IconButton } from '../IconButton';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from './Dropdown';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenuContent>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton ariaLabel="add">
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" {...args}>
+          <DropdownMenuItem>Delete</DropdownMenuItem>
+          <DropdownMenuItem>Undo</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+};
+
+export const Icons: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton ariaLabel="add">
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" {...args}>
+          <DropdownMenuItem icon={<FontAwesomeIcon icon={faTrash} size="sm" />}>
+            Delete
+          </DropdownMenuItem>
+          <DropdownMenuItem icon={<FontAwesomeIcon icon={faUndo} size="sm" />}>
+            Undo
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+};
+
+export const WithDivider: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton ariaLabel="add">
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" {...args}>
+          <DropdownMenuItem>Delete</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Undo</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Redo</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+};
+
+export const Group: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton ariaLabel="add">
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" {...args}>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Group</DropdownMenuLabel>
+            <DropdownMenuItem>Undo</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Group#2</DropdownMenuLabel>
+            <DropdownMenuItem>Undo</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+};

frontend/src/components/v2/Dropdown/Dropdown.tsx

@@ -0,0 +1,97 @@
+import { ComponentPropsWithRef, ElementType, forwardRef, ReactNode, Ref } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { twMerge } from 'tailwind-merge';
+
+// Main menu or parent container
+export type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+
+// trigger
+export type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+// item container
+export type DropdownMenuContentProps = DropdownMenuPrimitive.MenuContentProps;
+export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+  ({ children, className, ...props }, forwardedRef) => {
+    return (
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+          sideOffset={10}
+          {...props}
+          ref={forwardedRef}
+          className={twMerge(
+            'min-w-[220px] bg-bunker will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade',
+            className
+          )}
+        >
+          {children}
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Portal>
+    );
+  }
+);
+
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+// item label component
+export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
+export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
+  <DropdownMenuPrimitive.Label
+    {...props}
+    className={twMerge('text-xs text-bunker-400 px-4 pt-2 pb-1', className)}
+  />
+);
+
+// dropdown items
+export type DropdownMenuItemProps<T extends ElementType> =
+  DropdownMenuPrimitive.MenuContentProps & {
+    icon?: ReactNode;
+    as?: T;
+    inputRef?: Ref<T>;
+  };
+
+export const DropdownMenuItem = <T extends ElementType = 'button'>({
+  children,
+  inputRef,
+  className,
+  icon,
+  as: Item = 'button',
+  ...props
+}: DropdownMenuItemProps<T> & ComponentPropsWithRef<T>) => (
+  <DropdownMenuPrimitive.Item
+    {...props}
+    className={twMerge(
+      'text-sm block px-4 py-2 data-[highlighted]:bg-gray-700 00 outline-none cursor-pointer',
+      className
+    )}
+  >
+    <Item type="button" role="menuitem" class="flex w-full items-center" ref={inputRef}>
+      {icon && <span className="flex items-center mr-2">{icon}</span>}
+      <span className="flex-grow text-left">{children}</span>
+    </Item>
+  </DropdownMenuPrimitive.Item>
+);
+
+// grouping items into 1
+export type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
+
+export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupProps>(
+  ({ ...props }, ref) => <DropdownMenuPrimitive.Group {...props} ref={ref} />
+);
+
+DropdownMenuGroup.displayName = 'DropdownMenuGroup';
+
+// Divider
+export const DropdownMenuSeparator = forwardRef<
+  HTMLDivElement,
+  DropdownMenuPrimitive.DropdownMenuSeparatorProps
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    {...props}
+    className={twMerge('h-[1px] bg-gray-700 m-1', className)}
+  />
+));
+
+DropdownMenuSeparator.displayName = 'DropdownMenuSeperator';

frontend/src/components/v2/Dropdown/index.tsx

@@ -0,0 +1,17 @@
+export type {
+  DropdownLabelProps,
+  DropdownMenuContentProps,
+  DropdownMenuGroupProps,
+  DropdownMenuItemProps,
+  DropdownMenuProps,
+  DropdownMenuTriggerProps
+} from './Dropdown';
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from './Dropdown';

frontend/src/components/v2/index.tsx

@@ -1,11 +1,13 @@
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './Dropdown';
 export * from './FormControl';
 export * from './IconButton';
 export * from './Input';
 export * from './Menu';
 export * from './Modal';
 export * from './Select';
+export * from './Spinner';
 export * from './Switch';
 export * from './TextArea';