@moises.ai/design-system 3.7.0 → 3.7.1

package/dist/primitives.js

@@ -1,7 +1,7 @@
 import * as a from "react";
 import Y from "react";
-import { R as tr, u as ye, C as Yr, P as O, a as ae, b as Xr, T as Zr, c as le, d as or, e as _e, f as ce, g as G, h as Ie, i as P, A as Jr, j as Qr, k as en, G as tn, I as on, l as rn, L as nn, m as an, n as bt, o as sn, p as cn, q as ln, S as un, r as dn, s as fn, t as pn, v as Ve, w as vn, x as be, y as mn, z as Me, B as Xe, D as gn, E as Q, F as bn, H as hn, J as Cn, K as rr, M as nr, N as wn, O as Tn, Q as En, V as ar, U as yn, W as Rn, X as _n, Y as sr } from "./index-D51dkmoF.js";
-import { Z as Ni, _ as Fi, $ as Oi, a0 as Di, a1 as Li, a2 as ki, a3 as Vi, a4 as Ki, a5 as $i, a6 as Gi, a7 as Bi, a8 as Hi, a9 as zi, aa as Ui, ab as ji, ac as Wi, ad as qi, ae as Yi, af as Xi, ag as Zi, ah as Ji, ai as Qi } from "./index-D51dkmoF.js";
+import { R as tr, u as ye, C as Yr, P as O, a as ae, b as Xr, T as Zr, c as le, d as or, e as _e, f as ce, g as G, h as Ie, i as P, A as Jr, j as Qr, k as en, G as tn, I as on, l as rn, L as nn, m as an, n as bt, o as sn, p as cn, q as ln, S as un, r as dn, s as fn, t as pn, v as Ve, w as vn, x as be, y as mn, z as Me, B as Xe, D as gn, E as Q, F as bn, H as hn, J as Cn, K as rr, M as nr, N as wn, O as Tn, Q as En, V as ar, U as yn, W as Rn, X as _n, Y as sr } from "./index-JoQmq6_y.js";
+import { Z as Ni, _ as Fi, $ as Oi, a0 as Di, a1 as Li, a2 as ki, a3 as Vi, a4 as Ki, a5 as $i, a6 as Gi, a7 as Bi, a8 as Hi, a9 as zi, aa as Ui, ab as ji, ac as Wi, ad as qi, ae as Yi, af as Xi, ag as Zi, ah as Ji, ai as Qi } from "./index-JoQmq6_y.js";
 import { jsxs as ve, Fragment as me, jsx as i } from "react/jsx-runtime";
 import * as In from "react-dom";
 import Mn, { flushSync as pe } from "react-dom";

package/package.json

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

package/src/components/DataTable/DataTable.jsx

@@ -28,10 +28,23 @@ const DataRow = React.memo(function DataRow({
   onShiftClickRow,
   renderProjectCell,
   renderDataCell,
+  reorderable,
+  isDragging,
+  isDragOver,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onDragEnd,
 }) {
   const shiftClickRef = useRef(false)
+  const didDragRef = useRef(false)
 
   const handleRowClick = (e) => {
+    if (didDragRef.current) {
+      didDragRef.current = false
+      return
+    }
     if (e.shiftKey) {
       e.preventDefault()
       onShiftClickRow?.(row, rowIndex)
@@ -72,15 +85,58 @@ const DataRow = React.memo(function DataRow({
 
   const showDropdownAlways = isSelected && selectedCount === 1
 
+  const handleDragStart = (e) => {
+    didDragRef.current = true
+    e.dataTransfer.setData('text/plain', String(rowIndex))
+    e.dataTransfer.effectAllowed = 'move'
+    onDragStart?.(rowIndex)
+
+    const table = e.currentTarget.closest('table')
+    if (table) {
+      const dragImage = document.createElement('div')
+      dragImage.className = styles.dragImage
+      dragImage.style.width = `${table.offsetWidth}px`
+      dragImage.style.minWidth = `${table.offsetWidth}px`
+      document.body.appendChild(dragImage)
+      e.dataTransfer.setDragImage(dragImage, 0, 0)
+      requestAnimationFrame(() => {
+        if (dragImage.parentNode) {
+          document.body.removeChild(dragImage)
+        }
+      })
+    }
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    onDragOver?.(rowIndex)
+  }
+
+  const handleDrop = (e) => {
+    e.preventDefault()
+    const fromIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)
+    onDrop?.(fromIndex, rowIndex)
+  }
+
   return (
     <Table.Row
       className={classNames({
         [styles.rowSelected]: isSelected,
         [styles.showDropdownOnSelect]: showDropdownAlways,
+        [styles.rowDragging]: isDragging,
+        [styles.rowDragOver]: isDragOver,
+        [styles.rowReorderable]: reorderable,
       })}
       style={
         isSelected ? { '--row-bg': 'var(--aqua-dark-alpha-2)' } : undefined
       }
+      draggable={reorderable}
+      onDragStart={reorderable ? handleDragStart : undefined}
+      onDragOver={reorderable ? handleDragOver : undefined}
+      onDragLeave={reorderable ? onDragLeave : undefined}
+      onDrop={reorderable ? handleDrop : undefined}
+      onDragEnd={reorderable ? onDragEnd : undefined}
     >
       <Table.Cell
         className={styles.selectColumn}
@@ -156,9 +212,13 @@ export const DataTable = ({
   onSelectRow,
   stickyOffset = 0,
   stickyBodyOffset = 0,
+  reorderable = false,
+  onReorder,
   ...props
 }) => {
   const [isHeaderHovering, setIsHeaderHovering] = useState(false)
+  const [draggedRowIndex, setDraggedRowIndex] = useState(null)
+  const [dragOverRowIndex, setDragOverRowIndex] = useState(null)
   const anchorRowIndexRef = useRef(null)
 
   const sortedKey = sorting?.field
@@ -259,6 +319,61 @@ export const DataTable = ({
     [anyRowChecked, allRowsChecked, onSelectAll],
   )
 
+  const handleDragStart = useCallback((rowIndex) => {
+    setDraggedRowIndex(rowIndex)
+  }, [])
+
+  const handleDragOver = useCallback((rowIndex) => {
+    setDragOverRowIndex(rowIndex)
+  }, [])
+
+  const handleDragLeave = useCallback(() => {
+    setDragOverRowIndex(null)
+  }, [])
+
+  const handleDrop = useCallback(
+    (order, moveBefore) => {
+      setDraggedRowIndex(null)
+      setDragOverRowIndex(null)
+      if (order === moveBefore || order + 1 === moveBefore) return
+      onReorder?.({ order, move_before: moveBefore })
+    },
+    [onReorder],
+  )
+
+  const handleDragEnd = useCallback(() => {
+    setDraggedRowIndex(null)
+    setDragOverRowIndex(null)
+  }, [])
+
+  const handleDragOverEnd = useCallback(() => {
+    setDragOverRowIndex(data?.length ?? 0)
+  }, [data?.length])
+
+  const handleDragLeaveEnd = useCallback(() => {
+    setDragOverRowIndex(null)
+  }, [])
+
+  const handleDropOnEnd = useCallback(
+    (e) => {
+      e.preventDefault()
+      const fromIndex = parseInt(e.dataTransfer.getData('text/plain'), 10)
+      const moveBefore = data?.length ?? 0
+      setDraggedRowIndex(null)
+      setDragOverRowIndex(null)
+      if (fromIndex === moveBefore || fromIndex + 1 === moveBefore) return
+      onReorder?.({ order: fromIndex, move_before: moveBefore })
+    },
+    [data?.length, onReorder],
+  )
+
+  const totalColumnCount =
+    1 +
+    (columns?.length ?? 0) +
+    (hasDropdownOptions ? 1 : 0)
+  const showDropAfterRow =
+    reorderable && data?.length && draggedRowIndex !== null
+
   const renderDataCell = useCallback((row, column, index) => {
     const baseValue = row?.[column.id] ?? row?.[`${column.id}Formatted`]
     const value =
@@ -382,8 +497,32 @@ export const DataTable = ({
             onShiftClickRow={handleShiftClickRow}
             renderProjectCell={renderProjectCell}
             renderDataCell={renderDataCell}
+            reorderable={reorderable}
+            isDragging={draggedRowIndex === index}
+            isDragOver={dragOverRowIndex === index}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onDragEnd={handleDragEnd}
           />
         ))}
+        {showDropAfterRow && (
+          <Table.Row
+            className={classNames(styles.dropAfterRow, {
+              [styles.dropAfterRowActive]: dragOverRowIndex === data.length,
+            })}
+            onDragOver={(e) => {
+              e.preventDefault()
+              e.dataTransfer.dropEffect = 'move'
+              handleDragOverEnd()
+            }}
+            onDragLeave={handleDragLeaveEnd}
+            onDrop={handleDropOnEnd}
+          >
+            <Table.Cell colSpan={totalColumnCount} className={styles.dropAfterCell} />
+          </Table.Row>
+        )}
       </Table.Body>
     </Table.Root>
   )

package/src/components/DataTable/DataTable.module.css

@@ -292,6 +292,62 @@
   opacity: 1;
 }
 
+.rowDragging {
+  opacity: 0.5;
+}
+
+.rowDragOver {
+  box-shadow: inset 0 2px 0 0 var(--accent-9);
+}
+
+.rowReorderable {
+  cursor: grab;
+}
+
+.rowReorderable:active {
+  cursor: grabbing;
+}
+
+/* Drag image personalizada - largura total da tabela */
+.dragImage {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  height: 56px;
+  min-height: 56px;
+  background: var(--accent-alpha-4);
+  border-radius: 8px;
+  opacity: 0.9;
+  pointer-events: none;
+}
+
+.dropAfterRow {
+  height: 8px;
+  min-height: 8px;
+  background: transparent;
+  border-radius: 0;
+}
+
+.dropAfterRowActive {
+  background: var(--accent-alpha-4);
+  box-shadow: inset 0 2px 0 0 var(--accent-9);
+}
+
+.dropAfterCell {
+  width: 100%;
+  height: 8px;
+  padding: 0;
+  vertical-align: middle;
+  border: none;
+  box-sizing: border-box;
+}
+
+/* Garante que a célula ocupe toda a largura da tabela */
+.DataTable :global(.rt-TableRootTable) .dropAfterRow .dropAfterCell {
+  width: 100%;
+  min-width: 100%;
+}
+
 .DataTable :global(.rt-TableRow:hover) .dropdownTriggerWrapperIcon,
 .dropdownColumn:focus-within .dropdownTriggerWrapperIcon,
 .showDropdownOnSelect .dropdownTriggerWrapperIcon {

package/src/components/DataTable/DataTable.stories.jsx

@@ -219,6 +219,12 @@ export default {
     onSort: {
       action: 'onSort',
     },
+    onReorder: {
+      action: 'onReorder',
+    },
+    reorderable: {
+      control: 'boolean',
+    },
     renderHeaderActions: {
       control: 'function',
     },
@@ -335,6 +341,98 @@ const SelectableTemplate = (args) => {
   )
 }
 
+const ReorderableTemplate = (args) => {
+  const [rows, setRows] = useState(auxBodyTable.slice(0, 5))
+  const [selectedRowIds, setSelectedRowIds] = useState([])
+  const [sorting, setSorting] = useState(
+    args.initialSorting ?? { field: 'RECENT', sort: 'DESC' },
+  )
+
+  const sortRows = (items, { field, sort } = {}) => {
+    if (!field) return items
+    const sorted = [...items].sort((a, b) => {
+      const av = a[field]
+      const bv = b[field]
+      if (av === bv) return 0
+      if (av == null) return -1
+      if (bv == null) return 1
+      if (typeof av === 'number' && typeof bv === 'number') return av - bv
+      return String(av).localeCompare(String(bv))
+    })
+    return String(sort).toUpperCase() === 'ASC' ? sorted : sorted.reverse()
+  }
+
+  const handleReorder = ({ order, move_before }) => {
+    args.onReorder?.({ order, move_before })
+    setRows((prev) => {
+      const next = [...prev]
+      const [item] = next.splice(order, 1)
+      next.splice(move_before > order ? move_before - 1 : move_before, 0, item)
+      return next
+    })
+  }
+
+  // Reorderable: mostra na ordem atual (sem reaplicar sort) para a reordenação refletir na tela
+  const displayRows = rows
+
+  return (
+    <DataTable
+      {...args}
+      columns={auxHeaderTable}
+      data={displayRows}
+      sorting={sorting}
+      selectedRowIds={selectedRowIds}
+      onSelectRow={(id, checked) =>
+        setSelectedRowIds((prev) =>
+          checked ? [...prev, id] : prev.filter((x) => x !== id),
+        )
+      }
+      onSelectAll={(checked) =>
+        setSelectedRowIds(checked ? rows.map((r) => r.id) : [])
+      }
+      onSort={(field, direction) =>
+        setSorting({ field, sort: direction })
+      }
+      onClick={(row) => console.log('Row clicked:', row)}
+      reorderable={args.reorderable}
+      onReorder={handleReorder}
+      stickyOffset={16}
+    />
+  )
+}
+
+export const Reorderable = {
+  render: (args) => (
+    <div
+      style={{
+        width: '100%',
+        maxWidth: '1620px',
+        maxHeight: '400px',
+      }}
+    >
+      <ReorderableTemplate {...args} />
+    </div>
+  ),
+  args: {
+    reorderable: true,
+    onReorder: (payload) => console.log('onReorder', payload),
+    renderHeaderActions: ({ selectedCount, total }) => (
+      <>
+        <Button size="1" variant="soft" color="gray" disabled={!selectedCount}>
+          Delete
+        </Button>
+        <Button size="1" variant="soft" disabled={!selectedCount}>
+          Add to setlist…
+        </Button>
+      </>
+    ),
+    initialSorting: {
+      field: 'RECENT',
+      sort: 'DESC',
+    },
+  },
+}
+
 export const Default = {
   render: (args) => (
     <div
@@ -351,6 +449,7 @@ export const Default = {
   ),
   args: {
     children: 'DataTable Component',
+    reorderable: false,
     onSort: () => { },
     onClick: () => { },
     renderHeaderActions: ({ selectedCount, total }) => (