@growth-angels/ds-core 1.16.3 → 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

@@ -1,12 +1,19 @@
 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();
+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 = 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,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReactAdapter } from "../../hooks/useReactAdaptater";
+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 = 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 [swiperInstance, setSwiperInstance] = useState(null);
+        useEffect(() => {
+            if (trackRef.current && containerRef.current && !swiperInstance) {
+                const { current } = containerRef;
+                const swiper = new Swiper(trackRef.current, {
+                    modules: [Autoplay, Navigation, Pagination],
+                    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: current.querySelector(".ga-ds-carousel__button--next"),
+                            prevEl: current.querySelector(".ga-ds-carousel__button--prev"),
+                        }
+                        : false,
+                    pagination: hasPagination
+                        ? {
+                            el: current.querySelector(".ga-ds-carousel__dots"),
+                            clickable: pagination ? pagination.clickable : false,
+                            bulletClass: "ga-ds-carousel__dot",
+                            bulletActiveClass: "ga-ds-carousel__dot--active",
+                        }
+                        : false,
+                });
+                setSwiperInstance(swiper);
+            }
+        }, [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." });
+};
+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.1",
   "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,19 @@
-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()
+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 = 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,113 @@
+import { useReactAdapter } from "../../hooks/useReactAdaptater"
+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 = 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<HTMLDivElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
+    const slides = Children.toArray(children)
+
+    const [swiperInstance, setSwiperInstance] = useState<any>(null)
+
+    useEffect(() => {
+      if (trackRef.current && containerRef.current && !swiperInstance) {
+        const { current } = containerRef
+        const swiper = new Swiper(trackRef.current, {
+          modules: [Autoplay, Navigation, Pagination],
+          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: current.querySelector(".ga-ds-carousel__button--next") as HTMLElement,
+                prevEl: current.querySelector(".ga-ds-carousel__button--prev") as HTMLElement,
+              }
+            : false,
+          pagination: hasPagination
+            ? {
+                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",
+              }
+            : false,
+        })
+
+        setSwiperInstance(swiper)
+      }
+    }, [slidesPerView, spaceBetween, navigation, pagination, hasNavigation, hasPagination, loop, trackRef, swiperInstance])
+
+    return (
+      <div className={`ga-carousel-swiper ${classes.join(" ")}`} ref={containerRef}>
+        <div className="swiper" ref={trackRef}>
+          <div className="swiper-wrapper">
+            {slides.map((slide, index) => (
+              <div className="swiper-slide" key={index}>
+                {slide}
+              </div>
+            ))}
+          </div>
+        </div>
+        {hasNavigation || hasPagination ? (
+          <div className="ga-ds-carousel__navigation">
+            {hasPagination && <div className="ga-ds-carousel__dots"></div>}
+            {hasNavigation && <CarouselNavigation />}
+          </div>
+        ) : null}
+      </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>
+  )
+}