@byline/ui 2.5.2 → 2.6.0

package/src/admin/tabs.tsx

@@ -1,82 +0,0 @@
-'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 cx from 'classnames'
-
-import { Badge } from '../uikit.js'
-import styles from './tabs.module.css'
-
-export interface AdminTabItem {
-  name: string
-  label: string
-}
-
-interface AdminTabsProps {
-  tabs: AdminTabItem[]
-  activeTab: string
-  onChange: (name: string) => void
-  /** Error counts keyed by tab name — shows a danger badge when > 0. */
-  errorCounts?: Record<string, number>
-  className?: string
-}
-
-/**
- * Tabs navigation bar for admin form layouts.
- *
- * Used by FormRenderer when a CollectionAdminConfig declares a `tabs` array.
- * Each tab is a simple button with a bottom-border active indicator.
- * Inactive tabs show a subtle hover state. Fully dark-mode aware.
- *
- * Stable override handles: `.byline-admin-tabs`, `.byline-admin-tab`,
- * `.byline-admin-tab-active`, `.byline-admin-tab-label`,
- * `.byline-admin-tab-badge`.
- */
-export const AdminTabs = ({
-  tabs,
-  activeTab,
-  onChange,
-  errorCounts,
-  className,
-}: AdminTabsProps) => {
-  return (
-    <div
-      role="tablist"
-      aria-label="Form tabs"
-      className={cx('byline-admin-tabs', styles.tabs, className)}
-    >
-      {tabs.map((tab) => {
-        const isActive = tab.name === activeTab
-        return (
-          <button
-            key={tab.name}
-            type="button"
-            role="tab"
-            aria-selected={isActive}
-            onClick={() => onChange(tab.name)}
-            className={cx(
-              'byline-admin-tab',
-              styles.tab,
-              isActive && ['byline-admin-tab-active', styles['tab-active']]
-            )}
-          >
-            <span className={cx('byline-admin-tab-label', styles.label)}>
-              {tab.label}
-              {(errorCounts?.[tab.name] ?? 0) > 0 && (
-                <Badge intent="danger" className={cx('byline-admin-tab-badge', styles.badge)}>
-                  {errorCounts?.[tab.name]}
-                </Badge>
-              )}
-            </span>
-          </button>
-        )
-      })}
-    </div>
-  )
-}

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

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

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

@@ -1,266 +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, useState } from 'react'
-
-import type { ArrayField as ArrayFieldType, Field } from '@byline/core'
-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 { IconButton, PlusIcon } from '../../uikit.js'
-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

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