@moises.ai/design-system 3.6.23 → 3.6.25

package/package.json

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

package/src/components/ProjectsList/ProjectsList.jsx

@@ -1,36 +1,44 @@
 import { Flex, Text, Separator } from '@radix-ui/themes'
 import styles from './ProjectsList.module.css'
-import { useState, createContext, useContext } from 'react'
+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: () => { },
 })
 
 export const ProjectsList = ({
   children,
+  projects = [],
   onClickTrack,
   onInsertAllTracks,
+  onProjectClick
 }) => {
   const [openedItem, setOpenedItem] = useState(null)
 
+  const content = typeof children === 'function' ? children(projects) : children
+
   return (
     <ProjectsListContext.Provider
       value={{
+        projects,
         onClickTrack,
         onInsertAllTracks,
+        onProjectClick,
         openedItem,
         setOpenedItem,
       }}
     >
       <Flex direction="column" width="100%">
-        {children}
+        {content}
       </Flex>
     </ProjectsListContext.Provider>
   )
@@ -45,24 +53,27 @@ const ProjectsListItem = ({
   tracks = [],
   ...props
 }) => {
-  const { onClickTrack, onInsertAllTracks, openedItem, setOpenedItem } = useContext(ProjectsListContext)
+  const { projects, onClickTrack, onInsertAllTracks, onProjectClick, openedItem, setOpenedItem } = useContext(ProjectsListContext)
   const [showAllTracks, setShowAllTracks] = useState(false)
 
-  const handleClickProject = () => {
+  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 = (e) => {
+  const handleClickShowAllTracks = useCallback((e) => {
     e.preventDefault()
     e.stopPropagation()
     setShowAllTracks(!showAllTracks)
-  }
+  }, [showAllTracks])
 
 
   return (

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

@@ -6,21 +6,39 @@ export default {
   component: ProjectsList,
   tags: ['autodocs'],
   argTypes: {
+    projects: { control: false },
     onClickTrack: { action: 'track-clicked' },
     onInsertAllTracks: { action: 'insert-all-tracks' },
   },
 }
 
 export const Default = {
+  args: {
+    projects,
+    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}
       >
-        {projects.map((project) => (
-          <ProjectsList.Item key={project.id} {...project} />
-        ))}
+        {(projects) =>
+          projects.map((project) => (
+            <ProjectsList.Item key={project.id} {...project} />
+          ))
+        }
       </ProjectsList>
     )
   },