@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/TrackControlButton/TrackControlButton.stories.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { TrackControlButton } from './TrackControlButton'
+
+export default {
+  title: 'Components/TrackControlButton',
+  component: TrackControlButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['mute', 'solo'],
+      description: 'Type of control (mute or solo)',
+      defaultValue: 'mute',
+    },
+    isActive: {
+      control: 'boolean',
+      description: 'Whether the control is active',
+      defaultValue: false,
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback called when the state changes',
+    },
+  },
+}
+
+export const Interactive = {
+  render: () => {
+    const [isMuted, setIsMuted] = React.useState(false)
+    const [isSolo, setIsSolo] = React.useState(false)
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <TrackControlButton
+          variant="mute"
+          isActive={isMuted}
+          onChange={setIsMuted}
+        />
+        <TrackControlButton
+          variant="solo"
+          isActive={isSolo}
+          onChange={setIsSolo}
+        />
+      </div>
+    )
+  },
+}

package/src/components/TrackControlButton/index.js

@@ -0,0 +1 @@
+export { TrackControlButton } from './TrackControlButton'

package/src/components/TrackHeader/TrackHeader.jsx

@@ -0,0 +1,143 @@
+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 styles from './TrackHeader.module.css'
+import { TrackHeaderOptions } from './TrackHeaderOptions'
+
+export const TrackHeader = memo(
+  ({
+    // Config
+    title,
+    menuOptions,
+    showPan = true,
+    showVolumeControls = true,
+    isGrouped = false,
+    height = 81,
+    compact = false,
+
+    // State
+    volume,
+    pan,
+    isMuted,
+    isSolo,
+    isOpen,
+
+    // State change listeners
+    onVolumeChange,
+    onPanChange,
+    onMutedChange,
+    onSoloChange,
+    onOpenChange,
+
+    // Children (having content means group/takelanes)
+    children,
+  }) => {
+    const hasChildren = Boolean(children)
+    const handleToggleOpen = useCallback(() => onOpenChange?.(!isOpen), [isOpen, onOpenChange])
+
+    return (
+      <div className={classNames(styles.container, { [styles.isOpen]: isOpen })}>
+        <div
+          className={classNames(styles.track, {
+            [styles.isParentTrack]: hasChildren,
+            [styles.isCompact]: compact,
+          })}
+          style={{ height: `${height}px` }}
+        >
+          <div className={styles.trackContent}>
+            <div className={styles.line}>
+              <div className={styles.left}>
+                <div
+                  className={styles.leftIcon}
+                  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>
+
+              <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>
+                    }
+                    options={menuOptions}
+                  />
+                )}
+              </div>
+            </div>
+
+            <div
+              className={styles.trackControls}
+              onPointerDown={(e) => e.stopPropagation()}
+              onMouseDown={(e) => e.stopPropagation()}
+              onTouchStart={(e) => e.stopPropagation()}
+            >
+              {!compact && showVolumeControls && (
+                <>
+                  <HorizontalVolume
+                    volume={volume}
+                    onChangeValue={onVolumeChange}
+                  />
+                  {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>
+          )}
+        </div>
+
+        {hasChildren && isOpen && (
+          <div className={styles.group}>
+            {children}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+TrackHeader.displayName = 'TrackHeader'

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

@@ -0,0 +1,194 @@
+.track {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  box-shadow: 0 1px 0 0 var(--neutral-alpha-3);
+
+  &:hover {
+    .leftIcon {
+      color: var(--neutral-12);
+    }
+  }
+}
+
+.name {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  background: linear-gradient(90deg, #fff 81%, #1d1d1d 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.line {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.left {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.leftIcon {
+  width: 24px;
+  color: var(--neutral-8);
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 40px;
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-left-color: var(--neutral-alpha-3);
+  align-items: center;
+
+  & > *:first-child {
+    border-bottom: 1px solid var(--neutral-alpha-3);
+  }
+  
+  & > .rightButton {
+    flex: 1;
+  }
+}
+
+.trackControls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 20px;
+  padding-left: var(--space-5);
+}
+
+.pan {
+  flex-shrink: 0;
+}
+
+.menuOptions {
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menuOptionsTrigger:hover {
+  color: var(--accent-a12) !important;
+  background-color: transparent !important;
+}
+
+.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 */
+
+.container.isOpen {
+  box-shadow: 0 1px 0 0 var(--neutral-alpha-3);
+}
+
+/* Parent track */
+
+.container.isOpen .track.isParentTrack {
+  box-shadow: none;
+}
+
+/* Not parent track (either grouped or not) */
+
+.track:not(.isParentTrack) {
+  .leftIcon {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+/* Child track */
+
+.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;
+
+    .trackContent {
+      padding-left: 0;
+    
+      .leftIcon {
+        display: none;
+      }
+    
+      .name {
+        padding-left: var(--space-4);
+        background: linear-gradient(
+          90deg,
+          var(--neutral-alpha-11) 81%,
+          #1d1d1d 100%
+        );
+        background-clip: text;
+        text-align: left;
+      }
+    
+      .trackControls {
+        padding-left: var(--space-4);
+      }
+    }
+  }
+
+  &:first-child .track {
+    border-top-style: solid;
+    border-top-color: var(--neutral-alpha-3);
+    border-top-left-radius: 4px;
+    border-top-width: 1px;
+  }
+  
+  &:last-child .track {
+    box-shadow: none;
+  }
+}
+
+/* Compact track */
+
+.track.isCompact {
+  .trackContent {
+    padding: 0;
+  }
+
+  .right {
+    flex-direction: row;
+
+    & > *:first-child {
+      border-right: 1px solid var(--neutral-alpha-2);
+      border-bottom: none;
+    }
+
+    .rightButton {
+      width: 25px !important;
+      height: 25px !important;
+      padding: 6px;
+    }
+  }
+}

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

@@ -0,0 +1,212 @@
+import { TrackHeader } from './TrackHeader'
+import { useState } from 'react'
+
+export default {
+  title: 'Components/TrackHeader',
+  component: TrackHeader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A header component for a track in the track list
+
+## Usage
+
+\`\`\`jsx
+// Common track
+
+import { TrackHeader } from '@moises.ai/design-system'
+
+<TrackHeader title="Common Track" />
+\`\`\`
+
+\`\`\`jsx
+// Group track
+import { TrackHeader } from '@moises.ai/design-system'
+
+<TrackHeader title="Group Track">
+  <TrackHeader title="Grouped Track" showPan showVolumeControls volume={0.7} pan={-0.3} isMuted={false} isSolo={false} onVolumeChange={() => {}} onPanChange={() => {}} onMutedChange={() => {}} onSoloChange={() => {}} isGrouped />
+</TrackHeader>
+\`\`\`
+
+\`\`\`jsx
+// Takelane parent
+import { TrackHeader } from '@moises.ai/design-system'
+
+<TrackHeader title="Takelane Parent" height={81}>
+  <TrackHeader title="Take Lane 1" showPan={false} showVolumeControls={false} height={49} isGrouped />
+  <TrackHeader title="Take Lane 2" showPan={false} showVolumeControls={false} height={49} isGrouped />
+  <TrackHeader title="Take Lane 3" showPan={false} showVolumeControls={false} height={49} isGrouped />
+</TrackHeader>
+\`\`\`
+
+## Props
+
+### TrackHeader
+
+\`\`\`tsx
+{
+  title: string; // The title of the track header
+  height: number; // The height of the track header in pixels (default: 81)
+  showPan: boolean; // Whether to show the pan control
+  showVolumeControls: boolean; // Whether to show the volume controls
+  isGrouped: boolean; // Whether the track is grouped
+  volume: number; // The volume of the track
+  pan: number; // The pan of the track
+  isMuted: boolean; // Whether the track is muted
+  isSolo: boolean; // Whether the track is solo
+  onVolumeChange: (volume: number) => void; // Callback function to handle volume change
+  onPanChange: (pan: number) => void; // Callback function to handle pan change
+  onMutedChange: (muted: boolean) => void; // Callback function to handle muted change
+  onSoloChange: (solo: boolean) => void; // Callback function to handle solo change
+  onOpenChange: (open: boolean) => void; // Callback function to handle open change
+}
+\`\`\`
+`,
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title of the track header',
+    },
+    height: {
+      control: 'number',
+      description: 'The height of the track header in pixels',
+      defaultValue: 81,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px', background: '#1d1d1d' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+const menuOptions = [
+  { type: 'item', key: 'delete', label: 'Delete', onClick: () => console.log('Delete clicked') },
+]
+
+export const Default = {
+  args: {
+    title: 'Common Track',
+    showPan: true,
+    showVolumeControls: true,
+    isGrouped: false,
+    height: 81,
+    volume: 0.5,
+    pan: 0,
+    isMuted: false,
+    isSolo: false,
+    compact: false,
+    menuOptions,
+    onVolumeChange: () => { },
+    onPanChange: () => { },
+    onMutedChange: () => { },
+    onSoloChange: () => { },
+  },
+  render: (args) => <TrackHeader {...args} />,
+}
+
+export const Group = {
+  args: {
+    isOpen: true,
+    title: 'Group Track',
+    showPan: false,
+    showVolumeControls: true,
+    height: 81,
+    volume: 0.5,
+    pan: 0,
+    isMuted: false,
+    isSolo: false,
+    compact: false,
+    menuOptions,
+    onVolumeChange: () => { },
+    onPanChange: () => { },
+    onMutedChange: () => { },
+    onSoloChange: () => { },
+    onOpenChange: () => { },
+  },
+  render: (args) => {
+    const [pan, setPan] = useState(-0.3)
+    const [pan2, setPan2] = useState(-0.3)
+    return (
+      <TrackHeader {...args}>
+        <TrackHeader
+          title="Grouped Track"
+          isGrouped
+          showPan
+          showVolumeControls
+          volume={0.7}
+          pan={pan}
+          isMuted={false}
+          isSolo={false}
+          onVolumeChange={() => { }}
+          onPanChange={setPan}
+          onMutedChange={() => { }}
+          onSoloChange={() => { }}
+          menuOptions={menuOptions}
+        />
+        <TrackHeader
+          title="Grouped Track"
+          isGrouped
+          showPan
+          showVolumeControls
+          volume={0.7}
+          pan={pan2}
+          isMuted={false}
+          isSolo={false}
+          onVolumeChange={() => { }}
+          onPanChange={setPan2}
+          onMutedChange={() => { }}
+          onSoloChange={() => { }}
+          menuOptions={menuOptions}
+        />
+      </TrackHeader>
+    )
+  },
+}
+
+export const Takelanes = {
+  args: {
+    isOpen: true,
+    title: 'Takelane Parent',
+    showPan: true,
+    showVolumeControls: true,
+    height: 81,
+    volume: 0.6,
+    pan: 0,
+    isMuted: false,
+    isSolo: false,
+    compact: false,
+    menuOptions,
+    onVolumeChange: () => { },
+    onPanChange: () => { },
+    onMutedChange: () => { },
+    onSoloChange: () => { },
+    onOpenChange: () => { },
+  },
+  render: (args) => (
+    <TrackHeader {...args}>
+      <TrackHeader
+        title="Take Lane 1"
+        showPan={false}
+        showVolumeControls={false}
+        isGrouped
+        menuOptions={menuOptions}
+      />
+      <TrackHeader
+        title="Take Lane 1"
+        showPan={false}
+        showVolumeControls={false}
+        isGrouped
+        menuOptions={menuOptions}
+      />
+    </TrackHeader>
+  ),
+}

package/src/components/TrackHeader/TrackHeaderOptions/TrackHeaderOptions.jsx

@@ -0,0 +1,18 @@
+import { IconButton } from '../../../index'
+import { TriangleDownIcon, TriangleRightIcon } from '../../../icons'
+
+import { memo } from 'react'
+
+import styles from './TrackHeaderOptions.module.css'
+
+export const TrackHeaderOptions = memo(({ isOpen, onToggleOpen }) => {
+  return (
+    <IconButton onClick={onToggleOpen} className={styles.button}>
+      {isOpen ? (
+        <TriangleDownIcon width={20} height={20} />
+      ) : (
+        <TriangleRightIcon width={20} height={20} />
+      )}
+    </IconButton>
+  )
+})

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

@@ -0,0 +1,8 @@
+.button {
+  height: 24px;
+  width: 20px;
+  background: transparent;
+  cursor: pointer;
+  color: currentColor;
+  transition: color 0.2s ease-in-out;
+}

package/src/components/TrackHeader/TrackHeaderOptions/index.js

@@ -0,0 +1 @@
+export * from './TrackHeaderOptions'

package/src/components/VoiceConversionForm/BesideFooter/BesideFooter.jsx

@@ -0,0 +1,74 @@
+import { Popover, Box, Flex, Switch } from '@radix-ui/themes'
+import { IconButton } from '../../IconButton/IconButton'
+import { Slider } from '../../Slider/Slider'
+import { PreferencesIcon } from '../../../icons'
+import { TooltipWithInfoIcon } from '../../TooltipWithInfoIcon/TooltipWithInfoIcon'
+import { Text } from '../../Text/Text'
+
+export function BesideFooter({
+  formState,
+  onFormStateChange,
+  disabled,
+  i18n = { _: (text) => text },
+}) {
+  const handlePitchChange = (value) => {
+    onFormStateChange({
+      ...formState,
+      pitchShift: value[0],
+    })
+  }
+
+  const handleIsolateVocalsChange = (checked) => {
+    onFormStateChange({
+      ...formState,
+      isolateVocals: checked,
+    })
+  }
+
+  return (
+    <Popover.Root modal={true}>
+      <Popover.Trigger disabled={disabled}>
+        <IconButton variant="soft" size="2" disabled={disabled}>
+          <PreferencesIcon width={16} height={16} />
+        </IconButton>
+      </Popover.Trigger>
+      <Popover.Content minWidth="350px" maxWidth="100%" side="top">
+        <Box>
+          <Flex direction="column" gap="4">
+            <Flex justify="between" align="center">
+              <Flex align="center" gap="2">
+                <Text size="2" style={{ color: 'var(--white)' }}>
+                  {i18n._('Isolate Vocals')}
+                </Text>
+                <TooltipWithInfoIcon
+                  content={i18n._(
+                    'Extract vocals from the audio before applying voice conversion. Useful for mixed audio sources.',
+                  )}
+                />
+              </Flex>
+
+              <Flex align="center" gap="2">
+                <Switch
+                  checked={formState.isolateVocals}
+                  onCheckedChange={handleIsolateVocalsChange}
+                />
+              </Flex>
+            </Flex>
+            <Slider
+              title={i18n._('Pitch Shift')}
+              tooltip={i18n._(
+                'Adjust the pitch in semitones of the converted voice.',
+              )}
+              value={[formState.pitchShift || 0]}
+              onValueChange={handlePitchChange}
+              min={-12}
+              max={12}
+              step={1}
+              info={`${formState.pitchShift} ${i18n._('Semitones')}`}
+            />
+          </Flex>
+        </Box>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}