@byline/ui 2.5.2 → 2.6.0

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

@@ -1,85 +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 {
-  DeleteIcon,
-  Dropdown as DropdownMenu,
-  EllipsisIcon,
-  IconButton,
-  PlusIcon,
-} from '../uikit.js'
-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>
-  )
-}

package/src/fields/field-helpers.ts

@@ -1,69 +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 { Field } from '@byline/core'
-import { resolveFieldDefaultValue } from '@byline/core'
-
-export const placeholderStoredFileValue = {
-  fileId: crypto.randomUUID(),
-  filename: 'placeholder',
-  originalFilename: 'placeholder',
-  mimeType: 'application/octet-stream',
-  fileSize: 0,
-  storageProvider: 'placeholder',
-  storagePath: 'pending',
-  storageUrl: null,
-  fileHash: null,
-  imageWidth: null,
-  imageHeight: null,
-  imageFormat: null,
-  processingStatus: 'pending',
-  thumbnailGenerated: false,
-}
-
-export const placeholderForField = (f: Field): any => {
-  switch (f.type) {
-    case 'text':
-    case 'textArea':
-      return ''
-    case 'checkbox':
-      return false
-    case 'integer':
-      return 0
-    case 'counter':
-      // Allocator-assigned in the lifecycle layer; absent at form-init time.
-      return undefined
-    case 'richText':
-    case 'datetime':
-      return undefined
-    case 'select':
-      return ''
-    case 'file':
-    case 'image':
-      return placeholderStoredFileValue
-    default:
-      return null
-  }
-}
-
-export const defaultScalarForField = async (
-  f: Field,
-  getFieldValues: () => Record<string, any>
-): Promise<any> => {
-  const schemaDefault = await resolveFieldDefaultValue(f, {
-    data: getFieldValues(),
-    now: () => new Date(),
-    uuid: () => crypto.randomUUID(),
-  })
-
-  if (schemaDefault !== undefined) {
-    return schemaDefault
-  }
-
-  return placeholderForField(f)
-}

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

@@ -1,22 +0,0 @@
-/**
- * FieldRenderer — main field-type switch wrapper.
- *
- * Override handles:
- *   .byline-field-localized-wrap   — wrapper added when a non-self-badging
- *                                    field needs an absolutely-positioned
- *                                    locale badge in the corner
- *   .byline-field-localized-badge  — the absolutely-positioned badge slot
- */
-
-.localized-wrap,
-:global(.byline-field-localized-wrap) {
-  position: relative;
-}
-
-.localized-badge,
-:global(.byline-field-localized-badge) {
-  position: absolute;
-  top: 0;
-  right: 0;
-  line-height: 1;
-}

package/src/fields/field-renderer.tsx

@@ -1,288 +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 {
-  ArrayField as ArrayFieldType,
-  BlocksField as BlocksFieldType,
-  Field,
-  FieldComponentSlots,
-  GroupField as GroupFieldType,
-  RichTextEditorComponent,
-} from '@byline/core'
-import { getClientConfig } from '@byline/core'
-import cx from 'classnames'
-
-import { ArrayField } from './array/array-field'
-import { BlocksField } from './blocks/blocks-field'
-import { CheckboxField } from './checkbox/checkbox-field'
-import { DateTimeField } from './datetime/datetime-field'
-import styles from './field-renderer.module.css'
-import { FileField } from './file/file-field'
-import { GroupField } from './group/group-field'
-import { ImageField } from './image/image-field'
-import { LocaleBadge } from './locale-badge'
-import { NumericalField } from './numerical/numerical-field'
-import { RelationField } from './relation/relation-field'
-import { SelectField } from './select/select-field'
-import { TextField } from './text/text-field'
-import { TextAreaField } from './text-area/text-area-field'
-import { useFieldChangeHandler } from './use-field-change-handler'
-
-// ---------------------------------------------------------------------------
-// FieldRenderer — the main field type switch. Delegates to the appropriate
-// field widget based on `field.type`.
-// ---------------------------------------------------------------------------
-
-interface FieldRendererProps {
-  field: Field
-  defaultValue?: any
-  basePath?: string
-  disableSorting?: boolean
-  hideLabel?: boolean
-  /** Collection path (e.g. `'media'`) forwarded to upload-capable fields. */
-  collectionPath?: string
-  /**
-   * The active content locale (e.g. `'en'`, `'fr'`). When provided and
-   * `field.localized === true`, a small locale badge is shown so the editor
-   * knows they are working on a localised field in the current language.
-   */
-  contentLocale?: string
-  /**
-   * Optional UI component slot overrides from the admin config.
-   * Forwarded to value-field widgets that support custom slots.
-   */
-  components?: FieldComponentSlots
-  /**
-   * Per-field rich-text editor component override from the admin config.
-   * Takes precedence over the globally registered
-   * `ClientConfig.fields.richText.editor` for this single field.
-   * Ignored when `field.type !== 'richText'`.
-   */
-  editor?: RichTextEditorComponent
-}
-
-export const FieldRenderer = ({
-  field,
-  defaultValue,
-  basePath,
-  disableSorting,
-  hideLabel,
-  collectionPath,
-  contentLocale,
-  components,
-  editor,
-}: FieldRendererProps) => {
-  const path = basePath ? `${basePath}.${field.name}` : field.name
-  const htmlId = path.replace(/[[\].]/g, '-')
-
-  const handleChange = useFieldChangeHandler(field, path)
-
-  // When a locale is active and the field is localised, inject a badge into
-  // the field label so the editor knows they are editing locale-specific content.
-  const isLocalised = (field as any).localized === true
-
-  const badge =
-    isLocalised && contentLocale && !hideLabel ? <LocaleBadge locale={contentLocale} /> : null
-
-  /**
-   * Render the underlying field widget. If the field is localised, we wrap it
-   * so we can append the locale badge after the label.
-   */
-  const renderField = () => {
-    switch (field.type) {
-      case 'text':
-        return (
-          <TextField
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            id={htmlId}
-            locale={isLocalised ? contentLocale : undefined}
-            components={components}
-          />
-        )
-      case 'textArea':
-        return (
-          <TextAreaField
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            id={htmlId}
-            locale={isLocalised ? contentLocale : undefined}
-            components={components}
-          />
-        )
-      case 'checkbox':
-        return (
-          <CheckboxField
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            id={htmlId}
-          />
-        )
-      case 'select':
-        return (
-          <SelectField
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            id={htmlId}
-          />
-        )
-      case 'richText': {
-        // Admin-side per-field override takes precedence over the globally
-        // registered editor (`ClientConfig.fields.richText.editor`). The
-        // override travels via `FieldAdminConfig.fields.<name>.editor` —
-        // see admin-types — so React component references stay out of the
-        // schema graph that's loaded by the server bootstrap.
-        const RichTextEditor = editor ?? getClientConfig().fields?.richText?.editor
-        if (!RichTextEditor) {
-          throw new Error(
-            'No richText editor registered. Install @byline/richtext-lexical and set ' +
-              '`fields.richText.editor` in your admin config.'
-          )
-        }
-        return (
-          <RichTextEditor
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            instanceKey={htmlId}
-            locale={isLocalised ? contentLocale : undefined}
-          />
-        )
-      }
-      case 'datetime':
-        return (
-          <DateTimeField
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            id={htmlId}
-          />
-        )
-      case 'integer':
-        return (
-          <NumericalField
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            id={htmlId}
-            components={components}
-          />
-        )
-      case 'counter':
-        // Counter values are allocator-assigned; force readOnly at the
-        // renderer level so the widget is always non-editable regardless
-        // of whether the developer set `field.readOnly` explicitly.
-        return (
-          <NumericalField
-            field={
-              hideLabel
-                ? { ...field, label: undefined, readOnly: true }
-                : { ...field, readOnly: true }
-            }
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            id={htmlId}
-            components={components}
-          />
-        )
-      case 'file':
-        return (
-          <FileField
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            collectionPath={collectionPath}
-          />
-        )
-      case 'image':
-        return (
-          <ImageField
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            collectionPath={collectionPath}
-          />
-        )
-      case 'relation':
-        return (
-          <RelationField
-            field={hideLabel ? { ...field, label: undefined } : field}
-            defaultValue={defaultValue}
-            onChange={handleChange}
-            path={path}
-            id={htmlId}
-          />
-        )
-      case 'group':
-        // Render a group field as a fixed-order inline field group.
-        return (
-          <GroupField
-            field={
-              hideLabel
-                ? ({ ...field, label: undefined } as unknown as GroupFieldType)
-                : (field as unknown as GroupFieldType)
-            }
-            defaultValue={defaultValue}
-            path={path}
-          />
-        )
-      case 'blocks':
-        if (!field.blocks) return null
-        return (
-          <BlocksField
-            field={field as unknown as BlocksFieldType}
-            defaultValue={defaultValue}
-            path={path}
-          />
-        )
-      case 'array':
-        if (!field.fields) return null
-        return (
-          <ArrayField
-            field={field as unknown as ArrayFieldType}
-            defaultValue={defaultValue}
-            path={path}
-            disableSorting={disableSorting}
-          />
-        )
-      default:
-        return null
-    }
-  }
-
-  // text and textArea render the badge inside their own Label row;
-  // the outer wrapper is only needed for other field types.
-  const selfBadge = field.type === 'text' || field.type === 'textArea' || field.type === 'richText'
-
-  if (badge && !selfBadge) {
-    return (
-      <div className={cx('byline-field-localized-wrap', styles['localized-wrap'])}>
-        {renderField()}
-        <span className={cx('byline-field-localized-badge', styles['localized-badge'])}>
-          {badge}
-        </span>
-      </div>
-    )
-  }
-
-  return renderField()
-}

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

@@ -1,153 +0,0 @@
-/**
- * FileField — metadata tile + remove/upload affordances for arbitrary file
- * uploads (non-image). Mirrors `image-field.module.css` structurally; the
- * image-only preview / SVG-shape / pending-badge rules are dropped.
- *
- * Override handles:
- *   .byline-field-file                — wrapper div
- *   .byline-field-file-header         — label row
- *   .byline-field-file-actions        — top-right icon-button group (download + remove)
- *   .byline-field-file-empty          — empty-state hint text
- *   .byline-field-file-tile           — bordered metadata tile
- *   .byline-field-file-uploading      — centered overlay shown while uploading
- *   .byline-field-file-icon-wrap      — left-aligned document-icon wrapper
- *   .byline-field-file-icon           — the document glyph itself
- *   .byline-field-file-pending        — yellow "pending upload" pill
- *   .byline-field-file-meta           — metadata list
- *   .byline-field-file-meta-key       — metadata field-name span
- *   .byline-field-file-meta-pending   — yellow text inside pending status
- */
-
-.header,
-:global(.byline-field-file-header) {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-8);
-  margin-bottom: 0.25rem;
-}
-
-.actions,
-:global(.byline-field-file-actions) {
-  position: absolute;
-  top: var(--spacing-6);
-  right: var(--spacing-6);
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-}
-
-:global(.byline-field-file-actions .byline-button) {
-  color: var(--gray-900);
-}
-
-:global(.dark .byline-field-file-actions .byline-button),
-:global([data-theme="dark"] .byline-field-file-actions .byline-button) {
-  color: var(--gray-200);
-}
-
-.empty,
-:global(.byline-field-file-empty) {
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-  font-style: italic;
-}
-
-.tile,
-:global(.byline-field-file-tile) {
-  position: relative;
-  display: flex;
-  gap: var(--spacing-16);
-  margin-top: 0.25rem;
-  padding: var(--spacing-8);
-  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
-  border-radius: var(--border-radius-md);
-}
-
-.uploading,
-:global(.byline-field-file-uploading) {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: oklch(from var(--gray-950) l c h / 0.5);
-  border-radius: var(--border-radius-md);
-}
-
-.icon-wrap,
-:global(.byline-field-file-icon-wrap) {
-  position: relative;
-  flex-shrink: 0;
-  align-self: flex-start;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 4rem;
-  height: 4rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
-  border-radius: var(--border-radius-sm);
-  color: var(--gray-300);
-}
-
-/* Interactive affordance when the wrap is rendered as a link
-   (file is stored — clicking opens the asset in a new tab). */
-a.icon-wrap,
-:global(a.byline-field-file-icon-wrap) {
-  cursor: pointer;
-  text-decoration: none;
-  transition:
-    border-color 120ms ease,
-    color 120ms ease;
-}
-
-a.icon-wrap:hover,
-:global(a.byline-field-file-icon-wrap):hover {
-  border-color: var(--primary-500);
-  color: var(--primary-400);
-}
-
-a.icon-wrap:focus-visible,
-:global(a.byline-field-file-icon-wrap):focus-visible {
-  outline: 2px solid var(--primary-500);
-  outline-offset: 2px;
-}
-
-.icon,
-:global(.byline-field-file-icon) {
-  opacity: 0.85;
-}
-
-.pending,
-:global(.byline-field-file-pending) {
-  position: absolute;
-  top: 0.25rem;
-  left: 0.25rem;
-  padding: 0.125rem 0.375rem;
-  background-color: oklch(from var(--yellow-600) l c h / 0.9);
-  color: var(--yellow-100);
-  font-size: 0.6rem;
-  font-weight: var(--font-weight-medium);
-  border-radius: var(--border-radius-sm);
-}
-
-.meta,
-:global(.byline-field-file-meta) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding-right: var(--spacing-32);
-  color: var(--gray-200);
-  font-size: var(--font-size-xs);
-}
-
-.meta-key,
-:global(.byline-field-file-meta-key) {
-  font-weight: var(--font-weight-semibold);
-}
-
-.meta-pending,
-:global(.byline-field-file-meta-pending) {
-  color: var(--yellow-400);
-}