@you-agent-factory/components 0.0.0 → 0.0.2

package/src/graphs/graph-interactive-example.tsx

@@ -1,187 +0,0 @@
-import "@xyflow/react/dist/style.css";
-
-import {
-  Background,
-  Controls,
-  ReactFlow,
-  ReactFlowProvider,
-  type Edge,
-  type Node,
-  type NodeProps,
-} from "@xyflow/react";
-import { useCallback, useMemo, useState } from "react";
-
-import { GRAPH_EDGE_TYPES } from "./graph-edge";
-import {
-  desktopInteractiveGraphNodes,
-  type GraphInteractiveFixtureNode,
-} from "./graph-story-fixtures";
-import { GraphNodeButton } from "./graph-node-button";
-import { GraphNodeShell } from "./graph-node-shell";
-import type { GraphNodeState } from "./graph-node-state";
-import { GraphViewportSurface } from "./graph-viewport-surface";
-
-type GenericGraphFlowNodeData = GraphInteractiveFixtureNode & {
-  graphState: GraphNodeState;
-  onActivate?: () => void;
-  shellState: GraphNodeState;
-};
-
-function GenericGraphFlowNode({ data }: NodeProps<Node<GenericGraphFlowNodeData>>) {
-  return (
-    <div className="w-44 max-w-full sm:w-52">
-      <GraphNodeShell
-        handles={data.handles}
-        nodeKind={data.nodeKind}
-        state={data.shellState}
-        stateLabel={data.stateLabel}
-      >
-        <GraphNodeButton
-          graphState={data.graphState}
-          onClick={data.onActivate}
-          stateLabel={data.stateLabel}
-        >
-          {data.label}
-        </GraphNodeButton>
-      </GraphNodeShell>
-    </div>
-  );
-}
-
-const GENERIC_GRAPH_NODE_TYPES = {
-  genericGraph: GenericGraphFlowNode,
-};
-
-function buildFlowNodes(
-  fixtureNodes: GraphInteractiveFixtureNode[],
-  selectedNodeId: string | null,
-  onSelectNode: (nodeId: string) => void,
-): Node<GenericGraphFlowNodeData>[] {
-  return fixtureNodes.map((fixtureNode) => {
-    const isSelectable = fixtureNode.selectable === true;
-    const isSelected = isSelectable && selectedNodeId === fixtureNode.id;
-    const resolvedState =
-      fixtureNode.fixedState ?? (isSelected ? "selected" : "default");
-
-    return {
-      data: {
-        ...fixtureNode,
-        graphState: resolvedState,
-        onActivate: isSelectable
-          ? () => {
-              onSelectNode(fixtureNode.id);
-            }
-          : undefined,
-        shellState: resolvedState,
-      },
-      draggable: false,
-      id: fixtureNode.id,
-      position: fixtureNode.position,
-      selectable: false,
-      type: "genericGraph",
-    };
-  });
-}
-
-function buildFlowEdges(
-  fixtureNodes: GraphInteractiveFixtureNode[],
-  selectedNodeId: string | null,
-): Edge[] {
-  const readyNode = fixtureNodes.find((node) => node.id === "ready-node");
-  const targetNode = fixtureNodes.find((node) => node.id === "target-node");
-
-  if (!readyNode || !targetNode) {
-    return [];
-  }
-
-  return [
-    {
-      data: {
-        alwaysShowLabel: true,
-        label: "Example edge",
-        waypoints:
-          readyNode.position.y === targetNode.position.y
-            ? undefined
-            : [
-                {
-                  x: (readyNode.position.x + targetNode.position.x) / 2 + 72,
-                  y: readyNode.position.y + 48,
-                },
-                {
-                  x: (readyNode.position.x + targetNode.position.x) / 2 + 72,
-                  y: targetNode.position.y + 48,
-                },
-              ],
-      },
-      id: "ready-to-target",
-      selectable: false,
-      source: readyNode.id,
-      target: targetNode.id,
-      type: "graphEdge",
-    },
-  ].map((edge) => ({
-    ...edge,
-    selected: selectedNodeId === edge.source || selectedNodeId === edge.target,
-  }));
-}
-
-export type GraphInteractiveExampleProps = {
-  "aria-label"?: string;
-  className?: string;
-  fixtureNodes?: GraphInteractiveFixtureNode[];
-  initialSelectedNodeId?: string | null;
-  viewportWidthClass?: string;
-};
-
-export function GraphInteractiveExample({
-  "aria-label": ariaLabel = "Interactive graph example",
-  className = "h-[28rem]",
-  fixtureNodes = desktopInteractiveGraphNodes,
-  initialSelectedNodeId = null,
-  viewportWidthClass = "w-[48rem] max-w-full",
-}: GraphInteractiveExampleProps) {
-  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(
-    initialSelectedNodeId,
-  );
-
-  const handleSelectNode = useCallback((nodeId: string) => {
-    setSelectedNodeId(nodeId);
-  }, []);
-
-  const nodes = useMemo(
-    () => buildFlowNodes(fixtureNodes, selectedNodeId, handleSelectNode),
-    [fixtureNodes, handleSelectNode, selectedNodeId],
-  );
-  const edges = useMemo(
-    () => buildFlowEdges(fixtureNodes, selectedNodeId),
-    [fixtureNodes, selectedNodeId],
-  );
-
-  return (
-    <ReactFlowProvider>
-      <div className={viewportWidthClass}>
-        <GraphViewportSurface aria-label={ariaLabel} className={className}>
-          <ReactFlow
-            defaultEdgeOptions={{ selectable: false }}
-            edgeTypes={GRAPH_EDGE_TYPES}
-            edges={edges}
-            fitView
-            fitViewOptions={{ padding: 0.2 }}
-            maxZoom={1.25}
-            minZoom={0.5}
-            nodeTypes={GENERIC_GRAPH_NODE_TYPES}
-            nodes={nodes}
-            nodesConnectable={false}
-            nodesDraggable={false}
-            panOnDrag={true}
-            proOptions={{ hideAttribution: true }}
-            zoomOnScroll={true}
-          >
-            <Background gap={16} size={1} />
-            <Controls showInteractive={false} />
-          </ReactFlow>
-        </GraphViewportSurface>
-      </div>
-    </ReactFlowProvider>
-  );
-}

package/src/graphs/graph-node-button.tsx

@@ -1,51 +0,0 @@
-import { type ButtonHTMLAttributes, forwardRef } from "react";
-
-import { cn } from "../utilities/cn";
-import {
-  type GraphNodeState,
-  graphNodeButtonIsDisabled,
-  graphNodeButtonStateAttributes,
-  graphNodeButtonStateClassName,
-} from "./graph-node-state";
-
-export type GraphNodeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  graphState?: GraphNodeState;
-  stateLabel?: string;
-};
-
-export const GRAPH_NODE_BUTTON_BASE_CLASS =
-  "nodrag nopan cursor-pointer border-0 bg-transparent p-0 text-left text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-af-focus-ring disabled:cursor-not-allowed disabled:opacity-100";
-
-export const GraphNodeButton = forwardRef<
-  HTMLButtonElement,
-  GraphNodeButtonProps
->(function GraphNodeButton(
-  {
-    className,
-    disabled,
-    graphState = "default",
-    onClick,
-    stateLabel,
-    type = "button",
-    ...props
-  },
-  ref,
-) {
-  const isDisabled = graphNodeButtonIsDisabled(graphState, disabled);
-
-  return (
-    <button
-      className={cn(
-        GRAPH_NODE_BUTTON_BASE_CLASS,
-        graphNodeButtonStateClassName(graphState),
-        className,
-      )}
-      disabled={isDisabled}
-      onClick={isDisabled ? undefined : onClick}
-      ref={ref}
-      type={type}
-      {...graphNodeButtonStateAttributes(graphState, stateLabel)}
-      {...props}
-    />
-  );
-});

package/src/graphs/graph-node-handle-badge.tsx

@@ -1,108 +0,0 @@
-import { Handle, Position } from "@xyflow/react";
-import type { CSSProperties } from "react";
-
-import { cn } from "../utilities/cn";
-import type { GraphNodeHandle, GraphNodeHandleTone } from "./graph-node-handle";
-
-export interface GraphNodeHandleBadgeProps {
-  handle: GraphNodeHandle;
-}
-
-export function GraphNodeHandleBadge({ handle }: GraphNodeHandleBadgeProps) {
-  const position = handle.side === "left" ? Position.Left : Position.Right;
-  const overlayHandleStyle = anchoredHandleStyle(handle.side);
-
-  if (handle.hidden) {
-    return (
-      <Handle
-        className="pointer-events-none !top-1/2 opacity-0"
-        id={handle.id}
-        isConnectable={handle.connectable ?? false}
-        position={position}
-        style={overlayHandleStyle}
-        type={handle.type}
-      />
-    );
-  }
-
-  const tone = handle.tone ?? "default";
-
-  return (
-    <div
-      className="pointer-events-none relative flex h-5 w-5 items-center justify-center"
-      data-node-handle-badge={handle.id}
-      data-node-handle-invalid={handle.validationError ? "true" : undefined}
-      data-node-handle-tone={tone}
-    >
-      <Handle
-        aria-invalid={handle.validationError ? true : undefined}
-        aria-label={handle.buttonAriaLabel ?? handle.label}
-        className={cn(
-          "pointer-events-auto absolute !top-1/2 !h-5 !w-5 !border-0 !bg-transparent",
-          "before:pointer-events-none before:absolute before:top-1/2 before:h-2.5 before:w-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border before:border-surface before:bg-[var(--node-handle-background)] before:shadow-sm before:transition before:content-['']",
-          handle.side === "left" ? "before:left-0" : "before:left-full",
-          handle.buttonPressed &&
-            "before:scale-125 before:shadow-[0_0_0_3px_var(--color-primary-container)]",
-          handle.variant === "valid-target" &&
-            "before:scale-125 before:shadow-[0_0_0_3px_var(--color-success-container)]",
-          handle.variant === "error" &&
-            "before:border-af-danger-border before:shadow-[0_0_0_3px_var(--color-error-container)] motion-safe:before:animate-pulse",
-          handle.validationError &&
-            "before:ring-2 before:ring-af-danger-border motion-safe:before:animate-pulse",
-        )}
-        id={handle.id}
-        isConnectable={handle.connectable ?? true}
-        onClick={handle.onButtonClick}
-        position={position}
-        style={
-          {
-            ...overlayHandleStyle,
-            "--node-handle-background": handleDotColor(tone),
-            opacity: handle.buttonDisabled ? 0.45 : undefined,
-          } as CSSProperties
-        }
-        title={handle.buttonTitle ?? handle.validationMessage}
-        type={handle.type}
-      />
-    </div>
-  );
-}
-
-function handleDotColor(tone: GraphNodeHandleTone): string {
-  switch (tone) {
-    case "assignment":
-      return "var(--color-success)";
-    case "continue":
-      return "var(--color-secondary)";
-    case "failure":
-      return "var(--color-error)";
-    case "input":
-      return "var(--color-success)";
-    case "output":
-      return "var(--color-success)";
-    case "rejection":
-      return "var(--color-warning)";
-    case "resource":
-      return "var(--color-black)";
-    case "worker":
-      return "var(--color-purple-500)";
-    default:
-      return "var(--color-success)";
-  }
-}
-
-function anchoredHandleStyle(
-  side: GraphNodeHandle["side"],
-): CSSProperties {
-  return side === "left"
-    ? {
-        left: "50%",
-        top: "50%",
-        transform: "translateY(-50%)",
-      }
-    : {
-        left: "50%",
-        top: "50%",
-        transform: "translate(-100%, -50%)",
-      };
-}

package/src/graphs/graph-node-handle.ts

@@ -1,28 +0,0 @@
-export type GraphNodeHandleTone =
-  | "assignment"
-  | "continue"
-  | "default"
-  | "failure"
-  | "input"
-  | "output"
-  | "rejection"
-  | "resource"
-  | "worker";
-
-export interface GraphNodeHandle {
-  buttonAriaLabel?: string;
-  buttonDisabled?: boolean;
-  buttonPressed?: boolean;
-  buttonTitle?: string;
-  connectable?: boolean;
-  hidden?: boolean;
-  id: string;
-  label: string;
-  onButtonClick?: () => void;
-  side: "left" | "right";
-  tone?: GraphNodeHandleTone;
-  type: "source" | "target";
-  validationError?: boolean;
-  validationMessage?: string;
-  variant?: "default" | "error" | "muted" | "selected" | "valid-target";
-}

package/src/graphs/graph-node-shell.tsx

@@ -1,111 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-import { cn } from "../utilities/cn";
-import { GraphNodeHandleBadge } from "./graph-node-handle-badge";
-import type { GraphNodeHandle } from "./graph-node-handle";
-import { GraphNodeStateIndicator } from "./graph-node-state-indicator";
-import {
-  GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS,
-  type GraphNodeState,
-  graphNodeShellStateAttributes,
-  graphNodeShellStateClassName,
-} from "./graph-node-state";
-
-export interface GraphNodeShellProps
-  extends Omit<HTMLAttributes<HTMLElement>, "children"> {
-  children: ReactNode;
-  className?: string;
-  handles: GraphNodeHandle[];
-  nodeKind?: string;
-  showStateIndicator?: boolean;
-  state?: GraphNodeState;
-  stateLabel?: string;
-}
-
-export function GraphNodeShell({
-  children,
-  className = "",
-  handles,
-  nodeKind,
-  showStateIndicator = true,
-  state = "default",
-  stateLabel,
-  ...articleProps
-}: GraphNodeShellProps) {
-  const leftHandles = handles.filter((handle) => handle.side === "left");
-  const rightHandles = handles.filter((handle) => handle.side === "right");
-
-  return (
-    <article
-      className={cn(
-        "relative flex h-full min-w-0 w-full overflow-visible rounded-lg border border-outline bg-surface text-on-surface",
-        graphNodeShellStateClassName(state),
-        className,
-      )}
-      data-graph-node-kind={nodeKind}
-      {...graphNodeShellStateAttributes(state, stateLabel)}
-      {...articleProps}
-    >
-      <NodeHandleRail handles={leftHandles} side="left" />
-      <NodeHandleRail handles={rightHandles} side="right" />
-      <div
-        className={cn(
-          "flex h-full min-w-0 w-full flex-col gap-1 py-3",
-          showStateIndicator && GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS,
-          leftHandles.length > 0 ? "pl-6 pr-3" : "px-3",
-          rightHandles.length > 0 && leftHandles.length > 0
-            ? "pr-6"
-            : rightHandles.length > 0
-              ? "pl-3 pr-6"
-              : null,
-        )}
-      >
-        {showStateIndicator ? (
-          <GraphNodeStateIndicator state={state} stateLabel={stateLabel} />
-        ) : null}
-        {children}
-      </div>
-    </article>
-  );
-}
-
-function NodeHandleRail({
-  handles,
-  side,
-}: {
-  handles: GraphNodeHandle[];
-  side: "left" | "right";
-}) {
-  if (handles.length === 0) {
-    return null;
-  }
-
-  return (
-    <div
-      className={cn(
-        "pointer-events-none absolute inset-y-0 z-20 w-6",
-        side === "left" ? "left-0" : "right-0",
-      )}
-      data-node-handle-rail={side}
-    >
-      {handles.map((handle, index) => (
-        <div
-          className={cn(
-            "absolute top-0 flex -translate-y-1/2",
-            side === "left"
-              ? "left-0 -translate-x-1/2"
-              : "right-0 translate-x-1/2",
-          )}
-          key={handle.id}
-          style={{ top: handlePosition(index, handles.length) }}
-        >
-          <GraphNodeHandleBadge handle={handle} />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function handlePosition(index: number, count: number): string {
-  return `${((index + 1) * 100) / (count + 1)}%`;
-}

package/src/graphs/graph-node-state-indicator.tsx

@@ -1,47 +0,0 @@
-import { cn } from "../utilities/cn";
-import {
-  defaultGraphNodeStateLabel,
-  GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS,
-  type GraphNodeState,
-} from "./graph-node-state";
-
-export interface GraphNodeStateIndicatorProps {
-  state: GraphNodeState;
-  stateLabel?: string;
-}
-
-export function GraphNodeStateIndicator({
-  state,
-  stateLabel,
-}: GraphNodeStateIndicatorProps) {
-  const label = stateLabel ?? defaultGraphNodeStateLabel(state);
-  const showIndicator = state === "loading" || state === "error";
-
-  return (
-    <div
-      aria-hidden={showIndicator ? undefined : true}
-      className={cn(
-        GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS,
-        "flex items-center gap-2 text-[0.65rem] font-semibold uppercase tracking-[0.08em]",
-        state === "error" ? "text-on-error-container" : "text-on-surface-variant",
-        !showIndicator && "invisible",
-      )}
-      data-graph-node-state-indicator={showIndicator ? state : undefined}
-    >
-      {state === "loading" ? (
-        <>
-          <span
-            aria-hidden="true"
-            className="inline-block h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-outline border-t-primary"
-            data-graph-node-loading-spinner="true"
-          />
-          <span>{label ?? "Loading"}</span>
-        </>
-      ) : state === "error" ? (
-        <span role="alert">{label ?? "Error"}</span>
-      ) : (
-        <span aria-hidden="true">&nbsp;</span>
-      )}
-    </div>
-  );
-}

package/src/graphs/graph-node-state.ts

@@ -1,111 +0,0 @@
-import { cn } from "../utilities/cn";
-
-export type GraphNodeState =
-  | "default"
-  | "selected"
-  | "disabled"
-  | "loading"
-  | "error";
-
-export const GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS = "min-h-12";
-
-export const GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS = "min-h-5";
-
-export function graphNodeShellStateClassName(state: GraphNodeState): string {
-  switch (state) {
-    case "selected":
-      return cn(
-        "border-2 border-primary bg-primary-container",
-        "shadow-[0_0_0_1px_rgb(from_var(--color-primary)_r_g_b_/_0.28),0_0_0_4px_rgb(from_var(--color-primary)_r_g_b_/_0.08)]",
-      );
-    case "error":
-      return cn(
-        "border-2 border-dashed border-error bg-error-container",
-        "shadow-[0_0_0_3px_var(--color-error-container)]",
-      );
-    case "disabled":
-      return "border-outline-variant bg-surface-container text-on-surface";
-    case "loading":
-      return "border-outline bg-surface";
-    default:
-      return "";
-  }
-}
-
-export function graphNodeButtonStateClassName(state: GraphNodeState): string {
-  switch (state) {
-    case "selected":
-      return "ring-2 ring-primary/30";
-    case "error":
-      return "ring-2 ring-error/40";
-    case "disabled":
-    case "loading":
-      return "cursor-not-allowed";
-    default:
-      return "";
-  }
-}
-
-export function graphNodeShellStateAttributes(
-  state: GraphNodeState,
-  stateLabel?: string,
-): {
-  "aria-busy"?: boolean;
-  "aria-disabled"?: boolean;
-  "aria-invalid"?: boolean;
-  "aria-label"?: string;
-  "aria-selected"?: boolean;
-  "data-graph-node-state"?: GraphNodeState;
-} {
-  return {
-    "aria-busy": state === "loading" ? true : undefined,
-    "aria-disabled": state === "disabled" ? true : undefined,
-    "aria-invalid": state === "error" ? true : undefined,
-    "aria-label": stateLabel,
-    "aria-selected": state === "selected" ? true : undefined,
-    "data-graph-node-state": state === "default" ? undefined : state,
-  };
-}
-
-export function graphNodeButtonStateAttributes(
-  state: GraphNodeState,
-  stateLabel?: string,
-): {
-  "aria-busy"?: boolean;
-  "aria-disabled"?: boolean;
-  "aria-invalid"?: boolean;
-  "aria-label"?: string;
-  "aria-pressed"?: boolean;
-  "data-graph-node-state"?: GraphNodeState;
-} {
-  return {
-    "aria-busy": state === "loading" ? true : undefined,
-    "aria-disabled": state === "disabled" ? true : undefined,
-    "aria-invalid": state === "error" ? true : undefined,
-    "aria-label": stateLabel,
-    "aria-pressed": state === "selected" ? true : undefined,
-    "data-graph-node-state": state === "default" ? undefined : state,
-  };
-}
-
-export function graphNodeButtonIsDisabled(
-  state: GraphNodeState,
-  disabled?: boolean,
-): boolean {
-  return disabled === true || state === "disabled" || state === "loading";
-}
-
-export function defaultGraphNodeStateLabel(state: GraphNodeState): string | undefined {
-  switch (state) {
-    case "selected":
-      return "Selected node";
-    case "disabled":
-      return "Disabled node";
-    case "loading":
-      return "Loading node";
-    case "error":
-      return "Error node";
-    default:
-      return undefined;
-  }
-}

package/src/graphs/graph-viewport-surface.tsx

@@ -1,27 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
-
-import { cn } from "../utilities/cn";
-
-export interface GraphViewportSurfaceProps extends HTMLAttributes<HTMLElement> {
-  children: ReactNode;
-}
-
-export const GraphViewportSurface = forwardRef<
-  HTMLElement,
-  GraphViewportSurfaceProps
->(function GraphViewportSurface({ children, className, role, ...props }, ref) {
-  return (
-    <section
-      className={cn(
-        "relative min-h-0 overflow-hidden rounded-3xl border shadow-none transition-colors",
-        className,
-      )}
-      data-graph-viewport-surface="true"
-      ref={ref}
-      role={role ?? "region"}
-      {...props}
-    >
-      {children}
-    </section>
-  );
-});