@byline/ui 2.5.2 → 2.6.0

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

@@ -1,155 +0,0 @@
-/**
- * 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);
-}

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

@@ -1,291 +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 { useState } from 'react'
-
-import {
-  type ImageField as FieldType,
-  isPendingStoredFileValue,
-  type StoredFileValue,
-} from '@byline/core'
-import cx from 'classnames'
-
-import { IconButton } from '../../components/button/icon-button.js'
-import {
-  useFieldError,
-  useFieldValue,
-  useFormContext,
-  useIsDirty,
-  useIsFieldUploading,
-} from '../../forms/form-context'
-import { CloseIcon } from '../../icons/close-icon.js'
-import { ErrorText, HelpText, Label, LoaderRing } from '../../uikit.js'
-import { ImageLightbox } from '../../widgets/image-lightbox/image-lightbox.js'
-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()
-
-  // 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)}>No image selected</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="Remove image"
-              >
-                <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="Open full-size preview"
-                  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)}>
-                  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>{' '}
-                  {thumbVariant ? 'Generated' : 'Pending'}
-                </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

@@ -1,123 +0,0 @@
-/**
- * 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);
-}