@times-components/ts-components 1.146.2-be27d508c972211ad80599875cd69c63bf67d4b1.45 → 1.146.2-c9973aa4b92ab539c7e626ec928a64701390290d.3

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

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import { ItemContainer } from './styles';
-import { CarouselItemProps } from './types';
-
-export const CarouselItem: React.FC<CarouselItemProps> = ({
-  children,
-  widthItemConfig = {
-    xs: '85%',
-    mobile: '85%',
-    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

@@ -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
-        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();
-  });
-});