Custom render ContextMenu story

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';

src/components/ContextMenu/index.stories.ts

@@ -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',
-  },
-};

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>
+      </>
+    )
+  },
+}