From e4746a74fa22202a85cce6f75fc5a2165abfe41b Mon Sep 17 00:00:00 2001
From: Hazem Krimi <me@hazemkrimi.tech>
Date: Fri, 28 Mar 2025 17:29:35 +0100
Subject: [PATCH] Custom render ContextMenu story

---
 src/components/Box/index.tsx                 |  1 +
 src/components/ContextMenu/index.stories.ts  | 28 ------------------
 src/components/ContextMenu/index.stories.tsx | 30 ++++++++++++++++++++
 3 files changed, 31 insertions(+), 28 deletions(-)
 delete mode 100644 src/components/ContextMenu/index.stories.ts
 create mode 100644 src/components/ContextMenu/index.stories.tsx

diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx
index d6d041e..7e08d51 100644
--- a/src/components/Box/index.tsx
+++ b/src/components/Box/index.tsx
@@ -5,6 +5,7 @@ export type BoxProps = {
   className?: string;
   children?: React.ReactNode | JSX.Element | JSX.Element[] | string;
 	ref?: React.Ref<HTMLElement>;
+  id?: string;
 
   onClick?: () => void;
   cursor?: 'pointer' | 'default';
diff --git a/src/components/ContextMenu/index.stories.ts b/src/components/ContextMenu/index.stories.ts
deleted file mode 100644
index 9eea57e..0000000
--- a/src/components/ContextMenu/index.stories.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import ContextMenu from '.';
-
-const meta = {
-  title: 'ContextMenu',
-  component: ContextMenu,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof ContextMenu>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Example: Story = {
-  args: {
-		items: [
-			{
-				label: 'Hello, World!',
-				action: () => window.alert('Hello, World!')
-			}
-		],
-		component: 'component',
-  },
-};
diff --git a/src/components/ContextMenu/index.stories.tsx b/src/components/ContextMenu/index.stories.tsx
new file mode 100644
index 0000000..649d669
--- /dev/null
+++ b/src/components/ContextMenu/index.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ContextMenu from '.';
+import Box from '../Box';
+
+const meta = {
+	title: 'ContextMenu',
+  component: ContextMenu,
+	tags: ['autodocs'],
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof ContextMenu>;
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <>
+        <ContextMenu
+          component='box'
+          items={[
+            { label: 'Item' }
+          ]}
+        />
+        <Box id='box'>Wrapped by ContextMenu!</Box>
+      </>
+    )
+  },
+}