@paro.io/expert-shared-components 1.6.1 → 1.6.3

package/lib/components/shared/ToastNotification.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-interface ToastModalProps {
-    color: 'success' | 'info' | 'warning' | 'danger';
-    icon: string;
-    message: string;
-    duration?: number;
-    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
-}
-declare const ToastModal: React.FC<ToastModalProps>;
-export default ToastModal;
+import React from 'react';
+interface ToastModalProps {
+    color: 'success' | 'info' | 'warning' | 'danger';
+    icon: string;
+    message: string;
+    duration?: number;
+    position?: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
+}
+declare const ToastModal: React.FC<ToastModalProps>;
+export default ToastModal;

package/lib/components/shared/ToastNotification.js

@@ -1,63 +1,63 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const core_1 = require("@material-ui/core");
-const base_ui_1 = require("@paro.io/base-ui");
-const ToastModal = ({ color, icon, message, duration = 6000, // Default duration is 6 seconds
-position = 'bottom-right', }) => {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    // Automatically open the modal on mount
-    (0, react_1.useEffect)(() => {
-        setOpen(true);
-        // Automatically close the modal after the specified duration
-        const timer = setTimeout(() => {
-            setOpen(false);
-        }, duration);
-        // Cleanup the timeout if the component unmounts or if the duration changes
-        return () => clearTimeout(timer);
-    }, [duration]);
-    console.log("triggered");
-    return (react_1.default.createElement(core_1.Dialog, { open: open, onClose: () => setOpen(false), "aria-labelledby": "toast-modal-title", maxWidth: "xs", fullWidth: true, PaperProps: {
-            style: {
-                backgroundColor: '#323232', // Dark background to resemble toast style
-                color: '#fff', // White text
-                borderRadius: '8px',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                zIndex: 9999, // Ensure it’s on top of the MUI Dialog
-                position: 'absolute', // Absolute positioning to control location
-                top: position.includes('top') ? '10%' : 'auto',
-                bottom: position.includes('bottom') ? '10%' : 'auto',
-                right: position.includes('right') ? '10%' : 'auto',
-                left: position.includes('left') ? '10%' : 'auto',
-            },
-        } },
-        react_1.default.createElement(core_1.DialogContent, { style: { textAlign: 'center' } },
-            react_1.default.createElement(base_ui_1.Alert, { color: color, icon: icon, label: message, className: color === 'warning' ? 'bg-warning' : 'bg-success' }),
-            ",")));
-};
-exports.default = ToastModal;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const base_ui_1 = require("@paro.io/base-ui");
+const ToastModal = ({ color, icon, message, duration = 6000, // Default duration is 6 seconds
+position = 'bottom-right', }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // Automatically open the modal on mount
+    (0, react_1.useEffect)(() => {
+        setOpen(true);
+        // Automatically close the modal after the specified duration
+        const timer = setTimeout(() => {
+            setOpen(false);
+        }, duration);
+        // Cleanup the timeout if the component unmounts or if the duration changes
+        return () => clearTimeout(timer);
+    }, [duration]);
+    console.log("triggered");
+    return (react_1.default.createElement(core_1.Dialog, { open: open, onClose: () => setOpen(false), "aria-labelledby": "toast-modal-title", maxWidth: "xs", fullWidth: true, PaperProps: {
+            style: {
+                backgroundColor: '#323232', // Dark background to resemble toast style
+                color: '#fff', // White text
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                zIndex: 9999, // Ensure it’s on top of the MUI Dialog
+                position: 'absolute', // Absolute positioning to control location
+                top: position.includes('top') ? '10%' : 'auto',
+                bottom: position.includes('bottom') ? '10%' : 'auto',
+                right: position.includes('right') ? '10%' : 'auto',
+                left: position.includes('left') ? '10%' : 'auto',
+            },
+        } },
+        react_1.default.createElement(core_1.DialogContent, { style: { textAlign: 'center' } },
+            react_1.default.createElement(base_ui_1.Alert, { color: color, icon: icon, label: message, className: color === 'warning' ? 'bg-warning' : 'bg-success' }),
+            ",")));
+};
+exports.default = ToastModal;

package/lib/components/shared/UploadClient.d.ts

@@ -0,0 +1,14 @@
+export default class UploadClient {
+    state: {
+        fileSelected: any;
+        uploadId: string;
+        fileName: string;
+        documentUploadUrl: string;
+        projectId: number;
+    };
+    constructor(props: any);
+    generateS3Key(projectId: number, fileName: string): string;
+    triggerMultipartUpload(): Promise<string | undefined>;
+    uploadMultiPartFile(): Promise<string | undefined>;
+    completeUpload(partsArray: any): Promise<string | undefined>;
+}

package/lib/components/shared/UploadClient.js

@@ -0,0 +1,115 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+class UploadClient {
+    constructor(props) {
+        this.state = {
+            fileSelected: props.fileSelected,
+            uploadId: '',
+            fileName: props.fileName,
+            documentUploadUrl: props.documentUploadUrl,
+            projectId: props.projectId,
+        };
+    }
+    generateS3Key(projectId, fileName) {
+        const sanitizedFileName = fileName.replace(/[^a-zA-Z0-9.-]/g, '_');
+        let uniqueKey = `project-${projectId}/${sanitizedFileName}`;
+        return uniqueKey;
+    }
+    ;
+    triggerMultipartUpload() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const fileName = this.generateS3Key(this.state.projectId, this.state.fileName);
+                console.log('File Name', fileName);
+                this.state = Object.assign(Object.assign({}, this.state), { fileName: fileName });
+                const params = {
+                    fileName: this.state.fileName,
+                    fileType: this.state.fileSelected.type,
+                    method: 'start-upload',
+                };
+                const response = yield fetch(`${this.state.documentUploadUrl}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(params),
+                });
+                let { responseData } = yield response.json();
+                this.state = Object.assign(Object.assign({}, this.state), { uploadId: responseData === null || responseData === void 0 ? void 0 : responseData.UploadId });
+                return this.uploadMultiPartFile();
+            }
+            catch (error) {
+                console.log(`Error Starting Multipart Upload ${error}`);
+            }
+        });
+    }
+    uploadMultiPartFile() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const CHUNK_SIZE = 5 * 1024 * 1024;
+                const fileSize = this.state.fileSelected.size;
+                const CHUNKS_COUNT = Math.floor(fileSize / CHUNK_SIZE) + 1;
+                let promisesArray = [];
+                let start, end, blob;
+                for (let index = 1; index < CHUNKS_COUNT + 1; index++) {
+                    start = (index - 1) * CHUNK_SIZE;
+                    end = (index) * CHUNK_SIZE;
+                    blob = (index < CHUNKS_COUNT) ? this.state.fileSelected.slice(start, end) : this.state.fileSelected.slice(start);
+                    // Get presigned URL for each part from backend lambda
+                    let presignedUrlResponse = yield fetch(`${this.state.documentUploadUrl}`, {
+                        method: 'POST',
+                        body: JSON.stringify({ fileName: this.state.fileName, uploadId: this.state.uploadId, partNumber: index, method: 'get-presigned-url' }),
+                    });
+                    const { responseData } = yield presignedUrlResponse.json();
+                    // Add each upload part to promise array using presigned URL
+                    let uploadResponse = fetch(responseData, {
+                        method: 'PUT',
+                        body: blob,
+                    });
+                    promisesArray.push(uploadResponse);
+                }
+                let resolvedPromises = yield Promise.all(promisesArray);
+                let uploadPartsArray = [];
+                resolvedPromises.map((response, index) => {
+                    uploadPartsArray.push({
+                        ETag: response.headers.get('ETag'),
+                        PartNumber: index + 1,
+                    });
+                });
+                return yield this.completeUpload(uploadPartsArray);
+            }
+            catch (error) {
+                console.log(`Error Uploading Multipart File ${error}`);
+            }
+        });
+    }
+    completeUpload(partsArray) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                let response = yield fetch(`${this.state.documentUploadUrl}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ fileName: this.state.fileName, uploadId: this.state.uploadId, parts: partsArray, method: 'complete-upload' }),
+                });
+                const { responseData } = yield response.json();
+                console.log('Upload Complete', responseData);
+                return `Upload Complete ${JSON.stringify(responseData)}`;
+            }
+            catch (error) {
+                console.log(`Error Completing Multipart Upload ${error}`);
+            }
+        });
+    }
+}
+exports.default = UploadClient;

package/lib/components/shared/utils.d.ts

@@ -6,7 +6,7 @@ export declare const getPreviousMonthStartDate: (previous: boolean) => string;
 export declare const stateAbbreviationMap: {
     [key: string]: string;
 };
-export declare const getFileMimeType: (filename: string) => "application/pdf" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/vnd.ms-powerpoint" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/octet-stream";
+export declare const getFileMimeType: (filename: string) => "application/pdf" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/vnd.ms-powerpoint" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "text/csv" | "application/octet-stream";
 export declare const handleDownloadPdf: ({ fileData, downloadFilename, }: {
     fileData: any;
     downloadFilename: string;

package/lib/components/shared/utils.js

@@ -126,6 +126,8 @@ const getFileMimeType = (filename) => {
             return 'application/vnd.ms-excel';
         case 'xlsx':
             return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+        case 'csv':
+            return 'text/csv';
         default:
             return 'application/octet-stream';
     }
@@ -231,7 +233,8 @@ exports.ACCEPTED_FILE_TYPES = [
     'application/vnd.ms-powerpoint',
     'application/vnd.openxmlformats-officedocument.presentationml.presentation',
     'application/vnd.ms-excel',
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'text/csv'
 ];
 exports.MAX_FILE_SIZE = 5242880; // 5MB
 const showToast = (type, message) => {
@@ -249,7 +252,7 @@ const validateFileUpload = (file, isClientTab) => {
         return false;
     }
     if (!exports.ACCEPTED_FILE_TYPES.includes(file.type)) {
-        (0, exports.showToast)('warning', 'Invalid file type. Please upload a valid file (PDF, DOC, DOCX, PPT, XLS, XLSX).');
+        (0, exports.showToast)('warning', 'Invalid file type. Please upload a valid file (PDF, DOC, DOCX, PPT, XLS, XLSX, CSV).');
         return false;
     }
     if (file.size > exports.MAX_FILE_SIZE && !isClientTab) {

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "@paro.io/expert-shared-components",
-  "version": "1.6.1",
-  "description": "",
-  "main": "lib/index.js",
-  "scripts": {
-    "build": "tsc",
-    "prepare": "yarn build",
-    "test": "yarn test:build",
-    "test:build": "yarn build",
-    "clean": "yarn -rf lib",
-    "predeploy": "tsc && cp package.json README.md ./lib",
-    "link-local": "yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
-    "unlink-local": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink"
-  },
-  "repository": "https://github.com/paroadmin/expert-shared-components.git",
-  "keywords": ["react", "components", "shared"],
-  "author": "apande@paro.io",
-  "license": "MIT",
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@hookform/resolvers": "3.3.4",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
-    "@paro.io/base-icons": "^1.0.4",
-    "@paro.io/base-ui": "^1.8.3",
-    "@types/react-input-mask": "^3.0.5",
-    "dayjs": "^1.10.7",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-copy-to-clipboard": "^5.0.4",
-    "react-datepicker": "^4.6.0",
-    "react-dom": "^17.0.2",
-    "react-hook-form": "7.51.1",
-    "react-hot-toast": "^2.4.1",
-    "react-input-mask": "^3.0.0-alpha.2",
-    "styled-components": "^5.3.3",
-    "yup": "^0.32.11"
-  },
-  "devDependencies": {
-    "@types/lodash": "^4.14.170",
-    "@types/react": "^18.2.73",
-    "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-datepicker": "^4.19.6",
-    "@types/react-dom": "^18.2.22",
-    "@types/styled-components": "^5.1.22",
-    "@types/yup": "^0.29.13",
-    "typescript": "^5.3.3"
-  },
-  "files": [
-    "lib/**/*"
-  ],
-  "directories": {
-    "lib": "lib"
-  }
-}
+{
+  "name": "@paro.io/expert-shared-components",
+  "version": "1.6.3",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "yarn build",
+    "test": "yarn test:build",
+    "test:build": "yarn build",
+    "clean": "yarn -rf lib",
+    "predeploy": "tsc && cp package.json README.md ./lib",
+    "link-local": "yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
+    "unlink-local": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink"
+  },
+  "repository": "https://github.com/paroadmin/expert-shared-components.git",
+  "keywords": ["react", "components", "shared"],
+  "author": "apande@paro.io",
+  "license": "MIT",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hookform/resolvers": "3.3.4",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@paro.io/base-icons": "^1.0.4",
+    "@paro.io/base-ui": "^1.8.3",
+    "@types/react-input-mask": "^3.0.5",
+    "dayjs": "^1.10.7",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.0.4",
+    "react-datepicker": "^4.6.0",
+    "react-dom": "^17.0.2",
+    "react-hook-form": "7.51.1",
+    "react-hot-toast": "^2.4.1",
+    "react-input-mask": "^3.0.0-alpha.2",
+    "styled-components": "^5.3.3",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.170",
+    "@types/react": "^18.2.73",
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-datepicker": "^4.19.6",
+    "@types/react-dom": "^18.2.22",
+    "@types/styled-components": "^5.1.22",
+    "@types/yup": "^0.29.13",
+    "typescript": "^5.3.3"
+  },
+  "files": [
+    "lib/**/*"
+  ],
+  "directories": {
+    "lib": "lib"
+  }
+}