@growth-angels/ds-core 1.17.0 → 1.17.1

package/dist/lib/hydrate-carousel.d.ts

@@ -1 +1,3 @@
+import "swiper/css";
+import "swiper/css/autoplay";
 export declare function HydrateCarousel(islands: NodeListOf<Element> | null): void;

package/dist/lib/hydrate-carousel.js

@@ -2,9 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CarouselSwiper } from "../organisms/Carousel/CarouselSwiper";
 import { useReactAdapter } from "../hooks/useReactAdaptater";
 import { NativeChildWrapper } from "./utils/native-child-wrapper";
+import Swiper from "swiper";
+import * as modules from "swiper/modules";
+window.Swiper = {
+    instance: Swiper,
+    modules,
+};
+import "swiper/css";
+import "swiper/css/autoplay";
 const { createElement, createRoot } = useReactAdapter();
 export function HydrateCarousel(islands) {
-    console.log("HydrateCarousel called with islands:", islands);
     islands?.forEach((carousel) => {
         const Component = CarouselSwiper;
         if (!Component)

package/dist/organisms/Carousel/CarouselSwiper.js

@@ -1,36 +1,61 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
-import { useBreakpointObserver } from "../../hooks/useBreakPointObserver";
 import { Button } from "../../atoms/atoms";
+import Swiper from "swiper";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
 export const CarouselSwiper = (props) => {
-    const { children, slidesPerView: slidesPerViewDefault, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
-    const Swiper = window.Swiper.instance;
-    const { Autoplay, Navigation, Pagination } = window.Swiper.modules;
+    const { children, slidesPerView: slidesPerViewDefault, spaceBetween = 48, navigation, pagination, hasPagination, hasNavigation, loop = false, } = props;
+    const classes = ["ga-ds-carousel"];
+    if (props.extraClassNames) {
+        if (typeof props.extraClassNames === "string") {
+            classes.push(props.extraClassNames);
+        }
+        else {
+            classes.push(...props.extraClassNames);
+        }
+    }
     if (Swiper) {
         const slidesPerView = { xs: 1, ...slidesPerViewDefault };
         const { useEffect, useState, useRef, Children } = useReactAdapter();
         const trackRef = useRef(null);
+        const containerRef = useRef(null);
         const slides = Children.toArray(children);
-        const breakpoint = useBreakpointObserver({ xs: 375, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1440 });
         const [swiperInstance, setSwiperInstance] = useState(null);
         useEffect(() => {
-            if (trackRef.current && !swiperInstance) {
-                const currentSlidesPerView = slidesPerView[breakpoint] ??
-                    (typeof slidesPerView === "number" ? slidesPerView : slidesPerView.xl ?? 1);
+            if (trackRef.current && containerRef.current && !swiperInstance) {
+                const { current } = containerRef;
                 const swiper = new Swiper(trackRef.current, {
                     modules: [Autoplay, Navigation, Pagination],
-                    slidesPerView: currentSlidesPerView,
+                    slidesPerView: 1,
+                    breakpoints: {
+                        375: {
+                            slidesPerView: slidesPerView.xs ?? 1,
+                        },
+                        576: {
+                            slidesPerView: slidesPerView.sm ?? 1,
+                        },
+                        768: {
+                            slidesPerView: slidesPerView.md ?? 1,
+                        },
+                        992: {
+                            slidesPerView: slidesPerView.lg ?? 1,
+                        },
+                        1200: {
+                            slidesPerView: slidesPerView.xl ?? 1,
+                        },
+                    },
                     spaceBetween,
                     loop,
+                    mousewheel: true,
                     navigation: hasNavigation
                         ? {
-                            nextEl: ".ga-ds-carousel__button--next",
-                            prevEl: ".ga-ds-carousel__button--prev",
+                            nextEl: current.querySelector(".ga-ds-carousel__button--next"),
+                            prevEl: current.querySelector(".ga-ds-carousel__button--prev"),
                         }
                         : false,
                     pagination: hasPagination
                         ? {
-                            el: ".ga-ds-carousel__dots",
+                            el: current.querySelector(".ga-ds-carousel__dots"),
                             clickable: pagination ? pagination.clickable : false,
                             bulletClass: "ga-ds-carousel__dot",
                             bulletActiveClass: "ga-ds-carousel__dot--active",
@@ -39,19 +64,8 @@ export const CarouselSwiper = (props) => {
                 });
                 setSwiperInstance(swiper);
             }
-        }, [
-            breakpoint,
-            slidesPerView,
-            spaceBetween,
-            navigation,
-            pagination,
-            hasNavigation,
-            hasPagination,
-            loop,
-            trackRef,
-            swiperInstance,
-        ]);
-        return (_jsxs("div", { className: "ga-carousel-swiper", children: [_jsx("div", { className: "swiper", ref: trackRef, children: _jsx("div", { className: "swiper-wrapper", children: slides.map((slide, index) => (_jsx("div", { className: "swiper-slide", children: slide }, index))) }) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [_jsx("div", { className: "ga-ds-carousel__dots" }), _jsx(CarouselNavigation, {})] })] }));
+        }, [slidesPerView, spaceBetween, navigation, pagination, hasNavigation, hasPagination, loop, trackRef, swiperInstance]);
+        return (_jsxs("div", { className: `ga-carousel-swiper ${classes.join(" ")}`, ref: containerRef, children: [_jsx("div", { className: "swiper", ref: trackRef, children: _jsx("div", { className: "swiper-wrapper", children: slides.map((slide, index) => (_jsx("div", { className: "swiper-slide", children: slide }, index))) }) }), hasNavigation || hasPagination ? (_jsxs("div", { className: "ga-ds-carousel__navigation", children: [hasPagination && _jsx("div", { className: "ga-ds-carousel__dots" }), hasNavigation && _jsx(CarouselNavigation, {})] })) : null] }));
     }
     return _jsx("div", { children: "Swiper library is not loaded." });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,

package/src/lib/hydrate-carousel.tsx

@@ -1,10 +1,17 @@
 import { CarouselSwiper } from "../organisms/Carousel/CarouselSwiper"
 import { useReactAdapter } from "../hooks/useReactAdaptater"
 import { NativeChildWrapper } from "./utils/native-child-wrapper"
+import Swiper from "swiper"
+import * as modules from "swiper/modules"
+;(window as any).Swiper = {
+  instance: Swiper,
+  modules,
+}
+import "swiper/css"
+import "swiper/css/autoplay"
 const { createElement, createRoot } = useReactAdapter()
 
 export function HydrateCarousel(islands: NodeListOf<Element> | null) {
-  console.log("HydrateCarousel called with islands:", islands)
   islands?.forEach((carousel) => {
     const Component = CarouselSwiper
     if (!Component) return

package/src/organisms/Carousel/CarouselSwiper.tsx

@@ -1,51 +1,74 @@
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
-import { useBreakpointObserver } from "../../hooks/useBreakPointObserver"
 import { CarouselProps } from "./Carousel.types"
 import { Button } from "../../atoms/atoms"
+import Swiper from "swiper"
+import { Autoplay, Navigation, Pagination } from "swiper/modules"
 
 export const CarouselSwiper = (props: CarouselProps) => {
   const {
     children,
     slidesPerView: slidesPerViewDefault,
-    spaceBetween = 20,
+    spaceBetween = 48,
     navigation,
     pagination,
-    context,
     hasPagination,
     hasNavigation,
     loop = false,
   } = props
-  const Swiper = (window as any).Swiper.instance
-  const { Autoplay, Navigation, Pagination } = (window as any).Swiper.modules
+
+  const classes = ["ga-ds-carousel"]
+
+  if (props.extraClassNames) {
+    if (typeof props.extraClassNames === "string") {
+      classes.push(props.extraClassNames)
+    } else {
+      classes.push(...props.extraClassNames)
+    }
+  }
   if (Swiper) {
     const slidesPerView = { xs: 1, ...slidesPerViewDefault }
     const { useEffect, useState, useRef, Children } = useReactAdapter()
     const trackRef = useRef<HTMLDivElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
     const slides = Children.toArray(children)
 
-    const breakpoint = useBreakpointObserver({ xs: 375, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1440 })
     const [swiperInstance, setSwiperInstance] = useState<any>(null)
 
     useEffect(() => {
-      if (trackRef.current && !swiperInstance) {
-        const currentSlidesPerView =
-          (slidesPerView as Record<string, number>)[breakpoint] ??
-          (typeof slidesPerView === "number" ? slidesPerView : (slidesPerView as any).xl ?? 1)
-
+      if (trackRef.current && containerRef.current && !swiperInstance) {
+        const { current } = containerRef
         const swiper = new Swiper(trackRef.current, {
           modules: [Autoplay, Navigation, Pagination],
-          slidesPerView: currentSlidesPerView,
+          slidesPerView: 1,
+          breakpoints: {
+            375: {
+              slidesPerView: (slidesPerView as Record<string, number>).xs ?? 1,
+            },
+            576: {
+              slidesPerView: (slidesPerView as Record<string, number>).sm ?? 1,
+            },
+            768: {
+              slidesPerView: (slidesPerView as Record<string, number>).md ?? 1,
+            },
+            992: {
+              slidesPerView: (slidesPerView as Record<string, number>).lg ?? 1,
+            },
+            1200: {
+              slidesPerView: (slidesPerView as Record<string, number>).xl ?? 1,
+            },
+          },
           spaceBetween,
           loop,
+          mousewheel: true,
           navigation: hasNavigation
             ? {
-                nextEl: ".ga-ds-carousel__button--next",
-                prevEl: ".ga-ds-carousel__button--prev",
+                nextEl: current.querySelector(".ga-ds-carousel__button--next") as HTMLElement,
+                prevEl: current.querySelector(".ga-ds-carousel__button--prev") as HTMLElement,
               }
             : false,
           pagination: hasPagination
             ? {
-                el: ".ga-ds-carousel__dots",
+                el: current.querySelector(".ga-ds-carousel__dots") as HTMLElement,
                 clickable: pagination ? pagination.clickable : false,
                 bulletClass: "ga-ds-carousel__dot",
                 bulletActiveClass: "ga-ds-carousel__dot--active",
@@ -55,21 +78,10 @@ export const CarouselSwiper = (props: CarouselProps) => {
 
         setSwiperInstance(swiper)
       }
-    }, [
-      breakpoint,
-      slidesPerView,
-      spaceBetween,
-      navigation,
-      pagination,
-      hasNavigation,
-      hasPagination,
-      loop,
-      trackRef,
-      swiperInstance,
-    ])
+    }, [slidesPerView, spaceBetween, navigation, pagination, hasNavigation, hasPagination, loop, trackRef, swiperInstance])
 
     return (
-      <div className="ga-carousel-swiper">
+      <div className={`ga-carousel-swiper ${classes.join(" ")}`} ref={containerRef}>
         <div className="swiper" ref={trackRef}>
           <div className="swiper-wrapper">
             {slides.map((slide, index) => (
@@ -79,10 +91,12 @@ export const CarouselSwiper = (props: CarouselProps) => {
             ))}
           </div>
         </div>
-        <div className="ga-ds-carousel__navigation">
-          <div className="ga-ds-carousel__dots"></div>
-          <CarouselNavigation />
-        </div>
+        {hasNavigation || hasPagination ? (
+          <div className="ga-ds-carousel__navigation">
+            {hasPagination && <div className="ga-ds-carousel__dots"></div>}
+            {hasNavigation && <CarouselNavigation />}
+          </div>
+        ) : null}
       </div>
     )
   }