@byline/admin 2.5.1 → 2.6.0

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

@@ -0,0 +1,153 @@
+/**
+ * FileField — metadata tile + remove/upload affordances for arbitrary file
+ * uploads (non-image). Mirrors `image-field.module.css` structurally; the
+ * image-only preview / SVG-shape / pending-badge rules are dropped.
+ *
+ * Override handles:
+ *   .byline-field-file                — wrapper div
+ *   .byline-field-file-header         — label row
+ *   .byline-field-file-actions        — top-right icon-button group (download + remove)
+ *   .byline-field-file-empty          — empty-state hint text
+ *   .byline-field-file-tile           — bordered metadata tile
+ *   .byline-field-file-uploading      — centered overlay shown while uploading
+ *   .byline-field-file-icon-wrap      — left-aligned document-icon wrapper
+ *   .byline-field-file-icon           — the document glyph itself
+ *   .byline-field-file-pending        — yellow "pending upload" pill
+ *   .byline-field-file-meta           — metadata list
+ *   .byline-field-file-meta-key       — metadata field-name span
+ *   .byline-field-file-meta-pending   — yellow text inside pending status
+ */
+
+.header,
+:global(.byline-field-file-header) {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-8);
+  margin-bottom: 0.25rem;
+}
+
+.actions,
+:global(.byline-field-file-actions) {
+  position: absolute;
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+:global(.byline-field-file-actions .byline-button) {
+  color: var(--gray-900);
+}
+
+:global(.dark .byline-field-file-actions .byline-button),
+:global([data-theme="dark"] .byline-field-file-actions .byline-button) {
+  color: var(--gray-200);
+}
+
+.empty,
+:global(.byline-field-file-empty) {
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  font-style: italic;
+}
+
+.tile,
+:global(.byline-field-file-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);
+}
+
+.uploading,
+:global(.byline-field-file-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);
+}
+
+.icon-wrap,
+:global(.byline-field-file-icon-wrap) {
+  position: relative;
+  flex-shrink: 0;
+  align-self: flex-start;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
+  border-radius: var(--border-radius-sm);
+  color: var(--gray-300);
+}
+
+/* Interactive affordance when the wrap is rendered as a link
+   (file is stored — clicking opens the asset in a new tab). */
+a.icon-wrap,
+:global(a.byline-field-file-icon-wrap) {
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    border-color 120ms ease,
+    color 120ms ease;
+}
+
+a.icon-wrap:hover,
+:global(a.byline-field-file-icon-wrap):hover {
+  border-color: var(--primary-500);
+  color: var(--primary-400);
+}
+
+a.icon-wrap:focus-visible,
+:global(a.byline-field-file-icon-wrap):focus-visible {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+}
+
+.icon,
+:global(.byline-field-file-icon) {
+  opacity: 0.85;
+}
+
+.pending,
+:global(.byline-field-file-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-file-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-file-meta-key) {
+  font-weight: var(--font-weight-semibold);
+}
+
+.meta-pending,
+:global(.byline-field-file-meta-pending) {
+  color: var(--yellow-400);
+}

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

@@ -0,0 +1,286 @@
+/**
+ * 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 FileField as FieldType,
+  isPendingStoredFileValue,
+  type StoredFileValue,
+} from '@byline/core'
+import { useTranslation } from '@byline/i18n/react'
+import {
+  CloseIcon,
+  DocumentIcon,
+  DownloadIcon,
+  ErrorText,
+  HelpText,
+  IconButton,
+  Label,
+  LoaderRing,
+  VideoIcon,
+} 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 './file-field.module.css'
+import { FileUploadField } from './file-upload-field'
+
+/**
+ * Trigger a download via a temporary anchor. Mirrors the helper in
+ * `image-lightbox.tsx`: same-origin URLs respect the `download` attribute and
+ * save with the suggested filename; cross-origin URLs without CORS headers
+ * fall through to navigation in a new tab, where the user can right-click
+ * Save As.
+ */
+function triggerDownload(url: string, filename?: string) {
+  if (typeof document === 'undefined') return
+  const a = document.createElement('a')
+  a.href = url
+  if (filename) a.download = filename
+  a.target = '_blank'
+  a.rel = 'noreferrer'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+
+interface FileFieldProps {
+  field: FieldType
+  /** Collection path required to call the /upload endpoint. */
+  collectionPath?: string
+  value?: StoredFileValue | null
+  defaultValue?: StoredFileValue | null
+  onChange?: (value: StoredFileValue | null) => void
+  path?: string
+}
+
+export const FileField = ({
+  field,
+  collectionPath,
+  value,
+  defaultValue,
+  onChange: _onChange,
+  path,
+}: FileFieldProps) => {
+  const fieldPath = path ?? field.name
+  const { t } = useTranslation('byline-admin')
+  const fieldError = useFieldError(fieldPath)
+  const isDirty = useIsDirty(fieldPath)
+  const fieldValue = useFieldValue<StoredFileValue | null | undefined>(fieldPath)
+  const isUploading = useIsFieldUploading(fieldPath)
+  const { removePendingUpload } = useFormContext()
+
+  const handleChange = useFieldChangeHandler(field, fieldPath)
+
+  // Mirror the image-field rule: once the field has been touched, the form
+  // value is authoritative (even when null, so a click-to-remove sticks);
+  // otherwise fall back to props.
+  const incomingValue = isDirty
+    ? (fieldValue ?? null)
+    : (value ?? fieldValue ?? defaultValue ?? null)
+
+  const isPending = isPendingStoredFileValue(incomingValue)
+
+  // Legacy placeholder shape — kept for backwards compatibility with older
+  // seed data, matching the image-field check.
+  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'
+  }
+
+  const showUploadWidget = incomingValue == null || isOldPlaceholder(incomingValue)
+
+  const handleRemove = () => {
+    if (isPending) {
+      removePendingUpload(fieldPath)
+    }
+    handleChange(null)
+  }
+
+  // MIME-driven glyph dispatch. Until a dedicated VideoField primitive lands,
+  // the FileField is the canonical home for video uploads — the schema's
+  // `upload.allowedMimeTypes` decides what gets in, and we swap the glyph
+  // here based on the resolved MIME so the tile reads as "video" rather
+  // than "generic document".
+  const isVideo = incomingValue?.mimeType?.startsWith('video/') === true
+  const FileGlyph = isVideo ? VideoIcon : DocumentIcon
+
+  const htmlId = fieldPath
+
+  return (
+    <div className={`byline-field-file ${field.name}`}>
+      <div className={cx('byline-field-file-header', styles.header)}>
+        <Label
+          id={htmlId}
+          htmlFor={htmlId}
+          label={field.label ?? field.name}
+          required={!field.optional}
+        />
+      </div>
+
+      {showUploadWidget ? (
+        collectionPath ? (
+          <FileUploadField
+            field={field}
+            collectionPath={collectionPath}
+            fieldPath={fieldPath}
+            onUploaded={(uploaded) => {
+              handleChange(uploaded)
+            }}
+          />
+        ) : (
+          <div className={cx('byline-field-file-empty', styles.empty)}>
+            {t('fields.file.empty')}
+          </div>
+        )
+      ) : (
+        <div className={cx('byline-field-file-tile', styles.tile)}>
+          {isUploading && (
+            <div
+              className={cx('byline-field-file-uploading', styles.uploading)}
+              aria-live="polite"
+              aria-busy="true"
+            >
+              <LoaderRing />
+            </div>
+          )}
+          {collectionPath && (
+            <div className={cx('byline-field-file-actions', styles.actions)}>
+              {!isPending && incomingValue?.storageUrl && (
+                <IconButton
+                  type="button"
+                  intent="noeffect"
+                  onClick={() =>
+                    triggerDownload(
+                      incomingValue.storageUrl as string,
+                      incomingValue.originalFilename ?? incomingValue.filename
+                    )
+                  }
+                  size="xs"
+                  disabled={isUploading}
+                  aria-label={t('fields.file.downloadAriaLabel')}
+                >
+                  <DownloadIcon width="15px" height="15px" />
+                </IconButton>
+              )}
+              <IconButton
+                type="button"
+                intent="noeffect"
+                onClick={handleRemove}
+                size="xs"
+                disabled={isUploading}
+                aria-label={t('fields.file.removeAriaLabel')}
+              >
+                <CloseIcon width="15px" height="15px" />
+              </IconButton>
+            </div>
+          )}
+          {/* Document icon + (optional) pending badge — mirrors the
+              image-field's preview-wrap so the file tile has the same
+              visual hierarchy: glyph on the left, metadata on the right.
+              When the file is stored (non-pending and resolvable storageUrl),
+              the wrap is rendered as an anchor that opens the asset in a new
+              tab — browser-native viewer dispatch (PDFs render inline,
+              non-renderable types fall through to download). */}
+          {!isPending && incomingValue?.storageUrl ? (
+            <a
+              href={incomingValue.storageUrl}
+              target="_blank"
+              rel="noreferrer"
+              aria-label={t('fields.file.openInNewTabAriaLabel', {
+                filename: incomingValue.originalFilename ?? incomingValue.filename,
+              })}
+              className={cx('byline-field-file-icon-wrap', styles['icon-wrap'])}
+            >
+              <FileGlyph
+                width="48px"
+                height="48px"
+                className={cx('byline-field-file-icon', styles.icon)}
+              />
+            </a>
+          ) : (
+            <div className={cx('byline-field-file-icon-wrap', styles['icon-wrap'])}>
+              <FileGlyph
+                width="48px"
+                height="48px"
+                className={cx('byline-field-file-icon', styles.icon)}
+              />
+              {isPending && (
+                <div className={cx('byline-field-file-pending', styles.pending)}>
+                  {t('fields.fileMeta.pendingUpload')}
+                </div>
+              )}
+            </div>
+          )}
+          <div className={cx('byline-field-file-meta', styles.meta)}>
+            <div>
+              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                {t('fields.fileMeta.filename')}
+              </span>{' '}
+              {incomingValue?.filename}
+            </div>
+            <div>
+              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                {t('fields.fileMeta.original')}
+              </span>{' '}
+              {incomingValue?.originalFilename}
+            </div>
+            <div>
+              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                {t('fields.fileMeta.type')}
+              </span>{' '}
+              {incomingValue?.mimeType}
+            </div>
+            <div>
+              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                {t('fields.fileMeta.size')}
+              </span>{' '}
+              {incomingValue?.fileSize}
+            </div>
+            {isPending ? (
+              <div>
+                <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                  {t('fields.fileMeta.status')}
+                </span>{' '}
+                <span className={cx('byline-field-file-meta-pending', styles['meta-pending'])}>
+                  {t('fields.fileMeta.willUploadOnSave')}
+                </span>
+              </div>
+            ) : (
+              <>
+                <div>
+                  <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                    {t('fields.fileMeta.storage')}
+                  </span>{' '}
+                  {incomingValue?.storageProvider}
+                </div>
+                <div>
+                  <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
+                    {t('fields.fileMeta.path')}
+                  </span>{' '}
+                  {incomingValue?.storagePath}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {field.helpText && <HelpText text={field.helpText} />}
+
+      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError} />}
+    </div>
+  )
+}

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

@@ -0,0 +1,101 @@
+/**
+ * FileUploadField — drag-and-drop file picker that registers a deferred
+ * upload in form context.
+ *
+ * Override handles:
+ *   .byline-field-file-upload                — root wrapper
+ *   .byline-field-file-upload-input          — visually-hidden file input
+ *   .byline-field-file-upload-zone           — clickable / drop target
+ *   .byline-field-file-upload-zone-active    — drag-hovered state
+ *   .byline-field-file-upload-zone-busy      — processing state
+ *   .byline-field-file-upload-icon           — upload icon svg
+ *   .byline-field-file-upload-label          — primary text inside the zone
+ *   .byline-field-file-upload-action         — "browse" link inside the label
+ *   .byline-field-file-upload-error          — error message paragraph
+ */
+
+.root,
+:global(.byline-field-file-upload) {
+  margin-top: 0.25rem;
+}
+
+.input,
+:global(.byline-field-file-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-file-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-file-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-file-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-file-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;
+}
+
+.icon,
+:global(.byline-field-file-upload-icon) {
+  width: 1.75rem;
+  height: 1.75rem;
+  opacity: 0.6;
+}
+
+.label,
+:global(.byline-field-file-upload-label) {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.action,
+:global(.byline-field-file-upload-action) {
+  color: var(--primary-400);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.error,
+:global(.byline-field-file-upload-error) {
+  margin-top: 0.375rem;
+  color: var(--red-400);
+  font-size: var(--font-size-xs);
+}