@growth-angels/ds-core 1.16.3 → 1.17.0

package/dist/lib/hydrate-carousel.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Carousel } from "../organisms/Carousel/Carousel";
+import { CarouselSwiper } from "../organisms/Carousel/CarouselSwiper";
 import { useReactAdapter } from "../hooks/useReactAdaptater";
 import { NativeChildWrapper } from "./utils/native-child-wrapper";
-const { createElement, createRoot, useRef, useEffect } = useReactAdapter();
+const { createElement, createRoot } = useReactAdapter();
 export function HydrateCarousel(islands) {
     console.log("HydrateCarousel called with islands:", islands);
     islands?.forEach((carousel) => {
-        const Component = Carousel;
+        const Component = CarouselSwiper;
         if (!Component)
             return;
         const props = carousel.getAttribute("data-props");

package/dist/organisms/Carousel/Carousel.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof Carousel>;
 export declare const Primary: Story;
 export declare const LoopingCarousel: Story;
 export declare const NotOverflowing: Story;
+export declare const SwiperCarousel: Story;

package/dist/organisms/Carousel/Carousel.stories.js

@@ -60,3 +60,27 @@ export const NotOverflowing = {
         hasPagination: true,
     },
 };
+export const SwiperCarousel = {
+    args: {
+        context: "wp-editor",
+        children: [
+            _jsx("div", { children: "Slide 1" }),
+            _jsx("div", { children: "Slide 2" }),
+            _jsx("div", { children: "Slide 3" }),
+            _jsx("div", { children: "Slide 4" }),
+            _jsx("div", { children: "Slide 5" }),
+            _jsx("div", { children: "Slide 6" }),
+            _jsx("div", { children: "Slide 7" }),
+        ],
+        slidesPerView: { sm: 1, md: 2, lg: 3, xl: 4 },
+        spaceBetween: 16,
+        pagination: {
+            clickable: true,
+        },
+        navigation: {
+            positionY: "bottom",
+        },
+        hasNavigation: true,
+        hasPagination: true,
+    },
+};

package/dist/organisms/Carousel/CarouselSwiper.d.ts

@@ -0,0 +1,2 @@
+import { CarouselProps } from "./Carousel.types";
+export declare const CarouselSwiper: (props: CarouselProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Carousel/CarouselSwiper.js

@@ -0,0 +1,60 @@
+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";
+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;
+    if (Swiper) {
+        const slidesPerView = { xs: 1, ...slidesPerViewDefault };
+        const { useEffect, useState, useRef, Children } = useReactAdapter();
+        const trackRef = 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);
+                const swiper = new Swiper(trackRef.current, {
+                    modules: [Autoplay, Navigation, Pagination],
+                    slidesPerView: currentSlidesPerView,
+                    spaceBetween,
+                    loop,
+                    navigation: hasNavigation
+                        ? {
+                            nextEl: ".ga-ds-carousel__button--next",
+                            prevEl: ".ga-ds-carousel__button--prev",
+                        }
+                        : false,
+                    pagination: hasPagination
+                        ? {
+                            el: ".ga-ds-carousel__dots",
+                            clickable: pagination ? pagination.clickable : false,
+                            bulletClass: "ga-ds-carousel__dot",
+                            bulletActiveClass: "ga-ds-carousel__dot--active",
+                        }
+                        : false,
+                });
+                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, {})] })] }));
+    }
+    return _jsx("div", { children: "Swiper library is not loaded." });
+};
+const CarouselNavigation = () => {
+    return (_jsxs("div", { className: `ga-ds-carousel__arrows`, children: [_jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--prev"], icon: "chevron-left" }), _jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--next"], icon: "chevron-right" })] }));
+};

package/dist/organisms/Carousel/CarouselSwiper.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CarouselSwiper } from "./CarouselSwiper";
+declare const meta: Meta<typeof CarouselSwiper>;
+export default meta;
+type Story = StoryObj<typeof CarouselSwiper>;
+export declare const Primary: Story;

package/dist/organisms/Carousel/CarouselSwiper.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CarouselSwiper } from "./CarouselSwiper";
+const meta = {
+    title: "Organisms/CarouselSwiper",
+    component: CarouselSwiper,
+    tags: ["autodocs"],
+};
+export default meta;
+export const Primary = {
+    args: {
+        children: [
+            _jsx("div", { children: "Slide 1" }),
+            _jsx("div", { children: "Slide 2" }),
+            _jsx("div", { children: "Slide 3" }),
+            _jsx("div", { children: "Slide 4" }),
+            _jsx("div", { children: "Slide 5" }),
+            _jsx("div", { children: "Slide 6" }),
+            _jsx("div", { children: "Slide 7" }),
+        ],
+        slidesPerView: { sm: 1, md: 2, lg: 3, xl: 4 },
+        spaceBetween: 16,
+        pagination: {
+            clickable: true,
+        },
+        navigation: {
+            positionY: "bottom",
+        },
+        hasNavigation: true,
+        hasPagination: true,
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.16.3",
+  "version": "1.17.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -37,7 +37,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@growth-angels/foundation": "^1.4.1"
+    "@growth-angels/foundation": "^1.4.1",
+    "swiper": "^12.0.3"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/lib/hydrate-carousel.tsx

@@ -1,12 +1,12 @@
-import { Carousel } from "../organisms/Carousel/Carousel"
+import { CarouselSwiper } from "../organisms/Carousel/CarouselSwiper"
 import { useReactAdapter } from "../hooks/useReactAdaptater"
 import { NativeChildWrapper } from "./utils/native-child-wrapper"
-const { createElement, createRoot, useRef, useEffect } = useReactAdapter()
+const { createElement, createRoot } = useReactAdapter()
 
 export function HydrateCarousel(islands: NodeListOf<Element> | null) {
   console.log("HydrateCarousel called with islands:", islands)
   islands?.forEach((carousel) => {
-    const Component = Carousel
+    const Component = CarouselSwiper
     if (!Component) return
     const props = carousel.getAttribute("data-props")
     carousel.removeAttribute("data-props")

package/src/organisms/Carousel/Carousel.scss

@@ -50,6 +50,7 @@
 
   &__arrows {
     display: flex;
+    gap: 0.8rem;
 
     &.left {
       justify-content: flex-start;

package/src/organisms/Carousel/Carousel.stories.tsx

@@ -66,3 +66,28 @@ export const NotOverflowing: Story = {
     hasPagination: true,
   },
 }
+
+export const SwiperCarousel: Story = {
+  args: {
+    context: "wp-editor",
+    children: [
+      <div>Slide 1</div>,
+      <div>Slide 2</div>,
+      <div>Slide 3</div>,
+      <div>Slide 4</div>,
+      <div>Slide 5</div>,
+      <div>Slide 6</div>,
+      <div>Slide 7</div>,
+    ],
+    slidesPerView: { sm: 1, md: 2, lg: 3, xl: 4 },
+    spaceBetween: 16,
+    pagination: {
+      clickable: true,
+    },
+    navigation: {
+      positionY: "bottom",
+    },
+    hasNavigation: true,
+    hasPagination: true,
+  },
+}

package/src/organisms/Carousel/CarouselSwiper.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { CarouselSwiper } from "./CarouselSwiper"
+
+const meta: Meta<typeof CarouselSwiper> = {
+  title: "Organisms/CarouselSwiper",
+  component: CarouselSwiper,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof CarouselSwiper>
+
+export const Primary: Story = {
+  args: {
+    children: [
+      <div>Slide 1</div>,
+      <div>Slide 2</div>,
+      <div>Slide 3</div>,
+      <div>Slide 4</div>,
+      <div>Slide 5</div>,
+      <div>Slide 6</div>,
+      <div>Slide 7</div>,
+    ],
+    slidesPerView: { sm: 1, md: 2, lg: 3, xl: 4 },
+    spaceBetween: 16,
+    pagination: {
+      clickable: true,
+    },
+    navigation: {
+      positionY: "bottom",
+    },
+    hasNavigation: true,
+    hasPagination: true,
+  },
+}

package/src/organisms/Carousel/CarouselSwiper.tsx

@@ -0,0 +1,99 @@
+import { useReactAdapter } from "../../hooks/useReactAdaptater"
+import { useBreakpointObserver } from "../../hooks/useBreakPointObserver"
+import { CarouselProps } from "./Carousel.types"
+import { Button } from "../../atoms/atoms"
+
+export const CarouselSwiper = (props: CarouselProps) => {
+  const {
+    children,
+    slidesPerView: slidesPerViewDefault,
+    spaceBetween = 20,
+    navigation,
+    pagination,
+    context,
+    hasPagination,
+    hasNavigation,
+    loop = false,
+  } = props
+  const Swiper = (window as any).Swiper.instance
+  const { Autoplay, Navigation, Pagination } = (window as any).Swiper.modules
+  if (Swiper) {
+    const slidesPerView = { xs: 1, ...slidesPerViewDefault }
+    const { useEffect, useState, useRef, Children } = useReactAdapter()
+    const trackRef = 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)
+
+        const swiper = new Swiper(trackRef.current, {
+          modules: [Autoplay, Navigation, Pagination],
+          slidesPerView: currentSlidesPerView,
+          spaceBetween,
+          loop,
+          navigation: hasNavigation
+            ? {
+                nextEl: ".ga-ds-carousel__button--next",
+                prevEl: ".ga-ds-carousel__button--prev",
+              }
+            : false,
+          pagination: hasPagination
+            ? {
+                el: ".ga-ds-carousel__dots",
+                clickable: pagination ? pagination.clickable : false,
+                bulletClass: "ga-ds-carousel__dot",
+                bulletActiveClass: "ga-ds-carousel__dot--active",
+              }
+            : false,
+        })
+
+        setSwiperInstance(swiper)
+      }
+    }, [
+      breakpoint,
+      slidesPerView,
+      spaceBetween,
+      navigation,
+      pagination,
+      hasNavigation,
+      hasPagination,
+      loop,
+      trackRef,
+      swiperInstance,
+    ])
+
+    return (
+      <div className="ga-carousel-swiper">
+        <div className="swiper" ref={trackRef}>
+          <div className="swiper-wrapper">
+            {slides.map((slide, index) => (
+              <div className="swiper-slide" key={index}>
+                {slide}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="ga-ds-carousel__navigation">
+          <div className="ga-ds-carousel__dots"></div>
+          <CarouselNavigation />
+        </div>
+      </div>
+    )
+  }
+  return <div>Swiper library is not loaded.</div>
+}
+
+const CarouselNavigation = () => {
+  return (
+    <div className={`ga-ds-carousel__arrows`}>
+      <Button extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--prev"]} icon="chevron-left" />
+      <Button extraClassNames={["ga-ds-carousel__button", "ga-ds-carousel__button--next"]} icon="chevron-right" />
+    </div>
+  )
+}