@aiready/components 0.14.4 → 0.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiready/components",
-  "version": "0.14.4",
+  "version": "0.14.5",
   "description": "Unified shared components library (UI, charts, hooks, utilities) for AIReady",
   "type": "module",
   "main": "./dist/index.js",
@@ -128,7 +128,7 @@
     "framer-motion": "^12.35.0",
     "lucide-react": "^0.577.0",
     "tailwind-merge": "^3.0.0",
-    "@aiready/core": "0.24.5"
+    "@aiready/core": "0.24.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.5",

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

@@ -35,7 +35,7 @@ export function useGraphZoom(
     const svg = d3.select(svgRef.current);
     const g = d3.select(gRef.current);
 
-    const zoom = (d3 as any)
+    const zoom = (d3 as typeof d3)
       .zoom()
       .scaleExtent([0.1, 10])
       .on('zoom', (event: any) => {
@@ -44,7 +44,7 @@ export function useGraphZoom(
         setTransform(event.transform);
       });
 
-    svg.call(zoom);
+    svg.call(zoom as unknown as any);
 
     return () => {
       svg.on('.zoom', null);

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

@@ -92,7 +92,7 @@ export function useImperativeHandleMethods({
       svg
         .transition()
         .duration(TRANSITION_DURATION_MS)
-        .call((d3 as any).zoom().transform as any, newTransform);
+        .call(d3.zoom().transform as any, newTransform);
       setTransform(newTransform);
     }
   }, [nodes, width, height, svgRef, gRef, setTransform]);

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

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Badge } from '../badge';
+
+describe('Badge', () => {
+  it('renders badge with text', () => {
+    render(<Badge>New</Badge>);
+    expect(screen.getByText('New')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(<Badge className="custom-badge">Test</Badge>);
+    expect(screen.getByText('Test')).toHaveClass('custom-badge');
+  });
+
+  it('renders with default variant', () => {
+    render(<Badge data-testid="badge">Default</Badge>);
+    const badge = screen.getByTestId('badge');
+    expect(badge).toBeInTheDocument();
+  });
+
+  it('renders with different variants', () => {
+    const { rerender } = render(<Badge variant="secondary">Secondary</Badge>);
+    expect(screen.getByText('Secondary')).toBeInTheDocument();
+
+    rerender(<Badge variant="destructive">Destructive</Badge>);
+    expect(screen.getByText('Destructive')).toBeInTheDocument();
+
+    rerender(<Badge variant="outline">Outline</Badge>);
+    expect(screen.getByText('Outline')).toBeInTheDocument();
+  });
+
+  it('renders as inline element', () => {
+    render(<Badge>Inline</Badge>);
+    const badge = screen.getByText('Inline');
+    expect(badge).toHaveClass('inline-flex');
+  });
+});

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

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Button, buttonVariants } from '../button';
+
+describe('Button', () => {
+  it('renders with default variant', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button')).toHaveTextContent('Click me');
+  });
+
+  it('applies custom className', () => {
+    render(<Button className="custom-class">Test</Button>);
+    expect(screen.getByRole('button')).toHaveClass('custom-class');
+  });
+
+  it('renders with different variants', () => {
+    const { rerender } = render(<Button variant="destructive">Delete</Button>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+
+    rerender(<Button variant="outline">Outline</Button>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+
+    rerender(<Button variant="ghost">Ghost</Button>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('renders with different sizes', () => {
+    const { rerender } = render(<Button size="sm">Small</Button>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+
+    rerender(<Button size="lg">Large</Button>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+
+    rerender(<Button size="icon">I</Button>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('forwards ref correctly', () => {
+    const ref = { current: null };
+    render(<Button ref={ref}>Ref</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('buttonVariants returns correct class string', () => {
+    const classes = buttonVariants({ variant: 'default', size: 'default' });
+    expect(typeof classes).toBe('string');
+    expect(classes.length).toBeGreaterThan(0);
+  });
+});

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

@@ -1,31 +1,70 @@
 import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { Card } from '../card';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '../card';
 
 describe('Card', () => {
-  it('should render children content', () => {
-    render(<Card>Test Content</Card>);
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  it('renders card with children', () => {
+    render(<Card>Card content</Card>);
+    expect(screen.getByText('Card content')).toBeInTheDocument();
   });
 
-  it('should apply custom className', () => {
-    const { container } = render(<Card className="custom-class">Content</Card>);
-    expect(container.firstChild).toHaveClass('custom-class');
+  it('applies custom className', () => {
+    render(<Card className="custom">Test</Card>);
+    expect(screen.getByText('Test')).toHaveClass('custom');
   });
 
-  it('should render with default styles', () => {
-    const { container } = render(<Card>Content</Card>);
-    expect(container.firstChild).toBeInTheDocument();
+  it('renders full card structure', () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardDescription>Description</CardDescription>
+        </CardHeader>
+        <CardContent>Content</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>
+    );
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+    expect(screen.getByText('Footer')).toBeInTheDocument();
+  });
+
+  it('CardHeader renders with correct class', () => {
+    render(<CardHeader data-testid="header">Header</CardHeader>);
+    expect(screen.getByTestId('header')).toHaveClass(
+      'flex',
+      'flex-col',
+      'space-y-1.5'
+    );
+  });
+
+  it('CardTitle renders as heading', () => {
+    render(<CardTitle>My Title</CardTitle>);
+    const title = screen.getByText('My Title');
+    expect(title).toBeInTheDocument();
+  });
+
+  it('CardDescription renders with muted styling', () => {
+    render(<CardDescription>Description text</CardDescription>);
+    expect(screen.getByText('Description text')).toBeInTheDocument();
   });
 
-  it('should forward ref', () => {
-    const ref = { current: null };
-    render(<Card ref={ref}>Content</Card>);
-    expect(ref.current).not.toBeNull();
+  it('CardContent renders with correct padding', () => {
+    render(<CardContent data-testid="content">Content</CardContent>);
+    expect(screen.getByTestId('content')).toHaveClass('pt-0');
   });
 
-  it('should spread additional props', () => {
-    const { container } = render(<Card data-testid="card">Content</Card>);
-    expect(container.firstChild).toHaveAttribute('data-testid', 'card');
+  it('CardFooter renders with flex layout', () => {
+    render(<CardFooter data-testid="footer">Footer</CardFooter>);
+    expect(screen.getByTestId('footer')).toHaveClass('flex', 'items-center');
   });
 });

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

@@ -1,75 +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 { Checkbox } from '../checkbox';
 
 describe('Checkbox', () => {
-  it('should render a checkbox input', () => {
-    render(<Checkbox />);
-    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  it('renders checkbox', () => {
+    render(<Checkbox data-testid="checkbox" />);
+    expect(screen.getByTestId('checkbox')).toBeInTheDocument();
   });
 
-  it('should render with a label', () => {
-    render(<Checkbox label="Accept terms" />);
-    expect(screen.getByLabelText('Accept terms')).toBeInTheDocument();
+  it('applies custom className', () => {
+    render(<Checkbox className="custom-checkbox" data-testid="checkbox" />);
+    expect(screen.getByTestId('checkbox')).toHaveClass('custom-checkbox');
   });
 
-  it('should not render label when not provided', () => {
-    const { container } = render(<Checkbox />);
-    expect(container.querySelector('label')).not.toBeInTheDocument();
+  it('renders with checkbox role', () => {
+    render(<Checkbox data-testid="checkbox" />);
+    const checkbox = screen.getByTestId('checkbox');
+    expect(checkbox).toHaveAttribute('role', 'checkbox');
   });
 
-  it('should apply custom className', () => {
-    const { container } = render(<Checkbox className="custom-class" />);
-    expect(container.querySelector('input')).toHaveClass('custom-class');
+  it('has unchecked state by default', () => {
+    render(<Checkbox data-testid="checkbox" />);
+    const checkbox = screen.getByTestId('checkbox');
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
   });
 
-  it('should handle checked state', () => {
-    render(<Checkbox checked readOnly />);
-    expect(screen.getByRole('checkbox')).toBeChecked();
+  it('can be checked', () => {
+    render(<Checkbox checked data-testid="checkbox" />);
+    const checkbox = screen.getByTestId('checkbox');
+    expect(checkbox).toHaveAttribute('aria-checked', 'true');
   });
 
-  it('should handle unchecked state', () => {
-    render(<Checkbox checked={false} readOnly />);
-    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  it('is disabled when disabled prop is true', () => {
+    render(<Checkbox disabled data-testid="checkbox" />);
+    const checkbox = screen.getByTestId('checkbox');
+    expect(checkbox).toBeDisabled();
   });
 
-  it('should call onChange when clicked', () => {
-    const handleChange = vi.fn();
-    render(<Checkbox onChange={handleChange} />);
-    fireEvent.click(screen.getByRole('checkbox'));
-    expect(handleChange).toHaveBeenCalledTimes(1);
-  });
-
-  it('should be disabled when disabled prop is set', () => {
-    render(<Checkbox disabled />);
-    expect(screen.getByRole('checkbox')).toBeDisabled();
-  });
-
-  it('should forward ref', () => {
-    const ref = { current: null };
-    render(<Checkbox ref={ref} />);
-    expect(ref.current).not.toBeNull();
-  });
-
-  it('should spread additional props', () => {
-    const { container } = render(<Checkbox data-testid="checkbox" />);
-    expect(container.querySelector('input')).toHaveAttribute(
-      'data-testid',
-      'checkbox'
-    );
-  });
-
-  it('should use provided id', () => {
-    render(<Checkbox id="custom-id" label="Test" />);
-    const checkbox = screen.getByRole('checkbox');
-    const label = screen.getByText('Test');
-    expect(checkbox).toHaveAttribute('id', 'custom-id');
-    expect(label).toHaveAttribute('for', 'custom-id');
-  });
-
-  it('should generate unique id when not provided', () => {
-    render(<Checkbox label="Test" />);
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toHaveAttribute('id');
+  it('has default styling', () => {
+    render(<Checkbox data-testid="checkbox" />);
+    const checkbox = screen.getByTestId('checkbox');
+    expect(checkbox).toHaveClass('peer', 'h-4', 'w-4');
   });
 });

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

@@ -3,68 +3,61 @@ import { render, screen } from '@testing-library/react';
 import { Container } from '../container';
 
 describe('Container', () => {
-  it('should render children content', () => {
-    render(<Container>Test Content</Container>);
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
-  });
-
-  it('should apply custom className', () => {
-    const { container } = render(
-      <Container className="custom-class">Content</Container>
+  it('renders container with children', () => {
+    render(
+      <Container>
+        <div>Content</div>
+      </Container>
     );
-    expect(container.firstChild).toHaveClass('custom-class');
-  });
-
-  it('should render with default lg size', () => {
-    const { container } = render(<Container>Content</Container>);
-    expect(container.firstChild).toHaveClass('max-w-screen-lg');
-  });
-
-  it('should render with sm size', () => {
-    const { container } = render(<Container size="sm">Content</Container>);
-    expect(container.firstChild).toHaveClass('max-w-screen-sm');
-  });
-
-  it('should render with md size', () => {
-    const { container } = render(<Container size="md">Content</Container>);
-    expect(container.firstChild).toHaveClass('max-w-screen-md');
+    expect(screen.getByText('Content')).toBeInTheDocument();
   });
 
-  it('should render with xl size', () => {
-    const { container } = render(<Container size="xl">Content</Container>);
-    expect(container.firstChild).toHaveClass('max-w-screen-xl');
-  });
-
-  it('should render with full size', () => {
-    const { container } = render(<Container size="full">Content</Container>);
-    expect(container.firstChild).toHaveClass('max-w-full');
-  });
-
-  it('should have responsive padding classes', () => {
-    const { container } = render(<Container>Content</Container>);
-    expect(container.firstChild).toHaveClass('px-4', 'sm:px-6', 'lg:px-8');
+  it('applies custom className', () => {
+    render(
+      <Container className="custom-container" data-testid="container">
+        <div>Content</div>
+      </Container>
+    );
+    expect(screen.getByTestId('container')).toHaveClass('custom-container');
   });
 
-  it('should be centered with mx-auto', () => {
-    const { container } = render(<Container>Content</Container>);
-    expect(container.firstChild).toHaveClass('mx-auto');
+  it('renders as div element', () => {
+    render(
+      <Container data-testid="container">
+        <div>Content</div>
+      </Container>
+    );
+    const container = screen.getByTestId('container');
+    expect(container.tagName).toBe('DIV');
   });
 
-  it('should have full width', () => {
-    const { container } = render(<Container>Content</Container>);
-    expect(container.firstChild).toHaveClass('w-full');
+  it('has default container styling', () => {
+    render(
+      <Container data-testid="container">
+        <div>Content</div>
+      </Container>
+    );
+    const container = screen.getByTestId('container');
+    expect(container).toHaveClass('mx-auto', 'w-full');
   });
 
-  it('should forward ref', () => {
-    const ref = { current: null };
-    render(<Container ref={ref}>Content</Container>);
-    expect(ref.current).not.toBeNull();
+  it('has padding by default', () => {
+    render(
+      <Container data-testid="container">
+        <div>Content</div>
+      </Container>
+    );
+    const container = screen.getByTestId('container');
+    expect(container).toHaveClass('px-4');
   });
 
-  it('should spread additional props', () => {
-    const { container } = render(
-      <Container data-testid="container">Content</Container>
+  it('applies size prop', () => {
+    render(
+      <Container size="sm" data-testid="container">
+        <div>Content</div>
+      </Container>
     );
-    expect(container.firstChild).toHaveAttribute('data-testid', 'container');
+    const container = screen.getByTestId('container');
+    expect(container).toHaveClass('max-w-screen-sm');
   });
 });

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

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { Grid } from '../grid';
 
 describe('Grid', () => {
-  it('should render children content', () => {
+  it('renders grid with children', () => {
     render(
       <Grid>
         <div>Item 1</div>
@@ -14,159 +14,52 @@ describe('Grid', () => {
     expect(screen.getByText('Item 2')).toBeInTheDocument();
   });
 
-  it('should apply custom className', () => {
-    const { container } = render(
-      <Grid className="custom-class">
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass('custom-class');
-  });
-
-  it('should render with default 3 columns', () => {
-    const { container } = render(
-      <Grid>
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass(
-      'grid-cols-1',
-      'sm:grid-cols-2',
-      'lg:grid-cols-3'
-    );
-  });
-
-  it('should render with 1 column', () => {
-    const { container } = render(
-      <Grid cols={1}>
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass('grid-cols-1');
-  });
-
-  it('should render with 2 columns', () => {
-    const { container } = render(
-      <Grid cols={2}>
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass('grid-cols-1', 'sm:grid-cols-2');
-  });
-
-  it('should render with 4 columns', () => {
-    const { container } = render(
-      <Grid cols={4}>
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass(
-      'grid-cols-1',
-      'sm:grid-cols-2',
-      'lg:grid-cols-4'
-    );
-  });
-
-  it('should render with 5 columns', () => {
-    const { container } = render(
-      <Grid cols={5}>
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass(
-      'grid-cols-1',
-      'sm:grid-cols-2',
-      'lg:grid-cols-5'
-    );
-  });
-
-  it('should render with 6 columns', () => {
-    const { container } = render(
-      <Grid cols={6}>
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass(
-      'grid-cols-1',
-      'sm:grid-cols-2',
-      'lg:grid-cols-6'
-    );
-  });
-
-  it('should render with 12 columns', () => {
-    const { container } = render(
-      <Grid cols={12}>
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass(
-      'grid-cols-1',
-      'sm:grid-cols-2',
-      'lg:grid-cols-12'
-    );
-  });
-
-  it('should render with default md gap', () => {
-    const { container } = render(
-      <Grid>
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass('gap-4');
-  });
-
-  it('should render with sm gap', () => {
-    const { container } = render(
-      <Grid gap="sm">
-        <div>Content</div>
-      </Grid>
-    );
-    expect(container.firstChild).toHaveClass('gap-2');
-  });
-
-  it('should render with lg gap', () => {
-    const { container } = render(
-      <Grid gap="lg">
+  it('applies custom className', () => {
+    render(
+      <Grid className="custom-grid" data-testid="grid">
         <div>Content</div>
       </Grid>
     );
-    expect(container.firstChild).toHaveClass('gap-6');
+    expect(screen.getByTestId('grid')).toHaveClass('custom-grid');
   });
 
-  it('should render with xl gap', () => {
-    const { container } = render(
-      <Grid gap="xl">
-        <div>Content</div>
+  it('renders with default columns', () => {
+    render(
+      <Grid data-testid="grid">
+        <div>Item</div>
       </Grid>
     );
-    expect(container.firstChild).toHaveClass('gap-8');
+    const grid = screen.getByTestId('grid');
+    expect(grid).toHaveClass('grid');
   });
 
-  it('should have grid class', () => {
-    const { container } = render(
-      <Grid>
-        <div>Content</div>
+  it('renders with custom columns', () => {
+    render(
+      <Grid cols={3} data-testid="grid">
+        <div>Item</div>
       </Grid>
     );
-    expect(container.firstChild).toHaveClass('grid');
+    const grid = screen.getByTestId('grid');
+    expect(grid).toHaveClass('grid-cols-1', 'lg:grid-cols-3');
   });
 
-  it('should forward ref', () => {
-    const ref = { current: null };
+  it('renders with gap', () => {
     render(
-      <Grid ref={ref}>
-        <div>Content</div>
+      <Grid gap="lg" data-testid="grid">
+        <div>Item</div>
       </Grid>
     );
-    expect(ref.current).not.toBeNull();
+    const grid = screen.getByTestId('grid');
+    expect(grid).toHaveClass('gap-6');
   });
 
-  it('should spread additional props', () => {
-    const { container } = render(
+  it('applies default grid styling', () => {
+    render(
       <Grid data-testid="grid">
-        <div>Content</div>
+        <div>Item</div>
       </Grid>
     );
-    expect(container.firstChild).toHaveAttribute('data-testid', 'grid');
+    const grid = screen.getByTestId('grid');
+    expect(grid).toHaveClass('grid');
   });
 });