@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/SetlistList/SetlistList.jsx

@@ -0,0 +1,338 @@
+import { Flex, Text, Avatar, ScrollArea } from '@radix-ui/themes'
+import styles from './SetlistList.module.css'
+import classNames from 'classnames'
+import {
+  DotsVerticalIcon,
+  SetlistIcon,
+  UserGroupIcon,
+  GlobeIcon,
+  PlusIcon,
+} from '../../icons'
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
+import { useState, useEffect, useRef, useMemo } from 'react'
+
+export const SetlistItem = ({
+  isSelected,
+  onClick,
+  className,
+  style,
+  avatar,
+  text,
+  subtitle,
+  dropdownMenuOptions,
+  dropdownMenuOpen,
+  onDropdownMenuOpenChange,
+  group = false,
+  moises = false,
+  collapsed = false,
+  isMobile = false,
+}) => {
+  const [isHovering, setIsHovering] = useState(false)
+
+  const handleMouseEnter = () => {
+    setIsHovering(true)
+  }
+
+  const handleMouseLeave = () => {
+    setIsHovering(false)
+  }
+
+  const handleDropdownTriggerPointerDown = (e) => {
+    e.stopPropagation()
+  }
+
+  const handleDropdownTriggerClick = (e) => {
+    e.stopPropagation()
+  }
+
+  const constructIconToRender = useMemo(() => {
+    if (moises) {
+      return (
+        <Flex gap="1" align="center">
+          <GlobeIcon
+            width={12}
+            height={12}
+            className={styles.textSubtitleIcon}
+          />
+          <Text
+            size="1"
+            weight="regular"
+            className={styles.textSubtitle}
+            truncate
+          >
+            {subtitle}
+          </Text>
+        </Flex>
+      )
+    }
+    if (group) {
+      return (
+        <Flex gap="1" align="center">
+          <UserGroupIcon
+            width={12}
+            height={12}
+            className={styles.textSubtitleIcon}
+          />
+          <Text
+            size="1"
+            weight="regular"
+            className={styles.textSubtitle}
+            truncate
+          >
+            {subtitle}
+          </Text>
+        </Flex>
+      )
+    }
+  })
+
+  return (
+    <Flex
+      gap="3"
+      align="center"
+      onClick={onClick}
+      className={classNames(styles.newSetlistItem, className, {
+        [styles.navItemSelected]: isSelected,
+        [styles.collapsed]: collapsed,
+        [styles.menuOpen]: dropdownMenuOpen,
+      })}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={style}
+    >
+      <Flex
+        gap="3"
+        align="center"
+        className={classNames(styles.contentInner, {
+          [styles.collapsedInner]: collapsed,
+        })}
+      >
+        {avatar && (
+          <div className={styles.avatarSetlist}>
+            {typeof avatar === 'string' ? (
+              <Avatar
+                src={avatar}
+                fallback={<SetlistIcon width={16} height={16} />}
+                size="3"
+                radius="small"
+              />
+            ) : (
+              avatar
+            )}
+          </div>
+        )}
+        <Flex
+          direction="column"
+          className={classNames(styles.textWrapper, {
+            [styles.textWrapperHidden]: collapsed,
+          })}
+        >
+          {text && (
+            <Text
+              size="2"
+              weight="regular"
+              className={styles.textNewSetlist}
+              truncate
+            >
+              {text}
+            </Text>
+          )}
+          {constructIconToRender}
+        </Flex>
+      </Flex>
+      {dropdownMenuOptions &&
+        !collapsed &&
+        (isHovering || dropdownMenuOpen) && (
+          <DropdownMenu
+            open={dropdownMenuOpen}
+            onOpenChange={onDropdownMenuOpenChange}
+            trigger={
+              <Flex
+                className={classNames(styles.dropdownTriggerWrapper, {
+                  [styles.dropdownTriggerWrapperMobile]: isMobile,
+                })}
+                onPointerDown={handleDropdownTriggerPointerDown}
+                onClick={handleDropdownTriggerClick}
+              >
+                <DotsVerticalIcon
+                  className={styles.dropdownMenuTrigger}
+                  width={16}
+                  height={16}
+                />
+              </Flex>
+            }
+            options={dropdownMenuOptions}
+          />
+        )}
+    </Flex>
+  )
+}
+
+export const SetlistList = ({
+  setlists = [],
+  selectedSetlistId,
+  onSetlistClick,
+  onNewSetlistClick,
+  collapsed = false,
+  isMobile = false,
+}) => {
+  const [openSetlistMenuId, setOpenSetlistMenuId] = useState(null)
+  const [isHoveredWhenCollapsed, setIsHoveredWhenCollapsed] = useState(false)
+  const hoverTimeoutRef = useRef(null)
+  const collapsedItemHeight = 44
+  const collapsedVisibleOffset = 4
+  const collapsedNewItemOffset = collapsed && onNewSetlistClick ? 1 : 0
+  const showCollapsedStack = collapsed && !isHoveredWhenCollapsed
+
+  const handleMouseEnter = () => {
+    if (!collapsed) return
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current)
+      hoverTimeoutRef.current = null
+    }
+    setIsHoveredWhenCollapsed(true)
+  }
+  const handleMouseLeave = () => {
+    if (!collapsed) return
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current)
+    }
+    hoverTimeoutRef.current = setTimeout(() => {
+      setIsHoveredWhenCollapsed(false)
+      hoverTimeoutRef.current = null
+    }, 180)
+  }
+
+  useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const renderNewSetlistAvatar = () => (
+    <div className={styles.iconSwap}>
+      <SetlistIcon
+        width={16}
+        height={16}
+        className={classNames(styles.iconSwapLayer, {
+          [styles.iconVisible]: showCollapsedStack,
+          [styles.iconHidden]: !showCollapsedStack,
+        })}
+      />
+      <PlusIcon
+        width={16}
+        height={16}
+        className={classNames(
+          styles.iconSwapLayer,
+          styles.plusIcon,
+          showCollapsedStack ? styles.iconHidden : styles.iconVisible,
+        )}
+      />
+    </div>
+  )
+
+  const getCollapsedStackStyle = (index) => {
+    if (!collapsed) return undefined
+    if (!showCollapsedStack) {
+      return {
+        position: 'relative',
+        marginTop: 0,
+        zIndex: 'auto',
+      }
+    }
+    const stackPosition = index + collapsedNewItemOffset
+    const zIndex = setlists.length + collapsedNewItemOffset - stackPosition
+    return {
+      position: 'relative',
+      marginTop:
+        stackPosition === 0
+          ? 0
+          : -(collapsedItemHeight - collapsedVisibleOffset),
+      zIndex,
+    }
+  }
+
+  return (
+    <ScrollArea
+      type="scroll"
+      scrollbars="vertical"
+      style={{ flex: 1, minHeight: 0 }}
+      className={classNames({
+        [styles.setlistsScrollArea]: collapsed,
+      })}
+    >
+      <div
+        className={styles.hoverRegion}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <Flex
+          direction="column"
+          className={classNames(styles.setlistsContent, {
+            [styles.collapsedStack]: showCollapsedStack,
+            [styles.collapsedMask]: collapsed,
+          })}
+        >
+          {onNewSetlistClick &&
+            (showCollapsedStack ? (
+              <SetlistItem
+                isSelected={false}
+                onClick={onNewSetlistClick}
+                avatar={renderNewSetlistAvatar()}
+                className={classNames(
+                  styles.collapsedStackItem,
+                  styles.collapsedTransition,
+                )}
+                collapsed={collapsed}
+                style={{
+                  position: 'relative',
+                  marginTop: 0,
+                  zIndex: setlists.length + 1,
+                }}
+              />
+            ) : (
+              <SetlistItem
+                isSelected={false}
+                onClick={onNewSetlistClick}
+                avatar={renderNewSetlistAvatar()}
+                text="New Setlist"
+                className={classNames(styles.newSetlistItemButton, {
+                  [styles.collapsedTransition]: collapsed,
+                })}
+                collapsed={collapsed}
+              />
+            ))}
+          {setlists.map((setlist, index) => {
+            const isSelected = selectedSetlistId === setlist.id
+            return (
+              <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} />}
+                group={setlist.group}
+                moises={setlist.moises}
+                text={setlist.label}
+                subtitle={setlist.subtitle}
+                dropdownMenuOptions={setlist.dropdownMenuOptions}
+                collapsed={collapsed}
+                isMobile={isMobile}
+                className={classNames({
+                  [styles.collapsedStackItem]: showCollapsedStack,
+                  [styles.collapsedTransition]: collapsed,
+                })}
+                style={getCollapsedStackStyle(index)}
+              />
+            )
+          })}
+        </Flex>
+      </div>
+    </ScrollArea>
+  )
+}

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

@@ -0,0 +1,246 @@
+.newSetlistItem {
+    cursor: pointer;
+    margin: 0 12px;
+    padding: 2px;
+    border-radius: 6px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: calc(100% - 24px);
+  
+    &:hover,
+    &.menuOpen {
+      background: var(--neutral-alpha-2);
+      .avatarSetlist {
+        background: var(--neutral-alpha-3);
+      }
+      .dropdownMenuTrigger {
+        color: var(--neutral-alpha-7);
+      }
+      .dropdownTriggerWrapper {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
+  .collapsed {
+    width: fit-content;
+    padding: 2px;
+  }
+
+.dropdownTriggerWrapper {
+  display: flex;
+  border-radius: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+  padding: 4px 5px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+  .dropdownTriggerWrapperMobile {
+    padding: 8px;
+  }
+
+  .collapsed .dropdownTriggerWrapper {
+    opacity: 0;
+  }
+
+  .dropdownMenuTrigger {
+    color: var(--neutral-alpha-7);
+  }
+  
+  .dropdownTriggerWrapper:hover .dropdownMenuTrigger,
+  .menuOpen .dropdownTriggerWrapper .dropdownMenuTrigger {
+    color: var(--neutral-alpha-11);
+    background-color: rgba(255, 255, 255, 0.07);
+    border-radius: 99px;
+    width: 16px;
+    height: 24px;
+  }
+  
+  .avatarSetlist {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    aspect-ratio: 1/1;  
+    border-radius:4px;
+    background: var(--neutral-2);
+    color: var(--neutral-alpha-8);
+    flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  }
+
+  .textNewSetlist {
+    max-width: 115px;
+    opacity: 1;
+  transition: opacity 360ms ease-in-out;
+    white-space: nowrap;
+  }
+
+  .collapsed .textNewSetlist {
+    opacity: 0;
+  }
+
+  .textSubtitle {
+    max-width: 95px;
+    color: var(--neutral-alpha-10);
+    opacity: 1;
+  transition: opacity 360ms ease-in-out;
+    white-space: nowrap;
+  }
+
+  .collapsed .textSubtitle {
+    opacity: 0;
+  }
+
+  .textSubtitleIcon {
+    color: var(--neutral-alpha-10);
+    opacity: 1;
+  transition: opacity 360ms ease-in-out;
+  }
+
+  .collapsed .textSubtitleIcon {
+    opacity: 0;
+  }
+
+  .navItemSelected {
+    border-radius: var(--Radius-3-max, 6px);
+    background: var(--neutral-alpha-3);
+
+    &:hover,
+    &.menuOpen {
+      border-radius: var(--Radius-3-max, 6px);
+      background: var(--neutral-alpha-3) !important;
+
+      .avatarSetlist {
+        background: var(--neutral-alpha-4) !important;
+      }
+    }
+    .avatarSetlist {
+      background: var(--neutral-alpha-4);
+    }
+    .dropdownMenuTrigger {
+      color: var(--neutral-alpha-7);
+    }
+  
+  }
+
+  @media (max-width: 768px) {
+    .dropdownTriggerWrapper {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  .setlistsSection {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+  
+  .setlistsScrollArea {
+    height: 100%;
+  padding-right: 6px;
+  }
+
+  sectionTitle {
+    color: var(--neutral-alpha-7);
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    padding: 0 0  8px 4px;
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .collapsed .sectionTitle {
+    opacity: 0;
+  }
+  
+
+  .setlistsContent {
+    gap: 4px;
+  }
+.collapsedStack {
+  gap: 0;
+}
+.collapsedStackItem {
+  position: relative;
+}
+
+.collapsedMask {
+  position: relative;
+  overflow: hidden;
+  padding-top: 2px;
+}
+
+.collapsedTransition {
+  transition: margin-top 360ms ease-in-out;
+}
+
+.contentInner {
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.collapsedInner {
+  gap: 0;
+}
+
+.textWrapper {
+  transition:
+    opacity 360ms ease-in-out,
+    max-width 360ms ease-in-out,
+    transform 360ms ease-in-out;
+  max-width: 130px;
+  min-width: 0;
+  flex: 1;
+}
+
+.textWrapperHidden {
+  opacity: 0;
+  max-width: 0;
+  transform: translateX(-4px);
+  pointer-events: none;
+}
+
+.iconSwap {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.iconSwapLayer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 160ms ease-in-out;
+}
+
+.iconVisible {
+  opacity: 1;
+}
+
+.iconHidden {
+  opacity: 0;
+}
+  .newSetlistItemButton {
+    color: var(--aqua-dark-alpha-11) !important;
+  }
+  .plusIcon {
+    color: var(--aqua-dark-alpha-11);
+  }
+  

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

@@ -0,0 +1,121 @@
+import { useState } from 'react'
+import { SetlistList } from './SetlistList'
+import { MusicNoteIcon } from '../../icons'
+
+export default {
+  title: 'Components/SetlistList',
+  component: SetlistList,
+  tags: ['autodocs'],
+  argTypes: {
+    onSetlistClick: { action: 'setlist-clicked' },
+    onNewSetlistClick: { action: 'new-setlist-clicked' },
+  },
+}
+
+export const Default = {
+  render: (args) => {
+    const [selectedSetlistId, setSelectedSetlistId] =
+      useState('piano-exercises')
+
+    return (
+      <SetlistList
+        {...args}
+        selectedSetlistId={selectedSetlistId}
+        onSetlistClick={(id) => {
+          setSelectedSetlistId(id)
+          args.onSetlistClick?.(id)
+        }}
+        onNewSetlistClick={() => {
+          args.onNewSetlistClick?.()
+        }}
+      />
+    )
+  },
+  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'),
+          },
+        ],
+      },
+    ],
+    collapsed: false,
+    isMobile: false,
+  },
+}
+
+export const Collapsed = {
+  ...Default,
+  args: {
+    ...Default.args,
+    collapsed: true,
+  },
+}
+
+export const Empty = {
+  render: (args) => {
+    return (
+      <SetlistList
+        {...args}
+        onNewSetlistClick={() => {
+          args.onNewSetlistClick?.()
+        }}
+      />
+    )
+  },
+  args: {
+    setlists: [],
+    collapsed: false,
+    isMobile: false,
+  },
+}