@aiready/components 0.13.22 → 0.14.0

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

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Select } from '../select';
+
+describe('Select', () => {
+  const options = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ];
+
+  const defaultProps = {
+    options,
+    onChange: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render a select element', () => {
+    render(<Select {...defaultProps} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('should render all options', () => {
+    render(<Select {...defaultProps} />);
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+    expect(screen.getByText('Option 3')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(
+      <Select {...defaultProps} className="custom-class" />
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should render placeholder when provided', () => {
+    render(<Select {...defaultProps} placeholder="Select an option" />);
+    expect(screen.getByText('Select an option')).toBeInTheDocument();
+  });
+
+  it('should call onChange when option is selected', () => {
+    render(<Select {...defaultProps} />);
+    fireEvent.change(screen.getByRole('combobox'), {
+      target: { value: 'option2' },
+    });
+    expect(defaultProps.onChange).toHaveBeenCalledWith('option2');
+  });
+
+  it('should disable specific options', () => {
+    const optionsWithDisabled = [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2', disabled: true },
+    ];
+    render(<Select {...defaultProps} options={optionsWithDisabled} />);
+    expect(screen.getByText('Option 2')).toBeDisabled();
+  });
+
+  it('should be disabled when disabled prop is set', () => {
+    render(<Select {...defaultProps} disabled />);
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('should forward ref', () => {
+    const ref = { current: null };
+    render(<Select {...defaultProps} ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should spread additional props', () => {
+    const { container } = render(
+      <Select {...defaultProps} data-testid="select" />
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'select');
+  });
+
+  it('should have default styling classes', () => {
+    const { container } = render(<Select {...defaultProps} />);
+    expect(container.firstChild).toHaveClass(
+      'flex',
+      'h-10',
+      'w-full',
+      'rounded-md'
+    );
+  });
+
+  it('should handle value prop', () => {
+    render(<Select {...defaultProps} value="option2" />);
+    expect(screen.getByRole('combobox')).toHaveValue('option2');
+  });
+
+  it('should disable placeholder option', () => {
+    render(<Select {...defaultProps} placeholder="Select an option" />);
+    const placeholderOption = screen.getByText('Select an option');
+    expect(placeholderOption).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Separator } from '../separator';
+
+describe('Separator', () => {
+  it('should render a separator', () => {
+    const { container } = render(<Separator />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(<Separator className="custom-class" />);
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should render with horizontal orientation by default', () => {
+    const { container } = render(<Separator />);
+    expect(container.firstChild).toHaveClass('h-[1px]', 'w-full');
+  });
+
+  it('should render with vertical orientation', () => {
+    const { container } = render(<Separator orientation="vertical" />);
+    expect(container.firstChild).toHaveClass('h-full', 'w-[1px]');
+  });
+
+  it('should have role="none" when decorative is true', () => {
+    const { container } = render(<Separator decorative />);
+    expect(container.firstChild).toHaveAttribute('role', 'none');
+  });
+
+  it('should have role="separator" when decorative is false', () => {
+    const { container } = render(<Separator decorative={false} />);
+    expect(container.firstChild).toHaveAttribute('role', 'separator');
+  });
+
+  it('should have aria-orientation attribute', () => {
+    const { container } = render(<Separator orientation="horizontal" />);
+    expect(container.firstChild).toHaveAttribute(
+      'aria-orientation',
+      'horizontal'
+    );
+  });
+
+  it('should have aria-orientation vertical for vertical separator', () => {
+    const { container } = render(<Separator orientation="vertical" />);
+    expect(container.firstChild).toHaveAttribute(
+      'aria-orientation',
+      'vertical'
+    );
+  });
+
+  it('should have shrink-0 class', () => {
+    const { container } = render(<Separator />);
+    expect(container.firstChild).toHaveClass('shrink-0');
+  });
+
+  it('should have bg-border class', () => {
+    const { container } = render(<Separator />);
+    expect(container.firstChild).toHaveClass('bg-border');
+  });
+
+  it('should forward ref', () => {
+    const ref = { current: null };
+    render(<Separator ref={ref} />);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should spread additional props', () => {
+    const { container } = render(<Separator data-testid="separator" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'separator');
+  });
+});

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

@@ -0,0 +1,197 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Stack } from '../stack';
+
+describe('Stack', () => {
+  it('should render children content', () => {
+    render(
+      <Stack>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Stack>
+    );
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(
+      <Stack className="custom-class">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should render with vertical direction by default', () => {
+    const { container } = render(
+      <Stack>
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('flex-col');
+  });
+
+  it('should render with horizontal direction', () => {
+    const { container } = render(
+      <Stack direction="horizontal">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('flex-row');
+  });
+
+  it('should render with default md spacing', () => {
+    const { container } = render(
+      <Stack>
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('gap-4');
+  });
+
+  it('should render with xs spacing', () => {
+    const { container } = render(
+      <Stack spacing="xs">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('gap-1');
+  });
+
+  it('should render with sm spacing', () => {
+    const { container } = render(
+      <Stack spacing="sm">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('gap-2');
+  });
+
+  it('should render with lg spacing', () => {
+    const { container } = render(
+      <Stack spacing="lg">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('gap-6');
+  });
+
+  it('should render with xl spacing', () => {
+    const { container } = render(
+      <Stack spacing="xl">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('gap-8');
+  });
+
+  it('should render with default stretch alignment', () => {
+    const { container } = render(
+      <Stack>
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('items-stretch');
+  });
+
+  it('should render with start alignment', () => {
+    const { container } = render(
+      <Stack align="start">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('items-start');
+  });
+
+  it('should render with center alignment', () => {
+    const { container } = render(
+      <Stack align="center">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('items-center');
+  });
+
+  it('should render with end alignment', () => {
+    const { container } = render(
+      <Stack align="end">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('items-end');
+  });
+
+  it('should render with default start justify', () => {
+    const { container } = render(
+      <Stack>
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('justify-start');
+  });
+
+  it('should render with center justify', () => {
+    const { container } = render(
+      <Stack justify="center">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('justify-center');
+  });
+
+  it('should render with end justify', () => {
+    const { container } = render(
+      <Stack justify="end">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('justify-end');
+  });
+
+  it('should render with between justify', () => {
+    const { container } = render(
+      <Stack justify="between">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('justify-between');
+  });
+
+  it('should render with around justify', () => {
+    const { container } = render(
+      <Stack justify="around">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('justify-around');
+  });
+
+  it('should have flex class', () => {
+    const { container } = render(
+      <Stack>
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveClass('flex');
+  });
+
+  it('should forward ref', () => {
+    const ref = { current: null };
+    render(
+      <Stack ref={ref}>
+        <div>Content</div>
+      </Stack>
+    );
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should spread additional props', () => {
+    const { container } = render(
+      <Stack data-testid="stack">
+        <div>Content</div>
+      </Stack>
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'stack');
+  });
+});

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

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

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

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Textarea } from '../textarea';
+
+describe('Textarea', () => {
+  it('should render a textarea element', () => {
+    render(<Textarea />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(<Textarea className="custom-class" />);
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  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('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('should support maxLength attribute', () => {
+    render(<Textarea maxLength={100} />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('maxlength', '100');
+  });
+
+  it('should have border-input class', () => {
+    const { container } = render(<Textarea />);
+    expect(container.firstChild).toHaveClass('border-input');
+  });
+
+  it('should have focus ring classes', () => {
+    const { container } = render(<Textarea />);
+    expect(container.firstChild).toHaveClass(
+      'focus-visible:ring-2',
+      'focus-visible:ring-ring'
+    );
+  });
+
+  it('should have disabled styling classes', () => {
+    const { container } = render(<Textarea disabled />);
+    expect(container.firstChild).toHaveClass(
+      'disabled:cursor-not-allowed',
+      'disabled:opacity-50'
+    );
+  });
+});