@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/ContextMenu/ContextMenu.stories.jsx

@@ -0,0 +1,657 @@
+import React, { useState } from 'react'
+import { ContextMenu } from './ContextMenu'
+import { Flex } from '@radix-ui/themes'
+import { GearIcon, MixerHorizontalIcon, DotsVerticalIcon } from '@radix-ui/react-icons'
+
+export default {
+  title: 'Components/ContextMenu',
+  component: ContextMenu,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+ContextMenu provides a list of actions or options that appear when right-clicking on an element. It's built on top of Radix UI's ContextMenu component and supports various configurations including submenus, separators, labels, and keybindings.
+
+## Usage
+
+\`\`\`jsx
+import { ContextMenu } from '@moises.ai/design-system'
+
+const MyComponent = () => (
+  <ContextMenu
+    options={[
+      {
+        type: 'item',
+        key: 'edit',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'duplicate',
+        label: 'Duplicate',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+      { type: 'separator', key: 'sep1' },
+      {
+        type: 'item',
+        key: 'delete',
+        label: 'Delete',
+        onClick: () => console.log('Delete clicked'),
+      },
+    ]}
+    onSelectionChange={(selectedItem) => {
+      console.log('Selected item:', selectedItem)
+      // Handle the selected item
+    }}
+    disable={false} // Optional: prevents context menu from opening when true
+  >
+    <div>Right-click here</div>
+  </ContextMenu>
+)
+\`\`\`
+
+## Options API
+
+The \`options\` prop accepts an array of objects with the following types:
+
+### Menu Item
+\`\`\`js
+{
+  type: 'item',
+  key: 'uniqueKey', // Required unique identifier
+  label: 'Item Label', // Text to display
+  secondaryText: 'Secondary text', // Optional, secondary text
+  secondaryTextPosition: 'bottom' | 'right', // Optional, position of secondary text (default: 'bottom')
+  icon: <Icon />, // Optional, icon displayed before the label
+  onClick: () => {}, // Function called when clicked
+  disabled: false, // Optional, disables the item when true
+  keybinding: '⌘C', // Optional, displays a keyboard shortcut
+  rightIcon: <Icon />, // Optional, icon displayed on the right side
+  color: 'red' | 'cyan', // Optional: custom color for this item
+}
+\`\`\`
+
+### Submenu
+\`\`\`js
+{
+  type: 'sub',
+  key: 'uniqueKey', // Required unique identifier
+  label: 'Submenu Label', // Text to display
+  children: [], // Array of menu items for the submenu
+  color: 'red' | 'cyan', // Optional: custom color for this submenu trigger
+}
+\`\`\`
+
+### Separator
+\`\`\`js
+{
+  type: 'separator',
+  key: 'uniqueKey', // Required unique identifier
+}
+\`\`\`
+
+### Label
+\`\`\`js
+{
+  type: 'label',
+  key: 'uniqueKey', // Required unique identifier
+  label: 'Section Label', // Text to display as a non-interactive label
+  color: 'red' | 'cyan', // Optional: custom color for this label
+}
+\`\`\`
+
+### Checkbox
+\`\`\`js
+{
+  type: 'checkbox',
+  key: 'uniqueKey', // Required unique identifier
+  label: 'Checkbox Label', // Text to display
+  secondaryText: 'Secondary text', // Optional, secondary text
+  secondaryTextPosition: 'bottom' | 'right', // Optional, position of secondary text (default: 'bottom')
+  icon: <Icon />, // Optional, icon displayed after the checkmark placeholder
+  checked: true, // Whether the checkbox is checked (always reserves space for checkmark)
+  onChange: (checked) => {}, // Function called when toggled, receives new checked state
+  disabled: false, // Optional, disables the checkbox when true
+  keybinding: '⌘C', // Optional, displays a keyboard shortcut
+  rightIcon: <Icon />, // Optional, icon displayed on the right side
+  color: 'red' | 'cyan', // Optional: custom color for this checkbox item
+}
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: false,
+      description: 'The element to attach the context menu to **(REQUIRED)**',
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    options: {
+      control: false,
+      description: 'Array of menu items configuration **(REQUIRED)**',
+      table: {
+        type: { summary: 'Array<MenuItem>' },
+      },
+    },
+    side: {
+      options: ['top', 'right', 'bottom', 'left'],
+      control: { type: 'select' },
+      description: 'The preferred side of the trigger to render the menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'bottom' },
+      },
+    },
+    align: {
+      options: ['start', 'center', 'end'],
+      control: { type: 'select' },
+      description: 'The preferred alignment against the trigger',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'end' },
+      },
+    },
+    size: {
+      options: ['1', '2'],
+      control: { type: 'select' },
+      description: 'The size of the context menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '2' },
+      },
+    },
+    className: {
+      control: false,
+      description: 'Additional CSS class names to apply to the context menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onSelectionChange: {
+      control: false,
+      description:
+        'Callback function called when any menu item is selected, receives the selected item as parameter',
+      table: {
+        type: { summary: 'function' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    closeOnSelect: {
+      control: { type: 'boolean' },
+      description:
+        'When false, keeps the menu open after selecting an option (handy for performing multiple actions)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    disable: {
+      control: { type: 'boolean' },
+      description:
+        'When true, prevents the context menu from opening and renders only the children',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    side: 'bottom',
+    align: 'end',
+    options: [
+      {
+        type: 'item',
+        key: 'item1',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'item2',
+        label: 'Duplicate',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+      { type: 'separator', key: 'sep1' },
+      {
+        type: 'item',
+        key: 'item3',
+        label: 'Delete',
+        onClick: () => console.log('Delete clicked'),
+      },
+    ],
+  },
+  render: (args) => (
+    <Flex justify="center" align="start" height="300px">
+      <ContextMenu {...args}>
+      <Flex
+        justify="center"
+          align="center"
+        style={{
+          padding: '50px',
+          border: '1px dashed gray',
+            borderRadius: '8px',
+        }}
+      >
+          Right-click here
+        </Flex>
+      </ContextMenu>
+      </Flex>
+    ),
+}
+
+export const StayOpenAfterSelect = {
+  args: {
+    closeOnSelect: false,
+  },
+  render: (args) => {
+    const [actions, setActions] = useState([])
+
+    const addAction = (label) =>
+      setActions((current) => [...current, `${label} at ${new Date().toLocaleTimeString()}`])
+
+    const options = [
+      {
+        type: 'item',
+        key: 'copy',
+        label: 'Copy',
+        onClick: () => addAction('Copy'),
+      },
+      {
+        type: 'item',
+        key: 'paste',
+        label: 'Paste',
+        onClick: () => addAction('Paste'),
+      },
+      {
+        type: 'checkbox',
+        key: 'lock',
+        label: 'Lock selection',
+        checked: actions.includes('Locked'),
+        onChange: (checked) => {
+          if (checked) {
+            addAction('Locked')
+          } else {
+            setActions((current) => current.filter((entry) => entry !== 'Locked'))
+          }
+        },
+      },
+    ]
+
+    return (
+      <Flex direction="column" gap="2" align="center" height="320px">
+        <ContextMenu {...args} options={options}>
+          <Flex
+            justify="center"
+            align="center"
+            style={{
+              padding: '50px',
+              border: '1px dashed gray',
+              borderRadius: '8px',
+            }}
+          >
+            Right-click here (menu stays open)
+          </Flex>
+        </ContextMenu>
+        <div style={{ fontSize: '14px', color: '#4b5563' }}>
+          Actions: {actions.length ? actions.join(' • ') : 'none yet'}
+        </div>
+      </Flex>
+    )
+  },
+}
+
+const ItemPlaygroundComponent = ({
+  size,
+  // Item 1
+  item1Type,
+  item1Label,
+  item1SecondaryText,
+  item1SecondaryTextPosition,
+  item1ShowIcon,
+  item1Keybinding,
+  item1ShowRightIcon,
+  item1Disabled,
+  item1Color,
+  // Item 2
+  item2Type,
+  item2Label,
+  item2SecondaryText,
+  item2SecondaryTextPosition,
+  item2ShowIcon,
+  item2Keybinding,
+  item2ShowRightIcon,
+  item2Disabled,
+  item2Color,
+  // Submenu
+  showSubmenu,
+  submenuLabel,
+  // Sub Item
+  subItemType,
+  subItemLabel,
+  subItemSecondaryText,
+  subItemSecondaryTextPosition,
+  subItemShowIcon,
+  subItemKeybinding,
+  subItemDisabled,
+}) => {
+  const [item1IsChecked, setItem1IsChecked] = useState(false)
+  const [item2IsChecked, setItem2IsChecked] = useState(true)
+  const [subItemIsChecked, setSubItemIsChecked] = useState(false)
+
+  const item1Config = {
+    type: item1Type,
+    key: 'item-1',
+    label: item1Label,
+    secondaryText: item1SecondaryText || undefined,
+    secondaryTextPosition: item1SecondaryTextPosition,
+    icon: item1ShowIcon ? <GearIcon /> : undefined,
+    keybinding: item1Keybinding || undefined,
+    rightIcon: item1ShowRightIcon ? <DotsVerticalIcon /> : undefined,
+    disabled: item1Disabled,
+    color: item1Color === 'default' ? undefined : item1Color,
+    ...(item1Type === 'checkbox'
+      ? {
+          checked: item1IsChecked,
+          onChange: (checked) => setItem1IsChecked(checked),
+        }
+      : {
+          onClick: () => console.log('Item 1 clicked'),
+        }),
+  }
+
+  const item2Config = {
+    type: item2Type,
+    key: 'item-2',
+    label: item2Label,
+    secondaryText: item2SecondaryText || undefined,
+    secondaryTextPosition: item2SecondaryTextPosition,
+    icon: item2ShowIcon ? <MixerHorizontalIcon /> : undefined,
+    keybinding: item2Keybinding || undefined,
+    rightIcon: item2ShowRightIcon ? <DotsVerticalIcon /> : undefined,
+    disabled: item2Disabled,
+    color: item2Color === 'default' ? undefined : item2Color,
+    ...(item2Type === 'checkbox'
+      ? {
+          checked: item2IsChecked,
+          onChange: (checked) => setItem2IsChecked(checked),
+        }
+      : {
+          onClick: () => console.log('Item 2 clicked'),
+        }),
+  }
+
+  const subItemConfig = {
+    type: subItemType,
+    key: 'sub-item',
+    label: subItemLabel,
+    secondaryText: subItemSecondaryText || undefined,
+    secondaryTextPosition: subItemSecondaryTextPosition,
+    icon: subItemShowIcon ? <GearIcon /> : undefined,
+    keybinding: subItemKeybinding || undefined,
+    disabled: subItemDisabled,
+    ...(subItemType === 'checkbox'
+      ? {
+          checked: subItemIsChecked,
+          onChange: (checked) => setSubItemIsChecked(checked),
+        }
+      : {
+          onClick: () => console.log('Sub item clicked'),
+        }),
+  }
+
+    const options = [
+      {
+        type: 'label',
+      key: 'label',
+      label: 'Menu Items',
+    },
+    item1Config,
+    item2Config,
+      { type: 'separator', key: 'sep1' },
+    ...(showSubmenu
+      ? [
+      {
+        type: 'sub',
+        key: 'submenu',
+            label: submenuLabel,
+            children: [subItemConfig],
+          },
+        ]
+      : []),
+    ]
+
+    return (
+      <Flex direction="column" gap="4" align="center">
+        <div>
+        <h4>ContextMenu Playground</h4>
+        <p style={{ fontSize: '14px', color: '#6b7280', marginBottom: '16px' }}>
+          Use the controls to customize all context menu items.
+        </p>
+      </div>
+      <ContextMenu options={options} size={size}>
+            <Flex
+              justify="center"
+          align="center"
+              style={{
+                padding: '50px',
+                border: '1px dashed gray',
+            borderRadius: '8px',
+              }}
+            >
+          Right-click here
+            </Flex>
+          </ContextMenu>
+      </Flex>
+    )
+}
+
+export const Playground = {
+  args: {
+    size: '2',
+    // Item 1
+    item1Type: 'item',
+    item1Label: 'Item 1',
+    item1SecondaryText: 'Secondary text',
+    item1SecondaryTextPosition: 'bottom',
+    item1ShowIcon: true,
+    item1Keybinding: '⌘ C',
+    item1ShowRightIcon: true,
+    item1Disabled: false,
+    item1Color: 'default',
+    // Item 2
+    item2Type: 'checkbox',
+    item2Label: 'Item 2',
+    item2SecondaryText: '',
+    item2SecondaryTextPosition: 'bottom',
+    item2ShowIcon: true,
+    item2Keybinding: '⌘ S',
+    item2ShowRightIcon: false,
+    item2Disabled: false,
+    item2Color: 'default',
+    // Submenu
+    showSubmenu: true,
+    submenuLabel: 'More Options',
+    // Sub Item
+    subItemType: 'item',
+    subItemLabel: 'Sub Item',
+    subItemSecondaryText: 'Description',
+    subItemSecondaryTextPosition: 'bottom',
+    subItemShowIcon: false,
+    subItemKeybinding: '',
+    subItemDisabled: false,
+  },
+  argTypes: {
+    size: {
+      options: ['1', '2'],
+      control: { type: 'select' },
+      description: 'Size of the context menu items',
+      table: { category: 'General' },
+    },
+    // Item 1
+    item1Type: {
+      options: ['item', 'checkbox'],
+      control: { type: 'select' },
+      description: 'Type of the menu item (regular item or checkbox)',
+      table: { category: 'Item 1' },
+    },
+    item1Label: {
+      control: { type: 'text' },
+      description: 'Label text',
+      table: { category: 'Item 1' },
+    },
+    item1SecondaryText: {
+      control: { type: 'text' },
+      description: 'Secondary text',
+      table: { category: 'Item 1' },
+    },
+    item1SecondaryTextPosition: {
+      options: ['bottom', 'right'],
+      control: { type: 'select' },
+      description: 'Secondary text position',
+      table: { category: 'Item 1' },
+    },
+    item1ShowIcon: {
+      control: { type: 'boolean' },
+      description: 'Show left icon',
+      table: { category: 'Item 1' },
+    },
+    item1Keybinding: {
+      control: { type: 'text' },
+      description: 'Keyboard shortcut',
+      table: { category: 'Item 1' },
+    },
+    item1ShowRightIcon: {
+      control: { type: 'boolean' },
+      description: 'Show right icon',
+      table: { category: 'Item 1' },
+    },
+    item1Disabled: {
+      control: { type: 'boolean' },
+      description: 'Disabled state',
+      table: { category: 'Item 1' },
+    },
+    item1Color: {
+      options: ['default', 'red', 'cyan'],
+      control: { type: 'select' },
+      description: 'Color variant',
+      table: { category: 'Item 1' },
+    },
+    // Item 2
+    item2Type: {
+      options: ['item', 'checkbox'],
+      control: { type: 'select' },
+      description: 'Type of the menu item (regular item or checkbox)',
+      table: { category: 'Item 2' },
+    },
+    item2Label: {
+      control: { type: 'text' },
+      description: 'Label text',
+      table: { category: 'Item 2' },
+    },
+    item2SecondaryText: {
+      control: { type: 'text' },
+      description: 'Secondary text',
+      table: { category: 'Item 2' },
+    },
+    item2SecondaryTextPosition: {
+      options: ['bottom', 'right'],
+      control: { type: 'select' },
+      description: 'Secondary text position',
+      table: { category: 'Item 2' },
+    },
+    item2ShowIcon: {
+      control: { type: 'boolean' },
+      description: 'Show left icon',
+      table: { category: 'Item 2' },
+    },
+    item2Keybinding: {
+      control: { type: 'text' },
+      description: 'Keyboard shortcut',
+      table: { category: 'Item 2' },
+    },
+    item2ShowRightIcon: {
+      control: { type: 'boolean' },
+      description: 'Show right icon',
+      table: { category: 'Item 2' },
+    },
+    item2Disabled: {
+      control: { type: 'boolean' },
+      description: 'Disabled state',
+      table: { category: 'Item 2' },
+    },
+    item2Color: {
+      options: ['default', 'red', 'cyan'],
+      control: { type: 'select' },
+      description: 'Color variant',
+      table: { category: 'Item 2' },
+    },
+    // Submenu
+    showSubmenu: {
+      control: { type: 'boolean' },
+      description: 'Show submenu',
+      table: { category: 'Submenu' },
+    },
+    submenuLabel: {
+      control: { type: 'text' },
+      description: 'Submenu trigger label',
+      table: { category: 'Submenu' },
+      if: { arg: 'showSubmenu' },
+    },
+    // Sub Item
+    subItemType: {
+      options: ['item', 'checkbox'],
+      control: { type: 'select' },
+      description: 'Type of the sub menu item (regular item or checkbox)',
+      table: { category: 'Sub Item' },
+      if: { arg: 'showSubmenu' },
+    },
+    subItemLabel: {
+      control: { type: 'text' },
+      description: 'Label text',
+      table: { category: 'Sub Item' },
+      if: { arg: 'showSubmenu' },
+    },
+    subItemSecondaryText: {
+      control: { type: 'text' },
+      description: 'Secondary text',
+      table: { category: 'Sub Item' },
+      if: { arg: 'showSubmenu' },
+    },
+    subItemSecondaryTextPosition: {
+      options: ['bottom', 'right'],
+      control: { type: 'select' },
+      description: 'Secondary text position',
+      table: { category: 'Sub Item' },
+      if: { arg: 'showSubmenu' },
+    },
+    subItemShowIcon: {
+      control: { type: 'boolean' },
+      description: 'Show left icon',
+      table: { category: 'Sub Item' },
+      if: { arg: 'showSubmenu' },
+    },
+    subItemKeybinding: {
+      control: { type: 'text' },
+      description: 'Keyboard shortcut',
+      table: { category: 'Sub Item' },
+      if: { arg: 'showSubmenu' },
+    },
+    subItemDisabled: {
+      control: { type: 'boolean' },
+      description: 'Disabled state',
+      table: { category: 'Sub Item' },
+      if: { arg: 'showSubmenu' },
+    },
+  },
+  render: (args) => <ItemPlaygroundComponent {...args} />,
+}