gbs-add-block 1.2.12 → 1.2.13

package/source/beta-components/fileuploader/core/validate.ts

@@ -0,0 +1,83 @@
+import type { RejectionCode } from "./types";
+
+export interface ValidationRules {
+  /** Same syntax as `<input accept>`: `.pdf`, `image/*`, `application/json`. */
+  accept?: string;
+  /** Bytes. */
+  maxSize?: number;
+  /** Bytes. */
+  minSize?: number;
+  /** Total files, counting ones already selected. Ignored when `multiple` is false. */
+  maxFiles?: number;
+  /** When false, a new file replaces the current one. Default false. */
+  multiple?: boolean;
+  /** Keep a file that matches one already selected (same name, size and date). */
+  allowDuplicates?: boolean;
+  /** Return a message to reject the file. */
+  validate?(file: File): string | null | undefined;
+}
+
+/** Whether a file matches an `accept` string, the way the browser's picker reads it. */
+export function matchesAccept(file: { name: string; type: string }, accept?: string): boolean {
+  const tokens = (accept ?? "")
+    .split(",")
+    .map((token) => token.trim().toLowerCase())
+    .filter(Boolean);
+  if (tokens.length === 0) return true;
+
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return tokens.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
+
+/** Two picks of the same file on disk produce the same key. */
+export const fileKey = (file: File) => `${file.name}:${file.size}:${file.lastModified}`;
+
+export interface Partitioned {
+  accepted: File[];
+  rejected: { file: File; code: RejectionCode; message?: string }[];
+}
+
+function check(file: File, rules: ValidationRules): { code: RejectionCode; message?: string } | null {
+  if (!matchesAccept(file, rules.accept)) return { code: "file-type" };
+  if (rules.maxSize !== undefined && file.size > rules.maxSize) return { code: "file-too-large" };
+  if (rules.minSize !== undefined && file.size < rules.minSize) return { code: "file-too-small" };
+  const message = rules.validate?.(file);
+  if (message) return { code: "custom", message };
+  return null;
+}
+
+/**
+ * Splits a new selection into files to keep and files to reject, with a reason
+ * for each. In single mode the first valid file will replace the current one.
+ */
+export function partitionFiles(
+  incoming: readonly File[],
+  existing: readonly File[],
+  rules: ValidationRules = {},
+): Partitioned {
+  const multiple = rules.multiple ?? false;
+  const seen = new Set(multiple ? existing.map(fileKey) : []);
+  let room = multiple ? (rules.maxFiles ?? Infinity) - existing.length : 1;
+  const result: Partitioned = { accepted: [], rejected: [] };
+
+  for (const file of incoming) {
+    const failure = check(file, rules);
+    if (failure) {
+      result.rejected.push({ file, ...failure });
+    } else if (!rules.allowDuplicates && seen.has(fileKey(file))) {
+      result.rejected.push({ file, code: "duplicate" });
+    } else if (room <= 0) {
+      result.rejected.push({ file, code: "too-many-files" });
+    } else {
+      result.accepted.push(file);
+      seen.add(fileKey(file));
+      room--;
+    }
+  }
+  return result;
+}

package/source/beta-components/fileuploader/index.ts

@@ -0,0 +1,7 @@
+export { FileUploader } from "./react/FileUploader";
+export type { FileUploaderProps } from "./react/FileUploader";
+export { useFileUploader } from "./react/useFileUploader";
+export type { UseFileUploaderResult } from "./react/useFileUploader";
+export { defaultUploaderText } from "./react/locale";
+export type { FileUploaderHandle, UploaderSlot } from "./react/props";
+export * from "./core";

package/source/beta-components/fileuploader/react/FileRow.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { memo, useCallback, type ReactNode } from "react";
+import { fileKind, formatBytes } from "../core/format";
+import type { UploaderStore } from "../core/store";
+import type { ExistingFile, FileKind, UploaderLocaleText, UploadItem } from "../core/types";
+import {
+  DownloadIcon,
+  FileKindIcon,
+  PauseIcon,
+  PlayIcon,
+  RetryIcon,
+  XIcon,
+} from "./icons";
+import { cx, type UploaderSlot } from "./props";
+
+const percentFormats = new Map<string, Intl.NumberFormat>();
+
+function formatPercent(value: number, locale?: string) {
+  const key = locale ?? "";
+  let format = percentFormats.get(key);
+  if (!format) {
+    format = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });
+    percentFormats.set(key, format);
+  }
+  return format.format(value);
+}
+
+interface SharedRowProps {
+  preview: boolean;
+  removable: boolean;
+  disabled: boolean;
+  locale?: string;
+  text: UploaderLocaleText;
+  classNames?: Partial<Record<UploaderSlot, string>>;
+}
+
+function IconButton({
+  label,
+  disabled,
+  onClick,
+  children,
+}: {
+  label: string;
+  disabled: boolean;
+  onClick(): void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className="fu-icon-button"
+      aria-label={label}
+      title={label}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Thumb({
+  kind,
+  className,
+  children,
+}: {
+  kind: FileKind;
+  className?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <span className={cx("fu-thumb", className)} data-kind={kind} aria-hidden="true">
+      <FileKindIcon kind={kind} />
+      {children}
+    </span>
+  );
+}
+
+interface FileRowProps extends SharedRowProps {
+  item: UploadItem;
+  store: UploaderStore;
+  canUpload: boolean;
+}
+
+/** One selected file. Memoized: a progress tick re-renders only its own row. */
+export const FileRow = memo(function FileRow({
+  item,
+  store,
+  canUpload,
+  preview,
+  removable,
+  disabled,
+  locale,
+  text,
+  classNames,
+}: FileRowProps) {
+  const { file, status } = item;
+  const kind = fileKind(file);
+  const name = file.name;
+
+  // React 19 ref cleanup: the object URL lives exactly as long as the <img>,
+  // and unlike a base64 data URL it costs no memory copy of the file.
+  const attachPreview = useCallback(
+    (img: HTMLImageElement | null) => {
+      if (!img) return;
+      const url = URL.createObjectURL(file);
+      img.src = url;
+      return () => URL.revokeObjectURL(url);
+    },
+    [file],
+  );
+
+  const percent = formatPercent(item.progress, locale);
+  const size = formatBytes(file.size, locale);
+  const label: Record<UploadItem["status"], string | null> = {
+    idle: null,
+    queued: text.queued,
+    uploading: null,
+    paused: `${text.paused} · ${percent}`,
+    success: text.uploaded,
+    error: text.failed,
+    canceled: text.canceled,
+  };
+  const meta =
+    status === "uploading"
+      ? text.progress(formatBytes(item.uploadedBytes, locale), size, percent)
+      : [size, label[status]].filter(Boolean).join(" · ");
+
+  const showProgress =
+    status === "uploading" || status === "paused" || (status === "error" && item.progress > 0);
+  const inFlight = status === "uploading" || status === "queued";
+
+  return (
+    <li className={cx("fu-item", classNames?.item)} data-status={status}>
+      <Thumb kind={kind} className={classNames?.thumb}>
+        {preview && kind === "image" && (
+          <img
+            ref={attachPreview}
+            alt=""
+            decoding="async"
+            // Formats the browser can't draw (e.g. HEIC) fall back to the icon underneath.
+            onError={(event) => {
+              event.currentTarget.hidden = true;
+            }}
+          />
+        )}
+      </Thumb>
+
+      <div className="fu-body">
+        <span className="fu-name" title={name}>
+          {name}
+        </span>
+        <span className="fu-meta">{meta}</span>
+        {status === "error" && item.error && <span className="fu-item-error">{item.error}</span>}
+        {showProgress && (
+          <div
+            className={cx("fu-progress", classNames?.progress)}
+            role="progressbar"
+            aria-label={name}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(item.progress * 100)}
+          >
+            <span className="fu-progress-bar" style={{ transform: `scaleX(${item.progress})` }} />
+          </div>
+        )}
+      </div>
+
+      <div className={cx("fu-actions", classNames?.actions)}>
+        {canUpload && status === "uploading" && (
+          <IconButton label={text.pause(name)} disabled={disabled} onClick={() => store.pause(item.id)}>
+            <PauseIcon />
+          </IconButton>
+        )}
+        {canUpload && status === "paused" && (
+          <IconButton label={text.resume(name)} disabled={disabled} onClick={() => void store.upload([item.id])}>
+            <PlayIcon />
+          </IconButton>
+        )}
+        {canUpload && (status === "error" || status === "canceled") && (
+          <IconButton label={text.retry(name)} disabled={disabled} onClick={() => void store.upload([item.id])}>
+            <RetryIcon />
+          </IconButton>
+        )}
+        {inFlight || status === "paused" ? (
+          <IconButton label={text.cancel(name)} disabled={disabled} onClick={() => store.cancel(item.id)}>
+            <XIcon />
+          </IconButton>
+        ) : (
+          removable && (
+            <IconButton label={text.remove(name)} disabled={disabled} onClick={() => store.remove(item.id)}>
+              <XIcon />
+            </IconButton>
+          )
+        )}
+      </div>
+    </li>
+  );
+});
+
+interface ExistingFileRowProps extends SharedRowProps {
+  file: ExistingFile;
+  onRemove?(file: ExistingFile): void;
+}
+
+/** A file already stored on the server. */
+export const ExistingFileRow = memo(function ExistingFileRow({
+  file,
+  onRemove,
+  preview,
+  removable,
+  disabled,
+  locale,
+  text,
+  classNames,
+}: ExistingFileRowProps) {
+  const kind = fileKind(file);
+  const meta = [file.size !== undefined ? formatBytes(file.size, locale) : null, text.uploaded]
+    .filter(Boolean)
+    .join(" · ");
+
+  return (
+    <li className={cx("fu-item", classNames?.item)} data-status="success" data-existing="">
+      <Thumb kind={kind} className={classNames?.thumb}>
+        {preview && kind === "image" && file.url && (
+          <img
+            src={file.url}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            onError={(event) => {
+              event.currentTarget.hidden = true;
+            }}
+          />
+        )}
+      </Thumb>
+
+      <div className="fu-body">
+        <span className="fu-name" title={file.name}>
+          {file.name}
+        </span>
+        <span className="fu-meta">{meta}</span>
+      </div>
+
+      <div className={cx("fu-actions", classNames?.actions)}>
+        {file.url && (
+          <a
+            className="fu-icon-button"
+            href={file.url}
+            download={file.name}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={text.download(file.name)}
+            title={text.download(file.name)}
+          >
+            <DownloadIcon />
+          </a>
+        )}
+        {removable && onRemove && (
+          <IconButton label={text.remove(file.name)} disabled={disabled} onClick={() => onRemove(file)}>
+            <XIcon />
+          </IconButton>
+        )}
+      </div>
+    </li>
+  );
+});