@echothink-ui/workflow 0.1.0

package/src/components/PipelineStage.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { StatusDot } from "@echothink-ui/core";
+import type { PipelineStageProps } from "./types";
+
+export function PipelineStage({ stage, active, onSelect, className, ...props }: PipelineStageProps) {
+  const content = (
+    <>
+      <StatusDot status={stage.status} label={stage.status} />
+      <strong>{stage.label}</strong>
+      {stage.durationMs !== undefined ? <small>{stage.durationMs}ms</small> : null}
+    </>
+  );
+
+  return onSelect ? (
+    <button
+      {...props}
+      type="button"
+      className={`eth-workflow-pipeline-stage ${active ? "eth-workflow-pipeline-stage--active" : ""} ${className ?? ""}`}
+      data-eth-component="PipelineStage"
+      onClick={() => onSelect(stage.id)}
+    >
+      {content}
+    </button>
+  ) : (
+    <article
+      {...props}
+      className={`eth-workflow-pipeline-stage ${active ? "eth-workflow-pipeline-stage--active" : ""} ${className ?? ""}`}
+      data-eth-component="PipelineStage"
+    >
+      {content}
+    </article>
+  );
+}

package/src/components/ProcessDesigner.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import { Button } from "@echothink-ui/core";
+import type { ProcessDesignerProps, ProcessNode } from "./types";
+
+export function ProcessDesigner({
+  nodes,
+  edges,
+  onNodeMove,
+  onAddNode,
+  onConnect,
+  className,
+  ...props
+}: ProcessDesignerProps) {
+  const svgRef = React.useRef<SVGSVGElement>(null);
+  const [positions, setPositions] = React.useState(() => initialPositions(nodes));
+  const [draggingId, setDraggingId] = React.useState<string | null>(null);
+  const [selectedNodeId, setSelectedNodeId] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    setPositions(initialPositions(nodes));
+  }, [nodes]);
+
+  const pointFromEvent = (event: React.MouseEvent<SVGSVGElement>) => {
+    const rect = svgRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+    return {
+      x: ((event.clientX - rect.left) / rect.width) * 900,
+      y: ((event.clientY - rect.top) / rect.height) * 420
+    };
+  };
+
+  const move = (event: React.MouseEvent<SVGSVGElement>) => {
+    if (!draggingId) return;
+    const point = pointFromEvent(event);
+    setPositions((current) => ({ ...current, [draggingId]: point }));
+  };
+
+  const stop = () => {
+    if (!draggingId) return;
+    const point = positions[draggingId];
+    if (point) onNodeMove?.(draggingId, point.x, point.y);
+    setDraggingId(null);
+  };
+
+  const clickNode = (id: string) => {
+    if (selectedNodeId && selectedNodeId !== id) {
+      onConnect?.(selectedNodeId, id);
+      setSelectedNodeId(null);
+    } else {
+      setSelectedNodeId(id);
+    }
+  };
+
+  return (
+    <section
+      {...props}
+      className={`eth-workflow-process-designer ${className ?? ""}`}
+      data-eth-component="ProcessDesigner"
+    >
+      <header>
+        <h3>Process designer</h3>
+        {onAddNode ? <Button intent="secondary" density="compact" onClick={onAddNode}>Add node</Button> : null}
+      </header>
+      <svg
+        ref={svgRef}
+        viewBox="0 0 900 420"
+        role="img"
+        aria-label="Process graph"
+        onMouseMove={move}
+        onMouseUp={stop}
+        onMouseLeave={stop}
+      >
+        {edges.map((edge, index) => {
+          const from = positions[edge.from];
+          const to = positions[edge.to];
+          if (!from || !to) return null;
+          const midX = (from.x + to.x) / 2;
+          const midY = (from.y + to.y) / 2;
+          return (
+            <g key={`${edge.from}-${edge.to}-${index}`}>
+              <line x1={from.x} y1={from.y} x2={to.x} y2={to.y} stroke="var(--eth-color-border-strong)" strokeWidth={2} markerEnd="url(#eth-workflow-arrow)" />
+              {edge.label ? <text x={midX} y={midY - 6} textAnchor="middle" fontSize={12}>{edge.label}</text> : null}
+            </g>
+          );
+        })}
+        <defs>
+          <marker id="eth-workflow-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--eth-color-border-strong)" />
+          </marker>
+        </defs>
+        {nodes.map((node) => {
+          const point = positions[node.id];
+          if (!point) return null;
+          return (
+            <g
+              key={node.id}
+              transform={`translate(${point.x}, ${point.y})`}
+              className={`eth-workflow-process-designer__node eth-workflow-process-designer__node--${node.type} ${selectedNodeId === node.id ? "eth-workflow-process-designer__node--selected" : ""}`}
+              onMouseDown={(event) => { event.preventDefault(); setDraggingId(node.id); }}
+              onClick={() => clickNode(node.id)}
+            >
+              {node.type === "decision" ? (
+                <polygon points="0,-32 54,0 0,32 -54,0" fill="var(--eth-color-layer-01)" stroke="var(--eth-color-border-strong)" strokeWidth={2} />
+              ) : (
+                <rect x={-62} y={-28} width={124} height={56} rx={0} fill="var(--eth-color-layer-01)" stroke="var(--eth-color-border-strong)" strokeWidth={2} />
+              )}
+              <text textAnchor="middle" dominantBaseline="middle" fontSize={13}>{node.label}</text>
+            </g>
+          );
+        })}
+      </svg>
+    </section>
+  );
+}
+
+function initialPositions(nodes: ProcessNode[]) {
+  const positions: Record<string, { x: number; y: number }> = {};
+  nodes.forEach((node, index) => {
+    positions[node.id] = {
+      x: node.x ?? 100 + (index % 5) * 170,
+      y: node.y ?? 90 + Math.floor(index / 5) * 120
+    };
+  });
+  return positions;
+}

package/src/components/ProcessTimeline.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { StatusDot } from "@echothink-ui/core";
+import type { ProcessTimelineProps } from "./types";
+
+export function ProcessTimeline({ events = [], className, ...props }: ProcessTimelineProps) {
+  return (
+    <section
+      {...props}
+      className={`eth-workflow-process-timeline ${className ?? ""}`}
+      data-eth-component="ProcessTimeline"
+    >
+      <ol>
+        {events.map((event) => (
+          <li key={event.id}>
+            {event.status ? <StatusDot status={event.status} /> : null}
+            <span>{event.label}</span>
+            {event.timestamp ? <time dateTime={event.timestamp}>{event.timestamp}</time> : null}
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}

package/src/components/RuleBuilder.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Button, FormField, Select } from "@echothink-ui/core";
+import { ConditionBuilder } from "./ConditionBuilder";
+import type { RuleBuilderProps, WorkflowRule } from "./types";
+
+const defaultRule: WorkflowRule = {
+  combinator: "all",
+  conditions: [{ field: "", operator: "equals", value: "" }]
+};
+
+export function RuleBuilder({ value, onChange, variables = [], className, ...props }: RuleBuilderProps) {
+  const [internalRule, setInternalRule] = React.useState<WorkflowRule>(value ?? defaultRule);
+  const rule = value ?? internalRule;
+  const commit = (nextRule: WorkflowRule) => {
+    setInternalRule(nextRule);
+    onChange?.(nextRule);
+  };
+
+  return (
+    <section
+      {...props}
+      className={`eth-workflow-rule-builder ${className ?? ""}`}
+      data-eth-component="RuleBuilder"
+    >
+      <FormField label="Match">
+        <Select
+          value={rule.combinator}
+          options={[
+            { value: "all", label: "All conditions" },
+            { value: "any", label: "Any condition" }
+          ]}
+          onChange={(event) => commit({ ...rule, combinator: event.currentTarget.value as WorkflowRule["combinator"] })}
+        />
+      </FormField>
+      <div className="eth-workflow-rule-builder__conditions">
+        {rule.conditions.map((condition, index) => (
+          <div key={index} className="eth-workflow-rule-builder__condition">
+            <ConditionBuilder
+              value={condition}
+              variables={variables}
+              onChange={(nextCondition) => {
+                const conditions = [...rule.conditions];
+                conditions[index] = nextCondition;
+                commit({ ...rule, conditions });
+              }}
+            />
+            <Button
+              intent="ghost"
+              density="compact"
+              onClick={() => commit({ ...rule, conditions: rule.conditions.filter((_, itemIndex) => itemIndex !== index) })}
+            >
+              Remove
+            </Button>
+          </div>
+        ))}
+      </div>
+      <Button
+        intent="secondary"
+        density="compact"
+        onClick={() => commit({ ...rule, conditions: [...rule.conditions, { field: variables[0] ?? "", operator: "equals", value: "" }] })}
+      >
+        Add condition
+      </Button>
+    </section>
+  );
+}

package/src/components/RuleSimulationPanel.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Button } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { RuleSimulationPanelProps, RuleSimulationSample } from "./types";
+
+type SimulationRow = RuleSimulationSample & {
+  actualOutcome?: unknown;
+  matched?: boolean;
+};
+
+export function RuleSimulationPanel({
+  rule,
+  sampleInputs,
+  results = [],
+  onRun,
+  className,
+  ...props
+}: RuleSimulationPanelProps) {
+  const resultMap = new Map(results.map((result) => [result.sampleId, result]));
+  const rows: SimulationRow[] = sampleInputs.map((sample) => ({
+    ...sample,
+    actualOutcome: resultMap.get(sample.id)?.actualOutcome,
+    matched: resultMap.get(sample.id)?.matched
+  }));
+  const columns: DataColumn<SimulationRow>[] = [
+    { key: "label", header: "Sample" },
+    { key: "data", header: "Input", render: (row) => <code>{JSON.stringify(row.data)}</code> },
+    { key: "expectedOutcome", header: "Expected", render: (row) => <code>{JSON.stringify(row.expectedOutcome)}</code> },
+    { key: "actualOutcome", header: "Actual", render: (row) => <code>{JSON.stringify(row.actualOutcome)}</code> },
+    { key: "matched", header: "Matched", render: (row) => (row.matched ? "Yes" : row.matched === false ? "No" : "Not run") }
+  ];
+
+  return (
+    <section
+      {...props}
+      className={`eth-workflow-rule-simulation ${className ?? ""}`}
+      data-eth-component="RuleSimulationPanel"
+    >
+      <header>
+        <h3>Rule simulation</h3>
+        {onRun ? <Button onClick={onRun}>Run</Button> : null}
+      </header>
+      <pre className="eth-workflow-rule-simulation__rule"><code>{JSON.stringify(rule, null, 2)}</code></pre>
+      <DataTable rows={rows} columns={columns} rowKey="id" />
+    </section>
+  );
+}

package/src/components/WorkflowHandoffPanel.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Button, FormField, Select, StatusDot, Textarea } from "@echothink-ui/core";
+import type { WorkflowHandoffPanelProps } from "./types";
+
+export function WorkflowHandoffPanel({
+  item,
+  assigneeOptions = [],
+  onSubmit,
+  className,
+  ...props
+}: WorkflowHandoffPanelProps) {
+  const [assigneeId, setAssigneeId] = React.useState(assigneeOptions[0]?.id ?? "");
+  const [reason, setReason] = React.useState("");
+
+  return (
+    <section
+      {...props}
+      className={`eth-workflow-handoff-panel ${className ?? ""}`}
+      data-eth-component="WorkflowHandoffPanel"
+    >
+      <header>
+        <h3>Workflow handoff</h3>
+        {item?.status ? <StatusDot status={item.status} label={item.status} /> : null}
+      </header>
+      {item ? <p>{item.label}</p> : null}
+      <form onSubmit={(event) => { event.preventDefault(); onSubmit?.({ assigneeId, reason }); }}>
+        <FormField label="Assignee">
+          <Select
+            value={assigneeId}
+            options={assigneeOptions.map((option) => ({ value: option.id, label: option.kind ? `${option.label} (${option.kind})` : option.label }))}
+            onChange={(event) => setAssigneeId(event.currentTarget.value)}
+          />
+        </FormField>
+        <FormField label="Reason">
+          <Textarea value={reason} rows={4} onChange={(event) => setReason(event.currentTarget.value)} />
+        </FormField>
+        <Button type="submit" disabled={!assigneeId}>Handoff</Button>
+      </form>
+    </section>
+  );
+}

package/src/components/WorkflowPipelineView.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { PipelineStage } from "./PipelineStage";
+import type { WorkflowPipelineViewProps } from "./types";
+
+export function WorkflowPipelineView({
+  stages,
+  activeStageId,
+  onSelect,
+  className,
+  ...props
+}: WorkflowPipelineViewProps) {
+  return (
+    <section
+      {...props}
+      className={`eth-workflow-pipeline-view ${className ?? ""}`}
+      data-eth-component="WorkflowPipelineView"
+      aria-label="Workflow pipeline"
+    >
+      <ol className="eth-workflow-pipeline-view__stages">
+        {stages.map((stage, index) => (
+          <li key={stage.id}>
+            <PipelineStage
+              stage={stage}
+              active={stage.id === activeStageId}
+              onSelect={onSelect}
+              aria-posinset={index + 1}
+              aria-setsize={stages.length}
+            />
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}

package/src/components/types.ts

@@ -0,0 +1,107 @@
+import type * as React from "react";
+import type { EthOperationalStatus } from "@echothink-ui/core";
+
+export interface WorkflowStage extends Record<string, unknown> {
+  id: string;
+  label: string;
+  status: EthOperationalStatus;
+  startedAt?: string;
+  durationMs?: number;
+}
+
+export interface WorkflowPipelineViewProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
+  stages: WorkflowStage[];
+  activeStageId?: string;
+  onSelect?: (id: string) => void;
+}
+
+export interface PipelineStageProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
+  stage: WorkflowStage;
+  active?: boolean;
+  onSelect?: (id: string) => void;
+}
+
+export interface ProcessNode extends Record<string, unknown> {
+  id: string;
+  label: string;
+  type: "task" | "decision" | "start" | "end";
+  x?: number;
+  y?: number;
+}
+
+export interface ProcessEdge extends Record<string, unknown> {
+  from: string;
+  to: string;
+  label?: string;
+}
+
+export interface ProcessDesignerProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
+  nodes: ProcessNode[];
+  edges: ProcessEdge[];
+  onNodeMove?: (id: string, x: number, y: number) => void;
+  onAddNode?: () => void;
+  onConnect?: (from: string, to: string) => void;
+}
+
+export interface WorkflowRuleCondition extends Record<string, unknown> {
+  field: string;
+  operator: "equals" | "not-equals" | "contains" | "gt" | "gte" | "lt" | "lte" | "exists";
+  value?: string;
+}
+
+export interface WorkflowRule extends Record<string, unknown> {
+  combinator: "all" | "any";
+  conditions: WorkflowRuleCondition[];
+}
+
+export interface RuleBuilderProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+  value?: WorkflowRule;
+  onChange?: (rule: WorkflowRule) => void;
+  variables?: string[];
+}
+
+export interface ConditionBuilderProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+  value: WorkflowRuleCondition;
+  onChange: (condition: WorkflowRuleCondition) => void;
+  variables?: string[];
+}
+
+export interface RuleSimulationSample extends Record<string, unknown> {
+  id: string;
+  label: string;
+  data: unknown;
+  expectedOutcome?: unknown;
+}
+
+export interface RuleSimulationResult extends Record<string, unknown> {
+  sampleId: string;
+  actualOutcome: unknown;
+  matched: boolean;
+}
+
+export interface RuleSimulationPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "results"> {
+  rule: unknown;
+  sampleInputs: RuleSimulationSample[];
+  results?: RuleSimulationResult[];
+  onRun?: () => void;
+}
+
+export interface WorkflowHandoffPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSubmit"> {
+  item?: { id: string; label: React.ReactNode; status?: EthOperationalStatus };
+  assigneeOptions?: Array<{ id: string; label: string; kind?: "user" | "team" | "agent" }>;
+  onSubmit?: (handoff: { assigneeId: string; reason: string }) => void;
+}
+
+export interface ApprovalWorkflowEditorProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+  steps?: Array<{ id: string; label: string; approver?: string; required?: boolean }>;
+  onChange?: (steps: Array<{ id: string; label: string; approver?: string; required?: boolean }>) => void;
+}
+
+export interface ProcessTimelineProps extends React.HTMLAttributes<HTMLElement> {
+  events?: Array<{ id: string; label: React.ReactNode; timestamp?: string; status?: EthOperationalStatus }>;
+}

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/index.tsx

@@ -0,0 +1,42 @@
+import "./styles.css";
+
+export type {
+  ApprovalWorkflowEditorProps,
+  ConditionBuilderProps,
+  PipelineStageProps,
+  ProcessDesignerProps,
+  ProcessEdge,
+  ProcessNode,
+  ProcessTimelineProps,
+  RuleBuilderProps,
+  RuleSimulationPanelProps,
+  RuleSimulationResult,
+  RuleSimulationSample,
+  WorkflowHandoffPanelProps,
+  WorkflowPipelineViewProps,
+  WorkflowRule,
+  WorkflowRuleCondition,
+  WorkflowStage
+} from "./components/types";
+export { ApprovalWorkflowEditor } from "./components/ApprovalWorkflowEditor";
+export { ConditionBuilder } from "./components/ConditionBuilder";
+export { PipelineStage } from "./components/PipelineStage";
+export { ProcessDesigner } from "./components/ProcessDesigner";
+export { ProcessTimeline } from "./components/ProcessTimeline";
+export { RuleBuilder } from "./components/RuleBuilder";
+export { RuleSimulationPanel } from "./components/RuleSimulationPanel";
+export { WorkflowHandoffPanel } from "./components/WorkflowHandoffPanel";
+export { WorkflowPipelineView } from "./components/WorkflowPipelineView";
+
+export const WorkflowComponentNames = [
+  "WorkflowPipelineView",
+  "PipelineStage",
+  "ProcessDesigner",
+  "RuleBuilder",
+  "ConditionBuilder",
+  "RuleSimulationPanel",
+  "WorkflowHandoffPanel",
+  "ApprovalWorkflowEditor",
+  "ProcessTimeline"
+] as const;
+export type WorkflowComponentName = (typeof WorkflowComponentNames)[number];