@byline/admin 2.5.2 → 2.6.0

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

@@ -0,0 +1,306 @@
+/**
+ * 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 { useState } from 'react'
+
+import {
+  type ImageField as FieldType,
+  isPendingStoredFileValue,
+  type StoredFileValue,
+} from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
+import {
+  CloseIcon,
+  ErrorText,
+  HelpText,
+  IconButton,
+  ImageLightbox,
+  Label,
+  LoaderRing,
+} from '@byline/ui/react'
+import cx from 'classnames'
+
+import {
+  useFieldError,
+  useFieldValue,
+  useFormContext,
+  useIsDirty,
+  useIsFieldUploading,
+} from '../../forms/form-context'
+import { useFieldChangeHandler } from '../use-field-change-handler'
+import styles from './image-field.module.css'
+import { ImageUploadField } from './image-upload-field'
+
+interface ImageFieldProps {
+  field: FieldType
+  /** Collection path required to call the /upload endpoint. */
+  collectionPath?: string
+  // Stored value is currently a plain object with file/image metadata
+  // coming from the seed data / storage layer.
+  value?: StoredFileValue | null
+  defaultValue?: StoredFileValue | null
+  onChange?: (value: StoredFileValue | null) => void
+  path?: string
+}
+
+export const ImageField = ({
+  field,
+  collectionPath,
+  value,
+  defaultValue,
+  onChange: _onChange,
+  path,
+}: ImageFieldProps) => {
+  const fieldPath = path ?? field.name
+  const fieldError = useFieldError(fieldPath)
+  const isDirty = useIsDirty(fieldPath)
+  const fieldValue = useFieldValue<StoredFileValue | null | undefined>(fieldPath)
+  const isUploading = useIsFieldUploading(fieldPath)
+  const { removePendingUpload } = useFormContext()
+  const { t } = useTranslation('byline-admin')
+
+  // Re-use the standard field change handler so patches are emitted correctly.
+  const handleChange = useFieldChangeHandler(field, fieldPath)
+
+  // When the field has been explicitly set (dirty), use the field value from
+  // form state — even if it's null (user clicked Remove). Only fall back to
+  // the prop / defaultValue when the field hasn't been touched yet.
+  const incomingValue = isDirty
+    ? (fieldValue ?? null)
+    : (value ?? fieldValue ?? defaultValue ?? null)
+
+  // Check if this is a pending upload (selected but not yet uploaded)
+  const isPending = isPendingStoredFileValue(incomingValue)
+
+  // Old placeholder check for backwards compatibility
+  const isOldPlaceholder = (v: unknown): boolean => {
+    if (!v || typeof v !== 'object') return false
+    const maybe = v as Partial<StoredFileValue>
+    return maybe.storageProvider === 'placeholder' && maybe.storagePath === 'pending'
+  }
+
+  // Show upload widget only if no value or old placeholder
+  const showUploadWidget = incomingValue == null || isOldPlaceholder(incomingValue)
+
+  // Prefer the generated thumbnail variant for the preview tile. SVGs and
+  // other bypass types have no variants — fall back to the original.
+  const thumbVariant =
+    incomingValue && !isPendingStoredFileValue(incomingValue)
+      ? incomingValue.variants?.find((v) => v.name === 'thumbnail')
+      : undefined
+  const previewUrl = thumbVariant?.storageUrl ?? incomingValue?.storageUrl
+
+  // Handle remove, including cleanup of pending uploads
+  const handleRemove = () => {
+    if (isPending) {
+      removePendingUpload(fieldPath)
+    }
+    handleChange(null)
+  }
+
+  // Lightbox state — only enabled for stored (non-pending) images that have a
+  // resolvable original storageUrl.
+  const [lightboxOpen, setLightboxOpen] = useState(false)
+  const canOpenLightbox = !isPending && !!incomingValue?.storageUrl
+
+  const htmlId = fieldPath
+
+  return (
+    <div className={`byline-field-image ${field.name}`}>
+      <div className={cx('byline-field-image-header', styles.header)}>
+        <Label
+          id={htmlId}
+          htmlFor={htmlId}
+          label={field.label ?? field.name}
+          required={!field.optional}
+        />
+      </div>
+
+      {showUploadWidget ? (
+        collectionPath ? (
+          <ImageUploadField
+            field={field}
+            collectionPath={collectionPath}
+            fieldPath={fieldPath}
+            onUploaded={(uploaded) => {
+              handleChange(uploaded)
+            }}
+          />
+        ) : (
+          <div className={cx('byline-field-image-empty', styles.empty)}>
+            {t('fields.image.empty')}
+          </div>
+        )
+      ) : (
+        <div className={cx('byline-field-image-tile', styles.tile)}>
+          {isUploading && (
+            <div
+              className={cx('byline-field-image-uploading', styles.uploading)}
+              aria-live="polite"
+              aria-busy="true"
+            >
+              <LoaderRing />
+            </div>
+          )}
+          {/* Remove button — shown when an image is set (including pending) */}
+          {collectionPath && (
+            <div className={cx('byline-field-image-remove', styles.remove)}>
+              <IconButton
+                type="button"
+                intent="noeffect"
+                onClick={handleRemove}
+                size="xs"
+                disabled={isUploading}
+                aria-label={t('fields.image.removeAriaLabel')}
+              >
+                <CloseIcon width="15px" height="15px" />
+              </IconButton>
+            </div>
+          )}
+          {/* Preview */}
+          {previewUrl && (
+            <div className={cx('byline-field-image-preview-wrap', styles['preview-wrap'])}>
+              {canOpenLightbox ? (
+                <button
+                  type="button"
+                  onClick={() => setLightboxOpen(true)}
+                  aria-label={t('fields.image.openLightboxAriaLabel')}
+                  className={cx('byline-field-image-preview-button', styles['preview-button'])}
+                >
+                  <img
+                    src={previewUrl}
+                    alt={incomingValue.originalFilename ?? incomingValue.filename}
+                    className={cx(
+                      'byline-field-image-preview',
+                      styles.preview,
+                      incomingValue.mimeType === 'image/svg+xml' && [
+                        'byline-field-image-preview-svg',
+                        styles['preview-svg'],
+                      ]
+                    )}
+                  />
+                </button>
+              ) : (
+                <img
+                  src={previewUrl}
+                  alt={incomingValue.originalFilename ?? incomingValue.filename}
+                  className={cx(
+                    'byline-field-image-preview',
+                    styles.preview,
+                    incomingValue.mimeType === 'image/svg+xml' && [
+                      'byline-field-image-preview-svg',
+                      styles['preview-svg'],
+                    ]
+                  )}
+                />
+              )}
+              {/* Pending upload badge */}
+              {isPending && (
+                <div className={cx('byline-field-image-pending', styles.pending)}>
+                  {t('fields.fileMeta.pendingUpload')}
+                </div>
+              )}
+            </div>
+          )}
+          {/* Metadata */}
+          <div className={cx('byline-field-image-meta', styles.meta)}>
+            <div>
+              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                {t('fields.fileMeta.filename')}
+              </span>{' '}
+              {incomingValue?.filename}
+            </div>
+            <div>
+              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                {t('fields.fileMeta.original')}
+              </span>{' '}
+              {incomingValue?.originalFilename}
+            </div>
+            <div>
+              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                {t('fields.fileMeta.type')}
+              </span>{' '}
+              {incomingValue?.mimeType}
+            </div>
+            <div>
+              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                {t('fields.fileMeta.size')}
+              </span>{' '}
+              {incomingValue?.fileSize}
+            </div>
+            {isPending ? (
+              <div>
+                <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                  {t('fields.fileMeta.status')}
+                </span>{' '}
+                <span className={cx('byline-field-image-meta-pending', styles['meta-pending'])}>
+                  {t('fields.fileMeta.willUploadOnSave')}
+                </span>
+              </div>
+            ) : (
+              <>
+                <div>
+                  <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                    {t('fields.fileMeta.storage')}
+                  </span>{' '}
+                  {incomingValue?.storageProvider}
+                </div>
+                {incomingValue?.imageWidth != null && (
+                  <div>
+                    <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                      {t('fields.imageMeta.dimensions')}
+                    </span>{' '}
+                    {incomingValue.imageWidth}
+                    {incomingValue.imageHeight != null ? `×${incomingValue.imageHeight}` : ''}
+                  </div>
+                )}
+                {incomingValue?.imageFormat != null && (
+                  <div>
+                    <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                      {t('fields.imageMeta.format')}
+                    </span>{' '}
+                    {incomingValue.imageFormat}
+                  </div>
+                )}
+                <div>
+                  <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                    {t('fields.imageMeta.thumbnail')}
+                  </span>{' '}
+                  {thumbVariant
+                    ? t('fields.imageMeta.thumbnailGenerated')
+                    : t('fields.imageMeta.thumbnailPending')}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {field.helpText && <HelpText text={field.helpText} />}
+
+      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+
+      {canOpenLightbox && incomingValue?.storageUrl && (
+        <ImageLightbox
+          isOpen={lightboxOpen}
+          onDismiss={() => setLightboxOpen(false)}
+          src={incomingValue.storageUrl}
+          alt={incomingValue.originalFilename ?? incomingValue.filename}
+          downloadFilename={incomingValue.originalFilename ?? incomingValue.filename}
+          title={incomingValue.originalFilename ?? incomingValue.filename}
+          meta={{
+            width: incomingValue.imageWidth,
+            height: incomingValue.imageHeight,
+            fileSize: incomingValue.fileSize,
+            mimeType: incomingValue.mimeType,
+          }}
+        />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,123 @@
+/**
+ * ImageUploadField — drag-and-drop image picker that registers a deferred
+ * upload in form context.
+ *
+ * Override handles:
+ *   .byline-field-image-upload                — root wrapper
+ *   .byline-field-image-upload-input          — visually-hidden file input
+ *   .byline-field-image-upload-zone           — clickable / drop target
+ *   .byline-field-image-upload-zone-active    — drag-hovered state
+ *   .byline-field-image-upload-zone-busy      — processing state
+ *   .byline-field-image-upload-spinner        — animated spinner svg
+ *   .byline-field-image-upload-icon           — upload icon svg
+ *   .byline-field-image-upload-label          — primary text inside the zone
+ *   .byline-field-image-upload-action         — "browse" link inside the label
+ *   .byline-field-image-upload-hint           — secondary "JPEG, PNG …" hint
+ *   .byline-field-image-upload-error          — error message paragraph
+ */
+
+.root,
+:global(.byline-field-image-upload) {
+  margin-top: 0.25rem;
+}
+
+.input,
+:global(.byline-field-image-upload-input) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.zone,
+:global(.byline-field-image-upload-zone) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-8);
+  padding: 1.5rem 1rem;
+  border: 2px dashed var(--gray-600);
+  border-radius: var(--border-radius-lg);
+  color: var(--gray-400);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color 150ms ease,
+    background-color 150ms ease,
+    border-color 150ms ease;
+}
+
+.zone:hover,
+:global(.byline-field-image-upload-zone):hover {
+  border-color: var(--primary-500);
+  background-color: oklch(from var(--primary-900) l c h / 0.1);
+}
+
+.zone-active,
+:global(.byline-field-image-upload-zone-active) {
+  border-color: var(--primary-400);
+  background-color: oklch(from var(--primary-900) l c h / 0.2);
+  color: var(--primary-300);
+}
+
+.zone-busy,
+:global(.byline-field-image-upload-zone-busy) {
+  border-color: var(--gray-700);
+  background-color: oklch(from var(--canvas-800) l c h / 0.5);
+  color: var(--gray-600);
+  cursor: not-allowed;
+}
+
+.spinner,
+:global(.byline-field-image-upload-spinner) {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--primary-400);
+  animation: byline-image-upload-spin 1s linear infinite;
+}
+
+@keyframes byline-image-upload-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.icon,
+:global(.byline-field-image-upload-icon) {
+  width: 1.75rem;
+  height: 1.75rem;
+  opacity: 0.6;
+}
+
+.label,
+:global(.byline-field-image-upload-label) {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.action,
+:global(.byline-field-image-upload-action) {
+  color: var(--primary-400);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.hint,
+:global(.byline-field-image-upload-hint) {
+  color: var(--gray-500);
+  font-size: 0.65rem;
+}
+
+.error,
+:global(.byline-field-image-upload-error) {
+  margin-top: 0.375rem;
+  color: var(--red-400);
+  font-size: var(--font-size-xs);
+}

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

@@ -0,0 +1,276 @@
+/**
+ * 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 { useTranslation } from '@byline/i18n/react'
+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()
+  const { t } = useTranslation('byline-admin')
+
+  // -------------------------------------------------------------------------
+  // 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(t('fields.image.upload.errors.notAnImage'))
+        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(t('fields.image.upload.errors.cannotRead'))
+      }
+
+      img.src = previewUrl
+    },
+    [collectionPath, fieldPath, addPendingUpload, onUploaded, t]
+  )
+
+  // -------------------------------------------------------------------------
+  // 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={t('fields.image.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-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)}>
+              {t('fields.image.upload.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)}>
+              {t('fields.image.upload.label')}{' '}
+              <span className={cx('byline-field-image-upload-action', styles.action)}>
+                {t('fields.image.upload.browse')}
+              </span>
+            </span>
+            <span className={cx('byline-field-image-upload-hint', styles.hint)}>
+              {t('fields.image.upload.hint')}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* Error message */}
+      {status === 'error' && errorMessage && (
+        <p className={cx('byline-field-image-upload-error', styles.error)} role="alert">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  )
+}