datastake-daf 0.6.464 → 0.6.465

package/dist/utils/index.js

@@ -21,9 +21,29 @@ require('deepmerge');
 var countriesList = require('countries-list');
 require('country-city-location');
 require('leaflet-editable');
+var htmlToImage = require('html-to-image');
+var docx = require('docx');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_$2);
@@ -31,6 +51,7 @@ var dot__default = /*#__PURE__*/_interopDefaultLegacy(dot);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var L__default = /*#__PURE__*/_interopDefaultLegacy(L$2);
+var docx__namespace = /*#__PURE__*/_interopNamespace(docx);
 
 const mmtTheme = {
   // Base
@@ -12617,14 +12638,655 @@ function displayMessage(type, m) {
   antd.message[type](m);
 }
 
+/**
+ * Captures one or multiple DOM elements and returns their images as base64 strings.
+ *
+ * @param elements - A single element or an array of elements (or refs)
+ * @param options - Optional html-to-image options (e.g., { cacheBust: true })
+ * @returns Promise<string[]> - Array of base64 PNG strings (same order as input)
+ */
+async function captureElementsAsImages(elements, options = {
+  cacheBust: true
+}) {
+  const targets = Array.isArray(elements) ? elements : [elements];
+  const validElements = targets.filter(Boolean);
+  const captures = await Promise.all(validElements.map(async el => {
+    try {
+      return await htmlToImage.toPng(el, options);
+    } catch (err) {
+      console.error("Error capturing element as image:", err);
+      return "";
+    }
+  }));
+  return captures;
+}
+
+/**
+ * Renders different types of document elements based on type
+ * @param {Object} item - Configuration item
+ * @param {string} item.type - Type of element (paragraph, heading, table, image, etc.)
+ * @param {any} item.data - Data for the element
+ * @param {Object} item.meta - Metadata/styling for text runs
+ * @param {Object} item.style - Style properties for the element
+ * @returns {docx element} The rendered document element
+ */
+const renderElement = item => {
+  const {
+    type = 'paragraph',
+    data,
+    meta = {},
+    style = {}
+  } = item;
+  switch (type) {
+    case 'paragraph':
+      return new docx__namespace.Paragraph({
+        children: [new docx__namespace.TextRun({
+          text: data,
+          ...meta
+        })],
+        ...style
+      });
+    case 'heading':
+      return new docx__namespace.Paragraph({
+        text: data,
+        heading: style.heading || docx__namespace.HeadingLevel.HEADING_1,
+        ...style
+      });
+    case 'table':
+      return new docx__namespace.Table({
+        rows: data.map(row => new docx__namespace.TableRow({
+          children: row.map(cell => new docx__namespace.TableCell({
+            children: [new docx__namespace.Paragraph(cell)]
+          }))
+        })),
+        ...style
+      });
+    case 'image':
+      return new docx__namespace.Paragraph({
+        children: [new docx__namespace.ImageRun({
+          data: data,
+          transformation: {
+            width: style.width || 100,
+            height: style.height || 100
+          },
+          ...meta
+        })],
+        ...style
+      });
+    case 'imageWithText':
+      {
+        // Creates a table with image and text side by side
+        // imagePosition: 'left' (default) or 'right'
+        const imagePosition = data.imagePosition || 'left';
+
+        // Create image cell
+        const imageCell = new docx__namespace.TableCell({
+          children: [...(data.image ? [new docx__namespace.Paragraph({
+            children: [new docx__namespace.ImageRun({
+              data: data.image,
+              transformation: {
+                width: data.imageWidth || 250,
+                height: data.imageHeight || 200
+              }
+            })]
+          })] : [new docx__namespace.Paragraph({
+            text: '[Image placeholder]',
+            shading: {
+              fill: 'F0F0F0'
+            }
+          })])],
+          width: {
+            size: 50,
+            type: docx__namespace.WidthType.PERCENTAGE
+          },
+          borders: {
+            top: {
+              style: docx__namespace.BorderStyle.SINGLE,
+              size: 1,
+              color: 'CCCCCC'
+            },
+            bottom: {
+              style: docx__namespace.BorderStyle.SINGLE,
+              size: 1,
+              color: 'CCCCCC'
+            },
+            left: {
+              style: docx__namespace.BorderStyle.SINGLE,
+              size: 1,
+              color: 'CCCCCC'
+            },
+            right: {
+              style: docx__namespace.BorderStyle.SINGLE,
+              size: 1,
+              color: 'CCCCCC'
+            }
+          }
+        });
+
+        // Create text cell
+        const textCell = new docx__namespace.TableCell({
+          children: [new docx__namespace.Paragraph({
+            children: [new docx__namespace.TextRun({
+              text: data.text || '',
+              size: 22
+            })]
+          })],
+          width: {
+            size: 50,
+            type: docx__namespace.WidthType.PERCENTAGE
+          },
+          borders: {
+            top: {
+              style: docx__namespace.BorderStyle.SINGLE,
+              size: 1,
+              color: 'CCCCCC'
+            },
+            bottom: {
+              style: docx__namespace.BorderStyle.SINGLE,
+              size: 1,
+              color: 'CCCCCC'
+            },
+            left: {
+              style: docx__namespace.BorderStyle.SINGLE,
+              size: 1,
+              color: 'CCCCCC'
+            },
+            right: {
+              style: docx__namespace.BorderStyle.SINGLE,
+              size: 1,
+              color: 'CCCCCC'
+            }
+          }
+        });
+
+        // Arrange cells based on image position
+        const cells = imagePosition === 'right' ? [textCell, imageCell] : [imageCell, textCell];
+        const table = new docx__namespace.Table({
+          rows: [new docx__namespace.TableRow({
+            children: cells
+          })],
+          width: {
+            size: 100,
+            type: docx__namespace.WidthType.PERCENTAGE
+          },
+          ...style
+        });
+
+        // Add spacing paragraph after the table
+        return [table, ...(data.hasSpacing ? [new docx__namespace.Paragraph({
+          spacing: {
+            after: 200
+          }
+        })] : [])];
+      }
+    case 'borderedSection':
+      {
+        // Creates a bordered section (like the editable areas)
+        const table = new docx__namespace.Table({
+          rows: [new docx__namespace.TableRow({
+            children: [new docx__namespace.TableCell({
+              children: [new docx__namespace.Paragraph({
+                children: [new docx__namespace.TextRun({
+                  text: data.title || '',
+                  bold: true,
+                  size: 24
+                })],
+                spacing: {
+                  after: 200
+                }
+              }), new docx__namespace.Paragraph({
+                children: [new docx__namespace.TextRun({
+                  text: data.content || 'Editable - to be filled by the user',
+                  italic: true,
+                  size: 22,
+                  color: '666666'
+                })]
+              })],
+              borders: {
+                top: {
+                  style: docx__namespace.BorderStyle.SINGLE,
+                  size: 6,
+                  color: 'CCCCCC'
+                },
+                bottom: {
+                  style: docx__namespace.BorderStyle.SINGLE,
+                  size: 6,
+                  color: 'CCCCCC'
+                },
+                left: {
+                  style: docx__namespace.BorderStyle.SINGLE,
+                  size: 6,
+                  color: 'CCCCCC'
+                },
+                right: {
+                  style: docx__namespace.BorderStyle.SINGLE,
+                  size: 6,
+                  color: 'CCCCCC'
+                }
+              },
+              shading: {
+                fill: 'F9F9F9'
+              }
+            })]
+          })],
+          width: {
+            size: 100,
+            type: docx__namespace.WidthType.PERCENTAGE
+          },
+          ...style
+        });
+
+        // Add spacing paragraph after the table
+        return [table, new docx__namespace.Paragraph({
+          spacing: {
+            after: 400
+          }
+        })];
+      }
+    case 'documentHeader':
+      {
+        // Creates a document header with title, optional icon, and dynamic info fields
+        // data structure: { title, icon, infoFields: [{ label, value }] }
+        const {
+          title,
+          icon,
+          infoFields = [],
+          titleTextColor = '000000'
+        } = data;
+        const headerCells = [];
+
+        // Title cell (left side)
+        const titleCell = new docx__namespace.TableCell({
+          children: [new docx__namespace.Paragraph({
+            children: [new docx__namespace.TextRun({
+              text: title || 'Document Title',
+              bold: true,
+              size: 28,
+              color: titleTextColor
+            })],
+            alignment: docx__namespace.AlignmentType.LEFT
+          })],
+          verticalAlign: docx__namespace.VerticalAlign.CENTER,
+          margins: {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0
+          },
+          borders: {
+            top: {
+              style: docx__namespace.BorderStyle.NONE
+            },
+            bottom: {
+              style: docx__namespace.BorderStyle.NONE
+            },
+            left: {
+              style: docx__namespace.BorderStyle.NONE
+            },
+            right: {
+              style: docx__namespace.BorderStyle.NONE
+            }
+          }
+        });
+        headerCells.push(titleCell);
+
+        // Icon cell (right side) - optional
+        if (icon) {
+          const iconCell = new docx__namespace.TableCell({
+            children: [new docx__namespace.Paragraph({
+              children: [new docx__namespace.ImageRun({
+                data: icon,
+                transformation: {
+                  width: data.iconWidth || 80,
+                  height: data.iconHeight || 80
+                }
+              })],
+              alignment: docx__namespace.AlignmentType.RIGHT
+            })],
+            verticalAlign: docx__namespace.VerticalAlign.CENTER,
+            width: {
+              size: 15,
+              type: docx__namespace.WidthType.PERCENTAGE
+            },
+            margins: {
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0
+            },
+            borders: {
+              top: {
+                style: docx__namespace.BorderStyle.NONE
+              },
+              bottom: {
+                style: docx__namespace.BorderStyle.NONE
+              },
+              left: {
+                style: docx__namespace.BorderStyle.NONE
+              },
+              right: {
+                style: docx__namespace.BorderStyle.NONE
+              }
+            }
+          });
+          headerCells.push(iconCell);
+        }
+
+        // Create title row
+        const titleRow = new docx__namespace.TableRow({
+          children: headerCells
+        });
+
+        // Create info fields row if provided
+        const rows = [titleRow];
+        if (infoFields && infoFields.length > 0) {
+          // Build the info text with dynamic fields
+          const infoTextRuns = [];
+          infoFields.forEach((field, index) => {
+            // Add label (bold)
+            infoTextRuns.push(new docx__namespace.TextRun({
+              text: field.label,
+              bold: true,
+              size: 20
+            }));
+            // Add value (normal)
+            infoTextRuns.push(new docx__namespace.TextRun({
+              text: ` ${field.value}`,
+              size: 20
+            }));
+            // Add separator if not last item
+            if (index < infoFields.length - 1) {
+              infoTextRuns.push(new docx__namespace.TextRun({
+                text: '  |  ',
+                size: 20
+              }));
+            }
+          });
+          const infoRow = new docx__namespace.TableRow({
+            children: [new docx__namespace.TableCell({
+              children: [new docx__namespace.Paragraph({
+                children: infoTextRuns,
+                spacing: {
+                  before: 50,
+                  after: 0
+                }
+              })],
+              columnSpan: headerCells.length,
+              margins: {
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0
+              },
+              borders: {
+                top: {
+                  style: docx__namespace.BorderStyle.NONE
+                },
+                bottom: {
+                  style: docx__namespace.BorderStyle.NONE
+                },
+                left: {
+                  style: docx__namespace.BorderStyle.NONE
+                },
+                right: {
+                  style: docx__namespace.BorderStyle.NONE
+                }
+              }
+            })]
+          });
+          rows.push(infoRow);
+        }
+        const table = new docx__namespace.Table({
+          rows: rows,
+          width: {
+            size: 100,
+            type: docx__namespace.WidthType.PERCENTAGE
+          },
+          borders: {
+            top: {
+              style: docx__namespace.BorderStyle.NONE
+            },
+            bottom: {
+              style: docx__namespace.BorderStyle.NONE
+            },
+            left: {
+              style: docx__namespace.BorderStyle.NONE
+            },
+            right: {
+              style: docx__namespace.BorderStyle.NONE
+            },
+            insideHorizontal: {
+              style: docx__namespace.BorderStyle.NONE
+            },
+            insideVertical: {
+              style: docx__namespace.BorderStyle.NONE
+            }
+          },
+          ...style
+        });
+
+        // Add spacing paragraph after the header
+        return [table, new docx__namespace.Paragraph({
+          spacing: {
+            after: 200
+          }
+        })];
+      }
+    case 'commentSection':
+      {
+        // Creates a bordered section with heading and auto-filled comments
+        const sectionChildren = [];
+
+        // Create title paragraph with percentage if provided
+        if (data.percentage !== undefined) {
+          sectionChildren.push(new docx__namespace.Paragraph({
+            children: [new docx__namespace.TextRun({
+              text: data.title,
+              bold: true,
+              size: 24
+            }), new docx__namespace.TextRun({
+              text: "\t\t\t\t\t\t\t\t\t\t\t\t\t\t"
+            }), new docx__namespace.TextRun({
+              text: `○ ${data.percentage}%`,
+              color: 'FFA500',
+              size: 20,
+              bold: false
+            })],
+            spacing: {
+              after: 100
+            }
+          }));
+        } else {
+          sectionChildren.push(new docx__namespace.Paragraph({
+            text: data.title,
+            bold: true,
+            size: 24,
+            spacing: {
+              after: 100
+            }
+          }));
+        }
+
+        // Add description with bottom border
+        sectionChildren.push(new docx__namespace.Paragraph({
+          children: [new docx__namespace.TextRun({
+            text: data.description,
+            size: 20
+          })],
+          spacing: {
+            after: 150
+          },
+          border: {
+            bottom: {
+              style: docx__namespace.BorderStyle.SINGLE,
+              size: 6,
+              color: 'CCCCCC'
+            }
+          }
+        }));
+
+        // Add bullet points
+        if (data.comments && Array.isArray(data.comments)) {
+          data.comments.forEach((comment, index) => {
+            sectionChildren.push(new docx__namespace.Paragraph({
+              text: comment,
+              bullet: {
+                level: 0
+              },
+              spacing: {
+                before: index === 0 ? 100 : 0,
+                after: index === data.comments.length - 1 ? 100 : 50
+              }
+            }));
+          });
+        }
+
+        // Wrap everything in a bordered table
+        const table = new docx__namespace.Table({
+          rows: [new docx__namespace.TableRow({
+            children: [new docx__namespace.TableCell({
+              children: sectionChildren,
+              borders: {
+                top: {
+                  style: docx__namespace.BorderStyle.SINGLE,
+                  size: 6,
+                  color: '000000'
+                },
+                bottom: {
+                  style: docx__namespace.BorderStyle.SINGLE,
+                  size: 6,
+                  color: '000000'
+                },
+                left: {
+                  style: docx__namespace.BorderStyle.SINGLE,
+                  size: 6,
+                  color: '000000'
+                },
+                right: {
+                  style: docx__namespace.BorderStyle.SINGLE,
+                  size: 6,
+                  color: '000000'
+                }
+              },
+              margins: {
+                top: 100,
+                bottom: 100,
+                left: 100,
+                right: 100
+              }
+            })]
+          })],
+          width: {
+            size: 100,
+            type: docx__namespace.WidthType.PERCENTAGE
+          },
+          ...style
+        });
+
+        // Add minimal spacing after comment sections (they look good close together)
+        return table;
+      }
+    case 'bulletList':
+      return new docx__namespace.Paragraph({
+        text: data,
+        bullet: {
+          level: style.level || 0
+        },
+        ...style
+      });
+    case 'numberedList':
+      return new docx__namespace.Paragraph({
+        text: data,
+        numbering: {
+          reference: style.reference || "default-numbering",
+          level: style.level || 0
+        },
+        ...style
+      });
+    case 'pageBreak':
+      return new docx__namespace.Paragraph({
+        children: [new docx__namespace.PageBreak()]
+      });
+    case 'textRun':
+      return new docx__namespace.Paragraph({
+        children: [new docx__namespace.TextRun({
+          text: data,
+          ...meta
+        })],
+        ...style
+      });
+    default:
+      // Default to paragraph if type is unknown
+      return new docx__namespace.Paragraph({
+        children: [new docx__namespace.TextRun({
+          text: data,
+          ...meta
+        })],
+        ...style
+      });
+  }
+};
+
+/**
+ * Creates a Word document with the provided content
+ * @param {Object} options - Configuration options for the document
+ * @param {string} options.title - The main title of the document
+ * @param {string} options.content - Additional content to include
+ * @param {Array} options.config - Array of configuration items with type, data, meta, style, and optional title
+ * @returns {docx.Document} The created Word document
+ */
+const createDocument = ({
+  title = "React Word Document Example",
+  content = "This is a sample Word document created with docx library.",
+  config = []
+}) => {
+  // Process config items - add section titles if provided
+  const children = config.flatMap(item => {
+    const elements = [];
+
+    // If item has a title property, add it as a section heading
+    if (item.title) {
+      elements.push(new docx__namespace.Paragraph({
+        children: [new docx__namespace.TextRun({
+          text: item.title,
+          bold: true,
+          size: 26,
+          color: '000000'
+        })],
+        spacing: {
+          before: item.titleSpacing?.before || 300,
+          after: item.titleSpacing?.after || 150
+        },
+        ...item.titleStyle
+      }));
+    }
+
+    // Add the actual element content
+    const renderedElement = renderElement(item);
+    if (Array.isArray(renderedElement)) {
+      elements.push(...renderedElement);
+    } else {
+      elements.push(renderedElement);
+    }
+    return elements;
+  });
+  return new docx__namespace.Document({
+    sections: [{
+      children: children
+    }]
+  });
+};
+
 exports.ErrorFormat = ErrorFormat;
 exports.MessageTypes = MessageTypes;
 exports.btn = button;
 exports.camelCaseToTitle = camelCaseToTitle;
 exports.capitalize = capitalize;
 exports.capitalizeAll = capitalizeAll;
+exports.captureElementsAsImages = captureElementsAsImages;
 exports.changeInputMeta = changeInputMeta;
 exports.convertUndefinedToNull = convertUndefinedToNull;
+exports.createDocument = createDocument;
 exports.defaultFilterKeys = defaultFilterKeys;
 exports.defaultMapConfig = defaultMapConfig;
 exports.defaultTheme = mmtTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.464",
+	"version": "0.6.465",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -22,6 +22,7 @@
 		"docx-preview": "^0.3.7",
 		"dot-object": "^2.1.5",
 		"file-saver": "^2.0.5",
+		"html-to-image": "^1.11.13",
 		"leaflet": "^1.0.3",
 		"leaflet-editable": "^1.3.0",
 		"leaflet-geosearch": "^3.1.0",

package/rollup.config.js

@@ -40,6 +40,10 @@ const external = [
   "@xyflow/react",
   "zustand/shallow",
   "@elfalem/leaflet-curve",
+  "html-to-image",
+  "docx",
+  "docx-preview",
+  "file-saver",
 ];
 
 // Four builds, components, utils, hooks, context

package/src/@daf/core/components/Document/WordDocument/Preview/WordDocument.stories.js

@@ -1,4 +1,6 @@
 import WordDocumentPreview from "./index";
+import React, { useRef, useState, useEffect } from 'react';
+import { captureElementsAsImages } from '../../../../../../helpers/componentsToImages';
 
 export default {
 	title: "Core/Document/WordDocument",
@@ -439,3 +441,200 @@ export const SectionTitlesExample = {
 		]
 	}
 };
+
+// Custom render function to capture components as images
+const ComponentToImageStory = () => {
+	const chartRef = useRef(null);
+	const cardRef = useRef(null);
+	const [config, setConfig] = useState([
+		{
+			type: 'heading',
+			data: 'Component to Image Demo',
+			style: { heading: 'HEADING_1', spacing: { after: 200 } }
+		},
+		{
+			type: 'paragraph',
+			data: 'Loading component images...',
+			meta: { size: 22 }
+		}
+	]);
+
+	useEffect(() => {
+		const captureComponents = async () => {
+			// Wait for components to render
+			await new Promise(resolve => setTimeout(resolve, 500));
+
+			// Capture the components as images
+			const images = await captureElementsAsImages([chartRef.current, cardRef.current]);
+			
+			// Create new config with the captured images
+			const newConfig = [
+				{
+					type: 'heading',
+					data: 'Component to Image Demo',
+					style: { heading: 'HEADING_1', spacing: { after: 200 } }
+				},
+				{
+					type: 'paragraph',
+					data: 'Below are React components that were captured and converted to images using the captureElementsAsImages helper:',
+					meta: { size: 22 },
+					style: { spacing: { after: 300 } }
+				},
+				{
+					type: 'heading',
+					data: 'Chart Component',
+					style: { heading: 'HEADING_2', spacing: { after: 200 } }
+				},
+				{
+					type: 'image',
+					data: images[0], // Base64 image of the chart
+					style: {
+						width: 400,
+						height: 250,
+					}
+				},
+				{
+					type: 'paragraph',
+					data: 'The above chart was rendered as a React component and captured as an image.',
+					meta: { size: 20 },
+					style: { spacing: { before: 200, after: 300 } }
+				},
+				{
+					type: 'heading',
+					data: 'Card Component',
+					style: { heading: 'HEADING_2', spacing: { after: 200 } }
+				},
+				{
+					type: 'image',
+					data: images[1], // Base64 image of the card
+					style: {
+						width: 350,
+						height: 200,
+					}
+				},
+				{
+					type: 'paragraph',
+					data: 'The above card component was also captured and converted to an image for the document.',
+					meta: { size: 20 },
+					style: { spacing: { before: 200 } }
+				}
+			];
+
+			setConfig(newConfig);
+		};
+
+		captureComponents();
+	}, []);
+
+	return (
+		<div>
+			{/* Hidden components that will be captured as images */}
+			<div style={{ position: 'absolute', left: '-9999px', top: '-9999px' }}>
+				{/* Sample Chart Component */}
+				<div ref={chartRef} style={{
+					width: '600px',
+					height: '400px',
+					background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+					borderRadius: '10px',
+					padding: '30px',
+					boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
+					color: 'white',
+					fontFamily: 'Arial, sans-serif'
+				}}>
+					<h2 style={{ margin: '0 0 20px 0', fontSize: '28px' }}>Performance Chart</h2>
+					<div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'flex-end', height: '250px', marginTop: '40px' }}>
+						<div style={{ 
+							width: '80px', 
+							height: '60%', 
+							background: 'rgba(255,255,255,0.8)', 
+							borderRadius: '5px',
+							display: 'flex',
+							alignItems: 'flex-end',
+							justifyContent: 'center',
+							paddingBottom: '10px',
+							fontWeight: 'bold',
+							color: '#667eea'
+						}}>Q1</div>
+						<div style={{ 
+							width: '80px', 
+							height: '75%', 
+							background: 'rgba(255,255,255,0.8)', 
+							borderRadius: '5px',
+							display: 'flex',
+							alignItems: 'flex-end',
+							justifyContent: 'center',
+							paddingBottom: '10px',
+							fontWeight: 'bold',
+							color: '#667eea'
+						}}>Q2</div>
+						<div style={{ 
+							width: '80px', 
+							height: '85%', 
+							background: 'rgba(255,255,255,0.8)', 
+							borderRadius: '5px',
+							display: 'flex',
+							alignItems: 'flex-end',
+							justifyContent: 'center',
+							paddingBottom: '10px',
+							fontWeight: 'bold',
+							color: '#667eea'
+						}}>Q3</div>
+						<div style={{ 
+							width: '80px', 
+							height: '95%', 
+							background: 'rgba(255,255,255,0.8)', 
+							borderRadius: '5px',
+							display: 'flex',
+							alignItems: 'flex-end',
+							justifyContent: 'center',
+							paddingBottom: '10px',
+							fontWeight: 'bold',
+							color: '#667eea'
+						}}>Q4</div>
+					</div>
+				</div>
+
+				{/* Sample Card Component */}
+				<div ref={cardRef} style={{
+					width: '500px',
+					height: '300px',
+					background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+					borderRadius: '15px',
+					padding: '40px',
+					boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
+					color: 'white',
+					fontFamily: 'Arial, sans-serif',
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'space-between'
+				}}>
+					<div>
+						<h2 style={{ margin: '0 0 15px 0', fontSize: '32px' }}>Dashboard Card</h2>
+						<p style={{ margin: '0', fontSize: '18px', opacity: 0.9 }}>Total Users: 1,234</p>
+					</div>
+					<div style={{
+						background: 'rgba(255,255,255,0.2)',
+						borderRadius: '10px',
+						padding: '20px',
+						backdropFilter: 'blur(10px)'
+					}}>
+						<div style={{ fontSize: '48px', fontWeight: 'bold', marginBottom: '5px' }}>+15%</div>
+						<div style={{ fontSize: '16px', opacity: 0.9 }}>Growth this month</div>
+					</div>
+				</div>
+			</div>
+
+			{/* The Word Document Preview */}
+			<WordDocumentPreview
+				title="Components to Images"
+				fileName="components-to-images.docx"
+				config={config}
+			/>
+		</div>
+	);
+};
+
+export const ComponentsToImagesExample = {
+	name: "Components to Images",
+	render: () => <ComponentToImageStory />
+};

package/src/@daf/core/components/Document/WordDocument/createDocument.js

@@ -370,10 +370,13 @@ const renderElement = (item) => {
                     new docx.Paragraph({
                         children: [
                             new docx.TextRun({
-                                text: data.title + '        ',
+                                text: data.title,
                                 bold: true,
                                 size: 24
-                            }),
+                            }), 
+                            new docx.TextRun({
+                                text: "\t\t\t\t\t\t\t\t\t\t\t\t\t\t",
+                            }),                           
                             new docx.TextRun({
                                 text: `○ ${data.percentage}%`,
                                 color: 'FFA500',

package/src/helpers/componentsToImages.js

@@ -0,0 +1,29 @@
+import { toPng } from "html-to-image";
+
+/**
+ * Captures one or multiple DOM elements and returns their images as base64 strings.
+ *
+ * @param elements - A single element or an array of elements (or refs)
+ * @param options - Optional html-to-image options (e.g., { cacheBust: true })
+ * @returns Promise<string[]> - Array of base64 PNG strings (same order as input)
+ */
+export async function captureElementsAsImages(
+  elements,
+  options = { cacheBust: true }
+) {
+  const targets = Array.isArray(elements) ? elements : [elements];
+  const validElements = targets.filter(Boolean);
+
+  const captures = await Promise.all(
+    validElements.map(async (el) => {
+      try {
+        return await toPng(el, options);
+      } catch (err) {
+        console.error("Error capturing element as image:", err);
+        return "";
+      }
+    })
+  );
+
+  return captures;
+}

package/src/utils.js

@@ -34,3 +34,7 @@ export { default as ErrorFormat, formatErrors } from './helpers/ErrorFormater'
 export { renderNumber, renderPercentage } from "./@daf/utils/numbers.js"
 
 export { MessageTypes, displayMessage} from './helpers/messages.js'
+
+export { captureElementsAsImages } from './helpers/componentsToImages.js'
+
+export { createDocument } from './@daf/core/components/Document/WordDocument/createDocument.js'