@times-components/ts-components 1.145.1-82bc6796129e892c1eb22c6257c5e3809c159767.3 → 1.145.1-9176eda9ce171a0f5596bdc9d385a1fc60b23ea1.12

package/src/components/carousel-component/CarouselComponent.stories.tsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { CarouselComponent, CarouselItem } from './index';
+import styled from 'styled-components';
+
+// Simple card component for demos
+const SimpleCard = styled.div<{ color: string }>`
+  background: ${props => props.color};
+  height: 300px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+`;
+
+const Container = styled.div`
+  max-width: 1200px;
+  margin: 40px auto;
+  padding: 0 20px;
+`;
+
+const Title = styled.h2`
+  margin-bottom: 24px;
+  font-size: 24px;
+  font-weight: 600;
+`;
+
+storiesOf('Typescript Component/CarouselComponent', module)
+  .add('Two Cards Per Page', () => {
+    const colors = [
+      '#005C8A',
+      '#FF6B6B',
+      '#4ECDC4',
+      '#45B7D1',
+      '#96CEB4',
+      '#FFEAA7'
+    ];
+
+    const items = colors.map((color, index) => (
+      <CarouselItem
+        key={index}
+        widthItemConfig={{
+          mobile: '90%',
+          tablet: '70%',
+          desktop: 'calc(47% - 10px)'
+        }}
+      >
+        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
+      </CarouselItem>
+    ));
+
+    return (
+      <Container>
+        <Title>Two Cards Per Page (with peek)</Title>
+        <CarouselComponent
+          items={items}
+          options={{
+            itemsPerPage: 2
+          }}
+          showArrows={true}
+          showDots={true}
+        />
+      </Container>
+    );
+  })
+  .add('Three Cards Per Page', () => {
+    const colors = [
+      '#005C8A',
+      '#FF6B6B',
+      '#4ECDC4',
+      '#45B7D1',
+      '#96CEB4',
+      '#FFEAA7',
+      '#DFE6E9',
+      '#74B9FF',
+      '#A29BFE'
+    ];
+
+    const items = colors.map((color, index) => (
+      <CarouselItem
+        key={index}
+        widthItemConfig={{
+          mobile: '85%',
+          tablet: '40%',
+          desktop: 'calc(31% - 14px)'
+        }}
+      >
+        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
+      </CarouselItem>
+    ));
+
+    return (
+      <Container>
+        <Title>Three Cards Per Page (with peek)</Title>
+        <CarouselComponent
+          items={items}
+          options={{
+            itemsPerPage: 3
+          }}
+          showArrows={true}
+          showDots={true}
+        />
+      </Container>
+    );
+  })
+  .add('Minimal Example', () => {
+    const items = [
+      <CarouselItem
+        key="1"
+        widthItemConfig={{
+          mobile: '90%',
+          tablet: '70%',
+          desktop: 'calc(47% - 10px)'
+        }}
+      >
+        <SimpleCard color="#005C8A">Card 1</SimpleCard>
+      </CarouselItem>,
+      <CarouselItem
+        key="2"
+        widthItemConfig={{
+          mobile: '90%',
+          tablet: '70%',
+          desktop: 'calc(47% - 10px)'
+        }}
+      >
+        <SimpleCard color="#FF6B6B">Card 2</SimpleCard>
+      </CarouselItem>,
+      <CarouselItem
+        key="3"
+        widthItemConfig={{
+          mobile: '90%',
+          tablet: '70%',
+          desktop: 'calc(47% - 10px)'
+        }}
+      >
+        <SimpleCard color="#4ECDC4">Card 3</SimpleCard>
+      </CarouselItem>,
+      <CarouselItem
+        key="4"
+        widthItemConfig={{
+          mobile: '90%',
+          tablet: '70%',
+          desktop: 'calc(47% - 10px)'
+        }}
+      >
+        <SimpleCard color="#45B7D1">Card 4</SimpleCard>
+      </CarouselItem>
+    ];
+
+    return (
+      <Container>
+        <Title>Simple 4 Cards</Title>
+        <CarouselComponent items={items} />
+      </Container>
+    );
+  })
+  .add('Without Navigation', () => {
+    const colors = ['#005C8A', '#FF6B6B', '#4ECDC4', '#45B7D1'];
+
+    const items = colors.map((color, index) => (
+      <CarouselItem
+        key={index}
+        widthItemConfig={{
+          mobile: '90%',
+          tablet: '70%',
+          desktop: 'calc(47% - 10px)'
+        }}
+      >
+        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
+      </CarouselItem>
+    ));
+
+    return (
+      <Container>
+        <Title>Scroll Only (No Arrows/Dots)</Title>
+        <CarouselComponent items={items} showArrows={false} showDots={false} />
+      </Container>
+    );
+  })
+  .add('Three Cards Exact Width (No Peek)', () => {
+    const colors = [
+      '#005C8A',
+      '#FF6B6B',
+      '#4ECDC4',
+      '#45B7D1',
+      '#96CEB4',
+      '#FFEAA7'
+    ];
+
+    const items = colors.map((color, index) => (
+      <CarouselItem
+        key={index}
+        widthItemConfig={{
+          mobile: '90%',
+          tablet: '70%',
+          desktop: 'calc(33% - 10px)'
+        }}
+      >
+        <SimpleCard color={color}>Card {index + 1}</SimpleCard>
+      </CarouselItem>
+    ));
+
+    return (
+      <Container>
+        <Title>Three Cards Per Page (exact width, no peek)</Title>
+        <CarouselComponent
+          items={items}
+          options={{
+            itemsPerPage: 3
+          }}
+          showArrows={true}
+          showDots={true}
+        />
+      </Container>
+    );
+  });

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

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

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,259 @@
+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

@@ -0,0 +1,140 @@
+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
+        widthItemConfig={{
+          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
+        widthItemConfig={{
+          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"
+        widthItemConfig={{
+          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 widthItemConfig={{}}>
+        <div>Test Content</div>
+      </CarouselItem>
+    );
+
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+});