@moises.ai/design-system 3.4.5 → 3.4.6

package/src/components/DropdownMenu/DropdownMenu.stories.jsx

@@ -0,0 +1,645 @@
+import React, { useState } from 'react'
+import { DropdownMenu } from './DropdownMenu'
+import { IconButton } from '../IconButton/IconButton'
+import { Flex } from '@radix-ui/themes'
+import {
+  DotsVerticalIcon,
+  GearIcon,
+  MixerHorizontalIcon,
+} from '@radix-ui/react-icons'
+
+export default {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+DropdownMenu provides a list of actions or options that appear when triggered by a button. It's built on top of Radix UI's DropdownMenu component and supports various configurations including submenus, separators, labels, and keybindings.
+
+## Usage
+
+\`\`\`jsx
+import { DropdownMenu } from '@moises.ai/design-system'
+import { DotsVerticalIcon } from '@moises.ai/design-system/icons'
+import { IconButton } from '@moises.ai/design-system'
+
+const MyComponent = () => (
+  <DropdownMenu
+    trigger={
+      <IconButton>
+        <DotsVerticalIcon />
+      </IconButton>
+    }
+    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
+    }}
+    disabled={false} // Optional: prevents dropdown from opening when true
+  />
+)
+\`\`\`
+
+## 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: {
+    trigger: {
+      control: false,
+      description: 'The button that triggers the dropdown menu **(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 dropdown menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '2' },
+      },
+    },
+    className: {
+      control: false,
+      description: 'Additional CSS class names to apply to the dropdown menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    showActiveTrigger: {
+      control: { type: 'boolean' },
+      description:
+        'When true, applies a red background with 3px border radius to the trigger button',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    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 (useful for multi-action flows)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description:
+        'When true, prevents the dropdown menu from opening and disables the trigger',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    side: 'bottom',
+    align: 'end',
+    trigger: (
+      <IconButton>
+        <DotsVerticalIcon />
+      </IconButton>
+    ),
+    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">
+      <DropdownMenu {...args} />
+    </Flex>
+  ),
+}
+
+export const StayOpenAfterSelect = {
+  args: {
+    closeOnSelect: false,
+  },
+  render: (args) => {
+    const [count, setCount] = useState(0)
+
+    const options = [
+      {
+        type: 'item',
+        key: 'inc',
+        label: 'Increment counter',
+        onClick: () => setCount((current) => current + 1),
+      },
+      {
+        type: 'item',
+        key: 'reset',
+        label: 'Reset counter',
+        onClick: () => setCount(0),
+      },
+    ]
+
+    return (
+      <Flex direction="column" gap="2" align="center" height="280px">
+        <DropdownMenu
+          {...args}
+          options={options}
+          trigger={
+            <IconButton variant="ghost">
+              <DotsVerticalIcon />
+            </IconButton>
+          }
+        />
+        <div style={{ fontSize: '14px', color: '#4b5563' }}>
+          Counter: {count} (menu stays open to keep clicking)
+        </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>DropdownMenu Playground</h4>
+        <p style={{ fontSize: '14px', color: '#6b7280', marginBottom: '16px' }}>
+          Use the controls to customize all dropdown items.
+        </p>
+      </div>
+      <DropdownMenu
+        options={options}
+        size={size}
+        trigger={
+          <IconButton>
+            <DotsVerticalIcon />
+          </IconButton>
+        }
+      />
+    </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 dropdown 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} />,
+}