cloudmr-ux 1.0.5 → 1.0.7

package/dist/index.mjs

@@ -149,9 +149,580 @@ var CmrSelect = ({ options, label, disabled }) => {
 };
 var CmrSelect_default = CmrSelect;
 
+// src/CmrComponents/collapse/Collapse.tsx
+import React3, { cloneElement } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CmrCollapse = (props) => {
+  let { activeKey, defaultActiveKey, onChange, children } = props;
+  defaultActiveKey = defaultActiveKey || [];
+  const [activeKeys, setActiveKeys] = React3.useState(defaultActiveKey);
+  React3.useEffect(() => {
+    if (activeKey !== void 0 && activeKey !== activeKeys) {
+      if (Array.isArray(activeKey)) {
+        setActiveKeys(activeKey);
+      } else {
+        setActiveKeys([activeKey]);
+      }
+    }
+  }, [activeKey]);
+  const onToggle = (key) => {
+    const newKeys = [...activeKeys];
+    const keyIndex = newKeys.indexOf(key);
+    if (keyIndex === -1) {
+      newKeys.push(key);
+    } else {
+      newKeys.splice(keyIndex, 1);
+    }
+    setActiveKeys(newKeys);
+    if (onChange)
+      onChange(newKeys);
+  };
+  const renderChildren = () => {
+    if (!children)
+      return null;
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        const panelKey = index;
+        const expanded = activeKeys.includes(panelKey);
+        const header = /* @__PURE__ */ jsx6("div", { onClick: () => onToggle(panelKey), style: { cursor: "pointer" }, children: child.props.header });
+        return cloneElement(child, {
+          expanded,
+          panelKey,
+          onToggle,
+          header
+          // Override header with clickable version
+        });
+      });
+    } else {
+      const panelKey = 0;
+      const expanded = activeKeys.includes(panelKey);
+      const header = /* @__PURE__ */ jsx6("div", { onClick: () => onToggle(panelKey), style: { cursor: "pointer" }, children: children.props.header });
+      return cloneElement(children, {
+        expanded,
+        panelKey,
+        onToggle,
+        header
+        // Override header with clickable version
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx6("div", { className: "cmr-collapse", children: /* @__PURE__ */ jsx6("div", { children: renderChildren() }) });
+};
+var Collapse_default = CmrCollapse;
+
+// src/CmrComponents/panel/Panel.tsx
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var CmrPanel = function(props) {
+  var _a, _b;
+  let { expanded, onToggle } = props;
+  const toggle = () => {
+    if (onToggle)
+      onToggle(props.panelKey);
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: `card ${props.className}`, children: [
+    /* @__PURE__ */ jsx7("div", { className: "card-header", style: { background: "white", display: props.header == void 0 ? "none" : void 0 }, children: /* @__PURE__ */ jsxs3("div", { className: "row align-items-center", children: [
+      /* @__PURE__ */ jsx7("div", { className: "col", children: props.header }),
+      onToggle && /* @__PURE__ */ jsx7("div", { className: "col text-end", children: /* @__PURE__ */ jsx7(
+        "span",
+        {
+          className: "react-collapse float-end btn",
+          onClick: (e) => {
+            toggle();
+          },
+          children: !expanded ? /* @__PURE__ */ jsx7(ArrowDropDownIcon, {}) : /* @__PURE__ */ jsx7(ArrowDropUpIcon, {})
+        }
+      ) })
+    ] }) }),
+    !expanded ? /* @__PURE__ */ jsx7("div", { className: `card-body m-0 ${(_a = props.cardProps) == null ? void 0 : _a.className}`, style: {
+      maxHeight: "0",
+      padding: 0,
+      opacity: "0",
+      overflow: "hidden",
+      visibility: "collapse",
+      transition: "all 0.5s"
+    }, children: props.children }) : /* @__PURE__ */ jsx7("div", { className: `card-body m-4 ${(_b = props.cardProps) == null ? void 0 : _b.className}`, style: {
+      maxHeight: void 0,
+      padding: 0,
+      opacity: "1",
+      visibility: "visible",
+      transition: "all 0.5s"
+    }, children: props.children })
+  ] });
+};
+var Panel_default = CmrPanel;
+
+// src/CmrComponents/upload/Upload.tsx
+import React5, { useState as useState4 } from "react";
+import { Button as Button3 } from "@mui/material";
+
+// src/CmrComponents/upload/UploadWindow.tsx
+import * as React4 from "react";
+import Button2 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 as MenuItem2 } from "@mui/material";
+
+// src/CmrComponents/label/Label.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var CmrLabel = (props) => {
+  const { children, required = false } = props;
+  return /* @__PURE__ */ jsxs4("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
+    children,
+    required && /* @__PURE__ */ jsx8("span", { className: "asterik", children: "*" })
+  ] });
+};
+var Label_default = CmrLabel;
+
+// src/CmrComponents/upload/UploadWindow.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function UploadWindow({
+  upload,
+  open,
+  setOpen,
+  fileExtension,
+  template = { showFileName: true, showDatabase: true, showFileSize: true }
+  // default values
+}) {
+  const [fileOriginalName, setFileOriginalName] = React4.useState("");
+  const [fileAlias, setFileAlias] = React4.useState("/");
+  const [fileSize, setFileSize] = React4.useState("0 MB");
+  const [warningText, setWarningText] = React4.useState("Unknown Status");
+  const [infoOpen, setInfoOpen] = React4.useState(false);
+  const [locationSelection, setLocationSelection] = React4.useState("s3");
+  const [infoStyle, setInfoStyle] = React4.useState("info");
+  const [uploadedFiles, setUploaded] = React4.useState([]);
+  const [UpBtnDisabled, setUpBtnDisabled] = React4.useState(false);
+  const [UpBtnText, setUpBtnText] = React4.useState("Upload");
+  const [uploadBoxWarning, setUploadBoxWarning] = React4.useState(void 0);
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const getExtension = (fileName) => {
+    if (fileName == void 0)
+      return;
+    return fileName.split(".").pop();
+  };
+  const handleConfirm = () => {
+    if (uploadedFiles.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Must select files to upload!");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    if (fileAlias.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("File name can't be empty");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    setOpen(false);
+    upload(uploadedFiles[0], fileAlias, locationSelection).then((response) => {
+      console.log(response);
+      if (response > 0) {
+        setInfoOpen(true);
+        if (response === 200) {
+          setInfoStyle("success");
+          setWarningText("Upload successful");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setOpen(false);
+          }, 1e3);
+          setUpBtnDisabled(false);
+          setUpBtnText("Upload");
+        } else if (response === 413) {
+          setInfoStyle("error");
+          setWarningText("File size limit exceeded");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+        } else if (response === 500) {
+          setInfoStyle("error");
+          setWarningText("Internal server error");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1500);
+          setOpen(true);
+        } else if (response === 400) {
+          setInfoStyle("warning");
+          setWarningText("File upload cancelled");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1e3);
+          setOpen(true);
+        } else {
+          setInfoStyle("warning");
+          setWarningText("Unknown status");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+          setOpen(true);
+        }
+      }
+    }).catch((error) => {
+      setUpBtnDisabled(false);
+      setUpBtnText("Upload");
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Upload unsuccessful: " + error.message);
+      setTimeout(() => setInfoOpen(false), 2500);
+      console.error("Error:", error);
+    });
+    setUpBtnDisabled(true);
+    setUpBtnText("Uploading");
+  };
+  const changeFileName = (e) => {
+    setFileAlias(e.target.value);
+  };
+  function loadFiles(files) {
+    if (files.length == 0) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("No file selected");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    if (files.length > 1) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("Only accepts one file at a time");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    let file = files[0];
+    setUploaded([file]);
+    function readFile(file2) {
+      setFileOriginalName(file2.name);
+      setFileAlias(file2.name);
+      const units = [
+        "B",
+        "KB",
+        "MB",
+        "GB",
+        "TB",
+        "PB",
+        "EB",
+        "ZB",
+        "YB"
+      ];
+      let numberOfBytes = file2.size;
+      const exponent = Math.min(
+        Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
+        units.length - 1
+      );
+      const approx = numberOfBytes / 1024 ** exponent;
+      const output = exponent === 0 ? `${numberOfBytes} bytes` : `${approx.toFixed(3)} ${units[exponent]}`;
+      setFileSize(output);
+    }
+    readFile(file);
+  }
+  let initialized = false;
+  let fileInput = (inputRef) => {
+    if (initialized)
+      return;
+    inputRef.addEventListener("dragover", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (e.dataTransfer.files) {
+        let draggedFiles = e.dataTransfer.files;
+        if (draggedFiles.length > 1) {
+          setUploadBoxWarning("Only one file can be uploaded at a time");
+        } else if (fileExtension != void 0 && draggedFiles.length != 0 && getExtension(draggedFiles[0].name) != fileExtension) {
+          setUploadBoxWarning(`Only accepting files with extension ${fileExtension}`);
+        }
+      }
+      e.dataTransfer.dropEffect = "copy";
+    });
+    inputRef.addEventListener("drop", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setUploadBoxWarning(void 0);
+      let files = e.dataTransfer.files;
+      if (files.length > 1) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText("Only one file can be uploaded at a time");
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      } else if (fileExtension != void 0 && `.${getExtension(files[0].name)}` != fileExtension) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText(`Only accepting files with extension ${fileExtension}`);
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      }
+      loadFiles(files);
+    });
+    inputRef.addEventListener("dragleave", () => {
+      setUploadBoxWarning(void 0);
+    });
+    initialized = true;
+  };
+  const fileInputClick = (e) => {
+    const fileElem = document.getElementById("file-window");
+    e.preventDefault();
+    if (fileElem) {
+      fileElem.click();
+    }
+  };
+  const loadSelectedFiles = (e) => {
+    e.preventDefault();
+    const fileElem = document.getElementById("file-window");
+    loadFiles(fileElem.files);
+  };
+  return /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsxs5(Dialog, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ jsx9(DialogTitle, { children: "File Upload" }),
+    /* @__PURE__ */ jsxs5(DialogContent, { children: [
+      /* @__PURE__ */ jsx9(DialogContentText, {}),
+      /* @__PURE__ */ jsxs5(DialogContent, { dividers: true, children: [
+        /* @__PURE__ */ jsx9(
+          Box,
+          {
+            width: 500,
+            height: 250,
+            style: {
+              borderStyle: "dashed",
+              borderRadius: "5pt",
+              borderColor: uploadBoxWarning == void 0 ? "lightGray" : "#BA3C3C"
+            },
+            children: /* @__PURE__ */ jsx9(Typography, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ jsxs5(
+              Box,
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%"
+                },
+                onClick: fileInputClick,
+                ref: fileInput,
+                children: [
+                  /* @__PURE__ */ jsxs5(Typography, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
+                    "Drag & Drop or Click to Upload Your File Here ",
+                    /* @__PURE__ */ jsx9("sup", { children: "*" })
+                  ] }),
+                  /* @__PURE__ */ jsx9(Typography, { 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." })
+                ]
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            type: "file",
+            id: "file-window",
+            multiple: true,
+            accept: fileExtension == void 0 ? "*" : fileExtension,
+            style: { display: "none" },
+            onChange: loadSelectedFiles
+          }
+        ),
+        /* @__PURE__ */ jsxs5(Box, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
+          /* @__PURE__ */ jsxs5("div", { children: [
+            template.showFileName && /* @__PURE__ */ jsx9(
+              TextField,
+              {
+                required: true,
+                style: { marginTop: "30px" },
+                label: `File Alias:`,
+                value: fileAlias,
+                variant: "standard",
+                onChange: changeFileName
+              }
+            ),
+            fileOriginalName != "" && /* @__PURE__ */ jsx9(Label_default, { style: { marginLeft: "16px", fontSize: "9pt", color: "#267833" }, children: fileOriginalName }),
+            template.showDatabase && /* @__PURE__ */ jsx9(
+              TextField,
+              {
+                select: true,
+                label: "Database:",
+                defaultValue: "s3",
+                helperText: "Upstream Storage Location",
+                variant: "standard",
+                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ jsx9(MenuItem2, { value: option.value, children: option.label }, option.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { children: [
+            template.showFileSize && /* @__PURE__ */ jsx9(
+              TextField,
+              {
+                label: "File Size:",
+                value: fileSize,
+                InputProps: {
+                  readOnly: true
+                },
+                variant: "standard"
+              }
+            ),
+            /* @__PURE__ */ jsx9(Collapse, { in: infoOpen, children: /* @__PURE__ */ jsx9(Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5(DialogActions, { children: [
+        /* @__PURE__ */ jsx9(
+          Button2,
+          {
+            color: "inherit",
+            sx: { color: "#333" },
+            disabled: UpBtnDisabled,
+            onClick: handleClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          Button2,
+          {
+            variant: "contained",
+            disabled: UpBtnDisabled,
+            onClick: handleConfirm,
+            children: UpBtnText
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/CmrComponents/upload/Upload.tsx
+import axios from "axios";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var CmrUpload = (props) => {
+  let [open, setOpen] = useState4(false);
+  let [uploading, setUploading] = useState4(false);
+  let [progress, setProgress] = useState4(0);
+  let [uploadedFile, setUploadedFile] = useState4(void 0);
+  const upload = async (file, fileAlias, fileDatabase) => {
+    setUploading(true);
+    const onProgress = (progress2) => {
+      let percentage = progress2 * 99;
+      props.uploadProgressed && props.uploadProgressed(+percentage.toFixed(2));
+      setProgress(+percentage.toFixed(2));
+    };
+    if (props.uploadStarted)
+      props.uploadStarted();
+    let status = 0;
+    if (props.beforeUpload != void 0 && !await props.beforeUpload(file)) {
+      if (props.uploadEnded)
+        props.uploadEnded();
+      setUploading(false);
+      return 200;
+    }
+    if (props.preprocess) {
+      let processed = await props.preprocess(file);
+      if (processed == void 0)
+        return failUpload();
+      if (typeof processed == "number") {
+        setUploading(false);
+        return processed;
+      }
+      file = processed;
+    }
+    if (props.uploadHandler != void 0) {
+      status = await props.uploadHandler(file, fileAlias, fileDatabase, onProgress, props.onUploaded);
+      setUploadedFile(props.reusable ? void 0 : file.name);
+    } else if (props.createPayload) {
+      let payload = await props.createPayload(file, fileAlias, fileDatabase);
+      if (payload == void 0) {
+        return failUpload();
+      }
+      payload.config.onUploadProgress = (progressEvent) => {
+        if (progressEvent.total == void 0)
+          return;
+        onProgress(progressEvent.loaded / progressEvent.total);
+      };
+      const res = await axios.post(payload.destination, payload.lambdaFile, payload.config);
+      status = res.status;
+      if (status === 200) {
+        console.log(res.data);
+        await axios.put(res.data.upload_url, payload.file, {
+          headers: {
+            "Content-Type": payload.file.type
+          }
+        });
+        await props.onUploaded(res, payload.file);
+        setUploadedFile(props.reusable ? void 0 : payload.file.name);
+      }
+    } else {
+      return failUpload();
+    }
+    if (props.uploadEnded)
+      props.uploadEnded();
+    setUploading(false);
+    setProgress(0);
+    return status;
+  };
+  function failUpload() {
+    setUploading(false);
+    setProgress(0);
+    if (props.uploadFailed)
+      return props.uploadFailed();
+    return 0;
+  }
+  return /* @__PURE__ */ jsxs6(React5.Fragment, { children: [
+    !uploading ? /* @__PURE__ */ jsxs6(
+      Button3,
+      {
+        fullWidth: props.fullWidth,
+        style: props.style,
+        variant: uploadedFile == void 0 ? "contained" : "outlined",
+        onClick: () => {
+          setOpen(true);
+        },
+        color: props.color || "primary",
+        sx: props.sx,
+        children: [
+          props.changeNameAfterUpload ? uploadedFile === void 0 ? props.uploadButtonName ? props.uploadButtonName : "Upload" : uploadedFile : props.uploadButtonName ? props.uploadButtonName : "Upload",
+          "                "
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs6(Button3, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
+      "Uploading ",
+      progress,
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx10(
+      UploadWindow,
+      {
+        open,
+        setOpen,
+        upload,
+        fileExtension: props.fileExtension,
+        template: { showFileName: true, showFileSize: true }
+      }
+    )
+  ] });
+};
+CmrUpload.defaultProps = {
+  changeNameAfterUpload: true
+};
+var Upload_default = CmrUpload;
+
 // src/CmrTable/CmrTable.tsx
 import { DataGrid } from "@mui/x-data-grid";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -163,7 +734,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx6("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx11("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx11(
     DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -188,9 +759,12 @@ var CmrTable_default = CmrTable;
 // src/index.ts
 var CmrTable2 = CmrTable_default;
 export {
+  Upload_default as CMRUpload,
   CmrButton,
   CmrCheckbox,
+  Collapse_default as CmrCollapse,
   CmrInput,
+  Panel_default as CmrPanel,
   CmrRadioGroup_default as CmrRadioGroup,
   CmrSelect_default as CmrSelect,
   CmrTable2 as CmrTable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",
@@ -31,6 +31,7 @@
     "@mui/material": "^5.14.2",
     "@mui/x-data-grid": "^6.10.1",
     "antd": "^5.22.1",
+    "axios": "^1.9.0",
     "css-loader": "^7.1.2",
     "sass": "^1.81.0",
     "sass-loader": "^16.0.3",