@echothink-ui/motion 0.1.0

package/src/components/SyncProgressAnimation.tsx

@@ -0,0 +1,256 @@
+import * as React from "react";
+import type { SyncProgressAnimationProps, SyncProgressAnimationStatus } from "./types";
+import { MotionStyles, usePrefersReducedMotion } from "./motionUtils";
+
+const statusContent: Record<
+  SyncProgressAnimationStatus,
+  { accent: string; description: string; label: string; soft: string }
+> = {
+  syncing: {
+    accent: "#0f62fe",
+    description: "Replicating source updates and applying remote changes.",
+    label: "Syncing",
+    soft: "#edf5ff"
+  },
+  synced: {
+    accent: "#24a148",
+    description: "Replica is current with the source.",
+    label: "Synced",
+    soft: "#defbe6"
+  },
+  paused: {
+    accent: "#8d8d8d",
+    description: "Sync is paused. No changes are being applied.",
+    label: "Paused",
+    soft: "#f4f4f4"
+  },
+  stale: {
+    accent: "#f1c21b",
+    description: "Replica is outside the expected freshness window.",
+    label: "Stale",
+    soft: "#fcf4d6"
+  },
+  failed: {
+    accent: "#da1e28",
+    description: "Sync stopped before completion. Review the connection and retry.",
+    label: "Failed",
+    soft: "#fff1f1"
+  },
+  error: {
+    accent: "#da1e28",
+    description: "Sync stopped before completion. Review the connection and retry.",
+    label: "Needs attention",
+    soft: "#fff1f1"
+  }
+};
+
+export function SyncProgressAnimation({
+  children,
+  className,
+  completed,
+  description,
+  label = "Syncing",
+  progress,
+  rate,
+  remaining,
+  role = "status",
+  source,
+  stage,
+  status = "syncing",
+  style,
+  target,
+  total,
+  variant,
+  "aria-busy": ariaBusy,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  ...props
+}: SyncProgressAnimationProps) {
+  const reduced = usePrefersReducedMotion();
+  const content = statusContent[status];
+  const progressValue = normalizeProgress(progress ?? progressFromCounts(completed, total, status));
+  const hasProgress = progressValue !== undefined;
+  const progressText = hasProgress ? `${progressValue}% complete` : content.label;
+  const countText = formatCountProgress(completed, total);
+  const descriptionNode = description ?? children ?? content.description;
+  const hasDetailedContent = [
+    description,
+    children,
+    source,
+    target,
+    stage,
+    rate,
+    remaining,
+    completed,
+    total,
+    progress
+  ].some(hasValue);
+  const resolvedVariant = variant ?? (hasDetailedContent ? "detailed" : "compact");
+  const labelText = textFromNode(label) ?? "Sync";
+  const announcement = [content.label, hasProgress ? progressText : undefined, countText]
+    .filter(Boolean)
+    .join(", ");
+  const classes = [
+    "eth-motion-sync-progress",
+    `eth-motion-sync-progress--${resolvedVariant}`,
+    `eth-motion-sync-progress--${status}`,
+    reduced ? "eth-motion-reduced" : undefined,
+    className
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const rootStyle = {
+    "--eth-motion-sync-accent": content.accent,
+    "--eth-motion-sync-accent-soft": content.soft,
+    ...style
+  } as React.CSSProperties;
+  const busy = ariaBusy ?? (status === "syncing" ? true : undefined);
+
+  if (resolvedVariant === "compact") {
+    return (
+      <span
+        {...props}
+        aria-atomic="true"
+        aria-busy={busy}
+        aria-label={ariaLabel ?? `${labelText} ${announcement}`}
+        aria-live={ariaLive ?? (status === "syncing" ? "polite" : undefined)}
+        className={classes}
+        data-eth-component="SyncProgressAnimation"
+        data-sync-progress={progressValue}
+        data-sync-status={status}
+        role={role}
+        style={rootStyle}
+      >
+        <MotionStyles />
+        <SyncIndicator status={status} />
+        <span className="eth-motion-sync-progress__compact-copy">
+          <span className="eth-motion-sync-progress__label">{label}</span>
+          <span className="eth-motion-sync-progress__compact-state">
+            {hasProgress ? `${progressValue}%` : content.label}
+          </span>
+        </span>
+      </span>
+    );
+  }
+
+  const metaItems = [
+    { label: "Source", value: source },
+    { label: "Target", value: target },
+    { label: "Rate", value: rate },
+    { label: "Remaining", value: remaining }
+  ].filter((item) => hasValue(item.value));
+
+  return (
+    <section
+      {...props}
+      aria-atomic="true"
+      aria-busy={busy}
+      aria-label={ariaLabel ?? `${labelText} ${announcement}`}
+      aria-live={ariaLive ?? (status === "syncing" ? "polite" : undefined)}
+      className={classes}
+      data-eth-component="SyncProgressAnimation"
+      data-sync-progress={progressValue}
+      data-sync-status={status}
+      role={role}
+      style={rootStyle}
+    >
+      <MotionStyles />
+      <SyncIndicator status={status} />
+      <div className="eth-motion-sync-progress__body">
+        <div className="eth-motion-sync-progress__header">
+          <div className="eth-motion-sync-progress__title-group">
+            <span className="eth-motion-sync-progress__eyebrow">
+              {stage ?? "Replication"}
+            </span>
+            <span className="eth-motion-sync-progress__label">{label}</span>
+          </div>
+          <span className="eth-motion-sync-progress__chip">
+            <span className="eth-motion-sync-progress__chip-dot" aria-hidden="true" />
+            {content.label}
+          </span>
+        </div>
+        <p className="eth-motion-sync-progress__description">{descriptionNode}</p>
+        <div className="eth-motion-sync-progress__meter">
+          <div
+            aria-label="Sync transfer progress"
+            aria-valuemax={100}
+            aria-valuemin={0}
+            aria-valuenow={progressValue}
+            aria-valuetext={hasProgress ? progressText : content.label}
+            className="eth-motion-sync-progress__track"
+            role="progressbar"
+          >
+            <span
+              className={`eth-motion-sync-progress__bar ${
+                hasProgress ? "" : "eth-motion-sync-progress__bar--indeterminate"
+              }`}
+              style={hasProgress ? { inlineSize: `${progressValue}%` } : undefined}
+            />
+          </div>
+          <span className="eth-motion-sync-progress__progress-copy">
+            {[hasProgress ? `${progressValue}%` : content.label, countText]
+              .filter(Boolean)
+              .join(" | ")}
+          </span>
+        </div>
+      </div>
+      {metaItems.length ? (
+        <dl className="eth-motion-sync-progress__meta" aria-label="Sync metadata">
+          {metaItems.map((item) => (
+            <div className="eth-motion-sync-progress__meta-item" key={item.label}>
+              <dt>{item.label}</dt>
+              <dd>{item.value}</dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+    </section>
+  );
+}
+
+function SyncIndicator({ status }: { status: SyncProgressAnimationStatus }) {
+  return (
+    <span className="eth-motion-sync-progress__indicator" aria-hidden="true">
+      {status === "syncing" ? (
+        <span className="eth-motion-sync-progress__spinner" />
+      ) : (
+        <span className="eth-motion-sync-progress__glyph" />
+      )}
+    </span>
+  );
+}
+
+function progressFromCounts(
+  completed: number | undefined,
+  total: number | undefined,
+  status: SyncProgressAnimationStatus
+) {
+  if (status === "synced") return 100;
+  if (!isFiniteNumber(completed) || !isFiniteNumber(total) || total <= 0) return undefined;
+  return (completed / total) * 100;
+}
+
+function normalizeProgress(value: number | undefined) {
+  if (!isFiniteNumber(value)) return undefined;
+  return Math.min(100, Math.max(0, Math.round(value)));
+}
+
+function formatCountProgress(completed: number | undefined, total: number | undefined) {
+  if (!isFiniteNumber(completed) || !isFiniteNumber(total) || total <= 0) return undefined;
+  const safeCompleted = Math.max(0, Math.floor(completed));
+  const safeTotal = Math.max(0, Math.floor(total));
+  return `${safeCompleted} of ${safeTotal} items`;
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function hasValue(value: unknown) {
+  return value !== undefined && value !== null && value !== false && value !== "";
+}
+
+function textFromNode(node: React.ReactNode) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  return undefined;
+}