@tenancy.nz/ui 1.0.0 → 1.0.1

package/dist/cjs/components/FileUpload.cjs

@@ -0,0 +1,319 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var Alert = require('@mui/material/Alert');
+var framerMotion = require('framer-motion');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var DropZone = require('./DropZone.cjs');
+var FormControl = require('./FormControl.cjs');
+var Button = require('./Button.cjs');
+var Confirmation = require('./Confirmation.cjs');
+var IconButton = require('./IconButton.cjs');
+var FileViewer = require('./FileViewer.cjs');
+var FormFocus = require('./FormFocus.cjs');
+var Grid = require('./Grid.cjs');
+var Tooltip = require('./Tooltip.cjs');
+var file = require('../utils/helpers/file.cjs');
+require('../utils/helpers/time.cjs');
+var FileUpload_styled = require('./FileUpload.styled.cjs');
+
+function FileUpload({
+  fileActions = () => null,
+  fileErrors = () => null,
+  disabled = false,
+  dropzoneLabel = "Upload file(s)",
+  dropzoneDescription = "Drag and drop files here, or click to select files",
+  helperText = "",
+  helperTextPlacement = "below",
+  label = "",
+  required = false,
+  showError = false,
+  errorMessage = "",
+  edges = "normal",
+  dropzoneProps = null,
+  onChange,
+  onDelete = void 0,
+  saving = void 0,
+  name,
+  files = null
+}) {
+  const [confirmDelete, setConfirmDelete] = React.useState(null);
+  const [confirmDeleteAll, setConfirmDeleteAll] = React.useState(false);
+  const [viewedFile, setViewedFile] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const handleFileSave = React.useCallback(
+    (results) => {
+      const uploadedFiles = Array.isArray(files) ? [...files] : [];
+      const promises = [];
+      results.forEach(
+        (file) => promises.push(
+          new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+              uploadedFiles.push({
+                url: reader.result,
+                filename: file.path,
+                filetype: file.type
+              });
+              resolve();
+            };
+            reader.readAsDataURL(file);
+          })
+        )
+      );
+      Promise.all(promises).then(() => {
+        setLoading(false);
+        onChange(uploadedFiles);
+      });
+    },
+    [files, onChange]
+  );
+  const onDrop = (results) => {
+    setLoading(true);
+    setTimeout(() => handleFileSave(results), 500);
+  };
+  const handleDelete = () => {
+    const updatedFiles = [...files];
+    updatedFiles.splice(confirmDelete, 1);
+    onDelete(updatedFiles, files[confirmDelete], confirmDelete).then(() => {
+      onChange(updatedFiles);
+      setLoading(false);
+      setConfirmDelete(null);
+    }).catch((e) => console.error(e));
+  };
+  const handleDeleteWithoutConfirmation = (index) => {
+    const updatedFiles = [...files];
+    updatedFiles.splice(index, 1);
+    onDelete(updatedFiles, files[index]).then(() => {
+      onChange(updatedFiles);
+      setLoading(false);
+    }).catch((e) => console.error(e));
+  };
+  const handleDeleteConfirmation = (index) => {
+    setLoading(true);
+    setConfirmDelete(index);
+  };
+  const handleDeleteAll = () => {
+    setConfirmDeleteAll(false);
+    onDelete().then(() => {
+      onChange([]);
+    });
+  };
+  const fade = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      FormControl.default,
+      {
+        name,
+        fullWidth: true,
+        label,
+        helperText,
+        helperTextPlacement,
+        disabled,
+        required,
+        showError,
+        errorMessage,
+        edges,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormFocus.default, { name }),
+          files && files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(FileUpload_styled.StyledSavedWrapper, { ...fade, edges, children: [
+            (saving || loading) && /* @__PURE__ */ jsxRuntime.jsx(FileUpload_styled.StyledLoader, { disableShrink: true }),
+            /* @__PURE__ */ jsxRuntime.jsx(Grid.default, { container: true, alignItems: "center", spacing: 5, children: /* @__PURE__ */ jsxRuntime.jsx(Grid.default, { item: true, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimateSharedLayout, { children: files.map((file$1, index) => /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                positionTransition: true,
+                initial: { opacity: 0, y: 50, scale: 0.3 },
+                animate: { opacity: 1, y: 0, scale: 1 },
+                exit: {
+                  opacity: 0,
+                  scale: 0.5,
+                  transition: { duration: 0.2 }
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  Alert,
+                  {
+                    severity: showError || fileErrors(file$1, index) !== null ? "error" : "success",
+                    style: { marginBottom: 5 },
+                    action: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      fileActions(file$1, index) !== null && fileActions(file$1, index),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Button.default,
+                        {
+                          onClick: () => setViewedFile(file$1),
+                          color: "inherit",
+                          size: "small",
+                          variant: "text",
+                          children: "View"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(Tooltip.default, { title: "Delete", enterDelay: 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                        IconButton.default,
+                        {
+                          disabled: saving,
+                          size: "small",
+                          "aria-label": "delete",
+                          style: { padding: 0 },
+                          onClick: () => !showError ? handleDeleteConfirmation(index) : handleDeleteWithoutConfirmation(index),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {})
+                        }
+                      ) }) })
+                    ] }),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(FileUpload_styled.StyledAlertTitle, { children: file.getFileName(file$1) }),
+                      fileErrors(file$1, index)
+                    ]
+                  }
+                )
+              }
+            ) }, file.getFileName(file$1))) }) }) })
+          ] }),
+          (!files || files.length === 0 || !dropzoneProps || dropzoneProps.maxFiles === void 0 || dropzoneProps.maxFiles > 1) && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              ...fade,
+              style: files && files.length > 0 ? { marginTop: 8 } : null,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                DropZone.default,
+                {
+                  loading,
+                  disabled,
+                  onDrop,
+                  edges,
+                  dropzoneLabel,
+                  dropzoneDescription,
+                  dropzoneProps,
+                  compact: files && files.length > 0
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Confirmation.default,
+      {
+        open: confirmDeleteAll,
+        onCancel: () => setConfirmDeleteAll(false),
+        onConfirm: handleDeleteAll,
+        message: "Are you sure you want to remove the attached file(s)?"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Confirmation.default,
+      {
+        open: confirmDelete !== null,
+        onCancel: () => {
+          setConfirmDelete(null);
+          setLoading(false);
+        },
+        onConfirm: handleDelete,
+        message: "Are you sure you want to remove the attached file?"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FileViewer.default,
+      {
+        file: viewedFile,
+        open: viewedFile !== null,
+        onClose: () => setViewedFile(null)
+      }
+    )
+  ] });
+}
+FileUpload.propTypes = {
+  /**
+   * Add actions to file line items
+   */
+  fileActions: PropTypes.func,
+  /**
+   * Add error messages to file line items
+   */
+  fileErrors: PropTypes.func,
+  /**
+   * Array of existing images already uploaded to this field
+   */
+  files: PropTypes.arrayOf(
+    PropTypes.shape({
+      url: PropTypes.string,
+      filename: PropTypes.string,
+      filetype: PropTypes.string
+    })
+  ),
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Text label displayed in the dropzone
+   */
+  dropzoneLabel: PropTypes.string,
+  /**
+   * Text description displayed in the dropzone
+   */
+  dropzoneDescription: PropTypes.string,
+  /**
+   * Pass props for react-dropzone. See https://react-dropzone.js.org/
+   */
+  dropzoneProps: PropTypes.object,
+  /**
+   * Whether or not to display an error message (if there is a message to display).
+   */
+  showError: PropTypes.bool,
+  /**
+   * The error message to display if showError === true
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * Placed the helper text above or below the input.
+   */
+  helperTextPlacement: PropTypes.oneOf(["above", "below"]),
+  /**
+   * The id of the `input` element.
+   * Use this prop to make `label` and `helperText` accessible for screen readers.
+   */
+  htmlFor: PropTypes.string,
+  /**
+   * Do something when user saves cropped image, received the base64 string
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * Show uploading state
+   */
+  saving: PropTypes.bool,
+  /**
+   * Do something when user removes image
+   */
+  onDelete: PropTypes.func,
+  /**
+   * The field name.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * The label content.
+   */
+  label: PropTypes.string,
+  /**
+   * If `true`, the label will indicate that the input is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"])
+};
+
+exports.default = FileUpload;

package/dist/cjs/components/FileUpload.styled.cjs

@@ -0,0 +1,47 @@
+"use strict";
+'use strict';
+
+var framerMotion = require('framer-motion');
+var styles = require('@mui/material/styles');
+var AlertTitle = require('@mui/material/AlertTitle');
+var CircularProgress = require('@mui/material/CircularProgress');
+
+const borderRadius = (edges, theme) => {
+  switch (edges) {
+    case "rounded":
+      return 99;
+    case "sharp":
+      return 0;
+    default:
+      return theme.shape.borderRadius;
+  }
+};
+const StyledAlertTitle = styles.styled(AlertTitle)({
+  fontSize: 14,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  marginBottom: 0
+});
+const StyledLoader = styles.styled(CircularProgress)({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  marginTop: -20,
+  marginLeft: -20,
+  zIndex: 1
+});
+const StyledSavedWrapper = styles.styled(framerMotion.motion.div)(({ edges, theme }) => ({
+  borderRadius: borderRadius(edges, theme),
+  border: `1px solid ${theme.palette.text.secondary}`,
+  padding: theme.spacing(6, 4),
+  "& .MuiAlert-message": {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+}));
+
+exports.StyledAlertTitle = StyledAlertTitle;
+exports.StyledLoader = StyledLoader;
+exports.StyledSavedWrapper = StyledSavedWrapper;

package/dist/cjs/components/FileUploadButton.cjs

@@ -0,0 +1,117 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var reactDropzone = require('react-dropzone');
+var Button = require('./Button.cjs');
+var FileUploadButtonLoader = require('./FileUploadButtonLoader.cjs');
+
+function FileUploadButton({
+  children,
+  maxFiles = 1,
+  maxSize = 1887436,
+  accept = ["image/*", "application/pdf"],
+  disabled = false,
+  onUpload,
+  ...rest
+}) {
+  const [pending, setPending] = React.useState(false);
+  const [accepted, setAccepted] = React.useState(false);
+  const [rejected, setRejected] = React.useState(false);
+  const handleFileSave = React.useCallback(
+    (results) => {
+      const promises = [];
+      const files = [...results];
+      files.forEach(
+        (file, i) => promises.push(
+          new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+              files[i].url = reader.result;
+              resolve();
+            };
+            reader.readAsDataURL(file);
+          })
+        )
+      );
+      Promise.all(promises).then(() => {
+        setAccepted(true);
+        setTimeout(() => {
+          setPending(false);
+          setAccepted(false);
+        }, 400);
+        onUpload(files);
+      });
+    },
+    [onUpload]
+  );
+  const onDrop = (results) => {
+    setTimeout(() => handleFileSave(results), 400);
+  };
+  const onDropAccepted = () => {
+    setPending(true);
+    setTimeout(() => setAccepted(true), 400);
+  };
+  const onDropRejected = () => {
+    setPending(true);
+    setTimeout(() => setRejected(true), 400);
+    setTimeout(() => setRejected(false), 800);
+  };
+  const { getRootProps, getInputProps } = reactDropzone.useDropzone({
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    disabled,
+    noDrag: true,
+    maxFiles,
+    maxSize,
+    accept,
+    multiple: maxFiles > 1
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...getRootProps(), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Button.default,
+    {
+      loading: true,
+      disabled,
+      pending,
+      pendingIndicator: /* @__PURE__ */ jsxRuntime.jsx(FileUploadButtonLoader.default, { accepted, rejected }),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+        children
+      ]
+    }
+  ) });
+}
+FileUploadButton.propTypes = {
+  /**
+   * Component, node or text
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * 	Maximum accepted number of files.
+   */
+  maxFiles: PropTypes.number,
+  /**
+   * 	Maximum file size (in bytes)
+   */
+  maxSize: PropTypes.number,
+  /**
+   * Array of acceptable file types...
+   */
+  accept: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * If `true`, the button should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Do something with the file upload result
+   */
+  onUpload: PropTypes.func.isRequired
+};
+
+exports.default = FileUploadButton;

package/dist/cjs/components/FileUploadButtonLoader.cjs

@@ -0,0 +1,27 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var CheckIcon = require('@mui/icons-material/Check');
+var WarningIcon = require('@mui/icons-material/Warning');
+var CircularProgress = require('./CircularProgress.cjs');
+
+function FileUploadButtonLoader({ accepted = false, rejected = false }) {
+  if (accepted) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { color: "inherit", size: 16 });
+  }
+  if (rejected) {
+    return /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, { color: "inherit", size: 16 });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress.default, { color: "inherit", size: 16 });
+}
+FileUploadButtonLoader.propTypes = {
+  accepted: PropTypes.bool,
+  rejected: PropTypes.bool
+};
+
+exports.default = FileUploadButtonLoader;

package/dist/cjs/components/FileViewer.cjs

@@ -0,0 +1,117 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var mime = require('mime/lite');
+var ErrorOutlineIcon = require('@mui/icons-material/ErrorOutline');
+var Button = require('./Button.cjs');
+var Box = require('./Box.cjs');
+var Embed = require('./Embed.cjs');
+var Grid = require('./Grid.cjs');
+var Modal = require('./Modal.cjs');
+var ModalContent = require('./ModalContent.cjs');
+var ModalHeader = require('./ModalHeader.cjs');
+var Heading = require('./Heading.cjs');
+var FileViewer_styled = require('./FileViewer.styled.cjs');
+var boolean = require('../utils/helpers/boolean.cjs');
+require('../utils/helpers/time.cjs');
+
+const getFileName = (file) => {
+  if (file.filename) {
+    return file.filename;
+  }
+  if (file.url) {
+    const name = file.url.substring(file.url.lastIndexOf("/") + 1);
+    if (name.includes("?")) {
+      const chuncks = name.split("?");
+      return chuncks[0];
+    }
+    return name;
+  }
+  return "";
+};
+const getFileExtension = (file) => {
+  const type = mime.getType(getFileName(file));
+  if (type) {
+    return mime.getExtension(type);
+  }
+  if (file.type) {
+    return mime.getExtension(file.type);
+  }
+  return "unsupported";
+};
+const isImage = (file) => {
+  if (file && file.url && file.url.startsWith("data:image")) {
+    return true;
+  }
+  const extension = getFileExtension(file);
+  const extensions = ["jpg", "jpeg", "png", "gif", "svg"];
+  return extensions.includes(extension);
+};
+function FileViewer({ file = null, heading = "", open = false, onClose }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal.default, { open: open && file !== null, onClose, fullWidth: true, children: file !== null && open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ModalHeader.default, { onClose, children: /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h5", children: heading || getFileName(file) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ModalContent.default, { children: /* @__PURE__ */ jsxRuntime.jsx(FileViewer_styled.StyledFilePreviewAreaOuter, { children: (() => {
+      if (isImage(file)) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Box.default, { display: "flex", justifyContent: "center", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: file.url,
+            alt: getFileName(file),
+            style: { maxWidth: "100%" }
+          }
+        ) });
+      }
+      if (file && boolean.isString(file.url) && file.url.startsWith("data") && getFileExtension(file) !== "pdf" || getFileExtension(file) === "unsupported") {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          Grid.default,
+          {
+            container: true,
+            spacing: 5,
+            direction: "column",
+            alignItems: "center",
+            justify: "center",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Grid.default, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(FileViewer_styled.StyledBrokenFileIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorOutlineIcon, {}) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Grid.default, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h5", transform: "uppercase", children: "Preview unavailable" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Grid.default, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                Button.default,
+                {
+                  href: file.url,
+                  as: "a",
+                  download: true,
+                  color: "primary",
+                  size: "large",
+                  children: "Download"
+                }
+              ) })
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Embed.default,
+        {
+          src: file.url.startsWith("data") || file.url.includes(".pdf") ? file.url : `https://docs.google.com/gview?url=${file.url}&embedded=true`,
+          height: "85%"
+        }
+      );
+    })() }) })
+  ] }) });
+}
+FileViewer.propTypes = {
+  file: PropTypes.shape({
+    url: PropTypes.string,
+    filename: PropTypes.string,
+    type: PropTypes.string
+  }),
+  heading: PropTypes.string,
+  open: PropTypes.bool,
+  onClose: PropTypes.func.isRequired
+};
+
+exports.default = FileViewer;

package/dist/cjs/components/FileViewer.styled.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+var Heading = require('./Heading.cjs');
+
+const StyledFilePreviewAreaOuter = styled.div`
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+`;
+const StyledBrokenFileIcon = styled.div`
+  ${({ theme }) => styled.css`
+    color: ${theme.palette.default.light};
+
+    & svg {
+      font-size: 100px;
+    }
+  `}
+`;
+const StyledHeading = styled(Heading.default)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+exports.StyledBrokenFileIcon = StyledBrokenFileIcon;
+exports.StyledFilePreviewAreaOuter = StyledFilePreviewAreaOuter;
+exports.StyledHeading = StyledHeading;