@echothink-ui/developer 0.1.0

package/src/components/DiffTable.tsx

@@ -0,0 +1,288 @@
+import * as React from "react";
+import { EmptyState } from "@echothink-ui/core";
+import type { DiffTableChangeType, DiffTableProps, DiffTableRow } from "./types";
+
+const changeTypes = new Set<DiffTableChangeType>([
+  "added",
+  "modified",
+  "removed",
+  "renamed",
+  "unchanged",
+  "conflict"
+]);
+
+function getNumeric(row: DiffTableRow, keys: string[]) {
+  for (const key of keys) {
+    const value = row[key];
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+    if (typeof value === "string" && value.trim() !== "" && Number.isFinite(Number(value))) {
+      return Number(value);
+    }
+  }
+  return 0;
+}
+
+function getPath(row: DiffTableRow) {
+  const value = row.afterPath ?? row.path ?? row.file ?? row.name;
+  return typeof value === "string" && value.trim() ? value : "Unknown file";
+}
+
+function getPreviousPath(row: DiffTableRow) {
+  const value = row.beforePath ?? row.previousPath;
+  return typeof value === "string" && value.trim() ? value : undefined;
+}
+
+function normalizeChangeType(value: unknown): DiffTableChangeType | undefined {
+  if (typeof value !== "string") return undefined;
+  const normalized = value
+    .trim()
+    .toLowerCase()
+    .replace(/[_\s]+/g, "-");
+  if (normalized === "delete" || normalized === "deleted" || normalized === "deletion") {
+    return "removed";
+  }
+  if (normalized === "add" || normalized === "created" || normalized === "create") {
+    return "added";
+  }
+  if (normalized === "rename" || normalized === "moved") {
+    return "renamed";
+  }
+  return changeTypes.has(normalized as DiffTableChangeType)
+    ? (normalized as DiffTableChangeType)
+    : undefined;
+}
+
+function inferChangeType(row: DiffTableRow): DiffTableChangeType {
+  const explicit = normalizeChangeType(row.changeType ?? row.status ?? row.kind ?? row.type);
+  if (explicit) return explicit;
+  if (getPreviousPath(row) && getPreviousPath(row) !== getPath(row)) return "renamed";
+
+  const added = getAdded(row);
+  const removed = getRemoved(row);
+  if (added > 0 && removed > 0) return "modified";
+  if (added > 0) return "added";
+  if (removed > 0) return "removed";
+  return "unchanged";
+}
+
+function getAdded(row: DiffTableRow) {
+  return getNumeric(row, ["added", "additions", "linesAdded", "insertions"]);
+}
+
+function getRemoved(row: DiffTableRow) {
+  return getNumeric(row, ["removed", "deletions", "deleted", "linesRemoved"]);
+}
+
+function changeLabel(type: DiffTableChangeType) {
+  if (type === "added") return "Added";
+  if (type === "removed") return "Removed";
+  if (type === "renamed") return "Renamed";
+  if (type === "unchanged") return "Unchanged";
+  if (type === "conflict") return "Conflict";
+  return "Modified";
+}
+
+function formatAdded(value: number) {
+  return value > 0 ? `+${value}` : "0";
+}
+
+function formatRemoved(value: number) {
+  return value > 0 ? `-${value}` : "0";
+}
+
+function formatNet(value: number) {
+  if (value > 0) return `+${value}`;
+  if (value < 0) return String(value);
+  return "0";
+}
+
+function defaultSummary(row: DiffTableRow, type: DiffTableChangeType) {
+  const hunks = getNumeric(row, ["hunks", "sections"]);
+  if (typeof row.summary !== "undefined") return row.summary;
+  if (type === "renamed") return "Path changed";
+  if (type === "unchanged") return "No line changes";
+  if (type === "conflict") return "Review required";
+  if (hunks > 0) return `${hunks} ${hunks === 1 ? "hunk" : "hunks"}`;
+  return "Line changes";
+}
+
+export function DiffTable({
+  rows,
+  mode = "side-by-side",
+  title = "Diff summary",
+  subtitle,
+  showSummary = true,
+  emptyState,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: DiffTableProps) {
+  const totals = React.useMemo(
+    () =>
+      rows.reduce(
+        (acc, row) => {
+          const type = inferChangeType(row);
+          acc.added += getAdded(row);
+          acc.removed += getRemoved(row);
+          if (type !== "unchanged") acc.changed += 1;
+          return acc;
+        },
+        { added: 0, removed: 0, changed: 0 }
+      ),
+    [rows]
+  );
+  const effectiveSubtitle =
+    subtitle ??
+    `${totals.changed} of ${rows.length} files changed, ${totals.added} additions, ${totals.removed} deletions`;
+  const label = ariaLabel ?? (typeof title === "string" ? title : "Diff summary");
+
+  return (
+    <section
+      {...props}
+      className={[
+        "eth-dev-diff-table",
+        `eth-dev-diff-table--${mode}`,
+        rows.length ? undefined : "eth-dev-diff-table--empty",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-eth-component="DiffTable"
+      aria-label={label}
+    >
+      <header className="eth-dev-diff-table__header">
+        <div className="eth-dev-diff-table__heading">
+          <h3>{title}</h3>
+          {effectiveSubtitle ? <p>{effectiveSubtitle}</p> : null}
+        </div>
+        {showSummary ? (
+          <dl className="eth-dev-diff-table__summary" aria-label="Diff totals">
+            <div>
+              <dt>Files</dt>
+              <dd>{totals.changed}</dd>
+            </div>
+            <div>
+              <dt>Added</dt>
+              <dd className="eth-dev-diff-table__summary-value--added">
+                {formatAdded(totals.added)}
+              </dd>
+            </div>
+            <div>
+              <dt>Removed</dt>
+              <dd className="eth-dev-diff-table__summary-value--removed">
+                {formatRemoved(totals.removed)}
+              </dd>
+            </div>
+          </dl>
+        ) : null}
+      </header>
+      {rows.length ? (
+        <div className="eth-dev-diff-table__viewport">
+          <table className="eth-dev-diff-table__table">
+            <caption className="eth-dev-diff-table__caption">{label}</caption>
+            <thead>
+              <tr>
+                <th scope="col">File</th>
+                <th scope="col">State</th>
+                {mode === "inline" ? (
+                  <th scope="col">Changes</th>
+                ) : (
+                  <>
+                    <th scope="col">Added</th>
+                    <th scope="col">Removed</th>
+                    <th scope="col">Net</th>
+                  </>
+                )}
+                <th scope="col">Summary</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, index) => {
+                const added = getAdded(row);
+                const removed = getRemoved(row);
+                const type = inferChangeType(row);
+                const path = getPath(row);
+                const previousPath = getPreviousPath(row);
+                const key = row.id ?? `${path}-${index}`;
+
+                return (
+                  <tr key={key} className={`eth-dev-diff-table__row--${type}`}>
+                    <th scope="row">
+                      <span className="eth-dev-diff-table__file">
+                        <code>{path}</code>
+                        {previousPath && previousPath !== path ? (
+                          <span>was {previousPath}</span>
+                        ) : null}
+                      </span>
+                    </th>
+                    <td>
+                      <span
+                        className={`eth-dev-diff-table__state eth-dev-diff-table__state--${type}`}
+                      >
+                        {changeLabel(type)}
+                      </span>
+                    </td>
+                    {mode === "inline" ? (
+                      <td>
+                        <span className="eth-dev-diff-table__inline-delta">
+                          <span
+                            className="eth-dev-diff-table__count eth-dev-diff-table__count--added"
+                            aria-label={`${added} added lines`}
+                          >
+                            {formatAdded(added)}
+                          </span>
+                          <span
+                            className="eth-dev-diff-table__count eth-dev-diff-table__count--removed"
+                            aria-label={`${removed} removed lines`}
+                          >
+                            {formatRemoved(removed)}
+                          </span>
+                        </span>
+                      </td>
+                    ) : (
+                      <>
+                        <td>
+                          <span
+                            className="eth-dev-diff-table__count eth-dev-diff-table__count--added"
+                            aria-label={`${added} added lines`}
+                          >
+                            {formatAdded(added)}
+                          </span>
+                        </td>
+                        <td>
+                          <span
+                            className="eth-dev-diff-table__count eth-dev-diff-table__count--removed"
+                            aria-label={`${removed} removed lines`}
+                          >
+                            {formatRemoved(removed)}
+                          </span>
+                        </td>
+                        <td>
+                          <span className="eth-dev-diff-table__count">
+                            {formatNet(added - removed)}
+                          </span>
+                        </td>
+                      </>
+                    )}
+                    <td>
+                      <span className="eth-dev-diff-table__row-summary">
+                        {defaultSummary(row, type)}
+                      </span>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        (emptyState ?? (
+          <EmptyState
+            title="No diff rows"
+            description="No files have line-level changes in this comparison."
+          />
+        ))
+      )}
+    </section>
+  );
+}

package/src/components/DiffViewer.tsx

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { Button } from "@echothink-ui/core";
+import type { DiffViewerProps } from "./types";
+import { buildLineDiff, type DiffLine } from "./devUtils";
+
+type DiffViewerMode = NonNullable<DiffViewerProps["mode"]>;
+
+export function DiffViewer({
+  before,
+  after,
+  mode = "inline",
+  language,
+  className,
+  ...props
+}: DiffViewerProps) {
+  const [viewMode, setViewMode] = React.useState<DiffViewerMode>(mode);
+  const diff = React.useMemo(() => buildLineDiff(before, after), [before, after]);
+  const counts = React.useMemo(
+    () => ({
+      additions: diff.filter((line) => line.type === "add").length,
+      deletions: diff.filter((line) => line.type === "remove").length
+    }),
+    [diff]
+  );
+  const languageLabel = language?.trim() || "diff";
+
+  React.useEffect(() => setViewMode(mode), [mode]);
+
+  return (
+    <section
+      {...props}
+      className={`eth-dev-diff-viewer eth-dev-diff-viewer--${viewMode} ${className ?? ""}`.trim()}
+      aria-label={props["aria-label"] ?? `${languageLabel} diff viewer`}
+      data-eth-component="DiffViewer"
+      data-language={languageLabel}
+    >
+      <header className="eth-dev-diff-viewer__header">
+        <div className="eth-dev-diff-viewer__heading">
+          <span className="eth-dev-diff-viewer__language">{languageLabel}</span>
+          <span className="eth-dev-diff-viewer__mode">
+            {viewMode === "inline" ? "Inline" : "Side by side"}
+          </span>
+        </div>
+        <div className="eth-dev-diff-viewer__summary" aria-label="Diff summary">
+          <span className="eth-dev-diff-viewer__stat eth-dev-diff-viewer__stat--add">
+            <strong>{counts.additions}</strong> additions
+          </span>
+          <span className="eth-dev-diff-viewer__stat eth-dev-diff-viewer__stat--remove">
+            <strong>{counts.deletions}</strong> deletions
+          </span>
+        </div>
+        <div className="eth-dev-diff-viewer__view-switch" role="group" aria-label="Diff view mode">
+          <Button
+            intent={viewMode === "inline" ? "primary" : "secondary"}
+            density="compact"
+            aria-pressed={viewMode === "inline"}
+            onClick={() => setViewMode("inline")}
+          >
+            Inline
+          </Button>
+          <Button
+            intent={viewMode === "side-by-side" ? "primary" : "secondary"}
+            density="compact"
+            aria-pressed={viewMode === "side-by-side"}
+            onClick={() => setViewMode("side-by-side")}
+          >
+            Side by side
+          </Button>
+        </div>
+      </header>
+      {viewMode === "inline" ? (
+        <pre
+          className={`eth-dev-diff-viewer__inline language-${toLanguageClass(languageLabel)}`}
+          aria-label="Inline diff"
+        >
+          <code className="eth-dev-diff-viewer__code">
+            {diff.map((line, index) => (
+              <DiffLineView key={index} line={line} />
+            ))}
+          </code>
+        </pre>
+      ) : (
+        <div className="eth-dev-diff-viewer__split" role="table" aria-label="Side-by-side diff">
+          <div role="rowgroup">
+            <div className="eth-dev-diff-viewer__split-header" role="row">
+              <div role="columnheader">Before</div>
+              <div role="columnheader">After</div>
+            </div>
+          </div>
+          <div className="eth-dev-diff-viewer__split-body" role="rowgroup">
+            {diff.map((line, index) => (
+              <div
+                key={index}
+                className={`eth-dev-diff-viewer__split-row eth-dev-diff-viewer__split-row--${line.type}`}
+                role="row"
+              >
+                <DiffCell side="before" line={line} />
+                <DiffCell side="after" line={line} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function DiffLineView({ line }: { line: DiffLine }) {
+  return (
+    <span className={`eth-dev-diff-viewer__line eth-dev-diff-viewer__line--${line.type}`}>
+      <span className="eth-dev-diff-viewer__gutter">{line.beforeLine ?? line.afterLine ?? ""}</span>
+      <span className="eth-dev-diff-viewer__marker">{lineMarker(line.type)}</span>
+      <span className="eth-dev-diff-viewer__content">{line.text || " "}</span>
+    </span>
+  );
+}
+
+function DiffCell({ side, line }: { side: "before" | "after"; line: DiffLine }) {
+  const empty =
+    (side === "before" && line.type === "add") || (side === "after" && line.type === "remove");
+  const lineNumber = side === "before" ? line.beforeLine : line.afterLine;
+
+  return (
+    <pre
+      className={`eth-dev-diff-viewer__cell eth-dev-diff-viewer__cell--${empty ? "empty" : line.type}`}
+      role="cell"
+    >
+      <code className="eth-dev-diff-viewer__cell-code">
+        <span className="eth-dev-diff-viewer__gutter">{empty ? "" : (lineNumber ?? "")}</span>
+        <span className="eth-dev-diff-viewer__marker">{empty ? " " : lineMarker(line.type)}</span>
+        <span className="eth-dev-diff-viewer__content">{empty ? " " : line.text || " "}</span>
+      </code>
+    </pre>
+  );
+}
+
+function lineMarker(type: DiffLine["type"]) {
+  if (type === "add") return "+";
+  if (type === "remove") return "-";
+  return " ";
+}
+
+function toLanguageClass(language: string) {
+  return language.toLowerCase().replace(/[^a-z0-9_-]/g, "-");
+}

package/src/components/EventPayloadViewer.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+import type { EventPayloadViewerProps } from "./types";
+import { JSONViewer } from "./JSONViewer";
+
+export function EventPayloadViewer({
+  eventId,
+  payload,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: EventPayloadViewerProps) {
+  const summary = describePayload(payload);
+
+  return (
+    <section
+      {...props}
+      className={`eth-dev-event-payload-viewer ${className ?? ""}`}
+      aria-label={ariaLabel ?? (eventId ? `Event payload ${eventId}` : "Event payload")}
+      data-eth-component="EventPayloadViewer"
+    >
+      <header className="eth-dev-event-payload-viewer__header">
+        <div className="eth-dev-event-payload-viewer__heading">
+          <span>Event payload</span>
+          <h3>{eventId ? <code>{eventId}</code> : "Payload"}</h3>
+        </div>
+        <dl className="eth-dev-event-payload-viewer__summary" aria-label="Payload summary">
+          <div>
+            <dt>Root</dt>
+            <dd>{summary.root}</dd>
+          </div>
+          <div>
+            <dt>{summary.countLabel}</dt>
+            <dd>{summary.countValue}</dd>
+          </div>
+          <div>
+            <dt>Size</dt>
+            <dd>{summary.size}</dd>
+          </div>
+        </dl>
+      </header>
+      <JSONViewer className="eth-dev-event-payload-viewer__json" value={payload} defaultExpandedDepth={3} />
+    </section>
+  );
+}
+
+function describePayload(value: unknown) {
+  const text = serializePayload(value);
+
+  if (Array.isArray(value)) {
+    return {
+      root: "array",
+      countLabel: "Items",
+      countValue: String(value.length),
+      size: formatPayloadSize(text.length)
+    };
+  }
+
+  if (value !== null && typeof value === "object") {
+    return {
+      root: "object",
+      countLabel: "Fields",
+      countValue: String(Object.keys(value as Record<string, unknown>).length),
+      size: formatPayloadSize(text.length)
+    };
+  }
+
+  return {
+    root: value === null ? "null" : typeof value,
+    countLabel: "Shape",
+    countValue: "scalar",
+    size: formatPayloadSize(text.length)
+  };
+}
+
+function serializePayload(value: unknown) {
+  if (typeof value === "string") return value;
+  if (typeof value === "undefined") return "";
+
+  try {
+    return JSON.stringify(value, null, 2) ?? "";
+  } catch {
+    return String(value);
+  }
+}
+
+function formatPayloadSize(size: number) {
+  if (size < 1000) return `${size} B`;
+  if (size < 1000 * 1000) return `${(size / 1000).toFixed(1)} KB`;
+
+  return `${(size / (1000 * 1000)).toFixed(1)} MB`;
+}

package/src/components/GitRepositoryPanel.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { Branch, Commit, GitRepo, Launch, PullRequest, Time } from "@carbon/icons-react";
+import type { GitRepositoryPanelProps } from "./types";
+
+export function GitRepositoryPanel({ repo, className, ...props }: GitRepositoryPanelProps) {
+  const summaryItems = [
+    {
+      label: "Default branch",
+      value: repo.defaultBranch,
+      icon: <Branch size={16} />,
+      valueClassName: "eth-dev-git-repository-panel__metric-value--code"
+    },
+    {
+      label: "Open PRs",
+      value: String(repo.openPrCount ?? 0),
+      icon: <PullRequest size={16} />
+    },
+    {
+      label: "Commits",
+      value: String(repo.commitCount ?? 0),
+      icon: <Commit size={16} />
+    },
+    {
+      label: "Last commit",
+      value: repo.lastCommitAt ?? "No activity",
+      icon: <Time size={16} />,
+      valueClassName: "eth-dev-git-repository-panel__metric-value--code"
+    }
+  ];
+
+  return (
+    <section
+      {...props}
+      aria-label={props["aria-label"] ?? `${repo.name} repository summary`}
+      className={`eth-dev-git-repository-panel ${className ?? ""}`}
+      data-eth-component="GitRepositoryPanel"
+    >
+      <header className="eth-dev-git-repository-panel__header">
+        <div className="eth-dev-git-repository-panel__identity">
+          <span className="eth-dev-git-repository-panel__icon" aria-hidden="true">
+            <GitRepo size={20} />
+          </span>
+          <div className="eth-dev-git-repository-panel__heading">
+            <p>Repository</p>
+            <h3>{repo.name}</h3>
+            <a className="eth-dev-git-repository-panel__url" href={repo.url} title={repo.url}>
+              {repo.url}
+            </a>
+          </div>
+        </div>
+        <a
+          className="eth-dev-git-repository-panel__action"
+          href={repo.url}
+          aria-label={`Open ${repo.name} repository`}
+        >
+          <span>Open repository</span>
+          <Launch size={16} aria-hidden="true" />
+        </a>
+      </header>
+      <dl className="eth-dev-git-repository-panel__metrics" aria-label="Repository metrics">
+        {summaryItems.map((item) => (
+          <div key={item.label} className="eth-dev-git-repository-panel__metric">
+            <dt>
+              <span aria-hidden="true">{item.icon}</span>
+              {item.label}
+            </dt>
+            <dd className={item.valueClassName}>{item.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  );
+}