@tenancy.nz/ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,59 @@
+"use strict";
+import { css } from '@emotion/react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+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 = styled(Box)`
+  ${({ elevate, fill, inset, noOverflow, outlined, rounded, theme }) => css`
+    background-color: ${getObjectProp(theme, "vars.palette.background.paper")};
+    font-family: ${getObjectProp(theme, "typography.fontFamily")};
+    padding: ${getPadding(inset)};
+
+    ${elevate && !outlined && css`
+      border: none;
+      box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1);
+    `}
+
+    ${noOverflow && css`
+      overflow: hidden;
+    `}
+
+    ${outlined && css`
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-shadow: none;
+    `}
+
+    ${rounded && css`
+      border-radius: 8px;
+    `}
+
+     ${fill && css`
+      height: 100%;
+      width: 100%;
+    `}
+  `};
+`;
+
+export { StyledPaper as default };

package/dist/esm/components/Popper.js

@@ -0,0 +1,60 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import MuiPopper from '@mui/material/Popper';
+import MuiFade from '@mui/material/Fade';
+import MuiPaper from '@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__ */ jsx(MuiPopper, { ...rest, transition: true, ref, style: { zIndex: 9999 }, children: ({ TransitionProps }) => /* @__PURE__ */ jsx(MuiFade, { ...TransitionProps, timeout: 350, children: /* @__PURE__ */ 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 = forwardRef(Popper);
+
+export { Popper$1 as default };

package/dist/esm/components/PropertyCard.js

@@ -0,0 +1,218 @@
+"use strict";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import HotelIcon from '@mui/icons-material/Hotel';
+import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
+import BathtubIcon from '@mui/icons-material/Bathtub';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Box from './Box.js';
+import Divider from './Divider.js';
+import Heading from './Heading.js';
+import Media from './Media.js';
+import Paper from './Paper.js';
+import Skeleton from './Skeleton.js';
+import Text from './Text.js';
+import { StyledContainer, StyledImg, StyledDetails, StyledIcon } from './PropertyCard.styled.js';
+import { implode } from '../utils/helpers/array.js';
+import { isEmpty } from '../utils/helpers/boolean.js';
+import 'mime/lite';
+import '../utils/helpers/time.js';
+
+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 = implode(" ", [
+    implode("/", [unit, streetNumber]),
+    streetName
+  ]);
+  const address2 = implode(", ", [suburb, city]);
+  const address = `${address1} ${address2}`;
+  return /* @__PURE__ */ jsx(Paper, { rounded: true, elevate: elevation, fill: !isMobile, children: /* @__PURE__ */ jsxs(StyledContainer, { children: [
+    /* @__PURE__ */ jsx(StyledImg, { children: /* @__PURE__ */ jsx(Media, { skeleton, src: photo, title: address }) }),
+    /* @__PURE__ */ jsxs(StyledDetails, { children: [
+      !skeleton && /* @__PURE__ */ jsx(Heading, { as: "h3", gutterBottom: false, children: address1 }),
+      skeleton && /* @__PURE__ */ jsx(Skeleton, { width: "75%", height: 30 }),
+      !skeleton && /* @__PURE__ */ jsx(Text, { variant: "subtitle1", weight: "500", color: "textPrimary", children: address2 }),
+      skeleton && /* @__PURE__ */ jsx(Skeleton, { width: "65%", height: 30 }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          display: "flex",
+          width: "100%",
+          align: "center",
+          marginBottom: !skeleton ? "20px" : "-13px",
+          children: [
+            !skeleton && /* @__PURE__ */ jsxs(
+              Text,
+              {
+                as: "span",
+                weight: "600",
+                variant: "inherit",
+                color: "textPrimary",
+                children: [
+                  "$",
+                  rentAmount,
+                  abbreviatedRentFrequency()
+                ]
+              }
+            ),
+            skeleton && /* @__PURE__ */ jsx(Skeleton, { width: 60, height: 27 }),
+            /* @__PURE__ */ jsxs(StyledIcon, { children: [
+              !skeleton && !isEmpty(bedrooms) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    weight: "600",
+                    variant: "inherit",
+                    color: "textPrimary",
+                    children: bedrooms
+                  }
+                ),
+                "\xA0",
+                /* @__PURE__ */ jsx(HotelIcon, {})
+              ] }),
+              skeleton && /* @__PURE__ */ jsx(Skeleton, { width: 40, height: 27 })
+            ] }),
+            /* @__PURE__ */ jsxs(StyledIcon, { children: [
+              !skeleton && !isEmpty(bathrooms) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    weight: "600",
+                    variant: "inherit",
+                    color: "textPrimary",
+                    children: bathrooms
+                  }
+                ),
+                "\xA0",
+                /* @__PURE__ */ jsx(BathtubIcon, {})
+              ] }),
+              skeleton && /* @__PURE__ */ jsx(Skeleton, { width: 40, height: 27 })
+            ] }),
+            /* @__PURE__ */ jsxs(StyledIcon, { children: [
+              !skeleton && !isEmpty(parkingSpaces) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    weight: "600",
+                    variant: "inherit",
+                    color: "textPrimary",
+                    children: parkingSpaces
+                  }
+                ),
+                "\xA0",
+                /* @__PURE__ */ jsx(DirectionsCarIcon, {})
+              ] }),
+              skeleton && /* @__PURE__ */ jsx(Skeleton, { width: 40, height: 27 })
+            ] })
+          ]
+        }
+      ),
+      footerContent && /* @__PURE__ */ jsx(Box, { 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
+};
+
+export { PropertyCard as default };

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

@@ -0,0 +1,62 @@
+"use strict";
+import styled, { css } from 'styled-components';
+
+const StyledContainer = styled.div`
+  ${({ theme }) => 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 }) => 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 }) => 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 }) => css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 12px;
+    color: ${theme.palette.grey.main};
+  `}}
+`;
+
+export { StyledContainer, StyledDetails, StyledIcon, StyledImg };

package/dist/esm/components/Radio.js

@@ -0,0 +1,45 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Box from './Box.js';
+import FormLabel from './FormLabel.js';
+import { StyledRadio } from './Radio.styled.js';
+
+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__ */ jsxs(Stack, { direction: "row", gap: "10px", alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(StyledRadio, { ...props, disableRipple: true }) }),
+    /* @__PURE__ */ jsx(
+      FormLabel,
+      {
+        htmlFor: id,
+        size,
+        disabled,
+        margin: "none",
+        sx: { mt: "2px", fontWeight: "500" },
+        children: label
+      }
+    )
+  ] });
+}
+
+export { Radio as default };

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

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

package/dist/esm/components/Rating.js

@@ -0,0 +1,10 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import MuiRating from '@mui/material/Rating';
+
+function Rating({ ...rest }) {
+  return /* @__PURE__ */ jsx(MuiRating, { ...rest });
+}
+
+export { Rating as default };

package/dist/esm/components/Select.js

@@ -0,0 +1,101 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import uuid from 'react-uuid';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import FormControl from './FormControl.js';
+import StyledSelect, { StyledSelectOption, StyledPlaceholder, StyledSelectValue } from './Select.styled.js';
+
+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__ */ jsx(StyledPlaceholder, { children: placeholder });
+    }
+    return /* @__PURE__ */ jsx(StyledSelectValue, { children: selected });
+  };
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      color,
+      id: props.id,
+      label,
+      helperText,
+      showError,
+      message: errorMessage || message,
+      fullWidth,
+      disabled,
+      required,
+      size,
+      children: /* @__PURE__ */ jsx(StyledSelect, { renderValue, ...props, variant: "outlined", children: options.map(({ label: optionLabel, ...others }) => /* @__PURE__ */ jsx(
+        StyledSelectOption,
+        {
+          ...others,
+          ...native && { as: "option" },
+          children: optionLabel
+        },
+        uuid()
+      )) })
+    }
+  );
+}
+
+export { Select as default };

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

@@ -0,0 +1,95 @@
+"use strict";
+import { css } from '@emotion/react';
+import '@emotion/styled';
+import { styled } from '@mui/material/styles';
+import MuiMenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import { edgesStyles, sizeStyles, colorStyles, readOnlyStyles, disabledStyles } from './TextInput.styled.js';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const hoverStyles = css`
+  border-color: #1f1c4f;
+`;
+const focusStyles = ({ color, theme }) => css`
+  box-shadow: 0px 0px 6px 0px
+    ${getObjectProp(theme, `vars.palette.${color}.main`)};
+  border-color: ${getObjectProp(theme, `vars.palette.${color}.main`)};
+`;
+const StyledPlaceholder = styled(
+  "span"
+)`
+  ${({ disabled, theme }) => css`
+    color: ${getObjectProp(theme, "vars.palette.grey.600")};
+
+    ${disabled && `
+      color: ${getObjectProp(theme, "vars.palette.grey.600")};
+    `}
+  `}
+`;
+const StyledSelectValue = styled(
+  "span"
+)`
+  ${({ disabled, theme }) => css`
+    color: ${getObjectProp(theme, "vars.palette.text.primary")};
+
+    ${disabled && `
+      color: ${getObjectProp(theme, "vars.palette.grey.600")};
+    `}
+  `}
+`;
+const StyledSelectOption = styled(
+  MuiMenuItem
+)`
+  ${({ theme }) => css`
+    color: ${getObjectProp(theme, "vars.palette.text.primary")};
+  `}
+`;
+const StyledSelect = styled(Select)`
+  ${({ color, disabled, $edges, multiline, readOnly, size, theme }) => css`
+    font-weight: 400;
+    color: ${getObjectProp(theme, "vars.palette.text.primary")};
+    ${edgesStyles({ edges: $edges, theme })}
+    ${sizeStyles({ size, multiline, theme })}
+
+    .MuiSvgIcon-root,
+    .MuiSelect-select {
+      z-index: 2;
+    }
+
+    .MuiSelect-select {
+      padding-left: 0px;
+    }
+
+    .MuiNativeSelect-select {
+      padding-left: 0px;
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
+
+    fieldset {
+      ${colorStyles({ color, theme })}
+    }
+
+    &&:hover fieldset {
+      ${!disabled && !readOnly && hoverStyles}
+    }
+
+    &&.Mui-focused fieldset {
+      ${!disabled && !readOnly && focusStyles({ color: color === "default" ? "info" : color, theme })}
+    }
+
+    &&.Mui-readOnly fieldset {
+      ${!disabled && readOnly && readOnlyStyles({ theme })}
+      border: 1px solid ${getObjectProp(theme, "vars.palette.grey.600")};
+    }
+
+    &&.Mui-disabled {
+      color: ${getObjectProp(theme, "vars.palette.grey.600")};
+      fieldset {
+        ${disabled && disabledStyles({ theme })}
+      }
+    }
+  `}
+`;
+
+export { StyledPlaceholder, StyledSelectOption, StyledSelectValue, StyledSelect as default, focusStyles, hoverStyles };

package/dist/esm/components/Skeleton.js

@@ -0,0 +1,19 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import Skeleton$1 from '@mui/material/Skeleton';
+
+function Skeleton({
+  animation = "pulse",
+  children = void 0,
+  light = false,
+  variant = "text",
+  ...others
+}) {
+  const rest = { animation, variant, ...others };
+  const styles = {
+    ...light && { backgroundColor: "rgba(255, 255, 255, 0.13)" }
+  };
+  return /* @__PURE__ */ jsx(Skeleton$1, { ...rest, sx: styles, children });
+}
+
+export { Skeleton as default };