feat: add component context-menu

Author: Ohh-889

packages/ui/src/components/context-menu/ContextMenu.tsx

@@ -0,0 +1,34 @@
+import { Root, Trigger } from '@radix-ui/react-context-menu';
+
+import ContextMenuContent from './ContextMenuContent';
+import ContextMenuOption from './ContextMenuOption';
+import type { ContextMenuProps } from './types';
+
+const ContextMenu = (props: ContextMenuProps) => {
+  const { children, classNames, contentProps, dir, items, modal, onOpenChange, size } = props;
+
+  return (
+    <Root
+      dir={dir}
+      modal={modal}
+      onOpenChange={onOpenChange}
+    >
+      <Trigger asChild>{children}</Trigger>
+
+      <ContextMenuContent {...contentProps}>
+        {items.map((item, index) => {
+          return (
+            <ContextMenuOption
+              classNames={classNames}
+              item={item}
+              key={String(index)}
+              size={size}
+            />
+          );
+        })}
+      </ContextMenuContent>
+    </Root>
+  );
+};
+
+export default ContextMenu;

packages/ui/src/components/context-menu/ContextMenuArrow.tsx

@@ -0,0 +1,16 @@
+import { Arrow } from '@radix-ui/react-context-menu';
+
+import MenuArrow from '../menu/MenuArrow';
+
+import type { ContextMenuArrowProps } from './types';
+
+const ContextMenuArrow = (props: ContextMenuArrowProps) => {
+  return (
+    <MenuArrow
+      {...props}
+      component={Arrow as typeof MenuArrow}
+    />
+  );
+};
+
+export default ContextMenuArrow;

packages/ui/src/components/context-menu/ContextMenuCheckbox.tsx

@@ -0,0 +1,34 @@
+import { Root, Trigger } from '@radix-ui/react-context-menu';
+
+import ContextMenuCheckboxGroup from './ContextMenuCheckboxGroup';
+import ContextMenuContent from './ContextMenuContent';
+import type { ContextMenuCheckboxProps } from './types';
+
+const ContextMenuCheckbox = (props: ContextMenuCheckboxProps) => {
+  const { children, className, classNames, contentProps, dir, modal, onOpenChange, size, ...rest } = props;
+
+  return (
+    <Root
+      dir={dir}
+      modal={modal}
+      onOpenChange={onOpenChange}
+    >
+      <Trigger asChild>{children}</Trigger>
+
+      <ContextMenuContent
+        arrowClass={classNames?.arrow}
+        className={className || classNames?.content}
+        size={size}
+        {...contentProps}
+      >
+        <ContextMenuCheckboxGroup
+          classNames={classNames}
+          size={size}
+          {...rest}
+        />
+      </ContextMenuContent>
+    </Root>
+  );
+};
+
+export default ContextMenuCheckbox;

packages/ui/src/components/context-menu/ContextMenuCheckboxGroup.tsx

@@ -0,0 +1,22 @@
+import { Group } from '@radix-ui/react-context-menu';
+
+import MenuCheckboxGroup from '../menu/MenuCheckboxGroup';
+
+import ContextMenuCheckboxItem from './ContextMenuCheckboxItem';
+import ContextMenuLabel from './ContextMenuLabel';
+import ContextMenuSeparator from './ContextMenuSeparator';
+import type { ContextMenuCheckboxGroupProps } from './types';
+
+const ContextMenuCheckboxGroup = (props: ContextMenuCheckboxGroupProps) => {
+  return (
+    <MenuCheckboxGroup
+      component={ContextMenuCheckboxItem}
+      groupComponent={Group}
+      labelComponent={ContextMenuLabel}
+      separatorComponent={ContextMenuSeparator}
+      {...props}
+    />
+  );
+};
+
+export default ContextMenuCheckboxGroup;

packages/ui/src/components/context-menu/ContextMenuCheckboxItem.tsx

@@ -0,0 +1,18 @@
+import { CheckboxItem } from '@radix-ui/react-context-menu';
+
+import MenuCheckboxItem from '../menu/MenuCheckboxItem';
+
+import ContextMenuItemIndicator from './ContextMenuItemIndicator';
+import type { ContextMenuCheckboxItemProps } from './types';
+
+const ContextMenuCheckboxItem = (props: ContextMenuCheckboxItemProps) => {
+  return (
+    <MenuCheckboxItem
+      component={CheckboxItem as typeof MenuCheckboxItem}
+      indicatorComponent={ContextMenuItemIndicator}
+      {...props}
+    />
+  );
+};
+
+export default ContextMenuCheckboxItem;

packages/ui/src/components/context-menu/ContextMenuContent.tsx

@@ -0,0 +1,24 @@
+import { Content, Portal } from '@radix-ui/react-context-menu';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import MenuContent from '../menu/MenuContent';
+
+import ContextMenuArrow from './ContextMenuArrow';
+import type { ContextMenuContentProps } from './types';
+
+const ContextMenuContent = forwardRef<ComponentRef<typeof Content>, ContextMenuContentProps>((props, ref) => {
+  return (
+    <MenuContent
+      arrowComponent={ContextMenuArrow}
+      component={Content as typeof MenuContent}
+      portalComponent={Portal}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+ContextMenuContent.displayName = 'ContextMenuContent';
+
+export default ContextMenuContent;

packages/ui/src/components/context-menu/ContextMenuItem.tsx

@@ -0,0 +1,16 @@
+import { Item } from '@radix-ui/react-context-menu';
+
+import MenuItem from '../menu/MenuItem';
+
+import type { ContextMenuItemProps } from './types';
+
+const ContextMenuItem = (props: ContextMenuItemProps) => {
+  return (
+    <MenuItem
+      {...props}
+      component={Item as typeof MenuItem}
+    />
+  );
+};
+
+export default ContextMenuItem;

packages/ui/src/components/context-menu/ContextMenuItemIndicator.tsx

@@ -0,0 +1,16 @@
+import { ItemIndicator } from '@radix-ui/react-context-menu';
+
+import MenuItemIndicator from '../menu/MenuItemIndicator';
+
+import type { ContextMenuItemIndicatorProps } from './types';
+
+const ContextMenuItemIndicator = (props: ContextMenuItemIndicatorProps) => {
+  return (
+    <MenuItemIndicator
+      component={ItemIndicator as typeof MenuItemIndicator}
+      {...props}
+    />
+  );
+};
+
+export default ContextMenuItemIndicator;

packages/ui/src/components/context-menu/ContextMenuLabel.tsx

@@ -0,0 +1,16 @@
+import { Label } from '@radix-ui/react-context-menu';
+
+import MenuLabel from '../menu/MenuLabel';
+
+import type { ContextMenuLabelProps } from './types';
+
+const ContextMenuLabel = (props: ContextMenuLabelProps) => {
+  return (
+    <MenuLabel
+      component={Label as typeof MenuLabel}
+      {...props}
+    />
+  );
+};
+
+export default ContextMenuLabel;

packages/ui/src/components/context-menu/ContextMenuOption.tsx

@@ -0,0 +1,28 @@
+import { Sub } from '@radix-ui/react-context-menu';
+
+import MenuOption from '../menu/MenuOption';
+
+import ContextMenuItem from './ContextMenuItem';
+import ContextMenuLabel from './ContextMenuLabel';
+import ContextMenuSeparator from './ContextMenuSeparator';
+import ContextMenuSubContent from './ContextMenuSubContent';
+import ContextMenuSubTrigger from './ContextMenuSubTrigger';
+import type { ContextMenuOptionProps } from './types';
+
+const ContextMenuOption = (props: ContextMenuOptionProps) => {
+  return (
+    <MenuOption
+      {...props}
+      component={ContextMenuItem}
+      labelComponent={ContextMenuLabel}
+      separatorComponent={ContextMenuSeparator}
+      subComponent={Sub}
+      subContentComponent={ContextMenuSubContent}
+      subTriggerComponent={ContextMenuSubTrigger}
+    />
+  );
+};
+
+ContextMenuOption.displayName = 'ContextMenuOption';
+
+export default ContextMenuOption;