@moises.ai/design-system 3.7.3 → 3.9.0

package/src/components/ProjectsList/ProjectTrackVoice/ProjectTrackVoice.module.css

@@ -0,0 +1,60 @@
+.itemTrack {
+  cursor: pointer;
+  border-radius: var(--radius-3);
+  overflow: hidden;
+
+  .iconArrowLeft {
+    display: none;
+  }
+
+  &:hover {
+    background: var(--neutral-alpha-2);
+    box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
+
+    .iconArrowLeft {
+      display: block;
+    }
+
+    .coverImage {
+      display: none;
+    }
+  }
+}
+
+.trackTitle {
+  color: var(--neutral-alpha-12);
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cover {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--neutral-alpha-2);
+  border-radius: var(--radius-3);
+}
+
+.coverImage {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-3);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-alpha-10);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+  }
+}

package/src/components/ProjectsList/ProjectsList.jsx

@@ -1,8 +1,9 @@
 import { Flex } from '@radix-ui/themes'
 import { useState } from 'react'
 import { ProjectsListContext } from './context'
-import ProjectTrack from './ProjectTrack/ProjectTrack'
 import ProjectItem from './ProjectItem/ProjectItem'
+import ProjectTrack from './ProjectTrack/ProjectTrack'
+import ProjectTrackVoice from './ProjectTrackVoice/ProjectTrackVoice'
 
 export const ProjectsList = ({
   children,
@@ -36,3 +37,4 @@ export const ProjectsList = ({
 }
 
 ProjectsList.Track = ProjectTrack
+ProjectsList.TrackVoice = ProjectTrackVoice

package/src/components/ProjectsList/ProjectsList.stories.jsx

@@ -1,5 +1,6 @@
+import { Flex } from '@radix-ui/themes'
 import { ProjectsList } from './ProjectsList'
-import { projects } from './utils-stories'
+import { projects, projectsVoiceStudio } from './utils-stories'
 
 export default {
   title: 'Components/ProjectsList',
@@ -28,18 +29,20 @@ export const Default = {
   },
   render: (args) => {
     return (
-      <ProjectsList
-        projects={args.projects}
-        onClickTrack={args.onClickTrack}
-        onInsertAllTracks={args.onInsertAllTracks}
-        onProjectClick={args.onProjectClick}
-      >
-        {(tracks) =>
-          tracks.map((track) => (
-            <ProjectsList.Track key={track.id} {...track} />
-          ))
-        }
-      </ProjectsList>
+      <Flex width="300px">
+        <ProjectsList
+          projects={args.projects}
+          onClickTrack={args.onClickTrack}
+          onInsertAllTracks={args.onInsertAllTracks}
+          onProjectClick={args.onProjectClick}
+        >
+          {(tracks) =>
+            tracks.map((track) => (
+              <ProjectsList.Track key={track.id} {...track} />
+            ))
+          }
+        </ProjectsList>
+      </Flex>
     )
   },
 }
@@ -74,18 +77,20 @@ export const WithEmptyProjects = {
   },
   render: (args) => {
     return (
-      <ProjectsList
-        projects={args.projects}
-        onClickTrack={args.onClickTrack}
-        onInsertAllTracks={args.onInsertAllTracks}
-        onProjectClick={args.onProjectClick}
-      >
-        {(tracks) =>
-          tracks.map((track) => (
-            <ProjectsList.Track key={track.id} {...track} />
-          ))
-        }
-      </ProjectsList>
+      <Flex width="300px">
+        <ProjectsList
+          projects={args.projects}
+          onClickTrack={args.onClickTrack}
+          onInsertAllTracks={args.onInsertAllTracks}
+          onProjectClick={args.onProjectClick}
+        >
+          {(tracks) =>
+            tracks.map((track) => (
+              <ProjectsList.Track key={track.id} {...track} />
+            ))
+          }
+        </ProjectsList>
+      </Flex>
     )
   },
 }
@@ -121,18 +126,20 @@ export const WithProjectLoading = {
   },
   render: (args) => {
     return (
-      <ProjectsList
-        projects={args.projects}
-        onClickTrack={args.onClickTrack}
-        onInsertAllTracks={args.onInsertAllTracks}
-        onProjectClick={args.onProjectClick}
-      >
-        {(tracks) =>
-          tracks.map((track) => (
-            <ProjectsList.Track key={track.id} {...track} />
-          ))
-        }
-      </ProjectsList>
+      <Flex width="300px">
+        <ProjectsList
+          projects={args.projects}
+          onClickTrack={args.onClickTrack}
+          onInsertAllTracks={args.onInsertAllTracks}
+          onProjectClick={args.onProjectClick}
+        >
+          {(tracks) =>
+            tracks.map((track) => (
+              <ProjectsList.Track key={track.id} {...track} />
+            ))
+          }
+        </ProjectsList>
+      </Flex>
     )
   },
 }
@@ -168,18 +175,61 @@ export const WithProjectFailed = {
   },
   render: (args) => {
     return (
-      <ProjectsList
-        projects={args.projects}
-        onClickTrack={args.onClickTrack}
-        onInsertAllTracks={args.onInsertAllTracks}
-        onProjectClick={args.onProjectClick}
-      >
-        {(tracks) =>
-          tracks.map((track) => (
-            <ProjectsList.Track key={track.id} {...track} />
-          ))
-        }
-      </ProjectsList>
+      <Flex width="300px">
+        <ProjectsList
+          projects={args.projects}
+          onClickTrack={args.onClickTrack}
+          onInsertAllTracks={args.onInsertAllTracks}
+          onProjectClick={args.onProjectClick}
+        >
+          {(tracks) =>
+            tracks.map((track) => (
+              <ProjectsList.Track key={track.id} {...track} />
+            ))
+          }
+        </ProjectsList>
+      </Flex>
+    )
+  },
+}
+
+export const WithTrackVoice = {
+  args: {
+    projects: projectsVoiceStudio,
+    onProjectClick: (project, opened) => {
+      console.log('project', project)
+      console.log('opened', opened)
+    },
+    onClickTrack: (track) => {
+      console.log('track', track)
+    },
+    onInsertAllTracks: (tracks) => {
+      console.log('insert-all-tracks', tracks)
+    },
+    onChangeTransfer: (track) => {
+      console.log('change-transfer', track)
+    },
+  },
+  render: (args) => {
+    return (
+      <Flex width="300px">
+        <ProjectsList
+          projects={args.projects}
+          onClickTrack={args.onClickTrack}
+          onInsertAllTracks={args.onInsertAllTracks}
+          onProjectClick={args.onProjectClick}
+        >
+          {(tracks) =>
+            tracks.map((track) => (
+              <ProjectsList.TrackVoice
+                key={track.id}
+                {...track}
+                onChangeTransfer={args.onChangeTransfer}
+              />
+            ))
+          }
+        </ProjectsList>
+      </Flex>
     )
   },
 }

package/src/components/ProjectsList/utils-stories.js

@@ -19,7 +19,7 @@ export const projects = [
       },
       {
         "id": "b9470aco6y4a9dlef0c035",
-        "title": "blink 182 - adams song.mp3",
+        "title": "blink 182 - adams song - very long name.mp3",
         "audioUrl": "https://storage.googleapis.com/moises-stage--tasks-us-east1/studio-tracks/3842c898-9e0c-41e8-8927-7d9f67c50bc6/15a1072d5d04c507eebf39b464329572b8b400c76d8f11197a5f83147a336de5.audio"
       }
     ]
@@ -191,7 +191,7 @@ export const projects = [
   {
     "id": "3612a6132234-b86c-408e-b23296-b9f0f22dbeb108",
     "title": "Project without cover and type",
-    "artist": null,
+    "artist": "Artist Very Long Name With Very Long Name",
     "cover": null,
     "duration": 227.0215,
     "tracks": [
@@ -208,3 +208,94 @@ export const projects = [
     ]
   }
 ]
+
+export const projectsVoiceStudio = [
+  {
+    "id": "3842c898-9e0c-41e8-8927-7d9f67c50bc6",
+    "title": "vocals - Billie Bossa Nova",
+    "artist": "Billie Bossa Nova",
+    "cover": null,
+    "duration": 30.72,
+    "type": "voice",
+    "tracks": [
+      {
+        "id": "q8pzli0h38ptcx21q09h2al-0",
+        "title": "Original",
+        "type": "voice",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0b926e1f-52ce-4581-9f76-09545eed1c61/vocals.m4",
+      },
+      {
+        "id": "q8pzli0h38ptcxq09h2al-0",
+        "title": "Ana",
+        "type": "voice",
+        "cover": "https://picsum.photos/101/101",
+        "transfers": [
+          {
+            "id": "q8pzli0h38ptcxq09h2al",
+            "pitchShift": "-12",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0b926e1f-52ce-4581-9f76-09545eed1c61/vocals.m4"
+          },
+          {
+            "id": "q8pzli0h38ptcxq09h2al2",
+            "pitchShift": "-13",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0a6c2a03-320e-49f2-9ea6-a5ad7bbb6141/vocals.m4a"
+          }
+        ],
+      },
+      {
+        "id": "j1nvrdhrai85pftttb9bo",
+        "title": "Carrie",
+        "cover": "https://picsum.photos/110/110",
+        "type": "voice",
+        "transfers": [
+          {
+            "id": "j1nvrdhrai85pftttb9bo-0",
+            "pitchShift": "3",
+            "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/9b8df9e7-b35d-487f-a24c-a33e20597203/vocals.m4a"
+          },
+          {
+            "id": "j1nvrdhrai85pftttb9bo-1",
+            "pitchShift": "4",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/f38d1691-d0a5-4904-b6a9-2935881f1e75/vocals.m4a"
+          }
+        ],
+      },
+      {
+        "id": "b9470aco6y4a9dlef0c035",
+        "title": "Amelia",
+        "cover": "https://picsum.photos/103/103",
+        "type": "voice",
+        "transfers": [
+          {
+            "id": "b9470aco6y4a9dlef0c035-0",
+            "pitchShift": "-10",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0b926e1f-52ce-4581-9f76-09545eed1c61/vocals.m4"
+          },
+          {
+            "id": "b9470aco6y4a9dlef0c035-1",
+            "pitchShift": "-11",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0a6c2a03-320e-49f2-9ea6-a5ad7bbb6141/vocals.m4a"
+          }
+        ],
+      },
+      {
+        "id": "b9470aco6y4a9dlef0c123035",
+        "title": "Lauren Very Long Name",
+        "cover": "https://picsum.photos/120/400",
+        "type": "voice",
+        "transfers": [
+          {
+            "id": "b9470aco6y4a9dleqqwqf0c035-0",
+            "pitchShift": "7",
+            "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/9b8df9e7-b35d-487f-a24c-a33e20597203/vocals.m4a"
+          },
+          {
+            "id": "b9470aco6y4a9d1111111lef0c035-1",
+            "pitchShift": "8",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/f38d1691-d0a5-4904-b6a9-2935881f1e75/vocals.m4a"
+          }
+        ],
+      }
+    ]
+  }
+]

package/src/components/SetlistList/SetlistList.jsx

@@ -213,6 +213,8 @@ export const SetlistItem = ({
           <DropdownMenu
             open={dropdownMenuOpen}
             onOpenChange={onDropdownMenuOpenChange}
+            side="bottom"
+            align="end"
             trigger={
               <Flex
                 className={classNames(styles.dropdownTriggerWrapper, {

package/src/index.jsx

@@ -140,3 +140,5 @@ export { TrackHeader } from './components/TrackHeader/TrackHeader'
 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'