@byline/ui 2.5.2 → 2.6.0

package/src/forms/upload-executor.ts

@@ -1,190 +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
- */
-
-/**
- * Upload Executor
- *
- * Handles batch execution of pending file uploads at form submission time.
- * This enables "deferred uploads" — files are selected/previewed immediately
- * but only uploaded when the user clicks Save.
- */
-
-import type { StoredFileValue } from '@byline/core'
-
-import type { UploadFieldFn } from '../services/field-services-types'
-import type { PendingUpload } from './form-context'
-
-export interface UploadResult {
-  fieldPath: string
-  success: boolean
-  storedFile?: StoredFileValue
-  error?: string
-}
-
-export interface ExecuteUploadsResult {
-  /** All upload results (both successful and failed) */
-  results: UploadResult[]
-  /** Map of field path to StoredFileValue for successful uploads */
-  successful: Map<string, StoredFileValue>
-  /** Map of field path to error message for failed uploads */
-  errors: Map<string, string>
-  /** Whether all uploads succeeded */
-  allSucceeded: boolean
-}
-
-/**
- * Execute all pending uploads sequentially.
- * Returns a result object with successful uploads and any errors.
- *
- * @param pendingUploads - Map of field path to PendingUpload
- * @param uploadField - Host-provided upload transport (resolved via
- *                         `useBylineFieldServices()` in the calling React tree)
- * @returns Promise resolving to ExecuteUploadsResult
- */
-export async function executeUploads(
-  pendingUploads: Map<string, PendingUpload>,
-  uploadField: UploadFieldFn
-): Promise<ExecuteUploadsResult> {
-  const results: UploadResult[] = []
-  const successful = new Map<string, StoredFileValue>()
-  const errors = new Map<string, string>()
-
-  for (const [fieldPath, upload] of pendingUploads.entries()) {
-    const formData = new FormData()
-    formData.append('file', upload.file)
-    // Tell the server which upload-capable field this file belongs to.
-    // With per-field upload config a collection can have multiple
-    // image/file fields, each with its own constraints; the server's
-    // unique-default fallback covers the single-field case but rejects
-    // multi-field collections without an explicit selector.
-    formData.append('field', uploadFieldName(fieldPath))
-
-    try {
-      // Pass createDocument=false — we're uploading for an embedded field,
-      // the form's save action handles document creation/update.
-      const result = await uploadField(upload.collectionPath, formData, false)
-
-      results.push({
-        fieldPath,
-        success: true,
-        storedFile: result.storedFile,
-      })
-      successful.set(fieldPath, result.storedFile)
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Upload failed'
-      results.push({
-        fieldPath,
-        success: false,
-        error: message,
-      })
-      errors.set(fieldPath, message)
-    }
-  }
-
-  return {
-    results,
-    successful,
-    errors,
-    allSucceeded: errors.size === 0,
-  }
-}
-
-/**
- * Extract the leaf field name from a `fieldPath`. Top-level upload
- * fields (`'image'`, `'avatar'`) pass through unchanged; nested paths
- * (`'profile.avatar'`) reduce to their last segment, since the
- * server-side resolver matches against top-level field names today.
- * Nested upload fields would need a richer transport selector when
- * they land — the host resolver is the natural place to extend.
- */
-function uploadFieldName(fieldPath: string): string {
-  const dot = fieldPath.lastIndexOf('.')
-  return dot === -1 ? fieldPath : fieldPath.slice(dot + 1)
-}
-
-/**
- * Progress callback type for upload execution with progress tracking.
- */
-export type UploadProgressCallback = (info: {
-  current: number
-  total: number
-  fieldPath: string
-  status: 'uploading' | 'done' | 'error'
-}) => void
-
-/**
- * Execute uploads with progress callbacks.
- * Useful for showing upload progress in the UI.
- */
-export async function executeUploadsWithProgress(
-  pendingUploads: Map<string, PendingUpload>,
-  uploadField: UploadFieldFn,
-  onProgress?: UploadProgressCallback
-): Promise<ExecuteUploadsResult> {
-  const results: UploadResult[] = []
-  const successful = new Map<string, StoredFileValue>()
-  const errors = new Map<string, string>()
-
-  const entries = Array.from(pendingUploads.entries())
-  const total = entries.length
-
-  for (let i = 0; i < entries.length; i++) {
-    const [fieldPath, upload] = entries[i]
-
-    onProgress?.({
-      current: i + 1,
-      total,
-      fieldPath,
-      status: 'uploading',
-    })
-
-    const formData = new FormData()
-    formData.append('file', upload.file)
-    formData.append('field', uploadFieldName(fieldPath))
-
-    try {
-      const result = await uploadField(upload.collectionPath, formData, false)
-
-      results.push({
-        fieldPath,
-        success: true,
-        storedFile: result.storedFile,
-      })
-      successful.set(fieldPath, result.storedFile)
-
-      onProgress?.({
-        current: i + 1,
-        total,
-        fieldPath,
-        status: 'done',
-      })
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Upload failed'
-      results.push({
-        fieldPath,
-        success: false,
-        error: message,
-      })
-      errors.set(fieldPath, message)
-
-      onProgress?.({
-        current: i + 1,
-        total,
-        fieldPath,
-        status: 'error',
-      })
-    }
-  }
-
-  return {
-    results,
-    successful,
-    errors,
-    allSucceeded: errors.size === 0,
-  }
-}

package/src/services/field-services-context.tsx

@@ -1,35 +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 { createContext, type ReactNode, useContext } from 'react'
-
-import type { BylineFieldServices } from './field-services-types'
-
-const FieldServicesContext = createContext<BylineFieldServices | null>(null)
-
-interface BylineFieldServicesProviderProps {
-  services: BylineFieldServices
-  children: ReactNode
-}
-
-export const BylineFieldServicesProvider = ({
-  services,
-  children,
-}: BylineFieldServicesProviderProps) => (
-  <FieldServicesContext.Provider value={services}>{children}</FieldServicesContext.Provider>
-)
-
-export const useBylineFieldServices = (): BylineFieldServices => {
-  const ctx = useContext(FieldServicesContext)
-  if (!ctx) {
-    throw new Error(
-      '@byline/ui: BylineFieldServicesProvider missing. Wrap your admin tree with <BylineFieldServicesProvider services={…} />.'
-    )
-  }
-  return ctx
-}

package/src/services/field-services-types.ts

@@ -1,68 +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
- */
-
-/**
- * Framework-neutral function contracts that field/form components in
- * `@byline/ui` need from the host application. The host wires concrete
- * implementations via `BylineFieldServicesProvider` — typically thin
- * adapters around TanStack Start server functions, Next.js server
- * actions, or any other RPC-style transport.
- */
-
-import type { StoredFileValue } from '@byline/core'
-
-export interface CollectionListParams {
-  page?: number
-  page_size?: number
-  order?: string
-  desc?: boolean
-  query?: string
-  locale?: string
-  status?: string
-  fields?: string[]
-}
-
-export interface CollectionListDoc {
-  id: string
-  path?: string
-  [field: string]: unknown
-}
-
-export interface CollectionListResponse {
-  docs: CollectionListDoc[]
-  meta: { totalPages?: number; [k: string]: unknown }
-  included: { collection: { id: string; [k: string]: unknown } }
-}
-
-export type GetCollectionDocumentsFn = (input: {
-  collection: string
-  params: CollectionListParams
-}) => Promise<CollectionListResponse>
-
-export interface UploadedFileResult {
-  documentId?: string
-  documentVersionId?: string
-  /**
-   * The persisted file value, including the `variants` array with
-   * `storagePath`, `storageUrl`, `width`, `height`, and `format` for each
-   * generated derivative. Single source of truth — the legacy top-level
-   * `variants: { name, url }[]` is gone.
-   */
-  storedFile: StoredFileValue
-}
-
-export type UploadFieldFn = (
-  collection: string,
-  formData: FormData,
-  createDocument?: boolean
-) => Promise<UploadedFileResult>
-
-export interface BylineFieldServices {
-  getCollectionDocuments: GetCollectionDocumentsFn
-  uploadField: UploadFieldFn
-}

package/src/widgets/diff-viewer/diff-modal.module.css

@@ -1,79 +0,0 @@
-/**
- * DiffModal — side-by-side document version comparison modal.
- *
- * Override handles:
- *   .byline-diff-modal-header     — modal header padding
- *   .byline-diff-modal-title-stack — heading + subtitle stack
- *   .byline-diff-modal-title      — heading
- *   .byline-diff-modal-subtitle   — subtitle line
- *   .byline-diff-modal-version    — inline pill identifying the historical version
- *   .byline-diff-modal-content    — scrollable content
- *   .byline-diff-modal-state      — loading / error placeholder
- *   .byline-diff-modal-error      — error placeholder colour modifier
- *   .byline-diff-modal-viewer     — diff viewer wrapper
- */
-
-.header,
-:global(.byline-diff-modal-header) {
-  padding-top: var(--spacing-16);
-  margin-bottom: var(--spacing-8);
-  flex-shrink: 0;
-}
-
-.title-stack,
-:global(.byline-diff-modal-title-stack) {
-  display: flex;
-  flex-direction: column;
-}
-
-.title,
-:global(.byline-diff-modal-title) {
-  margin: 0;
-  font-size: var(--font-size-xl);
-}
-
-.subtitle,
-:global(.byline-diff-modal-subtitle) {
-  margin: 0;
-  font-size: var(--font-size-sm);
-  color: var(--gray-400);
-}
-
-.version,
-:global(.byline-diff-modal-version) {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  background-color: var(--canvas-700);
-  padding: 0 var(--spacing-4);
-  border-radius: var(--border-radius-sm);
-}
-
-.content,
-:global(.byline-diff-modal-content) {
-  flex: 1 1 0;
-  overflow: auto;
-  padding: 0;
-  min-height: 0;
-}
-
-.state,
-:global(.byline-diff-modal-state) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: var(--spacing-12);
-  color: var(--gray-400);
-}
-
-.error,
-:global(.byline-diff-modal-error) {
-  color: var(--red-400);
-  gap: 0;
-}
-
-.viewer,
-:global(.byline-diff-modal-viewer) {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-sm);
-}

package/src/widgets/diff-viewer/diff-modal.tsx

@@ -1,184 +0,0 @@
-'use client'
-
-/**
- * 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 { useEffect, useState } from 'react'
-
-import cx from 'classnames'
-import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
-
-import { CloseIcon, IconButton, LoaderRing, Modal } from '../../uikit.js'
-import styles from './diff-modal.module.css'
-
-// Keys that are per-version metadata rather than content — strip before diffing
-// so the diff focuses on meaningful content changes. ClientDocument-shape
-// metadata keys after the Phase 7 admin migration.
-const STRIP_KEYS = new Set([
-  'id',
-  'versionId',
-  'path',
-  'status',
-  'createdAt',
-  'updatedAt',
-  'hasPublishedVersion',
-  '_publishedVersion',
-])
-
-function stripMeta(doc: Record<string, unknown>): Record<string, unknown> {
-  // With the nested document shape, extract just the fields for diffing.
-  if (doc.fields && typeof doc.fields === 'object') {
-    return doc.fields as Record<string, unknown>
-  }
-  return Object.fromEntries(Object.entries(doc).filter(([k]) => !STRIP_KEYS.has(k)))
-}
-
-export interface DiffModalProps {
-  isOpen: boolean
-  onDismiss: () => void
-  collection: string
-  documentId: string
-  /** The `versionId` of the historical version to compare. */
-  versionId: string
-  /** A human-readable label for the historical version (e.g. a date string). */
-  versionLabel: string
-  /** The already-loaded current (latest) version of the document. */
-  currentDocument: Record<string, unknown>
-  /** Content locale to compare — undefined / 'all' shows all locales. */
-  locale?: string
-  /**
-   * Host-provided loader for a historical document version. The diff
-   * modal is framework-neutral; callers wire this to whatever transport
-   * they use (e.g. `BylineAdminServices.getCollectionDocumentVersion` in
-   * the admin shell).
-   */
-  loadHistoricalVersion: (
-    collection: string,
-    documentId: string,
-    versionId: string,
-    locale: string | undefined
-  ) => Promise<Record<string, unknown>>
-}
-
-export function DiffModal({
-  isOpen,
-  onDismiss,
-  collection,
-  documentId,
-  versionId,
-  versionLabel,
-  currentDocument,
-  locale,
-  loadHistoricalVersion,
-}: DiffModalProps) {
-  const [historicalDoc, setHistoricalDoc] = useState<Record<string, unknown> | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!isOpen || !versionId) return
-
-    let cancelled = false
-    setLoading(true)
-    setError(null)
-    setHistoricalDoc(null)
-
-    loadHistoricalVersion(collection, documentId, versionId, locale)
-      .then((doc) => {
-        if (cancelled) return
-        setHistoricalDoc(doc)
-      })
-      .catch((err) => {
-        if (cancelled) return
-        setError(err instanceof Error ? err.message : 'Failed to load version')
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false)
-      })
-
-    return () => {
-      cancelled = true
-    }
-  }, [isOpen, collection, documentId, versionId, locale, loadHistoricalVersion])
-
-  const currentStr = currentDocument ? JSON.stringify(stripMeta(currentDocument), null, 2) : ''
-
-  const historicalStr = historicalDoc ? JSON.stringify(stripMeta(historicalDoc), null, 2) : ''
-
-  return (
-    <Modal isOpen={isOpen} closeOnOverlayClick={true} onDismiss={onDismiss}>
-      <Modal.Container
-        style={{
-          width: '96vw',
-          maxWidth: '96vw',
-          height: '90vh',
-          maxHeight: '90vh',
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-        }}
-      >
-        <Modal.Header className={cx('byline-diff-modal-header', styles.header)}>
-          <div className={cx('byline-diff-modal-title-stack', styles['title-stack'])}>
-            <h3 className={cx('byline-diff-modal-title', styles.title)}>Version Comparison</h3>
-            <p className={cx('byline-diff-modal-subtitle', styles.subtitle)}>
-              Comparing{' '}
-              <span className={cx('byline-diff-modal-version', styles.version)}>
-                {versionLabel}
-              </span>{' '}
-              (left) against current version (right)
-            </p>
-          </div>
-          <IconButton onClick={onDismiss} size="xs" aria-label="Close comparison">
-            <CloseIcon width="15px" height="15px" />
-          </IconButton>
-        </Modal.Header>
-
-        <Modal.Content
-          className={cx('byline-diff-modal-content', styles.content)}
-          style={{ minHeight: 0 }}
-        >
-          {loading && (
-            <div className={cx('byline-diff-modal-state', styles.state)}>
-              <LoaderRing size={28} color="#666666" />
-              <span>Loading version…</span>
-            </div>
-          )}
-
-          {error && (
-            <div
-              className={cx(
-                'byline-diff-modal-state',
-                'byline-diff-modal-error',
-                styles.state,
-                styles.error
-              )}
-            >
-              {error}
-            </div>
-          )}
-
-          {!loading && !error && historicalDoc && (
-            <div className={cx('byline-diff-modal-viewer', styles.viewer)}>
-              <ReactDiffViewer
-                oldValue={historicalStr}
-                newValue={currentStr}
-                splitView={true}
-                compareMethod={DiffMethod.LINES}
-                useDarkTheme={true}
-                leftTitle={versionLabel}
-                rightTitle="Current version"
-                hideLineNumbers={false}
-              />
-            </div>
-          )}
-        </Modal.Content>
-      </Modal.Container>
-    </Modal>
-  )
-}

package/src/widgets/status-badge/status-badge.module.css

@@ -1,31 +0,0 @@
-/**
- * StatusBadge — workflow-status pill, optionally preceded by a "live" dot.
- *
- * Override handles:
- *   .byline-status-badge-wrap   — the outer flex container
- *   .byline-status-badge-dot    — the green "published version live" dot
- *   .byline-status-badge        — the badge itself
- */
-
-.wrap,
-:global(.byline-status-badge-wrap) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-4);
-}
-
-.dot,
-:global(.byline-status-badge-dot) {
-  display: inline-block;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: var(--border-radius-full);
-  background-color: var(--green-500);
-}
-
-.badge,
-:global(.byline-status-badge) {
-  padding: 0 0.375rem;
-  font-size: 0.65rem;
-  line-height: 1.5;
-}

package/src/widgets/status-badge/status-badge.tsx

@@ -1,69 +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 { WorkflowStatus } from '@byline/core'
-import {
-  WORKFLOW_STATUS_ARCHIVED,
-  WORKFLOW_STATUS_DRAFT,
-  WORKFLOW_STATUS_PUBLISHED,
-} from '@byline/core'
-import cx from 'classnames'
-
-import { Badge } from '../../uikit.js'
-import styles from './status-badge.module.css'
-
-function statusIntent(status: string): 'success' | 'warning' | 'info' | 'noeffect' {
-  switch (status) {
-    case WORKFLOW_STATUS_PUBLISHED:
-      return 'success'
-    case WORKFLOW_STATUS_DRAFT:
-      return 'warning'
-    case WORKFLOW_STATUS_ARCHIVED:
-      return 'info'
-    default:
-      return 'noeffect'
-  }
-}
-
-/**
- * Compact badge for workflow status values. Maps the three built-in
- * statuses (draft, published, archived) to semantic intents and falls
- * back to `noeffect` for any custom workflow statuses.
- *
- * When `hasPublishedVersion` is true and the current status is not
- * `published`, a small green dot is rendered before the badge to
- * indicate that a published version is live.
- *
- * Stable override handles: `.byline-status-badge-wrap`,
- * `.byline-status-badge-dot`, `.byline-status-badge`.
- */
-export const StatusBadge = ({
-  status,
-  workflowStatuses,
-  hasPublishedVersion,
-}: {
-  status: string
-  workflowStatuses: WorkflowStatus[]
-  hasPublishedVersion?: boolean
-}) => {
-  const label = workflowStatuses.find((s) => s.name === status)?.label ?? String(status ?? '')
-
-  return (
-    <span className={cx('byline-status-badge-wrap', styles.wrap)}>
-      {hasPublishedVersion === true && status !== 'published' && (
-        <span
-          title="A published version is live"
-          className={cx('byline-status-badge-dot', styles.dot)}
-        />
-      )}
-      <Badge intent={statusIntent(status)} className={cx('byline-status-badge', styles.badge)}>
-        {label}
-      </Badge>
-    </span>
-  )
-}