@aiready/components 0.13.22 → 0.13.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiready/components",
-  "version": "0.13.22",
+  "version": "0.13.23",
   "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.23.23"
+    "@aiready/core": "0.23.24"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.5",

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

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Card } from '../card';
+
+describe('Card', () => {
+  it('should render children content', () => {
+    render(<Card>Test Content</Card>);
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(<Card className="custom-class">Content</Card>);
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should render with default styles', () => {
+    const { container } = render(<Card>Content</Card>);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('should forward ref', () => {
+    const ref = { current: null };
+    render(<Card ref={ref}>Content</Card>);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should spread additional props', () => {
+    const { container } = render(<Card data-testid="card">Content</Card>);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'card');
+  });
+});

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

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Checkbox } from '../checkbox';
+
+describe('Checkbox', () => {
+  it('should render a checkbox input', () => {
+    render(<Checkbox />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  it('should render with a label', () => {
+    render(<Checkbox label="Accept terms" />);
+    expect(screen.getByLabelText('Accept terms')).toBeInTheDocument();
+  });
+
+  it('should not render label when not provided', () => {
+    const { container } = render(<Checkbox />);
+    expect(container.querySelector('label')).not.toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(<Checkbox className="custom-class" />);
+    expect(container.querySelector('input')).toHaveClass('custom-class');
+  });
+
+  it('should handle checked state', () => {
+    render(<Checkbox checked readOnly />);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+
+  it('should handle unchecked state', () => {
+    render(<Checkbox checked={false} readOnly />);
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+
+  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');
+  });
+});

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

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+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>
+    );
+    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');
+  });
+
+  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('should be centered with mx-auto', () => {
+    const { container } = render(<Container>Content</Container>);
+    expect(container.firstChild).toHaveClass('mx-auto');
+  });
+
+  it('should have full width', () => {
+    const { container } = render(<Container>Content</Container>);
+    expect(container.firstChild).toHaveClass('w-full');
+  });
+
+  it('should forward ref', () => {
+    const ref = { current: null };
+    render(<Container ref={ref}>Content</Container>);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should spread additional props', () => {
+    const { container } = render(
+      <Container data-testid="container">Content</Container>
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'container');
+  });
+});

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

@@ -0,0 +1,172 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Grid } from '../grid';
+
+describe('Grid', () => {
+  it('should render children content', () => {
+    render(
+      <Grid>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Grid>
+    );
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    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">
+        <div>Content</div>
+      </Grid>
+    );
+    expect(container.firstChild).toHaveClass('gap-6');
+  });
+
+  it('should render with xl gap', () => {
+    const { container } = render(
+      <Grid gap="xl">
+        <div>Content</div>
+      </Grid>
+    );
+    expect(container.firstChild).toHaveClass('gap-8');
+  });
+
+  it('should have grid class', () => {
+    const { container } = render(
+      <Grid>
+        <div>Content</div>
+      </Grid>
+    );
+    expect(container.firstChild).toHaveClass('grid');
+  });
+
+  it('should forward ref', () => {
+    const ref = { current: null };
+    render(
+      <Grid ref={ref}>
+        <div>Content</div>
+      </Grid>
+    );
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should spread additional props', () => {
+    const { container } = render(
+      <Grid data-testid="grid">
+        <div>Content</div>
+      </Grid>
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'grid');
+  });
+});

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

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Input } from '../input';
+
+describe('Input', () => {
+  it('should render an input element', () => {
+    render(<Input />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(<Input className="custom-class" />);
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should handle placeholder text', () => {
+    render(<Input placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
+  });
+
+  it('should handle different input types', () => {
+    const { container } = render(<Input type="password" />);
+    expect(container.firstChild).toHaveAttribute('type', 'password');
+  });
+
+  it('should forward ref', () => {
+    const ref = { current: null };
+    render(<Input ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should be disabled when disabled prop is set', () => {
+    render(<Input disabled />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+
+  it('should handle value prop', () => {
+    render(<Input value="test value" readOnly />);
+    expect(screen.getByRole('textbox')).toHaveValue('test value');
+  });
+
+  it('should spread additional props', () => {
+    const { container } = render(<Input data-testid="input" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'input');
+  });
+});

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

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Label } from '../label';
+
+describe('Label', () => {
+  it('should render children content', () => {
+    render(<Label>Test Label</Label>);
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(<Label className="custom-class">Label</Label>);
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should render with default styles', () => {
+    const { container } = render(<Label>Label</Label>);
+    expect(container.firstChild).toHaveClass(
+      'text-sm',
+      'font-medium',
+      'leading-none'
+    );
+  });
+
+  it('should forward ref', () => {
+    const ref = { current: null };
+    render(<Label ref={ref}>Label</Label>);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should spread additional props', () => {
+    const { container } = render(<Label data-testid="label">Label</Label>);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'label');
+  });
+
+  it('should render as a label element', () => {
+    render(<Label>Label</Label>);
+    expect(screen.getByText('Label').tagName).toBe('LABEL');
+  });
+
+  it('should support htmlFor attribute', () => {
+    render(<Label htmlFor="input-id">Label</Label>);
+    expect(screen.getByText('Label')).toHaveAttribute('for', 'input-id');
+  });
+
+  it('should have peer-disabled classes', () => {
+    const { container } = render(<Label>Label</Label>);
+    expect(container.firstChild).toHaveClass(
+      'peer-disabled:cursor-not-allowed',
+      'peer-disabled:opacity-70'
+    );
+  });
+});

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

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Modal } from '../modal';
+
+describe('Modal', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: vi.fn(),
+    children: <div>Modal Content</div>,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render children when open', () => {
+    render(<Modal {...defaultProps} />);
+    expect(screen.getByText('Modal Content')).toBeInTheDocument();
+  });
+
+  it('should not render children when closed', () => {
+    render(<Modal {...defaultProps} isOpen={false} />);
+    expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
+  });
+
+  it('should render close button by default', () => {
+    render(<Modal {...defaultProps} />);
+    expect(screen.getByLabelText('Close modal')).toBeInTheDocument();
+  });
+
+  it('should hide close button when showClose is false', () => {
+    render(<Modal {...defaultProps} showClose={false} />);
+    expect(screen.queryByLabelText('Close modal')).not.toBeInTheDocument();
+  });
+
+  it('should call onClose when close button is clicked', () => {
+    render(<Modal {...defaultProps} />);
+    fireEvent.click(screen.getByLabelText('Close modal'));
+    expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onClose when backdrop is clicked', () => {
+    const { container } = render(<Modal {...defaultProps} />);
+    const backdrop = container.querySelector('.bg-slate-950\\/60');
+    if (backdrop) {
+      fireEvent.click(backdrop);
+      expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+    }
+  });
+
+  it('should apply custom maxWidth', () => {
+    const { container } = render(
+      <Modal {...defaultProps} maxWidth="max-w-2xl" />
+    );
+    const modalContent = container.querySelector('.max-w-2xl');
+    expect(modalContent).toBeInTheDocument();
+  });
+
+  it('should apply default maxWidth of max-w-4xl', () => {
+    const { container } = render(<Modal {...defaultProps} />);
+    const modalContent = container.querySelector('.max-w-4xl');
+    expect(modalContent).toBeInTheDocument();
+  });
+
+  it('should apply glass variant styles by default', () => {
+    const { container } = render(<Modal {...defaultProps} />);
+    const modalContent = container.querySelector('.bg-slate-900\\/90');
+    expect(modalContent).toBeInTheDocument();
+  });
+
+  it('should apply default variant styles', () => {
+    const { container } = render(<Modal {...defaultProps} variant="default" />);
+    const modalContent = container.querySelector('.bg-white');
+    expect(modalContent).toBeInTheDocument();
+  });
+
+  it('should have fixed positioning for backdrop', () => {
+    const { container } = render(<Modal {...defaultProps} />);
+    const wrapper = container.querySelector('.fixed.inset-0');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  it('should have z-index of 100', () => {
+    const { container } = render(<Modal {...defaultProps} />);
+    const wrapper = container.querySelector('.z-\\[100\\]');
+    expect(wrapper).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/radio-group.test.tsx

@@ -0,0 +1,107 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { RadioGroup } from '../radio-group';
+
+describe('RadioGroup', () => {
+  const options = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ];
+
+  const defaultProps = {
+    name: 'test-radio',
+    options,
+    value: 'option1',
+    onChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render all radio options', () => {
+    render(<RadioGroup {...defaultProps} />);
+    expect(screen.getByLabelText('Option 1')).toBeInTheDocument();
+    expect(screen.getByLabelText('Option 2')).toBeInTheDocument();
+    expect(screen.getByLabelText('Option 3')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(
+      <RadioGroup {...defaultProps} className="custom-class" />
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should check the correct option', () => {
+    render(<RadioGroup {...defaultProps} />);
+    expect(screen.getByLabelText('Option 1')).toBeChecked();
+    expect(screen.getByLabelText('Option 2')).not.toBeChecked();
+  });
+
+  it('should call onChange when option is selected', () => {
+    render(<RadioGroup {...defaultProps} />);
+    fireEvent.click(screen.getByLabelText('Option 2'));
+    expect(defaultProps.onChange).toHaveBeenCalledWith('option2');
+  });
+
+  it('should render with vertical orientation by default', () => {
+    const { container } = render(<RadioGroup {...defaultProps} />);
+    expect(container.firstChild).toHaveClass('flex-col', 'gap-2');
+  });
+
+  it('should render with horizontal orientation', () => {
+    const { container } = render(
+      <RadioGroup {...defaultProps} orientation="horizontal" />
+    );
+    expect(container.firstChild).toHaveClass('flex-row', 'gap-4');
+  });
+
+  it('should disable specific options', () => {
+    const optionsWithDisabled = [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2', disabled: true },
+    ];
+    render(<RadioGroup {...defaultProps} options={optionsWithDisabled} />);
+    expect(screen.getByLabelText('Option 2')).toBeDisabled();
+  });
+
+  it('should use the correct name for all radios', () => {
+    render(<RadioGroup {...defaultProps} />);
+    const radios = screen.getAllByRole('radio');
+    radios.forEach((radio) => {
+      expect(radio).toHaveAttribute('name', 'test-radio');
+    });
+  });
+
+  it('should generate unique ids for each option', () => {
+    render(<RadioGroup {...defaultProps} />);
+    expect(screen.getByLabelText('Option 1')).toHaveAttribute(
+      'id',
+      'test-radio-option1'
+    );
+    expect(screen.getByLabelText('Option 2')).toHaveAttribute(
+      'id',
+      'test-radio-option2'
+    );
+  });
+
+  it('should forward ref', () => {
+    const ref = { current: null };
+    render(<RadioGroup {...defaultProps} ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should spread additional props', () => {
+    const { container } = render(
+      <RadioGroup {...defaultProps} data-testid="radio-group" />
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'radio-group');
+  });
+
+  it('should have flex class', () => {
+    const { container } = render(<RadioGroup {...defaultProps} />);
+    expect(container.firstChild).toHaveClass('flex');
+  });
+});