🎡 Refactor: Carousel Component - Embla Composable API Migration

Summary

Complete refactor of the Carousel component from a monolithic preset-based implementation to a flexible composable API built on Embla Carousel. This change provides better developer experience, more flexibility, and improved code maintainability.

🎯 Key Changes

New Composable Carousel Architecture

• ✅ Replaced old CustomCarousel with modular composable components
• ✅ Introduced Carousel, CarouselContent, CarouselItem as base building blocks
• ✅ Added specialized components: CarouselPrevious, CarouselNext, CarouselDots, CarouselProgress, CarouselThumbnails
• ✅ Exposed useCarousel() hook for custom indicator development
• ✅ Added TypeScript support with proper type exports (CarouselApi, CarouselOptions, CarouselPlugin, ThumbnailData)

Enhanced Features

• 🎨 Wheel Gestures Support: Added embla-carousel-wheel-gestures plugin for mouse wheel navigation
• 🎬 Autoplay Support: Added embla-carousel-autoplay plugin for automatic slide transitions
• ♿ Improved Accessibility: Proper ARIA labels, keyboard navigation (Arrow keys), and screen reader support
• 🎯 Progress Tracking: Smart progress calculation that handles multiple visible slides correctly
• 🖼️ Thumbnails: Built-in thumbnail navigation with active state indication
• 🔄 Vertical Orientation: Full support for vertical carousels with auto-rotating arrows

Component API

// New composable pattern
<Carousel opts={{ loop: true }}>
  <CarouselContent>
    {items.map((item, i) => (
      <CarouselItem key={i}>{item}</CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
  <div className="absolute bottom-4 left-0 right-0 z-10">
    <CarouselDots />
  </div>
</Carousel>

Removed Components

• ❌ Deleted Indicator atom component (replaced by CarouselProgress and CarouselDots)
• ❌ Removed PresetCarousel references from examples

📦 Dependencies

• Added: embla-carousel-autoplay@^8.6.0
• Added: embla-carousel-wheel-gestures@^8.1.0

🔄 Migration Impact

Updated Components (13 files)

• ProductCarousel: Migrated to composable API
• ProductCarouselIndicator: Refactored to use useCarousel() hook
• EmptyCart: Updated carousel implementation
• AlgoliaProductsCarousel: Optimized with proper memo and cleanup
• HomeProductsCarousel: Performance improvements with Map-based lookups
• HomeCategories: Migrated with responsive basis classes
• HomePopularBrandsSection: Updated to composable API

Improved Code Quality

• 📝 Better TypeScript support with proper type exports
• 🎯 Cleaner component composition with explicit exports
• ⚡ Performance optimizations in product carousels

📚 Documentation

• ✅ Created comprehensive Storybook stories (Carousel.stories.tsx)
• ✅ 11 interactive examples showcasing different patterns
• ✅ Removed outdated example files

🎨 Storybook Setup

• ✅ Configured Tailwind CSS support in Storybook preview
• ✅ Updated to @storybook/nextjs framework
• ✅ Added proper TypeScript configuration
• ✅ Cleaned up example stories from initialization

🐛 Bug Fixes

• Fixed duplicate class in ProductCarousel (removed duplicate object-center)
• Fixed Windows path separator in staticDirs configuration
• Improved accessibility with proper ARIA labels throughout

🚀 Performance

• Better carousel state management with proper useCallback hooks
• Efficient progress calculation using Embla's native scrollProgress
• Cleanup functions in useEffect hooks to prevent memory leaks
• Map-based lookups instead of array.find() for O(1) product access

✅ Breaking Changes

• Old CustomCarousel component no longer available (use Carousel + composable children)
• PresetCarousel removed (examples updated to composable pattern)
• Indicator component removed (use CarouselProgress or CarouselDots)

📝 Testing Notes

All carousel implementations across the app have been updated and tested. Storybook provides interactive examples for all supported patterns.