@beyondwork/docx-react-component 1.0.0 → 1.0.2

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

@@ -1,79 +0,0 @@
-"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

@@ -1,307 +0,0 @@
-"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>
-  );
-}