@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/DropZone.styled.js

@@ -0,0 +1,71 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import LinearProgress from '@mui/material/LinearProgress';
+import { hexToRgba, mixColors } from '../utils/colors.js';
+
+const borderRadius = (edges, theme) => {
+  switch (edges) {
+    case "rounded":
+      return 99;
+    case "sharp":
+      return 0;
+    default:
+      return theme.shape.borderRadius;
+  }
+};
+const StyledWrapper = styled(Box)(
+  ({ compact, disabled, edges, errors, theme }) => ({
+    position: "relative",
+    display: compact === "yes" ? "flex" : "block",
+    textAlign: "center",
+    border: `2px dashed ${errors === "yes" ? theme.palette.error.main : theme.palette.primary.main}`,
+    padding: compact === "yes" ? theme.spacing(2, 4) : theme.spacing(6, 4),
+    background: disabled ? theme.palette.grey[300] : null,
+    opacity: disabled ? 0.5 : 1,
+    borderRadius: borderRadius(edges, theme),
+    "&:focus": {
+      border: `2px solid ${theme.palette.primary.main}`,
+      outline: "none",
+      background: hexToRgba(theme.palette.primary.main, 0.1)
+    },
+    alignItems: "center",
+    "& .MuiTypography-root": {
+      marginRight: compact === "yes" ? theme.spacing(2) : 0
+    }
+  })
+);
+const StyledDraggingIndicator = styled(LinearProgress)(
+  ({ isDragReject, theme }) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: "100%",
+    width: "100%",
+    opacity: 0.2,
+    backgroundColor: isDragReject ? theme.palette.error.main : theme.palette.primary.main,
+    "& .MuiLinearProgress-barColorPrimary": {
+      background: mixColors(
+        isDragReject ? theme.palette.error.main : theme.palette.primary.main,
+        "#ffffff",
+        60
+      )
+    }
+  })
+);
+const StyledLoader = styled(CircularProgress)({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  marginTop: -20,
+  marginLeft: -20
+});
+const StyledIcon = styled("div")(({ compact, theme }) => ({
+  display: "inline-flex",
+  color: theme.palette.default.light,
+  margin: compact ? `0 ${theme.spacing(2)} 0 0` : "0 auto",
+  fontSize: compact ? "2rem" : "4rem"
+}));
+
+export { StyledDraggingIndicator, StyledIcon, StyledLoader, StyledWrapper };

package/dist/esm/components/Embed.js

@@ -0,0 +1,37 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import CircularProgress from './CircularProgress.js';
+import { StyledEmbed, StyledBox, StyledEmbedFrame } from './Embed.styled.js';
+
+function Embed({ height = "50%", src, width = "100%" }) {
+  return /* @__PURE__ */ jsxs(StyledEmbed, { height, width, children: [
+    /* @__PURE__ */ jsx(StyledBox, { children: /* @__PURE__ */ jsx(CircularProgress, { size: 50 }) }),
+    /* @__PURE__ */ jsx(
+      StyledEmbedFrame,
+      {
+        src,
+        frameborder: "0",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+        allowfullscreen: true
+      }
+    )
+  ] });
+}
+Embed.propTypes = {
+  /**
+   * Defines the height of embed container
+   */
+  height: PropTypes.string,
+  /**
+   * Url to embed in frame
+   */
+  src: PropTypes.string.isRequired,
+  /**
+   * Defines the width of embed container
+   */
+  width: PropTypes.string
+};
+
+export { Embed as default };

package/dist/esm/components/Embed.styled.js

@@ -0,0 +1,34 @@
+"use strict";
+import styled, { css } from 'styled-components';
+import Box from './Box.js';
+
+const StyledEmbed = styled.div`
+  ${({ height, width }) => css`
+    position: relative;
+    padding-bottom: ${height};
+    height: 0;
+    overflow: hidden;
+    width: ${width};
+  `}
+`;
+const StyledEmbedFrame = styled.iframe`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 3;
+`;
+const StyledBox = styled(Box)`
+  display: flex !important;
+  position: absolute;
+  left: 0;
+  top: 0;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+`;
+
+export { StyledBox, StyledEmbed, StyledEmbedFrame };

package/dist/esm/components/FileUpload.js

@@ -0,0 +1,315 @@
+"use strict";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Alert from '@mui/material/Alert';
+import { AnimateSharedLayout, AnimatePresence, motion } from 'framer-motion';
+import DeleteIcon from '@mui/icons-material/Delete';
+import DropZone from './DropZone.js';
+import FormControl from './FormControl.js';
+import Button from './Button.js';
+import Confirmation from './Confirmation.js';
+import IconButton from './IconButton.js';
+import FileViewer from './FileViewer.js';
+import FormFocus from './FormFocus.js';
+import Grid from './Grid.js';
+import Tooltip from './Tooltip.js';
+import { getFileName } from '../utils/helpers/file.js';
+import '../utils/helpers/time.js';
+import { StyledSavedWrapper, StyledLoader, StyledAlertTitle } from './FileUpload.styled.js';
+
+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] = useState(null);
+  const [confirmDeleteAll, setConfirmDeleteAll] = useState(false);
+  const [viewedFile, setViewedFile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const handleFileSave = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      FormControl,
+      {
+        name,
+        fullWidth: true,
+        label,
+        helperText,
+        helperTextPlacement,
+        disabled,
+        required,
+        showError,
+        errorMessage,
+        edges,
+        children: [
+          /* @__PURE__ */ jsx(FormFocus, { name }),
+          files && files.length > 0 && /* @__PURE__ */ jsxs(StyledSavedWrapper, { ...fade, edges, children: [
+            (saving || loading) && /* @__PURE__ */ jsx(StyledLoader, { disableShrink: true }),
+            /* @__PURE__ */ jsx(Grid, { container: true, alignItems: "center", spacing: 5, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(AnimateSharedLayout, { children: files.map((file, index) => /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+              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__ */ jsxs(
+                  Alert,
+                  {
+                    severity: showError || fileErrors(file, index) !== null ? "error" : "success",
+                    style: { marginBottom: 5 },
+                    action: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      fileActions(file, index) !== null && fileActions(file, index),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          onClick: () => setViewedFile(file),
+                          color: "inherit",
+                          size: "small",
+                          variant: "text",
+                          children: "View"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Tooltip, { title: "Delete", enterDelay: 0, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          disabled: saving,
+                          size: "small",
+                          "aria-label": "delete",
+                          style: { padding: 0 },
+                          onClick: () => !showError ? handleDeleteConfirmation(index) : handleDeleteWithoutConfirmation(index),
+                          children: /* @__PURE__ */ jsx(DeleteIcon, {})
+                        }
+                      ) }) })
+                    ] }),
+                    children: [
+                      /* @__PURE__ */ jsx(StyledAlertTitle, { children: getFileName(file) }),
+                      fileErrors(file, index)
+                    ]
+                  }
+                )
+              }
+            ) }, getFileName(file))) }) }) })
+          ] }),
+          (!files || files.length === 0 || !dropzoneProps || dropzoneProps.maxFiles === void 0 || dropzoneProps.maxFiles > 1) && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ...fade,
+              style: files && files.length > 0 ? { marginTop: 8 } : null,
+              children: /* @__PURE__ */ jsx(
+                DropZone,
+                {
+                  loading,
+                  disabled,
+                  onDrop,
+                  edges,
+                  dropzoneLabel,
+                  dropzoneDescription,
+                  dropzoneProps,
+                  compact: files && files.length > 0
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Confirmation,
+      {
+        open: confirmDeleteAll,
+        onCancel: () => setConfirmDeleteAll(false),
+        onConfirm: handleDeleteAll,
+        message: "Are you sure you want to remove the attached file(s)?"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Confirmation,
+      {
+        open: confirmDelete !== null,
+        onCancel: () => {
+          setConfirmDelete(null);
+          setLoading(false);
+        },
+        onConfirm: handleDelete,
+        message: "Are you sure you want to remove the attached file?"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FileViewer,
+      {
+        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"])
+};
+
+export { FileUpload as default };

package/dist/esm/components/FileUpload.styled.js

@@ -0,0 +1,43 @@
+"use strict";
+import { motion } from 'framer-motion';
+import { styled } from '@mui/material/styles';
+import AlertTitle from '@mui/material/AlertTitle';
+import CircularProgress from '@mui/material/CircularProgress';
+
+const borderRadius = (edges, theme) => {
+  switch (edges) {
+    case "rounded":
+      return 99;
+    case "sharp":
+      return 0;
+    default:
+      return theme.shape.borderRadius;
+  }
+};
+const StyledAlertTitle = styled(AlertTitle)({
+  fontSize: 14,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  marginBottom: 0
+});
+const StyledLoader = styled(CircularProgress)({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  marginTop: -20,
+  marginLeft: -20,
+  zIndex: 1
+});
+const StyledSavedWrapper = styled(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"
+  }
+}));
+
+export { StyledAlertTitle, StyledLoader, StyledSavedWrapper };

package/dist/esm/components/FileUploadButton.js

@@ -0,0 +1,113 @@
+"use strict";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useDropzone } from 'react-dropzone';
+import Button from './Button.js';
+import FileUploadButtonLoader from './FileUploadButtonLoader.js';
+
+function FileUploadButton({
+  children,
+  maxFiles = 1,
+  maxSize = 1887436,
+  accept = ["image/*", "application/pdf"],
+  disabled = false,
+  onUpload,
+  ...rest
+}) {
+  const [pending, setPending] = useState(false);
+  const [accepted, setAccepted] = useState(false);
+  const [rejected, setRejected] = useState(false);
+  const handleFileSave = 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 } = useDropzone({
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    disabled,
+    noDrag: true,
+    maxFiles,
+    maxSize,
+    accept,
+    multiple: maxFiles > 1
+  });
+  return /* @__PURE__ */ jsx("span", { ...getRootProps(), children: /* @__PURE__ */ jsxs(
+    Button,
+    {
+      loading: true,
+      disabled,
+      pending,
+      pendingIndicator: /* @__PURE__ */ jsx(FileUploadButtonLoader, { accepted, rejected }),
+      ...rest,
+      children: [
+        /* @__PURE__ */ 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
+};
+
+export { FileUploadButton as default };

package/dist/esm/components/FileUploadButtonLoader.js

@@ -0,0 +1,23 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import CheckIcon from '@mui/icons-material/Check';
+import WarningIcon from '@mui/icons-material/Warning';
+import CircularProgress from './CircularProgress.js';
+
+function FileUploadButtonLoader({ accepted = false, rejected = false }) {
+  if (accepted) {
+    return /* @__PURE__ */ jsx(CheckIcon, { color: "inherit", size: 16 });
+  }
+  if (rejected) {
+    return /* @__PURE__ */ jsx(WarningIcon, { color: "inherit", size: 16 });
+  }
+  return /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 16 });
+}
+FileUploadButtonLoader.propTypes = {
+  accepted: PropTypes.bool,
+  rejected: PropTypes.bool
+};
+
+export { FileUploadButtonLoader as default };