@moises.ai/design-system 3.10.17 → 3.11.0

package/src/components/TrackHeader/TrackHeader.jsx

@@ -1,27 +1,43 @@
-import { DotsVerticalIcon } from '@radix-ui/react-icons'
-import { IconButton } from '@radix-ui/themes'
 import classNames from 'classnames'
 import { memo, useCallback } from 'react'
-import { DropdownMenu, HorizontalVolume, PanControl, Text, Tooltip } from '../../index'
-import { TrackControlButton } from '../TrackControlButton'
+import {
+  ChevronDownFilledIcon,
+  ChevronRightFilledIcon,
+  More2Icon,
+} from '../../icons'
+import {
+  DropdownMenu,
+  Flex,
+  HorizontalVolume,
+  IconButton,
+  PanControl,
+  Text,
+  Tooltip,
+  TrackControlsToggle,
+} from '../../index'
 import styles from './TrackHeader.module.css'
-import { TrackHeaderOptions } from './TrackHeaderOptions'
 
 export const TrackHeader = memo(
   ({
     // Config
     title,
     menuOptions,
+    instrumentOptions,
+    onInstrumentChange,
+    instrumentSelected,
     showPan = true,
     showVolumeControls = true,
     isGrouped = false,
     height = 81,
     compact = false,
+    isActive = false,
 
     // State
     volume,
     pan,
     isMuted,
+    isRecord,
+    isAutoMuted,
     isSolo,
     isOpen,
 
@@ -29,6 +45,7 @@ export const TrackHeader = memo(
     onVolumeChange,
     onPanChange,
     onMutedChange,
+    onRecordChange,
     onSoloChange,
     onOpenChange,
 
@@ -36,10 +53,15 @@ export const TrackHeader = memo(
     children,
   }) => {
     const hasChildren = Boolean(children)
-    const handleToggleOpen = useCallback(() => onOpenChange?.(!isOpen), [isOpen, onOpenChange])
+    const handleToggleOpen = useCallback(
+      () => onOpenChange?.(!isOpen),
+      [isOpen, onOpenChange],
+    )
 
     return (
-      <div className={classNames(styles.container, { [styles.isOpen]: isOpen })}>
+      <div
+        className={classNames(styles.container, { [styles.isOpen]: isOpen })}
+      >
         <div
           className={classNames(styles.track, {
             [styles.isParentTrack]: hasChildren,
@@ -47,46 +69,125 @@ export const TrackHeader = memo(
           })}
           style={{ height: `${height}px` }}
         >
-          <div className={styles.trackContent}>
+          <Flex
+            className={classNames(styles.trackContent, {
+              [styles.isActive]: isActive,
+            })}
+            direction="column"
+            gap="2"
+            p="12px 12px 12px 4px"
+          >
             <div className={styles.line}>
-              <div className={styles.left}>
-                <div
-                  className={styles.leftIcon}
+              <Flex
+                align="center"
+                justify="between"
+                direction="row"
+                gap="3"
+                className={styles.headerActions}
+              >
+                <Flex
+                  align="center"
+                  direction="row"
+                  gap="1"
+                  flexGrow="1"
+                  style={{ minWidth: 0, overflow: 'hidden' }}
+                >
+                  <IconButton
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onTouchStart={(e) => e.stopPropagation()}
+                    variant="ghost"
+                    size="1"
+                    onClick={handleToggleOpen}
+                    className={styles.toggleOpenButton}
+                  >
+                    {isOpen ? (
+                      <ChevronDownFilledIcon />
+                    ) : (
+                      <ChevronRightFilledIcon />
+                    )}
+                  </IconButton>
+                  {instrumentOptions && (
+                    <DropdownMenu
+                      showActiveTrigger={true}
+                      trigger={
+                        <IconButton
+                          variant="ghost"
+                          size="1"
+                          className={classNames(
+                            styles.instrumentIconButton,
+                            styles.menuOptionsTrigger,
+                          )}
+                        >
+                          {instrumentSelected.icon}
+                        </IconButton>
+                      }
+                      options={instrumentOptions}
+                      onValueChange={onInstrumentChange}
+                      side="bottom"
+                      align="start"
+                    />
+                  )}
+
+                  <Tooltip content={title}>
+                    <Text
+                      size="2"
+                      className={styles.name}
+                      onClick={hasChildren ? handleToggleOpen : undefined}
+                    >
+                      {title}
+                    </Text>
+                  </Tooltip>
+                </Flex>
+
+                <Flex
+                  direction="row"
+                  gap="3"
+                  align="center"
                   onPointerDown={(e) => e.stopPropagation()}
                   onMouseDown={(e) => e.stopPropagation()}
                   onTouchStart={(e) => e.stopPropagation()}
                 >
-                  <TrackHeaderOptions isOpen={isOpen} onToggleOpen={handleToggleOpen} />
-                </div>
-
-                <Tooltip content={title}>
-                  <Text
-                    size="2"
-                    className={styles.name}
-                    onClick={hasChildren ? handleToggleOpen : undefined}
-                  >
-                    {title}
-                  </Text>
-                </Tooltip>
-              </div>
+                  <Flex gap="2px">
+                    <TrackControlsToggle
+                      type="record"
+                      selected={isRecord}
+                      onClick={onRecordChange}
+                    />
+                    <TrackControlsToggle
+                      type={
+                        isMuted ? 'mute' : isAutoMuted ? 'autoMute' : 'mute'
+                      }
+                      selected={isMuted}
+                      onClick={onMutedChange}
+                    />
+                    <TrackControlsToggle
+                      type="solo"
+                      selected={isSolo}
+                      onClick={onSoloChange}
+                    />
+                  </Flex>
+                </Flex>
 
-              <div
-                className={styles.menuOptions}
-                onPointerDown={(e) => e.stopPropagation()}
-                onMouseDown={(e) => e.stopPropagation()}
-                onTouchStart={(e) => e.stopPropagation()}
-              >
                 {menuOptions && (
                   <DropdownMenu
                     trigger={
-                      <IconButton className={styles.menuOptionsTrigger} variant="ghost" color="gray" size="1">
-                        <DotsVerticalIcon width={16} height={16} />
+                      <IconButton
+                        variant="ghost"
+                        size="1"
+                        className={styles.menuOptionsTrigger}
+                      >
+                        <More2Icon
+                          width={16}
+                          height={16}
+                          className={styles.menuOptionsIcon}
+                        />
                       </IconButton>
                     }
                     options={menuOptions}
                   />
                 )}
-              </div>
+              </Flex>
             </div>
 
             <div
@@ -101,39 +202,23 @@ export const TrackHeader = memo(
                     volume={volume}
                     onChangeValue={onVolumeChange}
                   />
-                  {showPan && <PanControl className={styles.pan} value={pan} onChange={onPanChange} minValue={-1} maxValue={1}/>}
+                  {showPan && (
+                    <PanControl
+                      className={styles.pan}
+                      value={pan}
+                      onChange={onPanChange}
+                      minValue={-1}
+                      maxValue={1}
+                    />
+                  )}
                 </>
               )}
             </div>
-          </div>
-
-          {showVolumeControls && (
-            <div
-              className={styles.right}
-              onPointerDown={(e) => e.stopPropagation()}
-              onMouseDown={(e) => e.stopPropagation()}
-              onTouchStart={(e) => e.stopPropagation()}
-            >
-              <TrackControlButton
-                className={styles.rightButton}
-                variant="mute"
-                isActive={isMuted}
-                onChange={onMutedChange}
-              />
-              <TrackControlButton
-                className={styles.rightButton}
-                variant="solo"
-                isActive={isSolo}
-                onChange={onSoloChange}
-              />
-            </div>
-          )}
+          </Flex>
         </div>
 
         {hasChildren && isOpen && (
-          <div className={styles.group}>
-            {children}
-          </div>
+          <div className={styles.group}>{children}</div>
         )}
       </div>
     )

package/src/components/TrackHeader/TrackHeader.module.css

@@ -3,13 +3,9 @@
   display: flex;
   justify-content: space-between;
   box-sizing: border-box;
-  box-shadow: 0 1px 0 0 var(--neutral-alpha-3);
+  box-shadow: 0 1px 0 0 var(--neutral-3);
+
 
-  &:hover {
-    .leftIcon {
-      color: var(--neutral-12);
-    }
-  }
 }
 
 .name {
@@ -17,7 +13,7 @@
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
-  background: linear-gradient(90deg, #fff 81%, #1d1d1d 100%);
+  background: linear-gradient(90deg, #fff 95%, #1d1d1d 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -31,16 +27,49 @@
   min-width: 0;
 }
 
-.left {
+/* .left {
   flex: 1;
   display: flex;
   align-items: center;
   min-width: 0;
+} */
+
+.instrumentIconButton {
+  margin-right: 4px !important;
+  border-radius: 4px;
 }
 
-.leftIcon {
-  width: 24px;
-  color: var(--neutral-8);
+.headerActions {
+  min-width: 0;
+  width: 100%;
+}
+
+.trackContent{
+/* background-color: ; */
+flex: 1;
+min-width: 0;
+/* border: 1px solid var(--neutral-3); */
+background-color: rgba(17, 17, 19);
+
+  &:hover {
+    .menuOptionsTrigger svg {
+      opacity: 1;
+      color: var(--neutral-11);
+    }
+
+    .instrumentIcon {
+      opacity: 1;
+      color: var(--neutral-alpha-11);
+    }
+  }
+}
+
+.trackContent.isActive {
+  background-color: var(--neutral-2);
+}
+
+.instrumentIcon {
+  color: var(--neutral-alpha-8);
 }
 
 .right {
@@ -82,26 +111,33 @@
   justify-content: center;
 }
 
-.menuOptionsTrigger:hover {
-  color: var(--accent-a12) !important;
-  background-color: transparent !important;
+
+
+.menuOptionsTrigger {
+
+  svg {
+    opacity: 0.5;
+  }
+
+  &:hover {
+    svg {
+      opacity: 1;
+    }
+  }
+
+  &[data-state='open'],
+  &[data-highlighted] {
+    svg {
+      opacity: 1;
+      color: var(--neutral-11);
+    }
+  }
 }
 
-.menuOptionsTrigger[data-state=open] {
+/* .menuOptionsTrigger[data-state=open] {
   color: var(--accent-a10) !important;
-}
+} */
 
-.trackContent {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  padding-left: var(--space-1);
-  padding-right: var(--space-3);
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-3);
-  flex-direction: column;
-  justify-content: space-between;
-}
 
 /* Open */
 
@@ -118,26 +154,27 @@
 /* Not parent track (either grouped or not) */
 
 .track:not(.isParentTrack) {
-  .leftIcon {
+  .toggleOpenButton {
     visibility: hidden;
     pointer-events: none;
   }
 }
 
 /* Child track */
-
+.group {
+  background-color: rgba(17, 17, 19);
+}
 .group > * {
   .track {
     margin-left: 28px;
     background-color: var(--neutral-alpha-2);
-    border-left-style: solid;
-    border-left-color: var(--neutral-alpha-3);
-    border-left-width: 1px;
+    border-radius: none;
+    box-shadow: 0 1px 0 0 var(--neutral-alpha-4);
 
     .trackContent {
       padding-left: 0;
-    
-      .leftIcon {
+    background-color: var(--neutral-alpha-2);
+      .toggleOpenButton {
         display: none;
       }
     
@@ -145,7 +182,7 @@
         padding-left: var(--space-4);
         background: linear-gradient(
           90deg,
-          var(--neutral-alpha-11) 81%,
+          var(--neutral-alpha-11) 95%,
           #1d1d1d 100%
         );
         background-clip: text;
@@ -161,7 +198,6 @@
   &:first-child .track {
     border-top-style: solid;
     border-top-color: var(--neutral-alpha-3);
-    border-top-left-radius: 4px;
     border-top-width: 1px;
   }
   
@@ -192,3 +228,14 @@
     }
   }
 }
+
+
+.toggleOpenButton {
+  background: transparent;
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
+  &:hover {
+    opacity: 1;
+  }
+}

package/src/components/TrackHeader/TrackHeader.stories.jsx

@@ -1,6 +1,6 @@
 import { TrackHeader } from './TrackHeader'
 import { useState } from 'react'
-
+import { BassIcon, ElectricGuitarIcon, KeysIcon, DrumsIcon } from '../../icons'
 export default {
   title: 'Components/TrackHeader',
   component: TrackHeader,
@@ -92,6 +92,13 @@ const menuOptions = [
   { type: 'item', key: 'delete', label: 'Delete', onClick: () => console.log('Delete clicked') },
 ]
 
+const instrumentOptions = [
+  { type: 'item', key: 'bass', label: 'Bass', icon: <BassIcon /> },
+  { type: 'item', key: 'guitar', label: 'Guitar', icon: <ElectricGuitarIcon /> },
+  { type: 'item', key: 'piano', label: 'Piano', icon: <KeysIcon /> },
+  { type: 'item', key: 'drums', label: 'Drums', icon: <DrumsIcon /> },
+
+]
 export const Default = {
   args: {
     title: 'Common Track',
@@ -109,13 +116,15 @@ export const Default = {
     onPanChange: () => { },
     onMutedChange: () => { },
     onSoloChange: () => { },
+    onInstrumentChange: () => { },
+    instrumentOptions,
+    instrumentSelected: instrumentOptions[0],
   },
   render: (args) => <TrackHeader {...args} />,
 }
 
 export const Group = {
   args: {
-    isOpen: true,
     title: 'Group Track',
     showPan: false,
     showVolumeControls: true,
@@ -130,13 +139,13 @@ export const Group = {
     onPanChange: () => { },
     onMutedChange: () => { },
     onSoloChange: () => { },
-    onOpenChange: () => { },
   },
   render: (args) => {
+    const [isOpen, setIsOpen] = useState(true)
     const [pan, setPan] = useState(-0.3)
     const [pan2, setPan2] = useState(-0.3)
     return (
-      <TrackHeader {...args}>
+      <TrackHeader {...args} isOpen={isOpen} onOpenChange={setIsOpen}>
         <TrackHeader
           title="Grouped Track"
           isGrouped

package/src/icons/ChevronDownFilledIcon.jsx

@@ -0,0 +1,17 @@
+export const ChevronDownFilledIcon = ({ width = 9, height = 5, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 9 5"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M3.58684 4.29289L0.147499 0.853553C-0.167484 0.538571 0.0555997 0 0.501052 0L8.08684 0C8.53229 0 8.75537 0.53857 8.44039 0.853553L5.00105 4.29289C4.61053 4.68342 3.97736 4.68342 3.58684 4.29289Z"
+      fill="currentColor" />
+  </svg>
+)
+
+ChevronDownFilledIcon.displayName = 'ChevronDownFilledIcon'

package/src/icons/ChevronRightFilledIcon.jsx

@@ -0,0 +1,17 @@
+export const ChevronRightFilledIcon = ({ width = 5, height = 9, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 5 9"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M4.29289 5.001L0.853553 8.44034C0.538571 8.75532 -3.3293e-08 8.53224 -5.27643e-08 8.08679L-3.8435e-07 0.501002C-4.03821e-07 0.0555496 0.53857 -0.167534 0.853552 0.147449L4.29289 3.58679C4.68342 3.97731 4.68342 4.61048 4.29289 5.001Z"
+      fill="currentColor" />
+  </svg>
+)
+
+ChevronRightFilledIcon.displayName = 'ChevronRightFilledIcon'

package/src/icons.jsx

@@ -347,3 +347,5 @@ export { EmailIcon } from './icons/EmailIcon'
 export { EyeIcon } from './icons/EyeIcon'
 export { EyeOffIcon } from './icons/EyeOffIcon'
 export { Play1Icon } from './icons/Play1Icon'
+export { ChevronRightFilledIcon } from './icons/ChevronRightFilledIcon'
+export { ChevronDownFilledIcon } from './icons/ChevronDownFilledIcon'

package/src/index.jsx

@@ -142,4 +142,5 @@ export { useForm } from './components/useForm/useForm'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
 
-export { EmptyState } from './components/EmptyState/EmptyState'
+export { EmptyState } from './components/EmptyState/EmptyState'
+export { TrackControlsToggle } from './components/TrackControlsToggle/TrackControlsToggle'

package/src/lib/menu/Menu.module.css

@@ -286,6 +286,11 @@
   background-color: transparent;
 }
 
+.menuTrigger[data-state='open'].showActiveTrigger,
+.menuTrigger[data-highlighted].showActiveTrigger {
+  background-color: var(--neutral-alpha-3);
+}
+
 .menuSubTrigger[data-highlighted],
 .menuItem[data-highlighted],
 .menuSubTrigger[data-state='open'] {