@moises.ai/design-system 3.10.18 → 3.11.0

package/package.json

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

package/src/components/TrackControlsToggle/TrackControlsToggle.jsx

@@ -0,0 +1,55 @@
+import styles from './TrackControlsToggle.module.css'
+import classNames from 'classnames'
+import { Text, Tooltip, Flex } from '../../index'
+
+export const TrackControlsToggle = ({ children, className, type, selected, onClick, tooltipContent, ...props }) => {
+  const toggleType = {
+    record: 'R',
+    mute: 'M',
+    autoMute: 'M',
+    solo: 'S',
+  }
+
+  const content = () => {
+    return (
+      <Flex className={classNames(styles.TrackControlsToggle, className, {
+        [styles.selected]: selected,
+        [styles.record]: type === 'record',
+        [styles.mute]: type === 'mute',
+        [styles.autoMute]: type === 'autoMute',
+        [styles.solo]: type === 'solo',
+      })}
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+        aria-pressed={selected}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            onClick?.()
+          }
+        }}
+        {...props}>
+        <Text size="1" weight="regular">{toggleType[type]}</Text>
+      </Flex>
+    )
+
+  }
+
+  return (
+    <>
+      {tooltipContent && (
+        <Tooltip content={tooltipContent?.text} color='gray' shortcut={tooltipContent?.shortcut}>
+          {content()}
+        </Tooltip>
+      )}
+      {!tooltipContent && (
+        <>
+          {content()}
+        </>
+      )}
+    </>
+  )
+}
+
+TrackControlsToggle.displayName = 'TrackControlsToggle'

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

@@ -0,0 +1,49 @@
+.TrackControlsToggle {
+  border-radius: 4px;
+  background: var(--neutral-alpha-2);
+  display: inline-flex;
+  padding: 2px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  color: var(--neutral-alpha-10);
+
+  width: 20px;
+  height: 20px;
+
+  &:focus-visible:not(.disabled){
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+  }
+}
+
+.TrackControlsToggle:hover {
+  background: var(--neutral-alpha-3);
+  cursor: pointer;
+}
+
+.selected.record {
+  background: rgba(255, 100, 101, 0.92);
+  color: var(--neutral-1);
+}
+
+.selected.mute {
+  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;
+}
+
+.selected.solo {
+  background: var(--aqua-10);
+  color: var(--neutral-1);
+}

package/src/components/TrackControlsToggle/TrackControlsToggle.stories.jsx

@@ -0,0 +1,156 @@
+import { useState } from 'react'
+import { TrackControlsToggle } from './TrackControlsToggle'
+
+export default {
+  title: 'Components/TrackControlsToggle',
+  component: TrackControlsToggle,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Toggle button for track controls (Record, Mute, Auto Mute, and Solo). Use `selected` to represent active state and `tooltipContent` to show context and keyboard shortcut.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['record', 'mute', 'autoMute', 'solo'],
+      description: 'Defines the control type and the displayed label (R, M, or S).',
+      table: {
+        type: { summary: "'record' | 'mute' | 'autoMute' | 'solo'" },
+        defaultValue: { summary: "'solo'" },
+      },
+    },
+    selected: {
+      control: 'boolean',
+      description: 'Controls the visual active/inactive state of the toggle.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Triggered when clicking (or pressing Enter/Space) on the toggle.',
+      table: {
+        type: { summary: '() => void' },
+      },
+    },
+    tooltipContent: {
+      control: 'object',
+      description: 'Tooltip data in the `{ text, shortcut }` format.',
+      table: {
+        type: { summary: '{ text?: string; shortcut?: string }' },
+      },
+    },
+    children: {
+      control: false,
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    type: 'solo',
+    selected: true,
+    tooltipContent: {
+      text: 'Tooltip Content',
+      shortcut: '⌘ C',
+    },
+  },
+}
+
+export const Inactive = {
+  args: {
+    type: 'solo',
+    selected: false,
+    tooltipContent: {
+      text: 'Solo',
+      shortcut: 'S',
+    },
+  },
+}
+
+export const RecordSelected = {
+  args: {
+    type: 'record',
+    selected: true,
+    tooltipContent: {
+      text: 'Record',
+      shortcut: 'R',
+    },
+  },
+}
+
+export const MuteSelected = {
+  args: {
+    type: 'mute',
+    selected: true,
+    tooltipContent: {
+      text: 'Mute',
+      shortcut: 'M',
+    },
+  },
+}
+
+export const AllStates = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all states with and without tooltip. Click any toggle to switch between inactive and active.',
+      },
+    },
+  },
+  render: (args) => {
+    const InteractiveGroup = ({ withTooltip }) => {
+      const [states, setStates] = useState({
+        record: false,
+        mute: false,
+        autoMute: false,
+        solo: false,
+      })
+
+      const types = ['record', 'mute', 'autoMute', 'solo']
+
+      const toggleState = (type) => {
+        setStates((prev) => ({ ...prev, [type]: !prev[type] }))
+      }
+
+      return (
+        <div style={{ display: 'flex', gap: 8 }}>
+          {types.map((type) => (
+            <TrackControlsToggle
+              key={`${withTooltip ? 'with' : 'without'}-${type}`}
+              {...args}
+              type={type}
+              selected={states[type]}
+              tooltipContent={withTooltip ? { text: `${type}`, shortcut: type.slice(0, 1).toUpperCase() } : undefined}
+              onClick={() => {
+                args.onClick?.()
+                toggleState(type)
+              }}
+            />
+          ))}
+        </div>
+      )
+    }
+
+    return (
+      <div style={{ display: 'grid', gap: 14 }}>
+        <div style={{ display: 'grid', gap: 8 }}>
+          <span style={{ color: '#9da3b4', fontSize: 12 }}>With tooltip</span>
+          <InteractiveGroup withTooltip />
+        </div>
+        <div style={{ display: 'grid', gap: 8 }}>
+          <span style={{ color: '#9da3b4', fontSize: 12 }}>Without tooltip</span>
+          <InteractiveGroup withTooltip={false} />
+        </div>
+      </div>
+    )
+  },
+}

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>
     )