@beyondwork/docx-react-component 1.0.0

package/services/react-word-editor/components/reduced-motion-toggle.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+const REDUCED_MOTION_STORAGE_KEY = "docx-react-review-workspace-reduced-motion";
+
+function applyReducedMotionPreference(enabled: boolean): void {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  document.documentElement.dataset.reducedMotion = enabled ? "true" : "false";
+}
+
+function readStoredReducedMotionPreference(): boolean | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const storedValue = window.localStorage.getItem(REDUCED_MOTION_STORAGE_KEY);
+  if (storedValue === null) {
+    return null;
+  }
+
+  return storedValue === "true";
+}
+
+export function ReducedMotionToggle() {
+  const [reducedMotion, setReducedMotion] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const syncPreference = () => {
+      const storedPreference = readStoredReducedMotionPreference();
+      const nextValue =
+        typeof storedPreference === "boolean"
+          ? storedPreference
+          : mediaQuery.matches;
+      setReducedMotion(nextValue);
+      applyReducedMotionPreference(nextValue);
+    };
+
+    syncPreference();
+    mediaQuery.addEventListener?.("change", syncPreference);
+
+    return () => {
+      mediaQuery.removeEventListener?.("change", syncPreference);
+    };
+  }, []);
+
+  return (
+    <button
+      aria-pressed={reducedMotion}
+      className={`inline-flex h-6 items-center rounded-md px-2 text-xs transition-colors ${
+        reducedMotion
+          ? "bg-accent-soft text-accent"
+          : "text-tertiary hover:bg-surface-hover hover:text-primary"
+      }`}
+      onClick={() => {
+        const nextValue = !reducedMotion;
+        if (typeof window !== "undefined") {
+          window.localStorage.setItem(
+            REDUCED_MOTION_STORAGE_KEY,
+            String(nextValue),
+          );
+        }
+        setReducedMotion(nextValue);
+        applyReducedMotionPreference(nextValue);
+      }}
+      type="button"
+    >
+      Reduced motion
+    </button>
+  );
+}

package/services/react-word-editor/components/workspace-certification-panel.tsx

@@ -0,0 +1,307 @@
+"use client";
+
+import Link from "next/link";
+import { startTransition, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import type {
+  CertificationDashboardCandidate,
+  CertificationDashboardModel,
+} from "../lib/certification-store";
+import { buildWorkspaceHref, type WorkspaceRouteKind } from "../lib/workspace-navigation";
+
+type WorkspaceCertificationPanelProps = {
+  model: CertificationDashboardModel;
+  selectedTarget?: CertificationDashboardCandidate;
+  routeKind: WorkspaceRouteKind;
+  sessionId: string;
+  saved?: string;
+};
+
+type SubmissionState = {
+  surface?: "word-desktop" | "word-web";
+  status: "idle" | "saving" | "error";
+  message?: string;
+};
+
+export function WorkspaceCertificationPanel({
+  model,
+  selectedTarget,
+  routeKind,
+  sessionId,
+  saved,
+}: WorkspaceCertificationPanelProps) {
+  const router = useRouter();
+  const [submission, setSubmission] = useState<SubmissionState>({ status: "idle" });
+  const targets = [...model.validationCandidates, ...model.exportCandidates].slice(0, 14);
+
+  async function submitSurface(
+    formData: FormData,
+    surface: "word-desktop" | "word-web",
+  ): Promise<void> {
+    setSubmission({
+      surface,
+      status: "saving",
+    });
+
+    try {
+      const response = await fetch("/api/certification", {
+        body: JSON.stringify({
+          notes: formData.get("notes"),
+          observedAt: formData.get("observedAt"),
+          operator: formData.get("operator"),
+          outcome: formData.get("outcome"),
+          summary: formData.get("summary"),
+          surface,
+          targetId: formData.get("targetId"),
+          targetType: formData.get("targetType"),
+        }),
+        headers: {
+          "content-type": "application/json",
+        },
+        method: "POST",
+      });
+
+      if (!response.ok) {
+        const payload = (await response.json()) as {
+          detail?: string;
+        };
+        throw new Error(payload.detail || "Manual certification capture failed.");
+      }
+
+      const payload = (await response.json()) as {
+        certification: {
+          certificationId: string;
+          targetId: string;
+          targetType: string;
+        };
+      };
+
+      startTransition(() => {
+        router.replace(
+          buildWorkspaceHref({
+            routeKind,
+            sessionId,
+            panel: "certification",
+            saved: payload.certification.certificationId,
+            targetId: payload.certification.targetId,
+            targetType: payload.certification.targetType,
+          }),
+        );
+        router.refresh();
+      });
+
+      setSubmission({ status: "idle" });
+    } catch (error) {
+      setSubmission({
+        surface,
+        status: "error",
+        message: error instanceof Error ? error.message : "Manual certification capture failed.",
+      });
+    }
+  }
+
+  if (!selectedTarget) {
+    return (
+      <div className="p-3 text-sm text-secondary">
+        No certification target is available yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 p-3">
+      <div>
+        <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-tertiary">
+          Certification
+        </p>
+        <p className="mt-1 text-sm font-medium text-primary">{selectedTarget.fileName}</p>
+        <p className="mt-1 text-xs leading-5 text-secondary">
+          {selectedTarget.sourceLabel || "Source label not resolved"} · {selectedTarget.detail}
+        </p>
+        {saved ? (
+          <p className="mt-2 text-xs font-medium text-insert">
+            Saved certification note {saved.slice(0, 8)}.
+          </p>
+        ) : null}
+      </div>
+
+      <div className="space-y-1">
+        {targets.map((target) => {
+          const active =
+            target.targetId === selectedTarget.targetId &&
+            target.targetType === selectedTarget.targetType;
+
+          return (
+            <Link
+              className={`block rounded-lg p-2.5 ${
+                active
+                  ? "bg-accent-soft"
+                  : "transition-colors hover:bg-surface"
+              }`}
+              href={buildWorkspaceHref({
+                routeKind,
+                sessionId,
+                panel: "certification",
+                targetId: target.targetId,
+                targetType: target.targetType,
+              })}
+              key={`${target.targetType}:${target.targetId}`}
+            >
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-secondary bg-subtle">
+                  {target.targetType === "validation-run" ? "run" : "export"}
+                </span>
+                <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-secondary bg-subtle">
+                  {target.kindLabel}
+                </span>
+              </div>
+              <p className="mt-2 text-sm font-medium text-primary">
+                {target.fileName}
+              </p>
+            </Link>
+          );
+        })}
+      </div>
+
+      <CertificationSurfaceForm
+        description={selectedTarget.desktop.summary || "Record the current Word Desktop result."}
+        errorMessage={
+          submission.status === "error" && submission.surface === "word-desktop"
+            ? submission.message
+            : undefined
+        }
+        label="Word Desktop"
+        onSubmit={submitSurface}
+        saving={submission.status === "saving" && submission.surface === "word-desktop"}
+        selectedTarget={selectedTarget}
+        surface="word-desktop"
+      />
+
+      <CertificationSurfaceForm
+        description={selectedTarget.web.summary || "Record the current Word Web result."}
+        errorMessage={
+          submission.status === "error" && submission.surface === "word-web"
+            ? submission.message
+            : undefined
+        }
+        label="Word Web"
+        onSubmit={submitSurface}
+        saving={submission.status === "saving" && submission.surface === "word-web"}
+        selectedTarget={selectedTarget}
+        surface="word-web"
+      />
+    </div>
+  );
+}
+
+function CertificationSurfaceForm(props: {
+  label: string;
+  surface: "word-desktop" | "word-web";
+  selectedTarget: CertificationDashboardCandidate;
+  description: string;
+  saving: boolean;
+  errorMessage?: string;
+  onSubmit: (
+    formData: FormData,
+    surface: "word-desktop" | "word-web",
+  ) => Promise<void>;
+}) {
+  const observedAtDefault = new Date().toISOString().slice(0, 16);
+
+  return (
+    <form
+      className="space-y-3 rounded-lg bg-surface p-3 ring-1 ring-border"
+      onSubmit={(event) => {
+        event.preventDefault();
+        void props.onSubmit(new FormData(event.currentTarget), props.surface);
+      }}
+    >
+      <div>
+        <p className="text-sm font-medium text-primary">{props.label}</p>
+        <p className="mt-1 text-xs leading-5 text-secondary">
+          {props.description}
+        </p>
+      </div>
+
+      <input name="targetId" type="hidden" value={props.selectedTarget.targetId} />
+      <input name="targetType" type="hidden" value={props.selectedTarget.targetType} />
+
+      <label className="block space-y-1">
+        <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-tertiary">
+          Operator
+        </span>
+        <input
+          className="w-full rounded-md bg-canvas px-3 py-2 text-sm text-primary ring-1 ring-border"
+          name="operator"
+          placeholder="Your name"
+          required
+          type="text"
+        />
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-tertiary">
+          Outcome
+        </span>
+        <select
+          className="w-full rounded-md bg-canvas px-3 py-2 text-sm text-primary ring-1 ring-border"
+          defaultValue="passed"
+          name="outcome"
+        >
+          <option value="passed">reviewed and passed</option>
+          <option value="issues-found">issues found</option>
+          <option value="not-reviewed">not yet reviewed</option>
+        </select>
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-tertiary">
+          Summary
+        </span>
+        <input
+          className="w-full rounded-md bg-canvas px-3 py-2 text-sm text-primary ring-1 ring-border"
+          name="summary"
+          placeholder="Concise evidence summary"
+          required
+          type="text"
+        />
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-tertiary">
+          Notes
+        </span>
+        <textarea
+          className="min-h-24 w-full rounded-md bg-canvas px-3 py-2 text-sm text-primary ring-1 ring-border"
+          name="notes"
+          placeholder="Optional supporting notes"
+        />
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-tertiary">
+          Observed At
+        </span>
+        <input
+          className="w-full rounded-md bg-canvas px-3 py-2 text-sm text-primary ring-1 ring-border"
+          defaultValue={observedAtDefault}
+          name="observedAt"
+          type="datetime-local"
+        />
+      </label>
+
+      {props.errorMessage ? (
+        <p className="text-xs text-danger">{props.errorMessage}</p>
+      ) : null}
+
+      <button
+        className="inline-flex h-8 items-center rounded-md bg-accent-soft px-3 text-xs font-medium text-accent disabled:cursor-not-allowed disabled:opacity-40"
+        disabled={props.saving}
+        type="submit"
+      >
+        {props.saving ? "Saving..." : `Save ${props.label}`}
+      </button>
+    </form>
+  );
+}