@moises.ai/design-system 3.6.2 → 3.6.4

package/package.json

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

package/src/components/SetlistList/SetlistList.jsx

@@ -9,15 +9,55 @@ import {
   PlusIcon,
 } from '../../icons'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
-import { useState, useEffect, useRef, useMemo } from 'react'
+import { Tooltip } from '../Tooltip/Tooltip'
+import { useState, useEffect, useRef, useMemo, Fragment } from 'react'
 import { MoreButton } from '../MoreButton/MoreButton'
 
+const SetlistIconFallback = () => <SetlistIcon width={16} height={16} />
+
+function renderSetlistAvatar(icon) {
+  if (!icon) return <SetlistIconFallback />
+  if (typeof icon === 'string') {
+    return (
+      <Avatar
+        src={icon}
+        fallback={<SetlistIconFallback />}
+        size="3"
+        radius="small"
+      />
+    )
+  }
+  if (Array.isArray(icon)) {
+    if (icon.length === 0) return <SetlistIconFallback />
+    if (icon.length >= 4) {
+      const urls = icon.slice(0, 4)
+      return (
+        <div className={styles.iconGrid}>
+          {urls.map((src, i) => (
+            <div key={i} className={styles.iconGridCell}>
+              <img src={src} alt="" />
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return (
+      <Avatar
+        src={icon[0]}
+        fallback={<SetlistIconFallback />}
+        size="3"
+        radius="small"
+      />
+    )
+  }
+  return icon
+}
+
 export const SetlistItem = ({
   isSelected,
   onClick,
   className,
   style,
-  avatarStyle,
   avatar,
   text,
   subtitle,
@@ -77,14 +117,13 @@ export const SetlistItem = ({
         })}
       >
         {avatar && (
-          <div className={styles.avatarSetlist} style={avatarStyle}>
+          <div className={styles.avatarSetlist}>
             {typeof avatar === 'string' ? (
               <Avatar
                 src={avatar}
                 fallback={<SetlistIcon width={16} height={16} />}
-                // size="3"
+                size="3"
                 radius="small"
-                style={avatarStyle}
               />
             ) : (
               avatar
@@ -151,12 +190,13 @@ export const SetlistList = ({
 }) => {
   const [openSetlistMenuId, setOpenSetlistMenuId] = useState(null)
   const [isHoveredWhenCollapsed, setIsHoveredWhenCollapsed] = useState(false)
-  const [isFullyCollapsed, setIsFullyCollapsed] = useState(false)
+  const [isShrinking, setIsShrinking] = useState(false)
   const hoverTimeoutRef = useRef(null)
-  const collapseCenterTimeoutRef = useRef(null)
+  const shrinkTimeoutRef = useRef(null)
   const hoverRegionRef = useRef(null)
+  const shrinkDuration = 260
   const collapsedItemHeight = 44
-  const collapsedVisibleOffset = 8
+  const collapsedVisibleOffset = 4
   const maxCollapsedItems = 4
   const collapsedNewItemOffset = collapsed && onNewSetlistClick ? 1 : 0
   const showCollapsedStack = collapsed && !isHoveredWhenCollapsed
@@ -170,6 +210,11 @@ export const SetlistList = ({
       clearTimeout(hoverTimeoutRef.current)
       hoverTimeoutRef.current = null
     }
+    if (shrinkTimeoutRef.current) {
+      clearTimeout(shrinkTimeoutRef.current)
+      shrinkTimeoutRef.current = null
+    }
+    setIsShrinking(false)
     setIsHoveredWhenCollapsed(true)
   }
   const handleMouseLeave = () => {
@@ -178,8 +223,13 @@ export const SetlistList = ({
       clearTimeout(hoverTimeoutRef.current)
     }
     hoverTimeoutRef.current = setTimeout(() => {
-      setIsHoveredWhenCollapsed(false)
       hoverTimeoutRef.current = null
+      setIsShrinking(true)
+      shrinkTimeoutRef.current = setTimeout(() => {
+        shrinkTimeoutRef.current = null
+        setIsHoveredWhenCollapsed(false)
+        setIsShrinking(false)
+      }, shrinkDuration)
     }, 180)
   }
 
@@ -198,31 +248,10 @@ export const SetlistList = ({
     }, 0)
   }
 
-  useEffect(() => {
-    if (showCollapsedStack) {
-      collapseCenterTimeoutRef.current = setTimeout(() => {
-        setIsFullyCollapsed(true)
-        collapseCenterTimeoutRef.current = null
-      }, 200)
-    } else {
-      setIsFullyCollapsed(false)
-      if (collapseCenterTimeoutRef.current) {
-        clearTimeout(collapseCenterTimeoutRef.current)
-        collapseCenterTimeoutRef.current = null
-      }
-    }
-    return () => {
-      if (collapseCenterTimeoutRef.current) {
-        clearTimeout(collapseCenterTimeoutRef.current)
-      }
-    }
-  }, [showCollapsedStack])
-
   useEffect(() => {
     return () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current)
-      }
+      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current)
+      if (shrinkTimeoutRef.current) clearTimeout(shrinkTimeoutRef.current)
     }
   }, [])
 
@@ -248,9 +277,7 @@ export const SetlistList = ({
     </div>
   )
 
-  const collapsedStackAvatarSizes = ['38px', '37px', '36px', '35px']
-
-  const getCollapsedStackStyle = (index, setlist) => {
+  const getCollapsedStackStyle = (index) => {
     if (!collapsed) return undefined
     if (!showCollapsedStack) {
       return {
@@ -301,8 +328,8 @@ export const SetlistList = ({
           direction="column"
           className={classNames(styles.setlistsContent, {
             [styles.collapsedStack]: showCollapsedStack,
-            [styles.collapsedStackCentered]: isFullyCollapsed,
             [styles.collapsedMask]: collapsed,
+            [styles.collapsedShrinking]: isShrinking,
           })}
         >
           {onNewSetlistClick &&
@@ -336,24 +363,15 @@ export const SetlistList = ({
             ))}
           {visibleSetlists.map((setlist, index) => {
             const isSelected = selectedSetlistId === setlist.id
-            return (
+            const setlistItem = (
               <SetlistItem
-                key={setlist.id}
                 isSelected={isSelected}
                 onClick={() => onSetlistClick?.(setlist.id)}
                 dropdownMenuOpen={openSetlistMenuId === setlist.id}
                 onDropdownMenuOpenChange={(nextOpen) => {
                   setOpenSetlistMenuId(nextOpen ? setlist.id : null)
                 }}
-                avatar={setlist.icon || <SetlistIcon width={16} height={16} />}
-                avatarStyle={
-                  showCollapsedStack
-                    ? {
-                      width: collapsedStackAvatarSizes[index],
-                      height: collapsedStackAvatarSizes[index],
-                    }
-                    : undefined
-                }
+                avatar={renderSetlistAvatar(setlist.icon)}
                 group={setlist.group}
                 moises={setlist.moises}
                 text={setlist.label}
@@ -365,9 +383,18 @@ export const SetlistList = ({
                   [styles.collapsedStackItem]: showCollapsedStack,
                   [styles.collapsedTransition]: collapsed,
                 })}
-                style={getCollapsedStackStyle(index, setlist)}
+                style={getCollapsedStackStyle(index)}
               />
             )
+            return collapsed && !showCollapsedStack ? (
+              <Tooltip key={setlist.id} content={setlist.label} side="right">
+                <div className={styles.tooltipTriggerWrapper}>
+                  {setlistItem}
+                </div>
+              </Tooltip>
+            ) : (
+              <Fragment key={setlist.id}>{setlistItem}</Fragment>
+            )
           })}
         </Flex>
       </div>

package/src/components/SetlistList/SetlistList.module.css

@@ -1,3 +1,8 @@
+.tooltipTriggerWrapper {
+  display: block;
+  width: 100%;
+}
+
 .newSetlistItem {
     cursor: pointer;
     margin: 0 12px;
@@ -85,6 +90,30 @@
   z-index: 1;
   }
 
+  .iconGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    overflow: hidden;
+    background: var(--neutral-2);
+  }
+
+  .iconGridCell {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .iconGridCell img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   .textNewSetlist {
     max-width: 115px;
     opacity: 1;
@@ -196,9 +225,6 @@
   gap: 0;
 }
 
-.collapsedStackCentered {
-  align-items: center;
-}
 .collapsedStackItem {
   position: relative;
   /* justify-content: flex-start; */
@@ -209,7 +235,13 @@
   overflow: hidden;
   padding-top: 2px;
   display: flex;
-  
+  max-height: 80vh;
+  transition: max-height 260ms ease-in-out;
+}
+
+.collapsedMask.collapsedStack,
+.collapsedMask.collapsedShrinking {
+  max-height: 120px;
 }
 
 /* .collapsedStack.collapsedMask {
@@ -217,7 +249,7 @@
 } */
 
 .collapsedTransition {
-  transition: margin-top 360ms ease-in-out;
+  transition: margin-top 260ms ease-in-out;
 }
 
 .contentInner {

package/src/components/SetlistList/SetlistList.stories.jsx

@@ -1,6 +1,164 @@
 import { useState } from 'react'
 import { SetlistList } from './SetlistList'
-import { MusicNoteIcon } from '../../icons'
+
+const defaultSetlists = [
+  {
+    id: 'b55ae387-6f5e-44e9-af9f-c05e0438db69',
+    label: 'Jam Sessions with Charlie Puth',
+    description:
+      'Submit your cover or remix of "Beat Yourself Up" for a chance to win your share of $100,000* in prizes, including cash, music gear, and an all-expenses-paid NYC trip to meet Charlie backstage at Madison Square Garden.',
+    subtitle: 'By Moises',
+    moises: true,
+    icon: 'https://storage.googleapis.com/moises-stage-api-assets/setlists/jam-sessions-charlie-puth-setlist-title/logo-1770055262172-charlie-puth-cover-132x132-3x-png',
+    group: false,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: '00fc53a1-da6f-4b9c-afc0-64e40892d32a',
+    label: 'track, master and voice',
+    description: '',
+    subtitle: 'By testeqajp265',
+    moises: false,
+    icon: [
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/bf262dfd-8fe5-4e2a-8baa-ca8971690f62/cover.jpeg',
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/62b4b14d-b81f-4ef4-b681-bf6c863f9db8/cover.jpeg',
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/5db13e39-a0ac-4251-a4b5-4edb35f6b4a2/cover.jpeg',
+      'https://d3-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/9315c6df-aa12-4265-bb6d-594f638d8a63/cover.jpeg',
+    ],
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: '15c1b18e-a0b8-439a-9480-78660562173b',
+    label: 'Minha setlist #532',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    icon: [
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/FILEMETADATA_A/8e5ec2e6-61f4-4721-9ed0-c31fda5904ab/cover.jpeg',
+      'https://d2-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/b4112cfb-3f37-4551-bd42-8ce9fcaec2b0/cover.jpeg',
+      'https://d1-stage.moises.ai/v3/download/moises-stage--tasks/operations/FILEMETADATA_A/2e6d2a5f-d9c8-4750-bf9e-12f5d0b43f1d/cover.jpeg',
+    ],
+    group: false,
+    dropdownMenuOptions: [
+      { type: 'item', key: 'edit', label: 'Edit' },
+      { type: 'separator', key: 'separator-edit' },
+      { type: 'item', key: 'delete', label: 'Delete', color: 'red' },
+    ],
+  },
+  {
+    id: '85aabd11-4bfe-4f5e-814a-c450fa3695fd',
+    label: 'My Setlist #4',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    icon: [],
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: 'd234cc21-b271-4f11-af53-73fdc685e83b',
+    label: 'My Setlist #3',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    group: false,
+    dropdownMenuOptions: [
+      { type: 'item', key: 'edit', label: 'Edit' },
+      { type: 'separator', key: 'separator-edit' },
+      { type: 'item', key: 'delete', label: 'Delete', color: 'red' },
+    ],
+  },
+  {
+    id: 'd7fe60bb-261e-4f55-89c3-80cffcb018d1',
+    label: 'playlist de outro user [não editável]',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: '0a3668ac-24f0-4363-a018-5ca9b1d22cfe',
+    label: 'Playlist de outro usuário [editável]',
+    description: '',
+    subtitle: 'By Swanny Kathllen',
+    moises: false,
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: 'df74975a-fbfe-4000-9ce1-d02d998ecd7f',
+    label: 'Guitar Exercises',
+    description:
+      'Improve your chops with these Berklee Online guitar exercises, pulled from actual courses.',
+    subtitle: 'By Berklee Online',
+    moises: true,
+    icon: 'https://storage.googleapis.com/moises-api-assets/setlists/berklee2.png',
+    group: false,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+  {
+    id: '66d16b7e-2dc0-46e9-8706-56b7d4133104',
+    label: 'Moises Collection',
+    description:
+      'Songs written and recorded by the Moises community. For demo purposes only.',
+    subtitle: 'By Moises',
+    moises: true,
+    icon: 'https://storage.googleapis.com/moises-api-assets/moises-collection-cover.png',
+    group: true,
+    dropdownMenuOptions: [
+      {
+        type: 'item',
+        key: 'leave-setlist',
+        label: 'Leave setlist',
+        color: 'red',
+      },
+    ],
+  },
+]
 
 export default {
   title: 'Components/SetlistList',
@@ -14,12 +172,14 @@ export default {
 
 export const Default = {
   render: (args) => {
-    const [selectedSetlistId, setSelectedSetlistId] =
-      useState('piano-exercises')
+    const [selectedSetlistId, setSelectedSetlistId] = useState(
+      defaultSetlists[0].id
+    )
 
     return (
       <SetlistList
         {...args}
+        setlists={defaultSetlists}
         selectedSetlistId={selectedSetlistId}
         onSetlistClick={(id) => {
           setSelectedSetlistId(id)
@@ -32,63 +192,7 @@ export const Default = {
     )
   },
   args: {
-    setlists: [
-      {
-        id: 'piano-exercises',
-        label: 'Piano Exercises',
-        subtitle: 'By Berklee',
-        moises: true,
-        icon: 'https://storage.googleapis.com/moises-api-assets/setlists/jamsession_cory/cover.png',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'bossa-nova',
-        label: 'Bossa Nova Essentials',
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'band-rehearsal',
-        label: 'Band Rehearsal',
-        subtitle: 'By Nickyz dsdasdas',
-        moises: true,
-        group: true,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-      {
-        id: 'gig-dec-21',
-        label: 'Gig Dec 21th',
-        icon: <MusicNoteIcon width={16} height={16} />,
-        dropdownMenuOptions: [
-          {
-            type: 'item',
-            key: 'edit',
-            label: 'Edit',
-            onClick: () => console.log('Edit clicked'),
-          },
-        ],
-      },
-    ],
+    setlists: defaultSetlists,
     collapsed: false,
     isMobile: false,
   },

package/src/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,67 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import styles from './Tooltip.module.css'
+import classNames from 'classnames'
+
+export const Tooltip = ({
+  children,
+  content,
+  shortcut,
+  color = 'gray',
+  delayDuration = 200,
+  skipDelayDuration,
+  disableHoverableContent,
+  ...props
+}) => {
+
+  const {
+    defaultOpen,
+    open,
+    onOpenChange,
+    ...restContentProps
+  } = props
+
+  const providerProps = {
+    delayDuration,
+    skipDelayDuration,
+    disableHoverableContent,
+  }
+
+  const rootProps = {
+    defaultOpen,
+    open,
+    onOpenChange,
+  }
+
+  return (
+    <TooltipPrimitive.Provider {...providerProps}>
+      <TooltipPrimitive.Root {...rootProps}>
+        <TooltipPrimitive.Trigger asChild>
+          {children}
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            className={classNames(
+              styles.TooltipContent,
+              styles[`TooltipContent--${color}`]
+            )}
+            sideOffset={5}
+            {...restContentProps}
+          >
+            <span className={styles.TooltipText}>{content}</span>
+            {shortcut && (
+              <span className={classNames(
+                styles.TooltipShortcut,
+                styles[`TooltipShortcut--${color}`]
+              )}>
+                {shortcut}
+              </span>
+            )}
+            <TooltipPrimitive.Arrow className={styles.TooltipArrow} />
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}
+
+Tooltip.displayName = 'Tooltip'