@beyondwork/docx-react-component 1.0.27 → 1.0.29

package/src/ui-tailwind/review/tw-revision-sidebar.tsx

@@ -1,164 +0,0 @@
-import React from "react";
-import { Check, X } from "lucide-react";
-
-import type { TrackedChangesSnapshot, TrackedChangeEntrySnapshot } from "../../api/public-types";
-import { selectVisibleRevisions } from "../../ui/shared/revision-filters";
-import type { MarkupDisplay } from "../../ui/headless/comment-decoration-model";
-
-export interface TwRevisionSidebarProps {
-  trackedChanges: TrackedChangesSnapshot;
-  markupDisplay: MarkupDisplay;
-  activeRevisionId?: string;
-  onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
-  onAcceptRevision?: (revisionId: string) => void;
-  onRejectRevision?: (revisionId: string) => void;
-  onAcceptAllChanges?: () => void;
-  onRejectAllChanges?: () => void;
-}
-
-const focusRingClass =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
-
-export function TwRevisionSidebar(props: TwRevisionSidebarProps) {
-  const { trackedChanges, markupDisplay, activeRevisionId } = props;
-  const visibleRevisions = selectVisibleRevisions(trackedChanges.revisions, markupDisplay);
-  const actionablePendingCount = trackedChanges.revisions.filter(
-    (r) => r.status === "active" && r.actionability === "actionable",
-  ).length;
-
-  return (
-    <div className="outline-none">
-      <p className="mb-2 text-[10px] text-tertiary">
-        {trackedChanges.pendingChangeIds.length} active · {trackedChanges.acceptedChangeIds.length} accepted · {trackedChanges.preserveOnlyChangeIds.length} preserve-only
-      </p>
-
-      {/* Bulk actions */}
-      <div className="mb-2 flex gap-1">
-        <button
-          type="button"
-          disabled={actionablePendingCount === 0}
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-semibold text-accent hover:bg-accent-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-          onClick={props.onAcceptAllChanges}
-        >
-          Accept all ({actionablePendingCount})
-        </button>
-        <button
-          type="button"
-          disabled={actionablePendingCount === 0}
-          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] text-secondary hover:bg-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-          onClick={props.onRejectAllChanges}
-        >
-          Reject all
-        </button>
-      </div>
-
-      {visibleRevisions.length > 0 ? (
-        <div className="space-y-1">
-          {visibleRevisions.map((rev) => {
-            const isActive = activeRevisionId === rev.revisionId;
-
-            return (
-              <div
-                key={rev.revisionId}
-                role="button"
-                tabIndex={0}
-                className={`flex rounded-lg transition-colors cursor-pointer ${focusRingClass} ${isActive ? "bg-accent-soft" : "hover:bg-surface"}`}
-                onClick={() => props.onOpenRevision?.(rev)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    props.onOpenRevision?.(rev);
-                  }
-                }}
-              >
-                <div className={`w-0.5 shrink-0 rounded-l-lg ${
-                  rev.kind === "insertion" ? "bg-insert"
-                  : rev.kind === "deletion" ? "bg-danger"
-                  : "bg-tertiary"
-                }`} />
-                <div className="p-2 flex-1 min-w-0">
-                  <div className="mb-0.5 flex items-start justify-between gap-2">
-                    <span className="text-[11px] font-medium text-primary">{rev.anchorLabel}</span>
-                    <RevisionBadge status={rev.status} actionability={rev.actionability} />
-                  </div>
-                  <p className="mb-1 text-[10px] text-tertiary">{rev.authorId} · {rev.createdAt}</p>
-                  {rev.excerpt ? (
-                    <p className={`text-[11px] ${
-                      rev.kind === "insertion" ? "text-insert"
-                      : rev.kind === "deletion" ? "text-danger line-through"
-                      : "text-secondary"
-                    }`}>
-                      {rev.excerpt}
-                    </p>
-                  ) : (
-                    <p className="text-[11px] text-secondary">{rev.label}</p>
-                  )}
-                  {rev.detail ? (
-                    <p className="mt-1 text-[10px] text-secondary">{rev.detail}</p>
-                  ) : null}
-                  <div className="mt-1.5 flex gap-1">
-                    {rev.actionability === "actionable" ? (
-                      <>
-                        <button
-                          type="button"
-                          disabled={!rev.canAccept || rev.status === "accepted"}
-                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-insert hover:bg-insert-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            props.onAcceptRevision?.(rev.revisionId);
-                          }}
-                        >
-                          <Check className="h-3 w-3" /> Accept
-                        </button>
-                        <button
-                          type="button"
-                          disabled={!rev.canReject || rev.status === "rejected"}
-                          className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] text-danger hover:bg-delete-soft transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            props.onRejectRevision?.(rev.revisionId);
-                          }}
-                        >
-                          <X className="h-3 w-3" /> Reject
-                        </button>
-                      </>
-                    ) : (
-                      <span className="px-1.5 py-0.5 text-[10px] text-tertiary">Preserve-only</span>
-                    )}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <p className="text-xs text-tertiary py-4">
-          {trackedChanges.totalCount > 0
-            ? "Switch to Full markup to see all tracked changes."
-            : "Tracked change cards will appear here when present."}
-        </p>
-      )}
-    </div>
-  );
-}
-
-function RevisionBadge(props: { status: string; actionability: string }) {
-  if (props.actionability === "preserve-only") {
-    return (
-      <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-comment bg-warning-soft">
-        preserve-only
-      </span>
-    );
-  }
-  const styles: Record<string, string> = {
-    active: "text-secondary bg-subtle",
-    accepted: "text-insert bg-insert-soft",
-    rejected: "text-danger bg-delete-soft",
-    detached: "text-comment bg-warning-soft",
-  };
-  return (
-    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.status] ?? "text-secondary bg-subtle"}`}>
-      {props.status}
-    </span>
-  );
-}

package/src/ui-tailwind/status/tw-status-bar.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-
-export interface TwStatusBarProps {
-  isDirty: boolean;
-  isExportBlocked: boolean;
-  preserveOnlyCount: number;
-  commentCount: number;
-  changeCount: number;
-  sessionId: string;
-}
-
-export function TwStatusBar(props: TwStatusBarProps) {
-  const saveState = props.isExportBlocked
-    ? "Read-only"
-    : props.isDirty
-      ? "Unsaved"
-      : "Ready";
-  const exportState = props.isExportBlocked
-    ? "Blocked"
-    : props.preserveOnlyCount > 0
-      ? "Warnings"
-      : "Ready";
-
-  return (
-    <footer
-      data-testid="status-bar"
-      className="flex h-7 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-tertiary"
-    >
-      <span className="flex items-center gap-1.5">
-        <span
-          className={`inline-block h-1.5 w-1.5 rounded-full ${
-            props.isExportBlocked
-              ? "bg-danger"
-              : props.isDirty
-                ? "bg-comment"
-                : "bg-insert"
-          }`}
-        />
-        {saveState}
-      </span>
-      <span className="flex items-center gap-1.5">
-        <span
-          className={`inline-block h-1.5 w-1.5 rounded-full ${
-            props.isExportBlocked
-              ? "bg-danger"
-              : props.preserveOnlyCount > 0
-                ? "bg-comment"
-                : "bg-insert"
-          }`}
-        />
-        Export {exportState.toLowerCase()}
-      </span>
-      <span>
-        {props.commentCount} comment{props.commentCount !== 1 ? "s" : ""} ·{" "}
-        {props.changeCount} change{props.changeCount !== 1 ? "s" : ""}
-      </span>
-      <span className="flex-1" />
-      <span>{props.sessionId}</span>
-    </footer>
-  );
-}

package/src/ui-tailwind/toolbar/tw-toolbar-icon-button.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import * as Tooltip from "@radix-ui/react-tooltip";
-
-import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
-
-export interface TwToolbarIconButtonProps {
-  icon: React.ComponentType<{ className?: string }>;
-  label: string;
-  disabled?: boolean;
-  active?: boolean;
-  emphasis?: boolean;
-  onClick?: () => void;
-}
-
-const focusRingClass =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
-
-export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <button
-          type="button"
-          aria-label={props.label}
-          disabled={props.disabled}
-          onMouseDown={preserveEditorSelectionMouseDown}
-          onClick={props.onClick}
-          className={[
-            "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors outline-none",
-            "disabled:opacity-30 disabled:cursor-not-allowed",
-            props.emphasis
-              ? "text-accent hover:bg-accent-soft"
-              : props.active
-                ? "bg-accent-soft text-accent"
-                : "text-secondary hover:bg-surface hover:text-primary",
-            focusRingClass,
-          ].join(" ")}
-        >
-          <props.icon className="h-4 w-4" />
-        </button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content
-          className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
-          sideOffset={6}
-        >
-          {props.label}
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-}