@eifi1/ui-kit 0.4.1 → 0.5.0

package/src/feedback/feedback-attachment.tsx

@@ -0,0 +1,246 @@
+import { cn } from "../lib/cn";
+import { useEffect, useRef, useState, type RefObject } from "react";
+import { Camera, FileText, Paperclip, X } from "lucide-react";
+import { Button } from "../components/ui";
+import { useKitFileLabels } from "../i18n/kit-labels";
+import type { FeedbackAttachmentLabels } from "./feedback-dialog";
+
+export const DEFAULT_ATTACHMENT_ACCEPT = ["image/png", "image/jpeg", "image/webp", "image/gif"];
+export const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
+
+/**
+ * Picking one picture: the file dialog, a capture of the app view, or a paste.
+ *
+ * Lifted out of {@link FeedbackDialog} so the *reply* half of the feature can
+ * have it too (Steering Design feedback #128). A report is a conversation — it
+ * is filed, it is answered, and the reporter sends it back saying that is not
+ * what they meant — and the screenshot showing what they mean is taken at
+ * whichever of those points they looked. Only the first of them had a way to
+ * attach one, so everything after it had to be described in words.
+ *
+ * **Three ways in, and they are three because no one of them covers the others.**
+ * The file dialog needs a file on disk; `onCaptureScreenshot` snapshots the
+ * *whole* app view; and the clipboard is where a region snip already is on every
+ * platform (Steering Design feedback #39). Somebody who wanted to show one panel
+ * had to save a crop and then find it again.
+ *
+ * `documentPaste` and `pasteFrom` decide where the paste is listened for, and
+ * it is a real choice rather than a flag with a default. A modal traps focus,
+ * so while it is up every paste in the page is meant for it — including one
+ * made with nothing in particular focused, which never reaches a React
+ * `onPaste` on a child: that is `documentPaste`. An editor **inline on a
+ * page** is not that: the page around it has its own fields, so it listens
+ * within its own subtree and a paste elsewhere stays where it was aimed. But
+ * "its own subtree" has to include the text box the paste is actually made in,
+ * and that box is this field's *sibling*, not its child — a paste in it bubbles
+ * to their common parent and never through here. `pasteFrom` is that parent
+ * (Steering Design feedback #140): the element whose subtree is listened to,
+ * handed in by whoever renders both the box and this field side by side.
+ */
+export function FeedbackAttachmentField({
+  value,
+  onChange,
+  labels,
+  accept = DEFAULT_ATTACHMENT_ACCEPT,
+  maxBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
+  onError,
+  onCaptureScreenshot,
+  documentPaste = false,
+  pasteFrom,
+  className,
+}: {
+  value: File | null;
+  onChange: (file: File | null) => void;
+  labels: FeedbackAttachmentLabels;
+  accept?: string[];
+  maxBytes?: number;
+  onError?: (kind: "type" | "size") => void;
+  /** Snapshot the app view behind this and return it as a File. A "Capture
+   *  screenshot" button appears only when it is given. */
+  onCaptureScreenshot?: () => Promise<File | null>;
+  /** Listen for the paste on `document` rather than on this field's own
+   *  subtree. For a modal, which owns the whole page while it is up. */
+  documentPaste?: boolean;
+  /** Listen for the paste within this element's subtree rather than this
+   *  field's own — for a field standing *beside* the text box a paste is made
+   *  in, whose common parent is where the event bubbles to. Ignored when
+   *  `documentPaste` is set. */
+  pasteFrom?: RefObject<HTMLElement | null>;
+  className?: string;
+}) {
+  const [preview, setPreview] = useState<string | null>(null);
+  const [capturing, setCapturing] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  // `file.size` from `<UiKitProvider labels>`, formatted in its locale — see FileDropzone.
+  const fileText = useKitFileLabels();
+
+  // Object-URL preview lifecycle (create on change, revoke on cleanup).
+  useEffect(() => {
+    if (!value) {
+      setPreview(null);
+      return;
+    }
+    const url = URL.createObjectURL(value);
+    setPreview(url);
+    return () => URL.revokeObjectURL(url);
+  }, [value]);
+
+  const pick = (file: File | undefined | null) => {
+    if (!file) return;
+    if (!accept.includes(file.type)) {
+      onError?.("type");
+      return;
+    }
+    if (file.size > maxBytes) {
+      onError?.("size");
+      return;
+    }
+    onChange(file);
+  };
+
+  // The paste handler is registered once rather than per render, so it reads
+  // `pick` — which closes over props that change identity on every render — out
+  // of a ref rather than out of its own dependency list.
+  const latest = useRef(pick);
+  useEffect(() => {
+    latest.current = pick;
+  });
+
+  const takeImage = (clipboard: DataTransfer | null, stop: () => void) => {
+    const items = Array.from(clipboard?.items ?? []);
+    const image = items.find((item) => item.kind === "file" && item.type.startsWith("image/"));
+    const file = image?.getAsFile();
+    if (!file) return;
+    // Only once there IS an image: a paste of text into a field must stay a
+    // paste of text, and a clipboard holding both is a copy whose text half is
+    // what the field was focused for.
+    stop();
+    // Clipboard images arrive named "image.png" at best and unnamed at worst,
+    // and the name is what the inbox shows beside the thumbnail. A name that
+    // says where it came from is more use than the browser's.
+    latest.current(new File([file], pastedName(file.type), { type: file.type }));
+  };
+
+  // The element listened on, where it is not this field's own subtree: the
+  // document for a modal, the given parent for an inline editor. Read inside
+  // the effect rather than in render, because a ref's `current` is only set
+  // once the parent has mounted — which it has by the time effects run.
+  useEffect(() => {
+    const target: EventTarget | null = documentPaste ? document : (pasteFrom?.current ?? null);
+    if (!target) return;
+    const onPaste = (event: Event) => {
+      const clipboard = (event as ClipboardEvent).clipboardData;
+      takeImage(clipboard, () => event.preventDefault());
+    };
+    target.addEventListener("paste", onPaste);
+    return () => target.removeEventListener("paste", onPaste);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- takeImage reads `latest`, which is a ref
+  }, [documentPaste, pasteFrom]);
+  const listensElsewhere = documentPaste || pasteFrom !== undefined;
+
+  return (
+    <div
+      // `relative` for the same reason as FileDropzone: the `sr-only` file input below
+      // is `position: absolute`, and without a positioned ancestor it is laid out
+      // against the initial containing block — extending the DOCUMENT height to its own
+      // offset and producing a phantom second scrollbar on any long page.
+      className={cn("relative", className)}
+      onPaste={
+        listensElsewhere
+          ? undefined
+          : (event) => takeImage(event.clipboardData, () => event.preventDefault())
+      }
+    >
+      {labels.attachment && (
+        <div className="mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]">
+          {labels.attachment}
+        </div>
+      )}
+      {value ? (
+        <div className="flex items-start gap-2">
+          {value.type.startsWith("image/") && preview ? (
+            <img
+              src={preview}
+              alt={value.name}
+              className="h-20 w-20 rounded border border-[var(--border)] object-cover"
+            />
+          ) : (
+            // Non-image attachments (PDF, text) can't preview as an <img>, so
+            // show a neutral file tile with the name/size beside it instead.
+            <div className="flex h-20 w-20 items-center justify-center rounded border border-[var(--border)] text-[var(--text-placeholder)]">
+              <FileText className="size-8" />
+            </div>
+          )}
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-sm text-[var(--text-secondary)]">{value.name}</div>
+            <div className="text-xs text-[var(--text-muted)]">
+              {fileText.size(value.size)}
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => onChange(null)}
+            aria-label={labels.attachmentRemove}
+            className="rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+      ) : (
+        <div className="space-y-1.5">
+          <div className="flex flex-wrap gap-2">
+            <Button type="button" variant="secondary" onClick={() => fileInputRef.current?.click()}>
+              <Paperclip className="size-4" /> {labels.attachmentAdd}
+            </Button>
+            {onCaptureScreenshot && (
+              <Button
+                type="button"
+                variant="secondary"
+                disabled={capturing}
+                onClick={() => {
+                  if (capturing) return;
+                  setCapturing(true);
+                  void onCaptureScreenshot()
+                    .then((file) => {
+                      if (file) pick(file);
+                    })
+                    .finally(() => setCapturing(false));
+                }}
+              >
+                <Camera className="size-4" />{" "}
+                {capturing ? "…" : (labels.attachmentCapture ?? "Capture screenshot")}
+              </Button>
+            )}
+          </div>
+          {/* Said out loud, because a gesture with no affordance is a gesture
+              nobody finds. */}
+          <p className="text-xs text-[var(--text-muted)]">
+            {labels.attachmentPaste ?? "…or paste a screenshot from the clipboard."}
+          </p>
+        </div>
+      )}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept.join(",")}
+        className="sr-only"
+        onChange={(e) => {
+          pick(e.target.files?.[0]);
+          e.target.value = "";
+        }}
+      />
+    </div>
+  );
+}
+
+/** What a pasted image is called once it is an attachment.
+ *
+ *  The extension is read off the mime type rather than assumed to be `.png`:
+ *  Safari puts TIFF on the clipboard and a file called `pasted.png` that is not
+ *  a PNG is one the receiving end opens wrong. */
+export function pastedName(type: string): string {
+  const subtype = type.split("/")[1] ?? "png";
+  // `image/svg+xml` and friends carry a suffix that is not part of the
+  // extension, and none of them are in the accepted list anyway.
+  return `pasted.${subtype.split("+")[0]}`;
+}

package/src/feedback/feedback-dialog.tsx

@@ -0,0 +1,209 @@
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Input, PHONE_QUERY, Select, Textarea } from "../components/ui";
+import { Modal } from "../components/modal";
+import { useMediaQuery } from "../hooks/use-media-query";
+import {
+  DEFAULT_ATTACHMENT_ACCEPT,
+  DEFAULT_MAX_ATTACHMENT_BYTES,
+  FeedbackAttachmentField,
+} from "./feedback-attachment";
+
+export interface FeedbackCategoryOption {
+  value: string;
+  label: string;
+}
+
+export interface FeedbackAttachmentLabels {
+  /** The heading over the field. Optional: a note editor puts the buttons
+   *  straight under its textarea, where a second heading is noise. */
+  attachment?: string;
+  attachmentAdd: string;
+  /** Label for the "capture screenshot" button. Optional — falls back to an English default. */
+  attachmentCapture?: string;
+  /** The line under the attachment buttons saying a screenshot can be pasted
+   *  straight in. Optional — falls back to an English default. */
+  attachmentPaste?: string;
+  attachmentRemove: string;
+}
+
+export interface FeedbackDialogLabels extends FeedbackAttachmentLabels {
+  title: string;
+  category: string;
+  subject: string;
+  body: string;
+  attachment: string;
+  submitHint: string;
+  cancel: string;
+  save: string;
+}
+
+export interface FeedbackSubmission {
+  title: string;
+  body: string;
+  category: string;
+  attachment: File | null;
+}
+
+/**
+ * The generic feedback form dialog: category + subject + body + an optional image
+ * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the
+ * category options, labels and an `onSubmit` that talks to its own backend, plus
+ * an optional `contextSlot` for app-specific context (user, current URL, …).
+ *
+ * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog
+ * takes an image off the clipboard and makes it the attachment, through the same
+ * validation and the same preview as the file picker. It is the gesture the two
+ * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,
+ * and the file picker needs a file — so somebody who wanted to show one panel,
+ * or one region of one, had to save a crop to disk first and then find it again
+ * (Steering Design feedback #39). The clipboard is where a region snip already
+ * is on every platform.
+ */
+export function FeedbackDialog({
+  open,
+  onClose,
+  categories,
+  category,
+  onCategoryChange,
+  labels,
+  onSubmit,
+  submitting = false,
+  contextSlot,
+  attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,
+  maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
+  onAttachmentError,
+  onCaptureScreenshot,
+}: {
+  open: boolean;
+  onClose: () => void;
+  categories: FeedbackCategoryOption[];
+  category: string;
+  onCategoryChange: (value: string) => void;
+  labels: FeedbackDialogLabels;
+  onSubmit: (data: FeedbackSubmission) => void | Promise<void>;
+  submitting?: boolean;
+  contextSlot?: ReactNode;
+  attachmentAccept?: string[];
+  maxAttachmentBytes?: number;
+  onAttachmentError?: (kind: "type" | "size") => void;
+  /**
+   * Optional: capture a screenshot of the underlying app view and return it as a
+   * File. When provided, a "Capture screenshot" button is shown next to "Add
+   * attachment"; the returned file is fed through the same validation + preview.
+   */
+  onCaptureScreenshot?: () => Promise<File | null>;
+}) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [attachment, setAttachment] = useState<File | null>(null);
+  const isMobile = useMediaQuery(PHONE_QUERY, false);
+
+  // Reset the form whenever the dialog is (re)opened.
+  useEffect(() => {
+    if (open) {
+      setTitle("");
+      setBody("");
+      setAttachment(null);
+    }
+  }, [open]);
+
+  const canSubmit = !!title && !!body && !submitting;
+  const trySubmit = () => {
+    if (canSubmit) void onSubmit({ title, body, category, attachment });
+  };
+
+  if (!open) return null;
+
+  const categoryField = (
+    <Select label={labels.category} value={category} onChange={(e) => onCategoryChange(e.target.value)}>
+      {categories.map((c) => (
+        <option key={c.value} value={c.value}>
+          {c.label}
+        </option>
+      ))}
+    </Select>
+  );
+  // On a phone the subject leads as a heading rather than as the second of two
+  // identical boxes under a select (Keksdose feedback #179). `variant="display"`
+  // is a no-op above the phone breakpoint, so the desktop dialog is unchanged.
+  const subjectField = (
+    <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant="display" />
+  );
+  const bodyField = (
+    <Textarea rows={5} label={labels.body} value={body} onChange={(e) => setBody(e.target.value)} />
+  );
+  const attachmentField = (
+    <FeedbackAttachmentField
+      value={attachment}
+      onChange={setAttachment}
+      labels={labels}
+      accept={attachmentAccept}
+      maxBytes={maxAttachmentBytes}
+      onError={onAttachmentError}
+      onCaptureScreenshot={onCaptureScreenshot}
+      // On `document`, not on the panel: the Modal focuses its own panel on open
+      // and traps Tab inside it, so while this dialog is up every paste in the
+      // page is meant for it — including the one made with nothing in
+      // particular focused, which never reaches a React `onPaste` on a child.
+      documentPaste={open}
+    />
+  );
+
+  return (
+    <Modal
+      onClose={onClose}
+      // The one dialog whose subject is the page behind it (Keksdose dev#460: "Make
+      // the feedback dialog draggable so I can see behind it if it blocks
+      // something") — you are describing what is under it while you type.
+      draggable
+      onKeyDown={(e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+          e.preventDefault();
+          trySubmit();
+        }
+      }}
+    >
+      {/* Also the drag handle: pressing anywhere on the panel's own chrome moves it,
+          and the heading is the strip a user reaches for. */}
+      <h2 className="mb-3 text-lg font-semibold">{labels.title}</h2>
+      <div className="space-y-3">
+        {isMobile ? (
+          // Phone shape, the same reasoning as the transaction editor's (#177):
+          // the desktop order is the DATA MODEL's order — category, then subject,
+          // then body — but nobody opens this dialog to pick a category. What they
+          // came to do is say the thing, so that leads; the classification and the
+          // evidence follow, a tier down.
+          <>
+            {subjectField}
+            {bodyField}
+            <div className="space-y-3 border-t border-[var(--border)] pt-3">
+              {categoryField}
+              {attachmentField}
+              {contextSlot}
+            </div>
+          </>
+        ) : (
+          <>
+            {categoryField}
+            {subjectField}
+            {bodyField}
+            {attachmentField}
+            {contextSlot}
+          </>
+        )}
+        <div className="flex items-center justify-between gap-2">
+          <div className="text-xs text-[var(--text-placeholder)]">{labels.submitHint}</div>
+          <div className="flex gap-2">
+            <Button variant="ghost" onClick={onClose}>
+              {labels.cancel}
+            </Button>
+            <Button onClick={trySubmit} disabled={!canSubmit}>
+              {labels.save}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}