@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1

package/src/components/common/lists/reorderable/ReorderableList.tsx

@@ -0,0 +1,280 @@
+import type { DragEvent, ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { Text } from '../../typography/Text.js'
+import { ReorderableListRow } from './ReorderableListRow.js'
+import { insertIndexFromRowRect } from './reorderableUtils.js'
+import type {
+  ReorderableItem,
+  ReorderableItemRenderContext,
+  ReorderableMove,
+} from './types.js'
+import { useReorderableDragState } from './useReorderableDragState.js'
+
+//#region styled-components
+
+const StyledList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`
+
+const StyledEmpty = styled.li<{ $active?: boolean }>`
+  padding: 8px 10px;
+  border: 1px dashed
+    ${({ $active }) =>
+      $active
+        ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
+        : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-sm);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  list-style: none;
+`
+
+const StyledItemButton = styled.button<{ $selected?: boolean }>`
+  display: block;
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid
+    ${({ $selected }) =>
+      $selected
+        ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
+        : 'transparent'};
+  border-radius: var(--platform-radius-sm);
+  background: ${({ $selected }) =>
+    $selected
+      ? 'var(--platform-colors-surface-hover, var(--platform-colors-surface))'
+      : 'transparent'};
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    background: var(
+      --platform-colors-surface-hover,
+      var(--platform-colors-surface)
+    );
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.55;
+  }
+`
+
+//#endregion
+
+const DEFAULT_SECTION_KEY = 'list'
+
+function applyListReorder<TId extends string>(
+  ids: ReadonlyArray<TId>,
+  fromIndex: number,
+  insertIndex: number,
+): TId[] | null {
+  if (fromIndex < 0 || fromIndex >= ids.length) return null
+  let targetIndex = insertIndex
+  if (fromIndex < targetIndex) targetIndex -= 1
+  if (fromIndex === targetIndex) return null
+  const next = [...ids]
+  const [moved] = next.splice(fromIndex, 1)
+  next.splice(targetIndex, 0, moved)
+  return next
+}
+
+export interface ReorderableListProps<TId extends string = string> {
+  items: ReadonlyArray<ReorderableItem<TId>>
+  selectedId?: TId
+  readonly?: boolean
+  emptyLabel?: string
+  'aria-label'?: string
+  onSelect?: (id: TId) => void
+  onReorder?: (order: TId[]) => void
+  renderItem?: (ctx: ReorderableItemRenderContext<TId>) => ReactNode
+}
+
+export function ReorderableList<TId extends string = string>({
+  items,
+  selectedId,
+  readonly = false,
+  emptyLabel = 'No items',
+  'aria-label': ariaLabel = 'Reorderable list',
+  onSelect,
+  onReorder,
+  renderItem,
+}: ReorderableListProps<TId>): React.ReactElement {
+  const {
+    draggedId,
+    dropTarget,
+    beginDrag,
+    endDrag,
+    hoverDrop,
+    takeCommittedMove,
+  } = useReorderableDragState<TId>()
+
+  const canReorder = !readonly && Boolean(onReorder)
+
+  const commitDrop = (insertIndex: number): void => {
+    if (!canReorder) return
+    hoverDrop({ sectionKey: DEFAULT_SECTION_KEY, insertIndex })
+    const committed = takeCommittedMove()
+    endDrag()
+    if (!committed || !onReorder) return
+    const { drag, to } = committed
+    if (
+      drag.from.sectionKey !== DEFAULT_SECTION_KEY ||
+      to.sectionKey !== DEFAULT_SECTION_KEY
+    ) {
+      return
+    }
+    const next = applyListReorder(
+      items.map(item => item.id),
+      drag.from.index,
+      to.insertIndex,
+    )
+    if (next) onReorder(next)
+  }
+
+  const handleRowDragOver = (
+    event: DragEvent<HTMLDivElement>,
+    index: number,
+  ): void => {
+    if (!canReorder || !draggedId) return
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+    hoverDrop({
+      sectionKey: DEFAULT_SECTION_KEY,
+      insertIndex: insertIndexFromRowRect(
+        event.clientY,
+        event.currentTarget.getBoundingClientRect(),
+        index,
+      ),
+    })
+  }
+
+  const handleRowDrop = (
+    event: DragEvent<HTMLDivElement>,
+    index: number,
+  ): void => {
+    if (!canReorder || !draggedId) return
+    event.preventDefault()
+    event.stopPropagation()
+    commitDrop(
+      insertIndexFromRowRect(
+        event.clientY,
+        event.currentTarget.getBoundingClientRect(),
+        index,
+      ),
+    )
+  }
+
+  const handleEmptyDragOver = (event: DragEvent<HTMLLIElement>): void => {
+    if (!canReorder || !draggedId) return
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+    hoverDrop({ sectionKey: DEFAULT_SECTION_KEY, insertIndex: 0 })
+  }
+
+  const handleEmptyDrop = (event: DragEvent<HTMLLIElement>): void => {
+    if (!canReorder || !draggedId) return
+    event.preventDefault()
+    commitDrop(0)
+  }
+
+  const renderRowContent = (
+    item: ReorderableItem<TId>,
+    ctx: ReorderableItemRenderContext<TId>,
+  ): ReactNode => {
+    if (renderItem) return renderItem(ctx)
+    return (
+      <StyledItemButton
+        type="button"
+        $selected={ctx.selected}
+        disabled={ctx.disabled}
+        onClick={() => {
+          if (!ctx.disabled) onSelect?.(item.id)
+        }}
+      >
+        {item.id}
+      </StyledItemButton>
+    )
+  }
+
+  if (items.length === 0) {
+    return (
+      <StyledList aria-label={ariaLabel} role="list">
+        <StyledEmpty
+          $active={
+            Boolean(draggedId) && dropTarget?.sectionKey === DEFAULT_SECTION_KEY
+          }
+          onDragOver={handleEmptyDragOver}
+          onDrop={handleEmptyDrop}
+        >
+          <Text as="span">{emptyLabel}</Text>
+        </StyledEmpty>
+      </StyledList>
+    )
+  }
+
+  return (
+    <StyledList aria-label={ariaLabel} role="list">
+      {items.map((item, index) => {
+        const dragging = item.id === draggedId
+        const dropAbove =
+          dropTarget?.sectionKey === DEFAULT_SECTION_KEY &&
+          dropTarget.insertIndex === index
+        const dropBelow =
+          dropTarget?.sectionKey === DEFAULT_SECTION_KEY &&
+          dropTarget.insertIndex === index + 1
+        const disabled = Boolean(item.disabled)
+        const ctx: ReorderableItemRenderContext<TId> = {
+          id: item.id,
+          sectionKey: DEFAULT_SECTION_KEY,
+          index,
+          item,
+          selected: selectedId === item.id,
+          dragging,
+          disabled,
+        }
+
+        return (
+          <li key={item.id}>
+            <ReorderableListRow
+              dragging={dragging}
+              dropAbove={dropAbove}
+              dropBelow={dropBelow}
+              readonly={readonly || disabled}
+              draggable={!disabled}
+              onDragOver={(event: DragEvent<HTMLDivElement>) =>
+                handleRowDragOver(event, index)
+              }
+              onDrop={(event: DragEvent<HTMLDivElement>) =>
+                handleRowDrop(event, index)
+              }
+              onDragHandleStart={(event: DragEvent<HTMLSpanElement>) => {
+                event.dataTransfer.setData('text/plain', item.id)
+                event.dataTransfer.effectAllowed = 'move'
+                beginDrag(item.id, {
+                  sectionKey: DEFAULT_SECTION_KEY,
+                  index,
+                })
+              }}
+              onDragEnd={endDrag}
+            >
+              {renderRowContent(item, ctx)}
+            </ReorderableListRow>
+          </li>
+        )
+      })}
+    </StyledList>
+  )
+}
+
+// Re-export move type for consumers wiring cross-section handlers from List wrapper.
+export type { ReorderableMove }

package/src/components/common/lists/reorderable/ReorderableListRow.tsx

@@ -0,0 +1,102 @@
+import type { DragEvent, ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { DragHandle } from './DragHandle.js'
+
+//#region styled-components
+
+const StyledRow = styled.div<{
+  $dragging: boolean
+  $dropAbove: boolean
+  $dropBelow: boolean
+}>`
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  min-height: 36px;
+  border-radius: var(--platform-radius-sm);
+  opacity: ${({ $dragging }) => ($dragging ? 0.45 : 1)};
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 18px;
+    right: 6px;
+    height: 1px;
+    background: var(
+      --platform-colors-border-strong,
+      var(--platform-colors-border)
+    );
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &::before {
+    top: 0;
+    opacity: ${({ $dropAbove }) => ($dropAbove ? 1 : 0)};
+  }
+
+  &::after {
+    bottom: 0;
+    opacity: ${({ $dropBelow }) => ($dropBelow ? 1 : 0)};
+  }
+`
+
+const StyledRowBody = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: stretch;
+  min-width: 0;
+`
+
+const StyledHandleSlot = styled.span`
+  width: 18px;
+  flex-shrink: 0;
+`
+
+//#endregion
+
+export interface ReorderableListRowProps {
+  dragging: boolean
+  dropAbove: boolean
+  dropBelow: boolean
+  readonly?: boolean
+  draggable?: boolean
+  children: ReactNode
+  onDragOver: (event: DragEvent<HTMLDivElement>) => void
+  onDrop: (event: DragEvent<HTMLDivElement>) => void
+  onDragHandleStart: (event: DragEvent<HTMLSpanElement>) => void
+  onDragEnd: () => void
+}
+
+export function ReorderableListRow({
+  dragging,
+  dropAbove,
+  dropBelow,
+  readonly = false,
+  draggable = true,
+  children,
+  onDragOver,
+  onDrop,
+  onDragHandleStart,
+  onDragEnd,
+}: ReorderableListRowProps): React.ReactElement {
+  return (
+    <StyledRow
+      $dragging={dragging}
+      $dropAbove={dropAbove}
+      $dropBelow={dropBelow}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+    >
+      {draggable ? (
+        readonly ? (
+          <StyledHandleSlot aria-hidden="true" />
+        ) : (
+          <DragHandle onDragStart={onDragHandleStart} onDragEnd={onDragEnd} />
+        )
+      ) : null}
+      <StyledRowBody>{children}</StyledRowBody>
+    </StyledRow>
+  )
+}