@byline/ui 0.9.3

package/src/fields/array/array-field.tsx

@@ -0,0 +1,266 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useEffect, useState } from 'react'
+
+import type { ArrayField as ArrayFieldType, Field } from '@byline/core'
+import { IconButton, PlusIcon } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { DraggableSortable, moveItem } from '../../dnd/draggable-sortable'
+import { defaultScalarForField } from '../../fields/field-helpers'
+import { FieldRenderer } from '../../fields/field-renderer'
+import { SortableItem } from '../../fields/sortable-item'
+import { useFormContext } from '../../forms/form-context'
+import styles from './array-field.module.css'
+
+// ---------------------------------------------------------------------------
+// ArrayField — renders `type: 'array'` fields. Children are homogeneous:
+// either single value fields or a single group definition. Supports D&D.
+// ---------------------------------------------------------------------------
+
+export const ArrayField = ({
+  field,
+  defaultValue,
+  path,
+  disableSorting = false,
+}: {
+  field: ArrayFieldType
+  defaultValue: any
+  path: string
+  disableSorting?: boolean
+}) => {
+  const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext()
+  const [items, setItems] = useState<{ id: string; data: any }[]>([])
+
+  useEffect(() => {
+    if (Array.isArray(defaultValue)) {
+      setItems(
+        defaultValue.map((item: any) => ({
+          id:
+            item && typeof item === 'object' && 'id' in item
+              ? String((item as { id: string }).id)
+              : item && typeof item === 'object' && '_id' in item
+                ? String((item as { _id: string })._id)
+                : crypto.randomUUID(),
+          data: item,
+        }))
+      )
+    } else {
+      setItems([])
+    }
+  }, [defaultValue])
+
+  const handleDragEnd = ({
+    moveFromIndex,
+    moveToIndex,
+  }: {
+    moveFromIndex: number
+    moveToIndex: number
+  }) => {
+    setItems((prev) => moveItem(prev, moveFromIndex, moveToIndex))
+    const currentArray = (getFieldValue(path) ?? defaultValue) as any[]
+
+    if (Array.isArray(currentArray)) {
+      const clampedFrom = Math.max(0, Math.min(moveFromIndex, currentArray.length - 1))
+      const clampedTo = Math.max(0, Math.min(moveToIndex, currentArray.length - 1))
+      if (clampedFrom === clampedTo) return
+
+      const item = currentArray[clampedFrom]
+      const itemId =
+        item && typeof item === 'object' && 'id' in item
+          ? String((item as { id: string }).id)
+          : String(clampedFrom)
+
+      appendPatch({
+        kind: 'array.move',
+        path: path,
+        itemId,
+        toIndex: clampedTo,
+      })
+    }
+  }
+
+  const handleAddItem = async (atIndex?: number) => {
+    const childFields = field.fields ?? []
+    if (childFields.length === 0) return
+
+    const newId = crypto.randomUUID()
+
+    // Build a new item with default values for ALL child fields
+    const newItem: Record<string, any> = {}
+    for (const childField of childFields) {
+      if (childField.type === 'group' && childField.fields && childField.fields.length > 0) {
+        // Group child — build a nested object with defaults for each inner field
+        const groupObj: Record<string, any> = {}
+        for (const innerField of childField.fields as Field[]) {
+          groupObj[innerField.name] = await defaultScalarForField(innerField, getFieldValues)
+        }
+        newItem[childField.name] = groupObj
+      } else {
+        newItem[childField.name] = await defaultScalarForField(childField, getFieldValues)
+      }
+    }
+
+    const currentArray = (getFieldValue(path) ?? defaultValue) as any[]
+    const insertAt = atIndex != null ? atIndex : currentArray ? currentArray.length : 0
+
+    const newItemWrapper = { id: newId, data: newItem }
+    setItems((prev) => {
+      const next = [...prev]
+      next.splice(insertAt, 0, newItemWrapper)
+      return next
+    })
+
+    appendPatch({
+      kind: 'array.insert',
+      path: path,
+      index: insertAt,
+      item: newItem,
+    })
+
+    const newArrayValue = currentArray ? [...currentArray] : []
+    newArrayValue.splice(insertAt, 0, newItem)
+    setFieldStore(path, newArrayValue)
+  }
+
+  const handleRemoveItem = (index: number) => {
+    const currentArray = (getFieldValue(path) ?? defaultValue) as any[]
+    if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return
+
+    const item = currentArray[index]
+    const itemId =
+      item && typeof item === 'object' && 'id' in item
+        ? String((item as { id: string }).id)
+        : String(index)
+
+    setItems((prev) => prev.filter((_, i) => i !== index))
+
+    appendPatch({
+      kind: 'array.remove',
+      path: path,
+      itemId,
+    })
+
+    const newArrayValue = [...currentArray]
+    newArrayValue.splice(index, 1)
+    setFieldStore(path, newArrayValue)
+  }
+
+  const handleInsertBelow = (index: number) => {
+    void handleAddItem(index + 1)
+  }
+
+  const renderItem = (itemWrapper: { id: string; data: any }, index: number) => {
+    const item = itemWrapper.data
+    const arrayElementPath = `${path}[${index}]`
+
+    if (!item || typeof item !== 'object') return null
+
+    const childFields = field.fields ?? []
+    if (childFields.length === 0) return null
+
+    // Render ALL child fields defined in the array's field schema
+    const innerBody = childFields.map((childField) => {
+      const initial = item[childField.name]
+
+      if (childField.type === 'group' && childField.fields && childField.fields.length > 0) {
+        // Group child — render its inner fields with the group's sub-object
+        const groupData = initial && typeof initial === 'object' ? initial : {}
+        return (
+          <div
+            key={childField.name}
+            className={cx('byline-field-array-group-fields', styles['group-fields'])}
+          >
+            {childField.label && (
+              <h4 className={cx('byline-field-array-group-header', styles['group-header'])}>
+                {childField.label}
+              </h4>
+            )}
+            {(childField.fields as Field[]).map((innerField) => (
+              <FieldRenderer
+                key={innerField.name}
+                field={innerField}
+                defaultValue={groupData[innerField.name]}
+                basePath={`${arrayElementPath}.${childField.name}`}
+                disableSorting={true}
+              />
+            ))}
+          </div>
+        )
+      }
+
+      return (
+        <FieldRenderer
+          key={childField.name}
+          field={childField}
+          defaultValue={initial}
+          basePath={arrayElementPath}
+          disableSorting={true}
+        />
+      )
+    })
+
+    const label = field.label ?? field.name
+
+    if (disableSorting) {
+      return (
+        <div key={itemWrapper.id} className={cx('byline-field-array-card', styles.card)}>
+          <div className={cx('byline-field-array-group-fields', styles['group-fields'])}>
+            {innerBody}
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <SortableItem
+        key={itemWrapper.id}
+        id={itemWrapper.id}
+        label={label}
+        onAddBelow={() => handleInsertBelow(index)}
+        onRemove={() => handleRemoveItem(index)}
+      >
+        <div className={cx('byline-field-array-group-fields', styles['group-fields'])}>
+          {innerBody}
+        </div>
+      </SortableItem>
+    )
+  }
+
+  return (
+    <div className={`byline-field-array ${field.name}`}>
+      {!disableSorting && field.label && (
+        <h3 className={cx('byline-field-array-title', styles.title)}>{field.label}</h3>
+      )}
+      {disableSorting ? (
+        <div className={cx('byline-field-array-stack', styles.stack)}>
+          {items.map((item, index) => renderItem(item, index))}
+        </div>
+      ) : (
+        <DraggableSortable
+          ids={items.map((i) => i.id)}
+          onDragEnd={handleDragEnd}
+          className={cx('byline-field-array-stack', styles.stack)}
+        >
+          {items.map((item, index) => renderItem(item, index))}
+          <span>
+            <IconButton
+              onClick={() => {
+                void handleAddItem()
+              }}
+              aria-label="Add item"
+            >
+              <PlusIcon />
+            </IconButton>
+          </span>
+        </DraggableSortable>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,148 @@
+/**
+ * BlocksField — heterogeneous array picked from a modal of block variants.
+ *
+ * Override handles:
+ *   .byline-field-blocks                — outer wrapper
+ *   .byline-field-blocks-title          — block-list label heading
+ *   .byline-field-blocks-stack          — vertical stack of blocks + add row
+ *   .byline-field-blocks-add-row        — add-button row at the bottom
+ *   .byline-field-blocks-modal-head     — picker modal header
+ *   .byline-field-blocks-modal-title    — picker modal title
+ *   .byline-field-blocks-grid           — grid of variant cards
+ *   .byline-field-blocks-card           — variant card wrapper
+ *   .byline-field-blocks-card-head      — card title row
+ *   .byline-field-blocks-card-title     — card title text
+ *   .byline-field-blocks-card-index     — small numeric index pill
+ *   .byline-field-blocks-card-code      — variant blockType code line
+ *   .byline-field-blocks-card-body      — variant description text
+ *   .byline-field-blocks-card-cursor    — cursor: pointer hint on the modal content
+ */
+
+.title,
+:global(.byline-field-blocks-title) {
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+}
+
+.stack,
+:global(.byline-field-blocks-stack) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+
+.add-row,
+:global(.byline-field-blocks-add-row) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.modal-head,
+:global(.byline-field-blocks-modal-head) {
+  padding-top: 1rem;
+  margin-bottom: var(--spacing-8);
+}
+
+.modal-title,
+:global(.byline-field-blocks-modal-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-2xl);
+}
+
+.modal-content,
+:global(.byline-field-blocks-card-cursor) {
+  cursor: pointer;
+}
+
+.grid,
+:global(.byline-field-blocks-grid) {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-16);
+}
+
+@media (min-width: 40rem) {
+  .grid,
+  :global(.byline-field-blocks-grid) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 48rem) {
+  .grid,
+  :global(.byline-field-blocks-grid) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.card,
+:global(.byline-field-blocks-card) {
+  margin-bottom: var(--spacing-8);
+}
+
+.card-head,
+:global(.byline-field-blocks-card-head) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+}
+
+.card-title,
+:global(.byline-field-blocks-card-title) {
+  font-size: 1.3rem;
+  line-height: var(--line-height-tight);
+}
+
+.card-index,
+:global(.byline-field-blocks-card-index) {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: var(--border-radius-full);
+  color: var(--gray-400);
+  font-size: 10px;
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+.card-code,
+:global(.byline-field-blocks-card-code) {
+  display: block;
+  margin-top: 0;
+  color: var(--gray-400);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+}
+
+.card-body,
+:global(.byline-field-blocks-card-body) {
+  color: var(--gray-500);
+  font-size: var(--font-size-sm);
+}
+
+/* ─── Dark theme variants ───────────────────────────────────── */
+
+:is([data-theme="dark"], :global(.dark)) {
+  .card-index,
+  :global(.byline-field-blocks-card-index) {
+    border-color: var(--gray-700);
+  }
+
+  .card-code,
+  :global(.byline-field-blocks-card-code) {
+    color: var(--gray-500);
+  }
+
+  .card-body,
+  :global(.byline-field-blocks-card-body) {
+    color: var(--gray-200);
+  }
+}