@leanspec/ui 0.2.3 → 0.2.4

package/dist/standalone/packages/web/src/components/spec-dependency-graph.tsx

@@ -0,0 +1,369 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import dagre from '@dagrejs/dagre';
+import ReactFlow, {
+  Background,
+  Controls,
+  Edge,
+  Handle,
+  MarkerType,
+  Node,
+  NodeProps,
+  Position,
+  ReactFlowInstance,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import type { SpecRelationships } from '@/types/specs';
+import { cn } from '@/lib/utils';
+
+const NODE_WIDTH = 280;
+const NODE_HEIGHT = 110;
+const precedenceColor = '#f59e0b';
+const relatedColor = '#38bdf8';
+const requiredByColor = '#ef4444'; // Red color for downstream dependents
+
+type GraphTone = 'precedence' | 'related' | 'current' | 'required-by';
+
+interface SpecNodeData {
+  label: string;
+  badge: string;
+  subtitle?: string;
+  tone: GraphTone;
+  href?: string;
+  interactive?: boolean;
+}
+
+const toneClasses: Record<GraphTone, string> = {
+  current: 'border-primary/70 bg-primary/5 text-foreground',
+  precedence: 'border-amber-400/70 bg-amber-400/10 text-amber-900 dark:text-amber-200',
+  related: 'border-sky-400/70 bg-sky-400/10 text-sky-900 dark:text-sky-200',
+  'required-by': 'border-red-400/70 bg-red-400/10 text-red-900 dark:text-red-200',
+};
+
+const dagreConfig: dagre.GraphLabel = {
+  rankdir: 'LR',
+  align: 'UL',
+  nodesep: 60,
+  ranksep: 120,
+  marginx: 40,
+  marginy: 40,
+};
+
+const SpecNode = React.memo(function SpecNode({ data }: NodeProps<SpecNodeData>) {
+  return (
+    <div
+      className={cn(
+        'flex w-[280px] flex-col gap-1.5 rounded-xl border-2 px-5 py-4 text-base shadow-md transition-colors',
+        toneClasses[data.tone],
+        data.interactive && 'cursor-pointer hover:border-primary/70 hover:shadow-lg'
+      )}
+    >
+      <Handle type="target" position={Position.Left} className="opacity-0" />
+      <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
+        {data.badge}
+      </span>
+      <span className="text-base font-semibold leading-snug">{data.label}</span>
+      {data.subtitle && (
+        <span className="text-sm text-muted-foreground/80">{data.subtitle}</span>
+      )}
+      <Handle type="source" position={Position.Right} className="opacity-0" />
+    </div>
+  );
+});
+SpecNode.displayName = 'SpecNode';
+
+const nodeTypes = {
+  specNode: SpecNode,
+};
+
+interface SpecDependencyGraphProps {
+  relationships: SpecRelationships;
+  specNumber?: number | null;
+  specTitle: string;
+}
+
+interface GraphPayload {
+  nodes: Node<SpecNodeData>[];
+  edges: Edge[];
+}
+
+function formatRelationshipLabel(value: string) {
+  const trimmed = value.trim();
+  if (!trimmed) return 'Unknown Spec';
+  const match = trimmed.match(/^(\d+)[-_]?(.*)$/);
+  if (!match) return trimmed;
+  const number = match[1].padStart(3, '0');
+  const remainder = match[2]?.replace(/[-_]/g, ' ').trim();
+  return remainder ? `#${number} ${remainder}` : `#${number}`;
+}
+
+function buildRelationshipHref(value: string) {
+  const trimmed = value.trim();
+  const match = trimmed.match(/^(\d+)/);
+  if (match) {
+    return `/specs/${parseInt(match[1], 10)}`;
+  }
+  return `/specs/${trimmed}`;
+}
+
+function nodeId(prefix: string, value: string, index: number) {
+  return `${prefix}-${index}-${value.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-') || index}`;
+}
+
+function layoutGraph(nodes: Node<SpecNodeData>[], edges: Edge[]): GraphPayload {
+  const graph = new dagre.graphlib.Graph();
+  graph.setGraph(dagreConfig);
+  graph.setDefaultEdgeLabel(() => ({}));
+
+  nodes.forEach((node) => {
+    graph.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+  });
+  edges.forEach((edge) => {
+    graph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(graph);
+
+  const layoutedNodes = nodes.map((node) => {
+    const { x, y } = graph.node(node.id);
+    return {
+      ...node,
+      position: { x: x - NODE_WIDTH / 2, y: y - NODE_HEIGHT / 2 },
+    };
+  });
+
+  return { nodes: layoutedNodes, edges };
+}
+
+function buildGraph(relationships: SpecRelationships, specNumber: number | null | undefined, specTitle: string) {
+  const nodes: Node<SpecNodeData>[] = [];
+  const edges: Edge[] = [];
+  const centerLabel = specNumber ? `#${specNumber.toString().padStart(3, '0')} ${specTitle}` : specTitle;
+
+  const currentNode: Node<SpecNodeData> = {
+    id: 'current-spec',
+    type: 'specNode',
+    data: {
+      label: centerLabel,
+      badge: 'Current Spec',
+      subtitle: 'This spec',
+      tone: 'current',
+      interactive: false,
+    },
+    position: { x: 0, y: 0 },
+    draggable: false,
+    selectable: false,
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+  };
+
+  nodes.push(currentNode);
+
+  // Precedence: Specs this one depends on (upstream, blocking)
+  relationships.dependsOn?.forEach((value, index) => {
+    const id = nodeId('precedence', value, index);
+    nodes.push({
+      id,
+      type: 'specNode',
+      data: {
+        label: formatRelationshipLabel(value),
+        badge: 'Depends On',
+        subtitle: 'Must complete first',
+        tone: 'precedence',
+        href: buildRelationshipHref(value),
+        interactive: true,
+      },
+      position: { x: 0, y: 0 },
+      draggable: false,
+      selectable: true,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+    });
+
+    edges.push({
+      id: `edge-${id}-current`,
+      source: id,
+      target: currentNode.id,
+      type: 'smoothstep',
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: precedenceColor,
+        width: 28,
+        height: 28,
+      },
+      style: {
+        stroke: precedenceColor,
+        strokeWidth: 3,
+      },
+    });
+  });
+
+  // Required By: Specs that depend on this one (downstream, blocked)
+  relationships.requiredBy?.forEach((value, index) => {
+    const id = nodeId('required-by', value, index);
+    nodes.push({
+      id,
+      type: 'specNode',
+      data: {
+        label: formatRelationshipLabel(value),
+        badge: 'Required By',
+        subtitle: 'Blocked by this spec',
+        tone: 'required-by',
+        href: buildRelationshipHref(value),
+        interactive: true,
+      },
+      position: { x: 0, y: 0 },
+      draggable: false,
+      selectable: true,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+    });
+
+    edges.push({
+      id: `edge-current-${id}`,
+      source: currentNode.id,
+      target: id,
+      type: 'smoothstep',
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: requiredByColor,
+        width: 28,
+        height: 28,
+      },
+      style: {
+        stroke: requiredByColor,
+        strokeWidth: 3,
+      },
+    });
+  });
+
+  // Related: Bidirectional informational connections
+  relationships.related?.forEach((value, index) => {
+    const id = nodeId('related', value, index);
+    nodes.push({
+      id,
+      type: 'specNode',
+      data: {
+        label: formatRelationshipLabel(value),
+        badge: 'Related',
+        subtitle: 'Connected work',
+        tone: 'related',
+        href: buildRelationshipHref(value),
+        interactive: true,
+      },
+      position: { x: 0, y: 0 },
+      draggable: false,
+      selectable: true,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+    });
+
+    edges.push({
+      id: `edge-current-${id}`,
+      source: currentNode.id,
+      target: id,
+      type: 'smoothstep',
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: relatedColor,
+        width: 24,
+        height: 24,
+      },
+      style: {
+        stroke: relatedColor,
+        strokeWidth: 3,
+        strokeDasharray: '10 8',
+      },
+    });
+  });
+
+  return layoutGraph(nodes, edges);
+}
+
+export function SpecDependencyGraph({ relationships, specNumber, specTitle }: SpecDependencyGraphProps) {
+  const router = useRouter();
+  const [instance, setInstance] = React.useState<ReactFlowInstance | null>(null);
+
+  const graph = React.useMemo(() => buildGraph(relationships, specNumber, specTitle), [relationships, specNumber, specTitle]);
+
+  const handleInit = React.useCallback((flowInstance: ReactFlowInstance) => {
+    setInstance(flowInstance);
+    requestAnimationFrame(() => {
+      flowInstance.fitView({ padding: 0.4, duration: 350 });
+    });
+  }, []);
+
+  React.useEffect(() => {
+    if (!instance) return;
+    instance.fitView({ padding: 0.4, duration: 350 });
+  }, [instance, graph.nodes]);
+
+  const handleNodeClick = React.useCallback(
+    (_: React.MouseEvent, node: Node<SpecNodeData>) => {
+      if (!node?.data) return;
+      if (!node.data.href) return;
+      router.push(node.data.href);
+    },
+    [router]
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wide">Dependency Map</p>
+          <p className="text-base text-foreground">Explore precedence and connected work</p>
+        </div>
+        <div className="rounded-full border border-border px-3 py-1.5 text-sm font-medium uppercase tracking-wide">
+          React Flow DAG
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-hidden rounded-2xl border border-border bg-muted/30">
+        <ReactFlow
+          nodes={graph.nodes}
+          edges={graph.edges}
+          nodeTypes={nodeTypes}
+          onInit={handleInit}
+          className="h-full w-full"
+          fitView
+          proOptions={{ hideAttribution: true }}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          elementsSelectable
+          panOnScroll
+          panOnDrag
+          zoomOnScroll
+          zoomOnPinch
+          minZoom={0.4}
+          maxZoom={1.6}
+          onNodeClick={handleNodeClick}
+        >
+          <Background gap={24} size={1} color="rgba(148, 163, 184, 0.3)" />
+          <Controls showInteractive={false} />
+        </ReactFlow>
+      </div>
+
+      <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
+        <span className="inline-flex items-center gap-2 font-medium">
+          <span className="inline-block h-2.5 w-8 rounded-full bg-amber-400/80" />
+          Depends On → blocks until complete
+        </span>
+        <span className="inline-flex items-center gap-2 font-medium">
+          <span className="inline-block h-2.5 w-8 rounded-full bg-red-400/80" />
+          Required By ← blocked by this spec
+        </span>
+        <span className="inline-flex items-center gap-2 font-medium">
+          <span className="inline-block h-2.5 w-8 rounded-full bg-sky-400/80" />
+          Related ↔ connected work (bidirectional)
+        </span>
+        <span className="inline-flex items-center gap-2">
+          <span className="inline-block h-2.5 w-8 rounded-full bg-primary/60" />
+          Drag to pan • Scroll / pinch to zoom.
+        </span>
+      </div>
+    </div>
+  );
+}