@byline/ui 0.9.3

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

@@ -0,0 +1,312 @@
+/**
+ * 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, useMemo, useState } from 'react'
+
+import type {
+  BlocksField as BlocksFieldType,
+  Field,
+  GroupField as GroupFieldType,
+} from '@byline/core'
+import { Card, CloseIcon, IconButton, Modal, PlusIcon } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { DraggableSortable, moveItem } from '../../dnd/draggable-sortable'
+import { defaultScalarForField } from '../../fields/field-helpers'
+import { GroupField } from '../../fields/group/group-field'
+import { SortableItem } from '../../fields/sortable-item'
+import { useFormContext } from '../../forms/form-context'
+import styles from './blocks-field.module.css'
+
+// ---------------------------------------------------------------------------
+// BlocksField — renders `type: 'blocks'` fields. Children are heterogeneous
+// group fields selected via a modal picker. Supports D&D.
+// ---------------------------------------------------------------------------
+
+export const BlocksField = ({
+  field,
+  defaultValue,
+  path,
+}: {
+  field: BlocksFieldType
+  defaultValue: any
+  path: string
+}) => {
+  const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext()
+  const [items, setItems] = useState<{ id: string; data: any }[]>([])
+  const [showAddBlockModal, setShowAddBlockModal] = useState(false)
+  const [pendingInsertIndex, setPendingInsertIndex] = useState<number | null>(null)
+
+  const availableBlocks = useMemo(() => field.blocks ?? [], [field.blocks])
+  const [selectedBlockName, setSelectedBlockName] = useState<string>(
+    () => availableBlocks[0]?.blockType
+  )
+
+  useEffect(() => {
+    if (
+      selectedBlockName == null ||
+      !availableBlocks.some((b) => b.blockType === selectedBlockName)
+    ) {
+      setSelectedBlockName(availableBlocks[0]?.blockType)
+    }
+  }, [availableBlocks, selectedBlockName])
+
+  useEffect(() => {
+    if (Array.isArray(defaultValue)) {
+      setItems(
+        defaultValue.map((item: any) => ({
+          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 (forcedVariantName?: string, atIndex?: number) => {
+    setShowAddBlockModal(false)
+    setPendingInsertIndex(null)
+
+    const variant =
+      (forcedVariantName != null
+        ? availableBlocks.find((v) => v.blockType === forcedVariantName)
+        : undefined) ?? availableBlocks[0]
+
+    if (!variant) return
+
+    const compositeFields = (variant.fields ?? []) as Field[]
+
+    const newId = crypto.randomUUID()
+    const newItem: Record<string, any> = {
+      _id: newId,
+      _type: variant.blockType,
+    }
+    for (const f of compositeFields) {
+      newItem[f.name] = await defaultScalarForField(f, 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, forcedVariantName?: string) => {
+    if (availableBlocks.length > 1 && forcedVariantName == null) {
+      setPendingInsertIndex(index + 1)
+      setShowAddBlockModal(true)
+    } else {
+      void handleAddItem(forcedVariantName, index + 1)
+    }
+  }
+
+  const renderItem = (itemWrapper: { id: string; data: any }, index: number) => {
+    const item = itemWrapper.data
+    const arrayElementPath = `${path}[${index}]`
+
+    if (!item || typeof item !== 'object' || typeof item._type !== 'string') return null
+
+    const subField = field.blocks?.find((b) => b.blockType === item._type)
+    if (subField == null) return null
+
+    // Extract field data (everything except _id and _type)
+    const { _id, _type, ...fieldData } = item
+    const label = subField.label ?? _type
+
+    // Render the block's children directly with arrayElementPath as the
+    // path (not basePath).  FieldRenderer would append the group name
+    // (e.g. "richTextBlock") producing paths like
+    // "content[0].richTextBlock.constrainedWidth", but the flat block
+    // shape stores fields directly on the item so the correct path is
+    // "content[0].constrainedWidth".
+    const body = (
+      <GroupField
+        key={subField.blockType}
+        field={
+          {
+            type: 'group',
+            name: subField.blockType,
+            fields: subField.fields,
+            label: undefined,
+          } as GroupFieldType
+        }
+        defaultValue={fieldData}
+        path={arrayElementPath}
+      />
+    )
+
+    return (
+      <SortableItem
+        key={itemWrapper.id}
+        id={itemWrapper.id}
+        label={label ?? subField.blockType}
+        onAddBelow={() => handleInsertBelow(index)}
+        onRemove={() => handleRemoveItem(index)}
+      >
+        {body}
+      </SortableItem>
+    )
+  }
+
+  return (
+    <div className={`byline-field-blocks ${field.name}`}>
+      {field.label && (
+        <h3 className={cx('byline-field-blocks-title', styles.title)}>{field.label}</h3>
+      )}
+      <DraggableSortable
+        ids={items.map((i) => i.id)}
+        onDragEnd={handleDragEnd}
+        className={cx('byline-field-blocks-stack', styles.stack)}
+      >
+        {items.map((item, index) => renderItem(item, index))}
+        <div className={cx('byline-field-blocks-add-row', styles['add-row'])}>
+          <IconButton
+            onClick={() => {
+              setPendingInsertIndex(null)
+              setShowAddBlockModal(true)
+            }}
+            disabled={!selectedBlockName}
+            aria-label="Add block"
+          >
+            <PlusIcon />
+          </IconButton>
+        </div>
+      </DraggableSortable>
+      <Modal
+        isOpen={showAddBlockModal}
+        closeOnOverlayClick={true}
+        onDismiss={() => {
+          setShowAddBlockModal(false)
+          setPendingInsertIndex(null)
+        }}
+      >
+        <Modal.Container style={{ maxWidth: '600px' }}>
+          <Modal.Header className={cx('byline-field-blocks-modal-head', styles['modal-head'])}>
+            <h3 className={cx('byline-field-blocks-modal-title', styles['modal-title'])}>Blocks</h3>
+            <IconButton
+              arial-label="Close"
+              size="xs"
+              onClick={() => {
+                setShowAddBlockModal(false)
+                setPendingInsertIndex(null)
+              }}
+            >
+              <CloseIcon width="16px" height="16px" svgClassName="white-icon" />
+            </IconButton>
+          </Modal.Header>
+          <Modal.Content className={cx('byline-field-blocks-card-cursor', styles['modal-content'])}>
+            <div className={cx('byline-field-blocks-grid', styles.grid)}>
+              {availableBlocks.map((b, index) => (
+                <Card
+                  key={b.blockType}
+                  hover
+                  onClick={() => void handleAddItem(b.blockType, pendingInsertIndex ?? undefined)}
+                  className={cx('byline-field-blocks-card', styles.card)}
+                >
+                  <Card.Header>
+                    <div className={cx('byline-field-blocks-card-head', styles['card-head'])}>
+                      <Card.Title
+                        className={cx('byline-field-blocks-card-title', styles['card-title'])}
+                      >
+                        {b.label ?? b.blockType}
+                      </Card.Title>
+                      <span className={cx('byline-field-blocks-card-index', styles['card-index'])}>
+                        {index + 1}
+                      </span>
+                    </div>
+                    <code className={cx('byline-field-blocks-card-code', styles['card-code'])}>
+                      {b.blockType}
+                    </code>
+                  </Card.Header>
+                  <Card.Content>
+                    <p className={cx('byline-field-blocks-card-body', styles['card-body'])}>
+                      {b.helpText ?? b.label ?? b.blockType}
+                    </p>
+                  </Card.Content>
+                </Card>
+              ))}
+            </div>
+          </Modal.Content>
+        </Modal.Container>
+      </Modal>
+    </div>
+  )
+}

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

@@ -0,0 +1,53 @@
+/**
+ * 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 type { CheckboxField as FieldType } from '@byline/core'
+import { Checkbox } from '@infonomic/uikit/react'
+
+import { useFieldError, useFieldValue } from '../../forms/form-context'
+
+export const CheckboxField = ({
+  field,
+  value,
+  defaultValue,
+  onChange,
+  id,
+  path,
+}: {
+  field: FieldType
+  value?: boolean
+  defaultValue?: boolean
+  onChange?: (value: boolean) => void
+  id?: string
+  path?: string
+}) => {
+  const fieldPath = path ?? field.name
+  const fieldError = useFieldError(fieldPath)
+  const fieldValue = useFieldValue<boolean | undefined>(fieldPath)
+  const checked = value ?? fieldValue ?? defaultValue ?? false
+
+  return (
+    <div className={`byline-field-checkbox ${field.name}`}>
+      <Checkbox
+        id={id ?? fieldPath}
+        name={field.name}
+        label={field.label}
+        checked={checked}
+        size="sm"
+        helpText={field.helpText}
+        // TODO: Handle indeterminate state
+        onCheckedChange={(value: boolean | 'indeterminate') => {
+          const next = value === 'indeterminate' ? false : Boolean(value)
+          onChange?.(next)
+        }}
+        error={fieldError != null}
+        errorText={fieldError}
+      />
+    </div>
+  )
+}

package/src/fields/column-formatter.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 type { ColumnFormatter, FormatterProps } from '@byline/core'
+
+/**
+ * Type guard: returns true when the formatter is a `{ component }` wrapper
+ * rather than a plain function.
+ */
+export function isComponentFormatter<T>(
+  fmt: ColumnFormatter<T>
+): fmt is { component: (props: FormatterProps<T>) => any } {
+  return typeof fmt === 'object' && fmt !== null && 'component' in fmt
+}
+
+/**
+ * Render a cell value through its column formatter (if any).
+ * Handles both plain-function and `{ component }` formatters.
+ */
+export function renderFormatted(value: any, document: any, formatter: ColumnFormatter) {
+  if (isComponentFormatter(formatter)) {
+    const Component = formatter.component
+    return <Component value={value} record={document} />
+  }
+  return formatter(value, document)
+}

package/src/fields/date-time-formatter.tsx

@@ -0,0 +1,22 @@
+/**
+ * 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 type { FormatterProps } from '@byline/core'
+
+import { LocalDateTime } from './local-date-time'
+
+/**
+ * SSR-safe date-time column formatter for list views.
+ *
+ * Uses the `LocalDateTime` component which renders a placeholder on the server
+ * and formats to the user's locale/timezone after hydration, avoiding
+ * server/client mismatches.
+ */
+export function DateTimeFormatter({ value }: FormatterProps) {
+  return <LocalDateTime value={value} />
+}

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

@@ -0,0 +1,13 @@
+/**
+ * DateTimeField — date/time picker form widget.
+ *
+ * Override handles:
+ *   .byline-field-datetime         — the wrapper div
+ *   .byline-field-datetime-dirty   — added to the inner picker when the
+ *                                    field has unsaved local changes
+ */
+
+.dirty,
+:global(.byline-field-datetime-dirty) {
+  border-color: var(--blue-300);
+}

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

@@ -0,0 +1,54 @@
+/**
+ * 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 type { DateTimeField as FieldType } from '@byline/core'
+import { DatePicker, ErrorText } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
+import styles from './datetime-field.module.css'
+
+export const DateTimeField = ({
+  field,
+  value,
+  defaultValue,
+  onChange,
+  id,
+  path,
+}: {
+  field: FieldType
+  value?: Date | null
+  defaultValue?: Date | null
+  onChange?: (value: Date | null) => void
+  id?: string
+  path?: string
+}) => {
+  const fieldPath = path ?? field.name
+  const fieldError = useFieldError(fieldPath)
+  const isDirty = useIsDirty(fieldPath)
+  const fieldValue = useFieldValue<Date | null | undefined>(fieldPath)
+  const incomingValue = value ?? fieldValue ?? defaultValue ?? null
+
+  return (
+    <div className={`byline-field-datetime ${field.name}`}>
+      <DatePicker
+        id={id ?? fieldPath}
+        name={field.name}
+        label={field.label}
+        required={!field.optional}
+        initialValue={incomingValue}
+        mode={field.mode || 'datetime'}
+        yearsInFuture={field.yearsInFuture || 1}
+        yearsInPast={field.yearsInPast || 10}
+        onDateChange={(date) => onChange?.(date)}
+        className={cx(isDirty && ['byline-field-datetime-dirty', styles.dirty])}
+      />
+      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+    </div>
+  )
+}

package/src/fields/draggable-context-menu.module.css

@@ -0,0 +1,127 @@
+/**
+ * DraggableContextMenu — small `…` dropdown attached to draggable list rows.
+ *
+ * Override handles:
+ *   .byline-draggable-menu             — dropdown content panel
+ *   .byline-draggable-menu-item        — individual menu item
+ *   .byline-draggable-menu-row         — flex row inside an item
+ *   .byline-draggable-menu-icon-slot   — fixed-width icon column
+ *   .byline-draggable-menu-label       — label text column
+ *   .byline-draggable-menu-label-danger — destructive-action label
+ *   .byline-draggable-menu-separator   — separator between items
+ */
+
+.menu,
+:global(.byline-draggable-menu) {
+  z-index: 40;
+  width: 8.5rem;
+  padding: 0.25rem 0.375rem;
+  background-color: white;
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: var(--border-radius-sm);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.item,
+:global(.byline-draggable-menu-item) {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+  padding: 5px 2px;
+  border-radius: var(--border-radius-sm);
+  color: var(--gray-600);
+  cursor: default;
+  user-select: none;
+  outline: none;
+}
+
+@media (min-width: 48rem) {
+  .item,
+  :global(.byline-draggable-menu-item) {
+    font-size: var(--font-size-sm);
+  }
+}
+
+.item:hover,
+.item:focus,
+:global(.byline-draggable-menu-item):hover,
+:global(.byline-draggable-menu-item):focus {
+  background-color: oklch(from var(--canvas-50) l c h / 0.3);
+}
+
+.row,
+:global(.byline-draggable-menu-row) {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.icon-slot,
+:global(.byline-draggable-menu-icon-slot) {
+  display: inline-block;
+  width: 22px;
+}
+
+.label,
+:global(.byline-draggable-menu-label) {
+  display: inline-block;
+  flex: 1;
+  width: 100%;
+  align-self: flex-start;
+  text-align: left;
+  color: black;
+}
+
+.label-danger,
+:global(.byline-draggable-menu-label-danger) {
+  color: var(--red-600);
+}
+
+.delete-icon,
+:global(.byline-draggable-menu-delete-icon) {
+  stroke: var(--red-600);
+}
+
+.separator,
+:global(.byline-draggable-menu-separator) {
+  width: 90%;
+  margin: 0.25rem auto;
+  border: none;
+  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+}
+
+/* ─── Dark theme variants ───────────────────────────────────── */
+
+:is([data-theme="dark"], :global(.dark)) {
+  .menu,
+  :global(.byline-draggable-menu) {
+    background-color: var(--canvas-800);
+    border-color: var(--canvas-700);
+  }
+
+  .item,
+  :global(.byline-draggable-menu-item) {
+    color: var(--gray-300);
+  }
+
+  .item:hover,
+  .item:focus,
+  :global(.byline-draggable-menu-item):hover,
+  :global(.byline-draggable-menu-item):focus {
+    background-color: var(--canvas-900);
+  }
+
+  .label,
+  :global(.byline-draggable-menu-label) {
+    color: var(--gray-300);
+  }
+
+  .separator,
+  :global(.byline-draggable-menu-separator) {
+    border-top-color: var(--gray-900);
+  }
+}

package/src/fields/draggable-context-menu.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+/**
+ * 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 {
+  DeleteIcon,
+  Dropdown as DropdownMenu,
+  EllipsisIcon,
+  IconButton,
+  PlusIcon,
+} from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import styles from './draggable-context-menu.module.css'
+
+interface DraggableContextMenuProps {
+  onAddBelow?: () => void
+  onRemove?: () => void
+}
+
+export function DraggableContextMenu({
+  onAddBelow,
+  onRemove,
+}: DraggableContextMenuProps): React.JSX.Element {
+  const itemClass = cx('byline-draggable-menu-item', styles.item)
+  const rowClass = cx('byline-draggable-menu-row', styles.row)
+  const iconSlotClass = cx('byline-draggable-menu-icon-slot', styles['icon-slot'])
+  const labelClass = cx('byline-draggable-menu-label', styles.label)
+
+  return (
+    <DropdownMenu.Root modal={false}>
+      <DropdownMenu.Trigger render={<IconButton variant="text" size="sm" />}>
+        <EllipsisIcon width="16px" height="16px" />
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          align="end"
+          sideOffset={0}
+          className={cx('byline-draggable-menu', styles.menu)}
+        >
+          <DropdownMenu.Item className={itemClass} onClick={onAddBelow}>
+            <div className={rowClass}>
+              <span className={iconSlotClass}>
+                <PlusIcon width="18px" height="18px" />
+              </span>
+              <span className={labelClass}>Add Below</span>
+            </div>
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator
+            className={cx('byline-draggable-menu-separator', styles.separator)}
+          />
+          <DropdownMenu.Item className={itemClass} onClick={onRemove}>
+            <div className={rowClass}>
+              <div className={rowClass}>
+                <span className={iconSlotClass}>
+                  <DeleteIcon
+                    width="18px"
+                    height="18px"
+                    svgClassName={cx('byline-draggable-menu-delete-icon', styles['delete-icon'])}
+                  />
+                </span>
+                <span
+                  className={cx(
+                    'byline-draggable-menu-label byline-draggable-menu-label-danger',
+                    styles.label,
+                    styles['label-danger']
+                  )}
+                >
+                  Remove
+                </span>
+              </div>
+            </div>
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}