@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/AvatarCropDialog.js

@@ -0,0 +1,196 @@
+"use strict";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import ReactCrop from 'react-image-crop';
+import FormControl from './FormControl.js';
+import Button from './Button.js';
+import Confirmation from './Confirmation.js';
+import ModalActions from './ModalActions.js';
+import 'react-image-crop/dist/ReactCrop.css';
+import { StyledEditor } from './AvatarCropDialog.styled.js';
+
+function AvatarCropDialog({
+  helperText = "",
+  label = "",
+  showError = false,
+  errorMessage = "",
+  onSave = () => Promise.resolve(true),
+  onDelete = () => Promise.resolve(true),
+  droppedFile = null
+}) {
+  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
+  const [crop, setCrop] = useState({ aspect: 1, unit: "%", width: 100 });
+  const [originalImage, setOriginalImage] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [editorWidth, setEditorWidth] = useState("100%");
+  const [saving, setSaving] = useState(false);
+  const [cancelling, setCancelling] = useState(false);
+  const handleCancel = () => {
+    setCancelling(true);
+    onDelete().then(() => {
+      setOriginalImage(null);
+      setConfirmDelete(false);
+      setCancelling(false);
+    });
+  };
+  const handleCropChange = (newCrop) => setCrop(newCrop);
+  const handleImageLoaded = (image) => {
+    let { width } = image;
+    if (window.innerHeight * 0.7 < image.height) {
+      width = image.width * (window.innerHeight * 0.7 / image.height);
+    }
+    if (width < window.innerWidth * 0.7) {
+      setEditorWidth(`${width}px`);
+    }
+    const widthPercent = image.width < image.height ? 1 : image.height / image.width;
+    const heightPercent = image.width > image.height ? 1 : image.width / image.height;
+    const y = (1 - heightPercent) / 2;
+    const x = (1 - widthPercent) / 2;
+    const height = image.height * (width / image.width);
+    setCrop({
+      unit: "px",
+      width: width * widthPercent,
+      height: height * heightPercent,
+      x: width * x,
+      y: height * y,
+      aspect: 1
+    });
+    setOriginalImage(image);
+    return false;
+  };
+  const handleImageSave = () => {
+    if (originalImage && crop.width && crop.height) {
+      const canvas = document.createElement("canvas");
+      const scaleX = originalImage.naturalWidth / originalImage.width;
+      const scaleY = originalImage.naturalHeight / originalImage.height;
+      canvas.width = crop.width;
+      canvas.height = crop.height;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(
+        originalImage,
+        crop.x * scaleX,
+        crop.y * scaleY,
+        crop.width * scaleX,
+        crop.height * scaleY,
+        0,
+        0,
+        crop.width,
+        crop.height
+      );
+      return new Promise((resolve, reject) => {
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              console.error("Canvas is empty");
+              reject();
+            }
+            setSaving(true);
+            const reader = new FileReader();
+            reader.addEventListener("load", () => {
+              onSave(reader.result, blob).then(() => resolve());
+            });
+            reader.readAsDataURL(blob);
+          },
+          "image/jpeg",
+          0.6
+        );
+      });
+    }
+    return false;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        name: "avatar-crop-editor",
+        fullWidth: true,
+        label,
+        helperText,
+        showError,
+        errorMessage,
+        children: /* @__PURE__ */ jsx(StyledEditor, { showError, children: /* @__PURE__ */ jsx(
+          ReactCrop,
+          {
+            src: droppedFile,
+            crop,
+            style: {
+              width: editorWidth,
+              maxHeight: window.innerHeight * 0.7
+            },
+            circularCrop: true,
+            onChange: handleCropChange,
+            onImageLoaded: handleImageLoaded,
+            keepSelection: true
+          }
+        ) })
+      },
+      "form-control"
+    ),
+    /* @__PURE__ */ jsxs(ModalActions, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleCancel,
+          variant: "outlined",
+          loading: cancelling,
+          color: "primaryAlt",
+          fullWidth: !isNotMobile,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleImageSave,
+          loading: saving,
+          color: "primaryAlt",
+          fullWidth: !isNotMobile,
+          children: "Save"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Confirmation,
+      {
+        open: confirmDelete,
+        onCancel: () => setConfirmDelete(false),
+        onConfirm: handleCancel,
+        message: "Are you sure you want to remove the attached image?"
+      }
+    )
+  ] });
+}
+AvatarCropDialog.propTypes = {
+  /**
+   * 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,
+  /**
+   * Do something when user saves cropped image, received the base64 string
+   */
+  onSave: PropTypes.func,
+  /**
+   * Do something when user removes image
+   */
+  onDelete: PropTypes.func,
+  /**
+   * The label content.
+   */
+  label: PropTypes.string,
+  /**
+   * Result from dropzone...
+   */
+  droppedFile: PropTypes.any
+};
+
+export { AvatarCropDialog as default };

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

@@ -0,0 +1,19 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+
+const StyledEditor = styled("div")(({ showError, theme }) => ({
+  width: "100%",
+  padding: theme.spacing(6, 4),
+  backgroundImage: `linear-gradient(45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(-45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${theme.palette.grey[700]} 75%), linear-gradient(-45deg, transparent 75%, ${theme.palette.grey[700]} 75%)`,
+  backgroundSize: "20px 20px",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+  border: `1px solid ${showError ? theme.palette.error.main : theme.palette.primary.main}`,
+  borderRadius: theme.shape.borderRadius,
+  "& .ReactCrop": {
+    margin: "0 auto",
+    display: "block"
+  }
+}));
+
+export { StyledEditor };

package/dist/esm/components/AvatarInput.js

@@ -0,0 +1,211 @@
+"use strict";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import PersonIcon from '@mui/icons-material/Person';
+import WarningIcon from '@mui/icons-material/Warning';
+import { useDropzone } from 'react-dropzone';
+import Confirmation from './Confirmation.js';
+import Modal from './Modal.js';
+import ModalContent from './ModalContent.js';
+import ModalHeader from './ModalHeader.js';
+import Text from './Text.js';
+import AvatarCropDialog from './AvatarCropDialog.js';
+import { StyledRoot, StyledLinearProgress, StyledCircularProgress, StyledAvatarIcon, StyledAvatar, StyledAddIcon, StyledDeleteIcon } from './AvatarInput.styled.js';
+
+function AvatarInput({
+  disabled = false,
+  edges = "normal",
+  dropzoneLabel = "Upload file",
+  dropzoneDescription = "Drag and drop a file here, or click to select a file",
+  placeholder = "https://via.placeholder.com/500x300",
+  onSave = () => Promise.resolve(true),
+  onDelete = () => Promise.resolve(true),
+  value = "",
+  DropzoneIcon = null,
+  hasSelection = false,
+  ...rest
+}) {
+  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("sm"));
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [droppedFile, setDroppedFile] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [savedImage, setSavedImage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const onDrop = (acceptedFiles) => {
+    setLoading(true);
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      setDroppedFile(reader.result);
+      setOpen(true);
+      setLoading(false);
+    });
+    reader.readAsDataURL(acceptedFiles[0]);
+  };
+  const handleSave = (result, blob) => onSave(result, blob).then(() => {
+    setSavedImage(result);
+    setOpen(false);
+  }).catch((e) => console.error(e));
+  const handleDelete = () => onDelete().then(() => {
+    setDroppedFile(null);
+    setSavedImage("");
+    setConfirmDelete(false);
+    setOpen(false);
+  });
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    fileRejections
+  } = useDropzone({
+    onDrop,
+    disabled,
+    accept: "image/*",
+    maxFiles: 1
+  });
+  const hasErrors = fileRejections.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs(
+        StyledRoot,
+        {
+          disabled,
+          edges,
+          errors: hasErrors ? "yes" : "",
+          ...getRootProps(),
+          children: [
+            isDragActive && /* @__PURE__ */ jsx(StyledLinearProgress, { isDragReject }),
+            loading && !hasErrors && /* @__PURE__ */ jsx(StyledCircularProgress, {}),
+            /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+            /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, alignItems: "center", children: [
+              /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, sm: 3, md: 2, style: { textAlign: "center" }, children: [
+                /* @__PURE__ */ jsxs(StyledAvatarIcon, { children: [
+                  (() => {
+                    if (isDragReject) {
+                      return /* @__PURE__ */ jsx(WarningIcon, {});
+                    }
+                    if (isDragAccept) {
+                      return /* @__PURE__ */ jsx(CheckCircleIcon, {});
+                    }
+                    if (savedImage || value || placeholder) {
+                      return /* @__PURE__ */ jsx(StyledAvatar, { src: savedImage || value || placeholder });
+                    }
+                    if (DropzoneIcon) {
+                      return /* @__PURE__ */ jsx(DropzoneIcon, {});
+                    }
+                    return /* @__PURE__ */ jsx(PersonIcon, {});
+                  })(),
+                  !hasSelection && /* @__PURE__ */ jsx(StyledAddIcon, { children: /* @__PURE__ */ jsx(AddIcon, { style: { color: "inherit" } }) })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    align: "center",
+                    weight: "500",
+                    color: "textPrimary",
+                    noWrap: true,
+                    gutterBottom: false,
+                    children: isDragReject ? "Error!" : dropzoneLabel
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 8, md: 9, children: /* @__PURE__ */ jsx(Box, { pl: isNotMobile ? 5 : 0, children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  align: isNotMobile ? "left" : "center",
+                  weight: "500",
+                  color: "textPrimary",
+                  children: isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription
+                }
+              ) }) })
+            ] })
+          ]
+        }
+      ),
+      (savedImage || value) && // <ActionArea onClick={() => setConfirmDelete(true)}>
+      /* @__PURE__ */ jsx(StyledDeleteIcon, { children: /* @__PURE__ */ jsx(DeleteIcon, {}) })
+    ] }),
+    droppedFile && /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        open,
+        onClose: () => setOpen(false),
+        fullWidth: true,
+        maxWidth: "lg",
+        children: [
+          /* @__PURE__ */ jsx(ModalHeader, { onClose: () => setOpen(false), children: /* @__PURE__ */ jsx("span", { children: "\xA0" }) }),
+          /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsx(
+            AvatarCropDialog,
+            {
+              droppedFile,
+              ...rest,
+              onSave: handleSave,
+              onDelete: handleDelete
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Confirmation,
+      {
+        open: confirmDelete,
+        onCancel: () => setConfirmDelete(false),
+        onConfirm: handleDelete,
+        message: "Are you sure you want to remove the attached image?"
+      }
+    )
+  ] });
+}
+AvatarInput.propTypes = {
+  /**
+   * 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.any,
+  /**
+   * Icon displayed in the dropzone
+   */
+  DropzoneIcon: PropTypes.any,
+  /**
+   * URL for default/placeholder image.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * URL for current image.
+   */
+  value: PropTypes.string,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * Do something when user saves cropped image, received the base64 string
+   */
+  onSave: PropTypes.func,
+  /**
+   * Do something when user removes image
+   */
+  onDelete: PropTypes.func,
+  /**
+   * If `true`, represents the file(s) has been selected
+   */
+  hasSelection: PropTypes.bool
+};
+
+export { AvatarInput as default };

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

@@ -0,0 +1,143 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+import styled$1, { css } from 'styled-components';
+import LinearProgress from '@mui/material/LinearProgress';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+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 StyledRoot = styled(Box)(({ disabled, edges, errors, theme }) => ({
+  padding: "1rem 1.5rem 0.8rem 1.5rem",
+  marginBottom: "0.25rem",
+  color: theme.palette.text.primary,
+  position: "relative",
+  border: `2px dashed ${errors === "yes" ? theme.palette.error.main : theme.palette.primary.main}`,
+  background: disabled ? theme.palette.grey[300] : null,
+  opacity: disabled ? 0.5 : 1,
+  borderRadius: borderRadius(edges, theme),
+  "& img": {
+    width: "100%",
+    height: "auto",
+    display: "block"
+  },
+  "&:focus": {
+    border: `2px solid ${theme.palette.primary.main}`,
+    outline: "none",
+    background: hexToRgba(theme.palette.primary.main, 0.1)
+  },
+  "& .ReactCrop__crop-selection::before": {
+    content: "''"
+  }
+}));
+const StyledLinearProgress = 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 StyledCircularProgress = styled(CircularProgress)({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  marginTop: -20,
+  marginLeft: -20
+});
+const StyledAvatar = styled("div")(({ src, theme }) => ({
+  backgroundColor: theme.palette.grey.transparent,
+  backgroundImage: src ? `url(${src})` : null,
+  borderRadius: "50%",
+  overflow: "hidden",
+  backgroundSize: "cover",
+  backgroundPosition: "center",
+  position: "absolute",
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  height: "100%",
+  width: "100%"
+}));
+const StyledAvatarIcon = styled("div")(({ theme }) => ({
+  textAlign: "center",
+  display: "inline-block",
+  padding: 20,
+  marginBottom: 10,
+  height: 110,
+  width: 110,
+  position: "relative",
+  "& svg": {
+    width: "100%",
+    maxWidth: 150,
+    height: "auto",
+    color: theme.palette.grey.main,
+    display: "block"
+  }
+}));
+const StyledDeleteIcon = styled$1.span`
+  ${({ theme }) => css`
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    right: 25px;
+    z-index: 9;
+    background: transparent;
+    color: ${theme.palette.grey.main};
+    width: 48px;
+    height: 48px;
+    margin-top: -12px;
+    font-size: 20px;
+    transition: all 0.25s ease-in-out;
+    transform: translateY(-50%) scale(0.9);
+    box-shadow: ${theme.shadows[2]};
+    border-radius: 50%;
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+      transform: translateY(-50%) scale(1.05);
+      color: ${theme.palette.secondary.main};
+      box-shadow: ${theme.shadows[4]};
+    }
+  `}
+`;
+const StyledAddIcon = styled$1.span`
+  ${({ theme }) => css`
+    display: inline-flex;
+    width: 12px;
+    height: 12px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background: ${theme.palette.background.paper};
+    color: ${theme.palette.primaryAlt.main};
+    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
+    position: absolute;
+    right: 12px;
+    z-index: 2;
+    bottom: 8px;
+  `}
+`;
+
+export { StyledAddIcon, StyledAvatar, StyledAvatarIcon, StyledCircularProgress, StyledDeleteIcon, StyledLinearProgress, StyledRoot };

package/dist/esm/components/Badge.js

@@ -0,0 +1,79 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledBadge } from './Badge.styled.js';
+
+function Badge({
+  anchorOrigin = void 0,
+  badgeContent = " ",
+  color = "error",
+  invisible = false,
+  max = 99,
+  overlap = "circular",
+  showZero = false,
+  variant = "standard",
+  children,
+  ...rest
+}) {
+  const defaultAnchorOrigin = {
+    horizontal: "right",
+    vertical: "top"
+  };
+  const props = {
+    anchorOrigin: anchorOrigin || defaultAnchorOrigin,
+    badgeContent,
+    color,
+    invisible,
+    max,
+    overlap,
+    showZero,
+    variant,
+    ...rest
+  };
+  return /* @__PURE__ */ jsx(StyledBadge, { ...props, children });
+}
+Badge.propTypes = {
+  /**
+   * The anchor of the badge.
+   */
+  anchorOrigin: PropTypes.shape({
+    horizontal: PropTypes.oneOf(["left", "right"]),
+    vertical: PropTypes.oneOf(["bottom", "top"])
+  }),
+  /**
+   * The content rendered within the badge.
+   */
+  badgeContent: PropTypes.node,
+  /**
+   * The badge will be added relative to this node.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The color of the component. It supports those theme colors
+   * that make sense for this component.
+   */
+  color: PropTypes.oneOf(["default", "error", "primary", "secondary"]),
+  /**
+   * If `true`, the badge will be invisible.
+   */
+  invisible: PropTypes.bool,
+  /**
+   * Max count to show.
+   */
+  max: PropTypes.number,
+  /**
+   * The shape of the Badge.
+   */
+  overlap: PropTypes.oneOf(["circular", "rectangular"]),
+  /**
+   * Controls whether the badge is hidden when badgeContent is zero.
+   */
+  showZero: PropTypes.bool,
+  /**
+   * The shape of the Badge.
+   */
+  variant: PropTypes.oneOf(["dot", "standard"])
+};
+
+export { Badge as default };

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

@@ -0,0 +1,21 @@
+"use strict";
+import styled, { css } from 'styled-components';
+import MuiBadge from '@mui/material/Badge';
+
+const StyledBadge = styled(MuiBadge)`
+  ${({ variant }) => css`
+    ${variant !== "dot" && css`
+      & .MuiBadge-badge {
+        min-width: 14px;
+        height: 14px;
+        border: 1px solid #fff;
+        padding: 0 3px;
+        border-radius: 50%;
+        font-size: 8px;
+        font-weight: 700;
+      }
+    `}
+  `}
+`;
+
+export { StyledBadge };