cloudmr-ux 2.0.7 → 3.0.1

package/dist/CmrComponents/upload/Upload.js

@@ -0,0 +1,185 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import './Upload.css';
+import { Button } from '@mui/material';
+import UploadIcon from '@mui/icons-material/Upload';
+import UploadWindow from "./UploadWindow";
+import axios from "axios";
+var CmrUpload = function (_a) {
+    var _b = _a.changeNameAfterUpload, changeNameAfterUpload = _b === void 0 ? true : _b, props = __rest(_a, ["changeNameAfterUpload"]);
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    /**
+     * Life cycle representing the current status of the upload
+     * process.
+     */
+    var _d = useState(false), uploading = _d[0], setUploading = _d[1];
+    var _e = useState(0), progress = _e[0], setProgress = _e[1];
+    var _f = useState(undefined), uploadedFile = _f[0], setUploadedFile = _f[1];
+    var upload = function (file, fileAlias, fileDatabase) { return __awaiter(void 0, void 0, void 0, function () {
+        var onProgress, status, _a, processed, payload, res;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    setUploading(true);
+                    onProgress = function (progress) {
+                        var percentage = (progress * 99);
+                        props.uploadProgressed && props.uploadProgressed(+percentage.toFixed(2));
+                        setProgress(+percentage.toFixed(2));
+                    };
+                    if (props.uploadStarted)
+                        props.uploadStarted();
+                    status = 0;
+                    _a = props.beforeUpload != undefined;
+                    if (!_a) return [3 /*break*/, 2];
+                    return [4 /*yield*/, props.beforeUpload(file)];
+                case 1:
+                    _a = !(_b.sent());
+                    _b.label = 2;
+                case 2:
+                    // try {
+                    if (_a) {
+                        if (props.uploadEnded)
+                            props.uploadEnded();
+                        setUploading(false);
+                        return [2 /*return*/, 200];
+                    }
+                    if (!props.preprocess) return [3 /*break*/, 4];
+                    return [4 /*yield*/, props.preprocess(file)];
+                case 3:
+                    processed = _b.sent();
+                    if (processed == undefined)
+                        return [2 /*return*/, failUpload()];
+                    if (typeof processed == 'number') {
+                        setUploading(false);
+                        return [2 /*return*/, processed];
+                    }
+                    file = processed;
+                    _b.label = 4;
+                case 4:
+                    if (!(props.uploadHandler != undefined)) return [3 /*break*/, 6];
+                    return [4 /*yield*/, props.uploadHandler(file, fileAlias, fileDatabase, onProgress, props.onUploaded)];
+                case 5:
+                    status = _b.sent();
+                    setUploadedFile(props.reusable ? undefined : file.name);
+                    return [3 /*break*/, 13];
+                case 6:
+                    if (!props.createPayload) return [3 /*break*/, 12];
+                    return [4 /*yield*/, props.createPayload(file, fileAlias, fileDatabase)];
+                case 7:
+                    payload = _b.sent();
+                    if (payload == undefined) {
+                        return [2 /*return*/, failUpload()];
+                    }
+                    payload.config.onUploadProgress = function (progressEvent) {
+                        if (progressEvent.total == undefined)
+                            return;
+                        onProgress(progressEvent.loaded / progressEvent.total);
+                    };
+                    return [4 /*yield*/, axios.post(payload.destination, payload.lambdaFile, payload.config)];
+                case 8:
+                    res = _b.sent();
+                    status = res.status;
+                    if (!(status === 200)) return [3 /*break*/, 11];
+                    // file.name = res.data.response.
+                    // await axios.post(res.data.upload_url, file)
+                    console.log(res.data);
+                    return [4 /*yield*/, axios.put(res.data.upload_url, payload.file, {
+                            headers: {
+                                'Content-Type': payload.file.type
+                            }
+                        })];
+                case 9:
+                    _b.sent();
+                    return [4 /*yield*/, props.onUploaded(res, payload.file)];
+                case 10:
+                    _b.sent();
+                    setUploadedFile(props.reusable ? undefined : payload.file.name);
+                    _b.label = 11;
+                case 11: return [3 /*break*/, 13];
+                case 12: return [2 /*return*/, failUpload()];
+                case 13:
+                    if (props.uploadEnded)
+                        props.uploadEnded();
+                    setUploading(false);
+                    setProgress(0);
+                    // }
+                    return [2 /*return*/, status];
+            }
+        });
+    }); };
+    function failUpload() {
+        setUploading(false);
+        setProgress(0);
+        if (props.uploadFailed)
+            return props.uploadFailed();
+        return 0;
+    }
+    return (_jsxs(React.Fragment, { children: [(!uploading) ?
+                _jsxs(Button, __assign({ fullWidth: props.fullWidth, style: props.style, variant: (uploadedFile == undefined) ? "contained" : "outlined", onClick: function () {
+                        setOpen(true);
+                    }, color: props.color || "primary", sx: props.sx }, { children: [_jsx(UploadIcon, { className: 'me-2' }), changeNameAfterUpload ?
+                            (uploadedFile === undefined ? (props.uploadButtonName ? props.uploadButtonName : "Upload") : uploadedFile)
+                            :
+                                (props.uploadButtonName ? props.uploadButtonName : "Upload"), "                "] }))
+                :
+                    _jsxs(Button, __assign({ fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: 'inherit' }, color: 'primary', disabled: true }, { children: ["Uploading ", progress, "%"] })), _jsx(UploadWindow, { open: open, setOpen: setOpen, upload: upload, fileExtension: props.fileExtension, template: { showFileName: true, showFileSize: true } })] }));
+};
+export default CmrUpload;

package/dist/CmrComponents/upload/UploadWindow.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import './Upload.css';
+interface UploadWindowProps {
+    upload: (file: File, fileAlias: string, fileDatabase: string) => Promise<number>;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    fileExtension?: string | string[];
+    template?: {
+        showFileName?: boolean;
+        showDatabase?: boolean;
+        showFileSize?: boolean;
+    };
+}
+export default function CmrUploadWindow({ upload, open, setOpen, fileExtension, template, }: UploadWindowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CmrComponents/upload/UploadWindow.js

@@ -0,0 +1,286 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
+import Box from "@mui/material/Box";
+import { Alert, Collapse, MenuItem } from "@mui/material";
+import './Upload.css';
+import CmrLabel from "../label/Label";
+export default function CmrUploadWindow(_a) {
+    var upload = _a.upload, open = _a.open, setOpen = _a.setOpen, fileExtension = _a.fileExtension, _b = _a.template, template = _b === void 0 ? { showFileName: true, showDatabase: true, showFileSize: true } : _b;
+    var _c = React.useState(''), fileOriginalName = _c[0], setFileOriginalName = _c[1];
+    var _d = React.useState('/'), fileAlias = _d[0], setFileAlias = _d[1];
+    var _e = React.useState('0 MB'), fileSize = _e[0], setFileSize = _e[1];
+    var _f = React.useState('Unknown Status'), warningText = _f[0], setWarningText = _f[1];
+    var _g = React.useState(false), infoOpen = _g[0], setInfoOpen = _g[1];
+    var _h = React.useState('s3'), locationSelection = _h[0], setLocationSelection = _h[1];
+    var _j = React.useState('info'), infoStyle = _j[0], setInfoStyle = _j[1];
+    var _k = React.useState([]), uploadedFiles = _k[0], setUploaded = _k[1];
+    var _l = React.useState(false), UpBtnDisabled = _l[0], setUpBtnDisabled = _l[1];
+    var _m = React.useState('Upload'), UpBtnText = _m[0], setUpBtnText = _m[1];
+    var _o = React.useState(undefined), uploadBoxWarning = _o[0], setUploadBoxWarning = _o[1];
+    var handleClickOpen = function () {
+        setOpen(true);
+    };
+    var handleClose = function () {
+        setOpen(false);
+    };
+    var checkExtension = function (filename, allowed) {
+        if (!filename)
+            return false;
+        var name = filename.toLowerCase();
+        if (Array.isArray(allowed)) {
+            return allowed.some(function (ext) { return name.endsWith(ext.startsWith('.') ? ext : '.' + ext); });
+        }
+        else {
+            return name.endsWith(allowed.startsWith('.') ? allowed : '.' + allowed);
+        }
+    };
+    var getExtension = function (fileName) {
+        if (fileName == undefined)
+            return;
+        return fileName.split('.').pop();
+    };
+    var INVALID_ALIAS_REGEX = /[ ,:%><]/;
+    var handleConfirm = function () {
+        if (uploadedFiles.length === 0) {
+            setInfoOpen(true);
+            setInfoStyle('error');
+            setWarningText('Must select files to upload!');
+            setTimeout(function () { return setInfoOpen(false); }, 2500);
+            return;
+        }
+        if (fileAlias.length === 0) {
+            setInfoOpen(true);
+            setInfoStyle('error');
+            setWarningText("File name can't be empty");
+            setTimeout(function () { return setInfoOpen(false); }, 2500);
+            return;
+        }
+        // Validate File Alias characters
+        if (INVALID_ALIAS_REGEX.test(fileAlias)) {
+            setInfoOpen(true);
+            setInfoStyle('error');
+            setWarningText("Alias contains invalid characters ( , : % > < or spaces )");
+            setTimeout(function () { return setInfoOpen(false); }, 10000);
+            return;
+        }
+        setOpen(false);
+        upload(uploadedFiles[0], fileAlias, locationSelection).then(function (response) {
+            console.log(response);
+            //Update image with another ajax
+            if (response > 0) {
+                setInfoOpen(true);
+                if (response === 200) {
+                    setInfoStyle('success');
+                    setWarningText("Upload successful");
+                    setTimeout(function () {
+                        setInfoOpen(false);
+                        setOpen(false);
+                    }, 1000);
+                    setUpBtnDisabled(false);
+                    setUpBtnText('Upload');
+                }
+                else if (response === 413) {
+                    setInfoStyle('error');
+                    setWarningText("File size limit exceeded");
+                    setTimeout(function () {
+                        setInfoOpen(false);
+                        setUpBtnDisabled(false);
+                        setUpBtnText('Upload');
+                    }, 2000);
+                }
+                else if (response === 500) {
+                    setInfoStyle('error');
+                    setWarningText("Internal server error");
+                    setTimeout(function () {
+                        setInfoOpen(false);
+                        setUpBtnDisabled(false);
+                        setUpBtnText('Upload');
+                    }, 1500);
+                    setOpen(true);
+                }
+                else if (response === 400) {
+                    setInfoStyle('warning');
+                    setWarningText("File upload cancelled");
+                    setTimeout(function () {
+                        setInfoOpen(false);
+                        setUpBtnDisabled(false);
+                        setUpBtnText('Upload');
+                    }, 1000);
+                    setOpen(true);
+                }
+                else {
+                    setInfoStyle('warning');
+                    setWarningText("Unknown status");
+                    setTimeout(function () {
+                        setInfoOpen(false);
+                        setUpBtnDisabled(false);
+                        setUpBtnText('Upload');
+                    }, 2000);
+                    setOpen(true);
+                }
+            }
+        })["catch"](function (error) {
+            setUpBtnDisabled(false);
+            setUpBtnText('Upload');
+            setInfoOpen(true);
+            setInfoStyle('error');
+            setWarningText("Upload unsuccessful: " + error.message);
+            setTimeout(function () { return setInfoOpen(false); }, 2500);
+            console.error('Error:', error);
+        });
+        setUpBtnDisabled(true);
+        setUpBtnText('Uploading');
+    };
+    var changeFileName = function (e) {
+        // @ts-ignore
+        setFileAlias(e.target.value);
+    };
+    function loadFiles(files) {
+        if (files.length == 0) {
+            setInfoOpen(true);
+            setInfoStyle('warning');
+            setWarningText('No file selected');
+            setTimeout(function () { return setInfoOpen(false); }, 2500);
+            return;
+        }
+        if (files.length > 1) {
+            setInfoOpen(true);
+            setInfoStyle('warning');
+            setWarningText('Only accepts one file at a time');
+            setTimeout(function () { return setInfoOpen(false); }, 2500);
+            return;
+        }
+        var file = files[0];
+        setUploaded([file]);
+        // let reader = new FileReader();
+        // reader.onload =
+        function readFile(file) {
+            setFileOriginalName(file.name);
+            setFileAlias(file.name);
+            var units = [
+                "B",
+                "KB",
+                "MB",
+                "GB",
+                "TB",
+                "PB",
+                "EB",
+                "ZB",
+                "YB",
+            ];
+            var numberOfBytes = file.size;
+            var exponent = Math.min(Math.floor(Math.log(numberOfBytes) / Math.log(1024)), units.length - 1);
+            var approx = numberOfBytes / Math.pow(1024, exponent);
+            var output = exponent === 0
+                ? "".concat(numberOfBytes, " bytes")
+                : "".concat(approx.toFixed(3), " ").concat(units[exponent]);
+            setFileSize(output);
+        }
+        readFile(file); // start reading the file data.
+    }
+    var initialized = false;
+    var fileInput = function (inputRef) {
+        if (initialized)
+            return;
+        inputRef.addEventListener('dragover', function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            // @ts-ignore
+            if (e.dataTransfer.files) {
+                // @ts-ignore
+                var draggedFiles = e.dataTransfer.files;
+                if (draggedFiles.length > 1) {
+                    setUploadBoxWarning('Only one file can be uploaded at a time');
+                }
+                else if (fileExtension != undefined && draggedFiles.length !== 0 &&
+                    !checkExtension(draggedFiles[0].name, fileExtension)) {
+                    setUploadBoxWarning("Only accepting files with extension(s): ".concat(Array.isArray(fileExtension) ? fileExtension.join(', ') : fileExtension));
+                }
+            }
+            // @ts-ignore
+            e.dataTransfer.dropEffect = 'copy';
+        });
+        // Get file data on drop
+        inputRef.addEventListener('drop', function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            // setUploadBoxWarning(undefined);
+            setTimeout(function () {
+                setUploadBoxWarning(undefined);
+            }, 10000);
+            // @ts-ignore
+            var files = e.dataTransfer.files; // Array of all files
+            if (files.length > 1) {
+                setInfoOpen(true);
+                setInfoStyle('warning');
+                setWarningText('Only one file can be uploaded at a time');
+                setTimeout(function () { return setInfoOpen(false); }, 2500);
+                return;
+            }
+            else if (fileExtension !== undefined &&
+                !checkExtension(files[0].name, fileExtension)) {
+                setInfoOpen(true);
+                setInfoStyle('warning');
+                setWarningText("Only accepting files with extension(s): ".concat(Array.isArray(fileExtension) ? fileExtension.join(', ') : fileExtension));
+                setTimeout(function () { return setInfoOpen(false); }, 2500);
+                return;
+            }
+            // @ts-ignore
+            loadFiles(files);
+        });
+        inputRef.addEventListener('dragleave', function () {
+            setUploadBoxWarning(undefined);
+        });
+        initialized = true;
+    };
+    var fileInputClick = function (e) {
+        var fileElem = document.getElementById("file-window");
+        e.preventDefault();
+        if (fileElem) {
+            fileElem.click();
+        }
+    };
+    var loadSelectedFiles = function (e) {
+        e.preventDefault();
+        var fileElem = document.getElementById('file-window');
+        // @ts-ignore
+        loadFiles(fileElem.files);
+    };
+    // @ts-ignore
+    return (_jsx("div", { children: _jsxs(Dialog, __assign({ open: open, onClose: handleClose }, { children: [_jsx(DialogTitle, { children: "File Upload" }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, {}), _jsxs(DialogContent, __assign({ dividers: true }, { children: [_jsx(Box, __assign({ width: 500, height: 250, style: {
+                                        borderStyle: 'dashed',
+                                        borderRadius: '5pt',
+                                        borderColor: (uploadBoxWarning == undefined) ? 'lightGray' : '#BA3C3C'
+                                    } }, { children: _jsx(Typography, __assign({ component: "div", style: { height: '100%' } }, { children: _jsxs(Box, __assign({ style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                height: '100%'
+                                            }, onClick: fileInputClick, ref: fileInput }, { children: [_jsxs(Typography, __assign({ variant: "body1", align: "center", style: { marginTop: 'auto' } }, { children: ["Drag & Drop or Click to Upload Your File Here ", _jsx("sup", { children: "*" })] })), _jsx(Typography, __assign({ variant: "body2", align: "center", style: { marginTop: 'auto', fontSize: '0.8rem', fontStyle: 'italic' } }, { children: "* Warning: The file you are uploading may contain sensitive information protected under privacy laws. Please ensure all PHI is anonymized before proceeding.Before proceeding. The user is the sole responsible for data anonymization." }))] })) })) })), _jsx("input", { type: "file", id: "file-window", multiple: true, accept: fileExtension === undefined
+                                        ? '*'
+                                        : Array.isArray(fileExtension)
+                                            ? fileExtension.join(',')
+                                            : fileExtension, style: { display: 'none' }, onChange: loadSelectedFiles }), _jsxs(Box, __assign({ component: "form", sx: { '& .MuiTextField-root': { m: 2, width: '25ch', mb: 0 } } }, { children: [_jsxs("div", { children: [template.showFileName && (_jsx(TextField, { required: true, style: { marginTop: '30px' }, label: "File Alias:", value: fileAlias, variant: "standard", onChange: changeFileName })), fileOriginalName != '' && _jsx(CmrLabel, __assign({ style: { marginLeft: '16px', fontSize: '9pt', color: '#267833' } }, { children: fileOriginalName })), template.showDatabase && (_jsx(TextField, __assign({ select: true, label: "Database:", defaultValue: "s3", helperText: "Upstream Storage Location", variant: "standard" }, { children: [{ value: 's3', label: 'S3' }].map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value }, { children: option.label }), option.value)); }) })))] }), _jsxs("div", { children: [template.showFileSize && (_jsx(TextField, { label: "File Size:", value: fileSize, InputProps: {
+                                                        readOnly: true
+                                                    }, variant: "standard" })), _jsx(Collapse, __assign({ "in": infoOpen }, { children: _jsx(Alert, __assign({ severity: infoStyle, sx: { m: 1 } }, { children: warningText })) }))] })] }))] })), _jsxs(DialogActions, { children: [_jsx(Button, __assign({ variant: "outlined", disabled: UpBtnDisabled, onClick: handleClose }, { children: "Cancel" })), _jsx(Button, __assign({ variant: 'contained', disabled: UpBtnDisabled, onClick: handleConfirm }, { children: UpBtnText }))] })] })] })) }));
+}

package/dist/CmrTable/CmrTable.css

@@ -0,0 +1,26 @@
+.css-1lymaxv-MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within,
+.css-1lymaxv-MuiDataGrid-root .MuiDataGrid-cell:focus-within {
+  outline: none !important;
+}
+/* .MuiTablePagination-selectLabel,.MuiTablePagination-displayedRows{
+  margin-bottom: 0;
+} */
+
+.MuiDataGrid-columnHeaders{
+  background: #F3E5F5;
+  color: #333;
+  font-weight: bold;
+}
+
+.MuiDataGrid-columnHeaders .MuiSvgIcon-root {
+  color: #580f8b !important;
+}
+
+/* // Religning MUI checkbox in the header */
+.MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainerContent {
+  padding: 0 !important;
+  margin: 0 !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/dist/CmrTable/CmrTable.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './CmrTable.css';
+import { DataGridProps } from '@mui/x-data-grid';
+import { CSSProperties } from 'react';
+export interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
+    dataSource: any[];
+    idAlias?: string;
+    name?: string;
+    style?: CSSProperties;
+    showCheckbox?: boolean;
+}
+declare const CmrTable: React.FC<CmrTableProps>;
+export default CmrTable;

package/dist/CmrTable/CmrTable.js

@@ -0,0 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import './CmrTable.css';
+import { DataGrid } from '@mui/x-data-grid';
+var CmrTable = function (props) {
+    var dataSource = props.dataSource, columns = props.columns, idAlias = props.idAlias, className = props.className, onRowSelectionModelChange = props.onRowSelectionModelChange, style = props.style, _a = props.showCheckbox, showCheckbox = _a === void 0 ? true : _a, rest = __rest(props, ["dataSource", "columns", "idAlias", "className", "onRowSelectionModelChange", "style", "showCheckbox"]);
+    return (_jsx("div", __assign({ style: style !== null && style !== void 0 ? style : { height: '400px', width: '100%' }, className: className !== null && className !== void 0 ? className : '' }, { children: _jsx(DataGrid, __assign({ rows: dataSource
+                ? dataSource.map(function (row) { return (__assign({ id: idAlias ? row[idAlias] : row['id'] }, row)); })
+                : [], columns: columns, checkboxSelection: showCheckbox, onRowSelectionModelChange: onRowSelectionModelChange, initialState: {
+                pagination: {
+                    paginationModel: { pageSize: 50, page: 0 }
+                }
+            }, sx: {
+                '& .MuiDataGrid-columnHeaders': {
+                    backgroundColor: '#F3E5F5',
+                    color: '#333'
+                },
+                '& .MuiDataGrid-columnHeaders .MuiSvgIcon-root': {
+                    color: '#580f8b'
+                },
+                '& .MuiDataGrid-columnHeaderTitle': {
+                    fontWeight: 'bold'
+                }
+            }, localeText: { noRowsLabel: 'No Rows' } }, rest)) })));
+};
+export default CmrTable;

package/dist/CmrTabs/CmrTabs.d.ts

@@ -0,0 +1,7 @@
+import { TabInfo } from "./tab.model";
+interface CmrTabsProps {
+    tabList: TabInfo[];
+    onTabSelected?: (tabId: number) => void;
+}
+export default function CmrTabs(props: CmrTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CmrTabs/CmrTabs.js

@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import { cloneElement } from "react";
+function CustomTabPanel(props) {
+    var children = props.children, value = props.value, index = props.index, other = __rest(props, ["children", "value", "index"]);
+    return (_jsx("div", __assign({ role: "tabpanel", hidden: value !== index, id: "simple-tabpanel-".concat(index), "aria-labelledby": "simple-tab-".concat(index) }, other, { children: _jsx(Box, __assign({ sx: { p: 0 }, style: { display: (value === index ? undefined : 'none') } }, { children: children })) })));
+}
+function a11yProps(index) {
+    return {
+        id: "simple-tab-".concat(index),
+        'aria-controls': "simple-tabpanel-".concat(index)
+    };
+}
+export default function CmrTabs(props) {
+    var _a = React.useState(0), value = _a[0], setValue = _a[1];
+    var handleChange = function (event, newValue) {
+        setValue(newValue);
+        if (props.onTabSelected)
+            props.onTabSelected(newValue);
+    };
+    // console.log(props.tabList);
+    return (_jsxs(Container, __assign({ maxWidth: "lg", sx: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            mt: 4
+        } }, { children: [_jsx(Box, __assign({ sx: { borderBottom: 1, borderColor: 'divider', mb: 4 } }, { children: _jsx(Tabs, __assign({ value: value, onChange: handleChange, "aria-label": "basic tabs example", textColor: 'inherit', TabIndicatorProps: {
+                        style: {
+                            backgroundColor: "#580F8B"
+                        }
+                    } }, { children: props.tabList.map(function (tab, index) {
+                        return _jsx(Tab, __assign({ sx: { color: (value == index) ? '#580F8B' : undefined }, style: { fontSize: '14px', textTransform: 'uppercase', fontWeight: 400 }, label: tab.text }, a11yProps(index)), index);
+                    }) })) })), props.tabList.map(function (tab, index) {
+                return _jsx(CustomTabPanel, __assign({ value: value, index: index }, { children: cloneElement(tab.children, {
+                        visible: value == index
+                    }) }), index);
+            })] })));
+}

package/dist/CmrTabs/tab.model.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface TabModel {
+    id: number;
+    text: string;
+    isSelected: boolean;
+}
+export interface TabInfo {
+    id: number;
+    text: string;
+    disable?: boolean;
+    children: JSX.Element;
+}

package/dist/CmrTabs/tab.model.js

@@ -0,0 +1 @@
+export {};