@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/MultiSelectCards/MultiSelectCards.stories.jsx

@@ -0,0 +1,439 @@
+import React, { useState } from 'react'
+import {
+  VocalIcon,
+  VocalsIcon,
+  DrumsIcon,
+  IsolateDrumsIcon,
+  ElectricGuitarIcon,
+  AcousticGuitarIcon,
+  BassIcon,
+  PianoIcon,
+  KeysIcon,
+  MusicIcon,
+  StringsIcon,
+  WindIcon,
+  LockIcon,
+} from '../../icons'
+
+import { MultiSelectCards } from './MultiSelectCards'
+import { Flex, Text, Box } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/MultiSelectCards',
+  component: MultiSelectCards,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## MultiSelectCards
+
+A flexible multi-selection card component that allows users to select multiple items from a grid of cards. Each card can display an icon, name, and support various states like disabled, locked, and selected.
+
+### Features
+
+- **Multi-selection**: Select and deselect multiple cards
+- **Visual feedback**: Clear indication of selected, disabled, and locked states
+- **Responsive grid**: Automatically adjusts to container width
+- **Scrollable**: Handles overflow with vertical scrolling
+- **Accessible**: Proper keyboard navigation and screen reader support
+
+### Usage
+
+\`\`\`jsx
+import { MultiSelectCards } from '@moises.ai/design-system'
+
+const [selectedItems, setSelectedItems] = useState([])
+
+const handleSelect = (item) => {
+  setSelectedItems(prev => {
+    if (prev.includes(item.value)) {
+      return prev.filter(value => value !== item.value)
+    } else {
+      return [...prev, item.value]
+    }
+  })
+}
+
+<MultiSelectCards
+  items={items}
+  value={selectedItems}
+  onSelect={handleSelect}
+/>
+\`\`\`
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`items\` | \`Item[]\` | \`[]\` | Array of items to display |
+| \`value\` | \`string[]\` | \`[]\` | Array of selected item values |
+| \`onSelect\` | \`(item: Item) => void\` | \`undefined\` | Callback when item is selected/deselected |
+| \`disabled\` | \`boolean\` | \`false\` | Disable all cards |
+| \`className\` | \`string\` | \`undefined\` | Additional CSS class |
+
+### Item Structure
+
+\`\`\`typescript
+interface Item {
+  value: string           // Unique identifier
+  name: string           // Display name
+  icon?: React.ReactNode // Optional icon
+  disabled?: boolean     // Disable this specific item
+  isLocked?: boolean     // Show lock icon and prevent selection
+}
+\`\`\`
+      `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: false,
+      description: 'Array of items to display in the grid',
+    },
+    value: {
+      control: false,
+      description: 'Array of selected item values',
+    },
+    onSelect: {
+      action: 'selected',
+      description: 'Callback when an item is selected or deselected',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable all cards in the component',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class for styling',
+    },
+  },
+}
+
+// Sample data for stories
+const musicItems = [
+  { value: 'vocal', name: 'Vocal', icon: <VocalIcon width={16} height={16} /> },
+  {
+    value: 'vocals',
+    name: 'Vocals',
+    icon: <VocalsIcon width={16} height={16} />,
+  },
+  { value: 'drums', name: 'Drums', icon: <DrumsIcon width={16} height={16} /> },
+  {
+    value: 'drums-kit',
+    name: 'Drums Kit',
+    icon: <IsolateDrumsIcon width={16} height={16} />,
+  },
+  {
+    value: 'guitars',
+    name: 'Guitars',
+    icon: <ElectricGuitarIcon width={16} height={16} />,
+  },
+  {
+    value: 'acoustic-electric',
+    name: 'Acoustic & Electric Guitar',
+    icon: <AcousticGuitarIcon width={16} height={16} />,
+  },
+  {
+    value: 'rhythm-lead',
+    name: 'Rhythm & Lead Guitar',
+    icon: <ElectricGuitarIcon width={16} height={16} />,
+  },
+  { value: 'bass', name: 'Bass', icon: <BassIcon width={16} height={16} /> },
+  { value: 'piano', name: 'Piano', icon: <PianoIcon width={16} height={16} /> },
+  { value: 'keys', name: 'Keys', icon: <KeysIcon width={16} height={16} /> },
+  { value: 'music', name: 'Music', icon: <MusicIcon width={16} height={16} /> },
+  {
+    value: 'strings',
+    name: 'Strings',
+    icon: <StringsIcon width={16} height={16} />,
+  },
+  { value: 'wind', name: 'Wind', icon: <WindIcon width={16} height={16} /> },
+]
+
+const itemsWithDisabled = [
+  {
+    value: 'vocal',
+    name: 'Vocal',
+    icon: <VocalIcon width={16} height={16} />,
+    disabled: true,
+  },
+  {
+    value: 'vocals',
+    name: 'Vocals',
+    icon: <VocalsIcon width={16} height={16} />,
+  },
+  {
+    value: 'drums',
+    name: 'Drums',
+    icon: <DrumsIcon width={16} height={16} />,
+    disabled: true,
+  },
+  {
+    value: 'drums-kit',
+    name: 'Drums Kit',
+    icon: <IsolateDrumsIcon width={16} height={16} />,
+  },
+  {
+    value: 'guitars',
+    name: 'Guitars',
+    icon: <ElectricGuitarIcon width={16} height={16} />,
+    disabled: true,
+  },
+  {
+    value: 'acoustic-electric',
+    name: 'Acoustic & Electric Guitar',
+    icon: <AcousticGuitarIcon width={16} height={16} />,
+  },
+  {
+    value: 'rhythm-lead',
+    name: 'Rhythm & Lead Guitar',
+    icon: <ElectricGuitarIcon width={16} height={16} />,
+  },
+  {
+    value: 'bass',
+    name: 'Bass',
+    icon: <BassIcon width={16} height={16} />,
+    disabled: true,
+  },
+  { value: 'piano', name: 'Piano', icon: <PianoIcon width={16} height={16} /> },
+  { value: 'keys', name: 'Keys', icon: <KeysIcon width={16} height={16} /> },
+]
+
+const itemsWithLocked = [
+  {
+    value: 'vocal',
+    name: 'Vocal',
+    icon: <VocalIcon width={16} height={16} />,
+    isLocked: true,
+  },
+  {
+    value: 'vocals',
+    name: 'Vocals',
+    icon: <VocalsIcon width={16} height={16} />,
+  },
+  {
+    value: 'drums',
+    name: 'Drums',
+    icon: <DrumsIcon width={16} height={16} />,
+    isLocked: true,
+  },
+  {
+    value: 'drums-kit',
+    name: 'Drums Kit',
+    icon: <IsolateDrumsIcon width={16} height={16} />,
+  },
+  {
+    value: 'guitars',
+    name: 'Guitars',
+    icon: <ElectricGuitarIcon width={16} height={16} />,
+  },
+  {
+    value: 'acoustic-electric',
+    name: 'Acoustic & Electric Guitar',
+    icon: <AcousticGuitarIcon width={16} height={16} />,
+    isLocked: true,
+  },
+]
+
+const itemsWithMixedStates = [
+  {
+    value: 'vocal',
+    name: 'Vocal',
+    icon: <VocalIcon width={16} height={16} />,
+    disabled: true,
+  },
+  {
+    value: 'vocals',
+    name: 'Vocals',
+    icon: <VocalsIcon width={16} height={16} />,
+    isLocked: true,
+  },
+  { value: 'drums', name: 'Drums', icon: <DrumsIcon width={16} height={16} /> },
+  {
+    value: 'drums-kit',
+    name: 'Drums Kit',
+    icon: <IsolateDrumsIcon width={16} height={16} />,
+    disabled: true,
+  },
+  {
+    value: 'guitars',
+    name: 'Guitars',
+    icon: <ElectricGuitarIcon width={16} height={16} />,
+    isLocked: true,
+  },
+  {
+    value: 'acoustic-electric',
+    name: 'Acoustic & Electric Guitar',
+    icon: <AcousticGuitarIcon width={16} height={16} />,
+  },
+]
+
+// Wrapper component for interactive stories
+const InteractiveWrapper = ({
+  items,
+  initialSelected = [],
+  disabled = false,
+  title,
+}) => {
+  const [selectedItems, setSelectedItems] = useState(initialSelected)
+
+  const handleSelect = (item) => {
+    if (item.isLocked) {
+      console.log('Locked item clicked:', item.value)
+      alert(`🔒 Item bloqueado: ${item.name}`)
+      return
+    }
+
+    setSelectedItems((prevSelected) => {
+      if (prevSelected.includes(item.value)) {
+        return prevSelected.filter((value) => value !== item.value)
+      } else {
+        return [...prevSelected, item.value]
+      }
+    })
+  }
+
+  return (
+    <Box width="100%">
+      {title && (
+        <Text size="2" color="gray" mb="2" style={{ display: 'block' }}>
+          {title}
+        </Text>
+      )}
+      <Flex height="300px" width="360px">
+        <MultiSelectCards
+          items={items}
+          value={selectedItems}
+          onSelect={handleSelect}
+          disabled={disabled}
+        />
+      </Flex>
+      {selectedItems.length > 0 && (
+        <Text size="1" color="gray" mt="2" style={{ display: 'block' }}>
+          Selected: {selectedItems.join(', ')}
+        </Text>
+      )}
+    </Box>
+  )
+}
+
+// Story exports
+export const Default = () => (
+  <InteractiveWrapper
+    items={musicItems}
+    title="Basic multi-selection with all items enabled"
+  />
+)
+
+export const WithPreselectedItems = () => (
+  <InteractiveWrapper
+    items={musicItems}
+    initialSelected={['vocal', 'drums', 'bass']}
+    title="Some items are pre-selected"
+  />
+)
+
+export const WithDisabledCards = () => (
+  <InteractiveWrapper
+    items={itemsWithDisabled}
+    title="Some cards are disabled (grayed out and non-interactive)"
+  />
+)
+
+export const WithLockedCards = () => (
+  <InteractiveWrapper
+    items={itemsWithLocked}
+    title="Some cards are locked (show lock icon and trigger alert on click)"
+  />
+)
+
+export const WithMixedStates = () => (
+  <InteractiveWrapper
+    items={itemsWithMixedStates}
+    title="Mix of normal, disabled, and locked cards"
+  />
+)
+
+export const SelectedWithDisabledCards = () => (
+  <InteractiveWrapper
+    items={itemsWithDisabled}
+    initialSelected={['vocal', 'drums', 'bass', 'vocals', 'guitars']}
+    title="Pre-selected items including some disabled ones"
+  />
+)
+
+export const ComponentDisabled = () => (
+  <InteractiveWrapper
+    items={musicItems}
+    initialSelected={['vocal', 'drums']}
+    disabled={true}
+    title="Entire component is disabled"
+  />
+)
+
+export const EmptyState = () => (
+  <InteractiveWrapper items={[]} title="No items to display" />
+)
+
+export const SingleItem = () => (
+  <InteractiveWrapper items={[musicItems[0]]} title="Single item selection" />
+)
+
+export const ManyItems = () => {
+  // Create a larger dataset for testing scrolling
+  const manyItems = Array.from({ length: 20 }, (_, index) => ({
+    value: `item-${index}`,
+    name: `Item ${index + 1}`,
+    icon: <MusicIcon width={16} height={16} />,
+    ...(index % 5 === 0 && { disabled: true }),
+    ...(index % 7 === 0 && { isLocked: true }),
+  }))
+
+  return (
+    <InteractiveWrapper
+      items={manyItems}
+      title="Many items to test scrolling behavior"
+    />
+  )
+}
+
+// Template for testing specific props
+export const Template = (args) => {
+  const [selectedItems, setSelectedItems] = useState([])
+
+  const handleSelect = (item) => {
+    setSelectedItems((prevSelected) => {
+      if (prevSelected.includes(item.value)) {
+        return prevSelected.filter((value) => value !== item.value)
+      } else {
+        return [...prevSelected, item.value]
+      }
+    })
+  }
+
+  return (
+    <Flex height="300px" width="360px">
+      <MultiSelectCards
+        {...args}
+        value={selectedItems}
+        onSelect={handleSelect}
+      />
+    </Flex>
+  )
+}
+
+Template.args = {
+  items: musicItems,
+  disabled: false,
+}
+
+Template.parameters = {
+  docs: {
+    description: {
+      story: 'Template story for testing specific props and configurations.',
+    },
+  },
+}

package/src/components/PanControl/PanControl.jsx

@@ -0,0 +1,227 @@
+import styles from './PanControl.module.css'
+import classNames from 'classnames'
+import { useRef, useCallback, useMemo, useState, useEffect } from 'react'
+import { useEventListener } from '../../utils/useEventListener'
+import { Tooltip } from 'radix-ui'
+
+const KNOB_CENTER_X = 10
+const KNOB_CENTER_Y = 10
+const KNOB_RADIUS = 9.5
+const START_ANGLE = -Math.PI / 2
+const STEP_SIZE = 0.01
+
+const clampNorm = (v) => Math.max(-1, Math.min(1, v))
+const denormalize = (normalized, minValue, maxValue) =>
+  ((normalized + 1) / 2) * (maxValue - minValue) + minValue
+
+export const PanControl = ({
+  className,
+  value,
+  onChange,
+  disabled,
+  minValue = -0.65,
+  maxValue = 0.65,
+}) => {
+  const containerRef = useRef(null)
+  const [open, setOpen] = useState(false)
+  const timeoutRef = useRef()
+  const [isDragging, setIsDragging] = useState(false)
+  const styleRef = useRef(null)
+
+  const startYRef = useRef(0)
+  const pendingNormRef = useRef(value)
+  const rafRef = useRef(0)
+
+  const showTooltip = useCallback(() => {
+    clearTimeout(timeoutRef.current)
+    setOpen(true)
+  }, [])
+
+  const hideTooltip = useCallback(() => {
+    if (isDragging) return
+    timeoutRef.current = setTimeout(() => setOpen(false), 300)
+  }, [isDragging])
+
+  useEffect(() => {
+    if (isDragging) {
+      const style = document.createElement('style')
+      style.textContent = '* { cursor: ns-resize !important; }'
+      document.head.appendChild(style)
+      styleRef.current = style
+      showTooltip()
+    } else {
+      if (styleRef.current) {
+        document.head.removeChild(styleRef.current)
+        styleRef.current = null
+      }
+      hideTooltip()
+    }
+    return () => {
+      if (styleRef.current) {
+        document.head.removeChild(styleRef.current)
+        styleRef.current = null
+      }
+      hideTooltip()
+      if (rafRef.current) cancelAnimationFrame(rafRef.current)
+    }
+  }, [isDragging, showTooltip, hideTooltip])
+
+  const scheduleEmit = useCallback(
+    (nextNormalized) => {
+      pendingNormRef.current = clampNorm(nextNormalized)
+      if (rafRef.current) return
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = 0
+        onChange(pendingNormRef.current)
+      })
+    },
+    [onChange],
+  )
+
+  const handleWheel = useCallback(
+    (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const delta = e.wheelDelta ?? -e.deltaY * 25
+      if (!delta) return
+      const next = value + (delta > 0 ? STEP_SIZE : -STEP_SIZE)
+      scheduleEmit(next)
+    },
+    [value, scheduleEmit],
+  )
+  useEventListener('wheel', handleWheel, containerRef)
+
+  const onPointerDown = useCallback(
+    (e) => {
+      if (disabled) return
+      e.preventDefault()
+      const target = e.currentTarget
+      target.setPointerCapture?.(e.pointerId)
+      setIsDragging(true)
+      startYRef.current = e.clientY
+    },
+    [disabled],
+  )
+
+  const onPointerMove = useCallback(
+    (e) => {
+      if (!isDragging) return
+      const deltaY = startYRef.current - e.clientY
+      const next = value + deltaY * STEP_SIZE
+      scheduleEmit(next)
+      startYRef.current = e.clientY
+    },
+    [isDragging, value, scheduleEmit],
+  )
+
+  const onPointerUp = useCallback((e) => {
+    e.currentTarget?.releasePointerCapture?.(e.pointerId)
+    setIsDragging(false)
+  }, [])
+
+  const handleClick = useCallback(
+    (e) => {
+      if (e.detail === 2) scheduleEmit(0)
+    },
+    [scheduleEmit],
+  )
+
+  const { arcPath, pointerRotation, arcColor, pointerColor } = useMemo(() => {
+    const actual = denormalize(value, minValue, maxValue)
+    const displayNorm = clampNorm(actual)
+    const endAngle = START_ANGLE + displayNorm * Math.PI
+    const x1 = KNOB_CENTER_X + KNOB_RADIUS * Math.cos(START_ANGLE)
+    const y1 = KNOB_CENTER_Y + KNOB_RADIUS * Math.sin(START_ANGLE)
+    const x2 = KNOB_CENTER_X + KNOB_RADIUS * Math.cos(endAngle)
+    const y2 = KNOB_CENTER_Y + KNOB_RADIUS * Math.sin(endAngle)
+    const largeArc = 0
+    const sweep = displayNorm > 0 ? 1 : 0
+
+    return {
+      arcPath: `M ${x1.toFixed(3)} ${y1.toFixed(3)}
+                A ${KNOB_RADIUS} ${KNOB_RADIUS} 0 ${largeArc} ${sweep}
+                ${x2.toFixed(3)} ${y2.toFixed(3)}`,
+      pointerRotation: displayNorm * 180,
+      arcColor: disabled ? '#5A6169' : '#19E4F1',
+      pointerColor: disabled ? '#43484E' : '#B0B4BA',
+    }
+  }, [value, disabled, minValue, maxValue])
+
+  const panValueText = useMemo(() => {
+    const actual = denormalize(value, minValue, maxValue)
+    const pct = Math.round(actual * 100)
+    return `Pan: ${Math.abs(pct) < 1 ? 0 : pct}`
+  }, [value, minValue, maxValue])
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(styles.content, className)}
+      data-no-drag="true"
+      onClick={handleClick}
+      style={{ cursor: disabled ? 'default' : 'ns-resize' }}
+    >
+      <Tooltip.Provider delayDuration={200}>
+        <Tooltip.Root open={open}>
+          <Tooltip.Trigger asChild>
+            <div
+              className={classNames(
+                styles.pan,
+                isDragging && styles.active,
+                disabled && styles.disabled,
+              )}
+              onPointerDown={onPointerDown}
+              onPointerMove={onPointerMove}
+              onPointerUp={onPointerUp}
+              onPointerCancel={onPointerUp}
+            >
+              <svg width={20} height={20} viewBox="0 0 20 20" fill="none">
+                <circle cx={KNOB_CENTER_X} cy={KNOB_CENTER_Y} r={10} />
+                <circle
+                  cx={KNOB_CENTER_X}
+                  cy={KNOB_CENTER_Y}
+                  r={KNOB_RADIUS}
+                  stroke="#D3EDF8"
+                  strokeOpacity={0.113725}
+                />
+                {value !== 0 && (
+                  <path
+                    d={arcPath}
+                    stroke={arcColor}
+                    strokeLinecap="round"
+                    strokeWidth={1}
+                    fill="none"
+                  />
+                )}
+                <g
+                  transform={`rotate(${pointerRotation} ${KNOB_CENTER_X} ${KNOB_CENTER_Y})`}
+                >
+                  <path
+                    d="M10 0.5 L10 6"
+                    stroke={pointerColor}
+                    strokeLinecap="round"
+                    strokeWidth={1}
+                  />
+                </g>
+              </svg>
+            </div>
+          </Tooltip.Trigger>
+
+          <Tooltip.Content
+            className={styles.tooltipContent}
+            side="bottom"
+            align="center"
+            sideOffset={10}
+          >
+            <>
+              {panValueText}
+              <Tooltip.Arrow className={styles.tooltipArrow} />
+            </>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    </div>
+  )
+}
+
+PanControl.displayName = 'PanControl'