@aiready/components 0.13.18 → 0.13.20

package/src/charts/{hooks.ts → force-directed/useGraphInteractions.ts}

@@ -1,7 +1,24 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import * as d3 from 'd3';
 import { GraphNode } from './types';
 
+/** Pins a node to its current position (sets fx/fy to current x/y) */
+export function pinNode(node: GraphNode): void {
+  node.fx = node.x;
+  node.fy = node.y;
+}
+
+/** Unpins a node (sets fx/fy to null) */
+export function unpinNode(node: GraphNode): void {
+  node.fx = null;
+  node.fy = null;
+}
+
+/** Unpins all nodes - helper for bulk unpin operations */
+export function unpinAllNodes(nodes: GraphNode[]): void {
+  nodes.forEach(unpinNode);
+}
+
 /**
  * Hook for managing D3 zoom behavior on an SVG element.
  */
@@ -85,3 +102,49 @@ export function useWindowDrag(
     };
   }, [enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, onDragEnd]);
 }
+
+/**
+ * Hook for managing node interactions (drag, double-click pinning).
+ */
+export function useNodeInteractions(
+  enableDrag: boolean,
+  _nodes: GraphNode[],
+  _pinnedNodes: Set<string>,
+  setPinnedNodes: React.Dispatch<React.SetStateAction<Set<string>>>,
+  restart: () => void,
+  stop: () => void
+) {
+  const handleDragStart = useCallback(
+    (event: React.MouseEvent, node: GraphNode) => {
+      if (!enableDrag) return;
+      event.preventDefault();
+      event.stopPropagation();
+      pinNode(node);
+      setPinnedNodes((prev) => new Set([...prev, node.id]));
+      stop();
+    },
+    [enableDrag, stop, setPinnedNodes]
+  );
+
+  const handleNodeDoubleClick = useCallback(
+    (event: React.MouseEvent, node: GraphNode) => {
+      event.stopPropagation();
+      if (!enableDrag) return;
+      if (node.fx === null || node.fx === undefined) {
+        pinNode(node);
+        setPinnedNodes((prev) => new Set([...prev, node.id]));
+      } else {
+        unpinNode(node);
+        setPinnedNodes((prev) => {
+          const next = new Set(prev);
+          next.delete(node.id);
+          return next;
+        });
+      }
+      restart();
+    },
+    [enableDrag, restart, setPinnedNodes]
+  );
+
+  return { handleDragStart, handleNodeDoubleClick };
+}

package/src/charts/force-directed/useGraphLayout.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { GraphNode, LayoutType } from './types';
+import {
+  applyCircularLayout,
+  applyHierarchicalLayout,
+  applyInitialForceLayout,
+} from '../layout-utils';
+
+/**
+ * Hook for managing graph layout algorithms.
+ */
+export function useGraphLayout(
+  initialNodes: GraphNode[],
+  width: number,
+  height: number,
+  layout: LayoutType,
+  restart: () => void
+) {
+  // Initial positioning - delegate to layout utils
+  const nodes = useMemo(() => {
+    if (!initialNodes || !initialNodes.length) return initialNodes;
+    const copy = initialNodes.map((n) => ({ ...n }));
+    if (layout === 'circular') applyCircularLayout(copy, width, height);
+    else if (layout === 'hierarchical')
+      applyHierarchicalLayout(copy, width, height);
+    else applyInitialForceLayout(copy, width, height);
+    return copy;
+  }, [initialNodes, width, height, layout]);
+
+  // Apply layout-specific positioning when layout changes
+  useEffect(() => {
+    if (!nodes || nodes.length === 0) return;
+    if (layout === 'circular') applyCircularLayout(nodes, width, height);
+    else if (layout === 'hierarchical')
+      applyHierarchicalLayout(nodes, width, height);
+
+    restart();
+  }, [layout, nodes, width, height, restart]);
+
+  return { nodes };
+}
+
+/**
+ * Hook for managing simulation controls (stubs for API compatibility).
+ */
+export function useSimulationControls() {
+  const restart = useCallback(() => {}, []);
+  const stop = useCallback(() => {}, []);
+  const setForcesEnabled = useCallback((enabled?: boolean) => {
+    void enabled;
+  }, []);
+
+  return { restart, stop, setForcesEnabled };
+}

package/src/charts/force-directed/useImperativeHandle.ts

@@ -0,0 +1,131 @@
+import { useCallback } from 'react';
+import * as d3 from 'd3';
+import { GraphNode, LayoutType, ForceDirectedGraphHandle } from './types';
+import { pinNode, unpinAllNodes } from './useGraphInteractions';
+import {
+  DEFAULT_NODE_SIZE,
+  FIT_VIEW_PADDING,
+  TRANSITION_DURATION_MS,
+} from '../constants';
+
+interface UseImperativeHandleProps {
+  nodes: GraphNode[];
+  pinnedNodes: Set<string>;
+  setPinnedNodes: React.Dispatch<React.SetStateAction<Set<string>>>;
+  restart: () => void;
+  width: number;
+  height: number;
+  layout: LayoutType;
+  handleLayoutChange: (layout: LayoutType) => void;
+  setForcesEnabled: (enabled: boolean) => void;
+  svgRef: React.RefObject<SVGSVGElement | null>;
+  gRef: React.RefObject<SVGGElement | null>;
+  setTransform: (transform: { k: number; x: number; y: number }) => void;
+  internalDragEnabledRef: React.MutableRefObject<boolean>;
+}
+
+/**
+ * Creates the imperative handle methods for the ForceDirectedGraph component.
+ */
+export function useImperativeHandleMethods({
+  nodes,
+  pinnedNodes,
+  setPinnedNodes,
+  restart,
+  width,
+  height,
+  layout,
+  handleLayoutChange,
+  svgRef,
+  gRef,
+  setTransform,
+  internalDragEnabledRef,
+}: UseImperativeHandleProps): ForceDirectedGraphHandle {
+  const pinAll = useCallback(() => {
+    const newPinned = new Set<string>();
+    nodes.forEach((node) => {
+      pinNode(node);
+      newPinned.add(node.id);
+    });
+    setPinnedNodes(newPinned);
+    restart();
+  }, [nodes, setPinnedNodes, restart]);
+
+  const unpinAll = useCallback(() => {
+    unpinAllNodes(nodes);
+    setPinnedNodes(new Set());
+    restart();
+  }, [nodes, setPinnedNodes, restart]);
+
+  const resetLayout = useCallback(() => {
+    unpinAllNodes(nodes);
+    setPinnedNodes(new Set());
+    restart();
+  }, [nodes, setPinnedNodes, restart]);
+
+  const fitView = useCallback(() => {
+    if (!svgRef.current || !nodes.length) return;
+    let minX = Infinity,
+      maxX = -Infinity,
+      minY = Infinity,
+      maxY = -Infinity;
+    nodes.forEach((node) => {
+      if (node.x !== undefined && node.y !== undefined) {
+        const size = node.size || DEFAULT_NODE_SIZE;
+        minX = Math.min(minX, node.x - size);
+        maxX = Math.max(maxX, node.x + size);
+        minY = Math.min(minY, node.y - size);
+        maxY = Math.max(maxY, node.y + size);
+      }
+    });
+    if (!isFinite(minX)) return;
+    const scale = Math.min(
+      (width - FIT_VIEW_PADDING * 2) / (maxX - minX),
+      (height - FIT_VIEW_PADDING * 2) / (maxY - minY),
+      10
+    );
+    const x = width / 2 - ((minX + maxX) / 2) * scale;
+    const y = height / 2 - ((minY + maxY) / 2) * scale;
+    if (gRef.current && svgRef.current) {
+      const svg = d3.select(svgRef.current);
+      const newTransform = d3.zoomIdentity.translate(x, y).scale(scale);
+      svg
+        .transition()
+        .duration(TRANSITION_DURATION_MS)
+        .call((d3 as any).zoom().transform as any, newTransform);
+      setTransform(newTransform);
+    }
+  }, [nodes, width, height, svgRef, gRef, setTransform]);
+
+  const getPinnedNodes = useCallback(
+    () => Array.from(pinnedNodes),
+    [pinnedNodes]
+  );
+
+  const setDragMode = useCallback(
+    (enabled: boolean) => {
+      internalDragEnabledRef.current = enabled;
+    },
+    [internalDragEnabledRef]
+  );
+
+  const setLayoutMethod = useCallback(
+    (newLayout: LayoutType) => {
+      handleLayoutChange(newLayout);
+    },
+    [handleLayoutChange]
+  );
+
+  const getLayout = useCallback(() => layout, [layout]);
+
+  return {
+    pinAll,
+    unpinAll,
+    resetLayout,
+    fitView,
+    getPinnedNodes,
+    setDragMode,
+    setLayout: setLayoutMethod,
+    getLayout,
+  };
+}

package/src/charts/layout-utils.ts

@@ -1,4 +1,4 @@
-import { GraphNode } from './types';
+import { GraphNode } from './force-directed/types';
 import { CIRCULAR_LAYOUT_RADIUS_RATIO } from './constants';
 
 /**

package/src/components/feedback/__tests__/badge.test.tsx

@@ -0,0 +1,92 @@
+// @vitest-environment jsdom
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import '@testing-library/jest-dom';
+import { Badge } from '../../badge';
+
+describe('Badge', () => {
+  describe('Rendering', () => {
+    it('renders with children', () => {
+      render(<Badge>Test Badge</Badge>);
+      expect(screen.getByText('Test Badge')).toBeInTheDocument();
+    });
+
+    it('renders with default variant', () => {
+      render(<Badge data-testid="badge">Default</Badge>);
+      const badge = screen.getByTestId('badge');
+      expect(badge).toBeInTheDocument();
+    });
+  });
+
+  describe('Variants', () => {
+    it('renders default variant', () => {
+      render(
+        <Badge variant="default" data-testid="badge">
+          Default
+        </Badge>
+      );
+      const badge = screen.getByTestId('badge');
+      expect(badge).toHaveClass('bg-primary');
+    });
+
+    it('renders secondary variant', () => {
+      render(
+        <Badge variant="secondary" data-testid="badge">
+          Secondary
+        </Badge>
+      );
+      const badge = screen.getByTestId('badge');
+      expect(badge).toHaveClass('bg-secondary');
+    });
+
+    it('renders destructive variant', () => {
+      render(
+        <Badge variant="destructive" data-testid="badge">
+          Destructive
+        </Badge>
+      );
+      const badge = screen.getByTestId('badge');
+      expect(badge).toHaveClass('bg-destructive');
+    });
+
+    it('renders outline variant', () => {
+      render(
+        <Badge variant="outline" data-testid="badge">
+          Outline
+        </Badge>
+      );
+      const badge = screen.getByTestId('badge');
+      expect(badge).toHaveClass('text-foreground');
+    });
+  });
+
+  describe('Children', () => {
+    it('renders text children', () => {
+      render(<Badge>Badge Text</Badge>);
+      expect(screen.getByText('Badge Text')).toBeInTheDocument();
+    });
+
+    it('renders complex children', () => {
+      render(
+        <Badge>
+          <span>Icon</span>
+          <span>Label</span>
+        </Badge>
+      );
+      expect(screen.getByText('Icon')).toBeInTheDocument();
+      expect(screen.getByText('Label')).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom className', () => {
+    it('merges custom className with variant classes', () => {
+      render(
+        <Badge className="custom-class" data-testid="badge">
+          Badge
+        </Badge>
+      );
+      const badge = screen.getByTestId('badge');
+      expect(badge).toHaveClass('custom-class');
+    });
+  });
+});

package/src/components/ui/__tests__/button.test.tsx

@@ -0,0 +1,203 @@
+/**
+ * @vitest-environment jsdom
+ */
+import * as React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+import { expect as vitestExpect } from 'vitest';
+import { Button } from '../../button';
+
+// Extend vitest's expect with jest-dom matchers
+vitestExpect.extend(matchers);
+
+describe('Button', () => {
+  describe('rendering', () => {
+    it('renders a button element', () => {
+      render(<Button>Click me</Button>);
+      const button = screen.getByRole('button', { name: /click me/i });
+      expect(button).toBeInTheDocument();
+      expect(button.tagName).toBe('BUTTON');
+    });
+
+    it('renders children correctly', () => {
+      render(<Button>Test Content</Button>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('applies custom className', () => {
+      render(<Button className="custom-class">Click me</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('custom-class');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      render(<Button ref={ref}>Click me</Button>);
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it('passes through HTML attributes', () => {
+      render(
+        <Button data-testid="test-button" type="submit">
+          Click me
+        </Button>
+      );
+      const button = screen.getByTestId('test-button');
+      expect(button).toHaveAttribute('type', 'submit');
+    });
+  });
+
+  describe('variants', () => {
+    it('renders default variant by default', () => {
+      render(<Button>Default</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('bg-primary', 'text-primary-foreground');
+    });
+
+    it('renders secondary variant', () => {
+      render(<Button variant="secondary">Secondary</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('bg-secondary', 'text-secondary-foreground');
+    });
+
+    it('renders outline variant', () => {
+      render(<Button variant="outline">Outline</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('border', 'border-input', 'bg-background');
+    });
+
+    it('renders ghost variant', () => {
+      render(<Button variant="ghost">Ghost</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('hover:bg-accent');
+    });
+
+    it('renders destructive variant', () => {
+      render(<Button variant="destructive">Destructive</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass(
+        'bg-destructive',
+        'text-destructive-foreground'
+      );
+    });
+
+    it('renders link variant', () => {
+      render(<Button variant="link">Link</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('text-primary', 'underline-offset-4');
+    });
+  });
+
+  describe('sizes', () => {
+    it('renders default size by default', () => {
+      render(<Button>Default Size</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('h-10', 'px-4', 'py-2');
+    });
+
+    it('renders sm size', () => {
+      render(<Button size="sm">Small</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('h-9', 'px-3');
+    });
+
+    it('renders lg size', () => {
+      render(<Button size="lg">Large</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('h-11', 'px-8');
+    });
+
+    it('renders icon size', () => {
+      render(<Button size="icon">Icon</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('h-10', 'w-10');
+    });
+  });
+
+  describe('disabled state', () => {
+    it('is disabled when disabled prop is true', () => {
+      render(<Button disabled>Disabled</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+    });
+
+    it('applies disabled styles', () => {
+      render(<Button disabled>Disabled</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass(
+        'disabled:pointer-events-none',
+        'disabled:opacity-50'
+      );
+    });
+
+    it('is not disabled by default', () => {
+      render(<Button>Not Disabled</Button>);
+      const button = screen.getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe('onClick handler', () => {
+    it('calls onClick when clicked', () => {
+      const handleClick = vi.fn();
+      render(<Button onClick={handleClick}>Click me</Button>);
+
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when disabled', () => {
+      const handleClick = vi.fn();
+      render(
+        <Button onClick={handleClick} disabled>
+          Click me
+        </Button>
+      );
+
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('passes event object to onClick handler', () => {
+      const handleClick = vi.fn();
+      render(<Button onClick={handleClick}>Click me</Button>);
+
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+
+      expect(handleClick).toHaveBeenCalledWith(expect.any(Object));
+    });
+  });
+
+  describe('combined props', () => {
+    it('applies multiple props correctly', () => {
+      const handleClick = vi.fn();
+      render(
+        <Button
+          variant="outline"
+          size="lg"
+          className="custom-class"
+          onClick={handleClick}
+          disabled
+        >
+          Combined Props
+        </Button>
+      );
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass(
+        'border',
+        'border-input',
+        'h-11',
+        'px-8',
+        'custom-class'
+      );
+      expect(button).toBeDisabled();
+    });
+  });
+});