@byline/ui 0.9.3

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

@@ -0,0 +1,129 @@
+/**
+ * ImageField — image preview + metadata + remove/upload affordances.
+ *
+ * Override handles:
+ *   .byline-field-image                — wrapper div
+ *   .byline-field-image-header         — label + remove button row
+ *   .byline-field-image-label          — primary label text
+ *   .byline-field-image-help           — secondary help text
+ *   .byline-field-image-remove         — remove-button text-link
+ *   .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;
+}
+
+.label,
+:global(.byline-field-image-label) {
+  color: var(--gray-100);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.help,
+:global(.byline-field-image-help) {
+  margin-top: 0.125rem;
+  color: var(--gray-400);
+  font-size: var(--font-size-xs);
+}
+
+.remove,
+:global(.byline-field-image-remove) {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--red-500);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+}
+
+.remove:hover,
+:global(.byline-field-image-remove):hover {
+  color: var(--red-400);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.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) {
+  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,
+: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);
+}
+
+.meta,
+:global(.byline-field-image-meta) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  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);
+}

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

@@ -0,0 +1,212 @@
+/**
+ * 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 ImageField as FieldType,
+  isPendingStoredFileValue,
+  type StoredFileValue,
+} from '@byline/core'
+import { ErrorText } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { useFieldError, useFieldValue, useFormContext, useIsDirty } 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 { removePendingUpload } = useFormContext()
+
+  // 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)
+
+  // Handle remove, including cleanup of pending uploads
+  const handleRemove = () => {
+    if (isPending) {
+      removePendingUpload(fieldPath)
+    }
+    handleChange(null)
+  }
+
+  return (
+    <div className={`byline-field-image ${field.name}`}>
+      <div className={cx('byline-field-image-header', styles.header)}>
+        <div>
+          <div className={cx('byline-field-image-label', styles.label)}>
+            {field.label ?? field.name}
+            {field.optional ? '' : ' *'}
+          </div>
+          {field.helpText && (
+            <div className={cx('byline-field-image-help', styles.help)}>{field.helpText}</div>
+          )}
+        </div>
+        {/* Remove button — shown when an image is set (including pending) */}
+        {!showUploadWidget && collectionPath && (
+          <button
+            type="button"
+            className={cx('byline-field-image-remove', styles.remove)}
+            onClick={handleRemove}
+          >
+            Remove
+          </button>
+        )}
+      </div>
+
+      {showUploadWidget ? (
+        collectionPath ? (
+          <ImageUploadField
+            field={field}
+            collectionPath={collectionPath}
+            fieldPath={fieldPath}
+            onUploaded={(uploaded) => {
+              handleChange(uploaded)
+            }}
+          />
+        ) : (
+          <div className={cx('byline-field-image-empty', styles.empty)}>No image selected</div>
+        )
+      ) : (
+        <div className={cx('byline-field-image-tile', styles.tile)}>
+          {/* Preview */}
+          {incomingValue?.storageUrl && (
+            <div className={cx('byline-field-image-preview-wrap', styles['preview-wrap'])}>
+              <img
+                src={incomingValue.storageUrl}
+                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)}>
+                  Pending upload
+                </div>
+              )}
+            </div>
+          )}
+          {/* Metadata */}
+          <div className={cx('byline-field-image-meta', styles.meta)}>
+            <div>
+              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                Filename:
+              </span>{' '}
+              {incomingValue?.filename}
+            </div>
+            <div>
+              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                Original:
+              </span>{' '}
+              {incomingValue?.originalFilename}
+            </div>
+            <div>
+              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>Type:</span>{' '}
+              {incomingValue?.mimeType}
+            </div>
+            <div>
+              <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>Size:</span>{' '}
+              {incomingValue?.fileSize}
+            </div>
+            {isPending ? (
+              <div>
+                <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                  Status:
+                </span>{' '}
+                <span className={cx('byline-field-image-meta-pending', styles['meta-pending'])}>
+                  Will upload on save
+                </span>
+              </div>
+            ) : (
+              <>
+                <div>
+                  <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                    Storage:
+                  </span>{' '}
+                  {incomingValue?.storageProvider}
+                </div>
+                {incomingValue?.imageWidth != null && (
+                  <div>
+                    <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                      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'])}>
+                      Format:
+                    </span>{' '}
+                    {incomingValue.imageFormat}
+                  </div>
+                )}
+                <div>
+                  <span className={cx('byline-field-image-meta-key', styles['meta-key'])}>
+                    Thumbnail:
+                  </span>{' '}
+                  {incomingValue?.thumbnailGenerated ? 'Generated' : 'Pending'}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+    </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);
+}