@moises.ai/design-system 3.5.2 → 3.5.4

package/package.json

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

package/src/components/ProjectsList/ProjectsList.jsx

@@ -1,24 +1,59 @@
-import { Flex, Text, Separator, Button } from '@radix-ui/themes'
+import { Flex, Text, Separator } from '@radix-ui/themes'
 import styles from './ProjectsList.module.css'
-import { useState } from 'react'
+import { useState, createContext, useContext } from 'react'
 import { ArrowLeftIcon, NoMusicIcon, ChevronDownIcon, ChevronUpIcon } from '../../icons'
-import { getIconFromTrackId } from './utils'
+import { getIconFromTrackId, getProjectCover } from './utils'
+import { Button } from '../Button/Button'
+
+const ProjectsListContext = createContext({
+  onClickTrack: null,
+  onInsertAllTracks: null,
+  openedItem: null,
+  setOpenedItem: () => { },
+})
 
 export const ProjectsList = ({
-  projects = [],
+  children,
   onClickTrack,
   onInsertAllTracks,
 }) => {
   const [openedItem, setOpenedItem] = useState(null)
+
+  return (
+    <ProjectsListContext.Provider
+      value={{
+        onClickTrack,
+        onInsertAllTracks,
+        openedItem,
+        setOpenedItem,
+      }}
+    >
+      <Flex direction="column" width="100%">
+        {children}
+      </Flex>
+    </ProjectsListContext.Provider>
+  )
+}
+
+const ProjectsListItem = ({
+  id,
+  title,
+  artist,
+  cover,
+  type,
+  tracks = [],
+  ...props
+}) => {
+  const { onClickTrack, onInsertAllTracks, openedItem, setOpenedItem } = useContext(ProjectsListContext)
   const [showAllTracks, setShowAllTracks] = useState(false)
 
-  const handleClickProject = (projectId) => {
+  const handleClickProject = () => {
     setShowAllTracks(false)
 
-    if (openedItem === projectId) {
+    if (openedItem === id) {
       setOpenedItem(null)
     } else {
-      setOpenedItem(projectId)
+      setOpenedItem(id)
     }
   }
 
@@ -28,105 +63,104 @@ export const ProjectsList = ({
     setShowAllTracks(!showAllTracks)
   }
 
+  const project = { id, title, artist, cover, type, tracks }
+
   return (
-    <Flex direction="column" width="100%">
-      {projects.map((project, index) => (
-        <Flex
-          key={project.id}
-          direction="column"
-          gap="2"
-          p="1"
-          className={`${styles.item} ${openedItem === project.id ? styles.opened : ''}`}
-          onClick={() => handleClickProject(project.id)}
-        >
-          <Flex direction="row" gap="3">
-            <Flex className={styles.projectCover}>
-              <img
-                src={project.cover || `https://picsum.photos/48?random=${index}`}
-                alt={project.title}
-                draggable={false}
-                className={styles.projectCoverImage}
-              />
-            </Flex>
+    <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}>
+          <img
+            src={getProjectCover(project)}
+            alt={title}
+            draggable={false}
+            className={styles.projectCoverImage}
+          />
+        </Flex>
 
-            <Flex direction="column" gap="1" align="start" justify="center">
-              <Text size="2" className={styles.projectTitle}>
-                {project.title}
-              </Text>
+        <Flex direction="column" gap="1" align="start" justify="center">
+          <Text size="2" className={styles.projectTitle}>
+            {title}
+          </Text>
 
-              {project.artist && (
-                <Text size="1" className={styles.projectArtist}>
-                  {project.artist}
-                </Text>
-              )}
+          {artist && (
+            <Text size="1" className={styles.projectArtist}>
+              {artist}
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+
+      {openedItem === id && (
+        <Flex direction="column">
+          {tracks.length === 0 && (
+            <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>
-          </Flex>
-
-          {openedItem === project.id && (
-            <Flex direction="column">
-              {project.tracks.length === 0 && (
-                <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>
-              )}
-
-              {project.tracks.length > 0 && (
-                <Flex direction="column" gap="1">
-                  {project.tracks.slice(0, showAllTracks ? project.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="gray" style={{ flex: '1' }}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        onInsertAllTracks?.(project.tracks)
-                      }}
-                    >
-                      <ArrowLeftIcon width={16} height={16} /> Insert all
-                    </Button>
+          )}
 
-                    {project.tracks.length > 6 && (
-                      <>
-                        <Separator orientation="vertical" />
+          {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>
 
-                        <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 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 >
+      )}
+    </Flex>
   )
 }
+
+ProjectsList.Item = ProjectsListItem

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

@@ -15,11 +15,13 @@ export const Default = {
   render: (args) => {
     return (
       <ProjectsList
-        {...args}
-      />
+        onClickTrack={args.onClickTrack}
+        onInsertAllTracks={args.onInsertAllTracks}
+      >
+        {projects.map((project) => (
+          <ProjectsList.Item key={project.id} {...project} />
+        ))}
+      </ProjectsList>
     )
   },
-  args: {
-    projects: projects,
-  },
 }

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

@@ -5,6 +5,7 @@ export const projects = [
     "artist": "NPR Music: Tiny Desk Concert",
     "cover": null,
     "duration": 30.72,
+    "type": "studio",
     "tracks": [
       {
         "id": "q8pzli0h38ptcxq09h2al",
@@ -29,6 +30,7 @@ export const projects = [
     "artist": null,
     "cover": null,
     "duration": 19.924,
+    "type": "stems",
     "tracks": [
       {
         "id": "original",
@@ -143,6 +145,7 @@ export const projects = [
     "artist": null,
     "cover": null,
     "duration": 1062.0343,
+    "type": "master",
     "tracks": []
   },
   {
@@ -151,6 +154,7 @@ export const projects = [
     "artist": null,
     "cover": null,
     "duration": 227.0215,
+    "type": "voice",
     "tracks": [
       {
         "id": "bass",
@@ -170,6 +174,7 @@ export const projects = [
     "artist": "Led Zeppelin",
     "cover": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks2/operations/FILEMETADATA_A/76477978-88b0-4dd1-b729-ad760b9f1b9c/cover.jpeg",
     "duration": 296.8065,
+    "type": "lyrics",
     "tracks": [
       {
         "id": "bass",
@@ -182,5 +187,24 @@ export const projects = [
         "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e4325003-662f-4aeb-b75a-14797654828a/other.m4a"
       }
     ]
+  },
+  {
+    "id": "3612a6132234-b86c-408e-b23296-b9f0f22dbeb108",
+    "title": "Project without cover and type",
+    "artist": null,
+    "cover": null,
+    "duration": 227.0215,
+    "tracks": [
+      {
+        "id": "bass",
+        "title": "bass",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/09239f2d-f93f-4924-86a0-2277e5ba35ea/bass.m4a"
+      },
+      {
+        "id": "other",
+        "title": "other",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/09239f2d-f93f-4924-86a0-2277e5ba35ea/other.m4a"
+      }
+    ]
   }
 ]

package/src/components/ProjectsList/utils.jsx

@@ -19,52 +19,78 @@ import {
     MusicIcon,
     SparkBarsIcon,
 } from '../../icons'
+import thumbCoverLyrics from './assets/images/thumb-song-lyrics.jpg'
+import thumbCoverMaster from './assets/images/thumb-song-master.jpg'
+import thumbCoverStems from './assets/images/thumb-song-stems.jpg'
+import thumbCoverStudio from './assets/images/thumb-song-studio.jpg'
+import thumbCoverVoice from './assets/images/thumb-song-voice.jpg'
 
 export const getIconFromTrackId = (trackId) => {
     switch (trackId) {
         case 'original':
-            return <SpliterIcon />
+            return <SpliterIcon width={16} height={16} />
         case 'vocals':
-            return <VocalIcon />
+            return <VocalIcon width={16} height={16} />
         case 'backing_vocals':
-            return <VocalsBackgroundIcon />
+            return <VocalsBackgroundIcon width={16} height={16} />
         case 'drums':
-            return <DrumsIcon />
+            return <DrumsIcon width={16} height={16} />
         case 'bass':
-            return <BassIcon />
+            return <BassIcon width={16} height={16} />
         case 'guitars':
-            return <ElectricGuitarIcon />
+            return <ElectricGuitarIcon width={16} height={16} />
         case 'other_kit':
-            return <IsolateDrumsIcon />
+            return <IsolateDrumsIcon width={16} height={16} />
         case "piano":
-            return <PianoIcon />
+            return <PianoIcon width={16} height={16} />
         case "wind":
-            return <WindIcon />
+            return <WindIcon width={16} height={16} />
         case "strings":
-            return <StringsIcon />
+            return <StringsIcon width={16} height={16} />
         case "keys":
-            return <KeysIcon />
+            return <KeysIcon width={16} height={16} />
         case "kick":
-            return <KickdrumIcon />
+            return <KickdrumIcon width={16} height={16} />
         case "snare":
-            return <SnareIcon />
+            return <SnareIcon width={16} height={16} />
         case "toms":
-            return <TomsIcon />
+            return <TomsIcon width={16} height={16} />
         case "hat":
-            return <HiHatIcon />
+            return <HiHatIcon width={16} height={16} />
         case "cymbals":
-            return <CymbalsIcon />
+            return <CymbalsIcon width={16} height={16} />
         case "rhythm":
-            return <ElectricGuitarIcon />
+            return <ElectricGuitarIcon width={16} height={16} />
         case "lead":
-            return <ElectricGuitarIcon />
+            return <ElectricGuitarIcon width={16} height={16} />
         case "electric":
-            return <AcousticGuitarIcon />
+            return <AcousticGuitarIcon width={16} height={16} />
         case "acoustic":
-            return <AcousticGuitarIcon />
+            return <AcousticGuitarIcon width={16} height={16} />
         case 'other':
-            return <MusicIcon />
+            return <MusicIcon width={16} height={16} />
         default:
-            return <SparkBarsIcon />
+            return <SparkBarsIcon width={16} height={16} />
+    }
+}
+
+export const getProjectCover = (project) => {
+    if (project?.cover) {
+        return project.cover
+    }
+
+    switch (project?.type) {
+        case 'studio':
+            return thumbCoverStudio
+        case 'stems':
+            return thumbCoverStems
+        case 'voice':
+            return thumbCoverVoice
+        case 'master':
+            return thumbCoverMaster
+        case 'lyrics':
+            return thumbCoverLyrics
+        default:
+            return thumbCoverLyrics
     }
 }