Sortable

import { Sortable } from 'fluxo-ui';

function SortableList() {
  const [items, setItems] = useState([
    'First Item',
    'Second Item',
    'Third Item',
    'Fourth Item',
  ]);

  return (
    <Sortable
      items={items}
      onChange={(newItems) => setItems(newItems)}
      dropIndicator="line"
    >
      {(item, index) => (
        <div className="bg-blue-600 px-4 py-3 rounded-md">
          {index + 1}. {item}
        </div>
      )}
    </Sortable>
  );
}

import { Sortable } from 'fluxo-ui';

interface Task {
  id: number;
  title: string;
  description?: string;
  priority?: 'low' | 'medium' | 'high';
}

function TaskList() {
  const [tasks, setTasks] = useState<Task[]>([
    { id: 1, title: 'Setup project', priority: 'high' },
    { id: 2, title: 'Design UI', priority: 'medium' },
    { id: 3, title: 'Deploy', priority: 'low' },
  ]);

  return (
    <Sortable
      items={tasks}
      onChange={(newTasks) => setTasks(newTasks)}
      className="space-y-3"
    >
      {(task) => (
        <div className="bg-gray-100 rounded-lg p-4 cursor-move">
          <h3>{task.title}</h3>
          <span className={`priority-${task.priority}`}>
            {task.priority}
          </span>
        </div>
      )}
    </Sortable>
  );
}

import { Sortable } from 'fluxo-ui';

function KanbanBoard() {
  const [columns, setColumns] = useState({
    todo: [{ id: 1, text: 'Task 1' }],
    inProgress: [{ id: 2, text: 'Task 2' }],
    done: [{ id: 3, text: 'Task 3' }],
  });

  const handleDrop = (columnKey, source, target) => {
    if (source.containerId !== target.containerId) {
      const sourceKey = Object.keys(columns).find(
        key => columns[key].some(item => item.id === source.item.id)
      );

      setColumns({
        ...columns,
        [sourceKey]: columns[sourceKey].filter(
          item => item.id !== source.item.id
        ),
        [columnKey]: [...columns[columnKey], source.item],
      });
    }
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {Object.keys(columns).map(columnKey => (
        <Sortable
          key={columnKey}
          items={columns[columnKey]}
          onChange={(newItems) =>
            setColumns({ ...columns, [columnKey]: newItems })
          }
          onDrop={(source, target) =>
            handleDrop(columnKey, source, target)
          }
          showPlaceholder
        >
          {(item) => <div>{item.text}</div>}
        </Sortable>
      ))}
    </div>
  );
}

import { Sortable } from 'fluxo-ui';

function TypeBasedSorting() {
  const [items, setItems] = useState({
    features: [
      { id: 1, text: 'User Auth', type: 'feature' },
      { id: 2, text: 'Dark Mode', type: 'feature' },
    ],
    bugs: [
      { id: 3, text: 'Memory Leak', type: 'bug' },
    ],
    mixed: [],
  });

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {/* Features - only accepts feature type */}
      <Sortable
        items={items.features}
        onChange={(newItems) =>
          setItems(prev => ({ ...prev, features: newItems }))
        }
        itemType="feature"
      >
        {(item) => <div>{item.text}</div>}
      </Sortable>

      {/* Bugs - only accepts bug type */}
      <Sortable
        items={items.bugs}
        onChange={(newItems) =>
          setItems(prev => ({ ...prev, bugs: newItems }))
        }
        itemType="bug"
      >
        {(item) => <div>{item.text}</div>}
      </Sortable>

      {/* Mixed - accepts both types */}
      <Sortable
        items={items.mixed}
        accept={['feature', 'bug']}
        onChange={(newItems) =>
          setItems(prev => ({ ...prev, mixed: newItems }))
        }
        onDrop={(source) => {
          setItems(prev => {
            const newState = { ...prev };
            if (source.itemType === 'feature') {
              newState.features = newState.features.filter(
                item => item.id !== source.item.id
              );
            } else if (source.itemType === 'bug') {
              newState.bugs = newState.bugs.filter(
                item => item.id !== source.item.id
              );
            }
            newState.mixed = [...newState.mixed, source.item];
            return newState;
          });
        }}
      >
        {(item) => <div>{item.text}</div>}
      </Sortable>
    </div>
  );
}

import { Sortable } from 'fluxo-ui';

function ListWithHandles() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  return (
    <Sortable
      items={items}
      onChange={setItems}
      provideDragRef
    >
      {(item, index, { draggable }) => (
        <div className="flex items-center gap-3">
          {/* Custom drag handle */}
          <div ref={draggable?.dragRef} className="cursor-move">
            ⋮⋮
          </div>
          <div className="flex-1">{item}</div>
        </div>
      )}
    </Sortable>
  );
}

// Scroll-aware Sortable: 500 items inside a 320px-tall scrollable container.
// Positioning is computed from viewport coordinates + getBoundingClientRect,
// so it remains correct at any scroll position. Auto-scroll engages near edges.
const [items, setItems] = useState(() => makeRows(500));

<div style={{ height: 320, overflow: 'auto' }}>
  <Sortable items={items} onChange={setItems} idProp="id">
    {(row) => <div style={{ background: row.color }}>{row.label}</div>}
  </Sortable>
</div>