@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/utils/helpers/file.cjs

@@ -0,0 +1,53 @@
+"use strict";
+'use strict';
+
+var mime = require('mime/lite');
+
+const getFileNameFromURL = (file) => {
+  if (file.url) {
+    const cleanURL = file.url.split(/[?#]/)[0];
+    return cleanURL.substring(cleanURL.lastIndexOf("/") + 1);
+  }
+  return "";
+};
+const getFileName = (file) => {
+  if (file.filename) {
+    return file.filename;
+  }
+  if (file.url) {
+    return getFileNameFromURL(file);
+  }
+  return "";
+};
+const getFileExtension = (file) => {
+  if (file.filetype) {
+    return mime.getExtension(file.filetype);
+  }
+  let filetype = mime.getType(getFileName(file));
+  if (!filetype) {
+    filetype = mime.getType(getFileNameFromURL(file));
+  }
+  if (filetype) {
+    return mime.getExtension(filetype);
+  }
+  return "unsupported";
+};
+const isImage = (file) => {
+  const extension = getFileExtension(file);
+  const extensions = ["jpg", "jpeg", "png", "gif", "svg"];
+  return extensions.includes(extension);
+};
+const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]}`;
+};
+
+exports.formatBytes = formatBytes;
+exports.getFileExtension = getFileExtension;
+exports.getFileName = getFileName;
+exports.getFileNameFromURL = getFileNameFromURL;
+exports.isImage = isImage;

package/dist/cjs/utils/helpers/index.cjs

@@ -0,0 +1,36 @@
+"use strict";
+'use strict';
+
+var array = require('./array.cjs');
+var boolean = require('./boolean.cjs');
+var file = require('./file.cjs');
+var string = require('./string.cjs');
+var time = require('./time.cjs');
+
+
+
+exports.arrayUnique = array.arrayUnique;
+exports.implode = array.implode;
+exports.range = array.range;
+exports.isArray = boolean.isArray;
+exports.isEmpty = boolean.isEmpty;
+exports.isFunction = boolean.isFunction;
+exports.isNotEmpty = boolean.isNotEmpty;
+exports.isNumber = boolean.isNumber;
+exports.isNumeric = boolean.isNumeric;
+exports.isObject = boolean.isObject;
+exports.isString = boolean.isString;
+exports.formatBytes = file.formatBytes;
+exports.getFileExtension = file.getFileExtension;
+exports.getFileName = file.getFileName;
+exports.getFileNameFromURL = file.getFileNameFromURL;
+exports.isImage = file.isImage;
+exports.strPadStart = string.strPadStart;
+exports.stripNonNumeric = string.stripNonNumeric;
+exports.stripTags = string.stripTags;
+exports.toString = string.toString;
+exports.ucFirstChar = string.ucFirstChar;
+exports.getHourOptions = time.getHourOptions;
+exports.getMeridianOptions = time.getMeridianOptions;
+exports.getMinuteOptions = time.getMinuteOptions;
+exports.parseTimeStrByFormat = time.parseTimeStrByFormat;

package/dist/cjs/utils/helpers/number.cjs

@@ -0,0 +1,18 @@
+"use strict";
+'use strict';
+
+var boolean = require('./boolean.cjs');
+
+const toNumber = (val, radix = 10) => boolean.isNumeric(val) ? parseInt(val, radix) : false;
+const toFloat = (val, decimals) => {
+  if (boolean.isNumeric(val) || !isNaN(val)) {
+    if (decimals) {
+      return parseFloat(val).toFixed(decimals);
+    }
+    return parseFloat(val);
+  }
+  return false;
+};
+
+exports.toFloat = toFloat;
+exports.toNumber = toNumber;

package/dist/cjs/utils/helpers/object.cjs

@@ -0,0 +1,97 @@
+"use strict";
+'use strict';
+
+var boolean = require('./boolean.cjs');
+
+const pick = (object, props) => {
+  if (!boolean.isObject(object)) {
+    console.error("first argument should be an object.");
+    return false;
+  }
+  if (!boolean.isArray(props)) {
+    console.error("second argument should be an array.");
+    return false;
+  }
+  return props.reduce((prevVal, curVal) => {
+    if (object.hasOwnProperty(curVal)) {
+      return {
+        ...prevVal,
+        [curVal]: object[curVal]
+      };
+    }
+    return prevVal;
+  }, {});
+};
+const transformArrToObject = (arr, prop) => {
+  if (prop) {
+    return arr.reduce(
+      (obj, item) => ({
+        ...obj,
+        [item[prop]]: item
+      }),
+      {}
+    );
+  }
+  return { ...arr };
+};
+const objectHasAllValues = (obj) => {
+  if (boolean.isEmpty(obj)) {
+    return false;
+  }
+  return Object.values(obj).every(boolean.isNotEmpty);
+};
+const objectHasSomeValues = (obj) => {
+  if (boolean.isEmpty(obj)) {
+    return false;
+  }
+  return Object.values(obj).some(boolean.isNotEmpty);
+};
+const getObjectProp = (obj, prop, fallback = "") => prop.split(".").reduce((value, key) => boolean.isObject(value) && value[key] || fallback, obj);
+const objectRemoveEmpty = (obj) => {
+  if (!boolean.isObject(obj)) {
+    return {};
+  }
+  return Object.entries(obj).filter(([, value]) => !!value).reduce(
+    (carry, [k, value]) => ({
+      ...carry,
+      [k]: value
+    }),
+    {}
+  );
+};
+const objectOmit = (obj, props) => {
+  if (!boolean.isObject(obj)) {
+    return {};
+  }
+  const omit = boolean.isString(props) ? [props] : props;
+  return Object.keys(obj).reduce((carry, k) => {
+    if (omit.includes(k)) {
+      return carry;
+    }
+    return {
+      ...carry,
+      [k]: obj[k]
+    };
+  }, {});
+};
+const objectDeepMerge = (target, source) => {
+  for (let key in source) {
+    if (source.hasOwnProperty(key)) {
+      if (boolean.isObject(source[key]) && boolean.isObject(target[key])) {
+        objectDeepMerge(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    }
+  }
+  return target;
+};
+
+exports.getObjectProp = getObjectProp;
+exports.objectDeepMerge = objectDeepMerge;
+exports.objectHasAllValues = objectHasAllValues;
+exports.objectHasSomeValues = objectHasSomeValues;
+exports.objectOmit = objectOmit;
+exports.objectRemoveEmpty = objectRemoveEmpty;
+exports.pick = pick;
+exports.transformArrToObject = transformArrToObject;

package/dist/cjs/utils/helpers/string.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var boolean = require('./boolean.cjs');
+
+const stripTags = (str) => str.replace(/(<([^>]+)>)/gi, "");
+const stripNonNumeric = (str) => {
+  if (str && boolean.isString(str)) {
+    return str.replace(/\D/g, "");
+  }
+  return "";
+};
+const toString = (val) => String(val);
+const strPadStart = (str, targetLength, padString = "") => toString(str).padStart(targetLength, padString);
+const ucFirstChar = (val) => `${String(val).charAt(0).toUpperCase()}${String(val).slice(1)}`;
+
+exports.strPadStart = strPadStart;
+exports.stripNonNumeric = stripNonNumeric;
+exports.stripTags = stripTags;
+exports.toString = toString;
+exports.ucFirstChar = ucFirstChar;

package/dist/cjs/utils/helpers/time.cjs

@@ -0,0 +1,64 @@
+"use strict";
+'use strict';
+
+var dayjs = require('dayjs');
+var customParseFormat = require('dayjs/plugin/customParseFormat');
+var array = require('./array.cjs');
+var string = require('./string.cjs');
+
+dayjs.extend(customParseFormat);
+const getHourOptions = (disableFirstOption = false) => {
+  const options = array.range(1, 12).map((hour) => {
+    const formatted = string.strPadStart(hour, 2, "0");
+    return {
+      label: formatted,
+      value: formatted
+    };
+  });
+  return [
+    {
+      label: "",
+      value: "",
+      disabled: disableFirstOption
+    },
+    ...options
+  ];
+};
+const getMinuteOptions = (min, max, step, disableFirstOption = false) => {
+  const options = array.range(min, max, step).map((minute) => {
+    const formatted = string.strPadStart(minute, 2, "0");
+    return {
+      label: formatted,
+      value: formatted
+    };
+  });
+  return [
+    {
+      label: "",
+      value: "",
+      disabled: disableFirstOption
+    },
+    ...options
+  ];
+};
+const getMeridianOptions = (disableFirstOption = false) => [
+  {
+    label: "",
+    value: "",
+    disabled: disableFirstOption
+  },
+  {
+    label: "AM",
+    value: "am"
+  },
+  {
+    label: "PM",
+    value: "pm"
+  }
+];
+const parseTimeStrByFormat = (timeStr, format = "HH:mm:ss") => dayjs(timeStr, format);
+
+exports.getHourOptions = getHourOptions;
+exports.getMeridianOptions = getMeridianOptions;
+exports.getMinuteOptions = getMinuteOptions;
+exports.parseTimeStrByFormat = parseTimeStrByFormat;

package/dist/cjs/utils/loadFont.cjs

@@ -0,0 +1,19 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../theme/index.cjs');
+
+const fontLinkId = "storybook-font-link-tag";
+const loadFont = () => {
+  if (!document.getElementById(fontLinkId)) {
+    const fontLink = document.createElement("link");
+    fontLink.id = fontLinkId;
+    fontLink.href = index.fontUrl;
+    fontLink.rel = "stylesheet";
+    document.head.appendChild(fontLink);
+  }
+};
+
+exports.default = loadFont;

package/dist/cjs/utils/useResize.cjs

@@ -0,0 +1,24 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useResize = (ref) => {
+  const [width, setWidth] = React.useState(0);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    const handleResize = () => {
+      setWidth(ref.current.offsetWidth);
+      setHeight(ref.current.offsetHeight);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [ref]);
+  return { width, height };
+};
+
+exports.default = useResize;

package/dist/esm/components/Alert.js

@@ -0,0 +1,44 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
+import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningAmberOutlinedIcon from '@mui/icons-material/WarningAmberOutlined';
+import StyledAlert, { StyledAlertTitle } from './Alert.styled.js';
+
+const variantMap = {
+  contained: "filled"
+};
+const icons = {
+  info: /* @__PURE__ */ jsx(InfoOutlinedIcon, { sx: { fontSize: 24 } }),
+  success: /* @__PURE__ */ jsx(CheckCircleOutlineOutlinedIcon, { sx: { fontSize: 24 } }),
+  error: /* @__PURE__ */ jsx(ErrorOutlineOutlinedIcon, { sx: { fontSize: 24 } }),
+  warning: /* @__PURE__ */ jsx(WarningAmberOutlinedIcon, { sx: { fontSize: 24 } })
+};
+function Alert({
+  children,
+  color = "info",
+  icon = true,
+  title = void 0,
+  variant = "standard",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    StyledAlert,
+    {
+      color,
+      variant: variantMap[variant] || variant,
+      severity: color,
+      iconMapping: icons,
+      closeText: "undo",
+      ...rest,
+      ...(!icon || !color || !icons[color]) && { icon: false },
+      children: [
+        title && /* @__PURE__ */ jsx(StyledAlertTitle, { children: title }),
+        children
+      ]
+    }
+  );
+}
+
+export { Alert as default };

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

@@ -0,0 +1,36 @@
+"use strict";
+import { css } from '@emotion/react';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import { styled } from '@mui/material/styles';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const standardStyles = ({ color, theme }) => css`
+  border: 1px solid currentColor;
+  background-color: ${getObjectProp(theme, `vars.palette.${color}.light`)};
+  color: ${getObjectProp(theme, `vars.palette.${color}.main`)};
+`;
+const outlinedStyles = ({ color, theme }) => css`
+  background-color: transparent;
+  border: 1px solid currentColor;
+  color: ${getObjectProp(theme, `vars.palette.${color}.main`)};
+`;
+const StyledAlertTitle = styled(
+  AlertTitle
+)`
+  font-size: inherit;
+`;
+const StyledAlert = styled(Alert)`
+  ${({ color, theme, variant }) => css`
+    font-size: ${getObjectProp(theme, "typography.fontSize")}px;
+    padding: 8px 16px;
+    ${variant === "standard" && standardStyles({ color, theme })}
+    ${variant === "outlined" && outlinedStyles({ color, theme })}
+
+    .MuiAlert-action {
+      margin-right: 0;
+    }
+  `}
+`;
+
+export { StyledAlertTitle, StyledAlert as default };

package/dist/esm/components/Autocomplete.js

@@ -0,0 +1,172 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import FormControl from './FormControl.js';
+import { StyledAutocomplete } from './Autocomplete.styled.js';
+import TextInput from './TextInput.js';
+
+function Autocomplete({
+  disabled = false,
+  edges = "smooth",
+  fullWidth = true,
+  helperText = "",
+  helperTextPlacement = "below",
+  label = "",
+  placeholder = "",
+  popupIcon = void 0,
+  required = false,
+  size = "medium",
+  variant = "outlined",
+  showError = false,
+  errorMessage = "",
+  name,
+  hideLabel = false,
+  disableIconRotation = false,
+  TextInputProps = {},
+  onChange = () => {
+  },
+  textInputAttrs = {},
+  ...rest
+}) {
+  const [selectedValue, setSelectedValue] = useState(rest.value || null);
+  const handleChange = (event, val, ...extras) => {
+    setSelectedValue(val);
+    onChange(event, val, ...extras);
+  };
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      name,
+      fullWidth,
+      label,
+      helperText,
+      helperTextPlacement,
+      disabled,
+      required,
+      showError,
+      errorMessage,
+      hideLabel,
+      edges,
+      children: /* @__PURE__ */ jsx(
+        StyledAutocomplete,
+        {
+          disabled,
+          iconrotation: disableIconRotation ? "no" : "yes",
+          popupIcon: popupIcon === void 0 ? /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}) : popupIcon,
+          renderInput: ({ inputProps, InputProps, ...params }) => /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ...params,
+              disabled,
+              name,
+              variant,
+              size,
+              edges,
+              required,
+              value: selectedValue,
+              placeholder,
+              inputProps: {
+                autoComplete: "off",
+                ...textInputAttrs,
+                ...inputProps
+              },
+              slotProps: {
+                input: {
+                  ...TextInputProps,
+                  ...InputProps
+                }
+              },
+              showError,
+              message: errorMessage,
+              ref: InputProps.ref
+            }
+          ),
+          onChange: handleChange,
+          ...rest
+        }
+      )
+    }
+  );
+}
+Autocomplete.propTypes = {
+  /**
+   * If `true`, the `input` element will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Prevent icon rotating on open
+   */
+  disableIconRotation: PropTypes.bool,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * If `true`, the input will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Field name.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.string,
+  /**
+   * Placed the helper text above or below the input.
+   */
+  helperTextPlacement: PropTypes.oneOf(["above", "below"]),
+  /**
+   * The label content.
+   */
+  label: PropTypes.string,
+  /**
+   * The short hint displayed in the input before the user enters a value.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * The icon that displays the arrow.
+   */
+  popupIcon: PropTypes.any,
+  /**
+   * If `true`, the label is displayed as required and the `input` element` will be required.
+   */
+  required: PropTypes.bool,
+  /**
+   * The size to use.
+   */
+  size: PropTypes.oneOf(["medium", "small"]),
+  /**
+   * Props to pass to the TextField component.
+   */
+  TextInputProps: PropTypes.object,
+  /**
+   * Pass HTML attrs to the TextField component.
+   */
+  textInputAttrs: PropTypes.shape({}),
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes.oneOf(["filled", "outlined"]),
+  /**
+   * 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,
+  /**
+   * Make label visible only to screen readers
+   */
+  hideLabel: PropTypes.bool,
+  /**
+   * Function to handle value chage
+   */
+  onChange: PropTypes.func
+};
+
+export { Autocomplete as default };

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

@@ -0,0 +1,13 @@
+"use strict";
+import Autocomplete from '@mui/material/Autocomplete';
+import { styled } from '@mui/material/styles';
+
+const StyledAutocomplete = styled(
+  Autocomplete
+)(({ iconrotation }) => ({
+  "& .MuiAutocomplete-popupIndicatorOpen": {
+    transform: iconrotation === "yes" ? null : "rotate(0)"
+  }
+}));
+
+export { StyledAutocomplete };

package/dist/esm/components/Avatar.js

@@ -0,0 +1,48 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledAvatar } from './Avatar.styled.js';
+
+function Avatar({
+  children = null,
+  size = "small",
+  src = "",
+  srcSet = "",
+  variant = "",
+  ...rest
+}) {
+  const props = { size, src, srcSet, variant, ...rest };
+  return /* @__PURE__ */ jsx(StyledAvatar, { ...props, children });
+}
+Avatar.propTypes = {
+  /**
+   * Used in combination with src to provide an alt
+   * attribute for the rendered img element.
+   */
+  alt: PropTypes.string.isRequired,
+  /**
+   * Used to render icon or text elements inside the
+   * Avatar if src is not set. This can be an element,
+   * or just a string.
+   */
+  children: PropTypes.node,
+  /**
+   * Defines the size of component
+   */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  /**
+   * The `src` attribute for the `img` element.
+   */
+  src: PropTypes.string,
+  /**
+   * The `srcSet` attribute for the `img` element. Use this attribute for responsive image display.
+   */
+  srcSet: PropTypes.string,
+  /**
+   * The shape of the avatar.
+   */
+  variant: PropTypes.oneOf(["circular", "rounded", "square"])
+};
+
+export { Avatar as default };

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

@@ -0,0 +1,22 @@
+"use strict";
+import styled, { css } from 'styled-components';
+import MuiAvatar from '@mui/material/Avatar';
+
+const sizeFn = (size) => {
+  const sizes = {
+    large: 50,
+    medium: 40,
+    small: 30
+  };
+  return sizes[size];
+};
+const StyledAvatar = styled(MuiAvatar)`
+  ${({ size }) => css`
+    && {
+      width: ${sizeFn(size)}px;
+      height: ${sizeFn(size)}px;
+    }
+  `}
+`;
+
+export { StyledAvatar };