@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/DropdownButton/DropdownButton.jsx

@@ -0,0 +1,124 @@
+import { Flex } from '@radix-ui/themes'
+import styles from './DropdownButton.module.css'
+import classNames from 'classnames'
+import { Popover } from 'radix-ui'
+import { Button } from '../Button/Button'
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon'
+import { useState } from 'react'
+
+export const DropdownButton = ({
+  children,
+  trigger,
+  className,
+  showSeparator = true,
+  onTriggerClick,
+  open,
+  onOpenChange,
+  leftColor,
+  ...props
+}) => {
+  const [hover, setHover] = useState(false)
+
+  const handleTriggerClick = (e) => {
+    if (onTriggerClick) {
+      e.preventDefault()
+      e.stopPropagation()
+      onTriggerClick(e)
+    }
+  }
+
+  return (
+    <Flex className={classNames(styles.container, className)} {...props}>
+      <Popover.Root open={open} onOpenChange={onOpenChange} modal={true}>
+        {onTriggerClick && (
+          <Flex
+            as="button"
+            className={classNames({
+              [styles.triggerWithClick]: onTriggerClick,
+              [styles.hasLeftColor]: leftColor,
+            })}
+            onMouseEnter={() => {
+              setHover(true)
+            }}
+            onMouseLeave={() => {
+              setHover(false)
+            }}
+            onClick={handleTriggerClick}
+          >
+            <Button
+              variant="ghost"
+              size="2"
+              style={{
+                padding: leftColor
+                  ? '8px 10px'
+                  : showSeparator
+                  ? '0px 8px 0 6px'
+                  : '0 6px',
+                width: '32px',
+                backgroundColor: leftColor,
+                borderRadius: leftColor ? '3px' : '0px',
+              }}
+            >
+              {trigger}
+            </Button>
+          </Flex>
+        )}
+        <Popover.Trigger asChild>
+          <div
+            className={classNames({
+              [styles.hover]: hover,
+              [styles.hasLeftColor]: leftColor,
+              [styles.hasTriggerWithClick]: onTriggerClick,
+              [styles.hasTriggerWithoutClick]: !onTriggerClick,
+            })}
+            onMouseEnter={() => {
+              setHover(true)
+            }}
+            onMouseLeave={() => {
+              setHover(false)
+            }}
+          >
+            {!onTriggerClick && (
+              <Button
+                variant="ghost"
+                size="2"
+                style={{
+                  padding: leftColor
+                    ? '8px 10px'
+                    : showSeparator
+                    ? '0px 8px 0 6px'
+                    : '0 6px',
+                  backgroundColor: leftColor,
+                  borderRadius: leftColor ? '3px' : '0px',
+                }}
+              >
+                {trigger}
+              </Button>
+            )}
+
+            {showSeparator && (
+              <span
+                className={classNames(styles.separator, {
+                  [styles.hasLeftColor]: leftColor,
+                })}
+              />
+            )}
+
+            <ChevronDownIcon
+              width={8}
+              height={8}
+              className={classNames(styles.chevron, {
+                [styles.hover]: hover,
+              })}
+            />
+          </div>
+        </Popover.Trigger>
+        <Popover.Content className={styles.content} sideOffset={5}>
+          {children}
+        </Popover.Content>
+      </Popover.Root>
+    </Flex>
+  )
+}
+
+DropdownButton.displayName = 'DropdownButton'

package/src/components/DropdownButton/DropdownButton.module.css

@@ -0,0 +1,102 @@
+.hasTriggerWithoutClick {
+  display: flex;
+  height: 32px;
+  border-radius: 4px;
+  align-items: center;
+  padding: 4px;
+
+ border: 1px solid var(--neutral-alpha-3);
+
+  &.hasLeftColor {
+    padding: 0px 4px 0px 0px;
+  }
+
+  &.triggerWithClick {
+    cursor: pointer;
+
+  }  
+}
+
+.triggerWithClick {
+  border-width: 1px 0 1px 1px;   /* top right bottom left */
+  border-style: solid;
+  border-color: var(--neutral-alpha-3);
+  display: flex;
+  height: 32px;
+  width: 32px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  align-items: center;
+  justify-content: center !important;
+
+  &:hover {
+    color: var(--neutral-alpha-12) !important;
+    cursor: pointer;
+  }
+
+  &:hover button {
+    color: var(--neutral-alpha-12) !important;
+  }
+}
+
+.hasTriggerWithClick {
+  border-width: 1px 1px 1px 0;   /* top right bottom left */
+  border-style: solid;
+  border-color: var(--neutral-alpha-3);
+  display: flex;
+  height: 30px;
+
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+
+  justify-content: center !important;
+  align-items: center;
+  padding: 0 4px 0 0;
+
+}
+
+.hover {
+  color: var(--neutral-alpha-12) !important;
+  cursor: pointer;
+}
+
+.trigger.hover button {
+  color: var(--neutral-alpha-12) !important;
+}
+
+.separator {
+  height: 24px;
+  border-right: 1px solid rgba(221, 234, 248, 0.08);
+  margin-right: 4px;
+
+  &.hasLeftColor {
+    opacity: 0;
+  }
+}
+
+.iconButton {
+  width: 20px !important;
+}
+
+.iconButton.hover {
+  color: var(--neutral-alpha-12) !important;
+}
+
+.content {
+  border-radius: 8px;
+  border: 1px solid var(--neutral-alpha-3);
+  background: var(--panel-solid);
+  box-shadow: 0px 12px 32px -16px rgba(0, 0, 0, 0.30), 0px 12px 60px 0px rgba(0, 0, 0, 0.15);
+
+  display: flex;
+  width: fit-content;
+  padding: 12px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.chevron {
+  color: var(--neutral-alpha-11);
+}

package/src/components/DropdownButton/DropdownButton.stories.jsx

@@ -0,0 +1,267 @@
+import { Text } from '@radix-ui/themes'
+import { DropdownButton } from './DropdownButton'
+import { MetronomeIcon } from '../../icons/MetronomeIcon'
+import { useState, useEffect } from 'react'
+import { Flex } from '@radix-ui/themes'
+import { Stop2Icon } from '../../icons/Stop2Icon'
+import { RecordIcon } from '../../icons/RecordIcon'
+
+export default {
+  title: 'Components/DropdownButton',
+  component: DropdownButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Usage
+
+The DropdownButton is a component that combines a trigger button with a dropdown chevron.
+
+### Basic usage
+\`\`\`jsx
+import { DropdownButton } from '@moises.ai/design-system'
+
+const MyComponent = () => (
+  <DropdownButton trigger={<Text>Click me</Text>}>
+    <Text>Content</Text>
+  </DropdownButton>
+)
+\`\`\`
+
+### With custom trigger action
+\`\`\`jsx
+import { DropdownButton } from '@moises.ai/design-system'
+
+const MyComponent = () => (
+  <DropdownButton 
+    trigger={<Text>Save</Text>}
+    onTriggerClick={() => console.log('Saving...')}
+  >
+    <Text>More options</Text>
+  </DropdownButton>
+)
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    trigger: {
+      description:
+        'The trigger content - can be text, icon, or a combination of both',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    showSeparator: {
+      description: 'Whether to show the separator between trigger and chevron',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    onTriggerClick: {
+      description: 'Custom function to execute when trigger is clicked',
+      table: {
+        type: { summary: 'function' },
+      },
+    },
+    open: {
+      description: 'Controls whether the dropdown is open (controlled state)',
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onOpenChange: {
+      description: 'Callback function called when the open state changes',
+      table: {
+        type: { summary: 'function' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    className: {
+      description: 'Additional CSS class name for styling',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    leftColor: {
+      description: 'The color of the left section of the button',
+      control: { type: 'color' },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    trigger: <Text>Menu</Text>,
+  },
+  render: (args) => (
+    <DropdownButton {...args}>
+      <Text>Content</Text>
+    </DropdownButton>
+  ),
+}
+
+export const WithIcon = {
+  args: {
+    trigger: <MetronomeIcon width={16} height={16} />,
+  },
+  render: (args) => (
+    <DropdownButton {...args}>
+      <Text size="1">Content</Text>
+    </DropdownButton>
+  ),
+}
+
+export const WithoutSeparator = {
+  args: {
+    showSeparator: false,
+    trigger: <Text>120 bpm 4/4</Text>,
+  },
+  render: (args) => (
+    <DropdownButton {...args}>
+      <Text size="1">Content</Text>
+    </DropdownButton>
+  ),
+}
+
+export const WithCustomAction = {
+  args: {
+    trigger: <Text>Am</Text>,
+    onTriggerClick: () => {
+      console.log('Saving file...')
+      alert('File saved!')
+    },
+    showSeparator: true,
+  },
+  render: (args) => (
+    <DropdownButton {...args}>
+      <Text size="1">Save as...</Text>
+      <Text size="1">Export...</Text>
+      <Text size="1">Print...</Text>
+    </DropdownButton>
+  ),
+}
+
+export const WithCustomActionAndIcon = {
+  args: {
+    trigger: <MetronomeIcon width={16} height={16} />,
+    onTriggerClick: () => {
+      console.log('Navigating home...')
+      alert('Navigating to home!')
+    },
+  },
+  render: (args) => (
+    <DropdownButton {...args}>
+      <Text size="1">Recent</Text>
+      <Text size="1">Favorites</Text>
+      <Text size="1">Settings</Text>
+    </DropdownButton>
+  ),
+}
+
+export const ControlledOpen = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+      <Flex direction="column" gap="4" align="center">
+        <Flex gap="2">
+          <button onClick={() => setIsOpen(true)}>Open Dropdown</button>
+          <button onClick={() => setIsOpen(false)}>Close Dropdown</button>
+          <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
+        </Flex>
+
+        <div style={{ position: 'relative', height: '200px' }}>
+          <DropdownButton
+            open={isOpen}
+            onOpenChange={setIsOpen}
+            trigger={<Text>Controlled Menu</Text>}
+          >
+            <Text size="1">Option 1</Text>
+            <Text size="1">Option 2</Text>
+            <Text size="1">Option 3</Text>
+          </DropdownButton>
+        </div>
+
+        <div>
+          Status: <strong>{isOpen ? 'Open' : 'Closed'}</strong>
+        </div>
+      </Flex>
+    )
+  },
+}
+
+export const WithLeftColor = {
+  args: {
+    trigger: <Stop2Icon width={14} height={14} />,
+    leftColor: 'rgba(254, 10, 59, 0.27)',
+  },
+  render: (args) => (
+    <DropdownButton {...args}>
+      <Text size="1">Content</Text>
+    </DropdownButton>
+  ),
+}
+
+export const RecordingExample = {
+  render: () => {
+    const [isRecording, setIsRecording] = useState(false)
+    const [leftColor, setLeftColor] = useState(null)
+
+    useEffect(() => {
+      let timeout
+      if (isRecording) {
+        timeout = setTimeout(() => {
+          setIsRecording(false)
+          setLeftColor(null)
+        }, 30000)
+      }
+      return () => {
+        if (timeout) clearTimeout(timeout)
+      }
+    }, [isRecording])
+
+    const handleTriggerClick = () => {
+      if (!isRecording) {
+        setIsRecording(true)
+        setLeftColor('rgba(254, 10, 59, 0.27)')
+      }
+    }
+
+    return (
+      <Flex direction="column" gap="4" align="center">
+        <DropdownButton
+          trigger={
+            isRecording ? (
+              <Stop2Icon width={14} height={14} />
+            ) : (
+              <RecordIcon width={16} height={16} />
+            )
+          }
+          leftColor={leftColor}
+          onTriggerClick={handleTriggerClick}
+        >
+          <Text size="1">Recording options</Text>
+          <Text size="1">Settings</Text>
+          <Text size="1">Export</Text>
+        </DropdownButton>
+
+        <Text size="1" color="gray">
+          Status: {isRecording ? 'Recording...' : 'Ready to record'}
+        </Text>
+      </Flex>
+    )
+  },
+}

package/src/components/DropdownMenu/DropdownMenu.jsx

@@ -0,0 +1,102 @@
+import { ScrollArea } from '@radix-ui/themes'
+import classNames from 'classnames'
+import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
+import React, { memo } from 'react'
+import { createRenderItem, styles } from '../../lib/menu'
+
+const renderOption = createRenderItem(DropdownMenuRadix)
+
+export const DropdownMenu = memo(
+  ({
+    trigger,
+    options,
+    className,
+    showActiveTrigger,
+    size = '2',
+    onSelectionChange,
+    disabled = false,
+    maxHeight,
+    closeOnSelect = true,
+    sideOffset = 5,
+    ...props
+  }) => {
+    return (
+      <>
+        {options?.length > 0 && (
+          <DropdownMenuRadix.Root
+            {...props}
+            open={disabled ? false : props.open}
+            onOpenChange={disabled ? undefined : props.onOpenChange}
+          >
+            <DropdownMenuRadix.Trigger
+              asChild
+              className={classNames(styles.menuTrigger, {
+                [styles.showActiveTrigger]: showActiveTrigger,
+              })}
+              disabled={disabled}
+            >
+              {trigger}
+            </DropdownMenuRadix.Trigger>
+            {maxHeight ? (
+              <DropdownMenuRadix.Portal className={styles.menuPortal}>
+                <DropdownMenuRadix.Content
+                  className={classNames(styles.menuContent, className)}
+                  size={size}
+                  side={props.side}
+                  align={props.align}
+                  style={{ height: maxHeight }}
+                  sideOffset={sideOffset}
+                  alignOffset={0}
+                  onCloseAutoFocus={(event) => {
+                    event.preventDefault()
+                  }}
+                  onClick={(event) => event.stopPropagation()}
+                >
+                  <ScrollArea
+                    scrollbars="vertical"
+                    style={{ height: maxHeight }}
+                  >
+                    {options?.map((option) =>
+                      renderOption(
+                        option,
+                        size,
+                        onSelectionChange,
+                        closeOnSelect,
+                      ),
+                    )}
+                  </ScrollArea>
+                </DropdownMenuRadix.Content>
+              </DropdownMenuRadix.Portal>
+            ) : (
+              <DropdownMenuRadix.Portal className={styles.menuPortal}>
+                <DropdownMenuRadix.Content
+                  className={classNames(styles.menuContent, className)}
+                  size={size}
+                  side={props.side}
+                  align={props.align}
+                  sideOffset={sideOffset}
+                  alignOffset={0}
+                  onCloseAutoFocus={(event) => {
+                    event.preventDefault()
+                  }}
+                  onClick={(event) => event.stopPropagation()}
+                >
+                  {options?.map((option) =>
+                    renderOption(
+                      option,
+                      size,
+                      onSelectionChange,
+                      closeOnSelect,
+                    ),
+                  )}
+                </DropdownMenuRadix.Content>
+              </DropdownMenuRadix.Portal>
+            )}
+          </DropdownMenuRadix.Root>
+        )}
+      </>
+    )
+  },
+)
+
+DropdownMenu.displayName = 'DropdownMenu'