@moises.ai/design-system 3.4.5 → 3.5.0

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

@@ -0,0 +1,372 @@
+.DataTable {
+  background-color: var(--neutral-1);
+  --table-cell-min-height: 56px !important;
+  padding: 0 !important;
+}
+
+.scrollContainer {
+  overflow: auto;
+  position: relative;
+}
+
+/* Reset properties that break position: sticky */
+.DataTable,
+.DataTable *,
+.DataTable :global(.rt-TableCell:not(:nth-child(2))) {
+  overflow: visible !important;
+  transform: none !important;
+  filter: none !important;
+  will-change: auto !important;
+  contain: none !important;
+}
+
+.titleText,
+.artistText {
+  color: var(--neutral-12);
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.DataTable .thumb {
+  overflow: hidden !important;
+}
+
+.DataTable .titleText,
+.DataTable .artistText {
+  overflow: hidden !important;
+}
+
+.DataTable :global(.rt-TableColumnHeaderCell),
+.DataTable :global(.rt-TableHeader) :global(.rt-TableCell) {
+  padding: 16px 4px;
+  position: sticky !important;
+  top: var(--datatable-sticky-offset, 0px) !important;
+  z-index: 10 !important;
+  background-color: var(--neutral-1) !important;
+}
+
+/* Espaço sticky abaixo do header */
+.DataTable :global(.rt-TableHeader) {
+  position: sticky !important;
+  top: var(--datatable-sticky-offset, 0px) !important;
+  z-index: 10 !important;
+  background-color: var(--neutral-1) !important;
+}
+
+.DataTable :global(.rt-TableHeader) :global(.rt-TableRow) {
+  background-color: var(--neutral-1) !important;
+}
+
+.DataTable :global(.rt-TableHeader)::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 16px;
+  background-color: var(--neutral-1);
+  z-index: 10;
+  pointer-events: none;
+}
+
+.DataTable :global(.rt-TableBody)::before {
+  content: '';
+  display: block;
+  height: 16px;
+  background-color: var(--neutral-1);
+  pointer-events: none;
+}
+
+.headerText,
+.cellText {
+  color: var(--neutral-alpha-10);
+  padding: 0 12px;
+}
+
+.cellText {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.headerTextFirst {
+  padding: 0;
+}
+
+.headerTextFirst {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.sortButton {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0 12px;
+
+  display: flex;
+  align-items: center;
+
+  color: var(--neutral-alpha-10);
+
+  svg {
+    margin: 0 4px;
+  }
+
+  &:hover {
+    color: var(--neutral-12);
+  }
+
+  &:active {
+    color: var(--neutral-11);
+  }
+}
+
+.headerRow {
+  background: rgba(255, 255, 255, 0);
+  box-shadow: inset 0 -1px var(--neutral-alpha-4);
+}
+
+.checkboxCell {
+  width: 14px;
+  min-width: 14px;
+  max-width: 14px;
+  padding: 0;
+
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+
+  opacity: 0;
+}
+
+.DataTable :global(.rt-TableRow:hover) .checkboxCell,
+.rowSelected .checkboxCell {
+  opacity: 1;
+}
+
+.showCheckboxHeader,
+.showCheckboxCell {
+  opacity: 1;
+}
+
+.DataTable
+  :global(.rt-TableColumnHeaderCell:not(:nth-child(1)):not(:nth-child(2))),
+.DataTable :global(.rt-TableCell:not(:nth-child(1)):not(:nth-child(2))) {
+  white-space: nowrap;
+  box-shadow: none;
+  min-width: 116px;
+}
+
+.DataTable :global(.rt-TableColumnHeaderCell:last-child),
+.DataTable :global(.rt-TableCell:last-child) {
+  min-width: 28px !important;
+  max-width: 28px !important;
+}
+
+.DataTable :global(.rt-TableColumnHeaderCell:nth-child(2)),
+.DataTable :global(.rt-TableCell:nth-child(2)) {
+  max-width: 565px;
+  min-width: 260px;
+  box-shadow: none;
+  width: 100%;
+}
+
+.DataTable :global(.rt-TableCell:nth-child(2)) > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.DataTable :global(.rt-TableColumnHeaderCell:nth-child(1)),
+.DataTable :global(.rt-TableCell:nth-child(1)) {
+  min-width: 14px !important;
+  max-width: 14px !important;
+  padding: 0;
+  display: flex;
+  margin-right: 4px;
+  align-items: center;
+  box-shadow: none;
+}
+
+.DataTable :global(.rt-TableColumnHeaderCell:nth-child(1)),
+.DataTable :global(.rt-TableColumnHeaderCell:nth-child(2)),
+.DataTable
+  :global(.rt-TableColumnHeaderCell:not(:nth-child(1)):not(:nth-child(2))),
+.DataTable :global(.rt-TableColumnHeaderCell:last-child) {
+  box-shadow: inset 0 -1px var(--neutral-alpha-4) !important;
+}
+
+.artistText {
+  color: var(--neutral-alpha-10);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.titleText {
+  color: var(--neutral-12);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.thumb {
+  width: 48px;
+  height: 48px;
+  aspect-ratio: 1/1;
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
+  overflow: hidden;
+  display: block;
+}
+
+.projectCellContent {
+  min-width: 0;
+  flex: 1;
+}
+
+.projectCellContent > * {
+  min-width: 0;
+}
+
+.projectCellWrapper {
+  min-width: 0;
+  width: 100%;
+}
+
+.DataTable :global(.rt-TableRow) {
+  --row-bg: transparent;
+}
+
+.DataTable :global(.rt-TableRow:hover) {
+  --row-bg: var(--neutral-alpha-2);
+}
+
+.projectCell {
+  padding: 4px;
+  background: var(--row-bg);
+
+  &:nth-child(2) {
+    border-radius: 8px 0 0 8px;
+  }
+
+  &:last-child {
+    border-radius: 0 8px 8px 0;
+  }
+}
+
+.DataTable :global(.rt-TableRow:hover) .projectCell :not(.artistText) {
+  color: #edeef0;
+}
+
+.rowSelected .projectCell :not(.artistText) {
+  color: #edeef0;
+}
+
+.dropdownTriggerWrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropdownMenuTrigger {
+  color: var(--neutral-alpha-7) !important;
+  transition: color 120ms ease-in-out;
+}
+
+.dropdownTriggerWrapperIcon {
+  height: fit-content;
+  padding: 6px 5px;
+  border-radius: 9999px;
+  opacity: 0;
+  transition: opacity 120ms ease-in-out;
+
+  &:hover {
+    cursor: pointer;
+    color: var(--neutral-alpha-11);
+    background-color: rgba(255, 255, 255, 0.07);
+  }
+}
+
+.dropdownTriggerWrapperIcon:hover .dropdownMenuTrigger,
+.dropdownMenuTrigger:hover {
+  color: var(--neutral-alpha-10);
+}
+
+.dropdownTriggerWrapper[data-state='open'] .dropdownTriggerWrapperIcon {
+  opacity: 1;
+}
+
+.DataTable :global(.rt-TableRow:hover) .dropdownTriggerWrapperIcon,
+.DataTable :global(.rt-TableRow:focus-within) .dropdownTriggerWrapperIcon,
+.rowSelected .dropdownTriggerWrapperIcon {
+  opacity: 1;
+}
+
+.dropdownTriggerWrapper[data-state='open'] .dropdownMenuTrigger {
+  color: var(--neutral-alpha-10);
+}
+
+.dropdownTriggerWrapperMobile {
+  padding: 8px;
+}
+
+.headerActions {
+  width: max-content;
+}
+
+@media (max-width: 1380px) {
+  .DataTable :global(.rt-TableColumnHeaderCell:nth-child(2)),
+  .DataTable :global(.rt-TableCell:nth-child(2)) {
+    max-width: 200px;
+    min-width: 100px;
+  }
+}
+
+@media (max-width: 500px) {
+  .DataTable :global(.rt-TableColumnHeaderCell:nth-child(2)),
+  .DataTable :global(.rt-TableCell:nth-child(2)) {
+    max-width: 200px;
+    min-width: 200px;
+  }
+}
+
+@media (max-width: 1023px) {
+  .selectColumn {
+    display: none !important;
+  }
+
+  .headerActions {
+    display: none !important;
+  }
+
+  .dataColumn {
+    display: none !important;
+  }
+
+  .dropdownColumn {
+    display: table-cell !important;
+  }
+
+  .columnProject {
+    display: table-cell !important;
+  }
+
+  .sortedColumn {
+    display: table-cell !important;
+  }
+
+  .DataTable :global(.rt-TableColumnHeaderCell),
+  .DataTable :global(.rt-TableCell) {
+    min-width: auto;
+  }
+
+  .dropdownTriggerWrapperIcon {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,365 @@
+import { DataTable } from './DataTable'
+import { Button } from '../../index'
+import { useEffect, useState } from 'react'
+
+const baseRows = [
+  {
+    id: '1',
+    thumb:
+      'https://d2.moises.ai/v3/download/moises-production--tasks/operations/FILEMETADATA_A/81735fa7-bba1-42f1-bd20-7208d3d77fc2/cover.jpeg',
+    title:
+      'Come Together mais um texto muito longo para ver como o texto é tratado',
+    artist: 'The Beatles',
+    RECENT: 'Nov 11, 2025',
+    BPM: 110,
+    KEY: 'G',
+    DURATION: '03:48',
+    dropdownOptions: [
+      {
+        type: 'item',
+        key: 'edit',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'duplicate',
+        label: 'Duplicate',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+    ],
+  },
+  {
+    id: '2',
+    title: 'Let It Be',
+    artist: 'The Beatles',
+    RECENT: 'Nov 11, 2025',
+    BPM: 110,
+    KEY: 'E♭m',
+    DURATION: '03:48',
+    dropdownOptions: [
+      {
+        type: 'item',
+        key: 'edit-2',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'duplicate-2',
+        label: 'Duplicate',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+    ],
+  },
+  {
+    id: '3',
+    title: 'Here Comes The Sun',
+    artist: 'The Beatles',
+    RECENT: 'Dec 02, 2025',
+    BPM: 129,
+    KEY: 'C#',
+    DURATION: '03:05',
+    dropdownOptions: [
+      {
+        type: 'item',
+        key: 'edit-3',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'delete-3',
+        label: 'Delete',
+        onClick: () => console.log('Delete clicked'),
+      },
+    ],
+  },
+  {
+    id: '4',
+    title: 'Yesterday',
+    artist: 'The Beatles',
+    RECENT: 'Jan 15, 2025',
+    BPM: 95,
+    KEY: 'F',
+    DURATION: '02:05',
+    dropdownOptions: [
+      {
+        type: 'item',
+        key: 'edit-4',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'duplicate-4',
+        label: 'Duplicate',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+    ],
+  },
+  {
+    id: '5',
+    title: 'Help!',
+    artist: 'The Beatles',
+    RECENT: 'Oct 30, 2025',
+    BPM: 184,
+    KEY: 'Bm',
+    DURATION: '02:18',
+    dropdownOptions: [
+      {
+        type: 'item',
+        key: 'edit-5',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'delete-5',
+        label: 'Delete',
+        onClick: () => console.log('Delete clicked'),
+      },
+    ],
+  },
+  {
+    id: '6',
+    title: 'Something',
+    artist: 'The Beatles',
+    RECENT: 'Sep 20, 2025',
+    BPM: 66,
+    KEY: 'C',
+    DURATION: '03:02',
+    dropdownOptions: [
+      {
+        type: 'item',
+        key: 'edit-6',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'duplicate-6',
+        label: 'Duplicate',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+    ],
+  },
+  {
+    id: '7',
+    title: 'While My Guitar Gently Weeps',
+    artist: 'The Beatles',
+    RECENT: 'Aug 10, 2025',
+    BPM: 88,
+    KEY: 'Am',
+    DURATION: '04:45',
+    dropdownOptions: [
+      {
+        type: 'item',
+        key: 'edit-7',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'delete-7',
+        label: 'Delete',
+        onClick: () => console.log('Delete clicked'),
+      },
+    ],
+  },
+]
+
+// Generate more rows for scrolling demo
+const auxBodyTable = [
+  ...baseRows,
+  ...baseRows.map((row, i) => ({
+    ...row,
+    id: `${row.id}-copy-${i + 1}`,
+    title: `${row.title} (Copy ${i + 1})`,
+  })),
+  ...baseRows.map((row, i) => ({
+    ...row,
+    id: `${row.id}-copy-${i + 4}`,
+    title: `${row.title} (Copy ${i + 4})`,
+  })),
+]
+
+const projectsCount = auxBodyTable.length
+
+const auxHeaderTable = [
+  { id: 'project', label: `${projectsCount} Projects` },
+  {
+    id: 'RECENT',
+    label: 'Created',
+    sortable: true,
+    onClick: () => {},
+  },
+  { id: 'BPM', label: 'BPM', onClick: () => {} },
+  { id: 'KEY', label: 'Key', onClick: () => {} },
+  { id: 'DURATION', label: 'Duration', onClick: () => {} },
+]
+
+export default {
+  title: 'Components/DataTable',
+  component: DataTable,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onClick: {
+      action: 'onClick',
+    },
+    onSort: {
+      action: 'onSort',
+    },
+    renderHeaderActions: {
+      control: 'function',
+    },
+    columns: {
+      control: 'object',
+    },
+    data: {
+      control: 'object',
+    },
+    sorting: {
+      control: 'object',
+    },
+    initialSorting: {
+      control: 'object',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '100%',
+          maxWidth: '1620px',
+          margin: '0 auto',
+          maxHeight: '400px',
+          overflow: 'auto',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+const SelectableTemplate = (args) => {
+  const [rows] = useState(auxBodyTable)
+  const [selectedRowIds, setSelectedRowIds] = useState([])
+  const [sorting, setSorting] = useState(
+    args.initialSorting ?? {
+      field: 'RECENT',
+      sort: 'DESC',
+    },
+  )
+
+  useEffect(() => {
+    setSorting(
+      args.initialSorting ?? {
+        field: 'RECENT',
+        sort: 'DESC',
+      },
+    )
+  }, [args.initialSorting])
+
+  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 handleSelectRow = (id, checked) => {
+    setSelectedRowIds((prev) =>
+      checked
+        ? prev.includes(id)
+          ? prev
+          : [...prev, id]
+        : prev.filter((rowId) => rowId !== id),
+    )
+  }
+
+  const handleSelectAll = (checked) => {
+    if (!checked) {
+      setSelectedRowIds([])
+      return
+    }
+    setSelectedRowIds(rows.map((row) => row.id))
+  }
+
+  const handleSort = (columnId, direction) => {
+    setSorting({
+      field: columnId,
+      sort: direction,
+    })
+  }
+
+  const sortedRows = sortRows(rows, sorting)
+
+  const handleClick = (row) => {
+    console.log('Row clicked:', row)
+  }
+
+  return (
+    <DataTable
+      {...args}
+      columns={auxHeaderTable}
+      data={sortedRows}
+      sorting={sorting}
+      selectedRowIds={selectedRowIds}
+      onSelectRow={handleSelectRow}
+      onSelectAll={handleSelectAll}
+      onSort={handleSort}
+      onClick={handleClick}
+      stickyOffset={16}
+    />
+  )
+}
+
+export const Default = {
+  render: (args) => (
+    <div
+      style={{
+        width: '100%',
+        maxWidth: '1620px',
+        maxHeight: '400px',
+        // overflow: 'auto',
+        // margin: '0 auto',
+      }}
+    >
+      <SelectableTemplate {...args} />
+    </div>
+  ),
+  args: {
+    children: 'DataTable Component',
+    onSort: () => {},
+    onClick: () => {},
+    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',
+    },
+  },
+}