@aiready/components 0.14.3 → 0.14.5

package/src/components/__tests__/switch.test.tsx

@@ -1,85 +1,45 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
 import { Switch } from '../switch';
 
 describe('Switch', () => {
-  it('should render a switch', () => {
-    render(<Switch />);
-    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  it('renders switch', () => {
+    render(<Switch data-testid="switch" />);
+    expect(screen.getByTestId('switch')).toBeInTheDocument();
   });
 
-  it('should render with a label', () => {
-    render(<Switch label="Toggle me" />);
-    expect(screen.getByText('Toggle me')).toBeInTheDocument();
+  it('applies custom className', () => {
+    render(<Switch className="custom-switch" data-testid="switch" />);
+    expect(screen.getByTestId('switch')).toHaveClass('custom-switch');
   });
 
-  it('should not render label when not provided', () => {
-    const { container } = render(<Switch />);
-    expect(container.querySelector('span')).not.toBeInTheDocument();
+  it('renders as button role', () => {
+    render(<Switch data-testid="switch" />);
+    const switchEl = screen.getByTestId('switch');
+    expect(switchEl).toHaveAttribute('role', 'switch');
   });
 
-  it('should apply custom className', () => {
-    const { container } = render(<Switch className="custom-class" />);
-    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  it('has unchecked state by default', () => {
+    render(<Switch data-testid="switch" />);
+    const switchEl = screen.getByTestId('switch');
+    expect(switchEl).toHaveAttribute('aria-checked', 'false');
   });
 
-  it('should handle checked state', () => {
-    render(<Switch checked readOnly />);
-    expect(screen.getByRole('checkbox')).toBeChecked();
+  it('can be checked', () => {
+    render(<Switch checked data-testid="switch" />);
+    const switchEl = screen.getByTestId('switch');
+    expect(switchEl).toHaveAttribute('aria-checked', 'true');
   });
 
-  it('should handle unchecked state', () => {
-    render(<Switch checked={false} readOnly />);
-    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  it('is disabled when disabled prop is true', () => {
+    render(<Switch disabled data-testid="switch" />);
+    const switchEl = screen.getByTestId('switch');
+    expect(switchEl).toBeDisabled();
   });
 
-  it('should call onChange when clicked', () => {
-    const handleChange = vi.fn();
-    render(<Switch onChange={handleChange} />);
-    fireEvent.click(screen.getByRole('checkbox'));
-    expect(handleChange).toHaveBeenCalledTimes(1);
-  });
-
-  it('should call onCheckedChange when clicked', () => {
-    const handleCheckedChange = vi.fn();
-    render(<Switch onCheckedChange={handleCheckedChange} />);
-    fireEvent.click(screen.getByRole('checkbox'));
-    expect(handleCheckedChange).toHaveBeenCalledTimes(1);
-    expect(handleCheckedChange).toHaveBeenCalledWith(true);
-  });
-
-  it('should call onCheckedChange with false when unchecking', () => {
-    const handleCheckedChange = vi.fn();
-    render(<Switch checked onCheckedChange={handleCheckedChange} />);
-    fireEvent.click(screen.getByRole('checkbox'));
-    expect(handleCheckedChange).toHaveBeenCalledWith(false);
-  });
-
-  it('should be disabled when disabled prop is set', () => {
-    render(<Switch disabled />);
-    expect(screen.getByRole('checkbox')).toBeDisabled();
-  });
-
-  it('should forward ref', () => {
-    const ref = { current: null };
-    render(<Switch ref={ref} />);
-    expect(ref.current).not.toBeNull();
-  });
-
-  it('should use provided id', () => {
-    render(<Switch id="custom-id" label="Test" />);
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toHaveAttribute('id', 'custom-id');
-  });
-
-  it('should generate unique id when not provided', () => {
-    render(<Switch label="Test" />);
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toHaveAttribute('id');
-  });
-
-  it('should have sr-only class on input', () => {
-    render(<Switch />);
-    expect(screen.getByRole('checkbox')).toHaveClass('sr-only');
+  it('has default styling', () => {
+    render(<Switch data-testid="switch" />);
+    const switchEl = screen.getByTestId('switch');
+    expect(switchEl).toHaveClass('peer', 'inline-flex');
   });
 });

package/src/components/__tests__/textarea.test.tsx

@@ -1,96 +1,48 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
 import { Textarea } from '../textarea';
 
 describe('Textarea', () => {
-  it('should render a textarea element', () => {
-    render(<Textarea />);
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  it('renders textarea', () => {
+    render(<Textarea data-testid="textarea" />);
+    expect(screen.getByTestId('textarea')).toBeInTheDocument();
   });
 
-  it('should apply custom className', () => {
-    const { container } = render(<Textarea className="custom-class" />);
-    expect(container.firstChild).toHaveClass('custom-class');
+  it('applies custom className', () => {
+    render(<Textarea className="custom-textarea" data-testid="textarea" />);
+    expect(screen.getByTestId('textarea')).toHaveClass('custom-textarea');
   });
 
-  it('should handle placeholder text', () => {
-    render(<Textarea placeholder="Enter text" />);
-    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
-  });
-
-  it('should forward ref', () => {
-    const ref = { current: null };
-    render(<Textarea ref={ref} />);
-    expect(ref.current).not.toBeNull();
-  });
-
-  it('should be disabled when disabled prop is set', () => {
-    render(<Textarea disabled />);
-    expect(screen.getByRole('textbox')).toBeDisabled();
-  });
-
-  it('should handle value prop', () => {
-    render(<Textarea value="test value" readOnly />);
-    expect(screen.getByRole('textbox')).toHaveValue('test value');
-  });
-
-  it('should spread additional props', () => {
-    const { container } = render(<Textarea data-testid="textarea" />);
-    expect(container.firstChild).toHaveAttribute('data-testid', 'textarea');
-  });
-
-  it('should call onChange when text is entered', () => {
-    const handleChange = vi.fn();
-    render(<Textarea onChange={handleChange} />);
-    fireEvent.change(screen.getByRole('textbox'), {
-      target: { value: 'new text' },
-    });
-    expect(handleChange).toHaveBeenCalledTimes(1);
+  it('renders as textarea element', () => {
+    render(<Textarea data-testid="textarea" />);
+    const textarea = screen.getByTestId('textarea');
+    expect(textarea.tagName).toBe('TEXTAREA');
   });
 
-  it('should have default styling classes', () => {
-    const { container } = render(<Textarea />);
-    expect(container.firstChild).toHaveClass(
-      'flex',
-      'min-h-[80px]',
-      'w-full',
-      'rounded-md'
-    );
-  });
-
-  it('should render as a textarea element', () => {
-    render(<Textarea />);
-    expect(screen.getByRole('textbox').tagName).toBe('TEXTAREA');
-  });
-
-  it('should support rows attribute', () => {
-    render(<Textarea rows={5} />);
-    expect(screen.getByRole('textbox')).toHaveAttribute('rows', '5');
+  it('accepts placeholder', () => {
+    render(<Textarea placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
   });
 
-  it('should support maxLength attribute', () => {
-    render(<Textarea maxLength={100} />);
-    expect(screen.getByRole('textbox')).toHaveAttribute('maxlength', '100');
+  it('is disabled when disabled prop is true', () => {
+    render(<Textarea disabled data-testid="textarea" />);
+    expect(screen.getByTestId('textarea')).toBeDisabled();
   });
 
-  it('should have border-input class', () => {
-    const { container } = render(<Textarea />);
-    expect(container.firstChild).toHaveClass('border-input');
+  it('forwards ref correctly', () => {
+    const ref = { current: null };
+    render(<Textarea ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
   });
 
-  it('should have focus ring classes', () => {
-    const { container } = render(<Textarea />);
-    expect(container.firstChild).toHaveClass(
-      'focus-visible:ring-2',
-      'focus-visible:ring-ring'
-    );
+  it('has default styling', () => {
+    render(<Textarea data-testid="textarea" />);
+    const textarea = screen.getByTestId('textarea');
+    expect(textarea).toHaveClass('flex', 'min-h-[80px]', 'w-full');
   });
 
-  it('should have disabled styling classes', () => {
-    const { container } = render(<Textarea disabled />);
-    expect(container.firstChild).toHaveClass(
-      'disabled:cursor-not-allowed',
-      'disabled:opacity-50'
-    );
+  it('accepts rows prop', () => {
+    render(<Textarea rows={5} data-testid="textarea" />);
+    expect(screen.getByTestId('textarea')).toHaveAttribute('rows', '5');
   });
 });

package/src/hooks/useForceSimulation.ts

@@ -10,7 +10,11 @@ import {
   seedCircularPositions,
   safelyStopSimulation,
 } from './simulation-helpers';
-import { SIMULATION_DEFAULTS, FORCE_NAMES, EVENT_NAMES } from './simulation-constants';
+import {
+  SIMULATION_DEFAULTS,
+  FORCE_NAMES,
+  EVENT_NAMES,
+} from './simulation-constants';
 import type {
   SimulationNode,
   SimulationLink,
@@ -62,7 +66,10 @@ export function useForceSimulation(
   const [isRunning, setIsRunning] = useState(false);
   const [alpha, setAlpha] = useState(1);
 
-  const simulationRef = useRef<d3.Simulation<SimulationNode, SimulationLink> | null>(null);
+  const simulationRef = useRef<d3.Simulation<
+    SimulationNode,
+    SimulationLink
+  > | null>(null);
   const stopTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const forcesEnabledRef = useRef(true);
   const originalForcesRef = useRef({
@@ -74,9 +81,15 @@ export function useForceSimulation(
   const nodesKey = initialNodes.map((n) => n.id).join('|');
   const linksKey = initialLinks
     .map((l) => {
-      const sourceId = typeof l.source === 'string' ? l.source : (l.source as SimulationNode)?.id;
-      const targetId = typeof l.target === 'string' ? l.target : (l.target as SimulationNode)?.id;
-      const linkType = (l as any).type || '';
+      const sourceId =
+        typeof l.source === 'string'
+          ? l.source
+          : (l.source as SimulationNode)?.id;
+      const targetId =
+        typeof l.target === 'string'
+          ? l.target
+          : (l.target as SimulationNode)?.id;
+      const linkType = (l as { type?: string }).type || '';
       return `${sourceId}->${targetId}:${linkType}`;
     })
     .join('|');
@@ -91,11 +104,16 @@ export function useForceSimulation(
     try {
       seedCircularPositions(nodesCopy, width, height);
     } catch (error) {
-      console.warn('AIReady: Position seeding failed, using random fallback:', error);
+      console.warn(
+        'AIReady: Position seeding failed, using random fallback:',
+        error
+      );
       seedRandomPositions(nodesCopy, width, height);
     }
 
-    const simulation = d3.forceSimulation<SimulationNode, SimulationLink>(nodesCopy);
+    const simulation = d3.forceSimulation<SimulationNode, SimulationLink>(
+      nodesCopy
+    );
     applySimulationForces(simulation, linksCopy);
     configureSimulationParameters(simulation);
 
@@ -138,19 +156,31 @@ export function useForceSimulation(
       const linkForce = d3
         .forceLink<SimulationNode, SimulationLink>(linksCopy)
         .id((d) => d.id)
-        .distance((d) => (d as any).distance ?? linkDistance)
+        .distance((d) => (d as { distance?: number }).distance ?? linkDistance)
         .strength(linkStrength);
 
       simulation
         .force(FORCE_NAMES.LINK, linkForce)
         .force(FORCE_NAMES.CHARGE, d3.forceManyBody().strength(chargeStrength))
-        .force(FORCE_NAMES.CENTER, d3.forceCenter(width / 2, height / 2).strength(centerStrength))
+        .force(
+          FORCE_NAMES.CENTER,
+          d3.forceCenter(width / 2, height / 2).strength(centerStrength)
+        )
         .force(
           FORCE_NAMES.COLLISION,
-          d3.forceCollide<SimulationNode>().radius((d) => (d.size ?? 10) + collisionRadius).strength(collisionStrength)
+          d3
+            .forceCollide<SimulationNode>()
+            .radius((d) => (d.size ?? 10) + collisionRadius)
+            .strength(collisionStrength)
+        )
+        .force(
+          FORCE_NAMES.X,
+          d3.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5))
         )
-        .force(FORCE_NAMES.X, d3.forceX(width / 2).strength(Math.max(0.02, centerStrength * 0.5)))
-        .force(FORCE_NAMES.Y, d3.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5)));
+        .force(
+          FORCE_NAMES.Y,
+          d3.forceY(height / 2).strength(Math.max(0.02, centerStrength * 0.5))
+        );
     } catch (error) {
       console.warn('AIReady: Failed to configure simulation forces:', error);
     }
@@ -159,7 +189,9 @@ export function useForceSimulation(
   /**
    * Configures simulation decay and heat parameters
    */
-  const configureSimulationParameters = (simulation: d3.Simulation<SimulationNode, SimulationLink>) => {
+  const configureSimulationParameters = (
+    simulation: d3.Simulation<SimulationNode, SimulationLink>
+  ) => {
     simulation
       .alphaDecay(alphaDecay)
       .velocityDecay(velocityDecay)
@@ -182,7 +214,9 @@ export function useForceSimulation(
 
     if (maxSimulationTimeMs > 0) {
       stopTimeoutRef.current = setTimeout(() => {
-        safelyStopSimulation(simulation, nodesCopy, { stabilize: stabilizeOnStop });
+        safelyStopSimulation(simulation, nodesCopy, {
+          stabilize: stabilizeOnStop,
+        });
         updateStateAfterStop(nodesCopy, linksCopy, 0);
       }, maxSimulationTimeMs);
     }
@@ -222,7 +256,9 @@ export function useForceSimulation(
 
       const currentAlpha = simulation.alpha();
       if (currentAlpha <= alphaMin) {
-        safelyStopSimulation(simulation, nodesCopy, { stabilize: stabilizeOnStop });
+        safelyStopSimulation(simulation, nodesCopy, {
+          stabilize: stabilizeOnStop,
+        });
         updateStateAfterStop(nodesCopy, linksCopy, currentAlpha);
         return;
       }
@@ -244,7 +280,10 @@ export function useForceSimulation(
     rafState: { rafId: number | null; lastUpdate: number }
   ) => {
     const now = Date.now();
-    if (rafState.rafId === null && now - rafState.lastUpdate >= tickThrottleMs) {
+    if (
+      rafState.rafId === null &&
+      now - rafState.lastUpdate >= tickThrottleMs
+    ) {
       rafState.rafId = requestAnimationFrame(() => {
         rafState.rafId = null;
         rafState.lastUpdate = Date.now();
@@ -305,28 +344,36 @@ export function useForceSimulation(
   /**
    * Enable or disable simulation forces
    */
-  const setForcesEnabled = useCallback((enabled: boolean) => {
-    const sim = simulationRef.current;
-    if (!sim || forcesEnabledRef.current === enabled) return;
-    
-    forcesEnabledRef.current = enabled;
+  const setForcesEnabled = useCallback(
+    (enabled: boolean) => {
+      const sim = simulationRef.current;
+      if (!sim || forcesEnabledRef.current === enabled) return;
+
+      forcesEnabledRef.current = enabled;
+
+      try {
+        const charge = sim.force(
+          FORCE_NAMES.CHARGE
+        ) as d3.ForceManyBody<SimulationNode> | null;
+        if (charge) {
+          charge.strength(enabled ? originalForcesRef.current.charge : 0);
+        }
 
-    try {
-      const charge = sim.force(FORCE_NAMES.CHARGE) as d3.ForceManyBody<SimulationNode> | null;
-      if (charge) {
-        charge.strength(enabled ? originalForcesRef.current.charge : 0);
-      }
+        const link = sim.force(FORCE_NAMES.LINK) as d3.ForceLink<
+          SimulationNode,
+          SimulationLink
+        > | null;
+        if (link) {
+          link.strength(enabled ? originalForcesRef.current.link : 0);
+        }
 
-      const link = sim.force(FORCE_NAMES.LINK) as d3.ForceLink<SimulationNode, SimulationLink> | null;
-      if (link) {
-        link.strength(enabled ? originalForcesRef.current.link : 0);
+        sim.alpha(warmAlpha).restart();
+      } catch (error) {
+        console.warn('AIReady: Failed to toggle simulation forces:', error);
       }
-      
-      sim.alpha(warmAlpha).restart();
-    } catch (error) {
-      console.warn('AIReady: Failed to toggle simulation forces:', error);
-    }
-  }, [warmAlpha]);
+    },
+    [warmAlpha]
+  );
 
   return {
     nodes,
@@ -342,7 +389,9 @@ export function useForceSimulation(
 /**
  * Hook for creating a draggable force simulation
  */
-export function useDrag(simulation: d3.Simulation<SimulationNode, any> | null | undefined) {
+export function useDrag(
+  simulation: d3.Simulation<SimulationNode, any> | null | undefined
+) {
   const handleDragStart = useCallback(
     (event: any, node: SimulationNode) => {
       if (!simulation) return;