@byline/ui 2.5.1 → 2.6.0

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

@@ -1,312 +0,0 @@
-/**
- * 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 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 { Card, CloseIcon, IconButton, Modal, PlusIcon } from '../../uikit.js'
-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.module.css

@@ -1,4 +0,0 @@
-:global(.byline-field-checkbox),
-.field-checkbox {
-  margin: 0;
-}

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

@@ -1,54 +0,0 @@
-/**
- * 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 { useFieldError, useFieldValue } from '../../forms/form-context'
-import { Checkbox } from '../../uikit.js'
-import styles from './checkbox-field.module.css'
-
-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} ${styles['field-checkbox']}`}>
-      <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

@@ -1,31 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-/**
- * 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

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,54 +0,0 @@
-/**
- * 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 cx from 'classnames'
-
-import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context'
-import { DatePicker, ErrorText } from '../../uikit.js'
-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

@@ -1,127 +0,0 @@
-/**
- * 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);
-  }
-}