datastake-daf 0.6.463 → 0.6.465

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

@@ -0,0 +1,640 @@
+import WordDocumentPreview from "./index";
+import React, { useRef, useState, useEffect } from 'react';
+import { captureElementsAsImages } from '../../../../../../helpers/componentsToImages';
+
+export default {
+	title: "Core/Document/WordDocument",
+	component: WordDocumentPreview,
+	tags: ["autodocs"],
+};
+
+
+export const HeadingExample = {
+	name: "Heading Types",
+	args: {
+		title: "Heading Examples",
+		fileName: "headings-example.docx",
+		config: [
+			{
+				type: 'heading',
+				data: 'Heading Level 1',
+				style: { heading: 'HEADING_1', spacing: { after: 200 } }
+			},
+			{
+				type: 'heading',
+				data: 'Heading Level 2',
+				style: { heading: 'HEADING_2', spacing: { after: 200 } }
+			},
+			{
+				type: 'heading',
+				data: 'Heading Level 3',
+				style: { heading: 'HEADING_3', spacing: { after: 200 } }
+			}
+		]
+	}
+};
+
+export const TableExample = {
+	name: "Table Example",
+	args: {
+		title: "Table Document",
+		fileName: "table-example.docx",
+		config: [
+			{
+				type: 'heading',
+				data: 'Employee Data',
+				style: { heading: 'HEADING_1', spacing: { after: 200 } }
+			},
+			{
+				type: 'table',
+				data: [
+					['Employee ID', 'Name', 'Department', 'Salary'],
+					['001', 'John Doe', 'Engineering', '$75,000'],
+					['002', 'Jane Smith', 'Marketing', '$65,000'],
+					['003', 'Bob Johnson', 'Sales', '$70,000']
+				]
+			}
+		]
+	}
+};
+
+export const ListsExample = {
+	name: "Lists Example",
+	args: {
+		title: "Lists Document",
+		fileName: "lists-example.docx",
+		config: [
+			{
+				type: 'heading',
+				data: 'Shopping List (Bullets)',
+				style: { heading: 'HEADING_2', spacing: { after: 200 } }
+			},
+			{
+				type: 'bulletList',
+				data: 'Milk',
+				style: { level: 0 }
+			},
+			{
+				type: 'bulletList',
+				data: 'Bread',
+				style: { level: 0 }
+			},
+			{
+				type: 'bulletList',
+				data: 'Eggs',
+				style: { level: 0 }
+			},
+			{
+				type: 'heading',
+				data: 'Instructions (Numbered)',
+				style: { heading: 'HEADING_2', spacing: { before: 300, after: 200 } }
+			},
+			{
+				type: 'numberedList',
+				data: 'Preheat oven to 350°F',
+				style: { reference: 'default-numbering', level: 0 }
+			},
+			{
+				type: 'numberedList',
+				data: 'Mix ingredients in a bowl',
+				style: { reference: 'default-numbering', level: 0 }
+			},
+			{
+				type: 'numberedList',
+				data: 'Bake for 25 minutes',
+				style: { reference: 'default-numbering', level: 0 }
+			}
+		]
+	}
+};
+
+export const ReportTemplate = {
+	name: "Report Template (Like Image)",
+	args: {
+		title: "Inspection Report",
+		fileName: "inspection-report.docx",
+		config: [
+			// Image with Text Section 1
+			{
+				type: 'imageWithText',
+				data: {
+					imageTitle: 'Facility Overview - Main Entrance',
+					// Sample industrial facility image from Unsplash
+					imageUrl: 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=600&h=400&fit=crop',
+					image: null, // Will be populated from imageUrl
+					imageWidth: 280,
+					imageHeight: 200,
+					text: 'Main entrance facility showing security gates and access control points. Observation date: 2025-10-13. Weather conditions: Clear. Temperature: 22°C.'
+				}
+			},
+			// Image with Text Section 2 - Image on RIGHT side
+			{
+				type: 'imageWithText',
+				data: {
+					imageTitle: 'Storage Area - Chemical Warehouse',
+					// Sample warehouse image from Unsplash
+					imageUrl: 'https://images.unsplash.com/photo-1553413077-190dd305871c?w=600&h=400&fit=crop',
+					image: null, // Will be populated from imageUrl
+					imageWidth: 280,
+					imageHeight: 200,
+					imagePosition: 'right', // Image on the right, text on the left
+					text: 'Chemical storage warehouse with proper ventilation and safety signage. All containers are properly labeled. Emergency equipment is accessible and well-maintained.',
+					hasSpacing: true
+				}
+			},
+			// Main Takeaways Section with Border
+			{
+				type: 'borderedSection',
+				data: {
+					title: 'Provide your main takeaways here',
+					content: 'Editable - to be filled by the user\n\nThis is a bordered section where the user can add their main observations and conclusions from the inspection.'
+				},
+				style: {
+					margins: {
+						top: 300,
+						bottom: 300
+					}
+				}
+			},
+			// Mercury Management Section with percentage
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Mercury management',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Mercury storage areas are properly labeled and secured with restricted access',
+						'Safety protocols are documented and clearly displayed in work areas',
+						'Regular monitoring of mercury levels is conducted with weekly reports',
+						'Emergency response kits are available and inspected monthly',
+						'Staff training records are up to date for all personnel handling mercury'
+					]
+				}
+			},
+			// Cyanide Management Section with percentage
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Cyanide management',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Cyanide storage facilities meet international safety standards',
+						'Emergency response procedures are documented and regularly tested',
+						'Staff training on cyanide safety is up to date and comprehensive',
+						'Proper ventilation systems are installed and functioning correctly',
+						'Neutralization agents are stored nearby and easily accessible'
+					]
+				}
+			},
+			// Page Break
+			// {
+			// 	type: 'pageBreak'
+			// },
+			// Climate Change Section on new page
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Climate change',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Carbon emission reduction strategies are actively implemented',
+						'Energy efficiency measures have reduced consumption by 15% year-over-year',
+						'Renewable energy sources provide 30% of total energy requirements',
+						'Water conservation programs are in place with recycling systems',
+						'Environmental impact assessments are conducted quarterly'
+					]
+				}
+			}
+		]
+	}
+};
+
+export const ImageWithTextExample = {
+	name: "Image With Text Layout",
+	args: {
+		title: "Image and Text Layout Example",
+		fileName: "image-text-layout.docx",
+		config: [
+			{
+				type: 'imageWithText',
+				data: {
+					imageTitle: 'Image on Left Side',
+					// Sample office/building image from Unsplash
+					imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&h=400&fit=crop',
+					image: null,
+					imageWidth: 300,
+					imageHeight: 200,
+					imagePosition: 'left', // Default: image on left
+					text: 'This is a two-column layout with the image on the LEFT side and text on the right. Both columns have borders.'
+				}
+			},
+			{
+				type: 'imageWithText',
+				data: {
+					imageTitle: 'Image on Right Side',
+					// Sample technology image from Unsplash
+					imageUrl: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=600&h=400&fit=crop',
+					image: null,
+					imageWidth: 300,
+					imageHeight: 200,
+					imagePosition: 'right', // Image on right
+					text: 'This shows the same two-column layout but with the image on the RIGHT side and text on the left. You can alternate the positions for visual variety.'
+				}
+			}
+		]
+	}
+};
+
+export const BorderedSectionExample = {
+	name: "Bordered Section Example",
+	args: {
+		title: "Bordered Section Example",
+		fileName: "bordered-section.docx",
+		config: [
+			{
+				type: 'borderedSection',
+				data: {
+					title: 'Important Notice',
+					content: 'This is a bordered section with a gray background. It can be used for editable areas, important notices, or user input fields.'
+				}
+			}
+		]
+	}
+};
+
+export const CommentSectionExample = {
+	name: "Comment Section Example",
+	args: {
+		title: "Comment Section Example",
+		fileName: "comment-section.docx",
+		config: [
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Legitimacy of ASM',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: []
+				}
+			},
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Ensure traceability',
+					percentage: 51,
+					comments: [
+						'Comment 1',
+						'Comment 2',
+						'Comment 3',
+						'...'
+					]
+				}
+			},
+			{
+				type: 'commentSection',
+				data: {
+					title: 'ASM Companies',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Comment 1',
+						'Comment 2',
+						'Comment 3',
+						'...'
+					]
+				}
+			},
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Armed conflict',
+					percentage: 51,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: []
+				}
+			}
+		]
+	}
+};
+
+export const DocumentHeaderExample = {
+	name: "Document Header (Dynamic)",
+	args: {
+		title: "Document with Custom Header",
+		fileName: "document-header-example.docx",
+		config: [
+			// Document Header with icon and dynamic info fields
+			{
+				type: 'documentHeader',
+				data: {
+					title: 'Executive Monitoring Report',
+					icon: '/logo192.png', // Path to image (will be fetched automatically)
+					iconWidth: 60,
+					iconHeight: 60,
+					titleTextColor: '000000', // Black text (default)
+					infoFields: [
+						{ label: 'Mine:', value: '<Mine Name>' },
+						{ label: 'Date:', value: 'DD Mmm YY' },
+						{ label: 'Step:', value: '<Step>' },
+						{ label: 'Code:', value: '<Code>' }
+					]
+				}
+			},
+			// Add some content below the header
+			{
+				type: 'paragraph',
+				data: 'This document demonstrates the new documentHeader type with dynamic fields.',
+				meta: { size: 24 },
+				style: { spacing: { after: 200 } }
+			},
+			{
+				type: 'heading',
+				data: 'Report Content',
+				style: {
+					heading: 'HEADING_2',
+					spacing: { before: 200, after: 200 }
+				}
+			},
+			{
+				type: 'paragraph',
+				data: 'The document header above is fully dynamic. You can customize the title, add a logo on the right, and pass any number of info fields with their own labels and values.',
+				meta: { size: 22 },
+				style: { spacing: { after: 100 } }
+			}
+		]
+	}
+};
+
+export const SectionTitlesExample = {
+	name: "Section Titles Demo",
+	args: {
+		title: "Document with Section Titles",
+		fileName: "section-titles-example.docx",
+		config: [
+			// Document Header
+			{
+				type: 'documentHeader',
+				data: {
+					title: 'Executive Monitoring Report',
+					icon: '/logo192.png',
+					iconWidth: 60,
+					iconHeight: 60,
+					titleTextColor: '000000',
+					infoFields: [
+						{ label: 'Mine:', value: 'Gold Valley Mine' },
+						{ label: 'Date:', value: '13 Oct 2025' },
+						{ label: 'Step:', value: 'Phase 2' },
+						{ label: 'Code:', value: 'EMR-001' }
+					]
+				}
+			},
+			// Section 1 with title
+			{
+				title: '1. Environmental Compliance', // Section title
+				type: 'commentSection',
+				data: {
+					title: 'Mercury management',
+					percentage: 85,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Mercury storage areas are properly labeled and secured',
+						'Safety protocols are documented and clearly displayed',
+						'Regular monitoring of mercury levels is conducted',
+						'Emergency response kits are available'
+					]
+				}
+			},
+			{
+				type: 'commentSection',
+				data: {
+					title: 'Cyanide management',
+					percentage: 78,
+					description: 'Automatic filled by comments contained in associated sub-criteria - editable',
+					comments: [
+						'Cyanide storage facilities meet international standards',
+						'Emergency response procedures are regularly tested',
+						'Staff training on cyanide safety is comprehensive',
+						'Proper ventilation systems are functioning correctly'
+					]
+				}
+			},
+			// Section 3 with title
+			{
+				title: '3. Climate Action', // Section title
+				type: 'borderedSection',
+				data: {
+					title: 'Provide your main takeaways here',
+					content: 'Editable section for climate change action plans and observations.'
+				}
+			},
+			// Section 4 with title and custom paragraph
+			{
+				title: '4. Recommendations', // Section title
+				type: 'paragraph',
+				data: 'Based on the findings above, we recommend implementing additional safety measures and conducting quarterly reviews of all environmental protocols.',
+				meta: { size: 22 },
+				style: { spacing: { after: 200 } }
+			}
+		]
+	}
+};
+
+// 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 />
+};