updated: contextmenu & package version

marraph · May 10, 2024 · 9935eb4 · 9935eb4
1 parent 291a6be
commit 9935eb4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 22 deletions.
diff --git a/components/contextmenu/ContextMenu.stories.tsx b/components/contextmenu/ContextMenu.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {ContextMenu, ContextMenuIcon, ContextMenuItem, ContextMenuSeperator, ContextMenuShortcut} from './ContextMenu';
+import {ContextMenu, ContextMenuIcon, ContextMenuItem, ContextMenuSeperator} from './ContextMenu';
 import {Meta, StoryObj} from "@storybook/react";
 import {Archive} from "lucide-react";
 
@@ -24,9 +24,7 @@ export const Default: Story = {
                     <ContextMenuIcon icon={<Archive size={22}/>} />
                 </ContextMenuItem>
                 <ContextMenuSeperator />
-                <ContextMenuItem title="Item 2">
-                    <ContextMenuShortcut shortcut={"⌘K"} />
-                </ContextMenuItem>
+                <ContextMenuItem title="Item 2" shortcut={"⌘K"} />
                 <ContextMenuItem title="Item 3" />
             </ContextMenu>
         );

diff --git a/components/contextmenu/ContextMenu.tsx b/components/contextmenu/ContextMenu.tsx
@@ -3,54 +3,50 @@ import {cn} from "../../utils/cn";
 
 interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
+    shortcut?: string;
 }
 
 interface ContextMenuIconProps extends React.HTMLAttributes<HTMLDivElement> {
     icon: ReactNode;
 }
 
-interface ContextMenuShortcutProps extends React.HTMLAttributes<HTMLDivElement> {
-    shortcut: String;
-}
-
 const ContextMenuSeperator = React.forwardRef<HTMLHRElement, React.HTMLAttributes<HTMLHRElement>>(({ className, ...props }, ref) => (
-    <div className={cn("rounded-full")}>
-        <hr className={cn("flex-grow text-placeholder my-2 rounded-lg")} ref={ref} {...props}>
+    <div className={cn("rounded-full w-full")} {...props}>
+        <hr className={cn("flex-grow text-white text-opacity-20 my-1 rounded-lg")} ref={ref} {...props}>
         </hr>
     </div>
 ));
 ContextMenuSeperator.displayName = "ContextMenuSeperator";
 
 
-const ContextMenuShortcut = React.forwardRef<HTMLDivElement, ContextMenuShortcutProps>(({ shortcut, className, ...props }, ref) => (
-        <span className={cn("hidden group-hover:block text-sm text-gray")} ref={ref} {...props} >{shortcut}</span>
-));
-ContextMenuShortcut.displayName = "ContextMenuShortcut";
-
-
 const ContextMenuIcon = React.forwardRef<HTMLDivElement, ContextMenuIconProps>(({ icon, className, ...props }, ref) => (
-    <div className={cn("ml-6", className)} ref={ref} {...props}>
+    <div className={cn("mr-3", className)} ref={ref} {...props}>
         {icon}
     </div>
 ));
 ContextMenuIcon.displayName = "ContextMenuIcon";
 
 
-const ContextMenuItem = React.forwardRef<HTMLDivElement, ContextMenuItemProps>(({ title, className, ...props }, ref) => (
+const ContextMenuItem = React.forwardRef<HTMLDivElement, ContextMenuItemProps>(({ title, shortcut, className, ...props }, ref) => (
     <div className={cn("group cursor-pointer rounded-lg hover:bg-selected hover:text-white p-2 flex justify-between items-center", className)} ref={ref} {...props}>
-        {title}
         {props.children}
+        {title}
+        {shortcut &&
+        <span className={"hidden group-hover:block text-sm text-gray"}>
+            {shortcut}
+        </span>
+        }
     </div>
 ));
 ContextMenuItem.displayName = "ContextMenuItem";
 
 
 const ContextMenu = React.forwardRef<HTMLDivElement, React.AreaHTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-    <div className={cn("w-full rounded-lg font-semibold py-2 px-2 bg-black text-gray" , className)} ref={ref} {...props}>
+    <div className={cn("w-full rounded-lg font-semibold py-2 px-2 bg-black text-gray border border-white border-opacity-20" , className)} ref={ref} {...props}>
         {props.children}
     </div>
 ));
 ContextMenu.displayName = "ContextMenuItem";
 
 
-export { ContextMenu, ContextMenuItem, ContextMenuIcon, ContextMenuShortcut, ContextMenuSeperator };
+export { ContextMenu, ContextMenuItem, ContextMenuIcon, ContextMenuSeperator };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marraph/daisy",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Daisy is a component library for the marraph organisation",
   "scripts": {
     "dev": "next dev",