@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/VoiceConversionForm/VoiceConversionForm.stories.jsx

@@ -0,0 +1,582 @@
+import { VoiceConversionForm } from './VoiceConversionForm'
+
+export default {
+  title: 'Extensions/VoiceConversionForm',
+  component: VoiceConversionForm,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px', height: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+
+A comprehensive form component for AI voice conversion with support for multiple voice models and audio processing options.
+
+---
+
+## Basic Usage
+
+\`\`\`jsx
+import { VoiceConversionForm } from '@moises.ai/design-system'
+
+<VoiceConversionForm
+  voices={voices}
+  formState={formState}
+  onFormStateChange={setFormState}
+  i18n={i18n}
+  onSubmit={handleSubmit}
+  onSelectTrack={handleSelectTrack}
+/>
+\`\`\`
+
+
+---
+
+## Component API
+
+###  Props
+
+| Prop | Description |
+|------|-------------|
+| \`voices\` | Array of available voice models for conversion. |
+| \`formState\` | Current form state containing selected voice, track, and settings. |
+| \`onFormStateChange\` | Callback to update form state. Can accept a new state object or updater function. |
+| \`onVoiceDetailsClick\` | Callback when user clicks to see voice details. |
+| \`onBackToList\` | Callback to return to voice list from details view. |
+| \`voiceDetailsId\` | ID of the voice to show in details view. |
+| \`i18n\` | Internationalization object with _ method for translations. |
+| \`isLoading\` | Loading state during voice conversion. |
+| \`limitReached\` | Whether conversion concurrency limit has been reached. |
+| \`submitted\` | Whether the conversion has been successfully submitted. |
+| \`error\` | Error message to display. |
+| \`onSubmit\` | Callback fired when the conversion button is clicked. |
+| \`onSelectTrack\` | Callback to open track selector. |
+| \`onMountConcurrency\` | Callback fired when concurrency component mounts. |
+| \`showUpgradeConcurrency\` | Shows upgrade button when limit is reached. |
+| \`onClickUpgradeConcurrency\` | Callback for upgrade button click on concurrency component. |
+| \`onRemoveTrack\` | Callback to remove selected track. |
+
+### Definitions
+
+\`\`\`jsx
+
+voice = {
+  name: string;
+  description: string;
+  identifier: string;
+  lowestNote: string;
+  highestNote: string;
+  metadata: {
+    cover: string;
+    image: string;
+    avatar: string;
+    previewUrl: string;
+    vocalRange: string;
+    microphones: string;
+    recordingStudio?: string;
+    pitchProfile:{1: number, 2: number, 3: number, 4: number, ... n: number}
+    }
+  };
+  tags: string;
+}
+
+formState = {
+  selectedVoice: voice | null;
+  trackId: string | null;
+  trackName: string | null;
+  customAudio: ArrayBuffer | null;
+  pitchShift: number;
+  isolateVocals: boolean;
+}
+\`\`\`
+
+---
+
+## Notes
+
+- The form automatically switches between voice list and voice details views
+- Convert button is disabled when: limit reached, no track selected, or no voice selected
+- Users can preview voice samples by clicking the avatar play button
+- Advanced settings (pitch shift, isolate vocals) are available in the preferences popover
+- Error and Success messages provide feedback on conversion status
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    voices: {
+      description: 'Array of available voice models for conversion',
+      control: false,
+    },
+    formState: {
+      description: 'Current form state containing all conversion parameters',
+      control: false,
+    },
+    onFormStateChange: {
+      description: 'Callback fired when form state changes',
+      control: false,
+    },
+    onVoiceDetailsClick: {
+      description: 'Callback when user clicks to see voice details',
+      control: false,
+    },
+    onBackToList: {
+      description: 'Callback to return to voice list from details view',
+      control: false,
+    },
+    voiceDetailsId: {
+      description: 'ID of the voice to show in details view',
+      control: false,
+    },
+    i18n: {
+      description: 'Internationalization object with _ method for translations',
+      control: false,
+    },
+    isLoading: {
+      description: 'Loading state during voice conversion',
+      control: false,
+    },
+    limitReached: {
+      description: 'Whether conversion concurrency limit has been reached',
+      control: false,
+    },
+    submitted: {
+      description: 'Whether the conversion has been successfully submitted',
+      control: false,
+    },
+    error: {
+      description: 'Error message to display',
+      control: false,
+    },
+    onSubmit: {
+      description: 'Callback fired when conversion button is clicked',
+      control: false,
+    },
+    onSelectTrack: {
+      description: 'Callback to open track selector',
+      control: false,
+    },
+    onMountConcurrency: {
+      description: 'Callback fired when concurrency component mounts',
+      control: false,
+    },
+    showUpgradeConcurrency: {
+      description: 'Whether to show upgrade button when limit is reached',
+      control: false,
+    },
+    onClickUpgradeConcurrency: {
+      description: 'Callback for upgrade button click',
+      control: false,
+    },
+    onRemoveTrack: {
+      description: 'Callback to remove selected track',
+      control: false,
+    },
+  },
+}
+
+// Mock voices data - matching the provided voice models
+const mockVoices = [
+  {
+    name: 'Zuri',
+    description:
+      'Uma voz mezzo-soprano envolvente e sedutora. Com um tom firme, uma respiração suave e um vibrato cheio de vida, perfeita para brilhar em projetos de R&B ou pop/rock comoventes.',
+    identifier: 'zuri',
+    lowestNote: 'D#3',
+    highestNote: 'C5',
+    metadata: {
+      cover:
+        'https://storage.googleapis.com/moises-api-assets/voice/zuri-cover.jpg',
+      image: 'https://storage.googleapis.com/moises-api-assets/voice/zuri.jpg',
+      avatar:
+        'https://storage.googleapis.com/moises-api-assets/voice/zuri-avatar.jpg',
+      previewUrl:
+        'https://storage.googleapis.com/moises-api-assets/voice/demo_zuri.m4a',
+      vocalRange: 'Mezzo-soprano',
+      microphones:
+        'Beyerdynamic M160, Neumann U87, Shure Sm57, Telefunken ELA M 251',
+      pitchProfile: {},
+    },
+    tags: 'Beyerdynamic M160, Neumann U87, Shure Sm57, Telefunken ELA M 251',
+  },
+  {
+    name: 'Amy',
+    description:
+      'Uma voz mezzo-soprano muio expressiva, com uma profundidade de tom evocativa. Uma voz de peito robusta e uma voz de cabeça delicada, mas estável em todo o espectro. Um vibrato espesso e aveludado faz desta a escolha perfeita para canções de Neo-soul, pop ou gospel.',
+    identifier: 'amy',
+    lowestNote: 'F3',
+    highestNote: 'B4',
+    metadata: {
+      cover:
+        'https://storage.googleapis.com/moises-api-assets/voice/amy-cover.jpg',
+      image: 'https://storage.googleapis.com/moises-api-assets/voice/amy.jpg',
+      avatar:
+        'https://storage.googleapis.com/moises-api-assets/voice/amy-avatar.jpg',
+      previewUrl:
+        'https://storage.googleapis.com/moises-api-assets/voice/demo_amy.m4a',
+      vocalRange: 'Mezzo-soprano',
+      microphones: 'AKG C414 XLII, Shure Sm57',
+      pitchProfile: {
+        1: 0,
+        2: 0,
+        3: 0,
+        4: 0,
+        5: 0,
+        6: 0,
+        7: 0,
+        8: 0,
+        9: 0,
+        10: 0,
+      },
+    },
+    tags: 'AKG C414 XLII, Shure Sm57',
+  },
+  {
+    name: 'Rosa',
+    description:
+      'Uma voz mezzo-soprano delicada e quase melancólicae carregada de leveza. A paixão e tranquilidade são evocadas pela combinação fascinante entre a contenção tonal e um vibrato denso, embora frágil, fazendo dessa voz uma escolha perfeita para baladas pop emocionantes ou um jazz delicado.',
+    identifier: 'rosa',
+    lowestNote: 'D3',
+    highestNote: 'F#5',
+    metadata: {
+      cover:
+        'https://storage.googleapis.com/moises-api-assets/voice/rosa-cover.jpg',
+      image: 'https://storage.googleapis.com/moises-api-assets/voice/rosa.jpg',
+      avatar:
+        'https://storage.googleapis.com/moises-api-assets/voice/rosa-avatar.jpg',
+      previewUrl:
+        'https://storage.googleapis.com/moises-api-assets/voice/demo_rosa.m4a',
+      vocalRange: 'Mezzo-soprano',
+      pitchProfile: {
+        1: 0,
+        2: 0,
+        3: 0,
+        4: 0,
+        5: 0,
+        6: 0,
+        7: 0,
+        8: 0,
+        9: 0,
+        10: 0,
+      },
+    },
+    tags: 'Neumann U87, Shure Sm7B',
+  },
+  {
+    name: 'Aisha',
+    description:
+      'Um voz contralto tanto sensual quanto delicada, com um vibrato dinâmico e uma leve aspereza. Uma ótima escolha para rock suave ou canções pop mais tranquilas.',
+    identifier: 'aisha',
+    lowestNote: 'B1',
+    highestNote: 'F#5',
+    metadata: {
+      cover:
+        'https://storage.googleapis.com/moises-api-assets/voice/aisha-cover.jpg',
+      image: 'https://storage.googleapis.com/moises-api-assets/voice/aisha.jpg',
+      avatar:
+        'https://storage.googleapis.com/moises-api-assets/voice/aisha-avatar.jpg',
+      previewUrl:
+        'https://storage.googleapis.com/moises-api-assets/voice/demo_aisha.m4a',
+      vocalRange: 'Contralto',
+      microphones: 'AEA R44C, Electro-voice RE20, Manley Referece Cardioid',
+      pitchProfile: {
+        1: 0,
+        2: 0,
+        3: 0,
+        4: 0,
+        5: 0,
+        6: 0,
+        7: 0,
+        8: 0,
+        9: 0,
+        10: 0,
+      },
+    },
+    tags: 'AEA R44C, Electro-voice RE20, Manley Referece Cardioid',
+  },
+]
+
+// Mock i18n object (English)
+const mockI18n = {
+  _: (text) => text,
+}
+
+// Mock i18n object (Portuguese)
+const mockI18nPt = {
+  _: (text) => {
+    const translations = {
+      'Convert Voice': 'Converter Voz',
+      'Use this model': 'Usar este modelo',
+      Details: 'Detalhes',
+      'Select audio file to convert ':
+        'Selecionar arquivo de áudio para converter ',
+      Select: 'Selecionar',
+      Remove: 'Remover',
+      'Voice conversion initialized!': 'Conversão de voz iniciada!',
+      'The selected track to convert': 'A faixa selecionada para conversão',
+      'Isolate Vocals': 'Isolar Vocais',
+      'Pitch Shift': 'Mudança de Tom',
+      Semitones: 'Semitons',
+      'Microphones used': 'Microfones utilizados',
+      'Recorded at': 'Gravado em',
+      "You've reached the simultaneous voice conversion limit. Wait to finish before continuing.":
+        'Você atingiu o limite de conversões simultâneas. Aguarde terminar antes de continuar.',
+      'Unlock up to 10 simultaneous conversions,':
+        'Desbloqueie até 10 conversões simultâneas,',
+      'upgrade to PRO.': 'faça upgrade para PRO.',
+    }
+    return translations[text] || text
+  },
+}
+
+// Default form state
+const FORM_DEFAULTS = {
+  selectedVoice: null,
+  trackId: null,
+  trackName: null,
+  customAudio: null,
+  pitchShift: 0,
+  isolateVocals: false,
+}
+
+// Mock callbacks
+const mockCallbacks = {
+  onFormStateChange: (updater) => {
+    console.log(
+      'Form state changed:',
+      typeof updater === 'function' ? 'updater function' : updater,
+    )
+  },
+  onVoiceDetailsClick: (id) => {
+    console.log('Voice details clicked:', id)
+  },
+  onBackToList: () => {
+    console.log('Back to list clicked')
+  },
+  onSubmit: (data) => {
+    console.log('Submit clicked:', data)
+  },
+  onSelectTrack: () => {
+    console.log('Select track clicked')
+  },
+  onMountConcurrency: () => {
+    console.log('Concurrency component mounted')
+  },
+  onClickUpgradeConcurrency: () => {
+    console.log('Upgrade concurrency clicked')
+  },
+  onRemoveTrack: () => {
+    console.log('Remove track clicked')
+  },
+}
+
+/**
+ * ## Default State
+ *
+ * The form in its initial state with voice list visible.
+ * User can browse available voices and select one for conversion.
+ */
+export const Default = {
+  args: {
+    voices: mockVoices,
+    formState: FORM_DEFAULTS,
+    i18n: mockI18n,
+    isLoading: false,
+    limitReached: false,
+    submitted: false,
+    error: null,
+    showUpgradeConcurrency: false,
+    ...mockCallbacks,
+  },
+}
+
+/**
+ * ## Voice Details View
+ *
+ * Shows the detailed view of a specific voice model.
+ * Displays full description, vocal range, microphones used, and preview audio.
+ */
+export const VoiceDetails = {
+  args: {
+    voices: mockVoices,
+    formState: FORM_DEFAULTS,
+    voiceDetailsId: 'rosa',
+    i18n: mockI18n,
+    isLoading: false,
+    limitReached: false,
+    submitted: false,
+    error: null,
+    showUpgradeConcurrency: false,
+    ...mockCallbacks,
+  },
+}
+
+/**
+ * ## With Track Selected
+ *
+ * Form with an audio track selected for conversion.
+ * Shows the track name and allows user to remove it.
+ */
+export const WithTrackSelected = {
+  args: {
+    voices: mockVoices,
+    formState: {
+      ...FORM_DEFAULTS,
+      selectedVoice: mockVoices[1],
+      trackName: 'My Vocal Track.mp3',
+    },
+    i18n: mockI18n,
+    isLoading: false,
+    limitReached: false,
+    submitted: false,
+    error: null,
+    showUpgradeConcurrency: false,
+    ...mockCallbacks,
+  },
+}
+
+/**
+ * ## With Track ID from Project
+ *
+ * Form with a track selected from the project (via trackId).
+ * Displays the track name with option to remove.
+ */
+export const WithTrackFromProject = {
+  args: {
+    voices: mockVoices,
+    formState: {
+      ...FORM_DEFAULTS,
+      selectedVoice: mockVoices[2],
+      trackId: 'track-123',
+      trackName: 'Lead Vocals',
+    },
+    i18n: mockI18n,
+    isLoading: false,
+    limitReached: false,
+    submitted: false,
+    error: null,
+    showUpgradeConcurrency: false,
+    ...mockCallbacks,
+  },
+}
+
+/**
+ * ## Loading State
+ *
+ * Shows the form while a voice conversion is being processed.
+ * The convert button displays a loading spinner and is disabled.
+ */
+export const Loading = {
+  args: {
+    voices: mockVoices,
+    formState: {
+      ...FORM_DEFAULTS,
+      selectedVoice: mockVoices[0],
+      trackName: 'My Vocal Track.mp3',
+    },
+    i18n: mockI18n,
+    isLoading: true,
+    limitReached: false,
+    submitted: false,
+    error: null,
+    showUpgradeConcurrency: false,
+    ...mockCallbacks,
+  },
+}
+
+/**
+ * ## Error State
+ *
+ * Displays an error message when conversion fails.
+ * User can see what went wrong and try again.
+ */
+export const WithError = {
+  args: {
+    voices: mockVoices,
+    formState: {
+      ...FORM_DEFAULTS,
+      selectedVoice: mockVoices[0],
+      trackName: 'My Vocal Track.mp3',
+    },
+    i18n: mockI18n,
+    isLoading: false,
+    limitReached: false,
+    submitted: false,
+    error: 'Voice conversion failed. Please try again.',
+    showUpgradeConcurrency: false,
+    ...mockCallbacks,
+  },
+}
+
+/**
+ * ## Limit Reached
+ *
+ * Shows the concurrency limit warning when user has reached
+ * their maximum concurrent conversions. Free users see an upgrade prompt.
+ */
+export const LimitReached = {
+  args: {
+    voices: mockVoices,
+    formState: FORM_DEFAULTS,
+    i18n: mockI18n,
+    isLoading: false,
+    limitReached: true,
+    submitted: false,
+    error: null,
+    showUpgradeConcurrency: true,
+    ...mockCallbacks,
+  },
+}
+
+/**
+ * ## Limit Reached (Pro User)
+ *
+ * Shows the concurrency limit for Pro users without upgrade button.
+ * Pro users just need to wait for current conversions to finish.
+ */
+export const LimitReachedPro = {
+  args: {
+    voices: mockVoices,
+    formState: FORM_DEFAULTS,
+    i18n: mockI18n,
+    isLoading: false,
+    limitReached: true,
+    submitted: false,
+    error: null,
+    showUpgradeConcurrency: false,
+    ...mockCallbacks,
+  },
+}
+
+/**
+ * ## Ready to Convert
+ *
+ * Complete setup ready for conversion with voice and track selected.
+ * This is the typical state before user clicks the convert button.
+ */
+export const ReadyToConvert = {
+  args: {
+    voices: mockVoices,
+    formState: {
+      ...FORM_DEFAULTS,
+      selectedVoice: mockVoices[2],
+      trackName: 'Vocal Performance.wav',
+      pitchShift: 0,
+      isolateVocals: false,
+    },
+    i18n: mockI18n,
+    isLoading: false,
+    limitReached: false,
+    submitted: false,
+    error: null,
+    showUpgradeConcurrency: false,
+    ...mockCallbacks,
+  },
+}

package/src/components/VoiceConversionForm/VoiceDetails/VoiceDetails.jsx

@@ -0,0 +1,93 @@
+import { Flex, Text, Box, Avatar, ScrollArea } from '@radix-ui/themes'
+import { AbbeyRoadIcon } from '../../../icons'
+import { getProxiedAvatarUrl } from '../../../utils/avatarUtils'
+import { Waveform } from '../Waveform/Waveform'
+import styles from './VoiceDetails.module.css'
+
+export const VoiceDetails = ({
+  item,
+  wavegroup,
+  i18n = { _: (text) => text },
+}) => {
+  return (
+    <ScrollArea height="100%" width="100%" scrollbars="vertical">
+      <Flex
+        direction="column"
+        gap="4"
+        overflow="auto"
+        pb="4"
+        pr="3"
+        height="100%"
+      >
+        <Box position="relative">
+          <Avatar
+            src={getProxiedAvatarUrl(item?.metadata?.image)}
+            fallback={item?.name || 'Voice'}
+            className={styles.responsiveAvatar}
+          />
+
+          <Flex position="absolute" bottom="8px" left="12px" direction="column">
+            <Text size="5" weight="regular" className={styles.neutralAlpha12}>
+              {item?.name}
+            </Text>
+            <Text
+              size="1"
+              weight="regular"
+              className={styles.descriptionVoiceList}
+            >
+              {item?.metadata?.vocalRange} <span>|</span> {item?.lowestNote} -{' '}
+              {item?.highestNote}
+            </Text>
+          </Flex>
+        </Box>
+
+        <Flex minHeight="36px">
+          <Waveform
+            audio={item?.metadata?.previewUrl}
+            wavegroup={wavegroup}
+            size="md"
+          />
+        </Flex>
+        <Text size="2" weight="regular" className={styles.neutralAlpha11}>
+          {item?.description}
+        </Text>
+
+        <Flex justify="between" align="center" gap="2">
+          <Flex direction="column">
+            {(item?.metadata?.microphones || item?.tags) && (
+              <>
+                <Text size="1" className={styles.neutralAlpha10}>
+                  {i18n._('Microphones used')}
+                </Text>
+                <Text size="1" className={styles.neutralAlpha11}>
+                  {item?.metadata?.microphones || item?.tags}
+                </Text>
+              </>
+            )}
+          </Flex>
+          {item?.metadata?.recordingStudio && (
+            <Flex direction="row" align="center" gap="2">
+              <AbbeyRoadIcon
+                width={35}
+                height={26}
+                style={{
+                  flexShrink: 0,
+                  minWidth: '35px',
+                  minHeight: '26px',
+                }}
+              />
+              <Flex direction="column">
+                <Text size="1" style={{ color: 'var(--neutral-alpha-10)' }}>
+                  {i18n._('Recorded at')}
+                </Text>
+                <Text size="1" style={{ color: 'var(--neutral-alpha-11)' }}>
+                  Abbey Road Studios
+                </Text>
+              </Flex>
+            </Flex>
+          )}
+        </Flex>
+      </Flex>
+    </ScrollArea>
+  )
+}

package/src/components/VoiceConversionForm/VoiceDetails/VoiceDetails.module.css

@@ -0,0 +1,44 @@
+.responsiveAvatar {
+    width: 100%;
+    height: 328px;
+    object-fit: cover;
+    position: relative;
+  
+    @media (min-width: 400px) {
+      height: 404px;
+    }
+  }
+  
+  .responsiveAvatar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%, rgba(17, 17, 17, 0.80) 100%);
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
+  .descriptionVoiceList {
+    color: var(--neutral-alpha-11);
+  
+    span {
+      color: var(--neutral-alpha-6);
+    }
+  }
+  
+  .neutralAlpha11 {
+    color: var(--neutral-alpha-11);
+  }
+
+  .neutralAlpha12 {
+    color: var(--neutral-alpha-12);
+  }
+
+  .neutralAlpha10 {
+    color: var(--neutral-alpha-10);
+  }
+  
+