datastake-daf 0.6.463 → 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.463",
+	"version": "0.6.465",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -18,7 +18,11 @@
 		"datastake-daf": "^0.6.378",
 		"dayjs": "^1.11.12",
 		"deepmerge": "^4.3.1",
+		"docx": "^9.5.1",
+		"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",