@tenancy.nz/ui 1.0.0 → 1.0.1

package/dist/cjs/components/AvatarInput.cjs

@@ -0,0 +1,215 @@
+"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 Box = require('@mui/material/Box');
+var Grid = require('@mui/material/Grid');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var CheckCircleIcon = require('@mui/icons-material/CheckCircle');
+var AddIcon = require('@mui/icons-material/Add');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var PersonIcon = require('@mui/icons-material/Person');
+var WarningIcon = require('@mui/icons-material/Warning');
+var reactDropzone = require('react-dropzone');
+var Confirmation = require('./Confirmation.cjs');
+var Modal = require('./Modal.cjs');
+var ModalContent = require('./ModalContent.cjs');
+var ModalHeader = require('./ModalHeader.cjs');
+var Text = require('./Text.cjs');
+var AvatarCropDialog = require('./AvatarCropDialog.cjs');
+var AvatarInput_styled = require('./AvatarInput.styled.cjs');
+
+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] = React.useState(false);
+  const [droppedFile, setDroppedFile] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const [savedImage, setSavedImage] = React.useState("");
+  const [loading, setLoading] = React.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
+  } = reactDropzone.useDropzone({
+    onDrop,
+    disabled,
+    accept: "image/*",
+    maxFiles: 1
+  });
+  const hasErrors = fileRejections.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        AvatarInput_styled.StyledRoot,
+        {
+          disabled,
+          edges,
+          errors: hasErrors ? "yes" : "",
+          ...getRootProps(),
+          children: [
+            isDragActive && /* @__PURE__ */ jsxRuntime.jsx(AvatarInput_styled.StyledLinearProgress, { isDragReject }),
+            loading && !hasErrors && /* @__PURE__ */ jsxRuntime.jsx(AvatarInput_styled.StyledCircularProgress, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Grid, { container: true, spacing: 5, alignItems: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Grid, { item: true, xs: 12, sm: 3, md: 2, style: { textAlign: "center" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(AvatarInput_styled.StyledAvatarIcon, { children: [
+                  (() => {
+                    if (isDragReject) {
+                      return /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, {});
+                    }
+                    if (isDragAccept) {
+                      return /* @__PURE__ */ jsxRuntime.jsx(CheckCircleIcon, {});
+                    }
+                    if (savedImage || value || placeholder) {
+                      return /* @__PURE__ */ jsxRuntime.jsx(AvatarInput_styled.StyledAvatar, { src: savedImage || value || placeholder });
+                    }
+                    if (DropzoneIcon) {
+                      return /* @__PURE__ */ jsxRuntime.jsx(DropzoneIcon, {});
+                    }
+                    return /* @__PURE__ */ jsxRuntime.jsx(PersonIcon, {});
+                  })(),
+                  !hasSelection && /* @__PURE__ */ jsxRuntime.jsx(AvatarInput_styled.StyledAddIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { style: { color: "inherit" } }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Text.default,
+                  {
+                    align: "center",
+                    weight: "500",
+                    color: "textPrimary",
+                    noWrap: true,
+                    gutterBottom: false,
+                    children: isDragReject ? "Error!" : dropzoneLabel
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Grid, { item: true, xs: 12, sm: 8, md: 9, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { pl: isNotMobile ? 5 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+                Text.default,
+                {
+                  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__ */ jsxRuntime.jsx(AvatarInput_styled.StyledDeleteIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {}) })
+    ] }),
+    droppedFile && /* @__PURE__ */ jsxRuntime.jsxs(
+      Modal.default,
+      {
+        open,
+        onClose: () => setOpen(false),
+        fullWidth: true,
+        maxWidth: "lg",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalHeader.default, { onClose: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xA0" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ModalContent.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            AvatarCropDialog.default,
+            {
+              droppedFile,
+              ...rest,
+              onSave: handleSave,
+              onDelete: handleDelete
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Confirmation.default,
+      {
+        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
+};
+
+exports.default = AvatarInput;

package/dist/cjs/components/AvatarInput.styled.cjs

@@ -0,0 +1,151 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+var styled = require('styled-components');
+var LinearProgress = require('@mui/material/LinearProgress');
+var Box = require('@mui/material/Box');
+var CircularProgress = require('@mui/material/CircularProgress');
+var colors = require('../utils/colors.cjs');
+
+const borderRadius = (edges, theme) => {
+  switch (edges) {
+    case "rounded":
+      return 99;
+    case "sharp":
+      return 0;
+    default:
+      return theme.shape.borderRadius;
+  }
+};
+const StyledRoot = styles.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: colors.hexToRgba(theme.palette.primary.main, 0.1)
+  },
+  "& .ReactCrop__crop-selection::before": {
+    content: "''"
+  }
+}));
+const StyledLinearProgress = styles.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: colors.mixColors(
+        isDragReject ? theme.palette.error.main : theme.palette.primary.main,
+        "#ffffff",
+        60
+      )
+    }
+  })
+);
+const StyledCircularProgress = styles.styled(CircularProgress)({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  marginTop: -20,
+  marginLeft: -20
+});
+const StyledAvatar = styles.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 = styles.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.span`
+  ${({ theme }) => styled.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.span`
+  ${({ theme }) => styled.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;
+  `}
+`;
+
+exports.StyledAddIcon = StyledAddIcon;
+exports.StyledAvatar = StyledAvatar;
+exports.StyledAvatarIcon = StyledAvatarIcon;
+exports.StyledCircularProgress = StyledCircularProgress;
+exports.StyledDeleteIcon = StyledDeleteIcon;
+exports.StyledLinearProgress = StyledLinearProgress;
+exports.StyledRoot = StyledRoot;

package/dist/cjs/components/Badge.cjs

@@ -0,0 +1,83 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Badge_styled = require('./Badge.styled.cjs');
+
+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__ */ jsxRuntime.jsx(Badge_styled.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"])
+};
+
+exports.default = Badge;

package/dist/cjs/components/Badge.styled.cjs

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