@moises.ai/design-system 3.7.1 → 3.7.3

package/package.json

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

package/src/components/ContextMenu/ContextMenu.jsx

@@ -1,7 +1,6 @@
 import React, { memo } from 'react'
 import { ContextMenu as ContextMenuRadix } from 'radix-ui'
 import classNames from 'classnames'
-
 import { createRenderItem, styles } from '../../lib/menu'
 
 const renderOption = createRenderItem(ContextMenuRadix)

package/src/components/ProfileMenu/ProfileMenu.stories.jsx

@@ -1,4 +1,4 @@
-import { Flex } from '../../index'
+import { Flex, Text } from '../../index'
 import { ProfileMenu } from './ProfileMenu'
 
 export default {
@@ -15,6 +15,34 @@ export const Default = {
       plan: 'Premium',
     },
     menuOptions: [
+      {
+        type: 'custom',
+        key: 'credits-header',
+        customRender: () => <div key="credits-header">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="showActiveTrigger">
+            <div>
+              <Text style={{ fontSize: 14, fontWeight: 'normal', lineHeight: '20px' }}>Credits:</Text>{` `}
+              <Text style={{ color: '#fff', fontSize: 14, fontWeight: 400 }}>45</Text>
+              <Text style={{ color: '#fff', fontSize: 14, fontWeight: 400, marginLeft: 4 }}>/60</Text >
+            </div>
+            <button
+              type="button"
+              aria-label="Upgrade"
+              title="Upgrade"
+              style={{ border: 'none', cursor: 'pointer', backgroundColor: '#00dae8', color: '#061415', fontSize: 12, fontWeight: 500, padding: '4px 8px', borderRadius: 4 }}
+              onClick={() => {
+                alert('Upgrade clicked')
+              }}
+            >
+              Upgrade
+            </button>
+          </div>
+        </div>
+      },
+      {
+        type: 'separator',
+        key: 'separator-credits',
+      },
       {
         type: 'item',
         key: 'account-settings',

package/src/components/ProjectsList/ProjectItem/ProjectItem.jsx

@@ -0,0 +1,136 @@
+import { Flex, Text, Separator, Spinner, Button } from '@radix-ui/themes'
+import { useState, useContext, useCallback, useMemo } from 'react'
+import { ArrowLeftIcon, NoMusicIcon, ChevronDownIcon, ChevronUpIcon, InfoIcon } from '../../../icons'
+import { ProjectsListContext } from '../context'
+import { ProductsBrandPattern } from '../../ProductsBrandPattern/ProductsBrandPattern'
+import styles from './ProjectItem.module.css'
+
+const ProjectItem = ({
+  id,
+  title,
+  artist,
+  cover,
+  type,
+  tracks: allTracks = [],
+  loading = false,
+  failed = false,
+  children,
+  ...props
+}) => {
+  const {
+    projects,
+    onInsertAllTracks,
+    onProjectClick,
+    openedItem,
+    setOpenedItem,
+  } = useContext(ProjectsListContext)
+  const [showAllTracks, setShowAllTracks] = useState(false)
+
+  const tracks = useMemo(() => {
+    return showAllTracks ? allTracks : allTracks.slice(0, 6)
+  }, [allTracks, showAllTracks])
+
+  const handleClickProject = useCallback(() => {
+    if (failed) return
+    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, failed])
+
+  const handleClickShowAllTracks = useCallback((e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setShowAllTracks(!showAllTracks)
+  }, [showAllTracks])
+
+  const handleInsertAllTracks = useCallback((e) => {
+    e.stopPropagation()
+    onInsertAllTracks?.(allTracks)
+  }, [onInsertAllTracks, allTracks])
+
+  return (
+    <Flex
+      direction="column"
+      gap="2"
+      p="1"
+      className={`${styles.item} ${openedItem === id ? styles.opened : ''} ${failed ? styles.failed : ''}`}
+      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>
+
+          {failed ? (
+            <Flex size="1" gap="1" className={styles.projectFailed}>
+              <InfoIcon width={16} height={16} />
+              <Text size="1">Failed</Text>
+            </Flex>
+          ) : artist && (
+            <Text size="1" className={styles.projectArtist}>
+              {artist}
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+
+      {openedItem === id && (
+        <Flex direction="column">
+          {allTracks.length === 0 && !loading && (
+            <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>
+          )}
+
+          {loading && (
+            <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>
+          )}
+
+          {allTracks.length > 0 && (
+            <Flex direction="column" gap="1">
+              {typeof children === 'function' ? children(tracks) : children}
+
+              <Flex direction="row" gap="3" p="2" align="center" justify="center">
+                <Button variant="ghost" color="gray" style={{ flex: '1' }}
+                  onClick={handleInsertAllTracks}
+                >
+                  <ArrowLeftIcon width={16} height={16} /> Insert all
+                </Button>
+
+                {allTracks.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>
+  )
+}
+
+export default ProjectItem

package/src/components/ProjectsList/{ProjectsList.module.css → ProjectItem/ProjectItem.module.css}

@@ -1,11 +1,16 @@
 .projectTitle {
   color: var(--neutral-12);
+  padding-right: var(--space-2);
 }
 
 .projectArtist {
   color: var(--neutral-alpha-9);
 }
 
+.projectFailed {
+  color: var(--error-alpha-11);
+}
+
 .projectCover {
   width: 48px;
   height: 48px;
@@ -21,7 +26,7 @@
   pointer-events: none;
 }
 
-.item {
+.item:not(.failed) {
   cursor: pointer;
   border-radius: var(--radius-4);
 
@@ -34,39 +39,3 @@
     background: rgba(216, 244, 246, 0.04);
   }
 }
-
-.itemTrack {
-  cursor: pointer;
-  border-radius: var(--radius-3);
-
-  .iconArrowLeft {
-    display: none;
-  }
-
-  &:hover {
-    background: var(--neutral-alpha-2);
-    box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
-
-    .iconArrowLeft {
-      display: block;
-    }
-
-    .iconTrack {
-      display: none;
-    }
-  }
-}
-
-.trackTitle {
-  color: var(--neutral-alpha-12);
-}
-
-.icon {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--neutral-alpha-2);
-  border-radius: var(--radius-3);
-}

package/src/components/ProjectsList/ProjectTrack/ProjectTrack.jsx

@@ -0,0 +1,44 @@
+import { Flex, Text } from '@radix-ui/themes'
+import { useCallback, useContext } from 'react'
+import { ArrowLeftIcon } from '../../../icons'
+import { ProjectsListContext } from '../context'
+import { getIconFromTrackId } from '../utils'
+import styles from './ProjectTrack.module.css'
+
+const ProjectTrack = ({
+  ...props
+}) => {
+  const { onClickTrack } = useContext(ProjectsListContext)
+  const { id, title } = props
+
+  const handleClickTrack = useCallback((e) => {
+    e.stopPropagation()
+    onClickTrack?.(props)
+  }, [onClickTrack, props])
+
+  return (
+    <Flex direction="column" gap="1">
+      <Flex
+        direction="row"
+        gap="3"
+        className={styles.itemTrack}
+        onClick={handleClickTrack}
+      >
+        <div className={styles.icon}>
+          <Flex className={styles.iconTrack}>
+            {getIconFromTrackId(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}>
+            {title}
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default ProjectTrack

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

@@ -0,0 +1,35 @@
+.itemTrack {
+  cursor: pointer;
+  border-radius: var(--radius-3);
+
+  .iconArrowLeft {
+    display: none;
+  }
+
+  &:hover {
+    background: var(--neutral-alpha-2);
+    box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
+
+    .iconArrowLeft {
+      display: block;
+    }
+
+    .iconTrack {
+      display: none;
+    }
+  }
+}
+
+.trackTitle {
+  color: var(--neutral-alpha-12);
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--neutral-alpha-2);
+  border-radius: var(--radius-3);
+}

package/src/components/ProjectsList/ProjectsList.jsx

@@ -1,19 +1,8 @@
-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 ProjectTrack from './ProjectTrack/ProjectTrack'
+import ProjectItem from './ProjectItem/ProjectItem'
 
 export const ProjectsList = ({
   children,
@@ -24,8 +13,6 @@ export const ProjectsList = ({
 }) => {
   const [openedItem, setOpenedItem] = useState(null)
 
-  const content = typeof children === 'function' ? children(projects) : children
-
   return (
     <ProjectsListContext.Provider
       value={{
@@ -38,143 +25,14 @@ 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

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

@@ -34,9 +34,9 @@ export const Default = {
         onInsertAllTracks={args.onInsertAllTracks}
         onProjectClick={args.onProjectClick}
       >
-        {(projects) =>
-          projects.map((project) => (
-            <ProjectsList.Item key={project.id} {...project} />
+        {(tracks) =>
+          tracks.map((track) => (
+            <ProjectsList.Track key={track.id} {...track} />
           ))
         }
       </ProjectsList>
@@ -80,9 +80,9 @@ export const WithEmptyProjects = {
         onInsertAllTracks={args.onInsertAllTracks}
         onProjectClick={args.onProjectClick}
       >
-        {(projects) =>
-          projects.map((project) => (
-            <ProjectsList.Item key={project.id} {...project} />
+        {(tracks) =>
+          tracks.map((track) => (
+            <ProjectsList.Track key={track.id} {...track} />
           ))
         }
       </ProjectsList>
@@ -99,7 +99,7 @@ export const WithProjectLoading = {
       cover: null,
       duration: 0,
       type: 'studio',
-      isLoading: true,
+      loading: true,
     }, {
       id: '456',
       title: 'Empty Project 2',
@@ -127,9 +127,56 @@ export const WithProjectLoading = {
         onInsertAllTracks={args.onInsertAllTracks}
         onProjectClick={args.onProjectClick}
       >
-        {(projects) =>
-          projects.map((project) => (
-            <ProjectsList.Item key={project.id} {...project} />
+        {(tracks) =>
+          tracks.map((track) => (
+            <ProjectsList.Track key={track.id} {...track} />
+          ))
+        }
+      </ProjectsList>
+    )
+  },
+}
+
+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 (
+      <ProjectsList
+        projects={args.projects}
+        onClickTrack={args.onClickTrack}
+        onInsertAllTracks={args.onInsertAllTracks}
+        onProjectClick={args.onProjectClick}
+      >
+        {(tracks) =>
+          tracks.map((track) => (
+            <ProjectsList.Track key={track.id} {...track} />
           ))
         }
       </ProjectsList>

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/lib/menu/Menu.module.css

@@ -5,7 +5,8 @@
   min-width: 151px;
   background-color: var(--panel-solid) !important;
   padding: 4px;
-  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.30), 0 12px 60px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
   z-index: 9999;
   border: 1px solid var(--neutral-alpha-3);
   animation-duration: 400ms;
@@ -84,8 +85,9 @@
 .menuPortal {
   border-radius: 8px;
   border: 1px solid var(--neutral-alpha-3);
-  background: #18191B;
-  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.30), 0 12px 60px 0 rgba(0, 0, 0, 0.15);
+  background: #18191b;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
 }
 
 .menuItem {
@@ -271,6 +273,13 @@
   }
 }
 
+.menuCustomRender,
+.menuSubTrigger[data-highlighted]:is(.menuCustomRender),
+.menuItem[data-highlighted]:is(.menuCustomRender) {
+  background-color: transparent;
+  cursor: default;
+}
+
 .menuItem[data-state='open'],
 .menuTrigger[data-state='open']:not(.showActiveTrigger),
 .menuTrigger[data-highlighted]:not(.showActiveTrigger) {
@@ -409,4 +418,3 @@
     color: var(--aqua-dark-alpha-11);
   }
 }
-