@echothink-ui/project 0.1.0

package/src/components/ProjectStatusSummary.tsx

@@ -0,0 +1,165 @@
+import * as React from "react";
+import {
+  Badge,
+  StatusDot,
+  statusLabel,
+  type EthOperationalStatus,
+  type EthSeverity
+} from "@echothink-ui/core";
+import { KPIBlock } from "@echothink-ui/charts";
+import type { ProjectBaseProps, ProjectStatusSummaryData, ProjectSummary } from "../types";
+import { classNames, projectHtmlProps, summarizeProjects } from "../utils";
+
+export interface ProjectStatusSummaryProps extends ProjectBaseProps {
+  projects?: ProjectSummary[];
+  summary?: ProjectStatusSummaryData;
+}
+
+const priorityStatuses: EthOperationalStatus[] = [
+  "running",
+  "in-progress",
+  "approval-required",
+  "blocked",
+  "failed",
+  "queued",
+  "pending-approval",
+  "warning",
+  "stale",
+  "paused",
+  "completed",
+  "succeeded",
+  "synced",
+  "active",
+  "not-started",
+  "inactive"
+];
+
+const statusClassNames: Partial<Record<EthOperationalStatus, string>> = {
+  "approval-required": "eth-project-status-summary__bar-segment--attention",
+  "pending-approval": "eth-project-status-summary__bar-segment--warning",
+  "in-progress": "eth-project-status-summary__bar-segment--inflight",
+  blocked: "eth-project-status-summary__bar-segment--attention",
+  failed: "eth-project-status-summary__bar-segment--attention",
+  running: "eth-project-status-summary__bar-segment--inflight",
+  queued: "eth-project-status-summary__bar-segment--queued",
+  warning: "eth-project-status-summary__bar-segment--warning",
+  stale: "eth-project-status-summary__bar-segment--warning",
+  paused: "eth-project-status-summary__bar-segment--paused",
+  completed: "eth-project-status-summary__bar-segment--complete",
+  succeeded: "eth-project-status-summary__bar-segment--complete",
+  synced: "eth-project-status-summary__bar-segment--complete",
+  active: "eth-project-status-summary__bar-segment--complete",
+  "not-started": "eth-project-status-summary__bar-segment--queued",
+  inactive: "eth-project-status-summary__bar-segment--queued"
+};
+
+export function ProjectStatusSummary({
+  projects = [],
+  summary,
+  title = "Project status",
+  className,
+  ...props
+}: ProjectStatusSummaryProps) {
+  const headingId = React.useId();
+  const computed = summary ?? summarizeProjects(projects);
+  const total = Object.values(computed.byStatus).reduce((sum, value) => sum + (value ?? 0), 0);
+  const activeCount = (computed.byStatus.running ?? 0) + (computed.byStatus["in-progress"] ?? 0);
+  const prioritizedStatuses = priorityStatuses.filter((status) => computed.byStatus[status]);
+  const additionalStatuses = Object.keys(computed.byStatus).filter(
+    (status): status is EthOperationalStatus =>
+      !priorityStatuses.includes(status as EthOperationalStatus) &&
+      Boolean(computed.byStatus[status as EthOperationalStatus])
+  );
+  const displayedStatuses = [...prioritizedStatuses, ...additionalStatuses];
+  const statusSummary = total
+    ? `${total} project${total === 1 ? "" : "s"} across ${displayedStatuses.length} status${
+        displayedStatuses.length === 1 ? "" : "es"
+      }`
+    : "No tracked projects";
+  const attentionLabel = total
+    ? computed.blockedCount
+      ? `${computed.blockedCount} needs attention`
+      : "Operational"
+    : "No projects";
+  const attentionSeverity: EthSeverity = total
+    ? computed.blockedCount
+      ? "danger"
+      : "success"
+    : "neutral";
+
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-status-summary", className)}
+      data-eth-component="ProjectStatusSummary"
+      role="region"
+      aria-labelledby={headingId}
+      tabIndex={-1}
+    >
+      <header className="eth-project-status-summary__header">
+        <div className="eth-project-status-summary__heading">
+          <h3 id={headingId}>{title}</h3>
+          <p>{statusSummary}</p>
+        </div>
+        <Badge severity={attentionSeverity}>{attentionLabel}</Badge>
+      </header>
+
+      <div className="eth-project-status-summary__kpis">
+        <KPIBlock title="Projects" value={total} description="Total tracked" />
+        <KPIBlock title="Healthy" value={`${computed.healthyPercent}%`} description="Operational" />
+        <KPIBlock title="Active" value={activeCount} description="Running or in progress" />
+        <KPIBlock title="Blocked" value={computed.blockedCount} description="Needs attention" />
+      </div>
+
+      <div className="eth-project-status-summary__distribution">
+        <div
+          className="eth-project-status-summary__bar"
+          aria-label="Project status distribution"
+          role="list"
+        >
+          {displayedStatuses.length ? (
+            displayedStatuses.map((status) => {
+              const count = computed.byStatus[status] ?? 0;
+              return (
+                <span
+                  key={status}
+                  aria-label={`${statusLabel(status)}: ${count}`}
+                  className={classNames(
+                    "eth-project-status-summary__bar-segment",
+                    statusClassNames[status],
+                    `eth-project-status-summary__bar-segment--${status}`
+                  )}
+                  role="listitem"
+                  style={{ flexGrow: count }}
+                  title={`${statusLabel(status)}: ${count}`}
+                />
+              );
+            })
+          ) : (
+            <span
+              aria-label="No project status data"
+              className="eth-project-status-summary__bar-segment"
+              role="listitem"
+              style={{ flexGrow: 1 }}
+            />
+          )}
+        </div>
+
+        {displayedStatuses.length ? (
+          <div className="eth-project-status-summary__legend" role="list">
+            {displayedStatuses.map((status) => (
+              <span key={status} role="listitem">
+                <StatusDot
+                  status={status}
+                  label={`${statusLabel(status)} ${computed.byStatus[status]}`}
+                />
+              </span>
+            ))}
+          </div>
+        ) : (
+          <p className="eth-project-status-summary__empty">No project status data</p>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/components/ProjectSummaryPanel.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ProjectSummaryPanel } from "./ProjectSummaryPanel";
+
+describe("@echothink-ui/project ProjectSummaryPanel", () => {
+  it("renders an accessible inspector summary with status and metadata", () => {
+    render(
+      <ProjectSummaryPanel
+        project={{
+          id: "p1",
+          name: "Marketing Campaign",
+          status: "in-progress",
+          description: "Q3 product launch and lifecycle messaging.",
+          ownerLabel: "JD",
+          updatedAt: "May 27",
+          appDomainsCount: 4,
+          openTasksCount: 12,
+          healthStatus: "healthy"
+        }}
+      />
+    );
+
+    const panel = screen.getByRole("region", { name: "Marketing Campaign" });
+
+    expect(panel.className).toContain("eth-project-summary-panel--in-progress");
+    expect(panel.getAttribute("data-status")).toBe("in-progress");
+    expect(panel.getAttribute("aria-describedby")).toBe("p1-summary-description");
+    expect(screen.getByText("Q3 product launch and lifecycle messaging.").id).toBe(
+      "p1-summary-description"
+    );
+    expect(screen.getByText("Project ID")).toBeTruthy();
+    expect(screen.getByText("p1")).toBeTruthy();
+    expect(screen.getByText("Open tasks")).toBeTruthy();
+    expect(screen.getByText("12")).toBeTruthy();
+    expect(screen.getByText("Healthy")).toBeTruthy();
+  });
+});

package/src/components/ProjectSummaryPanel.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { Badge, StatusDot, statusLabel } from "@echothink-ui/core";
+import type { ProjectBaseProps, ProjectSummary } from "../types";
+import {
+  classNames,
+  formatNumber,
+  healthLabel,
+  healthToStatus,
+  projectHtmlProps,
+  statusToSeverity
+} from "../utils";
+
+export interface ProjectSummaryPanelProps extends ProjectBaseProps {
+  project?: ProjectSummary;
+}
+
+export function ProjectSummaryPanel({ project, className, ...props }: ProjectSummaryPanelProps) {
+  const resolvedProject: ProjectSummary = project ?? {
+    id: "project",
+    name: "Project",
+    status: "not-started",
+    description: "Project summary"
+  };
+  const titleId = `${resolvedProject.id}-summary-title`;
+  const descriptionId = resolvedProject.description
+    ? `${resolvedProject.id}-summary-description`
+    : undefined;
+  const metadataItems = [
+    { label: "Project ID", value: resolvedProject.id },
+    { label: "Owner", value: resolvedProject.ownerLabel ?? "Unassigned" },
+    { label: "Updated", value: resolvedProject.updatedAt ?? "Not updated" },
+    { label: "App domains", value: formatNumber(resolvedProject.appDomainsCount) },
+    { label: "Open tasks", value: formatNumber(resolvedProject.openTasksCount) }
+  ];
+
+  return (
+    <section
+      {...projectHtmlProps(props)}
+      className={classNames(
+        "eth-project-summary-panel",
+        `eth-project-summary-panel--${resolvedProject.status}`,
+        className
+      )}
+      data-eth-component="ProjectSummaryPanel"
+      data-status={resolvedProject.status}
+      role="region"
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      tabIndex={-1}
+    >
+      <header className="eth-project-summary-panel__header">
+        <div className="eth-project-summary-panel__heading">
+          <h3 id={titleId}>{resolvedProject.name}</h3>
+          {resolvedProject.description ? (
+            <p id={descriptionId}>{resolvedProject.description}</p>
+          ) : null}
+        </div>
+        <div className="eth-project-summary-panel__status">
+          <Badge severity={statusToSeverity(resolvedProject.status)}>
+            {statusLabel(resolvedProject.status)}
+          </Badge>
+        </div>
+      </header>
+      <dl className="eth-project-summary-panel__metadata">
+        {metadataItems.map((item) => (
+          <div className="eth-project-summary-panel__metadata-item" key={item.label}>
+            <dt>{item.label}</dt>
+            <dd>{item.value}</dd>
+          </div>
+        ))}
+        <div
+          className="eth-project-summary-panel__metadata-item eth-project-summary-panel__metadata-item--health"
+        >
+          <dt>Health</dt>
+          <dd>
+            <StatusDot
+              status={healthToStatus(resolvedProject.healthStatus)}
+              label={healthLabel(resolvedProject.healthStatus)}
+            />
+          </dd>
+        </div>
+      </dl>
+    </section>
+  );
+}

package/src/components/ProjectTab.tsx

@@ -0,0 +1,8 @@
+import { BrowserTab, type BrowserTabProps } from "@echothink-ui/layouts";
+import { classNames } from "../utils";
+
+export type ProjectTabProps = BrowserTabProps;
+
+export function ProjectTab({ className, ...props }: ProjectTabProps) {
+  return <BrowserTab {...props} className={classNames("eth-project-tab", className)} />;
+}

package/src/components/ProjectTabGroup.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { ProjectTabCollection, type ProjectTabItem } from "@echothink-ui/layouts";
+import type { ProjectBaseProps } from "../types";
+import { classNames, projectHtmlProps } from "../utils";
+
+export interface ProjectTabGroupProps extends ProjectBaseProps {
+  projectId: string;
+  projectLabel: React.ReactNode;
+  tabs: ProjectTabItem[];
+  activeTabId?: string;
+  onActivateTab?: (id: string) => void;
+  onCloseTab?: (id: string) => void;
+}
+
+export function ProjectTabGroup({
+  projectId,
+  projectLabel,
+  tabs,
+  activeTabId,
+  onActivateTab,
+  onCloseTab,
+  className,
+  ...props
+}: ProjectTabGroupProps) {
+  return (
+    <ProjectTabCollection
+      {...projectHtmlProps(props)}
+      className={classNames("eth-project-tab-group", className)}
+      data-eth-component="ProjectTabGroup"
+      projectId={projectId}
+      projectLabel={projectLabel}
+      tabs={tabs}
+      activeTabId={activeTabId}
+      onActivateTab={onActivateTab}
+      onCloseTab={onCloseTab}
+    />
+  );
+}

package/src/components/ProjectTable.tsx

@@ -0,0 +1,138 @@
+import * as React from "react";
+import {
+  Badge,
+  Button,
+  EmptyState,
+  statusLabel,
+  type EthAction
+} from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { ProjectBaseProps, ProjectSummary } from "../types";
+import {
+  formatNumber,
+  projectHtmlProps,
+  statusToSeverity
+} from "../utils";
+
+export interface ProjectTableProps extends ProjectBaseProps {
+  projects?: ProjectSummary[];
+  onRowSelect?: (projectId: string) => void;
+  selectedProjectId?: string;
+  rowActions?: (project: ProjectSummary) => EthAction[];
+}
+
+export function ProjectTable({
+  projects = [],
+  onRowSelect,
+  selectedProjectId,
+  rowActions,
+  density = "compact",
+  className,
+  ...props
+}: ProjectTableProps) {
+  const columns = React.useMemo<DataColumn<ProjectSummary>[]>(
+    () => [
+      {
+        key: "name",
+        header: "Name",
+        width: "34%",
+        render: (project) => (
+          <div className="eth-project-table__name">
+            {onRowSelect ? (
+              <Button
+                className="eth-project-table__title eth-project-table__title-button"
+                intent="ghost"
+                onClick={() => onRowSelect(project.id)}
+              >
+                {project.name}
+              </Button>
+            ) : (
+              <strong className="eth-project-table__title">{project.name}</strong>
+            )}
+            {project.description ? (
+              <small className="eth-project-table__description">{project.description}</small>
+            ) : null}
+          </div>
+        )
+      },
+      {
+        key: "status",
+        header: "Status",
+        width: "10rem",
+        render: (project) => (
+          <span className="eth-project-table__status">
+            <Badge severity={statusToSeverity(project.status)}>{statusLabel(project.status)}</Badge>
+          </span>
+        )
+      },
+      {
+        key: "ownerLabel",
+        header: "Owner",
+        width: "7rem",
+        render: (project) => (
+          <span className="eth-project-table__owner">{project.ownerLabel ?? "Unassigned"}</span>
+        )
+      },
+      {
+        key: "appDomainsCount",
+        header: "App domains",
+        width: "7.5rem",
+        align: "end",
+        render: (project) => (
+          <span className="eth-project-table__metric">
+            {formatNumber(project.appDomainsCount)}
+          </span>
+        )
+      },
+      {
+        key: "openTasksCount",
+        header: "Open tasks",
+        width: "7.5rem",
+        align: "end",
+        render: (project) => (
+          <span className="eth-project-table__metric">
+            {formatNumber(project.openTasksCount)}
+          </span>
+        )
+      },
+      {
+        key: "updatedAt",
+        header: "Updated",
+        width: "7.5rem",
+        render: (project) => (
+          <span className="eth-project-table__updated">{project.updatedAt ?? "-"}</span>
+        )
+      }
+    ],
+    [onRowSelect]
+  );
+  const htmlProps = projectHtmlProps(props);
+
+  return (
+    <section
+      {...htmlProps}
+      className={`eth-project-table ${className ?? ""}`}
+      data-eth-component="ProjectTable"
+      role="region"
+      aria-label={htmlProps["aria-label"] ?? "Project list"}
+      tabIndex={-1}
+    >
+      <DataTable
+        aria-label="Project list"
+        className="eth-project-table__table"
+        density={density}
+        rows={projects}
+        columns={columns}
+        rowKey="id"
+        selectedRows={selectedProjectId ? [selectedProjectId] : []}
+        rowActions={rowActions}
+        emptyState={
+          <EmptyState
+            title="No projects"
+            description="Create a project to start organizing resources and app domains."
+          />
+        }
+      />
+    </section>
+  );
+}