datastake-daf 0.6.206 → 0.6.207

package/dist/components/index.js

@@ -21226,7 +21226,7 @@ const WidgetCard = _ref => {
 };
 
 const _excluded$e = ["title", "children"];
-function CarouselWidget(_ref) {
+const CarouselWidget = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       title,
       children
@@ -21241,19 +21241,91 @@ function CarouselWidget(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: title,
     className: "with-border-header h-w-btn-header",
-    children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, _objectSpread2(_objectSpread2({
+      ref: ref
+    }, rest), {}, {
       children: children
     }))
   });
+});
+CarouselWidget.displayName = 'CarouselWidget';
+
+function CustomArrowButton({
+  icon,
+  onClick = () => {},
+  isLeft = false,
+  iconColor = "#666",
+  hoverIconColor = "#1890ff"
+}) {
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  // Clone the icon and add color styling
+  const styledIcon = icon && typeof icon === 'object' ? {
+    ...icon,
+    props: {
+      ...icon.props,
+      style: {
+        color: isHovered ? hoverIconColor : iconColor
+      }
+    }
+  } : icon;
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+    type: "default",
+    shape: "circle",
+    icon: styledIcon,
+    onClick: onClick,
+    style: {
+      position: "absolute",
+      right: !isLeft ? "40px" : "auto",
+      left: !isLeft ? "auto" : "40px",
+      top: "58%",
+      transform: "translateY(-50%)",
+      zIndex: 10,
+      backgroundColor: "rgba(255, 255, 255, 0.4)",
+      border: "1px solid rgba(0, 0, 0, 0.1)",
+      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+      width: "40px",
+      height: "40px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    onMouseEnter: e => {
+      e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
+      setIsHovered(true);
+    },
+    onMouseLeave: e => {
+      e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.4)";
+      setIsHovered(false);
+    }
+  });
 }
 
-const _excluded$d = ["title", "images", "height", "fallback"];
+const StyledCarouselWrapper = dt.div`
+  position: relative;
+  
+  .ant-carousel .slick-dots li button {
+    background: ${props => props.inactiveDotColor} !important;
+    opacity: 1 !important;
+  }
+  
+  .ant-carousel .slick-dots li.slick-active button {
+    background: ${props => props.activeDotColor} !important;
+    opacity: 1 !important;
+  }
+`;
+
+const _excluded$d = ["title", "images", "height", "fallback", "activeDotColor", "inactiveDotColor", "arrowIconColor", "arrowHoverIconColor"];
 function ImageCarousel(_ref) {
   let {
       title,
       images,
       height = 400,
-      fallback = "/assets/images/empty-box.svg"
+      fallback = "/assets/images/empty-box.svg",
+      activeDotColor = "#1890ff",
+      inactiveDotColor = "rgba(255, 255, 255, 0.3)",
+      arrowIconColor = "#666",
+      arrowHoverIconColor = "#1890ff"
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$d);
   const [previewVisible, setPreviewVisible] = React.useState(false);
@@ -21262,16 +21334,30 @@ function ImageCarousel(_ref) {
   const handleCarouselChange = index => {
     setCurrent(index);
   };
+  const goToPrevious = () => {
+    var _carouselRef$current;
+    (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.prev();
+  };
+  const goToNext = () => {
+    var _carouselRef$current2;
+    (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 || _carouselRef$current2.next();
+  };
+
+  // Check if images array is empty or invalid
+  const hasImages = images && images.length > 0;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, _objectSpread2(_objectSpread2({
-      title: title
-    }, rest), {}, {
-      dots: false,
-      children: /*#__PURE__*/jsxRuntime.jsx(antd.Carousel, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledCarouselWrapper, {
+      activeDotColor: activeDotColor,
+      inactiveDotColor: inactiveDotColor,
+      children: [/*#__PURE__*/jsxRuntime.jsx(CarouselWidget, _objectSpread2(_objectSpread2({
+        title: title
+      }, rest), {}, {
+        arrows: false,
         ref: carouselRef,
         afterChange: handleCarouselChange,
-        infinite: true,
-        children: images.map((image, index) => {
+        infinite: hasImages,
+        dots: hasImages,
+        children: hasImages ? images.map((image, index) => {
           const imageSrc = typeof image === "string" ? image : image.src;
           const imageAlt = typeof image === "string" ? "".concat(title, " - Image ").concat(index + 1) : image.alt;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -21291,9 +21377,37 @@ function ImageCarousel(_ref) {
               }
             })
           }, imageSrc);
+        }) :
+        /*#__PURE__*/
+        // No images - show placeholder
+        jsxRuntime.jsx("div", {
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Image, {
+            src: "/assets/images/no-image.svg",
+            alt: "No images available",
+            height: height,
+            width: "100%",
+            fallback: fallback,
+            preview: false,
+            style: {
+              objectFit: "contain"
+            }
+          })
         })
-      })
-    })), /*#__PURE__*/jsxRuntime.jsx("div", {
+      })), hasImages && images.length > 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(CustomArrowButton, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(Icons.LeftOutlined, {}),
+          onClick: goToPrevious,
+          isLeft: true,
+          iconColor: arrowIconColor,
+          hoverIconColor: arrowHoverIconColor
+        }), /*#__PURE__*/jsxRuntime.jsx(CustomArrowButton, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(Icons.RightOutlined, {}),
+          onClick: goToNext,
+          iconColor: arrowIconColor,
+          hoverIconColor: arrowHoverIconColor
+        })]
+      })]
+    }), hasImages && /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         display: "none"
       },
@@ -21303,9 +21417,9 @@ function ImageCarousel(_ref) {
           current,
           onVisibleChange: vis => setPreviewVisible(vis),
           onChange: idx => {
-            var _carouselRef$current;
+            var _carouselRef$current3;
             setCurrent(idx);
-            (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.goTo(idx);
+            (_carouselRef$current3 = carouselRef.current) === null || _carouselRef$current3 === void 0 || _carouselRef$current3.goTo(idx);
           }
         },
         children: images.map((image, index) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.206",
+	"version": "0.6.207",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/public/assets/images/no-image.svg

@@ -0,0 +1,18 @@
+<svg width="321" height="190" viewBox="0 0 321 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4160_16949)">
+<g clip-path="url(#clip1_4160_16949)">
+<path d="M94.375 99.5C78.3569 103.095 68.5 107.992 68.5 113.388C68.5 124.421 109.69 133.364 160.5 133.364C211.31 133.364 252.5 124.421 252.5 113.388C252.5 107.992 242.643 103.095 226.625 99.5V108.208C226.625 114.266 222.83 119.232 218.144 119.232H102.856C98.17 119.232 94.375 114.263 94.375 108.208V99.5Z" fill="#F3F4F6"/>
+<path d="M188.137 64.8152C188.137 60.2351 190.995 56.454 194.54 56.4512H226.625V108.208C226.625 114.266 222.83 119.232 218.144 119.232H102.856C98.17 119.232 94.375 114.263 94.375 108.208V56.4512H126.46C130.005 56.4512 132.863 60.2266 132.863 64.8067V64.8695C132.863 69.4496 135.752 73.1479 139.294 73.1479H181.706C185.248 73.1479 188.137 69.4153 188.137 64.8352V64.8152Z" fill="#E5E7EB" stroke="#E5E7EB"/>
+<path d="M226.625 56.7663L197.455 23.9435C196.055 21.7063 194.011 20.3536 191.858 20.3536H129.142C126.989 20.3536 124.945 21.7063 123.545 23.9407L94.375 56.7692" stroke="#E5E7EB"/>
+</g>
+<path d="M133.177 162.5H131.687V152.636H133.074L138.188 159.909H138.242V152.636H139.732V162.5H138.352L133.238 155.233H133.177V162.5ZM144.586 162.589C142.439 162.589 141.072 161.126 141.072 158.788C141.072 156.457 142.446 154.98 144.586 154.98C146.726 154.98 148.093 156.45 148.093 158.788C148.093 161.126 146.732 162.589 144.586 162.589ZM144.586 161.358C145.844 161.358 146.589 160.408 146.589 158.788C146.589 157.168 145.844 156.211 144.586 156.211C143.328 156.211 142.576 157.175 142.576 158.788C142.576 160.408 143.328 161.358 144.586 161.358ZM154.19 162.5H152.659V152.636H154.19V162.5ZM155.858 162.5V155.076H157.273V156.334H157.301C157.643 155.5 158.442 154.994 159.413 154.994C160.445 154.994 161.19 155.514 161.491 156.437H161.525C161.915 155.541 162.79 154.994 163.85 154.994C165.312 154.994 166.27 155.958 166.27 157.441V162.5H164.793V157.797C164.793 156.826 164.267 156.266 163.344 156.266C162.435 156.266 161.792 156.942 161.792 157.893V162.5H160.336V157.674C160.336 156.812 159.782 156.266 158.914 156.266C157.998 156.266 157.342 156.977 157.342 157.947V162.5H155.858ZM170.33 161.393C171.431 161.393 172.265 160.688 172.265 159.711V159.13L170.46 159.253C169.448 159.314 168.922 159.69 168.922 160.347C168.922 160.982 169.476 161.393 170.33 161.393ZM169.934 162.575C168.45 162.575 167.425 161.7 167.425 160.374C167.425 159.075 168.43 158.323 170.262 158.207L172.265 158.091V157.517C172.265 156.669 171.697 156.204 170.706 156.204C169.899 156.204 169.312 156.621 169.182 157.264H167.794C167.835 155.951 169.079 154.98 170.747 154.98C172.559 154.98 173.728 155.938 173.728 157.407V162.5H172.312V161.263H172.278C171.868 162.069 170.945 162.575 169.934 162.575ZM178.369 161.249C179.572 161.249 180.372 160.265 180.372 158.768C180.372 157.264 179.572 156.259 178.369 156.259C177.173 156.259 176.4 157.243 176.4 158.768C176.4 160.285 177.173 161.249 178.369 161.249ZM178.376 165.173C176.592 165.173 175.32 164.346 175.177 163.074H176.674C176.838 163.648 177.528 164.011 178.438 164.011C179.613 164.011 180.372 163.396 180.372 162.425V161.201H180.338C179.907 162.001 179.032 162.479 177.979 162.479C176.127 162.479 174.883 161.023 174.883 158.761C174.883 156.471 176.113 155.001 178.014 155.001C179.066 155.001 179.928 155.486 180.386 156.307H180.413V155.076H181.849V162.309C181.849 164.079 180.516 165.173 178.376 165.173ZM186.456 156.19C185.39 156.19 184.617 156.97 184.535 158.111H188.302C188.268 156.956 187.536 156.19 186.456 156.19ZM188.295 160.326H189.71C189.498 161.659 188.192 162.589 186.524 162.589C184.371 162.589 183.031 161.14 183.031 158.815C183.031 156.491 184.385 154.98 186.463 154.98C188.5 154.98 189.785 156.396 189.785 158.645V159.164H184.528V159.253C184.528 160.538 185.335 161.386 186.552 161.386C187.413 161.386 188.09 160.976 188.295 160.326Z" fill="#9DA4AE"/>
+</g>
+<defs>
+<clipPath id="clip0_4160_16949">
+<rect x="0.5" y="0.5" width="320" height="189" rx="6" fill="white"/>
+</clipPath>
+<clipPath id="clip1_4160_16949">
+<rect width="184" height="117" fill="white" transform="translate(68.5 16.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/@daf/core/components/Dashboard/Widget/CarouselWidget/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import Widget from '../index.jsx'
 import { Carousel } from 'antd';
 
@@ -46,7 +46,7 @@ import { Carousel } from 'antd';
  * 
  * @returns {JSX.Element} The rendered CarouselWidget component
  */
-function CarouselWidget({title, children, ...rest}) {
+const CarouselWidget = forwardRef(({title, children, ...rest}, ref) => {
 
   /**
    * Handles carousel slide change events
@@ -59,11 +59,13 @@ function CarouselWidget({title, children, ...rest}) {
       title={title}
       className="with-border-header h-w-btn-header"
     >
-      <Carousel {...rest}>
+      <Carousel ref={ref} {...rest}>
         {children}
       </Carousel>
     </Widget>
   )
-}
+})
+
+CarouselWidget.displayName = 'CarouselWidget';
 
 export default CarouselWidget;

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/ImageCarousel.stories.js

@@ -17,7 +17,23 @@ export default {
   argTypes: {
     height: {
       control: { type: 'range', min: 200, max: 600, step: 50 },
-      description: 'Height of the carousel images'
+      description: 'Height of the carousel images',
+    },
+    activeDotColor: {
+      control: { type: 'color' },
+      description: 'Color of the active dot in the carousel',
+    },
+    inactiveDotColor: {
+      control: { type: 'color' },
+      description: 'Color of inactive dots in the carousel',
+    },
+    arrowIconColor: {
+      control: { type: 'color' },
+      description: 'Default color of arrow icons',
+    },
+    arrowHoverIconColor: {
+      control: { type: 'color' },
+      description: 'Color of arrow icons on hover',
     },
   },
 };
@@ -78,6 +94,7 @@ export const Primary = {
   args: {
     title: "Nature Gallery",
     height: 400,
+    arrows: true
   },
 };
 
@@ -90,4 +107,69 @@ export const WithFallbacks = {
       height={350}
     />
   ),
+};
+
+export const EmptyState = {
+  name: "Empty State (No Images)",
+  render: (args) => (
+    <div>
+      <p style={{ marginBottom: '16px', color: '#666' }}>
+        <strong>📷 Empty State:</strong> Shows placeholder when no images are provided. Notice how arrows, dots, and preview functionality are automatically disabled.
+      </p>
+      <ImageCarousel 
+        title="Empty Gallery" 
+        images={[]}
+        {...args}
+      />
+    </div>
+  ),
+  args: {
+    height: 400,
+    activeDotColor: "#1890ff",
+    inactiveDotColor: "rgba(255, 255, 255, 0.3)"
+  },
+};
+
+export const CustomDotColors = {
+  name: "Custom Dot Colors",
+  render: (args) => (
+    <div>
+      <p style={{ marginBottom: '16px', color: '#666' }}>
+        <strong>🎨 Custom Styling:</strong> Demonstrating custom dot colors with activeDotColor and inactiveDotColor props.
+      </p>
+      <ImageCarousel 
+        title="Colorful Gallery" 
+        images={sampleImages}
+        {...args}
+      />
+    </div>
+  ),
+  args: {
+    height: 400,
+    activeDotColor: "#ff4757",
+    inactiveDotColor: "rgba(255, 71, 87, 0.2)"
+  },
+};
+
+export const CustomArrowColors = {
+  name: "Custom Arrow Colors",
+  render: (args) => (
+    <div>
+      <p style={{ marginBottom: '16px', color: '#666' }}>
+        <strong>🎯 Arrow Styling:</strong> Demonstrating custom arrow icon colors with hover effects.
+      </p>
+      <ImageCarousel 
+        title="Interactive Arrows" 
+        images={sampleImages}
+        {...args}
+      />
+    </div>
+  ),
+  args: {
+    height: 400,
+    arrowIconColor: "#333",        // Dark gray normally
+    arrowHoverIconColor: "#ff6b6b", // Red on hover
+    activeDotColor: "#ff6b6b",
+    inactiveDotColor: "rgba(255, 107, 107, 0.2)"
+  },
 };

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/components/CustomArrowButton/index.js

@@ -0,0 +1,52 @@
+import { Button } from "antd";
+import { useState } from "react";
+
+function CustomArrowButton({
+  icon, 
+  onClick = () => {}, 
+  isLeft = false, 
+  iconColor = "#666", 
+  hoverIconColor = "#1890ff"
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Clone the icon and add color styling
+  const styledIcon = icon && typeof icon === 'object' ? 
+    { ...icon, props: { ...icon.props, style: { color: isHovered ? hoverIconColor : iconColor } } } : 
+    icon;
+
+  return (
+    <Button
+        type="default"
+        shape="circle"
+        icon={styledIcon}
+        onClick={onClick}
+        style={{
+            position: "absolute",
+            right: !isLeft ? "40px" : "auto",
+            left: !isLeft ? "auto" : "40px",
+            top: "58%",
+            transform: "translateY(-50%)",
+            zIndex: 10,
+            backgroundColor: "rgba(255, 255, 255, 0.4)",
+            border: "1px solid rgba(0, 0, 0, 0.1)",
+            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+            width: "40px",
+            height: "40px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }}
+        onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
+            setIsHovered(true);
+        }}
+        onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.4)";
+            setIsHovered(false);
+        }}
+    />
+  )
+}
+
+export default CustomArrowButton

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/index.jsx

@@ -1,6 +1,10 @@
 import React, { useState, useRef } from "react";
+import styled from "styled-components";
 import CarouselWidget from "../CarouselWidget/index.jsx";
-import { Image, Carousel } from "antd";
+import { Image, Carousel, Button } from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import CustomArrowButton from "./components/CustomArrowButton/index.js";
+import { StyledCarouselWrapper } from "./style.js";
 
 /**
  * @typedef {Object} ImageObject
@@ -36,6 +40,10 @@ import { Image, Carousel } from "antd";
  * @param {(string|ImageObject)[]} props.images - Array of image URLs (strings) or image objects with src and alt properties
  * @param {number} [props.height=400] - Height of the carousel images in pixels
  * @param {string} [props.fallback="/assets/images/empty-box.svg"] - Fallback image URL when original image fails to load
+ * @param {string} [props.activeDotColor="#1890ff"] - Color of the active dot
+ * @param {string} [props.inactiveDotColor="rgba(255, 255, 255, 0.3)"] - Color of inactive dots
+ * @param {string} [props.arrowIconColor="#666"] - Default color of arrow icons
+ * @param {string} [props.arrowHoverIconColor="#1890ff"] - Color of arrow icons on hover
  * @param {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
  * 
  * @features
@@ -46,6 +54,8 @@ import { Image, Carousel } from "antd";
  * - ✅ Support for both string URLs and image objects with alt text
  * - ✅ Synchronized carousel and preview navigation
  * - ✅ Infinite scrolling in both carousel and preview modes
+ * - ✅ Placeholder image for empty image arrays (/assets/images/no-image.svg)
+ * - ✅ Customizable dot colors via props
  * 
  * @accessibility
  * - Proper alt text support for screen readers
@@ -58,6 +68,10 @@ function ImageCarousel({
   images,
   height = 400,
   fallback = "/assets/images/empty-box.svg",
+  activeDotColor = "#1890ff",
+  inactiveDotColor = "rgba(255, 255, 255, 0.3)",
+  arrowIconColor = "#666",
+  arrowHoverIconColor = "#1890ff",
   ...rest
 }) {
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -68,11 +82,33 @@ function ImageCarousel({
     setCurrent(index);
   };
 
+  const goToPrevious = () => {
+    carouselRef.current?.prev();
+  };
+
+  const goToNext = () => {
+    carouselRef.current?.next();
+  };
+
+  // Check if images array is empty or invalid
+  const hasImages = images && images.length > 0;
+
   return (
     <>
-      <CarouselWidget title={title} {...rest} dots={false}>
-        <Carousel ref={carouselRef} afterChange={handleCarouselChange} infinite>
-          {images.map((image, index) => {
+      <StyledCarouselWrapper 
+        activeDotColor={activeDotColor}
+        inactiveDotColor={inactiveDotColor}
+      >
+        <CarouselWidget 
+          title={title} 
+          {...rest} 
+          arrows={false}
+          ref={carouselRef}
+          afterChange={handleCarouselChange}
+          infinite={hasImages}
+          dots={hasImages}
+        >
+          {hasImages ? images.map((image, index) => {
             const imageSrc = typeof image === "string" ? image : image.src;
             const imageAlt =
               typeof image === "string"
@@ -98,23 +134,58 @@ function ImageCarousel({
                 />
               </div>
             );
-          })}
-        </Carousel>
-      </CarouselWidget>
+          }) : (
+            // No images - show placeholder
+            <div>
+              <Image
+                src="/assets/images/no-image.svg"
+                alt="No images available"
+                height={height}
+                width="100%"
+                fallback={fallback}
+                preview={false}
+                style={{
+                  objectFit: "contain",
+                }}
+              />
+            </div>
+          )}
+        </CarouselWidget>
+        
+        {hasImages && images.length > 1 && (
+          <>
+            <CustomArrowButton
+              icon={<LeftOutlined />}
+              onClick={goToPrevious}
+              isLeft={true}
+              iconColor={arrowIconColor}
+              hoverIconColor={arrowHoverIconColor}
+            />
+            <CustomArrowButton
+              icon={<RightOutlined />}
+              onClick={goToNext}
+              iconColor={arrowIconColor}
+              hoverIconColor={arrowHoverIconColor}
+            />
+          </>
+        )}
+      </StyledCarouselWrapper>
 
-      <div style={{ display: "none" }}>
-        <Image.PreviewGroup
-          preview={{
-            visible: previewVisible,
-            current,
-            onVisibleChange: (vis) => setPreviewVisible(vis),
-            onChange: (idx) => {
-              setCurrent(idx);
-              carouselRef.current?.goTo(idx);
-            },
-          }}
-        >
-          {images.map((image, index) => {
+      {/* Preview functionality - only show if there are images */}
+      {hasImages && (
+        <div style={{ display: "none" }}>
+          <Image.PreviewGroup
+            preview={{
+              visible: previewVisible,
+              current,
+              onVisibleChange: (vis) => setPreviewVisible(vis),
+              onChange: (idx) => {
+                setCurrent(idx);
+                carouselRef.current?.goTo(idx);
+              },
+            }}
+          >
+            {images.map((image, index) => {
             const imageSrc = typeof image === "string" ? image : image.src;
             const imageAlt =
               typeof image === "string"
@@ -122,9 +193,10 @@ function ImageCarousel({
                 : image.alt;
 
             return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
-          })}
-        </Image.PreviewGroup>
-      </div>
+            })}
+          </Image.PreviewGroup>
+        </div>
+      )}
     </>
   );
 }

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/style.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const StyledCarouselWrapper = styled.div`
+  position: relative;
+  
+  .ant-carousel .slick-dots li button {
+    background: ${props => props.inactiveDotColor} !important;
+    opacity: 1 !important;
+  }
+  
+  .ant-carousel .slick-dots li.slick-active button {
+    background: ${props => props.activeDotColor} !important;
+    opacity: 1 !important;
+  }
+`;

package/.env

@@ -1,8 +0,0 @@
-REACT_APP_API_KEY=
-REACT_APP_AUTH_DOMAIN=
-REACT_APP_PROJECT_ID=
-REACT_APP_STORAGE_BUCKED=
-REACT_APP_SENDER_ID=
-REACT_APP_APP_ID=
-REACT_APP_MEASUREMENT_ID=
-REACT_APP_VAPID_KEY=

package/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-	"cSpell.words": ["cukura"],
-	"files.autoSave": "afterDelay",
-	"editor.wordWrap": "on",
-	"editor.autoClosingBrackets": "always",
-	"editor.autoClosingComments": "always",
-	"editor.autoClosingQuotes": "always",
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.formatOnPaste": true,
-	"editor.formatOnSave": true,
-	"notebook.defaultFormatter": "esbenp.prettier-vscode",
-	"javascript.format.semicolons": "insert"
-}