@moises.ai/design-system 4.18.1 → 4.18.3

package/src/components/PanControl/PanControl.jsx

@@ -22,6 +22,9 @@ export const PanControl = ({
   disabled,
   minValue = -0.65,
   maxValue = 0.65,
+  showTooltip = true,
+  tooltipDelayDuration = 0,
+  tooltipCloseDelay = 500,
 }) => {
   const containerRef = useRef(null)
   const [isDragging, setIsDragging] = useState(false)
@@ -30,17 +33,31 @@ export const PanControl = ({
   const startYRef = useRef(0)
   const pendingNormRef = useRef(value)
   const rafRef = useRef(0)
+  const openTimeoutRef = useRef(null)
+  const closeTimeoutRef = useRef(null)
+  const tooltipTimingRef = useRef({
+    tooltipDelayDuration,
+    tooltipCloseDelay,
+  })
+  tooltipTimingRef.current = { tooltipDelayDuration, tooltipCloseDelay }
 
   const [knobFocused, setKnobFocused] = useState(false)
-  const [hoverOpen, setHoverOpen] = useState(false)
+  const [isHovering, setIsHovering] = useState(false)
 
   useEffect(() => {
     if (disabled) {
-      setHoverOpen(false)
+      setIsHovering(false)
       setKnobFocused(false)
     }
   }, [disabled])
 
+  useEffect(() => {
+    return () => {
+      if (openTimeoutRef.current != null) clearTimeout(openTimeoutRef.current)
+      if (closeTimeoutRef.current != null) clearTimeout(closeTimeoutRef.current)
+    }
+  }, [])
+
   useEffect(() => {
     if (isDragging) {
       const style = document.createElement('style')
@@ -187,8 +204,107 @@ export const PanControl = ({
   const displayNorm = clampNorm(denormalize(value, minValue, maxValue))
   const ariaPanPct = Math.round(displayNorm * 100)
 
+  const clearOpenTimeout = () => {
+    if (openTimeoutRef.current != null) {
+      clearTimeout(openTimeoutRef.current)
+      openTimeoutRef.current = null
+    }
+  }
+
+  const clearCloseTimeout = () => {
+    if (closeTimeoutRef.current != null) {
+      clearTimeout(closeTimeoutRef.current)
+      closeTimeoutRef.current = null
+    }
+  }
+
+  const handlePointerEnter = () => {
+    if (disabled) return
+    clearCloseTimeout()
+    clearOpenTimeout()
+    const { tooltipDelayDuration: delay } = tooltipTimingRef.current
+    if (delay <= 0) {
+      setIsHovering(true)
+      return
+    }
+    openTimeoutRef.current = setTimeout(() => {
+      openTimeoutRef.current = null
+      setIsHovering(true)
+    }, delay)
+  }
+
+  const handlePointerLeave = () => {
+    clearOpenTimeout()
+    const { tooltipCloseDelay: delay } = tooltipTimingRef.current
+    if (delay <= 0) {
+      setIsHovering(false)
+      return
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      closeTimeoutRef.current = null
+      setIsHovering(false)
+    }, delay)
+  }
+
   const tooltipOpen =
-    !disabled && (isDragging || knobFocused || hoverOpen)
+    !disabled && (isDragging || knobFocused || isHovering)
+
+  const pan = (
+    <div
+      role="slider"
+      tabIndex={disabled ? -1 : 0}
+      aria-label="Pan"
+      aria-valuemin={-100}
+      aria-valuemax={100}
+      aria-valuenow={ariaPanPct}
+      aria-valuetext={panValueText}
+      aria-disabled={disabled}
+      className={classNames(
+        styles.pan,
+        isDragging && styles.active,
+        disabled && styles.disabled,
+      )}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      onFocus={() => setKnobFocused(true)}
+      onBlur={() => setKnobFocused(false)}
+      onKeyDown={handleKnobKeyDown}
+    >
+      <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>
+  )
 
   return (
     <div
@@ -198,70 +314,20 @@ export const PanControl = ({
       onClick={handleClick}
       style={{ cursor: disabled ? 'default' : 'ns-resize' }}
     >
-      <Tooltip
-        content={panValueText}
-        open={tooltipOpen}
-        onOpenChange={(next) => {
-          if (!disabled) setHoverOpen(next)
-        }}
-        side="bottom"
-        align="center"
-        sideOffset={3}
-        delayDuration={0}
-      >
-        <div
-          role="slider"
-          tabIndex={disabled ? -1 : 0}
-          aria-label="Pan"
-          aria-valuemin={-100}
-          aria-valuemax={100}
-          aria-valuenow={ariaPanPct}
-          aria-valuetext={panValueText}
-          aria-disabled={disabled}
-          className={classNames(
-            styles.pan,
-            isDragging && styles.active,
-            disabled && styles.disabled,
-          )}
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={onPointerUp}
-          onPointerCancel={onPointerUp}
-          onFocus={() => setKnobFocused(true)}
-          onBlur={() => setKnobFocused(false)}
-          onKeyDown={handleKnobKeyDown}
+      {showTooltip ? (
+        <Tooltip
+          content={panValueText}
+          open={tooltipOpen}
+          delayDuration={tooltipDelayDuration}
+          side="bottom"
+          align="center"
+          sideOffset={3}
         >
-          <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>
+          {pan}
+        </Tooltip>
+      ) : (
+        pan
+      )}
     </div>
   )
 }

package/src/components/PanControl/PanControl.stories.jsx

@@ -1,6 +1,6 @@
 import { PanControl } from './PanControl'
 import { useState } from 'react'
-import { Flex } from '@radix-ui/themes'
+import { Flex, Text } from '@radix-ui/themes'
 
 export default {
   title: 'Components/PanControl',
@@ -20,13 +20,24 @@ export default {
           '    <PanControl\n' +
           '      value={panValue}\n' +
           '      onChange={setPanValue}\n' +
+          '      tooltipDelayDuration={0}\n' +
+          '      tooltipCloseDelay={500}\n' +
           '    />\n' +
           '  )\n' +
           '}\n' +
-          '```',
+          '```\n\n' +
+          '## Tooltip\n\n' +
+          'Shows the current pan value on hover/focus/drag. Use `tooltipDelayDuration` and `tooltipCloseDelay` to control open/close timing, or `showTooltip={false}` to hide it.',
       },
     },
   },
+  args: {
+    showTooltip: true,
+    tooltipDelayDuration: 0,
+    tooltipCloseDelay: 500,
+    minValue: -0.65,
+    maxValue: 0.65,
+  },
   argTypes: {
     value: {
       description:
@@ -75,15 +86,35 @@ export default {
         defaultValue: { summary: 0.65 },
       },
     },
+    showTooltip: {
+      control: 'boolean',
+      description: 'Shows the pan value tooltip on hover/focus/drag',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    tooltipDelayDuration: {
+      control: 'number',
+      description: 'Ms before the tooltip opens on hover',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 0 },
+      },
+    },
+    tooltipCloseDelay: {
+      control: 'number',
+      description: 'Ms the tooltip stays open after the pointer leaves',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 500 },
+      },
+    },
   },
   tags: ['autodocs'],
 }
 
 export const Default = {
-  args: {
-    minValue: -0.65,
-    maxValue: 0.65,
-  },
   render: (args) => {
     const [value, setValue] = useState(0)
     return <PanControl {...args} value={value} onChange={setValue} />
@@ -98,3 +129,41 @@ export const Disabled = {
     )
   },
 }
+
+export const WithoutTooltip = {
+  args: {
+    showTooltip: false,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(0)
+    return <PanControl {...args} value={value} onChange={setValue} />
+  },
+}
+
+export const TooltipTiming = {
+  name: 'Tooltip timing',
+  args: {
+    tooltipDelayDuration: 200,
+    tooltipCloseDelay: 500,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(0)
+    return (
+      <Flex direction="column" align="center" gap="2">
+        <PanControl {...args} value={value} onChange={setValue} />
+        <Text size="1" color="gray">
+          Opens after {args.tooltipDelayDuration}ms · closes{' '}
+          {args.tooltipCloseDelay}ms after leave
+        </Text>
+      </Flex>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Adjust `tooltipDelayDuration` (open) and `tooltipCloseDelay` (close grace) via controls.',
+      },
+    },
+  },
+}

package/src/components/ProjectsList/ProjectTrackVoice/ProjectTrackVoice.jsx

@@ -1,16 +1,17 @@
-import { Flex, Text } from '@radix-ui/themes'
-import { useCallback, useContext, useMemo, useState } from 'react'
+import { Flex, Text, Spinner } from '@radix-ui/themes'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { ArrowLeftIcon } from '../../../icons'
 import { ProjectsListContext } from '../context'
 import { NumberPicker } from '../../NumberPicker/NumberPicker'
 import { UserIcon } from '../../../icons'
+import { Button } from '../../Button/Button'
 import styles from './ProjectTrackVoice.module.css'
 
 const ProjectTrackVoice = ({
   ...props
 }) => {
   const { onClickTrack } = useContext(ProjectsListContext)
-  const { projectId, id, title, cover, transfers, audioUrl, onChangeTransfer } = props
+  const { projectId, id, title, cover, transfers, audioUrl, onChangeTransfer, loading: _loading } = props
 
   const hasTransfers = useMemo(() => transfers && transfers.length > 0, [transfers])
 
@@ -18,6 +19,12 @@ const ProjectTrackVoice = ({
   const min = useMemo(() => hasTransfers ? Math.min(...transfers?.map((transfer) => parseInt(transfer.pitchShift))) : 0, [transfers])
   const max = useMemo(() => hasTransfers ? Math.max(...transfers?.map((transfer) => parseInt(transfer.pitchShift))) : 0, [transfers])
 
+  const [loading, setLoading] = useState(_loading)
+
+  useEffect(() => {
+    setLoading(_loading)
+  }, [_loading])
+
   const getAudioUrl = useCallback((pitchShift) => {
     return hasTransfers ? transfers?.find((transfer) => parseInt(transfer.pitchShift) === pitchShift)?.audioUrl : audioUrl
   }, [hasTransfers, transfers, audioUrl])
@@ -33,20 +40,32 @@ const ProjectTrackVoice = ({
 
   const handleClickTrack = useCallback((e) => {
     e.stopPropagation()
+
+    if (loading) {
+      return
+    }
+
+    const processTrack = (!hasTransfers && !audioUrl)
+
+    if (processTrack) {
+      setLoading(true)
+    }
+
     onClickTrack?.({
       ...props,
       id,
       title,
-      audioUrl: getAudioUrl(pitchShiftSelected),
+      audioUrl: hasTransfers || audioUrl ? getAudioUrl(pitchShiftSelected) : null,
+      processTrack,
     })
-  }, [onClickTrack, props, id, title, getAudioUrl, pitchShiftSelected])
+  }, [onClickTrack, props, id, title, getAudioUrl, pitchShiftSelected, hasTransfers, loading, audioUrl])
 
   return (
     <Flex direction="column" gap="1">
       <Flex
         direction="row"
         gap="3"
-        className={styles.itemTrack}
+        className={`${styles.itemTrack} ${(!hasTransfers && !audioUrl) || loading ? styles.disabledHover : ''}`}
         onClick={handleClickTrack}
       >
         <div className={styles.cover}>
@@ -73,12 +92,24 @@ const ProjectTrackVoice = ({
           </Text>
         </Flex>
 
-        <NumberPicker
-          min={min}
-          max={max}
-          value={pitchShiftSelected}
-          onChange={handleChangeTransfer}
-        />
+        {!hasTransfers && !audioUrl && !loading ? (
+          <Flex align="center" justify="center" p="2">
+            <Button variant="soft" color="gray" size="1">
+              Process
+            </Button>
+          </Flex>
+        ) : loading ? (
+          <Flex align="center" justify="center" p="2">
+            <Spinner />
+          </Flex>
+        ) : (
+          <NumberPicker
+            min={min}
+            max={max}
+            value={pitchShiftSelected}
+            onChange={handleChangeTransfer}
+          />
+        )}
       </Flex>
     </Flex>
   )

package/src/components/ProjectsList/ProjectTrackVoice/ProjectTrackVoice.module.css

@@ -1,13 +1,17 @@
 .itemTrack {
-  cursor: pointer;
   border-radius: var(--radius-3);
   overflow: hidden;
+  cursor: default;
+
+  &:not(.disabledHover) {
+    cursor: pointer;
+  }
 
   .iconArrowLeft {
     display: none;
   }
 
-  &:hover {
+  &:not(.disabledHover):hover {
     background: var(--neutral-alpha-2);
     box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
 

package/src/components/ProjectsList/ProjectsList.stories.jsx

@@ -250,3 +250,67 @@ export const WithTrackVoice = {
     )
   },
 }
+
+export const WithTrackVoiceStates = {
+  args: {
+    projects: [{
+      "id": "3842c898-9e0c-41e8-8927-7d9f1111111167c50bc6",
+      "title": "vocals - Billie Bossa Nova",
+      "artist": "Billie Bossa Nova",
+      "cover": null,
+      "duration": 30.72,
+      "type": "voice",
+      "tracks": [
+        {
+          "id": "q8pzli0h38ptcx21q09h2al-0",
+          "title": "Joyce",
+          "type": "voice",
+          "loading": true,
+        },
+        {
+          "id": "q8pzli0h38ptcxq09h2al-0",
+          "title": "Ana",
+          "type": "voice",
+          "cover": "https://picsum.photos/101/101",
+          "transfers": [],
+        }
+      ]
+    }],
+    onProjectClick: (project, opened) => {
+      console.log('project', project)
+      console.log('opened', opened)
+    },
+    onClickTrack: (track) => {
+      console.log('track', track)
+    },
+    onInsertAllTracks: (tracks) => {
+      console.log('insert-all-tracks', tracks)
+    },
+    onChangeTransfer: (projectId, track) => {
+      console.log('change-transfer', projectId, track)
+    },
+  },
+  render: (args) => {
+    return (
+      <Flex width="300px">
+        <ProjectsList
+          projects={args.projects}
+          onClickTrack={args.onClickTrack}
+          onInsertAllTracks={args.onInsertAllTracks}
+          onProjectClick={args.onProjectClick}
+        >
+          {({ projectId, tracks }) =>
+            tracks.map((track) => (
+              <ProjectsList.TrackVoice
+                projectId={projectId}
+                key={track.id}
+                {...track}
+                onChangeTransfer={args.onChangeTransfer}
+              />
+            ))
+          }
+        </ProjectsList>
+      </Flex>
+    )
+  },
+}

package/src/components/SliderLibrary/SliderLibrary.jsx

@@ -15,6 +15,10 @@ import styles from './SliderLibrary.module.css'
  * @property {boolean} [disabled=false] - Disables interaction and dims the slider.
  * @property {boolean} [showTooltip=true] - Renders the DS Tooltip below the thumb on
  * hover/focus/drag with the current value.
+ * @property {number} [tooltipDelayDuration=0] - Time in ms from hover enter until the
+ * tooltip opens. Drag and keyboard focus open immediately.
+ * @property {number} [tooltipCloseDelay=500] - Time in ms the tooltip stays open after
+ * the pointer leaves the thumb (or re-enters within this window).
  * @property {(value: number) => React.ReactNode} [formatValue] - Formats the value for
  * display in the tooltip. Defaults to the raw number.
  * @property {(value: number) => void} [onThumbDoubleClick] - Fires when the thumb is
@@ -58,6 +62,8 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
     step = 1,
     disabled = false,
     showTooltip = true,
+    tooltipDelayDuration = 0,
+    tooltipCloseDelay = 500,
     formatValue,
     onThumbDoubleClick,
     className,
@@ -68,6 +74,8 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
   const ariaLabel = props['aria-label']
   const internalRef = useRef(null)
   const lastInteractionRef = useRef(null)
+  const openTimeoutRef = useRef(null)
+  const closeTimeoutRef = useRef(null)
   const [keyboardFocus, setKeyboardFocus] = useState(false)
   const [isHovering, setIsHovering] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
@@ -75,8 +83,21 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
   const stateRef = useRef({ value, min, max, step, disabled, onValueChange })
   stateRef.current = { value, min, max, step, disabled, onValueChange }
 
+  const tooltipTimingRef = useRef({
+    tooltipDelayDuration,
+    tooltipCloseDelay,
+  })
+  tooltipTimingRef.current = { tooltipDelayDuration, tooltipCloseDelay }
+
   const wheelRef = useRef({ accum: 0, axis: null, lastTime: 0 })
 
+  useEffect(() => {
+    return () => {
+      if (openTimeoutRef.current != null) clearTimeout(openTimeoutRef.current)
+      if (closeTimeoutRef.current != null) clearTimeout(closeTimeoutRef.current)
+    }
+  }, [])
+
   useEffect(() => {
     const onKey = () => {
       lastInteractionRef.current = 'keyboard'
@@ -181,13 +202,50 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
     if (!disabled) setIsDragging(true)
   }
 
+  const clearOpenTimeout = () => {
+    if (openTimeoutRef.current != null) {
+      clearTimeout(openTimeoutRef.current)
+      openTimeoutRef.current = null
+    }
+  }
+
+  const clearCloseTimeout = () => {
+    if (closeTimeoutRef.current != null) {
+      clearTimeout(closeTimeoutRef.current)
+      closeTimeoutRef.current = null
+    }
+  }
+
   const handleThumbFocus = () => {
     if (lastInteractionRef.current === 'keyboard') setKeyboardFocus(true)
   }
   const handleThumbBlur = () => setKeyboardFocus(false)
   const handleThumbPointerDown = () => setKeyboardFocus(false)
-  const handleThumbPointerEnter = () => setIsHovering(true)
-  const handleThumbPointerLeave = () => setIsHovering(false)
+  const handleThumbPointerEnter = () => {
+    clearCloseTimeout()
+    clearOpenTimeout()
+    const { tooltipDelayDuration: delay } = tooltipTimingRef.current
+    if (delay <= 0) {
+      setIsHovering(true)
+      return
+    }
+    openTimeoutRef.current = setTimeout(() => {
+      openTimeoutRef.current = null
+      setIsHovering(true)
+    }, delay)
+  }
+  const handleThumbPointerLeave = () => {
+    clearOpenTimeout()
+    const { tooltipCloseDelay: delay } = tooltipTimingRef.current
+    if (delay <= 0) {
+      setIsHovering(false)
+      return
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      closeTimeoutRef.current = null
+      setIsHovering(false)
+    }, delay)
+  }
   const handleThumbDoubleClick = () => {
     if (!disabled) onThumbDoubleClick?.(value)
   }
@@ -230,7 +288,7 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
         <Tooltip
           content={displayValue}
           open={tooltipOpen}
-          delayDuration={0}
+          delayDuration={tooltipDelayDuration}
           side="bottom"
           sideOffset={8}
           updatePositionStrategy="always"