From 14fb225343ea03a3992090a43c329433bbb8987e Mon Sep 17 00:00:00 2001
From: Eduard Carreras <ecarreras@gisce.net>
Date: Fri, 13 Dec 2024 09:22:22 +0100
Subject: [PATCH] feat(carousel): add carousel widget (#762)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Marc Güell Segarra <marc@ondori.dev>
---
 src/index.ts                    |  2 ++
 src/widgets/WidgetFactory.tsx   |  3 +++
 src/widgets/custom/Carousel.tsx | 42 +++++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 src/widgets/custom/Carousel.tsx

diff --git a/src/index.ts b/src/index.ts
index 73a04642..6b697487 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -52,6 +52,7 @@ import { Alert } from "@/widgets/custom/Alert";
 import { DashboardGrid } from "@/widgets/views/DashboardGrid";
 import { GraphIndicator } from "@/widgets/views/Graph/GraphIndicator";
 import { Spinner } from "@/widgets/custom/Spinner";
+import { Carousel } from "@/widgets/custom/Carousel";
 
 import type {
   TreeView,
@@ -179,4 +180,5 @@ export {
   Alert,
   dayjs,
   Spinner,
+  Carousel,
 };
diff --git a/src/widgets/WidgetFactory.tsx b/src/widgets/WidgetFactory.tsx
index ccb9564b..ebd273f6 100644
--- a/src/widgets/WidgetFactory.tsx
+++ b/src/widgets/WidgetFactory.tsx
@@ -36,6 +36,7 @@ import {
   HTMLPreview,
   Alert,
   Spinner,
+  Carousel,
 } from "@/index";
 import { Image } from "./base/Image";
 import { FiberGrid } from "./custom/FiberGrid";
@@ -133,6 +134,8 @@ const getWidgetType = (type: string) => {
       return Alert;
     case "spinner":
       return Spinner;
+    case "carousel":
+      return Carousel;
     default:
       return undefined;
   }
diff --git a/src/widgets/custom/Carousel.tsx b/src/widgets/custom/Carousel.tsx
new file mode 100644
index 00000000..0077a565
--- /dev/null
+++ b/src/widgets/custom/Carousel.tsx
@@ -0,0 +1,42 @@
+import { WidgetProps } from "@/types";
+import { Carousel as CarouselOoui, Group as GroupOoui } from "@gisce/ooui";
+import { Carousel as AntCarousel, theme } from "antd";
+import Container from "@/widgets/containers/Container";
+import styled from "styled-components";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
+
+type CarouselProps = Omit<WidgetProps, "ooui"> & {
+  ooui: CarouselOoui;
+  responsiveBehaviour?: boolean;
+};
+
+export const Carousel = (props: CarouselProps) => {
+  const { ooui, responsiveBehaviour = false } = props;
+
+  return (
+    <CustomCarousel autoplay={ooui.autoPlay} dots autoplaySpeed={5000}>
+      {ooui.items.map((group: GroupOoui, index: number) => (
+        <Container
+          key={index}
+          container={group.container}
+          responsiveBehaviour={responsiveBehaviour}
+        />
+      ))}
+    </CustomCarousel>
+  );
+};
+
+const CustomCarousel = styled(AntCarousel)`
+  .slick-dots li button {
+    background-color: ${mapToken.colorPrimary};
+  }
+  .slick-dots li.slick-active button {
+    background-color: ${mapToken.colorPrimary};
+  }
+  .slick-dots-bottom {
+    bottom: -15px;
+  }
+`;