@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/Paper.styled.cjs

@@ -0,0 +1,63 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var Box = require('@mui/material/Box');
+var styles = require('@mui/material/styles');
+var object = require('../utils/helpers/object.cjs');
+
+const getPadding = (inset) => {
+  if (typeof inset === "number") {
+    return `${inset}px`;
+  }
+  if (inset === "none") {
+    return "0px";
+  }
+  if (inset === "small") {
+    return "8px";
+  }
+  if (inset === "medium") {
+    return "16px";
+  }
+  if (inset === "large") {
+    return "24px";
+  }
+  if (inset === "xlarge") {
+    return "32px";
+  }
+  return `${inset}`;
+};
+const StyledPaper = styles.styled(Box)`
+  ${({ elevate, fill, inset, noOverflow, outlined, rounded, theme }) => react.css`
+    background-color: ${object.getObjectProp(theme, "vars.palette.background.paper")};
+    font-family: ${object.getObjectProp(theme, "typography.fontFamily")};
+    padding: ${getPadding(inset)};
+
+    ${elevate && !outlined && react.css`
+      border: none;
+      box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1);
+    `}
+
+    ${noOverflow && react.css`
+      overflow: hidden;
+    `}
+
+    ${outlined && react.css`
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-shadow: none;
+    `}
+
+    ${rounded && react.css`
+      border-radius: 8px;
+    `}
+
+     ${fill && react.css`
+      height: 100%;
+      width: 100%;
+    `}
+  `};
+`;
+
+exports.default = StyledPaper;

package/dist/cjs/components/Popper.cjs

@@ -0,0 +1,64 @@
+"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 MuiPopper = require('@mui/material/Popper');
+var MuiFade = require('@mui/material/Fade');
+var MuiPaper = require('@mui/material/Paper');
+
+function Popper({
+  children,
+  anchorEl = null,
+  open = false,
+  disablePortal = false,
+  placement = "bottom",
+  ...others
+}, ref) {
+  const rest = { anchorEl, open, disablePortal, placement, ...others };
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiPopper, { ...rest, transition: true, ref, style: { zIndex: 9999 }, children: ({ TransitionProps }) => /* @__PURE__ */ jsxRuntime.jsx(MuiFade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ jsxRuntime.jsx(MuiPaper, { elevation: 3, style: { margin: 5 }, children }) }) });
+}
+Popper.propTypes = {
+  /**
+   * An HTML element, virtualElement, or a function which is used to set the position of the popper.
+   */
+  anchorEl: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Popper render function or node.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   */
+  disablePortal: PropTypes.bool,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool,
+  /**
+   * Placement of popper
+   */
+  placement: PropTypes.oneOf([
+    "auto-end",
+    "auto-start",
+    "auto",
+    "bottom-end",
+    "bottom-start",
+    "bottom",
+    "left-end",
+    "left-start",
+    "left",
+    "right-end",
+    "right-start",
+    "right",
+    "top-end",
+    "top-start",
+    "top"
+  ])
+};
+var Popper$1 = React.forwardRef(Popper);
+
+exports.default = Popper$1;

package/dist/cjs/components/PropertyCard.cjs

@@ -0,0 +1,222 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var HotelIcon = require('@mui/icons-material/Hotel');
+var DirectionsCarIcon = require('@mui/icons-material/DirectionsCar');
+var BathtubIcon = require('@mui/icons-material/Bathtub');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var Box = require('./Box.cjs');
+var Divider = require('./Divider.cjs');
+var Heading = require('./Heading.cjs');
+var Media = require('./Media.cjs');
+var Paper = require('./Paper.cjs');
+var Skeleton = require('./Skeleton.cjs');
+var Text = require('./Text.cjs');
+var PropertyCard_styled = require('./PropertyCard.styled.cjs');
+var array = require('../utils/helpers/array.cjs');
+var boolean = require('../utils/helpers/boolean.cjs');
+require('mime/lite');
+require('../utils/helpers/time.cjs');
+
+function PropertyCard({
+  bedrooms = 0,
+  bathrooms = 0,
+  elevation = true,
+  footerContent = void 0,
+  onView = null,
+  photo = "",
+  parkingSpaces = 0,
+  rentAmount = 0,
+  rentFrequency = "weekly",
+  skeleton = false,
+  unit = "",
+  streetNumber = "",
+  streetName = "",
+  suburb = "",
+  city = ""
+}) {
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const abbreviatedRentFrequency = () => {
+    switch (rentFrequency) {
+      case "weekly":
+        return "pw";
+      case "monthly":
+        return "pm";
+      case "daily":
+        return "day";
+      case "fortnightly":
+        return "fortn";
+      default:
+        return "pw";
+    }
+  };
+  const address1 = array.implode(" ", [
+    array.implode("/", [unit, streetNumber]),
+    streetName
+  ]);
+  const address2 = array.implode(", ", [suburb, city]);
+  const address = `${address1} ${address2}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(Paper.default, { rounded: true, elevate: elevation, fill: !isMobile, children: /* @__PURE__ */ jsxRuntime.jsxs(PropertyCard_styled.StyledContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PropertyCard_styled.StyledImg, { children: /* @__PURE__ */ jsxRuntime.jsx(Media.default, { skeleton, src: photo, title: address }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(PropertyCard_styled.StyledDetails, { children: [
+      !skeleton && /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h3", gutterBottom: false, children: address1 }),
+      skeleton && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.default, { width: "75%", height: 30 }),
+      !skeleton && /* @__PURE__ */ jsxRuntime.jsx(Text.default, { variant: "subtitle1", weight: "500", color: "textPrimary", children: address2 }),
+      skeleton && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.default, { width: "65%", height: 30 }),
+      /* @__PURE__ */ jsxRuntime.jsx(Divider.default, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Box.default,
+        {
+          display: "flex",
+          width: "100%",
+          align: "center",
+          marginBottom: !skeleton ? "20px" : "-13px",
+          children: [
+            !skeleton && /* @__PURE__ */ jsxRuntime.jsxs(
+              Text.default,
+              {
+                as: "span",
+                weight: "600",
+                variant: "inherit",
+                color: "textPrimary",
+                children: [
+                  "$",
+                  rentAmount,
+                  abbreviatedRentFrequency()
+                ]
+              }
+            ),
+            skeleton && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.default, { width: 60, height: 27 }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PropertyCard_styled.StyledIcon, { children: [
+              !skeleton && !boolean.isEmpty(bedrooms) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Text.default,
+                  {
+                    as: "span",
+                    weight: "600",
+                    variant: "inherit",
+                    color: "textPrimary",
+                    children: bedrooms
+                  }
+                ),
+                "\xA0",
+                /* @__PURE__ */ jsxRuntime.jsx(HotelIcon, {})
+              ] }),
+              skeleton && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.default, { width: 40, height: 27 })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PropertyCard_styled.StyledIcon, { children: [
+              !skeleton && !boolean.isEmpty(bathrooms) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Text.default,
+                  {
+                    as: "span",
+                    weight: "600",
+                    variant: "inherit",
+                    color: "textPrimary",
+                    children: bathrooms
+                  }
+                ),
+                "\xA0",
+                /* @__PURE__ */ jsxRuntime.jsx(BathtubIcon, {})
+              ] }),
+              skeleton && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.default, { width: 40, height: 27 })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PropertyCard_styled.StyledIcon, { children: [
+              !skeleton && !boolean.isEmpty(parkingSpaces) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Text.default,
+                  {
+                    as: "span",
+                    weight: "600",
+                    variant: "inherit",
+                    color: "textPrimary",
+                    children: parkingSpaces
+                  }
+                ),
+                "\xA0",
+                /* @__PURE__ */ jsxRuntime.jsx(DirectionsCarIcon, {})
+              ] }),
+              skeleton && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.default, { width: 40, height: 27 })
+            ] })
+          ]
+        }
+      ),
+      footerContent && /* @__PURE__ */ jsxRuntime.jsx(Box.default, { display: "flex", justify: "flex-end", align: "center", children: footerContent })
+    ] })
+  ] }) });
+}
+PropertyCard.propTypes = {
+  /**
+   * URL for the property photo
+   */
+  photo: PropTypes.string,
+  /**
+   * The number of bedrooms
+   */
+  bedrooms: PropTypes.number,
+  /**
+   * The number of bathrooms
+   */
+  bathrooms: PropTypes.number,
+  /**
+   * Shadow depth
+   */
+  elevation: PropTypes.bool,
+  /**
+   * Content to display in footer, action buttons etc.
+   */
+  footerContent: PropTypes.node,
+  /**
+   * View click handler
+   */
+  onView: PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(null)]),
+  /**
+   * The number of vehicles that can be parked
+   */
+  parkingSpaces: PropTypes.number,
+  /**
+   * Dollar amount for rent
+   */
+  rentAmount: PropTypes.number,
+  /**
+   * Dollar amount for rent
+   */
+  rentFrequency: PropTypes.oneOf([
+    "weekly",
+    "monthly",
+    "fortnightly",
+    "daily",
+    ""
+  ]),
+  /**
+   * Show skeleton layout
+   */
+  skeleton: PropTypes.bool,
+  /**
+   * Unit number in address
+   */
+  unit: PropTypes.string,
+  /**
+   * Street number in address
+   */
+  streetNumber: PropTypes.string,
+  /**
+   * Street name in address
+   */
+  streetName: PropTypes.string,
+  /**
+   * Address suburb
+   */
+  suburb: PropTypes.string,
+  /**
+   * Address city
+   */
+  city: PropTypes.string
+};
+
+exports.default = PropertyCard;

package/dist/cjs/components/PropertyCard.styled.cjs

@@ -0,0 +1,67 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+
+const StyledContainer = styled.div`
+  ${({ theme }) => styled.css`
+    display: flex;
+    @media screen and (max-width: 767px) {
+      flex-direction: column;
+      padding: ${theme.spacing(3)};
+    }
+    @media screen and (min-width: 768px) {
+      height: 100%;
+    }
+  `}}
+`;
+const StyledImg = styled.div`
+ ${({ theme }) => styled.css`
+   background: ${theme.palette.grey[200]};
+   overflow: hidden;
+
+   @media screen and (max-width: 767px) {
+     width: 100%;
+     height: 142px;
+   }
+
+   @media screen and (min-width: 768px) {
+     width: 182px;
+     flex: 0 0 182px;
+     min-height: 162px;
+
+     border-top-left-radius: ${theme.shape.borderRadius * 2}px;
+     border-bottom-left-radius: ${theme.shape.borderRadius * 2}px;
+   }
+ `}}
+
+`;
+const StyledDetails = styled.div`
+  ${({ theme }) => styled.css`
+    flex-grow: 1;
+
+    @media screen and (max-width: 767px) {
+      padding: ${theme.spacing(3, 0, 1, 0)};
+    }
+
+    @media screen and (min-width: 768px) {
+      display: flex;
+      flex-direction: column;
+      padding: ${theme.spacing(3, 5)};
+    }
+  `}}
+`;
+const StyledIcon = styled.span`
+  ${({ theme }) => styled.css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 12px;
+    color: ${theme.palette.grey.main};
+  `}}
+`;
+
+exports.StyledContainer = StyledContainer;
+exports.StyledDetails = StyledDetails;
+exports.StyledIcon = StyledIcon;
+exports.StyledImg = StyledImg;

package/dist/cjs/components/Radio.cjs

@@ -0,0 +1,49 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Stack = require('@mui/material/Stack');
+var Box = require('./Box.cjs');
+var FormLabel = require('./FormLabel.cjs');
+var Radio_styled = require('./Radio.styled.cjs');
+
+function Radio({
+  color = "primary",
+  disabled = false,
+  id = "",
+  required = false,
+  value = "",
+  label,
+  name,
+  size = "medium",
+  ...rest
+}) {
+  const props = {
+    color,
+    disabled,
+    id: id || name,
+    required,
+    value,
+    size,
+    name,
+    ...rest
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { direction: "row", gap: "10px", alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Box.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Radio_styled.StyledRadio, { ...props, disableRipple: true }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormLabel.default,
+      {
+        htmlFor: id,
+        size,
+        disabled,
+        margin: "none",
+        sx: { mt: "2px", fontWeight: "500" },
+        children: label
+      }
+    )
+  ] });
+}
+
+exports.default = Radio;

package/dist/cjs/components/Radio.styled.cjs

@@ -0,0 +1,25 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
+var Radio = require('@mui/material/Radio');
+var object = require('../utils/helpers/object.cjs');
+
+const StyledRadio = styles.styled(Radio)`
+  ${({ checked, disabled, theme }) => react.css`
+    padding: 0;
+    border-radius: 0;
+
+    ${!checked && react.css`
+      color: ${object.getObjectProp(theme, "vars.palette.grey.600")};
+    `}
+    ${disabled && react.css`
+      && {
+        color: ${object.getObjectProp(theme, "vars.palette.grey.400")};
+      }
+    `}
+  `}
+`;
+
+exports.StyledRadio = StyledRadio;

package/dist/cjs/components/Rating.cjs

@@ -0,0 +1,14 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var MuiRating = require('@mui/material/Rating');
+
+function Rating({ ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiRating, { ...rest });
+}
+
+exports.default = Rating;

package/dist/cjs/components/Select.cjs

@@ -0,0 +1,105 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var uuid = require('react-uuid');
+var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
+var FormControl = require('./FormControl.cjs');
+var Select_styled = require('./Select.styled.cjs');
+
+function Select({
+  color = "default",
+  disabled = false,
+  edges = "smooth",
+  errorMessage = "",
+  fullWidth = true,
+  helperText = "",
+  id = void 0,
+  inputRef = void 0,
+  inputProps = {},
+  label = void 0,
+  IconComponent = void 0,
+  message = "",
+  MenuProps = {},
+  name,
+  native = false,
+  placeholder = "",
+  required = false,
+  showError = false,
+  size = "medium",
+  readOnly = false,
+  options = [],
+  ...rest
+}) {
+  const allowEmpty = !!placeholder;
+  const inputAttrs = {
+    ...readOnly && { readOnly },
+    ...inputProps
+  };
+  const props = {
+    color: showError ? "error" : color,
+    disabled,
+    $edges: edges,
+    fullWidth,
+    id: id || name,
+    inputProps: inputAttrs,
+    inputRef,
+    name,
+    placeholder,
+    required,
+    error: showError,
+    readOnly,
+    size,
+    ...rest,
+    allowEmpty,
+    displayEmpty: allowEmpty,
+    native,
+    MenuProps: {
+      ...MenuProps,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      marginThreshold: 0
+    },
+    IconComponent: IconComponent || KeyboardArrowDownIcon
+  };
+  const renderValue = (selected) => {
+    if (!selected) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Select_styled.StyledPlaceholder, { children: placeholder });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Select_styled.StyledSelectValue, { children: selected });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormControl.default,
+    {
+      color,
+      id: props.id,
+      label,
+      helperText,
+      showError,
+      message: errorMessage || message,
+      fullWidth,
+      disabled,
+      required,
+      size,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Select_styled.default, { renderValue, ...props, variant: "outlined", children: options.map(({ label: optionLabel, ...others }) => /* @__PURE__ */ jsxRuntime.jsx(
+        Select_styled.StyledSelectOption,
+        {
+          ...others,
+          ...native && { as: "option" },
+          children: optionLabel
+        },
+        uuid()
+      )) })
+    }
+  );
+}
+
+exports.default = Select;