@moises.ai/design-system 4.16.6 → 4.16.8

package/src/components/ToolsDropdown/ToolsDropdown.jsx

@@ -0,0 +1,147 @@
+import { Flex, ScrollArea } from '@radix-ui/themes'
+import classNames from 'classnames'
+import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
+import { memo, useCallback, useState } from 'react'
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon'
+import { styles as menuStyles } from '../../lib/menu'
+import { Button } from '../Button/Button'
+import { Theme } from '../theme/Theme'
+import styles from './ToolsDropdown.module.css'
+
+export const ToolsDropdown = memo(
+  ({
+    trigger,
+    children,
+    className,
+    contentClassName,
+    showActiveTrigger,
+    size = '2',
+    disabled = false,
+    maxHeight,
+    sideOffset = 5,
+    matchTriggerWidth = false,
+    onTriggerClick,
+    showSeparator = true,
+    withIconTrigger = true,
+    wrapCloseMenu,
+    ...props
+  }) => {
+    const isControlled = props.open !== undefined
+    const [internalOpen, setInternalOpen] = useState(false)
+    const [hover, setHover] = useState(false)
+    const [isActionFocused, setIsActionFocused] = useState(false)
+    const [isMenuTriggerFocused, setIsMenuTriggerFocused] = useState(false)
+
+    const open = isControlled ? props.open : internalOpen
+    const onOpenChange = useCallback(
+      (value) => {
+        if (!isControlled) setInternalOpen(value)
+        props?.onOpenChange?.(value)
+      },
+      [isControlled, props?.onOpenChange],
+    )
+
+    const baseClose = useCallback(() => onOpenChange(false), [onOpenChange])
+    const closeMenu = wrapCloseMenu ? wrapCloseMenu(baseClose) : baseClose
+
+    const contentStyle = {
+      ...(matchTriggerWidth && {
+        width: 'var(--radix-dropdown-menu-trigger-width)',
+        boxSizing: 'border-box',
+      }),
+      ...(maxHeight && { height: maxHeight }),
+    }
+
+    const handleTriggerClick = (event) => {
+      if (!onTriggerClick) return
+      event.preventDefault()
+      event.stopPropagation()
+      onTriggerClick(event)
+    }
+
+    const triggerButtonStyle = {
+      padding: showSeparator ? '0px 8px 0 6px' : '0 6px',
+      width: withIconTrigger ? '32px' : undefined,
+      outline: 'none',
+    }
+
+    const menuContent = (
+      <Theme asChild>
+        <DropdownMenuRadix.Content
+          className={classNames(menuStyles.menuContent, contentClassName)}
+          size={size}
+          side={props.side}
+          align={props.align}
+          style={contentStyle}
+          sideOffset={sideOffset}
+          alignOffset={0}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault()
+          }}
+          onClick={(event) => event.stopPropagation()}
+        >
+          {maxHeight ? (
+            <ScrollArea scrollbars="vertical" style={{ height: maxHeight }}>
+              <div className={styles.contentPanel}>
+                {typeof children === 'function' ? children(closeMenu) : children}
+              </div>
+            </ScrollArea>
+          ) : (
+            <div className={styles.contentPanel}>
+              {typeof children === 'function' ? children(closeMenu) : children}
+            </div>
+          )}
+        </DropdownMenuRadix.Content>
+      </Theme>
+    )
+
+    return (
+      <Flex className={classNames(styles.container, className)}>
+        <DropdownMenuRadix.Root
+          {...props}
+          open={disabled ? false : open}
+          onOpenChange={disabled ? undefined : onOpenChange}
+        >
+          {onTriggerClick && (
+            <button
+              type="button"
+              onClick={handleTriggerClick}
+              className={classNames(styles.triggerWithClick)}
+            >
+             {trigger}
+            </button>
+          )}
+
+          <DropdownMenuRadix.Trigger
+            asChild
+            disabled={disabled}
+          >
+            <button
+              type="button"
+              className={classNames(menuStyles.menuTrigger)}
+
+            >
+              {trigger}
+
+              {showSeparator && <span className={styles.separator} />}
+
+              <ChevronDownIcon
+                width={8}
+                height={8}
+                className={classNames(styles.chevron, {
+                  [styles.hover]: hover,
+                })}
+              />
+            </button>
+          </DropdownMenuRadix.Trigger>
+
+          <DropdownMenuRadix.Portal className={menuStyles.menuPortal}>
+            {menuContent}
+          </DropdownMenuRadix.Portal>
+        </DropdownMenuRadix.Root>
+      </Flex>
+    )
+  },
+)
+
+ToolsDropdown.displayName = 'ToolsDropdown'

package/src/components/ToolsDropdown/ToolsDropdown.module.css

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.triggerWithClick {
+  cursor: pointer;
+  height: 32px;
+}
+
+.menuTrigger {
+  cursor: pointer;
+  height: 32px;
+}
+
+.menuPortal {
+  border-radius: 8px;
+  border: 1px solid var(--neutral-alpha-3);
+  background: #18191b;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+}

package/src/components/ToolsDropdown/ToolsDropdown.stories.jsx

@@ -0,0 +1,136 @@
+import { Flex, Switch, Text } from '@radix-ui/themes'
+import { useState } from 'react'
+import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
+import { MetronomeIcon } from '../../icons/MetronomeIcon'
+import { ToolsDropdown } from './ToolsDropdown'
+
+export default {
+  title: 'Components/ToolsDropdown',
+  component: ToolsDropdown,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+ToolsDropdown combines a tool action trigger with a dropdown menu built on Radix DropdownMenu.
+
+- Pass \`onTriggerClick\` to run a primary action without opening the menu. The chevron opens the menu.
+- Omit \`onTriggerClick\` to open the menu from the full trigger.
+- Use \`children\` or \`children(closeMenu)\` for custom panel content.
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    trigger: {
+      description: 'Trigger content shown on the main button area',
+      table: { type: { summary: 'React.ReactNode' } },
+    },
+    onTriggerClick: {
+      description: 'Primary action executed when the main trigger is clicked',
+      table: { type: { summary: 'function' } },
+    },
+    showSeparator: {
+      control: 'boolean',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: true } },
+    },
+    children: {
+      description: 'Dropdown content or render prop receiving closeMenu',
+      table: { type: { summary: 'React.ReactNode | (closeMenu) => React.ReactNode' } },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    trigger: <Text>Tools</Text>,
+    showSeparator: true,
+  },
+  render: (args) => (
+    <ToolsDropdown {...args}>
+      <Text size="2">Tool settings panel</Text>
+    </ToolsDropdown>
+  ),
+}
+
+export const WithCustomAction = {
+  args: {
+    trigger: <MetronomeIcon width={16} height={16} />,
+    onTriggerClick: () => alert('Metronome toggled'),
+  },
+  render: (args) => (
+    <ToolsDropdown {...args}>
+      <Flex direction="column" gap="2">
+        <Text size="2">BPM: 120</Text>
+        <Text size="2">Time signature: 4/4</Text>
+      </Flex>
+    </ToolsDropdown>
+  ),
+}
+
+export const WithRenderProp = {
+  render: () => {
+    const [enabled, setEnabled] = useState(false)
+
+    return (
+      <ToolsDropdown
+        trigger={<Text>Chords</Text>}
+        onTriggerClick={() => alert('Chords toggled')}
+      >
+        {(closeMenu) => (
+          <>
+            <Flex direction="column" gap="3" width="220px">
+              <Text size="2">Show chord diagrams</Text>
+              <Switch
+                size="2"
+                checked={enabled}
+                onCheckedChange={setEnabled}
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  closeMenu()
+                  alert('Saved')
+                }}
+              >
+                Save
+              </button>
+            </Flex>
+          </>
+        )}
+      </ToolsDropdown>
+    )
+  },
+}
+
+export const ControlledOpen = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+      <Flex direction="column" gap="4" align="center">
+        <Flex gap="2">
+          <button type="button" onClick={() => setIsOpen(true)}>
+            Open
+          </button>
+          <button type="button" onClick={() => setIsOpen(false)}>
+            Close
+          </button>
+        </Flex>
+
+        <ToolsDropdown
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          trigger={<Text>Controlled</Text>}
+        >
+          <Text size="2">Controlled menu content</Text>
+        </ToolsDropdown>
+
+        <Text size="1">
+          Status: <strong>{isOpen ? 'Open' : 'Closed'}</strong>
+        </Text>
+      </Flex>
+    )
+  },
+}

package/src/icons/ChordDiagramGridIcon.jsx

@@ -0,0 +1,22 @@
+export const ChordDiagramGridIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width={width} 
+  height={height} 
+  viewBox="0 0 16 16" 
+  fill="none"
+  className={className}
+  {...props}
+>
+    <path 
+      d="M5.33325 14.6663C5.33325 14.9425 5.55711 15.1663 5.83325 15.1663C6.10939 15.1663 6.33325 14.9425 6.33325 14.6663H5.83325H5.33325ZM9.66658 14.6663C9.66658 14.9425 9.89044 15.1663 10.1666 15.1663C10.4427 15.1663 10.6666 14.9425 10.6666 14.6663H10.1666H9.66658ZM2.66659 10.6663V11.1663H13.3333V10.6663V10.1663H2.66659V10.6663ZM2.66659 14.6663V15.1663H13.3333V14.6663V14.1663H2.66659V14.6663ZM5.83325 14.6663H6.33325V10.6663H5.83325H5.33325V14.6663H5.83325ZM10.1666 14.6663H10.6666V10.6663H10.1666H9.66658V14.6663H10.1666ZM1.33325 13.333H1.83325V11.9997H1.33325H0.833252V13.333H1.33325ZM14.6666 13.333H15.1666V11.9997H14.6666H14.1666V13.333H14.6666ZM13.3333 10.6663V11.1663C13.7935 11.1663 14.1666 11.5394 14.1666 11.9997H14.6666H15.1666C15.1666 10.9872 14.3458 10.1663 13.3333 10.1663V10.6663ZM13.3333 14.6663V15.1663C14.3458 15.1663 15.1666 14.3455 15.1666 13.333H14.6666H14.1666C14.1666 13.7932 13.7935 14.1663 13.3333 14.1663V14.6663ZM2.66659 10.6663V10.1663C1.65406 10.1663 0.833252 10.9872 0.833252 11.9997H1.33325H1.83325C1.83325 11.5394 2.20635 11.1663 2.66659 11.1663V10.6663ZM2.66659 14.6663V14.1663C2.20635 14.1663 1.83325 13.7932 1.83325 13.333H1.33325H0.833252C0.833252 14.3455 1.65406 15.1663 2.66659 15.1663V14.6663ZM3.83325 1.33301V1.83301H6.16659V1.33301V0.833008H3.83325V1.33301ZM6.16659 1.33301V1.83301H9.83325V1.33301V0.833008H6.16659V1.33301ZM9.83325 1.33301V1.83301H12.1666V1.33301V0.833008H9.83325V1.33301ZM13.4999 2.66634H12.9999V7.99967H13.4999H13.9999V2.66634H13.4999ZM2.49992 7.99967H2.99992V2.66634H2.49992H1.99992V7.99967H2.49992ZM12.1666 1.33301V1.83301C12.6268 1.83301 12.9999 2.2061 12.9999 2.66634H13.4999H13.9999C13.9999 1.65382 13.1791 0.833008 12.1666 0.833008V1.33301ZM3.83325 1.33301V0.833008C2.82073 0.833008 1.99992 1.65382 1.99992 2.66634H2.49992H2.99992C2.99992 2.2061 3.37301 1.83301 3.83325 1.83301V1.33301ZM6.16659 7.99967H6.66659V1.33301H6.16659H5.66659V7.99967H6.16659ZM9.83325 7.99967H10.3333V1.33301H9.83325H9.33325V7.99967H9.83325Z" 
+      fill='currentColor'
+    />
+    <path 
+      d="M11.1667 4.66634C11.1667 5.40272 10.5697 5.99967 9.83333 5.99967C9.09695 5.99967 8.5 5.40272 8.5 4.66634C8.5 3.92996 9.09695 3.33301 9.83333 3.33301C10.5697 3.33301 11.1667 3.92996 11.1667 4.66634Z" 
+      fill='currentColor' 
+    />
+  </svg>
+)
+
+ChordDiagramGridIcon.displayName = 'ChordDiagramGridIcon'

package/src/icons/ChordGrid3Icon.jsx

@@ -0,0 +1,20 @@
+export const ChordGrid3Icon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width={width} 
+  height={height} 
+  viewBox="0 0 15 8" 
+  fill="none"
+  className={className}
+  {...props}
+  >
+    <path 
+      d="M5 7.5V0.5M9.33333 7.5V0.5M12.5 0.5H1.83333C1.09695 0.5 0.5 1.39543 0.5 2.5V5.5C0.5 6.60457 1.09695 7.5 1.83333 7.5H12.5C13.2364 7.5 13.8333 6.60457 13.8333 5.5V2.5C13.8333 1.39543 13.2364 0.5 12.5 0.5Z" 
+      stroke="currentColor" 
+      strokeMiterlimit="10" 
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+ChordGrid3Icon.displayName = 'ChordGrid3Icon'

package/src/icons.jsx

@@ -435,3 +435,5 @@ export { ThumbsDownIcon } from './icons/ThumbsDownIcon'
 export { LightBulbIcon } from './icons/LightBulbIcon'
 export { RewindBarFillIcon } from './icons/RewindBarFillIcon'
 export { ForwardBarFillIcon } from './icons/ForwardBarFillIcon'
+export { ChordGrid3Icon } from './icons/ChordGrid3Icon'
+export { ChordDiagramGridIcon } from './icons/ChordDiagramGridIcon'

package/src/index.jsx

@@ -53,6 +53,7 @@ export { Countdown } from './components/Countdown/Countdown'
 export { DataTable } from './components/DataTable/DataTable'
 export { DropdownButton } from './components/DropdownButton/DropdownButton'
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu'
+export { ToolsDropdown } from './components/ToolsDropdown/ToolsDropdown'
 export { EmptyState } from './components/EmptyState/EmptyState'
 export {
   Extension,
@@ -122,4 +123,4 @@ export { TrackHeader } from './components/TrackHeader/TrackHeader'
 export { useForm } from './components/useForm/useForm'
 export { VerticalSegmentControl } from './components/VerticalSegmentControl/VerticalSegmentControl'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
-export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
+export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'