Description:
The Carousel component enables users to navigate through a collection of content items, such as images or cards, within a confined space. This component is ideal for use in galleries, feature highlights, or any interface requiring a compact content browsing experience.

Requirements:

1. Component Implementation:

• Implement the Carousel component in TypeScript.
• Utilize SCSS with BEM methodology for styling.
• Integrate design tokens from @geneui/tokens for consistent colors, spacing, and animation effects.
• Support different navigation options (e.g., arrows, dots) and autoplay functionality.
• Allow customization of transition effects and item display settings (e.g., number of items per view).

2. Unit Tests:

• Write unit tests using Jest and React Testing Library.
• Ensure test coverage for all props, including navigation types, autoplay, and transition effects.
• Test for edge cases such as empty content, unsupported configurations, and boundary conditions (e.g., first and last items).

3. Storybook Stories:

• Create a Storybook story for the Carousel component.
• Showcase different configurations, such as varying navigation styles, autoplay, and item layouts.
• Create controls for the props so users can interact with the Carousel component in Storybook.
• Document all props of the public interfaces.

4. Figma Design:

Follow the design outlined in the provided Figma link.

Checklist:

• Component is implemented in TypeScript.
• Styling follows SCSS using BEM methodology.
• Design tokens from @geneui/tokens are used for colors, spacing, and animations.
• Unit tests written and cover different states and edge cases.
• Storybook stories created with examples of all props and configuration options.
• Figma design matches the component implementation.