@moises.ai/design-system 3.11.0 → 3.11.2

package/package.json

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

package/src/components/TrackControlsToggle/TrackControlsToggle.module.css

@@ -12,7 +12,7 @@
   width: 20px;
   height: 20px;
 
-  &:focus-visible:not(.disabled){
+  &:focus-visible:not(.disabled) {
     outline: 2px solid var(--neutral-alpha-8);
     outline-offset: 2px;
   }
@@ -29,21 +29,16 @@
 }
 
 .selected.mute {
-  background: #FFC53D;
+  background: #ffc53d;
   color: var(--neutral-1);
 }
 
 .selected.autoMute {
   background: var(--neutral-alpha-2);
-  color: #FFC53D;
-}
-
-.selected.autoMute:hover {
-  background: var(--neutral-alpha-3);
-  cursor: pointer;
+  color: #ffc53d;
 }
 
 .selected.solo {
   background: var(--aqua-10);
   color: var(--neutral-1);
-}
+}

package/src/components/TrackHeader/RecordSettingsPopover.jsx

@@ -0,0 +1,83 @@
+import { Flex, Text } from '@radix-ui/themes'
+import { Popover } from 'radix-ui'
+import { useCallback, useState } from 'react'
+import { Select } from '../Select/Select'
+import { Slider } from '../Slider/Slider'
+import styles from './RecordSettingsPopover.module.css'
+
+export function RecordSettingsPopover({
+  isRecord,
+  device,
+  deviceOptions,
+  onDeviceChange,
+  channel,
+  channelOptions,
+  onChannelChange,
+  inputLevel,
+  children,
+}) {
+  const [opened, setOpened] = useState(false)
+
+  const handleOpenChange = useCallback((open) => {
+    if (!open || !isRecord) {
+      setOpened(open)
+    }
+  }, [])
+
+  const handleContextMenu = useCallback(() => {
+    e.preventDefault()
+    setOpened(true)
+  }, [])
+
+  return (
+    <Popover.Root open={opened} onOpenChange={handleOpenChange}>
+      <Popover.Trigger asChild onContextMenu={handleContextMenu}>
+        {children}
+      </Popover.Trigger>
+
+      <Popover.Content width="360px">
+        <Flex className={styles.root} direction="column" gap="4">
+          <Flex direction="column" gap="1">
+            <Text size="1" weight="medium">
+              Source
+            </Text>
+
+            {deviceOptions?.length ? (
+              <Select
+                items={deviceOptions}
+                defaultValue={device}
+                onChange={onDeviceChange}
+                size="1"
+              />
+            ) : (
+              <Text size="1">No device options.</Text>
+            )}
+
+            {channelOptions?.length && (
+              <Select
+                items={channelOptions}
+                defaultValue={channel}
+                onChange={onChannelChange}
+                size="1"
+              />
+            )}
+          </Flex>
+
+          <Flex direction="column" gap="1">
+            <Text size="1" weight="medium">
+              Input Level
+            </Text>
+
+            {opened && (
+              <Slider
+                value={inputLevel}
+                max={30}
+                style={{ paddingTop: '8px', paddingBottom: '8px' }}
+              />
+            )}
+          </Flex>
+        </Flex>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}

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

@@ -0,0 +1,13 @@
+.root {
+  width: 200px;
+  padding: var(--space-3);
+  border-radius: var(--radius-4, 8px);
+  border: 1px solid
+    var(--colors-neutral-neutral-alpha-3, rgba(221, 234, 248, 0.08));
+  background: var(--panel-solid, #18191b);
+
+  /* Shadows/shadow-5 */
+  box-shadow:
+    0 12px 32px -16px var(--overlays-black-alpha-5, rgba(0, 0, 0, 0.3)),
+    0 12px 60px 0 var(--overlays-black-alpha-3, rgba(0, 0, 0, 0.15));
+}

package/src/components/TrackHeader/TrackHeader.jsx

@@ -6,6 +6,7 @@ import {
   More2Icon,
 } from '../../icons'
 import {
+  Box,
   DropdownMenu,
   Flex,
   HorizontalVolume,
@@ -15,22 +16,30 @@ import {
   Tooltip,
   TrackControlsToggle,
 } from '../../index'
+import { RecordSettingsPopover } from './RecordSettingsPopover'
 import styles from './TrackHeader.module.css'
 
+const DND_PROTECTION = {
+  onPointerDown: (e) => e.stopPropagation(),
+  onMouseDown: (e) => e.stopPropagation(),
+  onTouchStart: (e) => e.stopPropagation(),
+}
+
 export const TrackHeader = memo(
   ({
     // Config
     title,
     menuOptions,
-    instrumentOptions,
-    onInstrumentChange,
-    instrumentSelected,
     showPan = true,
     showVolumeControls = true,
     isGrouped = false,
     height = 81,
     compact = false,
     isActive = false,
+    instrumentOptions,
+    deviceOptions,
+    channelOptions,
+    inputLevel,
 
     // State
     volume,
@@ -40,6 +49,9 @@ export const TrackHeader = memo(
     isAutoMuted,
     isSolo,
     isOpen,
+    instrumentSelected,
+    device,
+    channel,
 
     // State change listeners
     onVolumeChange,
@@ -48,6 +60,9 @@ export const TrackHeader = memo(
     onRecordChange,
     onSoloChange,
     onOpenChange,
+    onInstrumentChange,
+    onDeviceChange,
+    onChannelChange,
 
     // Children (having content means group/takelanes)
     children,
@@ -93,9 +108,7 @@ export const TrackHeader = memo(
                   style={{ minWidth: 0, overflow: 'hidden' }}
                 >
                   <IconButton
-                    onPointerDown={(e) => e.stopPropagation()}
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onTouchStart={(e) => e.stopPropagation()}
+                    {...DND_PROTECTION}
                     variant="ghost"
                     size="1"
                     onClick={handleToggleOpen}
@@ -141,61 +154,63 @@ export const TrackHeader = memo(
                 </Flex>
 
                 <Flex
+                  {...DND_PROTECTION}
                   direction="row"
-                  gap="3"
+                  gap="2px"
                   align="center"
-                  onPointerDown={(e) => e.stopPropagation()}
-                  onMouseDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
                 >
-                  <Flex gap="2px">
+                  <RecordSettingsPopover
+                    isRecord={isRecord}
+                    deviceOptions={deviceOptions}
+                    device={device}
+                    onDeviceChange={onDeviceChange}
+                    channelOptions={channelOptions}
+                    channel={channel}
+                    onChannelChange={onChannelChange}
+                    inputLevel={inputLevel}
+                  >
                     <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}
+                      onClick={() => onRecordChange?.()}
                     />
-                  </Flex>
+                  </RecordSettingsPopover>
+                  <TrackControlsToggle
+                    type={isMuted ? 'mute' : isAutoMuted ? 'autoMute' : 'mute'}
+                    selected={isMuted || (!isSolo && isAutoMuted)}
+                    onClick={onMutedChange}
+                  />
+                  <TrackControlsToggle
+                    type="solo"
+                    selected={isSolo}
+                    onClick={onSoloChange}
+                  />
                 </Flex>
 
                 {menuOptions && (
-                  <DropdownMenu
-                    trigger={
-                      <IconButton
-                        variant="ghost"
-                        size="1"
-                        className={styles.menuOptionsTrigger}
-                      >
-                        <More2Icon
-                          width={16}
-                          height={16}
-                          className={styles.menuOptionsIcon}
-                        />
-                      </IconButton>
-                    }
-                    options={menuOptions}
-                  />
+                  <Box {...DND_PROTECTION}>
+                    <DropdownMenu
+                      trigger={
+                        <IconButton
+                          variant="ghost"
+                          size="1"
+                          className={styles.menuOptionsTrigger}
+                        >
+                          <More2Icon
+                            width={16}
+                            height={16}
+                            className={styles.menuOptionsIcon}
+                          />
+                        </IconButton>
+                      }
+                      options={menuOptions}
+                    />
+                  </Box>
                 )}
               </Flex>
             </div>
 
-            <div
-              className={styles.trackControls}
-              onPointerDown={(e) => e.stopPropagation()}
-              onMouseDown={(e) => e.stopPropagation()}
-              onTouchStart={(e) => e.stopPropagation()}
-            >
+            <div {...DND_PROTECTION} className={styles.trackControls}>
               {!compact && showVolumeControls && (
                 <>
                   <HorizontalVolume

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'
+import { BassIcon, DrumsIcon, ElectricGuitarIcon, KeysIcon } from '../../icons'
+import { TrackHeader } from './TrackHeader'
 export default {
   title: 'Components/TrackHeader',
   component: TrackHeader,
@@ -89,15 +89,24 @@ import { TrackHeader } from '@moises.ai/design-system'
 }
 
 const menuOptions = [
-  { type: 'item', key: 'delete', label: 'Delete', onClick: () => console.log('Delete clicked') },
+  {
+    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: '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: {
@@ -110,13 +119,14 @@ export const Default = {
     pan: 0,
     isMuted: false,
     isSolo: false,
+    isAutoMuted: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => { },
-    onPanChange: () => { },
-    onMutedChange: () => { },
-    onSoloChange: () => { },
-    onInstrumentChange: () => { },
+    onVolumeChange: () => {},
+    onPanChange: () => {},
+    onMutedChange: () => {},
+    onSoloChange: () => {},
+    onInstrumentChange: () => {},
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
   },
@@ -133,12 +143,13 @@ export const Group = {
     pan: 0,
     isMuted: false,
     isSolo: false,
+    isAutoMuted: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => { },
-    onPanChange: () => { },
-    onMutedChange: () => { },
-    onSoloChange: () => { },
+    onVolumeChange: () => {},
+    onPanChange: () => {},
+    onMutedChange: () => {},
+    onSoloChange: () => {},
   },
   render: (args) => {
     const [isOpen, setIsOpen] = useState(true)
@@ -155,10 +166,10 @@ export const Group = {
           pan={pan}
           isMuted={false}
           isSolo={false}
-          onVolumeChange={() => { }}
+          onVolumeChange={() => {}}
           onPanChange={setPan}
-          onMutedChange={() => { }}
-          onSoloChange={() => { }}
+          onMutedChange={() => {}}
+          onSoloChange={() => {}}
           menuOptions={menuOptions}
         />
         <TrackHeader
@@ -170,10 +181,10 @@ export const Group = {
           pan={pan2}
           isMuted={false}
           isSolo={false}
-          onVolumeChange={() => { }}
+          onVolumeChange={() => {}}
           onPanChange={setPan2}
-          onMutedChange={() => { }}
-          onSoloChange={() => { }}
+          onMutedChange={() => {}}
+          onSoloChange={() => {}}
           menuOptions={menuOptions}
         />
       </TrackHeader>
@@ -194,11 +205,11 @@ export const Takelanes = {
     isSolo: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => { },
-    onPanChange: () => { },
-    onMutedChange: () => { },
-    onSoloChange: () => { },
-    onOpenChange: () => { },
+    onVolumeChange: () => {},
+    onPanChange: () => {},
+    onMutedChange: () => {},
+    onSoloChange: () => {},
+    onOpenChange: () => {},
   },
   render: (args) => (
     <TrackHeader {...args}>