@moises.ai/design-system 3.7.2 → 3.8.0

package/src/components/ProjectsList/ProjectsList.jsx

@@ -1,19 +1,9 @@
-import { Flex, Text, Separator, Spinner } from '@radix-ui/themes'
-import styles from './ProjectsList.module.css'
-import { useState, createContext, useContext, useCallback } from 'react'
-import { ArrowLeftIcon, NoMusicIcon, ChevronDownIcon, ChevronUpIcon } from '../../icons'
-import { getIconFromTrackId } from './utils'
-import { Button } from '../Button/Button'
-import { ProductsBrandPattern } from '../ProductsBrandPattern/ProductsBrandPattern'
-
-const ProjectsListContext = createContext({
-  projects: [],
-  onClickTrack: null,
-  onInsertAllTracks: null,
-  onProjectClick: null,
-  openedItem: null,
-  setOpenedItem: () => { },
-})
+import { Flex } from '@radix-ui/themes'
+import { useState } from 'react'
+import { ProjectsListContext } from './context'
+import ProjectItem from './ProjectItem/ProjectItem'
+import ProjectTrack from './ProjectTrack/ProjectTrack'
+import ProjectTrackVoice from './ProjectTrackVoice/ProjectTrackVoice'
 
 export const ProjectsList = ({
   children,
@@ -24,8 +14,6 @@ export const ProjectsList = ({
 }) => {
   const [openedItem, setOpenedItem] = useState(null)
 
-  const content = typeof children === 'function' ? children(projects) : children
-
   return (
     <ProjectsListContext.Provider
       value={{
@@ -38,143 +26,15 @@ export const ProjectsList = ({
       }}
     >
       <Flex direction="column" width="100%">
-        {content}
+        {projects.map((project) => (
+          <ProjectItem key={project.id} {...project}>
+            {children}
+          </ProjectItem>
+        ))}
       </Flex>
     </ProjectsListContext.Provider>
   )
 }
 
-const ProjectsListItem = ({
-  id,
-  title,
-  artist,
-  cover,
-  type,
-  tracks = [],
-  isLoading = false,
-  ...props
-}) => {
-  const { projects, onClickTrack, onInsertAllTracks, onProjectClick, openedItem, setOpenedItem } = useContext(ProjectsListContext)
-  const [showAllTracks, setShowAllTracks] = useState(false)
-
-  const handleClickProject = useCallback(() => {
-    setShowAllTracks(false)
-    const project = projects.find((p) => p.id === id)
-
-    if (openedItem === id) {
-      setOpenedItem(null)
-      onProjectClick?.(project, false)
-    } else {
-      setOpenedItem(id)
-      onProjectClick?.(project, true)
-    }
-  }, [id, openedItem, setOpenedItem, onProjectClick, projects])
-
-  const handleClickShowAllTracks = useCallback((e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setShowAllTracks(!showAllTracks)
-  }, [showAllTracks])
-
-
-  return (
-    <Flex
-      direction="column"
-      gap="2"
-      p="1"
-      className={`${styles.item} ${openedItem === id ? styles.opened : ''}`}
-      onClick={handleClickProject}
-      {...props}
-    >
-      <Flex direction="row" gap="3">
-        <Flex className={styles.projectCover}>
-          <ProductsBrandPattern type={type} cover={cover} size="48px" />
-        </Flex>
-
-        <Flex direction="column" gap="1" align="start" justify="center">
-          <Text size="2" className={styles.projectTitle}>
-            {title}
-          </Text>
-
-          {artist && (
-            <Text size="1" className={styles.projectArtist}>
-              {artist}
-            </Text>
-          )}
-        </Flex>
-      </Flex>
-
-      {openedItem === id && (
-        <Flex direction="column">
-          {tracks.length === 0 && !isLoading && (
-            <Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
-              <NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
-              <Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>This file has no tracks</Text>
-            </Flex>
-          )}
-
-          {isLoading && (
-            <Flex direction="row" gap="3" p="5" align="center" justify="center">
-              <Spinner width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
-              <Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>Loading tracks...</Text>
-            </Flex>
-          )}
-
-          {tracks.length > 0 && (
-            <Flex direction="column" gap="1">
-              {tracks.slice(0, showAllTracks ? tracks.length : 6).map((track) => (
-                <Flex
-                  key={track.id}
-                  direction="row"
-                  gap="3"
-                  className={styles.itemTrack}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onClickTrack?.(track)
-                  }}
-                >
-                  <div className={styles.icon}>
-                    <Flex className={styles.iconTrack}>
-                      {getIconFromTrackId(track.id)}
-                    </Flex>
-                    <ArrowLeftIcon width={16} height={16} className={styles.iconArrowLeft} />
-                  </div>
-
-                  <Flex direction="column" gap="1" align="start" justify="center">
-                    <Text size="2" className={styles.trackTitle}>
-                      {track.title}
-                    </Text>
-                  </Flex>
-                </Flex>
-              ))}
-
-              <Flex direction="row" gap="3" p="2" align="center" justify="center">
-                <Button variant="ghost" color="neutral" style={{ flex: '1' }}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onInsertAllTracks?.(tracks)
-                  }}
-                >
-                  <ArrowLeftIcon width={16} height={16} /> Insert all
-                </Button>
-
-                {tracks.length > 6 && (
-                  <>
-                    <Separator orientation="vertical" />
-
-                    <Button variant="ghost" color="gray" style={{ flex: '1' }} onClick={handleClickShowAllTracks}>
-                      {showAllTracks ? 'Show less' : 'Show more'}
-                      {showAllTracks ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
-                    </Button>
-                  </>
-                )}
-              </Flex>
-            </Flex>
-          )}
-        </Flex>
-      )}
-    </Flex>
-  )
-}
-
-ProjectsList.Item = ProjectsListItem
+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}
-      >
-        {(projects) =>
-          projects.map((project) => (
-            <ProjectsList.Item key={project.id} {...project} />
-          ))
-        }
-      </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}
-      >
-        {(projects) =>
-          projects.map((project) => (
-            <ProjectsList.Item key={project.id} {...project} />
-          ))
-        }
-      </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>
     )
   },
 }
@@ -99,7 +104,7 @@ export const WithProjectLoading = {
       cover: null,
       duration: 0,
       type: 'studio',
-      isLoading: true,
+      loading: true,
     }, {
       id: '456',
       title: 'Empty Project 2',
@@ -121,18 +126,110 @@ export const WithProjectLoading = {
   },
   render: (args) => {
     return (
-      <ProjectsList
-        projects={args.projects}
-        onClickTrack={args.onClickTrack}
-        onInsertAllTracks={args.onInsertAllTracks}
-        onProjectClick={args.onProjectClick}
-      >
-        {(projects) =>
-          projects.map((project) => (
-            <ProjectsList.Item key={project.id} {...project} />
-          ))
-        }
-      </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 WithProjectFailed = {
+  args: {
+    projects: [{
+      id: '123',
+      title: 'Project Failed',
+      artist: null,
+      cover: null,
+      duration: 0,
+      type: 'studio',
+      failed: true,
+    }, {
+      id: '456',
+      title: 'Empty Project 2',
+      artist: null,
+      cover: null,
+      duration: 0,
+      type: 'master',
+    }],
+    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)
+    },
+  },
+  render: (args) => {
+    return (
+      <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/context.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+
+export const ProjectsListContext = createContext({
+  projects: [],
+  onClickTrack: null,
+  onInsertAllTracks: null,
+  onProjectClick: null,
+  openedItem: null,
+  setOpenedItem: () => { },
+})

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"
+          }
+        ],
+      }
+    ]
+  }
+]