@times-components/ts-components 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4 → 1.145.1-d1253ed8e87e7cdf861fbf772a5f9026182434db.4

package/src/components/carousel-component/CarouselItem.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { ItemContainer } from './styles';
-import { CarouselItemProps } from './types';
-
-export const CarouselItem: React.FC<CarouselItemProps> = ({
-  children,
-  widthConfig = {
-    mobile: '90%',
-    tablet: '70%',
-    desktop: 'calc(50% - 10px)',
-    xl: 'calc(50% - 10px)'
-  },
-  className
-}) => {
-  return (
-    <ItemContainer widthConfig={widthConfig} className={className}>
-      {children}
-    </ItemContainer>
-  );
-};

package/src/components/carousel-component/DefaultNavigationArrow.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { NavigationArrowButton } from './styles';
-
-interface NavigationArrowProps {
-  direction: 'left' | 'right';
-  onClick: () => void;
-  disabled: boolean;
-}
-
-export const DefaultNavigationArrow: React.FC<NavigationArrowProps> = ({
-  direction,
-  onClick,
-  disabled
-}) => (
-  <NavigationArrowButton
-    direction={direction}
-    onClick={onClick}
-    disabled={disabled}
-    aria-label={`${direction === 'left' ? 'Previous' : 'Next'} items`}
-  >
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d={direction === 'left' ? 'M10 12L6 8L10 4' : 'M6 12L10 8L6 4'}
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  </NavigationArrowButton>
-);

package/src/components/carousel-component/DefaultPageDot.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { PageDotButton } from './styles';
-
-interface PageDotProps {
-  active: boolean;
-  onClick: () => void;
-  index: number;
-}
-
-export const DefaultPageDot: React.FC<PageDotProps> = ({
-  active,
-  onClick,
-  index
-}) => (
-  <PageDotButton
-    active={active}
-    onClick={onClick}
-    aria-label={`Go to page ${index + 1}`}
-  />
-);

package/src/components/carousel-component/__tests__/CarouselComponent.test.tsx

@@ -1,259 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { CarouselComponent } from '../index';
-
-describe('CarouselComponent', () => {
-  const mockItems = [
-    <div key="1">Item 1</div>,
-    <div key="2">Item 2</div>,
-    <div key="3">Item 3</div>,
-    <div key="4">Item 4</div>
-  ];
-
-  beforeEach(() => {
-    Element.prototype.scrollTo = jest.fn();
-  });
-
-  it('renders all items', () => {
-    render(<CarouselComponent items={mockItems} />);
-
-    expect(screen.getByText('Item 1')).toBeInTheDocument();
-    expect(screen.getByText('Item 2')).toBeInTheDocument();
-    expect(screen.getByText('Item 3')).toBeInTheDocument();
-    expect(screen.getByText('Item 4')).toBeInTheDocument();
-  });
-
-  it('renders navigation arrows by default', () => {
-    render(<CarouselComponent items={mockItems} />);
-
-    const prevButton = screen.getByLabelText('Previous items');
-    const nextButton = screen.getByLabelText('Next items');
-
-    expect(prevButton).toBeInTheDocument();
-    expect(nextButton).toBeInTheDocument();
-  });
-
-  it('hides navigation arrows when showArrows is false', () => {
-    render(<CarouselComponent items={mockItems} showArrows={false} />);
-
-    const buttons = screen.getAllByRole('button');
-    expect(buttons.length).toBe(2);
-  });
-
-  it('renders pagination dots by default', () => {
-    render(<CarouselComponent items={mockItems} />);
-
-    const dots = screen
-      .getAllByRole('button')
-      .filter(btn => !btn.querySelector('svg'));
-
-    expect(dots.length).toBeGreaterThan(0);
-  });
-
-  it('hides pagination dots when showDots is false', () => {
-    render(
-      <CarouselComponent
-        items={mockItems}
-        showDots={false}
-        showArrows={false}
-      />
-    );
-
-    const buttons = screen.queryAllByRole('button');
-
-    expect(buttons.length).toBe(0);
-  });
-
-  it('applies custom className', () => {
-    const { container } = render(
-      <CarouselComponent items={mockItems} className="custom-carousel" />
-    );
-
-    expect(container.querySelector('.custom-carousel')).toBeInTheDocument();
-  });
-
-  it('handles itemsPerPage option', () => {
-    render(
-      <CarouselComponent items={mockItems} options={{ itemsPerPage: 1 }} />
-    );
-
-    const dots = screen
-      .getAllByRole('button')
-      .filter(btn => !btn.querySelector('svg'));
-
-    expect(dots.length).toBe(4);
-  });
-
-  it('handles empty items array', () => {
-    const { container } = render(<CarouselComponent items={[]} />);
-
-    expect(container.querySelector('[role="button"]')).not.toBeInTheDocument();
-  });
-
-  it('handles single item', () => {
-    render(<CarouselComponent items={[<div key="1">Single Item</div>]} />);
-
-    expect(screen.getByText('Single Item')).toBeInTheDocument();
-  });
-
-  it('calls onPageChange callback when provided', () => {
-    const onPageChange = jest.fn();
-
-    render(<CarouselComponent items={mockItems} options={{ onPageChange }} />);
-
-    const nextButton = screen
-      .getAllByRole('button')
-      .find(btn => btn.querySelector('svg'));
-
-    if (nextButton) {
-      fireEvent.click(nextButton);
-      expect(onPageChange).toHaveBeenCalled();
-    }
-  });
-
-  it('renders with custom arrow component', () => {
-    const CustomArrow = ({ direction }: { direction: string }) => (
-      <button>Custom {direction}</button>
-    );
-
-    render(
-      <CarouselComponent
-        items={mockItems}
-        arrowComponent={CustomArrow as any}
-      />
-    );
-
-    const customArrows = screen.getAllByText(/Custom/);
-    expect(customArrows.length).toBe(2);
-    expect(customArrows[0]).toBeInTheDocument();
-  });
-
-  it('renders with custom dot component', () => {
-    const CustomDot = ({ index }: { index: number }) => (
-      <button>Dot {index}</button>
-    );
-
-    render(
-      <CarouselComponent items={mockItems} dotComponent={CustomDot as any} />
-    );
-
-    const customDots = screen.getAllByText(/Dot/);
-    expect(customDots.length).toBe(2);
-    expect(customDots[0]).toBeInTheDocument();
-  });
-
-  it('navigates to next page when next arrow is clicked', () => {
-    render(
-      <CarouselComponent items={mockItems} options={{ itemsPerPage: 2 }} />
-    );
-
-    const nextButton = screen.getByLabelText('Next items');
-    fireEvent.click(nextButton);
-
-    expect(Element.prototype.scrollTo).toHaveBeenCalled();
-  });
-
-  it('navigates to previous page when previous arrow is clicked', () => {
-    render(
-      <CarouselComponent items={mockItems} options={{ itemsPerPage: 2 }} />
-    );
-
-    const nextButton = screen.getByLabelText('Next items');
-    const prevButton = screen.getByLabelText('Previous items');
-
-    fireEvent.click(nextButton);
-    fireEvent.click(prevButton);
-    expect(Element.prototype.scrollTo).toHaveBeenCalled();
-  });
-
-  it('handles mouse drag events', () => {
-    const { container } = render(
-      <CarouselComponent items={mockItems} options={{ itemsPerPage: 2 }} />
-    );
-
-    const carouselRow = container.querySelector('div > div > div');
-
-    if (carouselRow) {
-      fireEvent.mouseDown(carouselRow, { pageX: 100 });
-      fireEvent.mouseMove(carouselRow, { pageX: 50 });
-      fireEvent.mouseUp(carouselRow);
-    }
-
-    expect(carouselRow).toBeInTheDocument();
-  });
-
-  it('disables previous arrow on first page', () => {
-    render(
-      <CarouselComponent items={mockItems} options={{ itemsPerPage: 2 }} />
-    );
-
-    const prevButton = screen.getByLabelText('Previous items');
-    expect(prevButton).toBeDisabled();
-  });
-
-  it('renders correct number of page dots', () => {
-    render(
-      <CarouselComponent items={mockItems} options={{ itemsPerPage: 2 }} />
-    );
-
-    const dots = screen
-      .getAllByRole('button')
-      .filter(btn => !btn.querySelector('svg'));
-
-    expect(dots.length).toBe(2);
-  });
-
-  it('handles page dot click', () => {
-    render(
-      <CarouselComponent items={mockItems} options={{ itemsPerPage: 2 }} />
-    );
-
-    const dots = screen
-      .getAllByRole('button')
-      .filter(btn => !btn.querySelector('svg'));
-
-    if (dots[1]) {
-      fireEvent.click(dots[1]);
-      expect(Element.prototype.scrollTo).toHaveBeenCalled();
-    }
-  });
-
-  it('hides dots when there is only one page', () => {
-    render(
-      <CarouselComponent
-        items={[<div key="1">Item 1</div>]}
-        options={{ itemsPerPage: 2 }}
-      />
-    );
-
-    const dots = screen
-      .queryAllByRole('button')
-      .filter(btn => !btn.querySelector('svg'));
-
-    expect(dots.length).toBe(0);
-  });
-
-  it('handles mouse leave event during drag', () => {
-    const { container } = render(
-      <CarouselComponent items={mockItems} options={{ itemsPerPage: 2 }} />
-    );
-
-    const carouselRow = container.querySelector('div > div > div');
-
-    if (carouselRow) {
-      fireEvent.mouseDown(carouselRow, { pageX: 100 });
-      fireEvent.mouseMove(carouselRow, { pageX: 50 });
-      fireEvent.mouseLeave(carouselRow);
-    }
-
-    expect(carouselRow).toBeInTheDocument();
-  });
-
-  it('applies correct styles to carousel container', () => {
-    const { container } = render(<CarouselComponent items={mockItems} />);
-
-    const carouselContainer = container.firstChild;
-    expect(carouselContainer).toBeInTheDocument();
-  });
-});

package/src/components/carousel-component/__tests__/CarouselItem.test.tsx

@@ -1,140 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { CarouselItem } from '../CarouselItem';
-
-describe('CarouselItem', () => {
-  it('renders children correctly', () => {
-    render(
-      <CarouselItem>
-        <div>Test Content</div>
-      </CarouselItem>
-    );
-
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
-  });
-
-  it('applies custom className', () => {
-    const { container } = render(
-      <CarouselItem className="custom-class">
-        <div>Test Content</div>
-      </CarouselItem>
-    );
-
-    expect(container.firstChild).toHaveClass('custom-class');
-  });
-
-  it('uses default widthConfig when not provided', () => {
-    const { container } = render(
-      <CarouselItem>
-        <div>Test Content</div>
-      </CarouselItem>
-    );
-
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('accepts custom widthConfig', () => {
-    render(
-      <CarouselItem
-        widthConfig={{
-          xs: '70%',
-          mobile: '90%',
-          tablet: '45%',
-          desktop: '30%',
-          xl: '25%'
-        }}
-      >
-        <div>Test Content</div>
-      </CarouselItem>
-    );
-
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
-  });
-
-  it('accepts partial widthConfig', () => {
-    render(
-      <CarouselItem
-        widthConfig={{
-          mobile: '80%',
-          desktop: '40%'
-        }}
-      >
-        <div>Test Content</div>
-      </CarouselItem>
-    );
-
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
-  });
-
-  it('renders multiple children correctly', () => {
-    render(
-      <CarouselItem>
-        <div>Child 1</div>
-        <div>Child 2</div>
-        <div>Child 3</div>
-      </CarouselItem>
-    );
-
-    expect(screen.getByText('Child 1')).toBeInTheDocument();
-    expect(screen.getByText('Child 2')).toBeInTheDocument();
-    expect(screen.getByText('Child 3')).toBeInTheDocument();
-  });
-
-  it('handles complex child components', () => {
-    const ComplexChild = () => (
-      <div>
-        <h1>Title</h1>
-        <p>Description</p>
-        <button>Action</button>
-      </div>
-    );
-
-    render(
-      <CarouselItem>
-        <ComplexChild />
-      </CarouselItem>
-    );
-
-    expect(screen.getByText('Title')).toBeInTheDocument();
-    expect(screen.getByText('Description')).toBeInTheDocument();
-    expect(screen.getByText('Action')).toBeInTheDocument();
-  });
-
-  it('applies className along with widthConfig', () => {
-    const { container } = render(
-      <CarouselItem
-        className="custom-item"
-        widthConfig={{
-          mobile: '90%',
-          desktop: '45%'
-        }}
-      >
-        <div>Test Content</div>
-      </CarouselItem>
-    );
-
-    expect(container.firstChild).toHaveClass('custom-item');
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
-  });
-
-  it('renders with no props except children', () => {
-    render(
-      <CarouselItem>
-        <div>Minimal Content</div>
-      </CarouselItem>
-    );
-
-    expect(screen.getByText('Minimal Content')).toBeInTheDocument();
-  });
-
-  it('handles empty widthConfig object', () => {
-    render(
-      <CarouselItem widthConfig={{}}>
-        <div>Test Content</div>
-      </CarouselItem>
-    );
-
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
-  });
-});

package/src/components/carousel-component/__tests__/DefaultNavigationArrow.test.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { DefaultNavigationArrow } from '../DefaultNavigationArrow';
-
-describe('DefaultNavigationArrow', () => {
-  const mockOnClick = jest.fn();
-
-  beforeEach(() => {
-    mockOnClick.mockClear();
-  });
-
-  it('renders left arrow', () => {
-    render(
-      <DefaultNavigationArrow
-        direction="left"
-        onClick={mockOnClick}
-        disabled={false}
-      />
-    );
-
-    const button = screen.getByLabelText('Previous items');
-    expect(button).toBeInTheDocument();
-  });
-
-  it('renders right arrow', () => {
-    render(
-      <DefaultNavigationArrow
-        direction="right"
-        onClick={mockOnClick}
-        disabled={false}
-      />
-    );
-
-    const button = screen.getByLabelText('Next items');
-    expect(button).toBeInTheDocument();
-  });
-
-  it('calls onClick when clicked', () => {
-    render(
-      <DefaultNavigationArrow
-        direction="left"
-        onClick={mockOnClick}
-        disabled={false}
-      />
-    );
-
-    const button = screen.getByLabelText('Previous items');
-    fireEvent.click(button);
-
-    expect(mockOnClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not call onClick when disabled', () => {
-    render(
-      <DefaultNavigationArrow
-        direction="left"
-        onClick={mockOnClick}
-        disabled={true}
-      />
-    );
-
-    const button = screen.getByLabelText('Previous items');
-    fireEvent.click(button);
-
-    expect(mockOnClick).not.toHaveBeenCalled();
-  });
-
-  it('applies disabled styling when disabled', () => {
-    render(
-      <DefaultNavigationArrow
-        direction="left"
-        onClick={mockOnClick}
-        disabled={true}
-      />
-    );
-
-    const button = screen.getByLabelText('Previous items');
-    expect(button).toHaveAttribute('disabled');
-  });
-
-  it('renders SVG icon', () => {
-    const { container } = render(
-      <DefaultNavigationArrow
-        direction="left"
-        onClick={mockOnClick}
-        disabled={false}
-      />
-    );
-
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  it('has correct aria-label for accessibility', () => {
-    const { rerender } = render(
-      <DefaultNavigationArrow
-        direction="left"
-        onClick={mockOnClick}
-        disabled={false}
-      />
-    );
-
-    expect(screen.getByLabelText('Previous items')).toBeInTheDocument();
-
-    rerender(
-      <DefaultNavigationArrow
-        direction="right"
-        onClick={mockOnClick}
-        disabled={false}
-      />
-    );
-
-    expect(screen.getByLabelText('Next items')).toBeInTheDocument();
-  });
-
-  it('renders as a button element', () => {
-    render(
-      <DefaultNavigationArrow
-        direction="left"
-        onClick={mockOnClick}
-        disabled={false}
-      />
-    );
-
-    const button = screen.getByLabelText('Previous items');
-    expect(button.tagName).toBe('BUTTON');
-  });
-
-  it('applies correct styles based on direction', () => {
-    const { container, rerender } = render(
-      <DefaultNavigationArrow
-        direction="left"
-        onClick={mockOnClick}
-        disabled={false}
-      />
-    );
-
-    let button = container.querySelector('button');
-    expect(button).toBeInTheDocument();
-
-    rerender(
-      <DefaultNavigationArrow
-        direction="right"
-        onClick={mockOnClick}
-        disabled={false}
-      />
-    );
-
-    button = container.querySelector('button');
-    expect(button).toBeInTheDocument();
-  });
-});