@byline/ui 2.5.2 → 2.6.0

package/src/fields/image/image-upload-field.tsx

@@ -1,270 +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
- */
-
-/**
- * ImageUploadField
- *
- * A drag-and-drop / click-to-browse file picker that prepares an image for
- * upload. The actual upload is deferred until form submission — this component
- * stores the file in the form context's pending uploads and emits a placeholder
- * StoredFileValue with a blob URL for immediate preview.
- *
- * Prototype: no chunk upload, no resumable uploads, single file only.
- */
-
-import type { ChangeEvent, DragEvent } from 'react'
-import { useCallback, useRef, useState } from 'react'
-
-import {
-  createPendingStoredFileValue,
-  type ImageField as FieldType,
-  type PendingStoredFileValue,
-  type StoredFileValue,
-} from '@byline/core'
-import cx from 'classnames'
-
-import { useFormContext } from '../../forms/form-context'
-import styles from './image-upload-field.module.css'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-interface ImageUploadFieldProps {
-  field: FieldType
-  /** Collection path used to build the upload URL (e.g. `'media'`). */
-  collectionPath: string
-  /** Field path in the form (e.g. `'image'` or `'content.0.image'`). */
-  fieldPath: string
-  /** Called with the PendingStoredFileValue for immediate preview. */
-  onUploaded: (value: StoredFileValue | PendingStoredFileValue) => void
-  /** Optional accepted-file MIME types string for the native file input. */
-  accept?: string
-}
-
-type SelectionStatus = 'idle' | 'processing' | 'error'
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-export const ImageUploadField = ({
-  field: _field,
-  collectionPath,
-  fieldPath,
-  onUploaded,
-  accept = 'image/*',
-}: ImageUploadFieldProps) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [status, setStatus] = useState<SelectionStatus>('idle')
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-  const [isDragOver, setIsDragOver] = useState(false)
-  const { addPendingUpload } = useFormContext()
-
-  // -------------------------------------------------------------------------
-  // Core file selection logic (deferred upload)
-  // -------------------------------------------------------------------------
-
-  const handleFileSelected = useCallback(
-    (file: File) => {
-      setStatus('processing')
-      setErrorMessage(null)
-
-      // Basic client-side validation
-      if (!file.type.startsWith('image/')) {
-        setStatus('error')
-        setErrorMessage('Please select an image file.')
-        return
-      }
-
-      // Create a blob URL for immediate preview
-      const previewUrl = URL.createObjectURL(file)
-
-      // Extract image dimensions for the pending value
-      const img = new Image()
-      img.onload = () => {
-        // SVGs without explicit width/height attrs (viewBox-only) report naturalWidth/Height = 0.
-        // Skip dimensions when zero so they are stored as null (scalable, no fixed size).
-        const w = img.naturalWidth
-        const h = img.naturalHeight
-        const dimensions = w > 0 && h > 0 ? { width: w, height: h } : undefined
-
-        // Create the pending stored file value
-        const pendingValue = createPendingStoredFileValue(file, previewUrl, dimensions)
-
-        // Register the pending upload in form context
-        addPendingUpload(fieldPath, {
-          file,
-          previewUrl,
-          collectionPath,
-        })
-
-        setStatus('idle')
-        onUploaded(pendingValue)
-      }
-
-      img.onerror = () => {
-        URL.revokeObjectURL(previewUrl)
-        setStatus('error')
-        setErrorMessage('Could not read image. Please try a different file.')
-      }
-
-      img.src = previewUrl
-    },
-    [collectionPath, fieldPath, addPendingUpload, onUploaded]
-  )
-
-  // -------------------------------------------------------------------------
-  // File input
-  // -------------------------------------------------------------------------
-
-  const handleFileChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      const file = e.target.files?.[0]
-      if (file) handleFileSelected(file)
-      // Reset so re-selecting the same file fires the event again.
-      e.target.value = ''
-    },
-    [handleFileSelected]
-  )
-
-  const handleBrowseClick = useCallback(() => {
-    inputRef.current?.click()
-  }, [])
-
-  // -------------------------------------------------------------------------
-  // Drag and drop
-  // -------------------------------------------------------------------------
-
-  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setIsDragOver(true)
-  }, [])
-
-  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setIsDragOver(false)
-  }, [])
-
-  const handleDrop = useCallback(
-    (e: DragEvent<HTMLDivElement>) => {
-      e.preventDefault()
-      setIsDragOver(false)
-      const file = e.dataTransfer.files?.[0]
-      if (file) handleFileSelected(file)
-    },
-    [handleFileSelected]
-  )
-
-  // -------------------------------------------------------------------------
-  // Render
-  // -------------------------------------------------------------------------
-
-  const isProcessing = status === 'processing'
-
-  return (
-    <div className={cx('byline-field-image-upload', styles.root)}>
-      {/* Hidden native file input */}
-      <input
-        ref={inputRef}
-        type="file"
-        accept={accept}
-        className={cx('byline-field-image-upload-input', styles.input)}
-        onChange={handleFileChange}
-        disabled={isProcessing}
-        aria-hidden="true"
-        tabIndex={-1}
-      />
-
-      {/* Drop zone */}
-      <div
-        role="button"
-        tabIndex={0}
-        aria-label="Upload image — drag and drop or click to browse"
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        onClick={handleBrowseClick}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            handleBrowseClick()
-          }
-        }}
-        className={cx(
-          'byline-field-image-upload-zone',
-          styles.zone,
-          isDragOver &&
-            !isProcessing && ['byline-field-image-upload-zone-active', styles['zone-active']],
-          isProcessing && ['byline-field-image-upload-zone-busy', styles['zone-busy']]
-        )}
-      >
-        {isProcessing ? (
-          <>
-            {/* Spinner */}
-            <svg
-              className={cx('byline-field-image-upload-spinner', styles.spinner)}
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <circle
-                style={{ opacity: 0.25 }}
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                style={{ opacity: 0.75 }}
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-              />
-            </svg>
-            <span className={cx('byline-field-image-upload-label', styles.label)}>Processing…</span>
-          </>
-        ) : (
-          <>
-            {/* Upload icon */}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className={cx('byline-field-image-upload-icon', styles.icon)}
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={1.5}
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
-              />
-            </svg>
-            <span className={cx('byline-field-image-upload-label', styles.label)}>
-              Drop image here or{' '}
-              <span className={cx('byline-field-image-upload-action', styles.action)}>browse</span>
-            </span>
-            <span className={cx('byline-field-image-upload-hint', styles.hint)}>
-              JPEG, PNG, WebP, GIF, SVG, AVIF
-            </span>
-          </>
-        )}
-      </div>
-
-      {/* Error message */}
-      {status === 'error' && errorMessage && (
-        <p className={cx('byline-field-image-upload-error', styles.error)} role="alert">
-          {errorMessage}
-        </p>
-      )}
-    </div>
-  )
-}

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

@@ -1,88 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-
-// undefined will use the user's locale
-const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
-  year: 'numeric',
-  month: 'short', // <- short month text (locale-aware)
-  day: '2-digit',
-  hour: 'numeric',
-  minute: 'numeric',
-})
-
-const dateFormatter = new Intl.DateTimeFormat(undefined, {
-  year: 'numeric',
-  month: 'short', // <- short month text (locale-aware)
-  day: '2-digit',
-})
-
-interface LocalDateTimeProps {
-  value: string | Date | null | undefined
-  mode?: 'datetime' | 'date'
-  className?: string
-  fallback?: string
-}
-
-/**
- * Client-side date/time formatter that displays dates in the user's local timezone.
- *
- * This component avoids hydration mismatches by:
- * 1. Rendering a placeholder on the server/initial render
- * 2. Updating to the correctly formatted date after hydration
- *
- * Use this instead of formatDateTime when you need to display dates
- * in the user's local timezone rather than UTC.
- */
-export function LocalDateTime({
-  value,
-  mode = 'datetime',
-  className,
-  fallback = '—',
-}: LocalDateTimeProps): React.JSX.Element {
-  const [formattedDate, setFormattedDate] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (value == null) {
-      setFormattedDate(null)
-      return
-    }
-
-    const date = typeof value === 'string' ? Date.parse(value) : value.getTime()
-    if (Number.isNaN(date)) {
-      setFormattedDate('Error')
-      return
-    }
-
-    const formatter = mode === 'datetime' ? dateTimeFormatter : dateFormatter
-    setFormattedDate(formatter.format(date))
-  }, [value, mode])
-
-  // Show fallback during SSR and before useEffect runs
-  if (formattedDate === null) {
-    return <span className={className}>{value ? '...' : fallback}</span>
-  }
-
-  return <span className={className}>{formattedDate}</span>
-}
-
-/**
- * Formats a date string to the user's local timezone.
- *
- * WARNING: Only use this in client components where hydration
- * mismatches are acceptable or managed. For most cases, prefer
- * the <LocalDateTime /> component.
- */
-export function formatLocalDateTime(value: string | Date | null | undefined): string {
-  if (value == null) return '—'
-  const date = typeof value === 'string' ? Date.parse(value) : value.getTime()
-  if (Number.isNaN(date)) return 'Error'
-  return dateTimeFormatter.format(date)
-}
-
-export function formatLocalDate(value: string | Date | null | undefined): string {
-  if (value == null) return '—'
-  const date = typeof value === 'string' ? Date.parse(value) : value.getTime()
-  if (Number.isNaN(date)) return 'Error'
-  return dateFormatter.format(date)
-}

package/src/fields/locale-badge.module.css

@@ -1,37 +0,0 @@
-/**
- * LocaleBadge — small inline badge shown next to a localised field label.
- *
- * Override handle: `.byline-locale-badge`
- */
-
-.badge,
-:global(.byline-locale-badge) {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.125rem;
-  margin-left: 0.375rem;
-  padding: 0.125rem 0.375rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--yellow-400);
-  border-radius: var(--border-radius-sm);
-  background-color: var(--yellow-100);
-  color: var(--yellow-800);
-  font-size: 0.6rem;
-  font-weight: var(--font-weight-semibold);
-  line-height: 1;
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
-  pointer-events: none;
-  user-select: none;
-  vertical-align: middle;
-}
-
-/* ─── Dark theme variants ───────────────────────────────────── */
-
-:is([data-theme="dark"], :global(.dark)) {
-  .badge,
-  :global(.byline-locale-badge) {
-    border-color: var(--yellow-700);
-    background-color: oklch(from var(--yellow-900) l c h / 0.4);
-    color: var(--yellow-400);
-  }
-}

package/src/fields/locale-badge.tsx

@@ -1,32 +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 cx from 'classnames'
-
-import styles from './locale-badge.module.css'
-
-export interface LocaleBadgeProps {
-  locale: string
-}
-
-/**
- * Small inline badge shown next to the label of a field that has
- * `localized: true` in its schema definition. Indicates which locale
- * the editor is currently working in.
- *
- * Stable override handle: `.byline-locale-badge`.
- */
-export const LocaleBadge = ({ locale }: LocaleBadgeProps) => (
-  <span
-    aria-hidden="true"
-    title={`Localised — editing ${locale.toUpperCase()} content`}
-    className={cx('byline-locale-badge', styles.badge)}
-  >
-    {locale}
-  </span>
-)

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

@@ -1,114 +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 {
-  CounterField,
-  DecimalField,
-  Field,
-  FieldComponentSlots,
-  FloatField,
-  IntegerField,
-} from '@byline/core'
-
-import { useFieldError, useFieldValue } from '../../forms/form-context'
-import { Input } from '../../uikit.js'
-
-export const NumericalField = ({
-  field,
-  value,
-  defaultValue,
-  onChange,
-  id,
-  path,
-  components,
-}: {
-  field: IntegerField | FloatField | DecimalField | CounterField
-  value?: string | number | null
-  defaultValue?: string | number | null
-  onChange?: (value: string) => void
-  id?: string
-  path?: string
-  /** Optional UI component slot overrides from the admin config. */
-  components?: FieldComponentSlots
-}) => {
-  const fieldPath = path ?? field.name
-  const fieldError = useFieldError(fieldPath)
-  const fieldValue = useFieldValue<string | number | undefined>(fieldPath)
-  const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
-  const htmlId = id ?? fieldPath
-  const displayValue =
-    incomingValue === undefined || incomingValue === null ? '' : String(incomingValue)
-
-  // Custom component slots (from admin config)
-  const slots = components
-  const CustomLabel = slots?.Label
-  const CustomHelpText = slots?.HelpText
-  const CustomField = slots?.Field
-  const BeforeField = slots?.beforeField
-  const AfterField = slots?.afterField
-
-  // Shared props available to every slot component
-  const slotBaseProps = {
-    field: field as Field,
-    path: fieldPath,
-    value: incomingValue,
-    error: fieldError,
-    id: htmlId,
-  }
-
-  const hasCustomLabel = !!CustomLabel
-  const suppressInputLabel = hasCustomLabel
-  const suppressInputHelpText = !!CustomHelpText
-
-  // ── Label rendering ──────────────────────────────────────────
-  const renderLabel = () => {
-    if (hasCustomLabel) {
-      return <CustomLabel {...slotBaseProps} label={field.label} required={!field.optional} />
-    }
-    return null
-  }
-
-  // ── Field input rendering ────────────────────────────────────
-  const renderInput = () => {
-    if (CustomField) {
-      return (
-        <CustomField
-          {...slotBaseProps}
-          onChange={(v: any) => onChange?.(v)}
-          defaultValue={defaultValue}
-          placeholder={field.placeholder}
-        />
-      )
-    }
-    return (
-      <Input
-        type="number"
-        id={htmlId}
-        name={field.name}
-        label={suppressInputLabel ? undefined : field.label}
-        required={!field.optional}
-        readOnly={field.readOnly}
-        helpText={suppressInputHelpText ? undefined : field.helpText}
-        value={displayValue}
-        onChange={(e) => onChange?.(e.target.value)}
-        error={fieldError != null}
-        errorText={fieldError}
-      />
-    )
-  }
-
-  return (
-    <div className={`byline-field-${field.type} ${field.name}`}>
-      {renderLabel()}
-      {BeforeField && <BeforeField {...slotBaseProps} />}
-      {renderInput()}
-      {AfterField && <AfterField {...slotBaseProps} />}
-      {CustomHelpText && <CustomHelpText {...slotBaseProps} helpText={field.helpText} />}
-    </div>
-  )
-}

package/src/fields/relation/relation-display.module.css

@@ -1,36 +0,0 @@
-/**
- * RelationDisplay — shared cell renderer for relation picker rows and the
- * relation-summary selected-value tile.
- *
- * Override handles:
- *   .byline-relation-cell           — single column cell
- *   .byline-relation-cell-center    — cell with align: center
- *   .byline-relation-cell-right     — cell with align: right
- */
-
-.cell,
-:global(.byline-relation-cell) {
-  min-width: 0;
-  color: var(--gray-700);
-  font-size: var(--font-size-sm);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cell-center,
-:global(.byline-relation-cell-center) {
-  text-align: center;
-}
-
-.cell-right,
-:global(.byline-relation-cell-right) {
-  text-align: right;
-}
-
-:is([data-theme="dark"], :global(.dark)) {
-  .cell,
-  :global(.byline-relation-cell) {
-    color: var(--gray-100);
-  }
-}