@moises.ai/design-system 3.10.6 → 3.10.7

package/src/components/SetlistList/SetlistList.stories.jsx

@@ -1,5 +1,17 @@
-import { useState } from 'react'
-import { SetlistList } from './SetlistList'
+import { useState, useMemo, useCallback } from 'react'
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  pointerWithin,
+} from '@dnd-kit/core'
+import { snapCenterToCursor } from '@dnd-kit/modifiers'
+import { SetlistList, SetlistItem } from './SetlistList'
+import { DataTable } from '../DataTable/DataTable'
+import { DataTableDragOverlay } from '../DataTable/dnd/DataTableDragOverlay'
+import { toDragRow } from '../DataTable/dnd/dataTableDnd.utils'
 
 const defaultSetlists = [
   {
@@ -177,7 +189,7 @@ export default {
 export const Default = {
   render: (args) => {
     const [selectedSetlistId, setSelectedSetlistId] = useState(
-      defaultSetlists[0].id
+      defaultSetlists[0].id,
     )
 
     return (
@@ -228,68 +240,291 @@ export const Empty = {
   },
 }
 
-export const Droppable = {
-  render: (args) => {
-    const [activeDropSetlistId, setActiveDropSetlistId] = useState(null)
-    const [lastDropSetlistId, setLastDropSetlistId] = useState(null)
+const trackRows = [
+  {
+    id: 'track-1',
+    thumb:
+      'https://d2.moises.ai/v3/download/moises-production--tasks/operations/FILEMETADATA_A/81735fa7-bba1-42f1-bd20-7208d3d77fc2/cover.jpeg',
+    title: 'Come Together',
+    artist: 'The Beatles',
+    RECENT: 'Nov 11, 2025',
+    BPM: 110,
+    KEY: 'G',
+    DURATION: '03:48',
+  },
+  {
+    id: 'track-2',
+    title: 'Let It Be',
+    type: 'studio',
+    artist: 'The Beatles',
+    RECENT: 'Nov 11, 2025',
+    BPM: 110,
+    KEY: 'E♭m',
+    DURATION: '03:48',
+  },
+  {
+    id: 'track-3',
+    title: 'Here Comes The Sun',
+    artist: 'The Beatles',
+    type: 'stems',
+    RECENT: 'Dec 02, 2025',
+    BPM: 129,
+    KEY: 'C#',
+    DURATION: '03:05',
+  },
+  {
+    id: 'track-4',
+    title: 'Yesterday',
+    type: 'voice',
+    artist: 'The Beatles',
+    RECENT: 'Jan 15, 2025',
+    BPM: 95,
+    KEY: 'F',
+    DURATION: '02:05',
+  },
+  {
+    id: 'track-5',
+    title: 'Help!',
+    type: 'master',
+    artist: 'The Beatles',
+    RECENT: 'Oct 30, 2025',
+    BPM: 184,
+    KEY: 'Bm',
+    DURATION: '02:18',
+  },
+]
+
+const trackColumns = [
+  { id: 'title', label: 'Title', sortable: true },
+  { id: 'RECENT', label: 'Created', sortable: true },
+  { id: 'BPM', label: 'BPM', sortable: true },
+  { id: 'KEY', label: 'Key', sortable: true },
+  { id: 'DURATION', label: 'Duration', sortable: true },
+]
+
+const dndSetlists = defaultSetlists.slice(0, 4)
+
+export const DragFromDataTable = {
+  render: () => {
+    const [selectedRowIds, setSelectedRowIds] = useState([])
+    const [activeDragContext, setActiveDragContext] = useState(null)
+    const [dropLog, setDropLog] = useState([])
+
+    const sensors = useSensors(
+      useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    )
+
+    const normalizedRows = useMemo(
+      () => trackRows.map((row, index) => toDragRow(row, index)),
+      [],
+    )
+
+    const selectedSet = useMemo(
+      () => new Set(selectedRowIds.map(String)),
+      [selectedRowIds],
+    )
+
+    const handleDragStart = useCallback(
+      (event) => {
+        const activeId = String(event.active?.id ?? '')
+        const dragRow = normalizedRows.find((r) => r.id === activeId)
+        if (!dragRow) return
+
+        const isDraggedRowSelected = selectedSet.has(activeId)
+        const selectedRows = isDraggedRowSelected
+          ? normalizedRows.filter((r) => selectedSet.has(r.id))
+          : [dragRow]
+
+        setActiveDragContext({
+          row: dragRow,
+          selectedRows,
+          isDraggedRowSelected,
+        })
+      },
+      [normalizedRows, selectedSet],
+    )
+
+    const handleDragEnd = useCallback(
+      (event) => {
+        const { active, over } = event
+
+        if (over && activeDragContext) {
+          const setlistId = String(over.id).replace('setlist-drop-', '')
+          const setlist = dndSetlists.find((s) => s.id === setlistId)
+
+          if (setlist) {
+            const trackNames = activeDragContext.selectedRows
+              .map((r) => r.title)
+              .join(', ')
+            setDropLog((prev) => [
+              {
+                id: Date.now(),
+                text: `"${trackNames}" → "${setlist.label}"`,
+              },
+              ...prev.slice(0, 4),
+            ])
+          }
+        }
+
+        setActiveDragContext(null)
+      },
+      [activeDragContext],
+    )
+
+    const handleDragCancel = useCallback(() => {
+      setActiveDragContext(null)
+    }, [])
 
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-        <div
-          draggable
-          onDragStart={(event) => {
-            event.dataTransfer.setData('application/x-track-id', 'track-01')
-          }}
-          style={{
-            width: 'fit-content',
-            border: '1px dashed var(--accent-9)',
-            borderRadius: 8,
-            padding: '8px 12px',
-            cursor: 'grab',
-            color: 'var(--accent-11)',
-          }}
-        >
-          Drag me and drop on a setlist
-        </div>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={pointerWithin}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+      >
+        <div style={{ display: 'flex', gap: 24, height: '100%' }}>
+          <div
+            style={{
+              flex: 1,
+              maxHeight: 400,
+              overflow: 'auto',
+              borderRadius: 8,
+            }}
+          >
+            <DataTable
+              columns={trackColumns}
+              data={trackRows}
+              selectedRowIds={selectedRowIds}
+              selectedFilesLabel={
+                selectedRowIds.length === 1
+                  ? '1 file selected'
+                  : `${selectedRowIds.length} files selected`
+              }
+              onSelectRow={(id, checked) =>
+                setSelectedRowIds((prev) =>
+                  checked
+                    ? prev.includes(id)
+                      ? prev
+                      : [...prev, id]
+                    : prev.filter((x) => x !== id),
+                )
+              }
+              onSelectAll={(checked) =>
+                setSelectedRowIds(checked ? trackRows.map((r) => r.id) : [])
+              }
+              sorting={{ field: 'RECENT', sort: 'DESC' }}
+              rowDraggable
+              renderDndContext={false}
+              getDragPreviewLabel={(row, selectedRows) =>
+                selectedRows.length > 1
+                  ? `${selectedRows.length} files`
+                  : (row.trackName ?? row.title)
+              }
+            />
+          </div>
+
+          <div
+            style={{
+              width: 260,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 4,
+            }}
+          >
+            <div
+              style={{
+                fontSize: 11,
+                fontWeight: 600,
+                textTransform: 'uppercase',
+                letterSpacing: 1,
+                color: 'var(--neutral-alpha-8)',
+                padding: '0 12px 8px',
+              }}
+            >
+              Drop on a setlist
+            </div>
 
-        <div style={{ color: 'var(--neutral-alpha-11)', fontSize: 12 }}>
-          {lastDropSetlistId
-            ? `Last dropped on: ${lastDropSetlistId}`
-            : 'No drop yet'}
+            {dndSetlists.map((setlist) => (
+              <SetlistItem
+                key={setlist.id}
+                setlistId={setlist.id}
+                text={setlist.label}
+                subtitle={setlist.subtitle}
+                dndDroppableId={`setlist-drop-${setlist.id}`}
+              />
+            ))}
+
+            {dropLog.length > 0 && (
+              <div
+                style={{
+                  marginTop: 16,
+                  padding: '0 12px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 4,
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: 11,
+                    fontWeight: 600,
+                    textTransform: 'uppercase',
+                    letterSpacing: 1,
+                    color: 'var(--neutral-alpha-8)',
+                    paddingBottom: 4,
+                  }}
+                >
+                  Drop log
+                </div>
+                {dropLog.map((entry) => (
+                  <div
+                    key={entry.id}
+                    style={{
+                      fontSize: 12,
+                      color: 'var(--neutral-alpha-11)',
+                      padding: '4px 0',
+                      borderBottom: '1px solid var(--neutral-alpha-3)',
+                    }}
+                  >
+                    {entry.text}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
 
-        <SetlistList
-          {...args}
-          setlists={defaultSetlists}
-          activeDropSetlistId={activeDropSetlistId}
-          onSetlistDragOver={(setlistId, event) => {
-            event.preventDefault()
-            setActiveDropSetlistId(setlistId)
-            args.onSetlistDragOver?.(setlistId, event)
-          }}
-          onSetlistDragEnter={(setlistId, event) => {
-            setActiveDropSetlistId(setlistId)
-            args.onSetlistDragEnter?.(setlistId, event)
-          }}
-          onSetlistDragLeave={(setlistId, event) => {
-            setActiveDropSetlistId((current) =>
-              current === setlistId ? null : current,
-            )
-            args.onSetlistDragLeave?.(setlistId, event)
-          }}
-          onSetlistDrop={(setlistId, event) => {
-            event.preventDefault()
-            setLastDropSetlistId(setlistId)
-            setActiveDropSetlistId(null)
-            args.onSetlistDrop?.(setlistId, event)
-          }}
-        />
-      </div>
+        <DragOverlay modifiers={[snapCenterToCursor]}>
+          {activeDragContext ? (
+            <DataTableDragOverlay
+              model={activeDragContext}
+              getDragPreviewLabel={(row, selectedRows) =>
+                selectedRows.length > 1
+                  ? `${selectedRows.length} files`
+                  : (row.trackName ?? row.title)
+              }
+            />
+          ) : null}
+        </DragOverlay>
+      </DndContext>
     )
   },
-  args: {
-    setlists: defaultSetlists,
-    droppable: true,
-    collapsed: false,
+  parameters: {
+    layout: 'fullscreen',
   },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '100%',
+          maxWidth: 1200,
+          margin: '24px auto',
+          padding: '0 24px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
 }

package/src/components/ToastProvider/ToastProvider.module.css

@@ -5,6 +5,7 @@
   bottom: 16px;
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 8px;
   width: min(360px, calc(100vw - 24px));
   margin: 0;
@@ -16,6 +17,8 @@
 
 .toastRoot {
   display: block;
+  width: fit-content;
+  max-width: 100%;
   padding: 0;
   box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.6);
 }
@@ -26,8 +29,8 @@
 }
 
 .toastCallout {
-  width: 100%;
   min-width: 0;
   border-radius: 8px;
   padding-right: 8px;
+  word-break: break-word;
 }