datastake-daf 0.6.408 → 0.6.409

package/src/index.js

@@ -169,7 +169,3 @@ export { InformationChannelProvider } from "./@daf/core/components/Screens/Infor
 // UI
 export { default as SDGIcons } from "./@daf/core/components/UI/SDGIcon/index.jsx";
 export { default as CountryFlag } from "./@daf/core/components/UI/CountryFlag/index.jsx"
-
-// Pdf
-export { default as DafPdfView } from "./@daf/core/components/Pdf/PdfView/index.jsx";
-export { default as PdfViewerWrapper } from "./@daf/core/components/Pdf/PdfViewerWrapper.jsx";

package/src/@daf/core/components/Pdf/ElementAsImage.jsx

@@ -1,39 +0,0 @@
-import { useState, useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
-import html2canvas from 'html2canvas';
-import { Image } from '@react-pdf/renderer';
-
-export const ElementAsImage = ({ element, width = "100%", scale = 3 }) => {
-  const [dataUrl, setDataUrl] = useState(null);
-
-  useEffect(() => {
-    const container = document.createElement('div');
-    container.style.position = 'absolute';
-    container.style.top = '-9999px';
-    container.style.width = width;   
-    document.body.appendChild(container);
-
-    const root = createRoot(container);
-    root.render(element);
-
-    setTimeout(() => {
-      html2canvas(container, { scale, useCORS: true }).then(canvas => {
-        setDataUrl(canvas.toDataURL('image/png'));
-        root.unmount();
-        container.remove();
-      });
-    }, 100);
-
-  }, [element, width, scale]);
-
-  if (!dataUrl) return null;
-
-  return (
-    <Image
-      src={dataUrl}
-      style={{ width, objectFit: 'contain' }}  // use the same width as container
-    />
-  );
-};
-
-ElementAsImage.displayName = 'ElementAsImage';

package/src/@daf/core/components/Pdf/PdfView/PdfView.stories.js

@@ -1,76 +0,0 @@
-import PdfView from './index.jsx';
-import ThemeLayout from '../../ThemeLayout';
-import PdfViewerWrapper from '../PdfViewerWrapper.jsx';
-import { ElementAsImage } from '../ElementAsImage.jsx';
-import ImageWidget from '../../Dashboard/Widget/WidgetImage/index.jsx';
-import KeyIndicatorsWidget  from '../../Dashboard/Widget/KeyIndicators/index.jsx';
-import DashboardLayout from '../../Dashboard/DashboardLayout/index.jsx';
-import { View } from '@react-pdf/renderer';
-
-export default {
-  title: 'Core/Pdf/PdfView',
-  component: PdfView,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <ThemeLayout>
-        <Story />
-      </ThemeLayout>
-    ),
-  ],
-};
-
-const config = [
-    // {
-    //     render: () => (
-    //         <KeyIndicatorsWidget
-    //             title="Key Indicators"
-    //             config={[
-    //                 { label: "Item 1", render: () => <span>Value 1</span> },
-    //                 { label: "Item 2", render: () => <span>Value 2</span> },
-    //                 { label: "Item 3", render: () => <span>Value 3</span> },
-    //                 { label: "Item 4", render: () => <span>Value 4</span> },
-    //                 { label: "Item 5", render: () => <span>Value 5</span> },
-    //             ]}
-    //         />
-    //     )
-    // },
-    {
-        render: () => (
-            <ImageWidget 
-                title="Widget 1" 
-                image="https://picsum.photos/200/300" 
-                description="This is a description of the image widget."
-                isPdf={true} 
-            />
-        )
-    },
-]
-
-
-export const Primary = {
-  name: 'PdfView',
-  args: {
-    title: 'PdfView',
-    imgSrc: 'https://picsum.photos/200/300',
-    userId: '12345',
-    accountId: '12345',
-    documentId: '12345',
-    downloadId: '12345',
-    config: config,
-  },
-  render: (args) => (
-    <PdfViewerWrapper>
-        <PdfView {...args}>
-          <View>
-          <ImageWidget 
-                title="Widget 1" 
-                image="https://picsum.photos/200/300" 
-                description="This is a description of the image widget.This is a description of the image widget."
-                isPdf={true} 
-            />
-          </View>
-        </PdfView>
-    </PdfViewerWrapper>
-  ),
-};

package/src/@daf/core/components/Pdf/PdfView/index.jsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { Document, Page, Text, View, Image, StyleSheet } from '@react-pdf/renderer';
-import moment from 'moment';
-import { ElementAsImage } from '../ElementAsImage.jsx';
-import DashboardLayout from '../../Dashboard/DashboardLayout/index.jsx';
-
-const FOOTER_HEIGHT = 50;
-const HEADER_HEIGHT = 70;
-
-const styles = StyleSheet.create({
-  page: {
-    position: 'relative',
-    paddingTop: HEADER_HEIGHT,
-    paddingBottom: FOOTER_HEIGHT,
-    backgroundColor: "#F9FAFB",
-    // paddingHorizontal: 24,
-  },
-  header: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: HEADER_HEIGHT,
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 24,
-    backgroundColor: '#384250',
-  },
-  headerTitle: {
-    fontSize: 24,
-    fontWeight: 700,
-    color: 'white',
-  },
-  headerImage: {
-    height: 40,
-    width: 80,
-  },
-  footer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    height: FOOTER_HEIGHT,
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    borderTopWidth: 0.5,
-    borderTopColor: '#ccc',
-    paddingHorizontal: 24,
-    fontSize: 10,
-    color: '#7f92a9'
-  },
-  content: {
-    // marginTop: HEADER_HEIGHT + 10,
-    // marginBottom: FOOTER_HEIGHT + 10,
-    flexGrow: 1,
-    alignSelf: 'stretch',
-  },
-  widgetContainer: {
-    marginBottom: -8,
-  }
-});
-
-function PdfView({ title, imgSrc, userId, accountId, documentId, downloadId, config, children }) {
-    return (
-      <Document>
-        <Page size="A4" style={styles.page}>
-          {/* HEADER */}
-          <View style={styles.header} fixed>
-            <Text style={styles.headerTitle}>{title}</Text>
-            {imgSrc && <Image src={imgSrc} style={styles.headerImage} />}
-          </View>
-  
-          {/* CONTENT (auto-breaks across pages) */}
-          <View style={styles.content}>                
-            {/* {config.map((widget, i) => (
-              <View key={`widget-${i}`} style={styles.widgetContainer} wrap={false}>
-                <ElementAsImage 
-                  element={
-                    <DashboardLayout>
-                      <section>
-                        {widget.render()}
-                      </section>
-                    </DashboardLayout>
-                  } 
-                />
-              </View>
-            ))} */}
-            {children}
-          </View>
-  
-          {/* FOOTER */}
-          <View style={styles.footer} fixed>
-            <Text>{moment().format('DD MMM YYYY')}</Text>
-            <View style={{ flexDirection: 'column' }}>
-              <View style={{ flexDirection: 'row', gap: 6 }}>
-                <Text>User ID: <Text style={{ fontWeight: 'bold' }}>{userId}</Text></Text>
-                <Text>Account ID: <Text style={{ fontWeight: 'bold' }}>{accountId}</Text></Text>
-                <Text>Document ID: <Text style={{ fontWeight: 'bold' }}>{documentId}</Text></Text>
-                <Text>Download ID: <Text style={{ fontWeight: 'bold' }}>{downloadId}</Text></Text>
-              </View>
-            </View>
-            <Text
-              render={({ pageNumber, totalPages }) =>
-                `${pageNumber}`
-              }
-            />
-          </View>
-        </Page>
-      </Document>
-    );
-  }
-  
-  export default PdfView;
-
-PdfView.displayName = 'PdfView';

package/src/@daf/core/components/Pdf/PdfViewerWrapper.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { PDFViewer } from '@react-pdf/renderer';
-
-const PdfViewerWrapper = ({ children }) => (
-  <div style={{ width: '100%', height: '90vh' }}>
-     <PDFViewer width="100%" height="1200">{children}</PDFViewer>
-  </div>
-);
-
-PdfViewerWrapper.displayName = 'PdfViewerWrapper';
-
-export default PdfViewerWrapper;
-
-PdfViewerWrapper.displayName = 'PdfViewerWrapper';