@byline/ui 2.5.1 → 2.6.0

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

@@ -1,271 +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 {
-  type FileField 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 { DocumentIcon } from '../../icons/document-icon.js'
-import { DownloadIcon } from '../../icons/download-icon.js'
-import { VideoIcon } from '../../icons/video-icon.js'
-import { ErrorText, HelpText, Label, LoaderRing } from '../../uikit.js'
-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 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)}>No file selected</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="Download file"
-                >
-                  <DownloadIcon width="15px" height="15px" />
-                </IconButton>
-              )}
-              <IconButton
-                type="button"
-                intent="noeffect"
-                onClick={handleRemove}
-                size="xs"
-                disabled={isUploading}
-                aria-label="Remove file"
-              >
-                <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={`Open ${incomingValue.originalFilename ?? incomingValue.filename} in a new tab`}
-              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)}>
-                  Pending upload
-                </div>
-              )}
-            </div>
-          )}
-          <div className={cx('byline-field-file-meta', styles.meta)}>
-            <div>
-              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
-                Filename:
-              </span>{' '}
-              {incomingValue?.filename}
-            </div>
-            <div>
-              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
-                Original:
-              </span>{' '}
-              {incomingValue?.originalFilename}
-            </div>
-            <div>
-              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Type:</span>{' '}
-              {incomingValue?.mimeType}
-            </div>
-            <div>
-              <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>Size:</span>{' '}
-              {incomingValue?.fileSize}
-            </div>
-            {isPending ? (
-              <div>
-                <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
-                  Status:
-                </span>{' '}
-                <span className={cx('byline-field-file-meta-pending', styles['meta-pending'])}>
-                  Will upload on save
-                </span>
-              </div>
-            ) : (
-              <>
-                <div>
-                  <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
-                    Storage:
-                  </span>{' '}
-                  {incomingValue?.storageProvider}
-                </div>
-                <div>
-                  <span className={cx('byline-field-file-meta-key', styles['meta-key'])}>
-                    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

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

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

@@ -1,183 +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
- */
-
-/**
- * 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 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 [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="Upload file — drag and drop or click to browse"
-        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)}>
-          Drop file here or{' '}
-          <span className={cx('byline-field-file-upload-action', styles.action)}>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

@@ -1,43 +0,0 @@
-/**
- * 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

@@ -1,84 +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 { useMemo } from 'react'
-
-import type { Field, GroupField as GroupFieldType } from '@byline/core'
-import cx from 'classnames'
-
-import { placeholderForField } from '../../fields/field-helpers'
-import { FieldRenderer } from '../../fields/field-renderer'
-import { useFieldError } from '../../forms/form-context'
-import { ErrorText } from '../../uikit.js'
-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>
-  )
-}