datastake-daf 0.6.168 → 0.6.170

package/package.json

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

package/src/@daf/core/components/AvatarGroup/AvatarGroup.stories.jsx

@@ -2,7 +2,7 @@ import AvatarGroup from "./index.jsx";
 import ThemeLayout from "../ThemeLayout/index.jsx";
 
 export default {
-  title: "Core/AvatarGroup/AvatarGroup",
+  title: "Components/AvatarGroup",
   component: AvatarGroup,
   tags: ["autodocs"],
   args: {

package/src/@daf/core/components/Badge/Badge.stories.js

@@ -1,87 +1,85 @@
 import Badge from "./index.jsx";
 import ThemeLayout from "../ThemeLayout/index.jsx";
 
-
 export default {
-	title: "Core/Badge/Badge",
-	component: Badge,
-	tags: ["autodocs"],
-	args: {
-		children: "Badge Text",
-		variant: 'success',
-	},
-	decorators: [
-		(Story) => (
-			<div style={{ margin: "3em" }}>
-				<ThemeLayout>
-					<Story />
-				</ThemeLayout>
-			</div>
-		),
-	],
+  title: "Components/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  args: {
+    children: "Badge Text",
+    variant: "success",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "3em" }}>
+        <ThemeLayout>
+          <Story />
+        </ThemeLayout>
+      </div>
+    ),
+  ],
 };
 
 export const Primary = {
-	name: "Badge",
-	render: (args) => <div style={{ display: "flex", gap: "1em" }}>
-		<Badge {...args} />
-	</div> 
+  name: "Badge",
+  render: (args) => (
+    <div style={{ display: "flex", gap: "1em" }}>
+      <Badge {...args} />
+    </div>
+  ),
 };
 
 export const Variants = {
-	render: (args) => (
-		<div style={{ display: "flex", gap: "1em", flexDirection: "column" }}>
-			<Badge {...args} variant="default" />
-			<Badge {...args} variant="success" />
-			<Badge {...args} variant="danger" />
-			<Badge {...args} variant="warning" />
-		</div>
-	),
+  render: (args) => (
+    <div style={{ display: "flex", gap: "1em", flexDirection: "column" }}>
+      <Badge {...args} variant="default" />
+      <Badge {...args} variant="success" />
+      <Badge {...args} variant="danger" />
+      <Badge {...args} variant="warning" />
+    </div>
+  ),
 };
 
 export const IconSize = {
-	args: {
-		size: "icon",
-	},
-	render: (args) => (
-		<div style={{ display: "flex", gap: "1em" }}>
-			<Badge {...args} variant="default" />
-			<Badge {...args} />
-			<Badge {...args} variant="danger" />
-			<Badge {...args} variant="warning" />
-		</div>
-	),
+  args: {
+    size: "icon",
+  },
+  render: (args) => (
+    <div style={{ display: "flex", gap: "1em" }}>
+      <Badge {...args} variant="default" />
+      <Badge {...args} />
+      <Badge {...args} variant="danger" />
+      <Badge {...args} variant="warning" />
+    </div>
+  ),
 };
 
 export const CustomWidth = {
-	render: (args) => (
-		<div style={{ display: "flex", gap: "1em", flexDirection: "column" }}>
-			<Badge {...args} size={600} />
-			<Badge {...args} size={50} />
-			<Badge {...args} size={500} />
-			<Badge {...args} size={300} />
-		</div>
-	),
+  render: (args) => (
+    <div style={{ display: "flex", gap: "1em", flexDirection: "column" }}>
+      <Badge {...args} size={600} />
+      <Badge {...args} size={50} />
+      <Badge {...args} size={500} />
+      <Badge {...args} size={300} />
+    </div>
+  ),
 };
 
 export const BorderRadios = {
-
-	render: (args) => (
-		<div style={{ display: "flex", gap: "1em" }}>
-			<Badge {...args} rounded="none"  />
-			<Badge {...args} rounded="half"  />
-			<Badge {...args} rounded="full"  />
-		</div>
-	),
+  render: (args) => (
+    <div style={{ display: "flex", gap: "1em" }}>
+      <Badge {...args} rounded="none" />
+      <Badge {...args} rounded="half" />
+      <Badge {...args} rounded="full" />
+    </div>
+  ),
 };
 
-
-
 export const CustomBadge = {
-	render: (args) => (
-		<>
-			<style>
-				{`
+  render: (args) => (
+    <>
+      <style>
+        {`
 				.test {
 					color: white !important;
 				}
@@ -94,38 +92,44 @@ export const CustomBadge = {
 					color: #ff169f;
 					border: 1px dashed #ff169f;
 				}`}
-			</style>
-			<div style={{ display: "flex", gap: "1em" }} className="test">
-				<Badge {...args} rounded="half" customIcon={"Delete"} className="custom_badge_blue">
-					CUSTOMIZED
-				</Badge>
-				<Badge
-					{...args}
-					rounded="none"
-					size="icon"
-					customIcon={"Search"}
-					className="custom_badge_pink"
-				>
-					CUSTOMIZED
-				</Badge>
-			</div>
-		</>
-	),
+      </style>
+      <div style={{ display: "flex", gap: "1em" }} className="test">
+        <Badge
+          {...args}
+          rounded="half"
+          customIcon={"Delete"}
+          className="custom_badge_blue"
+        >
+          CUSTOMIZED
+        </Badge>
+        <Badge
+          {...args}
+          rounded="none"
+          size="icon"
+          customIcon={"Search"}
+          className="custom_badge_pink"
+        >
+          CUSTOMIZED
+        </Badge>
+      </div>
+    </>
+  ),
 };
 
 export const WithTooltip = {
-	render: (args) => (
-		<div style={{ display: "flex", gap: "1em" }}>
-			<Badge {...args} size={144} tooltip>
-				lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet
-				consectetur adipiscing elit
-			</Badge>
-			<Badge {...args} tooltip="Yes this is a tooltip">
-				Tooltip with your text
-			</Badge>
-			<Badge {...args} variant="danger" tooltip size="icon">
-				Tooltip with danger
-			</Badge>
-		</div>
-	),
-};
+  render: (args) => (
+    <div style={{ display: "flex", gap: "1em" }}>
+      <Badge {...args} size={144} tooltip>
+        lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor
+        sit amet consectetur adipiscing elit
+      </Badge>
+      <Badge {...args} tooltip="Yes this is a tooltip">
+        Tooltip with your text
+      </Badge>
+      <Badge {...args} variant="danger" tooltip size="icon">
+        Tooltip with danger
+      </Badge>
+    </div>
+  ),
+};
+

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

@@ -0,0 +1,42 @@
+import CarouselWidget from "./index";
+import ThemeLayout from "../../../ThemeLayout";
+import WidgetCard from "../WidgetCard";
+
+export default {
+  title: "Dashboard/Widgets/CarouselWidget",
+  component: CarouselWidget,
+  tags: ["autodocs"],
+  decorators: [
+		(Story) => (
+			<ThemeLayout>
+				<Story />
+			</ThemeLayout>
+		),
+	],
+};  
+
+const contentStyle = {
+  margin: 0,
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
+export const Primary = {
+  name: "CarouselWidget",
+  render: () => (
+    <CarouselWidget title="Carousel">
+      <div>
+        <h3 style={contentStyle}>1</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>2</h3>
+      </div>
+    </CarouselWidget>
+  ),
+  args: {
+    title: "Carousel",
+  },
+};

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

@@ -0,0 +1,72 @@
+import React from 'react'
+import Widget from '../index.jsx'
+import { Carousel } from 'antd';
+
+/**
+ * CarouselWidget Component - A reusable widget wrapper for Ant Design Carousel with consistent styling
+ * 
+ * @component
+ * @example
+ * // Basic usage
+ * <CarouselWidget title="My Content">
+ *   <div>Slide 1</div>
+ *   <div>Slide 2</div>
+ * </CarouselWidget>
+ * 
+ * @example
+ * // With additional carousel props
+ * <CarouselWidget 
+ *   title="Auto-play Carousel" 
+ *   autoplay 
+ *   dots={true}
+ *   speed={500}
+ * >
+ *   <div>Content 1</div>
+ *   <div>Content 2</div>
+ * </CarouselWidget>
+ * 
+ * @param {Object} props - Component props
+ * @param {string} props.title - The title displayed in the widget header
+ * @param {React.ReactNode} props.children - Child elements to be rendered as carousel slides
+ * @param {Object} [props.rest] - Additional props passed to the Ant Design Carousel component
+ * @param {boolean} [props.autoplay] - Whether to auto-play the carousel (passed via rest)
+ * @param {boolean} [props.dots=true] - Whether to show navigation dots (passed via rest)
+ * @param {number} [props.speed=500] - Animation speed in milliseconds (passed via rest)
+ * @param {boolean} [props.infinite=true] - Whether to enable infinite loop (passed via rest)
+ * @param {'horizontal'|'vertical'} [props.dotPosition='bottom'] - Position of navigation dots (passed via rest)
+ * @param {function} [props.beforeChange] - Callback before slide change (passed via rest)
+ * @param {function} [props.afterChange] - Callback after slide change (passed via rest)
+ * 
+ * @features
+ * - ✅ Consistent widget styling with header and borders
+ * - ✅ Full Ant Design Carousel functionality support
+ * - ✅ Slide change event logging for debugging
+ * - ✅ Flexible content rendering via children
+ * - ✅ Responsive design integration
+ * 
+ * @returns {JSX.Element} The rendered CarouselWidget component
+ */
+function CarouselWidget({title, children, ...rest}) {
+
+  /**
+   * Handles carousel slide change events
+   * @param {number} currentSlide - The index of the current slide after change
+   * @private
+   */
+  const onChange = (currentSlide) => {
+    console.log(currentSlide);
+  };
+
+  return (
+    <Widget
+      title={title}
+      className="with-border-header h-w-btn-header"
+    >
+      <Carousel afterChange={onChange} {...rest}>
+        {children}
+      </Carousel>
+    </Widget>
+  )
+}
+
+export default CarouselWidget;

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

@@ -0,0 +1,93 @@
+import { Image } from "antd";
+import ImageCarousel from "./index";
+import ThemeLayout from "../../../ThemeLayout";
+import WidgetCard from "../WidgetCard";
+
+export default {
+  title: "Dashboard/Widgets/ImageCarousel",
+  component: ImageCarousel,
+  tags: ["autodocs"],
+  decorators: [
+		(Story) => (
+			<ThemeLayout>
+				<Story />
+			</ThemeLayout>
+		),
+	],
+  argTypes: {
+    height: {
+      control: { type: 'range', min: 200, max: 600, step: 50 },
+      description: 'Height of the carousel images'
+    },
+  },
+};
+
+// High quality sample images with proper alt text
+const sampleImages = [
+  {
+    src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop",
+    alt: "Scenic mountain landscape with lake reflection"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=600&fit=crop",
+    alt: "Dense forest path with sunlight filtering through trees"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1448375240586-882707db888b?w=800&h=600&fit=crop",
+    alt: "Rolling green hills under a cloudy sky"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&h=600&fit=crop",
+    alt: "Serene forest landscape with tall pine trees"
+  }
+];
+
+const mixedQualityImages = [
+  {
+    src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop",
+    alt: "High quality mountain landscape"
+  },
+  {
+    src: "https://invalid-url-to-show-fallback.jpg",
+    alt: "Broken image to demonstrate fallback functionality"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=300&fit=crop",
+    alt: "Lower resolution forest image"
+  },
+  {
+    src: "https://images.unsplash.com/photo-1448375240586-882707db888b?w=1200&h=800&fit=crop",
+    alt: "High resolution hills landscape"
+  }
+];
+
+export const Primary = {
+  name: "Basic ImageCarousel",
+  render: (args) => (
+    <div>
+      <p style={{ marginBottom: '16px', color: '#666' }}>
+        <strong>💡 Tip:</strong> Click any image to open preview, then use ← → arrow keys to navigate between images!
+      </p>
+      <ImageCarousel 
+        title="Nature Gallery" 
+        images={sampleImages}
+        {...args}
+      />
+    </div>
+  ),
+  args: {
+    title: "Nature Gallery",
+    height: 400,
+  },
+};
+
+export const WithFallbacks = {
+  name: "With Error Handling",
+  render: () => (
+    <ImageCarousel 
+      title="Mixed Quality Images" 
+      images={mixedQualityImages}
+      height={350}
+    />
+  ),
+};

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

@@ -0,0 +1,132 @@
+import React, { useState, useRef } from "react";
+import CarouselWidget from "../CarouselWidget/index.jsx";
+import { Image, Carousel } from "antd";
+
+/**
+ * @typedef {Object} ImageObject
+ * @property {string} src - The source URL of the image
+ * @property {string} alt - Alternative text for the image
+ */
+
+/**
+ * ImageCarousel Component - A responsive image carousel with preview functionality and keyboard navigation
+ * 
+ * @component
+ * @example
+ * // Basic usage with string URLs
+ * <ImageCarousel 
+ *   title="My Gallery" 
+ *   images={["image1.jpg", "image2.jpg"]} 
+ * />
+ * 
+ * @example
+ * // Advanced usage with image objects and custom height
+ * <ImageCarousel 
+ *   title="Nature Gallery"
+ *   images={[
+ *     { src: "landscape.jpg", alt: "Beautiful mountain landscape" },
+ *     { src: "forest.jpg", alt: "Dense forest path" }
+ *   ]}
+ *   height={300}
+ *   fallback="/custom-fallback.svg"
+ * />
+ * 
+ * @param {Object} props - Component props
+ * @param {string} props.title - The title displayed in the widget header
+ * @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 {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
+ * 
+ * @features
+ * - ✅ Responsive image display with lazy loading
+ * - ✅ Click-to-preview with full-screen image viewer
+ * - ✅ Keyboard navigation in preview mode (← → arrow keys)
+ * - ✅ Automatic fallback for broken images
+ * - ✅ Support for both string URLs and image objects with alt text
+ * - ✅ Synchronized carousel and preview navigation
+ * - ✅ Infinite scrolling in both carousel and preview modes
+ * 
+ * @accessibility
+ * - Proper alt text support for screen readers
+ * - Keyboard navigation support
+ * - Focus management in preview mode
+ * 
+ */
+function ImageCarousel({
+  title,
+  images,
+  height = 400,
+  fallback = "/assets/images/empty-box.svg",
+  ...rest
+}) {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [current, setCurrent] = useState(0);
+  const carouselRef = useRef(null);
+
+  const handleCarouselChange = (index) => {
+    setCurrent(index);
+  };
+
+  return (
+    <>
+      <CarouselWidget title={title} {...rest} dots={false}>
+        <Carousel ref={carouselRef} afterChange={handleCarouselChange} infinite>
+          {images.map((image, index) => {
+            const imageSrc = typeof image === "string" ? image : image.src;
+            const imageAlt =
+              typeof image === "string"
+                ? `${title} - Image ${index + 1}`
+                : image.alt;
+
+            return (
+              <div key={imageSrc}>
+                <Image
+                  src={imageSrc}
+                  alt={imageAlt}
+                  height={height}
+                  width="100%"
+                  fallback={fallback}
+                  loading="lazy"
+                  preview={{
+                    visible: false,
+                  }}
+                  onClick={() => {
+                    setCurrent(index);
+                    setPreviewVisible(true);
+                  }}
+                />
+              </div>
+            );
+          })}
+        </Carousel>
+      </CarouselWidget>
+
+      <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"
+                ? `${title} - Image ${index + 1}`
+                : image.alt;
+
+            return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
+          })}
+        </Image.PreviewGroup>
+      </div>
+    </>
+  );
+}
+
+export default ImageCarousel;

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/ProjectWidget.stories.jsx

@@ -1,7 +1,6 @@
 import ProjectWidget from "./index.jsx";
 import ThemeLayout from "../../../ThemeLayout/index.jsx";
 import Widget from "../index.jsx";
-
 import DashboardLayout from "../../DashboardLayout/index.jsx";
 export default {
   title: "Dashboard/Widgets/ProjectWidget",
@@ -21,8 +20,6 @@ export default {
 export const Primary = {
   name: "ProjectWidget",
   args: {
-    image:
-      "https://images.steamusercontent.com/ugc/2064377508522269100/6E178CC9C29DDA679B4941E43DF799E93163804A/?imw=637&imh=358&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true",
     onLinkClick: () => {},
     linkIcon: "Link",
     sdgList: [