@echothink-ui/activity 0.1.0

package/src/components/WatcherList.tsx

@@ -0,0 +1,122 @@
+import {
+  Badge,
+  Button,
+  IconButton,
+  Surface,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { CloseIcon, PlusIcon } from "@echothink-ui/icons";
+import type { IdentityRef } from "./types";
+
+export interface WatcherListProps extends Omit<SurfaceComponentProps, "children"> {
+  watchers: IdentityRef[];
+  onAdd?: () => void;
+  onRemove?: (id: string) => void;
+}
+
+export function WatcherList({
+  watchers,
+  onAdd,
+  onRemove,
+  title,
+  subtitle,
+  className,
+  role,
+  footer,
+  "aria-label": ariaLabel,
+  ...props
+}: WatcherListProps) {
+  const heading = title ?? "Watchers";
+  const regionLabel = ariaLabel ?? (typeof heading === "string" ? heading : "Watchers");
+  const addAction = onAdd ? (
+    <Button
+      type="button"
+      density="compact"
+      intent="tertiary"
+      icon={<PlusIcon size={16} />}
+      onClick={onAdd}
+    >
+      Add watcher
+    </Button>
+  ) : null;
+  const surfaceFooter =
+    addAction || footer ? (
+      <div className="eth-activity-watcher-list__footer">
+        {addAction}
+        {footer}
+      </div>
+    ) : undefined;
+
+  return (
+    <Surface
+      {...props}
+      title={heading}
+      subtitle={subtitle ?? watcherSummary(watchers.length)}
+      className={["eth-activity-watcher-list", className].filter(Boolean).join(" ")}
+      data-eth-component="WatcherList"
+      role={role ?? "region"}
+      aria-label={regionLabel}
+      footer={surfaceFooter}
+    >
+      {watchers.length ? (
+        <ul className="eth-activity-watcher-list__items" aria-label="Watchers">
+          {watchers.map((watcher) => (
+            <li key={watcher.id} className="eth-activity-watcher-list__item">
+              <span className="eth-activity-watcher-list__avatar" aria-hidden="true">
+                {watcher.avatar ? (
+                  <img src={watcher.avatar} alt="" />
+                ) : (
+                  initialsForName(watcher.label)
+                )}
+              </span>
+              <span className="eth-activity-watcher-list__identity">
+                <strong>{watcher.label}</strong>
+                <span>{watcherDetail(watcher)}</span>
+              </span>
+              <span className="eth-activity-watcher-list__actions">
+                <Badge severity="neutral">{watcherKindLabel(watcher.kind)}</Badge>
+                {onRemove ? (
+                  <IconButton
+                    type="button"
+                    density="compact"
+                    intent="ghost"
+                    label={`Remove ${watcher.label} from watchers`}
+                    icon={<CloseIcon size={16} />}
+                    onClick={() => onRemove(watcher.id)}
+                  />
+                ) : null}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="eth-activity-watcher-list__empty" role="status">
+          No watchers have been added.
+        </p>
+      )}
+    </Surface>
+  );
+}
+
+function watcherSummary(count: number) {
+  if (count === 0) return "No watchers configured";
+  return `${count} ${count === 1 ? "watcher" : "watchers"} notified on updates`;
+}
+
+function watcherDetail(watcher: IdentityRef) {
+  const details = [watcher.role, watcher.email].filter(Boolean);
+  return details.length ? details.join(" / ") : "Receives activity updates";
+}
+
+function watcherKindLabel(kind: IdentityRef["kind"]) {
+  if (kind === "group") return "Group";
+  if (kind === "service-account") return "Service account";
+  return "User";
+}
+
+function initialsForName(value: string) {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (!parts.length) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}

package/src/components/helpers.ts

@@ -0,0 +1,15 @@
+import type { EthSeverity } from "@echothink-ui/core";
+import type { ActivitySeverity } from "./types";
+
+export function severityToCore(severity: ActivitySeverity): EthSeverity {
+  if (severity === "error" || severity === "danger") return "danger";
+  if (severity === "success") return "success";
+  if (severity === "warning") return "warning";
+  return "info";
+}
+
+export function dateGroupKey(value: string) {
+  const date = new Date(value);
+  if (!Number.isFinite(date.valueOf())) return value;
+  return date.toISOString().slice(0, 10);
+}

package/src/components/types.ts

@@ -0,0 +1,71 @@
+import type { EthAction } from "@echothink-ui/core";
+
+export type ActivitySeverity = "info" | "success" | "warning" | "error" | "danger";
+
+export interface NotificationItemData {
+  id: string;
+  title: string;
+  body?: string;
+  severity: ActivitySeverity;
+  createdAt: string;
+  read?: boolean;
+  actions?: EthAction[];
+}
+
+export interface ActivityEvent {
+  id: string;
+  actor: string;
+  verb: string;
+  objectLabel: string;
+  targetLabel?: string;
+  createdAt: string;
+  details?: string;
+}
+
+export interface ChangelogEntry {
+  id: string;
+  version: string;
+  date: string;
+  changes: Array<{ type: "added" | "changed" | "fixed" | "removed"; summary: string }>;
+}
+
+export interface SubscriptionChannel {
+  id: string;
+  label: string;
+  enabled: boolean;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface SubscriptionCategory {
+  id: string;
+  label: string;
+  description?: string;
+  channels: SubscriptionChannel[];
+}
+
+export interface Mention {
+  id: string;
+  from: string;
+  messageRef: string;
+  excerpt: string;
+  createdAt: string;
+}
+
+export interface IdentityRef {
+  id: string;
+  label: string;
+  email?: string;
+  avatar?: string;
+  role?: string;
+  kind?: "user" | "service-account" | "group";
+}
+
+export interface ActivityIncident {
+  id: string;
+  title: string;
+  status?: "investigating" | "identified" | "monitoring" | "resolved";
+  severity?: ActivitySeverity;
+  startedAt?: string;
+  description?: string;
+}

package/src/index.tsx

@@ -0,0 +1,31 @@
+import "./styles.css";
+
+export * from "./components/types";
+export * from "./components/NotificationCenter";
+export * from "./components/NotificationItem";
+export * from "./components/ActivityFeed";
+export * from "./components/ActivityTimeline";
+export * from "./components/AlertBanner";
+export * from "./components/SystemStatusBanner";
+export * from "./components/IncidentPanel";
+export * from "./components/ChangelogPanel";
+export * from "./components/SubscriptionPreferences";
+export * from "./components/MentionList";
+export * from "./components/WatcherList";
+export { AuditLogTable, type AuditExportFormat, type AuditLogTableProps } from "@echothink-ui/data";
+
+export const ActivityComponentNames = [
+  "NotificationCenter",
+  "NotificationItem",
+  "ActivityFeed",
+  "ActivityTimeline",
+  "AlertBanner",
+  "SystemStatusBanner",
+  "IncidentPanel",
+  "ChangelogPanel",
+  "SubscriptionPreferences",
+  "MentionList",
+  "WatcherList",
+  "AuditLogTable"
+] as const;
+export type ActivityComponentName = (typeof ActivityComponentNames)[number];