@byline/admin 2.5.2 → 2.6.0

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

@@ -0,0 +1,187 @@
+/**
+ * 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
+ */
+
+/**
+ * FileUploadField
+ *
+ * Generic drag-and-drop / click-to-browse file picker that prepares a file for
+ * upload. Mirrors `ImageUploadField` but without image-specific validation or
+ * dimension extraction. 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 (used by the form
+ * orchestrator for cleanup; not shown to the user).
+ */
+
+import type { ChangeEvent, DragEvent } from 'react'
+import { useCallback, useRef, useState } from 'react'
+
+import {
+  createPendingStoredFileValue,
+  type FileField as FieldType,
+  type PendingStoredFileValue,
+  type StoredFileValue,
+} from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
+import cx from 'classnames'
+
+import { useFormContext } from '../../forms/form-context'
+import styles from './file-upload-field.module.css'
+
+interface FileUploadFieldProps {
+  field: FieldType
+  /** Collection path used to build the upload URL (e.g. `'media'`). */
+  collectionPath: string
+  /** Field path in the form (e.g. `'attachment'` or `'content.0.attachment'`). */
+  fieldPath: string
+  /** Called with the PendingStoredFileValue for immediate UI update. */
+  onUploaded: (value: StoredFileValue | PendingStoredFileValue) => void
+  /** Optional `accept` MIME-type / extension string for the native file input. */
+  accept?: string
+}
+
+type SelectionStatus = 'idle' | 'processing' | 'error'
+
+export const FileUploadField = ({
+  field: _field,
+  collectionPath,
+  fieldPath,
+  onUploaded,
+  accept,
+}: FileUploadFieldProps) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const { t } = useTranslation('byline-admin')
+  const [status, setStatus] = useState<SelectionStatus>('idle')
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [isDragOver, setIsDragOver] = useState(false)
+  const { addPendingUpload } = useFormContext()
+
+  const handleFileSelected = useCallback(
+    (file: File) => {
+      setStatus('processing')
+      setErrorMessage(null)
+
+      // Blob URL is created so the form orchestrator can revoke it on cleanup
+      // alongside image-field uploads; it isn't surfaced in the UI here.
+      const previewUrl = URL.createObjectURL(file)
+
+      const pendingValue = createPendingStoredFileValue(file, previewUrl)
+
+      addPendingUpload(fieldPath, {
+        file,
+        previewUrl,
+        collectionPath,
+      })
+
+      setStatus('idle')
+      onUploaded(pendingValue)
+    },
+    [collectionPath, fieldPath, addPendingUpload, onUploaded]
+  )
+
+  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()
+  }, [])
+
+  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]
+  )
+
+  const isProcessing = status === 'processing'
+
+  return (
+    <div className={cx('byline-field-file-upload', styles.root)}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        className={cx('byline-field-file-upload-input', styles.input)}
+        onChange={handleFileChange}
+        disabled={isProcessing}
+        aria-hidden="true"
+        tabIndex={-1}
+      />
+
+      <div
+        role="button"
+        tabIndex={0}
+        aria-label={t('fields.file.upload.zoneAriaLabel')}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={handleBrowseClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            handleBrowseClick()
+          }
+        }}
+        className={cx(
+          'byline-field-file-upload-zone',
+          styles.zone,
+          isDragOver &&
+            !isProcessing && ['byline-field-file-upload-zone-active', styles['zone-active']],
+          isProcessing && ['byline-field-file-upload-zone-busy', styles['zone-busy']]
+        )}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className={cx('byline-field-file-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-file-upload-label', styles.label)}>
+          {t('fields.file.upload.label')}{' '}
+          <span className={cx('byline-field-file-upload-action', styles.action)}>
+            {t('fields.file.upload.browse')}
+          </span>
+        </span>
+      </div>
+
+      {status === 'error' && errorMessage && (
+        <p className={cx('byline-field-file-upload-error', styles.error)} role="alert">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,43 @@
+/**
+ * GroupField — fixed-order group of child fields.
+ *
+ * Override handles:
+ *   .byline-field-group           — outer wrapper
+ *   .byline-field-group-header    — label/help text block
+ *   .byline-field-group-title     — title heading
+ *   .byline-field-group-required  — required asterisk
+ *   .byline-field-group-help      — help text below title
+ *   .byline-field-group-body      — vertical stack of children
+ */
+
+.header,
+:global(.byline-field-group-header) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  margin-bottom: var(--spacing-8);
+}
+
+.title,
+:global(.byline-field-group-title) {
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+}
+
+.required,
+:global(.byline-field-group-required) {
+  color: var(--red-500);
+}
+
+.help,
+:global(.byline-field-group-help) {
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+}
+
+.body,
+:global(.byline-field-group-body) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}

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

@@ -0,0 +1,84 @@
+/**
+ * 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 { useMemo } from 'react'
+
+import type { Field, GroupField as GroupFieldType } from '@byline/core'
+import { ErrorText } from '@byline/ui/react'
+import cx from 'classnames'
+
+import { placeholderForField } from '../../fields/field-helpers'
+import { FieldRenderer } from '../../fields/field-renderer'
+import { useFieldError } from '../../forms/form-context'
+import styles from './group-field.module.css'
+
+// ---------------------------------------------------------------------------
+// GroupField — renders a fixed-order group of child fields wrapped in a
+// single div. No drag-and-drop. No add/remove.
+// The outer div carries the field type ('group') and field name as classes
+// so consumers can target individual groups via CSS.
+//
+// Stable override handles: `.byline-field-group`, `.byline-field-group-header`,
+// `.byline-field-group-title`, `.byline-field-group-help`,
+// `.byline-field-group-body`.
+// ---------------------------------------------------------------------------
+
+interface GroupFieldProps {
+  field: GroupFieldType
+  defaultValue: any
+  path: string
+}
+
+export const GroupField = ({ field, defaultValue, path }: GroupFieldProps) => {
+  const fieldError = useFieldError(field.name)
+  // Default value for a group field is a plain object: { rating: 5, comment: '...' }
+  // Normalize to a plain object if not already one.
+  const groupData = useMemo(() => {
+    if (defaultValue && typeof defaultValue === 'object' && !Array.isArray(defaultValue)) {
+      return defaultValue
+    }
+    // Fallback: build a placeholder object from child field definitions
+    const placeholder: Record<string, any> = {}
+    for (const childField of field.fields as Field[]) {
+      placeholder[childField.name] = placeholderForField(childField)
+    }
+    return placeholder
+  }, [defaultValue, field.fields])
+
+  return (
+    <div className={`byline-field-group ${field.name}`}>
+      {field.label && (
+        <div className={cx('byline-field-group-header', styles.header)}>
+          <h3 className={cx('byline-field-group-title', styles.title)}>
+            {field.label}{' '}
+            {!field.optional && (
+              <span className={cx('byline-field-group-required', styles.required)}>*</span>
+            )}
+          </h3>
+          {field.helpText && (
+            <p className={cx('byline-field-group-help', styles.help)}>{field.helpText}</p>
+          )}
+        </div>
+      )}
+      <div className={cx('byline-field-group-body', styles.body)}>
+        {(field.fields as Field[]).map((innerField) => {
+          return (
+            <FieldRenderer
+              key={innerField.name}
+              field={innerField}
+              defaultValue={groupData[innerField.name]}
+              basePath={path}
+              disableSorting={true}
+            />
+          )
+        })}
+      </div>
+      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+    </div>
+  )
+}

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

@@ -0,0 +1,155 @@
+/**
+ * ImageField — image preview + metadata + remove/upload affordances.
+ *
+ * Override handles:
+ *   .byline-field-image                — wrapper div
+ *   .byline-field-image-header         — label row
+ *   .byline-field-image-remove         — remove-button (icon, top-right of tile)
+ *   .byline-field-image-empty          — empty-state hint text
+ *   .byline-field-image-tile           — bordered preview/metadata tile
+ *   .byline-field-image-preview-wrap   — preview-image positioned wrapper
+ *   .byline-field-image-preview        — the <img> preview
+ *   .byline-field-image-preview-svg    — preview sized for SVG aspect
+ *   .byline-field-image-pending        — yellow "pending upload" pill
+ *   .byline-field-image-meta           — metadata list
+ *   .byline-field-image-meta-key       — metadata field-name span
+ *   .byline-field-image-meta-pending   — yellow text inside pending status
+ */
+
+.header,
+:global(.byline-field-image-header) {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-8);
+  margin-bottom: 0.25rem;
+}
+
+.remove,
+:global(.byline-field-image-remove) {
+  position: absolute;
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  z-index: 1;
+}
+
+:global(.byline-field-image-remove .byline-button) {
+  color: var(--gray-900);
+}
+
+:global(.dark .byline-field-image-remove .byline-button),
+:global([data-theme="dark"] .byline-field-image-remove .byline-button) {
+  color: var(--gray-200);
+}
+
+.empty,
+:global(.byline-field-image-empty) {
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  font-style: italic;
+}
+
+.tile,
+:global(.byline-field-image-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);
+}
+
+.preview-wrap,
+:global(.byline-field-image-preview-wrap) {
+  position: relative;
+}
+
+.preview-button,
+:global(.byline-field-image-preview-button) {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: block;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+}
+
+.preview-button:focus-visible,
+:global(.byline-field-image-preview-button):focus-visible {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+}
+
+.preview-button img,
+:global(.byline-field-image-preview-button) img {
+  transition: opacity 120ms ease;
+}
+
+.preview-button:hover img,
+:global(.byline-field-image-preview-button):hover img {
+  opacity: 0.85;
+}
+
+.preview,
+:global(.byline-field-image-preview) {
+  max-height: 10rem;
+  min-height: 4rem;
+  min-width: 4rem;
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
+  border-radius: var(--border-radius-sm);
+  object-fit: contain;
+}
+
+.preview-svg,
+:global(.byline-field-image-preview-svg) {
+  width: 271px;
+  height: 159px;
+  max-height: none;
+}
+
+.pending,
+:global(.byline-field-image-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);
+}
+
+.uploading,
+:global(.byline-field-image-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);
+}
+
+.meta,
+:global(.byline-field-image-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-image-meta-key) {
+  font-weight: var(--font-weight-semibold);
+}
+
+.meta-pending,
+:global(.byline-field-image-meta-pending) {
+  color: var(--yellow-400);
+}