makersclaw 0.2.0 → 0.3.0

package/registry/blocks/file-upload/file-upload.jsx

@@ -0,0 +1,635 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Avatar, Button, FileDrop, FileInput, IconButton, Image, Item, ItemGroup, Kicker, Notice, Progress, Spinner, cx } from "../../ui";
+
+// FileUpload — files chosen or dropped, each one uploaded through the
+// caller's `onUpload(file, { onProgress, signal })`, shown with its bar,
+// a retry when it fails, a cancel while it runs and a remove once done.
+// The picker is the kit's (FileDrop, or FileInput with picker="button");
+// the upload itself is the caller's: storage is the app's, not the block's.
+
+/* ------------------------------------------------------------------------
+   Helpers
+   ------------------------------------------------------------------------ */
+
+const EXT_TYPES = {
+  png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", svg: "image/svg+xml", avif: "image/avif",
+  csv: "text/csv", xls: "application/vnd.ms-excel", xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  pdf: "application/pdf", doc: "application/msword", docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  txt: "text/plain", md: "text/markdown", zip: "application/zip", mp4: "video/mp4", mov: "video/quicktime", mp3: "audio/mpeg",
+};
+
+/** The glyph for a file, from its type (or, failing that, its extension). */
+export function fileIcon(type, name) {
+  const t = type || EXT_TYPES[String(name ?? "").split(".").pop()?.toLowerCase()] || "";
+  if (t.startsWith("image/")) return "image";
+  if (t.startsWith("video/") || t.startsWith("audio/")) return "play";
+  if (/zip|tar|gzip|compressed|rar|7z/.test(t)) return "archive";
+  if (/csv|excel|spreadsheet/.test(t)) return "grid";
+  return "file";
+}
+
+function isImage(type, name) {
+  return fileIcon(type, name) === "image";
+}
+
+/** 3_250_000 → "3.1 MB"; 900 → "900 B". */
+export function formatSize(bytes) {
+  const n = Number(bytes);
+  if (!Number.isFinite(n) || n < 0) return "";
+  if (n < 1024) return `${n} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let v = n / 1024;
+  let i = 0;
+  for (; v >= 1024 && i < units.length - 1; i++) v /= 1024;
+  return `${v < 10 ? v.toFixed(1).replace(/\.0$/, "") : Math.round(v)} ${units[i]}`;
+}
+
+/** "image/*,.pdf" + 10 MB → "Images, PDF · up to 10 MB". */
+function acceptHint(accept, maxSize) {
+  const parts = [];
+  if (accept) {
+    const kinds = accept
+      .split(",")
+      .map((a) => a.trim())
+      .filter(Boolean)
+      .map((a) => (a.endsWith("/*") ? `${a.slice(0, -2)}s` : a.startsWith(".") ? a.slice(1).toUpperCase() : a.split("/").pop().replace(/\+.*$/, "").toUpperCase()))
+      .map((k) => k.charAt(0).toUpperCase() + k.slice(1));
+    parts.push([...new Set(kinds)].join(", "));
+  }
+  if (maxSize) parts.push(`up to ${formatSize(maxSize)}`);
+  return parts.join(" · ") || undefined;
+}
+
+const clamp = (n) => Math.min(100, Math.max(0, Math.round(Number(n) || 0)));
+
+// What the caller hears about a file: never the File, never our state.
+function publicFile(item) {
+  const { id, name, size, type, url, meta } = item;
+  return { ...(meta ?? {}), id, name, size, type, url };
+}
+
+/* ------------------------------------------------------------------------
+   The upload queue
+   ------------------------------------------------------------------------ */
+
+function useUploads({ defaultFiles, onUpload, onRemove, onChange, autoUpload, thumbs }) {
+  // A default entry with a `file` (a File handed over from a paste or a
+  // drop elsewhere on the page) starts uploading on mount; the rest are
+  // files already uploaded.
+  const [items, setItems] = useState(() =>
+    (defaultFiles ?? []).map((f, i) =>
+      f.file
+        ? { id: f.id ?? `file-${i}`, name: f.file.name, size: f.file.size, type: f.file.type, file: f.file, status: autoUpload ? "uploading" : "queued", progress: null }
+        : { id: f.id ?? `file-${i}`, name: f.name, size: f.size, type: f.type, url: f.url, status: "done", progress: 100 },
+    ),
+  );
+  const seq = useRef(0);
+  const controllers = useRef(new Map());
+  const previews = useRef(new Set());
+  const first = useRef(true);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+
+  // Abort what still runs and free the previews when the block leaves.
+  useEffect(() => {
+    const ctl = controllers.current;
+    const urls = previews.current;
+    // Cleared too, so a remount (React's dev double effect) starts afresh.
+    return () => {
+      for (const c of ctl.values()) c.abort();
+      for (const u of urls) URL.revokeObjectURL(u);
+      ctl.clear();
+      urls.clear();
+    };
+  }, []);
+
+  // onChange hears the uploaded list when it changes — not every tick of
+  // a bar.
+  const doneSig = items
+    .filter((i) => i.status === "done")
+    .map((i) => `${i.id}\u0000${i.url ?? ""}`)
+    .join("\u0001");
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    onChange?.(itemsRef.current.filter((i) => i.status === "done").map(publicFile));
+    // onChange is the caller's; the uploaded list is what changed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [doneSig]);
+
+  const patch = (id, next) => setItems((all) => all.map((i) => (i.id === id ? { ...i, ...next } : i)));
+
+  // Handed-over files: their previews, then their uploads.
+  useEffect(() => {
+    for (const it of itemsRef.current) {
+      if (!it.file) continue;
+      if (thumbs && !it.preview && isImage(it.type, it.name) && URL.createObjectURL) {
+        const preview = URL.createObjectURL(it.file);
+        previews.current.add(preview);
+        patch(it.id, { preview });
+      }
+      if (it.status === "uploading" && !controllers.current.has(it.id)) start(it);
+    }
+    // Mount only: later files arrive through add().
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function forget(item) {
+    controllers.current.get(item.id)?.abort();
+    controllers.current.delete(item.id);
+    if (item.preview) {
+      URL.revokeObjectURL(item.preview);
+      previews.current.delete(item.preview);
+    }
+  }
+
+  async function start(item) {
+    if (!item.file) return;
+    if (!onUpload) {
+      // No uploader: the block is only a picker; the file counts as added.
+      patch(item.id, { status: "done", progress: 100, url: item.preview });
+      return;
+    }
+    controllers.current.get(item.id)?.abort();
+    const ctl = new AbortController();
+    controllers.current.set(item.id, ctl);
+    patch(item.id, { status: "uploading", progress: null, error: null });
+    let res;
+    try {
+      res = await onUpload(item.file, {
+        signal: ctl.signal,
+        onProgress: (p) => {
+          if (!ctl.signal.aborted) patch(item.id, { progress: clamp(p) });
+        },
+      });
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    if (ctl.signal.aborted) return;
+    controllers.current.delete(item.id);
+    if (res?.ok) {
+      const { ok, error, url, ...meta } = res;
+      patch(item.id, { status: "done", progress: 100, url: url ?? item.url, meta });
+    } else {
+      patch(item.id, { status: "failed", error: res?.error || "The upload failed." });
+    }
+  }
+
+  function add(files, { replace = false } = {}) {
+    const fresh = files.map((file) => {
+      seq.current += 1;
+      let preview;
+      if (thumbs && isImage(file.type, file.name) && typeof URL !== "undefined" && URL.createObjectURL) {
+        preview = URL.createObjectURL(file);
+        previews.current.add(preview);
+      }
+      return {
+        id: `upload-${seq.current}`,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        file,
+        preview,
+        status: autoUpload ? "uploading" : "queued",
+        progress: null,
+      };
+    });
+    if (replace) for (const old of itemsRef.current) forget(old);
+    setItems((all) => (replace ? fresh : [...all, ...fresh]));
+    if (autoUpload) for (const it of fresh) start(it);
+  }
+
+  function cancel(item) {
+    forget(item);
+    setItems((all) => all.filter((i) => i.id !== item.id));
+  }
+
+  async function remove(item) {
+    if (item.status !== "done" || !onRemove) return cancel(item);
+    patch(item.id, { removing: true, error: null });
+    let res;
+    try {
+      res = await onRemove(publicFile(item));
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    if (res?.ok) cancel(item);
+    else patch(item.id, { removing: false, error: res?.error || "It could not be removed." });
+  }
+
+  function uploadQueued() {
+    for (const it of itemsRef.current) if (it.status === "queued") start(it);
+  }
+
+  function clear() {
+    for (const it of itemsRef.current) if (it.status === "queued") forget(it);
+    setItems((all) => all.filter((i) => i.status !== "queued"));
+  }
+
+  return { items, add, start, cancel, remove, uploadQueued, clear };
+}
+
+/* ------------------------------------------------------------------------
+   One file's row
+   ------------------------------------------------------------------------ */
+
+function statusText(item) {
+  const size = formatSize(item.size);
+  const word = {
+    queued: "Ready to upload",
+    uploading: "Uploading…",
+    done: "Uploaded",
+    failed: "Not uploaded",
+  }[item.status];
+  return [size, word].filter(Boolean).join(" · ");
+}
+
+function FileRow({ item, look, thumb, onRetry, onCancel, onRemove, disabled }) {
+  const failed = item.status === "failed";
+  const running = item.status === "uploading";
+  const src = item.preview ?? (isImage(item.type, item.name) ? item.url : undefined);
+  const media =
+    thumb && src && !failed ? (
+      <Image src={src} alt="" ratio="photo" className="w-16 shrink-0" />
+    ) : undefined;
+
+  const actions = (
+    <>
+      {failed && item.file ? (
+        <IconButton icon="refresh" label={`Retry ${item.name}`} size="sm" onClick={() => onRetry(item)} disabled={disabled} />
+      ) : null}
+      {running ? (
+        <IconButton icon="x" label={`Cancel ${item.name}`} size="sm" onClick={() => onCancel(item)} />
+      ) : (
+        <IconButton
+          icon={item.status === "done" ? "trash" : "x"}
+          label={`Remove ${item.name}`}
+          size="sm"
+          loading={item.removing}
+          onClick={() => onRemove(item)}
+          disabled={disabled}
+        />
+      )}
+    </>
+  );
+
+  return (
+    <Item
+      variant={look}
+      icon={media ? undefined : failed ? "warning" : fileIcon(item.type, item.name)}
+      media={media}
+      title={item.name}
+      description={statusText(item)}
+      actions={actions}
+      aria-busy={running || undefined}
+    >
+      {running ? (
+        <div className="flex items-center gap-3">
+          <Progress value={item.progress ?? undefined} aria-label={`Uploading ${item.name}`} className="min-w-0 flex-1" />
+          <span data-nums className="w-9 shrink-0 text-right text-xs text-muted-foreground">
+            {item.progress == null ? "" : `${item.progress}%`}
+          </span>
+        </div>
+      ) : null}
+      {item.error ? (
+        <p role="alert" className="text-xs text-destructive">
+          {item.error}
+        </p>
+      ) : null}
+    </Item>
+  );
+}
+
+/* ------------------------------------------------------------------------
+   The picture of one person or thing (variant="avatar")
+   ------------------------------------------------------------------------ */
+
+function AvatarUpload({ value, name, onUpload, onRemove, onChange, accept, maxSize, label, hint, uploadLabel, disabled, className }) {
+  const [src, setSrc] = useState(value ?? null);
+  const [state, setState] = useState({ busy: false, progress: null, error: null, removing: false });
+  const last = useRef(null);
+  const ctl = useRef(null);
+  const blob = useRef(null);
+
+  useEffect(
+    () => () => {
+      ctl.current?.abort();
+      if (blob.current) URL.revokeObjectURL(blob.current);
+    },
+    [],
+  );
+
+  function show(next) {
+    if (blob.current && blob.current !== next) {
+      URL.revokeObjectURL(blob.current);
+      blob.current = null;
+    }
+    setSrc(next);
+    onChange?.(next);
+  }
+
+  async function upload(file) {
+    if (maxSize && file.size > maxSize) {
+      setState({ busy: false, progress: null, error: `${file.name} is over ${formatSize(maxSize)}.`, removing: false });
+      return;
+    }
+    if (!onUpload) return;
+    last.current = file;
+    ctl.current?.abort();
+    const c = new AbortController();
+    ctl.current = c;
+    setState({ busy: true, progress: null, error: null, removing: false });
+    let res;
+    try {
+      res = await onUpload(file, {
+        signal: c.signal,
+        onProgress: (p) => {
+          if (!c.signal.aborted) setState((s) => ({ ...s, progress: clamp(p) }));
+        },
+      });
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    if (c.signal.aborted) return;
+    if (res?.ok) {
+      let url = res.url;
+      if (!url && typeof URL !== "undefined" && URL.createObjectURL) {
+        url = URL.createObjectURL(file);
+        blob.current = url;
+      }
+      show(url ?? null);
+      setState({ busy: false, progress: null, error: null, removing: false });
+    } else {
+      setState({ busy: false, progress: null, error: res?.error || "The picture was not uploaded.", removing: false });
+    }
+  }
+
+  async function remove() {
+    setState((s) => ({ ...s, removing: true, error: null }));
+    let res = { ok: true };
+    if (onRemove) {
+      try {
+        res = await onRemove();
+      } catch (e) {
+        res = { ok: false, error: e?.message };
+      }
+    }
+    if (res?.ok) {
+      show(null);
+      setState({ busy: false, progress: null, error: null, removing: false });
+    } else setState((s) => ({ ...s, removing: false, error: res?.error || "The picture was not removed." }));
+  }
+
+  return (
+    <div className={cx("grid gap-3", className)} aria-busy={state.busy || undefined}>
+      <div className="flex flex-wrap items-center gap-4">
+        <Avatar name={name} src={src ?? undefined} size="lg" label={name ? `${name}'s picture` : "Picture"} />
+        <div className="grid min-w-0 flex-1 gap-0.5">
+          <p className="text-sm font-medium text-foreground">{label}</p>
+          {hint ?? acceptHint(accept, maxSize) ? <p className="text-xs text-muted-foreground">{hint ?? acceptHint(accept, maxSize)}</p> : null}
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <FileInput
+            accept={accept}
+            onFiles={(files) => upload(files[0])}
+            onReject={(files) => setState((s) => ({ ...s, error: `${files[0]?.name ?? "That file"} is not a picture this accepts.` }))}
+            disabled={disabled || state.removing}
+            loading={state.busy}
+            variant="secondary"
+            size="sm"
+          >
+            {uploadLabel}
+          </FileInput>
+          {src ? (
+            <Button variant="danger" size="sm" icon="trash" onClick={remove} loading={state.removing} disabled={disabled || state.busy}>
+              Remove
+            </Button>
+          ) : null}
+        </div>
+      </div>
+      {state.busy ? <Progress value={state.progress ?? undefined} aria-label="Uploading the picture" /> : null}
+      {state.error ? (
+        <Notice
+          tone="danger"
+          action={
+            last.current && !state.busy ? (
+              <Button size="sm" variant="secondary" icon="refresh" onClick={() => upload(last.current)}>
+                Retry
+              </Button>
+            ) : null
+          }
+          onDismiss={() => setState((s) => ({ ...s, error: null }))}
+        >
+          {state.error}
+        </Notice>
+      ) : null}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------------
+   FileUpload
+   ------------------------------------------------------------------------ */
+
+const LOOK = { list: "outline", single: "muted", sections: "plain", preview: "outline" };
+
+export function FileUpload({
+  onUpload,
+  onRemove,
+  onChange,
+  variant = "list",
+  defaultFiles,
+  accept,
+  multiple,
+  maxSize,
+  maxFiles,
+  autoUpload = true,
+  picker = "drop",
+  label,
+  hint,
+  buttonLabel = "Add files",
+  uploadLabel,
+  columns = 1,
+  disabled = false,
+  value,
+  name,
+  className,
+  "aria-label": ariaLabel,
+}) {
+  if (variant === "avatar") {
+    return (
+      <AvatarUpload
+        value={value}
+        name={name}
+        onUpload={onUpload}
+        onRemove={onRemove}
+        onChange={onChange}
+        accept={accept ?? "image/png,image/jpeg,image/webp"}
+        maxSize={maxSize}
+        label={label ?? "Profile picture"}
+        hint={hint}
+        uploadLabel={uploadLabel ?? "Upload picture"}
+        disabled={disabled}
+        className={className}
+      />
+    );
+  }
+  return (
+    <FileList
+      {...{ onUpload, onRemove, onChange, variant, defaultFiles, accept, maxSize, maxFiles, autoUpload, picker, hint, buttonLabel, columns, disabled, className, ariaLabel }}
+      multiple={variant === "single" ? false : multiple ?? true}
+      label={label ?? (variant === "single" ? "Drop a file here or browse" : "Drop files here or browse")}
+      uploadLabel={uploadLabel}
+    />
+  );
+}
+
+function FileList({
+  onUpload,
+  onRemove,
+  onChange,
+  variant,
+  defaultFiles,
+  accept,
+  multiple,
+  maxSize,
+  maxFiles,
+  autoUpload,
+  picker,
+  label,
+  hint,
+  buttonLabel,
+  uploadLabel,
+  columns,
+  disabled,
+  className,
+  ariaLabel,
+}) {
+  const single = variant === "single";
+  const thumbs = variant === "preview";
+  const q = useUploads({ defaultFiles, onUpload, onRemove, onChange, autoUpload, thumbs });
+  const [rejected, setRejected] = useState([]);
+  const look = LOOK[variant] ?? LOOK.list;
+  const full = !single && maxFiles && q.items.length >= maxFiles;
+
+  function take(files) {
+    const no = [];
+    let ok = files.filter((f) => {
+      if (maxSize && f.size > maxSize) {
+        no.push({ name: f.name, reason: `over ${formatSize(maxSize)}` });
+        return false;
+      }
+      return true;
+    });
+    if (!single && maxFiles) {
+      const room = Math.max(0, maxFiles - q.items.length);
+      for (const f of ok.slice(room)) no.push({ name: f.name, reason: `only ${maxFiles} ${maxFiles === 1 ? "file" : "files"} in all` });
+      ok = ok.slice(0, room);
+    }
+    setRejected(no);
+    if (ok.length) q.add(ok, { replace: single });
+  }
+
+  function refuse(files) {
+    setRejected(files.map((f) => ({ name: f.name, reason: "not a type this accepts" })));
+  }
+
+  const shownHint = hint ?? acceptHint(accept, maxSize);
+  const door =
+    picker === "button" ? (
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+        <FileInput accept={accept} multiple={multiple} onFiles={take} onReject={refuse} disabled={disabled || full} size="sm">
+          {buttonLabel}
+        </FileInput>
+        {shownHint ? <span className="text-xs text-muted-foreground">{shownHint}</span> : null}
+      </div>
+    ) : (
+      <FileDrop
+        accept={accept}
+        multiple={multiple}
+        onFiles={take}
+        onReject={refuse}
+        disabled={disabled || full}
+        label={full ? `That is ${maxFiles} — remove one to add another` : label}
+        hint={shownHint}
+        size={variant === "sections" ? "sm" : "md"}
+        invalid={rejected.length > 0}
+        aria-label={ariaLabel}
+      />
+    );
+
+  const row = (item) => (
+    <FileRow key={item.id} item={item} look={look} thumb={thumbs} onRetry={q.start} onCancel={q.cancel} onRemove={q.remove} disabled={disabled} />
+  );
+
+  const queued = q.items.filter((i) => i.status === "queued");
+  const running = q.items.filter((i) => i.status === "uploading" || i.status === "failed");
+  const done = q.items.filter((i) => i.status === "done");
+
+  let list = null;
+  if (q.items.length && variant === "sections") {
+    list = (
+      <div className="grid gap-4">
+        {[
+          { key: "queued", label: "Ready", rows: queued },
+          { key: "running", label: "Uploading", rows: running, busy: running.some((i) => i.status === "uploading") },
+          { key: "done", label: "Finished", rows: done },
+        ]
+          .filter((s) => s.rows.length)
+          .map((s) => (
+            <section key={s.key} aria-label={s.label} className="grid gap-1">
+              <div className="flex items-center gap-2">
+                {s.busy ? <Spinner size="sm" label={null} className="text-muted-foreground" /> : null}
+                <Kicker>
+                  {s.label} · {s.rows.length}
+                </Kicker>
+              </div>
+              <ItemGroup aria-label={s.label}>{s.rows.map(row)}</ItemGroup>
+            </section>
+          ))}
+      </div>
+    );
+  } else if (q.items.length) {
+    list = (
+      <ul role="list" aria-label="Files" className={cx("grid gap-2", columns === 2 && "sm:grid-cols-2")}>
+        {q.items.map((item) => (
+          <li key={item.id} className="min-w-0">
+            {row(item)}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <div className={cx("grid min-w-0 gap-3", className)}>
+      {door}
+      {rejected.length ? (
+        <Notice tone="danger" title={rejected.length === 1 ? "One file was not added" : `${rejected.length} files were not added`} onDismiss={() => setRejected([])}>
+          <ul className="grid gap-0.5">
+            {rejected.map((r, i) => (
+              <li key={i} className="break-all">
+                {r.name} — {r.reason}
+              </li>
+            ))}
+          </ul>
+        </Notice>
+      ) : null}
+      {list}
+      {!autoUpload && queued.length ? (
+        <div className="flex flex-wrap justify-end gap-2">
+          <Button variant="quiet" size="sm" onClick={q.clear}>
+            Clear
+          </Button>
+          <Button variant="primary" size="sm" icon="upload" onClick={q.uploadQueued} disabled={disabled}>
+            {uploadLabel ?? `Upload ${queued.length} ${queued.length === 1 ? "file" : "files"}`}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/registry/blocks/file-upload/index.js

@@ -0,0 +1,4 @@
+// The FileUpload block — `makersclaw add file-upload`. Fixed: compose it
+// through its props (README.md beside this file); an upload it cannot be
+// is your own component in components/, built on the kit's FileInput.
+export { FileUpload, formatSize, fileIcon } from "./file-upload";