@moises.ai/design-system 3.4.5 → 3.4.6

package/src/components/Knob/useKnob.js

@@ -0,0 +1,117 @@
+import { useRef, useCallback, useMemo, useState, useEffect } from 'react'
+import { useEventListener } from '../../utils/useEventListener'
+import { getNextStep, findDotByPosition } from './utils'
+
+export const useKnob = ({
+  value,
+  onChange,
+  disabled,
+  dots,
+  defaultDot,
+  clickableDots = false,
+}) => {
+  const containerRef = useRef(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const [startY, setStartY] = useState(0)
+  const lastChangeTimeRef = useRef(0)
+
+  // Initialize value if not provided
+  useEffect(() => {
+    if (value === undefined || value === null) {
+      onChange(defaultDot)
+    }
+  }, [value, onChange, defaultDot])
+
+  // Mouse wheel handler
+  const handleWheel = useCallback(
+    (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      if (disabled) return
+
+      const delta = e.wheelDelta ?? -e.deltaY * 25
+      if (!delta || Math.abs(delta) <= 50) return
+
+      // Debounce to avoid frequent changes
+      const now = Date.now()
+      if (now - lastChangeTimeRef.current < 100) return
+
+      const direction = delta > 0 ? 1 : -1
+      const newDot = getNextStep(value, dots, direction)
+      onChange(newDot)
+      lastChangeTimeRef.current = now
+    },
+    [onChange, value, dots, disabled],
+  )
+
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (disabled) {
+        e.preventDefault()
+        return
+      }
+      e.preventDefault()
+      setIsDragging(true)
+      setStartY(e.clientY)
+    },
+    [disabled],
+  )
+
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging || disabled) return
+
+      const deltaY = startY - e.clientY
+      if (Math.abs(deltaY) <= 20) return
+
+      const direction = deltaY > 0 ? 1 : -1
+      const newDot = getNextStep(value, dots, direction)
+      onChange(newDot)
+      setStartY(e.clientY)
+      lastChangeTimeRef.current = Date.now()
+    },
+    [isDragging, startY, value, onChange, dots, disabled],
+  )
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false)
+  }, [])
+
+  const handleMouseLeave = useCallback(() => {
+    setIsDragging(false)
+  }, [])
+
+  const handleClick = useCallback(
+    (e) => {
+      if (e.detail === 2 && !disabled) {
+        onChange(defaultDot)
+      }
+    },
+    [onChange, defaultDot, disabled],
+  )
+
+  const handleDotClick = useCallback(
+    (dotPosition) => {
+      if (!clickableDots || disabled) return
+      const selectedDot = findDotByPosition(dots, dotPosition)
+      if (selectedDot) {
+        onChange(selectedDot)
+      }
+    },
+    [clickableDots, disabled, onChange, dots],
+  )
+
+  useEventListener('wheel', handleWheel, containerRef)
+  useEventListener('mousedown', handleMouseDown, containerRef)
+  useEventListener('mousemove', handleMouseMove)
+  useEventListener('mouseup', handleMouseUp)
+  useEventListener('mouseleave', handleMouseLeave)
+
+  return {
+    containerRef,
+    isDragging,
+    handleClick,
+    handleDotClick,
+  }
+}

package/src/components/Knob/utils.js

@@ -0,0 +1,117 @@
+import { dotPositions } from './constants'
+
+// Function to calculate the value based on the dot position
+export const getValueFromDotPosition = (dotPosition) => {
+  // Map index from 0 to 7 to value from -1 to 1
+  return (dotPosition / 7) * 2 - 1
+}
+
+// Function to find a dot object by its position
+export const findDotByPosition = (dots, position) => {
+  return dots.find((dot) => dot.position === position)
+}
+
+// Function to find the next step
+export const getNextStep = (currentValue, dots, direction) => {
+  if (dots.length === 0) return currentValue
+
+  // Get current position
+  let currentPosition
+  if (typeof currentValue === 'object' && currentValue !== null) {
+    currentPosition = currentValue.position
+  } else {
+    // For numeric values, find the closest dot position
+    let closestDot = dots[0]
+    let minDistance = Math.abs(
+      getValueFromDotPosition(closestDot.position) - currentValue,
+    )
+
+    for (let i = 1; i < dots.length; i++) {
+      const dot = dots[i]
+      const distance = Math.abs(
+        getValueFromDotPosition(dot.position) - currentValue,
+      )
+      if (distance < minDistance) {
+        minDistance = distance
+        closestDot = dot
+      }
+    }
+    currentPosition = closestDot.position
+  }
+
+  // Find the index of the current position in the dots array
+  let currentIndex = dots.findIndex((dot) => dot.position === currentPosition)
+  if (currentIndex === -1) {
+    // If not found, find the closest
+    currentIndex = 0
+    let minDistance = Math.abs(dots[0].position - currentPosition)
+    for (let i = 1; i < dots.length; i++) {
+      const distance = Math.abs(dots[i].position - currentPosition)
+      if (distance < minDistance) {
+        minDistance = distance
+        currentIndex = i
+      }
+    }
+  }
+
+  // Calculate next index with circular rotation
+  const nextIndex =
+    direction > 0
+      ? (currentIndex + 1) % dots.length
+      : currentIndex === 0
+      ? dots.length - 1
+      : currentIndex - 1
+
+  return dots[nextIndex]
+}
+
+// Function to calculate which dot should be active based on the current value
+export const getActiveDotIndex = (value, dots) => {
+  if (dots.length === 0) return null
+
+  // Find which position corresponds to the current value
+  for (const dot of dots) {
+    const positionValue = getValueFromDotPosition(dot.position)
+    if (Math.abs(positionValue - value) < 0.01) {
+      return dot.position
+    }
+  }
+
+  // If no exact match is found, find the closest position
+  let closestDot = dots[0]
+  let minDistance = Math.abs(
+    getValueFromDotPosition(closestDot.position) - value,
+  )
+
+  for (let i = 1; i < dots.length; i++) {
+    const dot = dots[i]
+    const distance = Math.abs(getValueFromDotPosition(dot.position) - value)
+    if (distance < minDistance) {
+      minDistance = distance
+      closestDot = dot
+    }
+  }
+
+  return closestDot.position
+}
+
+// Function to calculate pointer properties based on the active dot
+export const getPointerProperties = (activeDotIndex, disabled) => {
+  const activePosition = activeDotIndex ?? 0
+  const dotPosition = dotPositions[activePosition]
+
+  // Convert angle from radians to degrees
+  const angleInDegrees = dotPosition
+    ? (dotPosition.angle * 180) / Math.PI
+    : (activePosition / 7) * 360 - 90 // Fallback linear
+
+  return {
+    pointerRotation: angleInDegrees,
+    pointerColor: disabled ? '#43484E' : '#B0B4BA',
+  }
+}
+
+// Function to format the pan value for display
+export const formatPanValue = (value) => {
+  return Math.abs(value) < 0.01 ? 'Pan: 0' : `Pan: ${Math.round(value * 100)}`
+}

package/src/components/ListCards/CardDetails.stories.jsx

@@ -0,0 +1,484 @@
+import React, { useState } from 'react'
+import { ListCards } from './ListCards'
+import { Flex, Avatar, Text } from '@radix-ui/themes'
+import { PlayIcon, PauseIcon } from '@radix-ui/react-icons'
+
+export default {
+  title: 'Components/ListCards/CardDetails',
+  component: ListCards.CardDetails,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## CardDetails Component
+
+The \`CardDetails\` component is the enhanced card variant for the ListCards component. While basic cards provide simple selection functionality, CardDetails offers additional interactive features for rich user experiences.
+
+### Key Features
+
+- **Favorite button** - Allow users to mark favorites with an icon
+- **See details button** - Navigate to detailed views or trigger modals
+- **Clickable avatar** - Add interactive elements like play/pause to the avatar area
+- **Custom avatar content** - Display custom React nodes in the avatar area
+- **Rich formatting** - Support for formatted descriptions with separators
+
+### Usage Examples
+
+#### Basic CardDetails with Favorite Button
+
+\`\`\`jsx
+import { ListCards } from '@moises.ai/design-system'
+
+<ListCards value={selectedId} onSelect={handleSelect}>
+  {items.map(item => (
+    <ListCards.CardDetails 
+      key={item.id} 
+      item={item} 
+      favorite={item.isFavorite}
+      onFavorite={() => handleFavorite(item.id)}
+    />
+  ))}
+</ListCards>
+\`\`\`
+
+#### CardDetails with Clickable Avatar (e.g. for Play/Pause)
+
+\`\`\`jsx
+<ListCards value={selectedId} onSelect={handleSelect}>
+  {items.map(item => (
+    <ListCards.CardDetails 
+      key={item.id} 
+      item={item} 
+      onAvatarClick={() => handlePlay(item.id)}
+      avatarContent={
+        <div>
+          {isPlaying(item.id) ? <PauseIcon /> : <PlayIcon />}
+        </div>
+      }
+    />
+  ))}
+</ListCards>
+\`\`\`
+
+#### Full-featured CardDetails
+
+\`\`\`jsx
+<ListCards.CardDetails 
+  item={item} 
+  favorite={item.isFavorite}
+  onFavorite={() => handleFavorite(item.id)}
+  onSeeDetails={() => handleSeeDetails(item.id)}
+  onAvatarClick={() => handleAvatarClick(item.id)}
+  avatarContent={customAvatarContent}
+/>
+\`\`\`
+
+## Component API
+
+### ListCards.CardDetails Props
+\`\`\`tsx
+{
+  // Base item data (provide either individual props or item object)
+  id?: string;             // Unique identifier
+  name?: string;           // Display name
+  avatar?: string;         // Avatar image URL
+  
+  // Interactive features
+  favorite?: boolean;      // Whether item is favorited (shows/hides favorite icon)
+  onFavorite?: (event: React.MouseEvent) => void;  // Called when favorite button is clicked
+  
+  onSeeDetails?: (event: React.MouseEvent) => void; // Called when see details button is clicked
+  seeDetailsText?: string; // Custom text for the see details button (default: "Details")
+  
+  onAvatarClick?: (event: React.MouseEvent) => void; // Called when avatar area is clicked
+  avatarContent?: React.ReactNode; // Custom content to render in avatar area
+  
+  // Content
+  children?: React.ReactNode; // Custom content for the description area
+}
+\`\`\`
+`,
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+const sampleItems = [
+  {
+    id: '1',
+    name: 'Ana',
+    description: 'Soprano  |  F3 – A#4',
+    avatar:
+      'https://storage.googleapis.com/moises-api-assets/voice/ana-avatar.jpg',
+    isFavorite: true,
+  },
+  {
+    id: '2',
+    name: 'Carrie',
+    description: 'Mezzo-soprano  |  F3 – A#4',
+    avatar:
+      'https://storage.googleapis.com/moises-api-assets/voice/carrie-avatar.jpg',
+    isFavorite: false,
+  },
+  {
+    id: '3',
+    name: 'Chris',
+    description: 'Tenor  |  F3 – A#4',
+    avatar:
+      'https://storage.googleapis.com/moises-api-assets/voice/chris-avatar.jpg',
+    isFavorite: false,
+  },
+]
+
+const CardDetailsExample = ({ title, children }) => (
+  <Flex direction="column" gap="3">
+    <h3>{title}</h3>
+    <Flex
+      direction="column"
+      style={{
+        width: '328px',
+      }}
+    >
+      <ListCards
+        value="1"
+        onSelect={(value) => console.log('Selected:', value)}
+      >
+        {children}
+      </ListCards>
+    </Flex>
+  </Flex>
+)
+
+export const WithFavoriteButton = {
+  render: () => {
+    const [favoriteItems, setFavoriteItems] = useState(['1'])
+
+    const handleFavorite = (id) => {
+      if (favoriteItems.includes(id)) {
+        setFavoriteItems(favoriteItems.filter((item) => item !== id))
+      } else {
+        setFavoriteItems([...favoriteItems, id])
+      }
+    }
+
+    return (
+      <CardDetailsExample title="With Favorite Button">
+        {sampleItems.map((item) => (
+          <ListCards.CardDetails
+            key={item.id}
+            item={item}
+            favorite={favoriteItems.includes(item.id)}
+            onFavorite={() => handleFavorite(item.id)}
+          />
+        ))}
+      </CardDetailsExample>
+    )
+  },
+}
+
+export const WithoutFavoriteButton = {
+  render: () => (
+    <CardDetailsExample title="Without Favorite Button">
+      {sampleItems.map((item) => (
+        <ListCards.CardDetails key={item.id} item={item} />
+      ))}
+    </CardDetailsExample>
+  ),
+}
+
+export const WithSeeDetails = {
+  render: () => (
+    <CardDetailsExample title="With See Details Button">
+      {sampleItems.map((item) => (
+        <ListCards.CardDetails
+          key={item.id}
+          item={item}
+          onSeeDetails={() => console.log('See details clicked for', item.name)}
+          seeDetailsText="View more"
+        />
+      ))}
+    </CardDetailsExample>
+  ),
+}
+
+export const WithFavoriteAndSeeDetails = {
+  render: () => {
+    const [favoriteItems, setFavoriteItems] = useState(['1'])
+
+    const handleFavorite = (id) => {
+      if (favoriteItems.includes(id)) {
+        setFavoriteItems(favoriteItems.filter((item) => item !== id))
+      } else {
+        setFavoriteItems([...favoriteItems, id])
+      }
+    }
+
+    return (
+      <CardDetailsExample title="With Favorite and See Details Buttons">
+        {sampleItems.map((item) => (
+          <ListCards.CardDetails
+            key={item.id}
+            item={item}
+            favorite={favoriteItems.includes(item.id)}
+            onFavorite={() => handleFavorite(item.id)}
+            onSeeDetails={() =>
+              console.log('See details clicked for', item.name)
+            }
+            seeDetailsText="More info"
+          />
+        ))}
+      </CardDetailsExample>
+    )
+  },
+}
+
+export const WithClickableIcon = {
+  render: () => {
+    const [playingItem, setPlayingItem] = useState(null)
+
+    const handleAvatarClick = (id) => {
+      setPlayingItem(playingItem === id ? null : id)
+      console.log('Avatar clicked for:', id)
+    }
+
+    const renderAvatarContent = (item) => {
+      const isPlaying = playingItem === item.id
+
+      return (
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+          <Avatar
+            src={item.avatar}
+            style={{ width: '100%', height: '100%', borderRadius: '4px' }}
+            fallback={item.name.substring(0, 2)}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              backgroundColor: 'rgba(0,0,0,0.5)',
+              borderRadius: '50%',
+              width: '30px',
+              height: '30px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'white',
+            }}
+          >
+            {isPlaying ? <PauseIcon /> : <PlayIcon />}
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <CardDetailsExample title="With Clickable Icon (Avatar)">
+        {sampleItems.map((item) => (
+          <ListCards.CardDetails
+            key={item.id}
+            item={item}
+            onAvatarClick={() => handleAvatarClick(item.id)}
+            avatarContent={renderAvatarContent(item)}
+          />
+        ))}
+      </CardDetailsExample>
+    )
+  },
+}
+
+export const WithoutClickableIcon = {
+  render: () => (
+    <CardDetailsExample title="Without Clickable Icon">
+      {sampleItems.map((item) => (
+        <ListCards.CardDetails
+          key={item.id}
+          item={item}
+          onSeeDetails={() => console.log('See details clicked for', item.name)}
+        />
+      ))}
+    </CardDetailsExample>
+  ),
+}
+
+export const WithCustomChildren = {
+  render: () => (
+    <CardDetailsExample title="With Custom Children as Avatar Content">
+      {sampleItems.map((item) => (
+        <ListCards.CardDetails
+          key={item.id}
+          item={item}
+          onAvatarClick={() => console.log('Avatar clicked for', item.name)}
+          avatarContent={
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                background: 'linear-gradient(45deg, #FF6B6B, #4ECDC4)',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'white',
+                fontSize: '18px',
+                fontWeight: 'bold',
+              }}
+            >
+              {item.name.charAt(0)}
+            </div>
+          }
+        />
+      ))}
+    </CardDetailsExample>
+  ),
+}
+
+export const WithCustomDescription = {
+  render: () => {
+    const [favoriteItems, setFavoriteItems] = useState(['1'])
+
+    const handleFavorite = (id) => {
+      if (favoriteItems.includes(id)) {
+        setFavoriteItems(favoriteItems.filter((item) => item !== id))
+      } else {
+        setFavoriteItems([...favoriteItems, id])
+      }
+    }
+
+    const renderCustomDescription = (item) => {
+      const descriptionParts = item.description.split(' | ')
+
+      return (
+        <>
+          <Text
+            size="1"
+            style={{
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {descriptionParts[0]}
+          </Text>
+          {descriptionParts.slice(1).map((part, index) => (
+            <Flex
+              direction="row"
+              gap="1"
+              key={index + 'flex' + part}
+              style={{ flexShrink: 0 }}
+            >
+              <Text key="separator" size="1" style={{ flexShrink: 0 }}>
+                {' | '}
+              </Text>
+              <Text
+                key={index}
+                size="1"
+                style={{
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                {part}
+              </Text>
+            </Flex>
+          ))}
+        </>
+      )
+    }
+
+    return (
+      <CardDetailsExample title="With Custom Description (using children)">
+        {sampleItems.map((item) => (
+          <ListCards.CardDetails
+            key={item.id}
+            item={item}
+            favorite={favoriteItems.includes(item.id)}
+            onFavorite={() => handleFavorite(item.id)}
+            onSeeDetails={() =>
+              console.log('See details clicked for', item.name)
+            }
+          >
+            {renderCustomDescription(item)}
+          </ListCards.CardDetails>
+        ))}
+      </CardDetailsExample>
+    )
+  },
+}
+
+export const AllConfigurations = {
+  render: () => {
+    const [favoriteItems, setFavoriteItems] = useState(['1'])
+    const [playingItem, setPlayingItem] = useState(null)
+
+    const handleFavorite = (id) => {
+      if (favoriteItems.includes(id)) {
+        setFavoriteItems(favoriteItems.filter((item) => item !== id))
+      } else {
+        setFavoriteItems([...favoriteItems, id])
+      }
+    }
+
+    const handleAvatarClick = (id) => {
+      setPlayingItem(playingItem === id ? null : id)
+    }
+
+    const renderAvatarContent = (item) => {
+      const isPlaying = playingItem === item.id
+
+      return (
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+          <Avatar
+            src={item.avatar}
+            style={{ width: '100%', height: '100%', borderRadius: '4px' }}
+            fallback={item.name.substring(0, 2)}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              backgroundColor: 'rgba(0,0,0,0.5)',
+              borderRadius: '50%',
+              width: '30px',
+              height: '30px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'white',
+            }}
+          >
+            {isPlaying ? <PauseIcon /> : <PlayIcon />}
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <Flex direction="column" gap="6">
+        {sampleItems.map((item) => (
+          <CardDetailsExample
+            key={item.id}
+            title={`${item.name} - Complete Example`}
+          >
+            <ListCards.CardDetails
+              item={item}
+              favorite={favoriteItems.includes(item.id)}
+              onFavorite={() => handleFavorite(item.id)}
+              onSeeDetails={() =>
+                console.log('See details clicked for', item.name)
+              }
+              onAvatarClick={() => handleAvatarClick(item.id)}
+              avatarContent={renderAvatarContent(item)}
+            />
+          </CardDetailsExample>
+        ))}
+      </Flex>
+    )
+  },
+}