@moises.ai/design-system 3.6.25 → 3.6.27

package/package.json

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

package/src/components/ContextMenu/CanvasContextMenu.jsx

@@ -0,0 +1,73 @@
+import classNames from 'classnames'
+import { ContextMenu as ContextMenuRadix } from 'radix-ui'
+import React, { forwardRef, memo } from 'react'
+
+import { createRenderItem, styles } from '../../lib/menu'
+
+const renderOption = createRenderItem(ContextMenuRadix)
+
+/**
+ * Variant of ContextMenu for programmatic opening from non-DOM event sources
+ * (e.g. Pixi canvas). Instead of wrapping a visible trigger element, it exposes
+ * a ref to an internal hidden div that can receive a synthetic `contextmenu` event.
+ *
+ * Usage:
+ *   const triggerRef = useRef(null)
+ *   triggerRef.current?.dispatchEvent(
+ *     new MouseEvent('contextmenu', { bubbles: true, clientX: x, clientY: y })
+ *   )
+ *   ...
+ *   <CanvasContextMenu ref={triggerRef} options={[...]}>
+ *     {children}  // rendered between trigger and content, inside the same Root
+ *   </CanvasContextMenu>
+ */
+export const CanvasContextMenu = memo(
+  forwardRef(function CanvasContextMenu(
+    {
+      children,
+      options,
+      className,
+      size = '2',
+      onSelectionChange,
+      closeOnSelect = true,
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      // The outer div catches the bubbling contextmenu event AFTER Radix has already
+      // processed it on the trigger, suppressing the browser's native context menu
+      // without interfering with Radix's own handler.
+      <div onContextMenu={(e) => e.preventDefault()} style={{ display: 'contents' }}>
+        <ContextMenuRadix.Root>
+          <ContextMenuRadix.Trigger asChild>
+            <div
+              ref={ref}
+              style={{ position: 'fixed', width: 0, height: 0, pointerEvents: 'none' }}
+            />
+          </ContextMenuRadix.Trigger>
+          {children}
+          {options?.length > 0 && (
+            <ContextMenuRadix.Content
+              className={classNames(styles.menuContent, className)}
+              side={props.side}
+              align={props.align}
+              sideOffset={5}
+              alignOffset={0}
+              onCloseAutoFocus={(event) => {
+                event.preventDefault()
+              }}
+              onClick={(event) => event.stopPropagation()}
+            >
+              {options?.map((option) =>
+                renderOption(option, size, onSelectionChange, closeOnSelect),
+              )}
+            </ContextMenuRadix.Content>
+          )}
+        </ContextMenuRadix.Root>
+      </div>
+    )
+  }),
+)
+
+CanvasContextMenu.displayName = 'CanvasContextMenu'

package/src/components/ProjectsList/ProjectsList.jsx

@@ -1,4 +1,4 @@
-import { Flex, Text, Separator } from '@radix-ui/themes'
+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'
@@ -51,6 +51,7 @@ const ProjectsListItem = ({
   cover,
   type,
   tracks = [],
+  isLoading = false,
   ...props
 }) => {
   const { projects, onClickTrack, onInsertAllTracks, onProjectClick, openedItem, setOpenedItem } = useContext(ProjectsListContext)
@@ -105,13 +106,20 @@ const ProjectsListItem = ({
 
       {openedItem === id && (
         <Flex direction="column">
-          {tracks.length === 0 && (
+          {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) => (

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

@@ -43,3 +43,96 @@ export const Default = {
     )
   },
 }
+
+export const WithEmptyProjects = {
+  args: {
+    projects: [{
+      id: '123',
+      title: 'Empty Project',
+      artist: null,
+      cover: null,
+      duration: 0,
+      type: 'studio',
+    }, {
+      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}
+      >
+        {(projects) =>
+          projects.map((project) => (
+            <ProjectsList.Item key={project.id} {...project} />
+          ))
+        }
+      </ProjectsList>
+    )
+  },
+}
+
+export const WithProjectLoading = {
+  args: {
+    projects: [{
+      id: '123',
+      title: 'Project Loading',
+      artist: null,
+      cover: null,
+      duration: 0,
+      type: 'studio',
+      isLoading: 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}
+      >
+        {(projects) =>
+          projects.map((project) => (
+            <ProjectsList.Item key={project.id} {...project} />
+          ))
+        }
+      </ProjectsList>
+    )
+  },
+}

package/src/index.jsx

@@ -81,6 +81,7 @@ export { Callout } from './components/Callout/Callout'
 export { Card as CardWidget } from './components/Card/Card'
 export { Checkbox } from './components/Checkbox/Checkbox'
 export { CigarBar } from './components/CigarBar/CigarBar'
+export { CanvasContextMenu } from './components/ContextMenu/CanvasContextMenu'
 export { ContextMenu } from './components/ContextMenu/ContextMenu'
 export { Countdown } from './components/Countdown/Countdown'
 export { DataTable } from './components/DataTable/DataTable'