@moises.ai/design-system 3.10.4 → 3.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.10.4",
+  "version": "3.10.6",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",
@@ -36,6 +36,9 @@
     "extract": "lingui extract"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-icons": "1.3.2",
     "@radix-ui/themes": "3.2.1",
     "@wavesurfer/react": "^1.0.11",

package/src/components/DataTable/DataTable.jsx

@@ -1,205 +1,13 @@
-import React, { useState, useCallback, useMemo, useRef } from 'react'
-import {
-  Flex,
-  Table,
-  Checkbox,
-  Text,
-  ProductsBrandPattern,
-  DropdownMenu,
-} from '../../index'
-import { ArrowUpIcon, ArrowDownIcon } from '../../icons'
-import { MoreButton } from '../MoreButton/MoreButton'
+import React, { useCallback, useMemo, useRef } from 'react'
+import { DndContext, DragOverlay } from '@dnd-kit/core'
+import { Table } from '../../index'
 import styles from './DataTable.module.css'
 import classNames from 'classnames'
-
-const toUpperCase = (str) => (typeof str === 'string' ? str.toUpperCase() : str)
-
-const DataRow = React.memo(function DataRow({
-  row,
-  rowIndex,
-  columns,
-  isSelected,
-  anyRowSelected,
-  selectedCount,
-  sortedKey,
-  mobileSecondaryColumnId,
-  hasDropdownOptions,
-  onRowClick,
-  onSelectRow,
-  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)
-    } else {
-      onRowClick?.(row)
-    }
-  }
-
-  const handleCheckboxClick = (e) => {
-    e.stopPropagation()
-    if (e.shiftKey) {
-      e.preventDefault()
-      shiftClickRef.current = true
-      onShiftClickRow?.(row, rowIndex)
-      setTimeout(() => {
-        shiftClickRef.current = false
-      }, 0)
-    }
-  }
-
-  const handleCheckboxCellClick = (e) => {
-    e.stopPropagation()
-    if (e.shiftKey) {
-      e.preventDefault()
-      onShiftClickRow?.(row, rowIndex)
-    } else {
-      onSelectRow?.(row.id, !isSelected)
-    }
-  }
-
-  const handleCheckedChange = (value) => {
-    if (shiftClickRef.current) {
-      shiftClickRef.current = false
-      return
-    }
-    onSelectRow?.(row.id, value === true)
-  }
-
-  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}
-        data-column-id="select"
-        data-sorted="false"
-        onClick={handleCheckboxCellClick}
-      >
-        <Checkbox
-          size="1"
-          checked={isSelected}
-          onClick={handleCheckboxClick}
-          onCheckedChange={handleCheckedChange}
-          className={classNames(styles.checkboxCell, {
-            [styles.showCheckboxCell]: isSelected || anyRowSelected,
-          })}
-        />
-      </Table.Cell>
-
-      {columns.map((column, index) => (
-        <Table.Cell
-          key={column.id}
-          className={classNames(
-            styles.projectCell,
-            index === 0 ? styles.columnProject : styles.dataColumn,
-            column.id === mobileSecondaryColumnId ? styles.mobileVisibleDataColumn : null,
-            { [styles.sortedColumn]: sortedKey === column.id },
-          )}
-          data-column-id={column.id}
-          data-sorted={sortedKey === column.id}
-          onClick={handleRowClick}
-        >
-          {index === 0
-            ? renderProjectCell(row)
-            : renderDataCell(row, column, index)}
-        </Table.Cell>
-      ))}
-
-      {hasDropdownOptions && (
-        <Table.Cell
-          className={classNames(styles.projectCell, styles.dropdownColumn, styles.dropdownColumnCell)}
-          data-column-id="actions"
-        >
-          {row.dropdownOptions?.length ? (
-            <DropdownMenu
-              trigger={
-                <Flex className={styles.dropdownTriggerWrapper}>
-                  <MoreButton
-                    aria-label={`More options for ${row.title ?? ''}`}
-                    className={classNames(styles.dropdownTriggerWrapperIcon, styles.dropdownColumnCell)}
-                  />
-                </Flex>
-              }
-              options={row.dropdownOptions}
-              side="bottom"
-              align="end"
-            />
-          ) : null}
-        </Table.Cell>
-      )}
-    </Table.Row>
-  )
-})
+import { DataTableDragOverlay } from './dnd/DataTableDragOverlay'
+import { useDataTableDnd } from './dnd/useDataTableDnd'
+import { resolveRowId, toDragRow } from './dnd/dataTableDnd.utils'
+import { DataTableHeader } from './DataTableHeader'
+import { DataTableBody } from './DataTableBody'
 
 export const DataTable = ({
   className,
@@ -217,11 +25,14 @@ export const DataTable = ({
   stickyBodyOffset = 0,
   reorderable = false,
   onReorder,
+  rowDraggable,
+  onRowDragStart,
+  onRowDragEnd,
+  getDragPreviewLabel,
+  getDragPreviewCountLabel,
+  renderDragPreview,
   ...props
 }) => {
-  const [isHeaderHovering, setIsHeaderHovering] = useState(false)
-  const [draggedRowIndex, setDraggedRowIndex] = useState(null)
-  const [dragOverRowIndex, setDragOverRowIndex] = useState(null)
   const anchorRowIndexRef = useRef(null)
 
   const sortedKey = sorting?.field
@@ -230,19 +41,34 @@ export const DataTable = ({
 
   const mobileSecondaryColumnId = useMemo(() => {
     if (!columns?.length) return undefined
-    if (!sortedKey || sortedKey === primaryColumnId) {
-      return defaultSecondaryColumnId
-    }
+    if (!sortedKey || sortedKey === primaryColumnId) return defaultSecondaryColumnId
     return sortedKey
   }, [columns, sortedKey, primaryColumnId, defaultSecondaryColumnId])
 
-  const selectedSet = useMemo(() => new Set(selectedRowIds), [selectedRowIds])
+  const normalizedRows = useMemo(
+    () => data.map((row, index) => toDragRow(row, index)),
+    [data],
+  )
 
-  const isRowSelected = useCallback((id) => selectedSet.has(id), [selectedSet])
+  const selectedSet = useMemo(
+    () => new Set((selectedRowIds ?? []).map((id) => String(id))),
+    [selectedRowIds],
+  )
+  const selectedRows = useMemo(
+    () => normalizedRows.filter((row) => row.id && selectedSet.has(row.id)),
+    [normalizedRows, selectedSet],
+  )
+
+  const isRowSelected = useCallback(
+    (row, index) => {
+      const rowId = resolveRowId(row, index)
+      return rowId != null && selectedSet.has(rowId)
+    },
+    [selectedSet],
+  )
 
   const selectedCount = selectedRowIds.length
   const total = data?.length ?? 0
-
   const anyRowChecked = selectedCount > 0
   const allRowsChecked = total > 0 && selectedCount === total
 
@@ -251,17 +77,6 @@ export const DataTable = ({
     [data],
   )
 
-  const handleSortClick = useCallback(
-    (columnId) => {
-      const isActive = sorting?.field === columnId
-      const nextDirection =
-        isActive && sorting?.sort === 'ASC' ? 'DESC' : 'ASC'
-
-      onSort?.(columnId, nextDirection)
-    },
-    [onSort, sorting],
-  )
-
   const handleRowClick = useCallback(
     (row) => {
       onClick?.(row)
@@ -272,14 +87,15 @@ export const DataTable = ({
   const handleShiftClickRow = useCallback(
     (clickedRow, clickedIndex) => {
       if (!onSelectRow) return
-
       const anchorIndex = anchorRowIndexRef.current
       const start = anchorIndex != null ? Math.min(anchorIndex, clickedIndex) : clickedIndex
       const end = anchorIndex != null ? Math.max(anchorIndex, clickedIndex) : clickedIndex
 
       for (let i = start; i <= end; i++) {
-        onSelectRow(data[i].id, true)
+        const rowId = resolveRowId(data[i], i)
+        if (rowId != null) onSelectRow(rowId, true)
       }
+
       if (anchorIndex == null) {
         anchorRowIndexRef.current = clickedIndex
       }
@@ -289,264 +105,100 @@ export const DataTable = ({
 
   const handleSelectRow = useCallback(
     (rowId, checked) => {
-      const index = data?.findIndex((r) => r.id === rowId) ?? -1
+      const index =
+        data?.findIndex((row, idx) => resolveRowId(row, idx) === String(rowId)) ?? -1
       if (index >= 0) {
         anchorRowIndexRef.current = index
       }
-      onSelectRow?.(rowId, checked)
+      onSelectRow?.(String(rowId), checked)
     },
     [data, onSelectRow],
   )
 
-  const renderProjectCell = useCallback((row) => {
-    return (
-      <Flex align="center" gap="3">
-        <ProductsBrandPattern
-          title={row.title}
-          size={48}
-          className={styles.thumb}
-          type={row.type}
-          cover={row.thumb}
-        />
-
-        <Flex direction="column" style={{ minWidth: 0, flex: 1 }}>
-          <Text size="2" className={styles.titleText}>
-            {row.title}
-          </Text>
-          <Text size="1" className={styles.artistText}>
-            {row.artist}
-          </Text>
-        </Flex>
-      </Flex>
-    )
-  }, [])
-
-  const handleSelectAllChange = useCallback(
-    (value) => {
-      if (anyRowChecked && !allRowsChecked) {
-        onSelectAll?.(false)
-      } else {
-        onSelectAll?.(value === true)
-      }
-    },
-    [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 =
-      column.render?.({ row, value: baseValue, column, index }) ?? baseValue
-
-    const isPrimitive =
-      typeof value === 'string' || typeof value === 'number' || value == null
-
-    return isPrimitive ? (
-      <Text size="2" className={styles.cellText}>
-        {value}
-      </Text>
-    ) : (
-      value
-    )
-  }, [])
+  const {
+    dndContextProps,
+    activeDragRowId,
+    overDragRowId,
+    activeDragContext,
+    sortableItems,
+  } = useDataTableDnd({
+    rows: normalizedRows,
+    selectedSet,
+    selectedRows,
+    reorderable,
+    onReorder,
+    onRowDragStart,
+    onRowDragEnd,
+  })
 
   const { style, ...restProps } = props
   const stickyOffsetValue =
     typeof stickyOffset === 'number' ? `${stickyOffset}px` : stickyOffset
-
   const stickyBodyOffsetValue =
     typeof stickyBodyOffset === 'number' ? `${stickyBodyOffset}px` : stickyBodyOffset
 
   return (
-    <Table.Root
-      className={classNames(styles.DataTable, className)}
-      size="1"
-      style={{
-        '--datatable-sticky-offset': stickyOffsetValue,
-        '--datatable-sticky-body-offset': stickyBodyOffsetValue,
-        ...style,
-      }}
-      {...restProps}
-    >
-      <Table.Header
-        onMouseEnter={() => setIsHeaderHovering(true)}
-        onMouseLeave={() => setIsHeaderHovering(false)}
+    <DndContext {...dndContextProps}>
+      <Table.Root
+        className={classNames(styles.DataTable, className)}
+        size="1"
+        style={{
+          '--datatable-sticky-offset': stickyOffsetValue,
+          '--datatable-sticky-body-offset': stickyBodyOffsetValue,
+          ...style,
+        }}
+        {...restProps}
       >
-        <Table.Row className={styles.headerRow}>
-          <Table.Cell
-            className={classNames(styles.checkboxCell, styles.selectColumn, {
-              [styles.showCheckboxHeader]: isHeaderHovering || anyRowChecked,
-            })}
-          >
-            <Checkbox
-              size="1"
-              checked={allRowsChecked}
-              onCheckedChange={handleSelectAllChange}
-              {...(anyRowChecked && !allRowsChecked
-                ? { checked: 'indeterminate' }
-                : {})}
-            />
-          </Table.Cell>
-
-          {columns.map((column, index) => (
-            <Table.ColumnHeaderCell
-              key={column.id}
-              className={classNames(styles.columnHeaderCell, {
-                [styles.columnProject]: index === 0,
-                [styles.dataColumn]: index !== 0,
-                [styles.mobileVisibleDataColumn]: column.id === mobileSecondaryColumnId,
-                [styles.sortedColumn]: toUpperCase(sortedKey) === toUpperCase(column.id),
-              })}
-            >
-              <Flex align="center" gap="3" height="24px">
-                {index === 0 && anyRowChecked ? (
-                  <Text size="2" weight="regular" className={styles.headerTextFirst}>
-                    {selectedFilesLabel}
-                  </Text>
-                ) : column.sortable ? (
-                  <button
-                    type="button"
-                    className={classNames(styles.sortButton, {
-                      [styles.sortButtonFirst]: index === 0,
-                    })}
-                    onClick={() => handleSortClick(column.id)}
-                  >
-                    <Text size="2">{column.label}</Text>
-                    {toUpperCase(sortedKey) === toUpperCase(column.id) &&
-                      (sorting?.sort === 'DESC' ? (
-                        <ArrowUpIcon width={16} height={16} />
-                      ) : (
-                        <ArrowDownIcon width={16} height={16} />
-                      ))}
-                  </button>
-                ) : (
-                  <Text size="2" className={styles.headerText}>
-                    {column.label}
-                  </Text>
-                )}
-
-                {index === 0 && renderHeaderActions && (
-                  <Flex gap="2" className={styles.headerActions}>
-                    {renderHeaderActions({
-                      selectedCount,
-                      total,
-                      anySelected: anyRowChecked,
-                      allSelected: allRowsChecked,
-                    })}
-                  </Flex>
-                )}
-              </Flex>
-            </Table.ColumnHeaderCell>
-          ))}
-          {hasDropdownOptions && (
-            <Table.ColumnHeaderCell
-              className={styles.dropdownColumn}
-            ></Table.ColumnHeaderCell>
-          )}
-        </Table.Row>
-      </Table.Header>
+        <DataTableHeader
+          columns={columns}
+          sortedKey={sortedKey}
+          sorting={sorting}
+          mobileSecondaryColumnId={mobileSecondaryColumnId}
+          anyRowChecked={anyRowChecked}
+          allRowsChecked={allRowsChecked}
+          selectedFilesLabel={selectedFilesLabel}
+          selectedCount={selectedCount}
+          total={total}
+          hasDropdownOptions={hasDropdownOptions}
+          onSort={onSort}
+          onSelectAll={onSelectAll}
+          renderHeaderActions={renderHeaderActions}
+        />
 
-      <Table.Body >
-        {data.map((row, index) => (
-          <DataRow
-            key={row.id}
-            row={row}
-            rowIndex={index}
-            columns={columns}
-            isSelected={isRowSelected(row.id)}
-            anyRowSelected={anyRowChecked}
-            selectedCount={selectedCount}
-            sortedKey={sortedKey}
-            mobileSecondaryColumnId={mobileSecondaryColumnId}
-            hasDropdownOptions={hasDropdownOptions}
-            onRowClick={handleRowClick}
-            onSelectRow={handleSelectRow}
-            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>
+        <DataTableBody
+          rows={normalizedRows}
+          columns={columns}
+          sortableItems={sortableItems}
+          isRowSelected={isRowSelected}
+          anyRowChecked={anyRowChecked}
+          selectedCount={selectedCount}
+          sortedKey={sortedKey}
+          mobileSecondaryColumnId={mobileSecondaryColumnId}
+          hasDropdownOptions={hasDropdownOptions}
+          onClick={handleRowClick}
+          onSelectRow={handleSelectRow}
+          onShiftClickRow={handleShiftClickRow}
+          rowDraggable={rowDraggable}
+          reorderable={reorderable}
+          activeDragRowId={activeDragRowId}
+          overDragRowId={overDragRowId}
+        />
+      </Table.Root>
+
+      <DragOverlay>
+        {activeDragContext ? (
+          <div className={styles.dragOverlayContent}>
+            <DataTableDragOverlay
+              model={activeDragContext}
+              renderDragPreview={renderDragPreview}
+              getDragPreviewLabel={getDragPreviewLabel}
+              getDragPreviewCountLabel={getDragPreviewCountLabel}
+            />
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
   )
 }
 
-DataTable.displayName = 'DataTable'
+DataTable.displayName = 'DataTable'