@moises.ai/design-system 4.15.0 → 4.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.15.0",
+  "version": "4.15.2",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

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

@@ -21,7 +21,8 @@ The \`CardDetails\` component is the enhanced card variant for the ListCards com
 - **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
+- **Auto description** - Renders \`item.description\` (or the \`description\` prop) by default
+- **Rich formatting** - Override the description by passing \`children\` for separators, ellipsis, etc.
 
 ### Usage Examples
 
@@ -83,6 +84,7 @@ import { ListCards } from '@moises.ai/design-system'
   id?: string;             // Unique identifier
   name?: string;           // Display name
   avatar?: string;         // Avatar image URL
+  description?: string;    // Description text (rendered when no children are provided)
   
   // Interactive features
   favorite?: boolean;      // Whether item is favorited (shows/hides favorite icon)
@@ -95,7 +97,7 @@ import { ListCards } from '@moises.ai/design-system'
   avatarContent?: React.ReactNode; // Custom content to render in avatar area
   
   // Content
-  children?: React.ReactNode; // Custom content for the description area
+  children?: React.ReactNode; // Custom content for the description area (overrides description)
 }
 \`\`\`
 `,
@@ -151,6 +153,96 @@ const CardDetailsExample = ({ title, children }) => (
   </Flex>
 )
 
+export const WithDescriptionFromItem = {
+  render: () => (
+    <CardDetailsExample title="Description rendered automatically from item.description">
+      {sampleItems.map((item) => (
+        <ListCards.CardDetails key={item.id} item={item} />
+      ))}
+    </CardDetailsExample>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When no `children` are provided, `CardDetails` automatically renders `item.description` (or the `description` prop) with text-overflow ellipsis. Pass `children` to fully customize the description area.',
+      },
+    },
+  },
+}
+
+const longDescriptionItems = [
+  {
+    id: '1',
+    name: 'Vintage Tube Amp',
+    description:
+      'Warm tube saturation, expressive dynamics, and gritty lead breakup',
+    avatar:
+      'https://storage.googleapis.com/moises-api-assets/voice/ana-avatar.jpg',
+  },
+  {
+    id: '2',
+    name: 'Modern Lead',
+    description:
+      'Warm tube saturation, expressive dynamics, and gritty lead breakup ... and a lot more text to make it really long',
+    avatar:
+      'https://storage.googleapis.com/moises-api-assets/voice/carrie-avatar.jpg',
+  },
+  {
+    id: '3',
+    name: 'Crunch',
+    description: 'Short one',
+    avatar:
+      'https://storage.googleapis.com/moises-api-assets/voice/chris-avatar.jpg',
+  },
+]
+
+export const WithLongDescription = {
+  render: () => (
+    <CardDetailsExample title="Long description (truncated with ellipsis)">
+      {longDescriptionItems.map((item) => (
+        <ListCards.CardDetails
+          key={item.id}
+          item={item}
+        // onSeeDetails={() => console.log('See details clicked for', item.name)}
+        />
+      ))}
+    </CardDetailsExample>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Long descriptions are clipped to a single line with `text-overflow: ellipsis` so the card height stays consistent (68px).',
+      },
+    },
+  },
+}
+
+export const WithDescriptionProp = {
+  render: () => (
+    <CardDetailsExample title="Description rendered from the description prop">
+      {sampleItems.map((item) => (
+        <ListCards.CardDetails
+          key={item.id}
+          id={item.id}
+          name={item.name}
+          avatar={item.avatar}
+          description={item.description}
+        />
+      ))}
+    </CardDetailsExample>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'You can also pass `description` directly as a prop instead of using the `item` object.',
+      },
+    },
+  },
+}
+
 export const WithFavoriteButton = {
   render: () => {
     const [favoriteItems, setFavoriteItems] = useState(['1'])

package/src/components/ListCards/ListCards.jsx

@@ -131,6 +131,7 @@ const CardDetails = ({
   className,
   avatar,
   name,
+  description,
   id,
   item,
   favorite,
@@ -150,6 +151,7 @@ const CardDetails = ({
   const itemId = item?.id || id
   const itemName = item?.name || name
   const itemAvatar = item?.avatar || avatar
+  const itemDescription = item?.description || description
 
   // Extract the avatar URL from the pattern data URL
   const avatarUrl =
@@ -176,7 +178,7 @@ const CardDetails = ({
         style={{
           '--color-surface': 'transparent',
           width: '100%',
-          height: '68px',
+          minHeight: '68px',
           ...style,
         }}
         {...props}
@@ -201,23 +203,38 @@ const CardDetails = ({
             ) : (
               <Avatar src={avatarUrl} className={styles.listCardsAvatar} />
             ))}
-          <Flex direction="column" justify="center">
+          <Flex
+            direction="column"
+            justify="center"
+            style={{ flex: 1, minWidth: 0 }}
+          >
             <Text as="div" size="2" className={styles.listCardsItemText}>
               {itemName}
             </Text>
-            <Flex
-              direction="row"
-              gap="1"
-              align="center"
-              style={{
-                flexWrap: 'nowrap',
-                overflow: 'hidden',
-                width: '100%',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {children}
-            </Flex>
+            {children ? (
+              <Flex
+                direction="row"
+                gap="1"
+                align="center"
+                style={{
+                  flexWrap: 'nowrap',
+                  overflow: 'hidden',
+                  width: '100%',
+                  whiteSpace: 'nowrap',
+                  minWidth: 0,
+                }}
+              >
+                {children}
+              </Flex>
+            ) : (
+              <Text
+                as="div"
+                size="1"
+                className={styles.listCardsItemDescriptionWrappable}
+              >
+                {itemDescription}
+              </Text>
+            )}
           </Flex>
         </Flex>
       </RadioCards.Item>
@@ -230,10 +247,10 @@ const CardDetails = ({
             onClick={
               onAvatarClick
                 ? (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    onAvatarClick(e)
-                  }
+                  e.stopPropagation()
+                  e.preventDefault()
+                  onAvatarClick(e)
+                }
                 : undefined
             }
           >

package/src/components/ListCards/ListCards.module.css

@@ -150,6 +150,7 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-right: 12px;
 }
 
 .listCardsDetailDescription {

package/src/components/PreviewCard/PreviewCard.jsx

@@ -0,0 +1,256 @@
+import { useState, useCallback, useEffect, useRef } from 'react'
+import WavesurferPlayer from '@wavesurfer/react'
+import classNames from 'classnames'
+import { PlayIcon, PauseIcon } from '../../icons'
+import styles from './PreviewCard.module.css'
+
+export function PreviewCard({
+  audio,
+  selected = false,
+  loading = false,
+  wavegroup,
+  onSelect,
+  onPlayStateChange,
+  actions,
+  autoRepeat = false,
+  waveColor = 'rgba(90, 97, 105, 1)',
+  progressColor = 'rgba(255, 255, 255, 1)',
+  className,
+}) {
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [isReady, setIsReady] = useState(false)
+  const [isSafari, setIsSafari] = useState(false)
+
+  const waveSurferRef = useRef(null)
+
+  const showSkeleton = loading || !isReady
+
+  useEffect(() => {
+    if (typeof navigator !== 'undefined') {
+      setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))
+    }
+  }, [])
+
+  const pause = useCallback(() => {
+    waveSurferRef.current?.pause()
+  }, [])
+
+  const play = useCallback(() => {
+    if (!waveSurferRef.current) return
+
+    if (
+      wavegroup?.state?.active &&
+      wavegroup.state.active !== waveSurferRef.current
+    ) {
+      wavegroup.state.active.pause()
+    }
+
+    if (!isSafari) {
+      waveSurferRef.current.setOptions({ progressColor })
+    }
+    waveSurferRef.current.play()
+  }, [isSafari, progressColor, wavegroup])
+
+  useEffect(() => {
+    if (waveSurferRef.current && audio) {
+      waveSurferRef.current.load(audio)
+      setIsReady(false)
+    }
+  }, [audio])
+
+  const onReady = useCallback((ws) => {
+    waveSurferRef.current = ws
+    setIsReady(true)
+    setIsPlaying(false)
+  }, [])
+
+  const onPlay = useCallback(
+    (ws) => {
+      setIsPlaying(true)
+      onPlayStateChange?.(true)
+
+      if (wavegroup) {
+        if (wavegroup.state.active && wavegroup.state.active !== ws) {
+          const currentTime = wavegroup.state.active.getCurrentTime()
+          wavegroup.state.active.pause()
+          ws.setTime(currentTime)
+        }
+
+        wavegroup.setter((prev) => ({
+          ...prev,
+          isPlaying: true,
+          lastPlayed: ws,
+          active: ws,
+        }))
+      }
+    },
+    [onPlayStateChange, wavegroup],
+  )
+
+  const onPause = useCallback(() => {
+    setIsPlaying(false)
+    onPlayStateChange?.(false)
+
+    if (wavegroup) {
+      wavegroup.setter((prev) => ({
+        ...prev,
+        isPlaying: false,
+      }))
+    }
+  }, [onPlayStateChange, wavegroup])
+
+  const onSeeking = useCallback(
+    (ws) => {
+      if (!wavegroup) return
+
+      wavegroup.setter((prev) => ({
+        ...prev,
+        active: ws,
+      }))
+    },
+    [wavegroup],
+  )
+
+  const onFinish = useCallback(() => {
+    if (autoRepeat) {
+      waveSurferRef.current?.play()
+    } else {
+      setIsPlaying(false)
+      onPlayStateChange?.(false)
+
+      if (wavegroup) {
+        wavegroup.setter((prev) => ({
+          ...prev,
+          isPlaying: false,
+          active: null,
+        }))
+      }
+    }
+  }, [autoRepeat, onPlayStateChange, wavegroup])
+
+  const handleTogglePlay = useCallback(() => {
+    if (showSkeleton || !waveSurferRef.current) return
+
+    if (waveSurferRef.current.isPlaying()) {
+      pause()
+      return
+    }
+
+    if (
+      wavegroup?.state?.active &&
+      wavegroup.state.active !== waveSurferRef.current
+    ) {
+      wavegroup.state.active.pause()
+
+      wavegroup.setter((prev) => ({
+        ...prev,
+        isPlaying: false,
+        active: null,
+      }))
+    }
+
+    if (
+      wavegroup?.state?.active &&
+      wavegroup.state.active !== waveSurferRef.current &&
+      wavegroup.state.active.getCurrentTime
+    ) {
+      waveSurferRef.current.setTime(wavegroup.state.active.getCurrentTime())
+    }
+
+    play()
+  }, [showSkeleton, pause, play, wavegroup])
+
+  const handleCardClick = useCallback(() => {
+    if (showSkeleton) return
+    onSelect?.()
+  }, [showSkeleton, onSelect])
+
+  return (
+    <div
+      className={classNames(
+        styles.previewCard,
+        selected && styles.selected,
+        isPlaying && styles.playing,
+        showSkeleton && styles.skeleton,
+        className,
+      )}
+      onClick={handleCardClick}
+      role="button"
+      tabIndex={showSkeleton ? -1 : 0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          handleCardClick()
+        }
+      }}
+    >
+      <button
+        type="button"
+        className={classNames(styles.leftButton, isPlaying && styles.isPlaying)}
+        onClick={(e) => {
+          e.stopPropagation()
+          handleTogglePlay()
+        }}
+        disabled={showSkeleton}
+        aria-label={isPlaying ? 'Pause' : 'Play'}
+      >
+        <span className={styles.equalizer} aria-hidden="true">
+          <span className={styles.equalizerBar} />
+          <span className={styles.equalizerBar} />
+          <span className={styles.equalizerBar} />
+          <span className={styles.equalizerBar} />
+          <span className={styles.equalizerBar} />
+        </span>
+        <PauseIcon
+          width={18}
+          height={18}
+          className={styles.pauseOnHover}
+          aria-hidden="true"
+        />
+        <PlayIcon
+          width={18}
+          height={18}
+          className={styles.playIcon}
+          aria-hidden="true"
+        />
+      </button>
+
+      <div
+        className={styles.waveformContainer}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {audio && (
+          <WavesurferPlayer
+            url={audio}
+            waveColor={waveColor}
+            progressColor={progressColor}
+            normalize
+            barWidth={2}
+            barHeight={6}
+            cursorWidth={0}
+            height={40}
+            onReady={onReady}
+            onSeeking={onSeeking}
+            onPlay={onPlay}
+            onPause={onPause}
+            onFinish={onFinish}
+            backend={isSafari ? 'WebAudio' : 'MediaElement'}
+          />
+        )}
+        {showSkeleton && (
+          <span className={styles.skeletonWaveform} aria-hidden="true">
+            <span className={styles.skeletonMask} />
+          </span>
+        )}
+      </div>
+
+      {actions && (
+        <div className={styles.actions} onClick={(e) => e.stopPropagation()}>
+          {actions}
+        </div>
+      )}
+    </div>
+  )
+}
+
+PreviewCard.displayName = 'PreviewCard'