@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/CollapsedText.js

@@ -0,0 +1,84 @@
+"use strict";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@mui/material/Grid';
+import { StyledCollapse, StyledButtonWrapper, StyledArrowDownIcon } from './CollapsedText.styled.js';
+import Button from './Button.js';
+
+function CollapsedText({
+  children,
+  collapsedLines = 0,
+  lineHeight = 0,
+  buttonLabel = null,
+  backgroundColor = "#ffffff",
+  buttonJustify = "flex-start"
+}) {
+  const [open, setOpen] = useState(false);
+  const [collapsedSize, setCollapsedSize] = useState(100);
+  useEffect(() => {
+    if (collapsedLines > 0 && lineHeight > 0) {
+      setCollapsedSize(collapsedLines * lineHeight);
+    }
+  }, [collapsedLines, lineHeight]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      StyledCollapse,
+      {
+        backgroundColor,
+        collapsedSize,
+        in: open,
+        lineHeight,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(Grid, { container: true, justify: buttonJustify, children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(StyledButtonWrapper, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        color: "primaryAlt",
+        variant: "outlined",
+        size: "small",
+        onClick: () => setOpen(!open),
+        endIcon: buttonJustify === "flex-end" ? /* @__PURE__ */ jsx(StyledArrowDownIcon, { open }) : null,
+        startIcon: buttonJustify !== "flex-end" ? /* @__PURE__ */ jsx(StyledArrowDownIcon, { open }) : null,
+        children: (() => {
+          if (buttonLabel && buttonLabel.open && buttonLabel.closed) {
+            return open ? buttonLabel.open : buttonLabel.closed;
+          }
+          return open ? "Less" : "More";
+        })()
+      }
+    ) }) }) })
+  ] });
+}
+CollapsedText.propTypes = {
+  /**
+   * @ignore
+   */
+  children: PropTypes.any.isRequired,
+  /**
+   * Number of lines to show
+   */
+  collapsedLines: PropTypes.number,
+  /**
+   *  The height of a line (used to create a gradient mask over the last line of text)
+   */
+  lineHeight: PropTypes.number,
+  /**
+   * Labels to show on the button when open and closed
+   */
+  buttonLabel: PropTypes.shape({
+    open: PropTypes.string,
+    closed: PropTypes.string
+  }),
+  /**
+   * Used to create gradient masks to show the user that there is hidden text (6 character hex value)
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * Position for the button
+   */
+  buttonJustify: PropTypes.oneOf(["flex-start", "center", "flex-end"])
+};
+
+export { CollapsedText as default };

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

@@ -0,0 +1,48 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+import Collapse from '@mui/material/Collapse';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { hexToRgba } from '../utils/colors.js';
+
+const StyledCollapse = styled(Collapse)(
+  ({ backgroundColor, lineHeight, in: open }) => ({
+    position: "relative",
+    "&:after, &:before": {
+      content: "' '",
+      display: "block",
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: "100%",
+      opacity: open ? 0 : 1,
+      transiton: 0.5
+    },
+    "&:after": {
+      height: open ? 0 : "66%",
+      background: `linear-gradient(0deg, ${hexToRgba(
+        backgroundColor,
+        1
+      )} 0%, ${hexToRgba(backgroundColor, 0)} 100%)`
+    },
+    "&:before": {
+      height: lineHeight || 0,
+      background: `linear-gradient(90deg, ${hexToRgba(
+        backgroundColor,
+        0
+      )} 0%, ${hexToRgba(backgroundColor, 1)} 100%)`
+    }
+  })
+);
+const StyledArrowDownIcon = styled(KeyboardArrowDownIcon)({
+  transform: ({ open }) => open ? "rotate(180deg)" : null
+});
+const StyledButtonWrapper = styled("div")(({ open, lineHeight }) => ({
+  "& .MuiButton-root": {
+    textTransform: "none",
+    top: !open && lineHeight > 0 ? 0 - lineHeight / 2 : 0,
+    backgroundColor: "#fff"
+  }
+}));
+
+export { StyledArrowDownIcon, StyledButtonWrapper, StyledCollapse };

package/dist/esm/components/Confirmation.js

@@ -0,0 +1,56 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Button from './Button.js';
+import Heading from './Heading.js';
+import Modal from './Modal.js';
+import Text from './Text.js';
+
+function Confirmation({
+  cancelling = false,
+  cancelBtnText = "Cancel",
+  confirming = false,
+  confirmBtnText = "Ok",
+  message = void 0,
+  open = false,
+  onCancel,
+  onConfirm,
+  severity = "default",
+  title = "Are you sure?"
+}) {
+  const actions = /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    onCancel && cancelBtnText && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onCancel,
+        color: "primaryAlt",
+        variant: "outlined",
+        size: "small",
+        loading: cancelling,
+        children: cancelBtnText
+      }
+    ),
+    onConfirm && confirmBtnText && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onConfirm,
+        color: severity === "default" ? "primary" : severity,
+        size: "small",
+        loading: confirming,
+        children: confirmBtnText
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      maxWidth: "xs",
+      open,
+      heading: /* @__PURE__ */ jsx(Heading, { as: "h5", gutterBottom: false, children: title }),
+      actions,
+      content: /* @__PURE__ */ jsx(Text, { as: "div", variant: "body2", children: message })
+    }
+  );
+}
+
+export { Confirmation as default };

package/dist/esm/components/Container.js

@@ -0,0 +1,17 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import MuiContainer from '@mui/material/Container';
+
+function Container({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(MuiContainer, { ...rest, children });
+}
+Container.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+export { Container as default };

package/dist/esm/components/CroppedImageInput.js

@@ -0,0 +1,461 @@
+"use strict";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback, createElement } from 'react';
+import PropTypes from 'prop-types';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { AnimatePresence, motion } from 'framer-motion';
+import ReactCrop from 'react-image-crop';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Box from './Box.js';
+import Confirmation from './Confirmation.js';
+import DropZone from './DropZone.js';
+import FormControl from './FormControl.js';
+import FileUploadButton from './FileUploadButton.js';
+import FileViewer from './FileViewer.js';
+import Grid from './Grid.js';
+import Heading from './Heading.js';
+import IconButton from './IconButton.js';
+import Modal from './Modal.js';
+import ModalHeader from './ModalHeader.js';
+import ModalContent from './ModalContent.js';
+import CroppedImageInputActions from './CroppedImageInputActions.js';
+import { isImage } from '../utils/helpers/file.js';
+import '../utils/helpers/time.js';
+import 'react-image-crop/dist/ReactCrop.css';
+import { StyledCircularProgress, StyledSavedImage, StyledFileIcon, StyledDeleteIcon, StyledEditor } from './CroppedImageInput.styled.js';
+
+function CroppedImageInput({
+  defaultValue = null,
+  disabled = false,
+  dropzoneLabel = "Upload file",
+  dropzoneDescription = "Drag and drop a file here, or click to select a file",
+  helperText = "",
+  helperTextPlacement = "above",
+  croppedImageQuality = 0.6,
+  label = "",
+  required = false,
+  showError = false,
+  errorMessage = "",
+  edges = "normal",
+  cropRatio = null,
+  inputProps = null,
+  dropzoneProps = null,
+  onCancel = Promise.resolve(true),
+  onSave = Promise.resolve(true),
+  onDelete = Promise.resolve(true),
+  name,
+  dropppedFile = null,
+  cropGuide = null,
+  showActions = false,
+  saveButtonProps = {},
+  cancelButtonProps = {},
+  openInDialog = false,
+  fileViewerProps = {}
+}) {
+  const [src, setSrc] = useState(null);
+  const [filetype, setFiletype] = useState("");
+  const [originalImage, setOriginalImage] = useState(null);
+  const [croppedImage, setCroppedImage] = useState(null);
+  const [documentFile, setDocumentFile] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [viewDocument, setViewDocument] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [cancelling, setCancelling] = useState(false);
+  const [crop, setCrop] = useState({ aspect: cropRatio, unit: "px" });
+  const input = useRef(null);
+  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
+  useEffect(() => {
+    if (defaultValue) {
+      if (isImage(defaultValue)) {
+        setCroppedImage(defaultValue);
+      } else {
+        setDocumentFile(defaultValue);
+      }
+    }
+  }, [defaultValue]);
+  const onDrop = useCallback(
+    (acceptedFiles) => {
+      setFiletype(acceptedFiles[0].type);
+      if (!acceptedFiles[0].type.startsWith("image")) {
+        setSaving(true);
+      }
+      setLoading(true);
+      const reader = new FileReader();
+      reader.addEventListener("load", () => {
+        if (acceptedFiles[0].type.startsWith("image")) {
+          setSrc(reader.result);
+        } else {
+          setDocumentFile(reader.result);
+          onSave(reader.result, acceptedFiles[0]).then(() => {
+            setSaving(false);
+          });
+        }
+        setLoading(false);
+      });
+      reader.readAsDataURL(acceptedFiles[0]);
+    },
+    [onSave]
+  );
+  useEffect(() => {
+    if (dropppedFile) {
+      onDrop(dropppedFile);
+    }
+  }, [dropppedFile, onDrop]);
+  const handleCancel = () => {
+    setCancelling(true);
+    onCancel().then(() => {
+      setSrc(null);
+      setOriginalImage(null);
+      setCroppedImage(null);
+      setConfirmDelete(false);
+      setCancelling(false);
+    });
+  };
+  const handleDelete = () => {
+    setCancelling(true);
+    onDelete().then(() => {
+      setSrc(null);
+      setDocumentFile(null);
+      setOriginalImage(null);
+      setCroppedImage(null);
+      setConfirmDelete(false);
+      setCancelling(false);
+    });
+  };
+  const fade = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  };
+  const handleCropChange = (newCrop) => setCrop(newCrop);
+  const handleImageLoaded = (image) => {
+    const {
+      target: { clientWidth, clientHeight }
+    } = image;
+    let width = clientWidth;
+    if (window.innerHeight * 0.5 < clientHeight) {
+      width = clientWidth * (window.innerHeight * 0.5 / clientHeight);
+    }
+    const height = clientHeight * (width / clientWidth);
+    if (cropRatio) {
+      const widthPercent = clientWidth / crop.aspect < clientHeight * crop.aspect ? 1 : clientHeight * crop.aspect / clientWidth;
+      const heightPercent = clientWidth / crop.aspect > clientHeight * crop.aspect ? 1 : clientWidth / crop.aspect / clientHeight;
+      const y = (1 - heightPercent) / 2;
+      const x = (1 - widthPercent) / 2;
+      setCrop({
+        unit: "px",
+        width: width * widthPercent,
+        height: height * heightPercent,
+        x: width * x,
+        y: height * y,
+        aspect: crop.aspect
+      });
+    } else {
+      setCrop({
+        unit: "px",
+        width,
+        height,
+        x: 0,
+        y: 0
+      });
+    }
+    setOriginalImage(image);
+    return false;
+  };
+  const handleImageSave = () => {
+    if (originalImage && crop.width && crop.height) {
+      const {
+        target: { clientWidth, clientHeight, naturalWidth, naturalHeight }
+      } = originalImage;
+      const canvas = document.createElement("canvas");
+      const scaleX = naturalWidth / clientWidth;
+      const scaleY = naturalHeight / clientHeight;
+      const ctx = canvas.getContext("2d");
+      canvas.width = Math.floor(crop.width * scaleX);
+      canvas.height = Math.floor(crop.height * scaleY);
+      ctx.imageSmoothingQuality = "high";
+      const cropX = crop.x * scaleX;
+      const cropY = crop.y * scaleY;
+      const centerX = naturalWidth / 2;
+      const centerY = naturalHeight / 2;
+      ctx.save();
+      ctx.translate(-cropX, -cropY);
+      ctx.translate(centerX, centerY);
+      ctx.translate(-centerX, -centerY);
+      ctx.drawImage(
+        originalImage.target,
+        0,
+        0,
+        naturalWidth,
+        naturalHeight,
+        0,
+        0,
+        naturalWidth,
+        naturalHeight
+      );
+      ctx.restore();
+      return new Promise(() => {
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              console.error("Canvas is empty");
+              return;
+            }
+            setSaving(true);
+            const reader = new FileReader();
+            reader.addEventListener("load", () => {
+              input.current.value = reader.result;
+              onSave(reader.result, blob).then(() => {
+                setCroppedImage(reader.result);
+                setSaving(false);
+              }).catch((e) => console.error(e));
+            });
+            reader.readAsDataURL(blob);
+          },
+          "image/jpeg",
+          croppedImageQuality
+        );
+      });
+    }
+    return false;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FileViewer,
+      {
+        ...fileViewerProps,
+        file: { url: documentFile, filetype },
+        open: viewDocument,
+        onClose: () => setViewDocument(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        name,
+        fullWidth: true,
+        label,
+        helperText,
+        helperTextPlacement,
+        disabled,
+        required,
+        showError,
+        errorMessage,
+        edges,
+        children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ createElement("input", { type: "hidden", ref: input, ...inputProps, key: "hidden-input" }),
+          saving || cancelling && /* @__PURE__ */ jsx(StyledCircularProgress, {}, "loading"),
+          /* @__PURE__ */ jsxs(AnimatePresence, { exitBeforeEnter: true, children: [
+            (croppedImage || documentFile) && !showError && /* @__PURE__ */ createElement(StyledSavedImage, { ...fade, key: "saved-image", edges }, /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", spacing: 5, children: [
+              /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, md: 11, children: [
+                croppedImage && /* @__PURE__ */ jsx("img", { src: croppedImage, alt: "" }),
+                documentFile && /* @__PURE__ */ jsx(
+                  Grid,
+                  {
+                    item: true,
+                    xs: 12,
+                    md: 1,
+                    style: {
+                      justifyContent: "center",
+                      alignItems: "center"
+                    },
+                    children: /* @__PURE__ */ jsx(IconButton, { onClick: () => setViewDocument(true), children: /* @__PURE__ */ jsx(StyledFileIcon, {}) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 1, children: /* @__PURE__ */ jsx(StyledDeleteIcon, { children: /* @__PURE__ */ jsx(DeleteIcon, {}) }) })
+            ] })),
+            !src && !documentFile && !croppedImage && (openInDialog ? /* @__PURE__ */ createElement(motion.div, { ...fade, key: "upload-button" }, /* @__PURE__ */ jsx(FileUploadButton, { onUpload: onDrop, fullWidth: !isNotMobile, children: dropzoneLabel })) : /* @__PURE__ */ createElement(motion.div, { ...fade, key: "dropzone" }, /* @__PURE__ */ jsx(
+              DropZone,
+              {
+                loading,
+                disabled,
+                onDrop,
+                edges,
+                dropzoneLabel,
+                dropzoneDescription,
+                dropzoneProps: {
+                  accept: ["image/*"],
+                  ...dropzoneProps,
+                  maxFiles: 1
+                }
+              }
+            ))),
+            src !== null && documentFile === null && (!croppedImage || showError) && (openInDialog ? /* @__PURE__ */ jsxs(Modal, { open: true, fullWidth: true, fullScreen: true, children: [
+              /* @__PURE__ */ jsx(ModalHeader, { onClose: handleCancel, children: /* @__PURE__ */ jsx(Heading, { as: "h4", children: "Crop Image" }) }),
+              /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsxs(Box, { pl: 2.5, pr: 2.5, pb: 2.5, children: [
+                /* @__PURE__ */ jsx(StyledEditor, { edges, showError, children: /* @__PURE__ */ jsx(
+                  ReactCrop,
+                  {
+                    crop,
+                    style: {
+                      width: "100%"
+                    },
+                    onChange: handleCropChange,
+                    onImageLoaded: handleImageLoaded,
+                    renderSelectionAddon: cropGuide,
+                    children: /* @__PURE__ */ jsx("img", { src, alt: "" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  CroppedImageInputActions,
+                  {
+                    handleCancel,
+                    cancelling,
+                    cancelButtonProps,
+                    handleImageSave,
+                    saving,
+                    saveButtonProps,
+                    disabled
+                  }
+                )
+              ] }) })
+            ] }) : /* @__PURE__ */ createElement(motion.div, { ...fade, key: "editor" }, /* @__PURE__ */ jsx(StyledEditor, { edges, showError, children: /* @__PURE__ */ jsx(
+              ReactCrop,
+              {
+                crop,
+                style: {
+                  width: "100%"
+                },
+                onChange: handleCropChange,
+                renderSelectionAddon: cropGuide,
+                children: /* @__PURE__ */ jsx("img", { src, alt: "", onLoad: handleImageLoaded })
+              }
+            ) })))
+          ] })
+        ] })
+      },
+      "form-control"
+    ),
+    (!openInDialog && src !== null && (!croppedImage || showError) || !openInDialog && showActions) && /* @__PURE__ */ jsx(
+      CroppedImageInputActions,
+      {
+        handleCancel,
+        cancelling,
+        cancelButtonProps,
+        handleImageSave,
+        saving,
+        saveButtonProps,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Confirmation,
+      {
+        open: confirmDelete,
+        onCancel: () => setConfirmDelete(false),
+        onConfirm: handleDelete,
+        message: "Are you sure you want to remove the attached image?"
+      }
+    )
+  ] });
+}
+CroppedImageInput.propTypes = {
+  /**
+   * The image quality of cropped
+   */
+  croppedImageQuality: PropTypes.number,
+  /**
+   * URL for an existing image already uploaded to this field
+   */
+  defaultValue: 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"]),
+  /**
+   * Ration crop selection e.g. 16 / 9
+   */
+  cropRatio: PropTypes.number,
+  /**
+   * Do something when user saves cropped image, received the base64 string
+   */
+  onSave: PropTypes.func,
+  /**
+   * Do something when user removes image
+   */
+  onDelete: PropTypes.func,
+  /**
+   * Do something when user requests cancel action
+   */
+  onCancel: PropTypes.func,
+  /**
+   * Pass through props for hidden input that holds the data url of the cropped image
+   */
+  inputProps: PropTypes.object,
+  /**
+   * The label content.
+   */
+  label: PropTypes.string,
+  /**
+   * The field name
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * 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"]),
+  /**
+   * Result from dropzone...
+   */
+  dropppedFile: PropTypes.any,
+  /**
+   * @ignore
+   */
+  cropGuide: PropTypes.any,
+  /**
+   * If `true`, always show cancel and save button
+   */
+  showActions: PropTypes.bool,
+  /**
+   * Props for save button
+   */
+  saveButtonProps: PropTypes.object,
+  /**
+   * Props for cancel button
+   */
+  cancelButtonProps: PropTypes.object,
+  /**
+   * Replace the dropzone with a button that opens a dialog
+   */
+  openInDialog: PropTypes.bool,
+  /**
+   * Fileviewer props
+   */
+  fileViewerProps: PropTypes.object
+};
+
+export { CroppedImageInput as default };