🎨 Add additional stories

Author: totase

src/stories/ContextMenu.stories.tsx

@@ -9,13 +9,6 @@ const TRIGGER_ID = 'storybook-trigger';
 const meta = {
   title: 'Context Menu',
   component: ContextMenu,
-  decorators: [
-    (Story) => (
-      <StoryWrapper triggerId={TRIGGER_ID}>
-        <Story />
-      </StoryWrapper>
-    ),
-  ],
   parameters: {
     layout: 'centered',
   },
@@ -34,6 +27,43 @@ export const Default: Story = {
       <ContextMenu.Item onClick={fn()}>Item 3</ContextMenu.Item>,
     ],
   },
+  render: (args) => (
+    <StoryWrapper triggerId={TRIGGER_ID}>
+      <ContextMenu {...args} />
+    </StoryWrapper>
+  ),
+};
+
+export const WithoutExitAnimation: Story = {
+  args: {
+    animateExit: false,
+    children: [
+      <ContextMenu.Item onClick={fn()}>Item 1</ContextMenu.Item>,
+      <ContextMenu.Item onClick={fn()}>Item 2</ContextMenu.Item>,
+      <ContextMenu.Item onClick={fn()}>Item 3</ContextMenu.Item>,
+    ],
+  },
+  render: (args) => (
+    <StoryWrapper triggerId={TRIGGER_ID}>
+      <ContextMenu {...args} />
+    </StoryWrapper>
+  ),
+};
+
+export const ClickTrigger: Story = {
+  args: {
+    triggerEvent: 'click',
+    children: [
+      <ContextMenu.Item onClick={fn()}>Item 1</ContextMenu.Item>,
+      <ContextMenu.Item onClick={fn()}>Item 2</ContextMenu.Item>,
+      <ContextMenu.Item onClick={fn()}>Item 3</ContextMenu.Item>,
+    ],
+  },
+  render: (args) => (
+    <StoryWrapper triggerId={TRIGGER_ID} triggerText="Left-click to trigger menu">
+      <ContextMenu {...args} />
+    </StoryWrapper>
+  ),
 };
 
 export const DisabledItem: Story = {
@@ -46,6 +76,11 @@ export const DisabledItem: Story = {
       <ContextMenu.Item onClick={fn()}>Item 3</ContextMenu.Item>,
     ],
   },
+  render: (args) => (
+    <StoryWrapper triggerId={TRIGGER_ID}>
+      <ContextMenu {...args} />
+    </StoryWrapper>
+  ),
 };
 
 export const Separator: Story = {
@@ -57,6 +92,11 @@ export const Separator: Story = {
       <ContextMenu.Item onClick={fn()}>Item 3</ContextMenu.Item>,
     ],
   },
+  render: (args) => (
+    <StoryWrapper triggerId={TRIGGER_ID}>
+      <ContextMenu {...args} />
+    </StoryWrapper>
+  ),
 };
 
 export const SubMenu: Story = {
@@ -71,4 +111,9 @@ export const SubMenu: Story = {
       </ContextMenu.SubMenu>,
     ],
   },
+  render: (args) => (
+    <StoryWrapper triggerId={TRIGGER_ID}>
+      <ContextMenu {...args} />
+    </StoryWrapper>
+  ),
 };

src/stories/components/StoryWrapper.tsx

@@ -2,10 +2,18 @@ import { ReactNode } from 'react';
 
 import './styles.css';
 
-const StoryWrapper = ({ triggerId, children }: { triggerId: string; children: ReactNode }) => {
+const StoryWrapper = ({
+  triggerId,
+  children,
+  triggerText = 'Right-click to trigger menu',
+}: {
+  triggerId: string;
+  children: ReactNode;
+  triggerText?: string;
+}) => {
   return (
     <div className="story-wrapper">
-      <p id={triggerId}>Right-click to trigger menu</p>
+      <p id={triggerId}>{triggerText}</p>
 
       {children}
     </div>