feat(carousel): add carousel widget (#762)

Co-authored-by: Marc Güell Segarra <[email protected]>

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,
 };

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;
   }

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;
+  }
+`;