@tenancy.nz/ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,37 @@
+"use strict";
+import styled, { css } from 'styled-components';
+
+const colour = (color, theme) => {
+  const colors = {
+    error: theme.palette.error.main,
+    inherit: "inherit",
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    textPrimary: theme.palette.text.primary,
+    textSecondary: theme.palette.text.secondary
+  };
+  if (colors[color]) {
+    return colors[color];
+  }
+  return colors.inherit;
+};
+const StyledLink = styled.a`
+  ${({ color, underline, theme }) => css`
+    font-family: ${theme.typography.fontFamily};
+    font-weight: 500;
+    text-decoration: none;
+    ${underline === "hover" && css`
+      &:hover {
+        text-decoration: underline;
+      }
+    `}
+    ${underline === "always" && css`
+      text-decoration: underline;
+    `}
+    ${color && css`
+      color: ${colour(color, theme)};
+    `}
+  `}
+`;
+
+export { StyledLink };

package/dist/esm/components/Media.js

@@ -0,0 +1,40 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledMediaEl, StyledMediaSkeleton, StyledMedia } from './Media.styled.js';
+
+function Media({ as = "div", skeleton = false, src, title = "" }) {
+  return /* @__PURE__ */ jsxs(StyledMediaEl, { children: [
+    skeleton && /* @__PURE__ */ jsx(StyledMediaSkeleton, {}),
+    /* @__PURE__ */ jsx(
+      StyledMedia,
+      {
+        as,
+        src: !skeleton ? src : "",
+        title,
+        alt: as === "img" ? title : ""
+      }
+    )
+  ] });
+}
+Media.propTypes = {
+  /**
+   * Which image node to render as
+   */
+  as: PropTypes.oneOf(["div", "img"]),
+  /**
+   * Specifies the path to the image
+   */
+  src: PropTypes.string.isRequired,
+  /**
+   * If `true`, shows component in loading state
+   */
+  skeleton: PropTypes.bool,
+  /**
+   * Specifies an title & alternate text for an image
+   */
+  title: PropTypes.string
+};
+
+export { Media as default };

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

@@ -0,0 +1,42 @@
+"use strict";
+import styled, { css } from 'styled-components';
+import { inlineGlow } from '../utils/animations.js';
+
+const StyledMediaEl = styled.div`
+  ${({ theme }) => css`
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: ${theme.palette.grey[200]};
+  `}
+`;
+const StyledMediaSkeleton = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+
+  z-index: 1;
+  ${inlineGlow}
+`;
+const StyledMedia = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  ${({ as, src }) => css`
+    ${as !== "img" && css`
+      display: block;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-image: url(${src});
+    `}
+
+    ${as === "img" && css`
+      object-fit: cover;
+    `}
+  `}
+`;
+
+export { StyledMedia, StyledMediaEl, StyledMediaSkeleton };

package/dist/esm/components/Modal.js

@@ -0,0 +1,52 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import BaseModal from './BaseModal.js';
+import Heading from './Heading.js';
+import LinearProgress from './LinearProgress.js';
+import ModalActions from './ModalActions.js';
+import ModalContent from './ModalContent.js';
+import ModalHeader from './ModalHeader.js';
+import Skeleton from './Skeleton.js';
+import { isString } from '../utils/helpers/boolean.js';
+
+function Modal({
+  actions = void 0,
+  content = void 0,
+  children = void 0,
+  heading = void 0,
+  loading = false,
+  onClose = void 0,
+  ...rest
+}) {
+  const handleClose = (e, action) => {
+    if (action === "backdropClick") {
+      return;
+    }
+    if (onClose) {
+      onClose(e);
+    }
+  };
+  const header = isString(heading) ? /* @__PURE__ */ jsx(Heading, { as: "h3", gutterBottom: false, children: heading }) : heading;
+  return /* @__PURE__ */ jsxs(
+    BaseModal,
+    {
+      ...rest,
+      onClose: handleClose,
+      slotProps: { paper: { sx: { padding: { xs: "16px", md: "32px" } } } },
+      children: [
+        heading && /* @__PURE__ */ jsxs(ModalHeader, { onClose: handleClose, children: [
+          loading && /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: 20, width: 250 }),
+          !loading && header
+        ] }),
+        !loading && /* @__PURE__ */ jsxs(ModalContent, { disableGutter: true, children: [
+          children,
+          content
+        ] }),
+        actions && /* @__PURE__ */ jsx(ModalActions, { sx: { marginTop: { xs: "20px", md: "40px" } }, children: actions }),
+        loading && /* @__PURE__ */ jsx(ModalContent, { disableGutter: true, children: /* @__PURE__ */ jsx(LinearProgress, {}) })
+      ]
+    }
+  );
+}
+
+export { Modal as default };

package/dist/esm/components/ModalActions.js

@@ -0,0 +1,19 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import DialogActions from '@mui/material/DialogActions';
+
+function ModalActions({
+  align = "flex-end",
+  children,
+  gutter = true,
+  sx = {}
+}) {
+  const styles = {
+    justifyContent: align,
+    ...gutter && { gap: "8px" },
+    ...sx
+  };
+  return /* @__PURE__ */ jsx(DialogActions, { disableSpacing: !gutter, sx: styles, children });
+}
+
+export { ModalActions as default };

package/dist/esm/components/ModalContent.js

@@ -0,0 +1,28 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import PropTypes from 'prop-types';
+import DialogContent from '@mui/material/DialogContent';
+
+function ModalContent({
+  children,
+  disableGutter = false,
+  sx = {}
+}) {
+  const styles = {
+    ...disableGutter && { padding: 0 },
+    ...sx
+  };
+  return /* @__PURE__ */ jsx(DialogContent, { dividers: false, sx: styles, children });
+}
+ModalContent.propTypes = {
+  /**
+   * Contents to display inside dialog
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * If `true`, will not add any padding.
+   */
+  disableGutter: PropTypes.bool
+};
+
+export { ModalContent as default };

package/dist/esm/components/ModalHeader.js

@@ -0,0 +1,20 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Close } from '@mui/icons-material';
+import Box from './Box.js';
+import IconButton from './IconButton.js';
+import StyledModalHeader from './ModalHeader.styled.js';
+
+function ModalHeader({
+  children,
+  closeIcon = void 0,
+  onClose = void 0,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(StyledModalHeader, { ...rest, children: [
+    /* @__PURE__ */ jsx(Box, { overflow: "hidden", width: "100%", marginRight: "8px", marginLeft: "0px", children }),
+    onClose && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", onClick: onClose, children: !closeIcon ? /* @__PURE__ */ jsx(Close, {}) : closeIcon }) })
+  ] });
+}
+
+export { ModalHeader as default };

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

@@ -0,0 +1,25 @@
+"use strict";
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const StyledModalHeader = styled(
+  "div"
+)`
+  ${({ disableGap, theme, transparent }) => css`
+    display: flex;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    background: ${transparent ? "transparent" : getObjectProp(theme, "vars.palette.background.paper")};
+    color: ${getObjectProp(theme, "vars.palette.text.secondary")};
+
+    ${!disableGap && css`
+      margin-bottom: 8px;
+    `};
+  `}
+`;
+
+export { StyledModalHeader as default };

package/dist/esm/components/Nameplate.js

@@ -0,0 +1,106 @@
+"use strict";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import Skeleton from '@mui/material/Skeleton';
+import MuiContainer from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Heading from './Heading.js';
+import Text from './Text.js';
+import { StyledWrapper, StyledImgWrapper, StyledImg, StyledImgText } from './Nameplate.styled.js';
+
+function Nameplate({
+  heading = "",
+  logo = "",
+  skeleton = false,
+  subHeading = "",
+  title = "",
+  ...rest
+}) {
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  return /* @__PURE__ */ jsx(StyledWrapper, { children: /* @__PURE__ */ jsx(MuiContainer, { maxWidth: "lg", ...rest, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        flexWrap: "nowrap",
+        alignItems: "center",
+        px: isMobile ? 2 : 0,
+        py: 4
+      },
+      children: skeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { style: { flexGrow: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              width: isMobile ? "80%" : "40%",
+              height: isMobile ? 22 : 30
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              width: isMobile ? "60%" : "30%",
+              height: isMobile ? 22 : 30
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 100, width: 100 })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          title && /* @__PURE__ */ jsxs(Text, { color: "textSecondary", variant: "body1", weight: "600", children: [
+            isMobile && /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx("small", { children: title }) }),
+            !isMobile && title
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Heading,
+            {
+              as: isMobile ? "h5" : "h3",
+              weight: "400",
+              color: "textPrimary",
+              gutterBottom: false,
+              children: [
+                heading,
+                subHeading && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("br", {}),
+                  " ",
+                  subHeading
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(StyledImgWrapper, { children: [
+          logo && /* @__PURE__ */ jsx(StyledImg, { src: logo, alt: heading }),
+          !logo && heading && /* @__PURE__ */ jsx(StyledImgText, { children: heading[0].toUpperCase() })
+        ] })
+      ] })
+    }
+  ) }) });
+}
+Nameplate.propTypes = {
+  /**
+   * Heading
+   */
+  heading: PropTypes.string,
+  /**
+   * Sub Heading
+   */
+  subHeading: PropTypes.string,
+  /**
+   * Show skeleton layout
+   */
+  skeleton: PropTypes.bool,
+  /**
+   * URL for the property manager logo
+   */
+  logo: PropTypes.string,
+  /**
+   * Text displayed before heading
+   */
+  title: PropTypes.string
+};
+
+export { Nameplate as default };

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

@@ -0,0 +1,44 @@
+"use strict";
+import styled$1, { css } from 'styled-components';
+import { styled } from '@mui/material/styles';
+import { hexToRgba } from '../utils/colors.js';
+
+const StyledWrapper = styled("div")(({ theme }) => ({
+  background: "#fff",
+  borderBottom: `1px solid ${hexToRgba(theme.palette.default.main, 0.4)}`
+}));
+const StyledImgWrapper = styled$1.div`
+  ${({ theme }) => css`
+    display: flex;
+    overflow: hidden;
+    margin-left: 0.5em;
+    flex-basis: 150px;
+    justify-content: flex-end;
+    align-items: center;
+    height: 80px;
+
+    @media screen and (min-width: ${theme.breakpoints.md}px) {
+      margin-left: 1em;
+      flex-basis: 200px;
+      height: 100px;
+    }
+  `}
+`;
+const StyledImg = styled$1.img`
+  max-width: 100%;
+  max-height: 100%;
+`;
+const StyledImgText = styled$1.div`
+  ${({ theme }) => css`
+    width: 100%;
+    height: 100%;
+    background: ${theme.palette.grey[400]};
+    color: ${theme.palette.background.paper};
+    font-size: ${theme.typography.size.scale(9)};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `}
+`;
+
+export { StyledImg, StyledImgText, StyledImgWrapper, StyledWrapper };

package/dist/esm/components/Pagination.js

@@ -0,0 +1,143 @@
+"use strict";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import uuid from 'react-uuid';
+import usePagination from '@mui/material/usePagination';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { StyledList, StyledListItem, StyledButton } from './Pagination.styled.js';
+
+const getLabel = (type) => {
+  if (type === "first") {
+    return "First";
+  }
+  if (type === "last") {
+    return "Last";
+  }
+  if (type === "previous") {
+    return "Prev";
+  }
+  if (type === "next") {
+    return "Next";
+  }
+  if (type === "start-ellipsis" || type === "end-ellipsis") {
+    return /* @__PURE__ */ jsx(MoreHorizIcon, { fontSize: "inherit" });
+  }
+  return null;
+};
+function Pagination({
+  boundaryCount = 1,
+  color = "textPrimary",
+  count = 1,
+  defaultPage = 1,
+  disabled = false,
+  onChange = void 0,
+  shape = "round",
+  showFirstLastButtons = false,
+  showNexPrevButtons = true,
+  siblingCount = 1,
+  size = "large",
+  ...others
+}) {
+  const rest = {
+    boundaryCount,
+    color,
+    count,
+    defaultPage,
+    disabled,
+    onChange,
+    shape,
+    showFirstLastButtons,
+    showNexPrevButtons,
+    siblingCount,
+    size,
+    ...others
+  };
+  const { items } = usePagination({
+    ...rest,
+    hideNextButton: !showNexPrevButtons,
+    hidePrevButton: !showNexPrevButtons,
+    showFirstButton: showFirstLastButtons,
+    showLastButton: showFirstLastButtons
+  });
+  return /* @__PURE__ */ jsx(StyledList, { children: items.map((item) => /* @__PURE__ */ jsx(StyledListItem, { children: /* @__PURE__ */ jsxs(
+    StyledButton,
+    {
+      color,
+      shape,
+      size,
+      type: item.type,
+      ...item,
+      children: [
+        item.type !== "page" && getLabel(item.type),
+        item.type === "page" && item.page
+      ]
+    }
+  ) }, uuid(item))) });
+}
+Pagination.propTypes = {
+  /**
+   * Number of always visible pages at the beginning and end.
+   */
+  boundaryCount: PropTypes.number,
+  /**
+   * The color of the component. It supports those theme
+   * colors that make sense for this component.
+   */
+  color: PropTypes.oneOf([
+    "default",
+    "primary",
+    "primaryAlt",
+    "secondary",
+    "secondaryAlt",
+    "textPrimary",
+    "textSecondary",
+    "tertiary",
+    "error",
+    "warning",
+    "success",
+    "info"
+  ]),
+  /**
+   * The total number of pages.
+   */
+  count: PropTypes.number,
+  /**
+   * The page selected by default when the component is uncontrolled.
+   */
+  defaultPage: PropTypes.number,
+  /**
+   * If `true`, the pagination component will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Callback fired when the page is changed.
+   */
+  onChange: PropTypes.func,
+  /**
+   * The current page.
+   */
+  page: PropTypes.number.isRequired,
+  /**
+   * The shape of the pagination items.
+   */
+  shape: PropTypes.oneOf(["round", "rounded"]),
+  /**
+   * If `true`, will show the first & last page buttons.
+   */
+  showFirstLastButtons: PropTypes.bool,
+  /**
+   * If `true`, will show the next & prev page buttons.
+   */
+  showNexPrevButtons: PropTypes.bool,
+  /**
+   * Number of always visible pages before and after the current page.
+   */
+  siblingCount: PropTypes.number,
+  /**
+   * The size of the pagination component.
+   */
+  size: PropTypes.oneOf(["large", "small"])
+};
+
+export { Pagination as default };

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

@@ -0,0 +1,79 @@
+"use strict";
+import styled, { css } from 'styled-components';
+
+const mapColors = (color, theme) => {
+  if (color === "textPrimary") {
+    return theme.palette.text.primary;
+  }
+  if (color === "textSecondary") {
+    return theme.palette.text.secondary;
+  }
+  if (color !== "textPrimary" && color !== "textSecondary") {
+    return theme.palette[color].main;
+  }
+  return "inherit";
+};
+const StyledList = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+`;
+const StyledListItem = styled.li`
+  margin: 0 3px;
+`;
+const StyledButton = styled.button`
+  ${({ color, disabled, selected, shape, size, theme, type }) => css`
+    background: transparent;
+    border: none;
+    box-sizing: border-box;
+    color: ${mapColors(color, theme)};
+    cursor: pointer;
+    font-family: ${theme.typography.fontFamily};
+    font-weight: 400;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+
+    ${size === "small" && css`
+      height: 28px;
+      min-width: 28px;
+      font-size: ${theme.typography.size.small};
+    `}
+
+    ${size === "large" && css`
+      height: 32px;
+      min-width: 32px;
+      font-size: ${theme.typography.size.large};
+    `}
+
+    ${disabled && css`
+      opacity: 0.38;
+      pointer-events: none;
+      cursor: default;
+    `}
+
+    ${shape === "round" && css`
+      border-radius: 99999px;
+    `}
+
+    ${shape === "rounded" && css`
+      border-radius: 4px;
+    `}
+
+    ${["end-ellipsis", "start-ellipsis"].includes(type) && css`
+      svg {
+        vertical-align: bottom;
+      }
+    `}
+
+    ${selected && css`
+      font-weight: 600;
+      border: 1px solid currentColor;
+    `}
+  `}
+`;
+
+export { StyledButton, StyledList, StyledListItem };

package/dist/esm/components/Paper.js

@@ -0,0 +1,30 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import StyledPaper from './Paper.styled.js';
+
+function Paper({
+  children,
+  elevate = true,
+  fill = false,
+  inset = "none",
+  outlined = false,
+  overflow = true,
+  rounded = true,
+  sx = {}
+}) {
+  return /* @__PURE__ */ jsx(
+    StyledPaper,
+    {
+      elevate: outlined ? false : elevate,
+      fill,
+      inset,
+      outlined,
+      rounded,
+      noOverflow: !overflow,
+      sx,
+      children
+    }
+  );
+}
+
+export { Paper as default };