@byline/ui 0.9.3

package/src/dnd/draggable-sortable/demo/draggable-list-demo.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useState } from 'react'
+
+import { Card, GripperVerticalIcon } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { DraggableSortable, moveItem, useSortable } from '..'
+import styles from './draggable-list-demo.module.css'
+
+const sourceItems = [
+  {
+    id: '1',
+    name: 'Item 1',
+  },
+  {
+    id: '2',
+    name: 'Item 2',
+  },
+  {
+    id: '3',
+    name: 'Item 3',
+  },
+  {
+    id: '4',
+    name: 'Item 4',
+  },
+  {
+    id: '5',
+    name: 'Item 5',
+  },
+  {
+    id: '6',
+    name: 'Item 6',
+  },
+  {
+    id: '7',
+    name: 'Item 7',
+  },
+  {
+    id: '8',
+    name: 'Item 8',
+  },
+]
+
+type DraggableCardProps = {
+  item: { id: string; name: string }
+  isSortable: boolean
+  disabled: boolean
+}
+
+// Card component
+const DraggableCard: React.FC<DraggableCardProps> = ({ item, disabled, isSortable = true }) => {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+    id: item.id,
+    disabled,
+    transition: {
+      duration: 250,
+      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
+    },
+  })
+
+  return (
+    <Card
+      ref={setNodeRef as any}
+      className={cx(
+        'byline-demo-card',
+        styles.card,
+        isDragging && ['byline-demo-card-dragging', styles['card-dragging']]
+      )}
+      style={{
+        // @ts-expect-error
+        transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`, // translate3d is faster than translate in most browsers
+        transition,
+        zIndex: isDragging ? '10' : 'auto',
+      }}
+    >
+      <div className={cx('byline-demo-card-header', styles['card-header'])}>
+        <div
+          className={cx('byline-demo-card-grip', styles['card-grip'])}
+          {...attributes}
+          {...listeners}
+        >
+          <GripperVerticalIcon />
+        </div>
+        <h3>{item.name}</h3>
+      </div>
+      <p>Card {item.id}</p>
+    </Card>
+  )
+}
+
+export function DraggableList(): React.JSX.Element {
+  const [items, setItems] = useState(sourceItems)
+  const handleOnDragEnd = ({
+    event,
+    moveFromIndex,
+    moveToIndex,
+  }: {
+    event: any
+    moveFromIndex: number
+    moveToIndex: number
+  }) => {
+    const newItems = moveItem(items, moveFromIndex, moveToIndex)
+    setItems(newItems)
+  }
+
+  return (
+    <div className={cx('byline-demo-list', styles.list)}>
+      <DraggableSortable ids={items.map((item) => item.id)} onDragEnd={handleOnDragEnd}>
+        {items.map((item) => (
+          <DraggableCard key={item.id} disabled={false} isSortable={true} item={item} />
+        ))}
+      </DraggableSortable>
+    </div>
+  )
+}

package/src/dnd/draggable-sortable/draggable-sortable-item/index.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+/**
+ *
+ * Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/*
+ *
+ * Based on https://docs.dndkit.com/presets/sortable#connecting-all-the-pieces
+ *
+ */
+
+import type React from 'react'
+import { Fragment } from 'react'
+
+import type { UseDraggableArguments } from '@dnd-kit/core'
+
+import { useDraggableSortable } from '../use-draggable-sortable'
+import type { ChildFunction } from './types.js'
+
+export const DraggableSortableItem: React.FC<
+  {
+    children: ChildFunction
+  } & UseDraggableArguments
+> = (props) => {
+  const { id, children, disabled } = props
+
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } =
+    useDraggableSortable({
+      id,
+      disabled,
+    })
+
+  return (
+    <Fragment>
+      {children({
+        attributes: {
+          ...attributes,
+          style: {
+            cursor: isDragging ? 'grabbing' : 'grab',
+          },
+        },
+        isDragging,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+      })}
+    </Fragment>
+  )
+}

package/src/dnd/draggable-sortable/draggable-sortable-item/types.ts

@@ -0,0 +1,30 @@
+/**
+ *
+ * Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/*
+ *
+ * Based on https://docs.dndkit.com/presets/sortable#connecting-all-the-pieces
+ *
+ */
+
+import type React from 'react'
+
+import type { UseDraggableArguments } from '@dnd-kit/core'
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
+
+import type { UseDraggableSortableReturn } from '../use-draggable-sortable/types.js'
+
+export type DragHandleProps = {
+  attributes: UseDraggableArguments['attributes']
+  listeners: SyntheticListenerMap
+} & UseDraggableArguments
+
+export type ChildFunction = (args: UseDraggableSortableReturn) => React.ReactNode
+
+export type Props = {
+  children: ChildFunction
+} & UseDraggableArguments

package/src/dnd/draggable-sortable/draggable-sortable.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+/**
+ *
+ * Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/*
+ *
+ * Based on https://docs.dndkit.com/presets/sortable#connecting-all-the-pieces
+ *
+ */
+
+import type React from 'react'
+import { useCallback, useId } from 'react'
+
+import type { DragEndEvent } from '@dnd-kit/core'
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
+import { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'
+
+import type { Props } from './types.js'
+
+export type { Props }
+
+export const DraggableSortable: React.FC<Props> = (props) => {
+  const { children, className, ids, onDragEnd } = props
+
+  const id = useId()
+
+  const { setNodeRef } = useDroppable({
+    id,
+  })
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+
+      if (!active || !over) return
+
+      if (typeof onDragEnd === 'function') {
+        onDragEnd({
+          event,
+          moveFromIndex: ids.indexOf(String(active.id)),
+          moveToIndex: ids.indexOf(String(over.id)),
+        })
+      }
+    },
+    [onDragEnd, ids]
+  )
+
+  return (
+    <DndContext
+      collisionDetection={closestCenter}
+      id={id}
+      onDragEnd={handleDragEnd}
+      sensors={sensors}
+    >
+      <SortableContext items={ids}>
+        <div className={className} ref={setNodeRef}>
+          {children}
+        </div>
+      </SortableContext>
+    </DndContext>
+  )
+}

package/src/dnd/draggable-sortable/index.ts

@@ -0,0 +1,5 @@
+export { useSortable } from '@dnd-kit/sortable'
+
+export * from './draggable-sortable'
+export * from './draggable-sortable-item'
+export * from './utils'

package/src/dnd/draggable-sortable/types.ts

@@ -0,0 +1,24 @@
+/**
+ *
+ * Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/*
+ *
+ * Based on https://docs.dndkit.com/presets/sortable#connecting-all-the-pieces
+ *
+ */
+
+import type { Ref } from 'react'
+
+import type { DragEndEvent } from '@dnd-kit/core'
+
+export type Props = {
+  children: React.ReactNode
+  className?: string
+  droppableRef?: Ref<HTMLElement>
+  ids: string[]
+  onDragEnd: (e: { event: DragEndEvent; moveFromIndex: number; moveToIndex: number }) => void
+}

package/src/dnd/draggable-sortable/use-draggable-sortable/index.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+/**
+ *
+ * Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/*
+ *
+ * Based on https://docs.dndkit.com/presets/sortable#connecting-all-the-pieces
+ *
+ */
+
+import type { UseDraggableArguments } from '@dnd-kit/core'
+import { useSortable } from '@dnd-kit/sortable'
+
+import type { UseDraggableSortableReturn } from './types.js'
+
+export const useDraggableSortable = (props: UseDraggableArguments): UseDraggableSortableReturn => {
+  const { id, disabled } = props
+
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+    id,
+    disabled,
+    transition: {
+      duration: 250,
+      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
+    },
+  })
+
+  return {
+    attributes: {
+      ...attributes,
+      style: {
+        cursor: isDragging ? 'grabbing' : 'grab',
+        transition,
+      },
+    },
+    isDragging,
+    // @ts-expect-error
+    listeners,
+    setNodeRef,
+    // @ts-expect-error
+    transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`, // translate3d is faster than translate in most browsers
+    //@ts-expect-error
+    transition,
+  }
+}

package/src/dnd/draggable-sortable/use-draggable-sortable/types.ts

@@ -0,0 +1,25 @@
+/**
+ *
+ * Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/*
+ *
+ * Based on https://docs.dndkit.com/presets/sortable#connecting-all-the-pieces
+ *
+ */
+
+import type { HTMLAttributes } from 'react'
+
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
+
+export type UseDraggableSortableReturn = {
+  attributes: HTMLAttributes<unknown>
+  isDragging?: boolean
+  listeners: SyntheticListenerMap
+  setNodeRef: (node: HTMLElement | null) => void
+  transform: string
+  transition: string
+}

package/src/dnd/draggable-sortable/utils.ts

@@ -0,0 +1,29 @@
+/**
+ *
+ * Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/*
+ *
+ * Based on https://docs.dndkit.com/presets/sortable#connecting-all-the-pieces
+ *
+ */
+
+export function moveItem(items: any[], moveFromIndex: number, moveToIndex: number) {
+  if (
+    moveFromIndex < 0 ||
+    moveFromIndex >= items.length ||
+    moveToIndex < 0 ||
+    moveToIndex >= items.length
+  ) {
+    throw new Error('Index out of bounds')
+  }
+
+  const updatedItems = [...items] // Create a copy of the original array
+  const [itemToMove] = updatedItems.splice(moveFromIndex, 1)
+  updatedItems.splice(moveToIndex, 0, itemToMove)
+
+  return updatedItems
+}

package/src/fields/array/array-field.module.css

@@ -0,0 +1,48 @@
+/**
+ * ArrayField — homogeneous array of child fields with optional D&D.
+ *
+ * Override handles:
+ *   .byline-field-array               — outer wrapper
+ *   .byline-field-array-title         — array label heading
+ *   .byline-field-array-stack         — vertical layout for items + add row
+ *   .byline-field-array-card          — disable-sorting fallback card per item
+ *   .byline-field-array-group-header  — sub-group title above grouped fields
+ *   .byline-field-array-group-fields  — vertical stack of fields inside an item
+ */
+
+.title,
+:global(.byline-field-array-title) {
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+}
+
+.stack,
+:global(.byline-field-array-stack) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+
+.card,
+:global(.byline-field-array-card) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: var(--spacing-16);
+  border: var(--border-width-thin) dashed var(--gray-600);
+  border-radius: var(--border-radius-md);
+}
+
+.group-header,
+:global(.byline-field-array-group-header) {
+  font-size: 0.9rem;
+  font-weight: var(--font-weight-medium);
+}
+
+.group-fields,
+:global(.byline-field-array-group-fields) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}