@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/theme/index.js

@@ -0,0 +1,247 @@
+"use strict";
+const palette = {
+  default: {
+    light: "#F1F1F1",
+    main: "#6D6D6D",
+    dark: "#575757",
+    contrastText: "#fff"
+  },
+  grey: {
+    main: "#BCBCBC",
+    transparent: "rgba(140,152, 178, 0.10)"
+  },
+  primary: {
+    main: "#0E0044",
+    light: "#3e3369",
+    dark: "#0b0036",
+    contrastText: "#fff"
+  },
+  primaryAlt: {
+    main: "#264A9A",
+    dark: "#142855",
+    contrastText: "#fff"
+  },
+  secondary: {
+    // main: '#394869',
+    // light: '#526897',
+    // dark: '#2E3B57',
+    // contrastText: '#fff',
+    main: "#274A9A",
+    light: "#2F5BC0",
+    dark: "#254794",
+    contrastText: "#fff"
+  },
+  secondaryAlt: {
+    main: "#AA0270",
+    dark: "#7E0052",
+    contrastText: "#fff"
+  },
+  tertiary: {
+    light: "#3dcdb5",
+    main: "#0CC1A3",
+    dark: "#0a9a82",
+    contrastText: "#fff"
+  },
+  // error: {
+  //   main: '#721C24',
+  //   light: '#F8D7DA',
+  //   dark: '#721C24',
+  //   contrastText: '#fff',
+  // },
+  error: {
+    main: "#d1293d",
+    light: "#fcf8f8",
+    dark: "#921d2b",
+    contrastText: "#fff"
+  },
+  warning: {
+    main: "#6C4F25",
+    light: "#FFF9C4",
+    dark: "#6C4F25",
+    contrastText: "#fff"
+  },
+  success: {
+    main: "#155724",
+    light: "#E6F9E0",
+    dark: "#155724",
+    contrastText: "#fff"
+  },
+  info: {
+    main: "#0D47A1",
+    light: "#E3F2FD",
+    dark: "#0D47A1",
+    contrastText: "#fff"
+  },
+  purple: {
+    main: "#7D00C0",
+    light: "#F9EDFF",
+    dark: "#64009a",
+    contrastText: "#fff"
+  },
+  orange: {
+    main: "#AA5B00",
+    light: "#FCF2E6",
+    dark: "#884900",
+    contrastText: "#fff"
+  },
+  text: {
+    primary: "#0e0044",
+    secondary: "#274A9A",
+    blue: "#1F1C4F",
+    body: "#181B25",
+    muted: "#757578"
+  },
+  action: {
+    disabled: null,
+    disabledBackground: null
+  },
+  background: {
+    default: "#ffffff",
+    paper: "#ffffff",
+    muted: "#E8E8ED"
+  },
+  divider: "#707070"
+};
+const breakpoints = {
+  values: {
+    xs: 0,
+    sm: 768,
+    md: 992,
+    lg: 1280,
+    xl: 1920
+  }
+};
+const typography = {
+  fontWeightLight: 700,
+  fontWeightRegular: 500,
+  fontWeightMedium: 600,
+  fontWeightBold: 600,
+  fontSize: 16,
+  fontFamily: '"Montserrat", sans-serif',
+  button: {
+    fontSize: 16,
+    fontFamily: '"Montserrat", sans-serif',
+    fontWeight: 600
+  },
+  h1: {
+    fontSize: 24,
+    fontWeight: 600,
+    lineHeight: 1.3,
+    [`@media (min-width: ${breakpoints.values.md}px)`]: {
+      fontSize: 32
+    }
+  },
+  h2: {
+    fontSize: 22,
+    fontWeight: 600,
+    lineHeight: 1.3,
+    [`@media (min-width: ${breakpoints.values.md}px)`]: {
+      fontSize: 28
+    }
+  },
+  h3: {
+    fontSize: 18,
+    fontWeight: 600,
+    lineHeight: 1.3,
+    [`@media (min-width: ${breakpoints.values.md}px)`]: {
+      fontSize: 24
+    }
+  },
+  h4: {
+    fontSize: 17,
+    fontWeight: 600,
+    lineHeight: 1.3,
+    [`@media (min-width: ${breakpoints.values.md}px)`]: {
+      fontSize: 19
+    }
+  },
+  h5: {
+    fontSize: 17,
+    fontWeight: 600,
+    lineHeight: 1.3
+  },
+  h6: {
+    fontSize: 13,
+    fontWeight: 600,
+    lineHeight: 1.3
+  },
+  subtitle1: {
+    fontSize: 22,
+    lineHeight: "inherit"
+  },
+  subtitle2: {
+    fontSize: 22,
+    fontWeight: 400
+  },
+  body1: {
+    fontSize: 15,
+    fontWeight: 500
+  },
+  body2: {
+    fontSize: 14
+  },
+  size: {
+    scale: (factor) => `${0.25 * factor}em`,
+    small: "16px",
+    medium: "18px",
+    large: "22px"
+  }
+};
+const shape = {
+  borderRadius: 4
+};
+const components = {
+  MuiBackdrop: {
+    styleOverrides: {
+      root: {
+        backgroundColor: "rgba(39, 50, 74, 0.8)"
+      }
+    }
+  },
+  MuiTouchRipple: {
+    styleOverrides: {
+      root: {
+        opacity: 0,
+        visiblity: "hidden",
+        display: "none"
+      }
+    }
+  },
+  MuiTooltip: {
+    styleOverrides: {
+      tooltip: {
+        backgroundColor: "rgba(39, 50, 74, 0.7)"
+      },
+      arrow: {
+        color: "rgba(39, 50, 74, 0.7)"
+      }
+    }
+  }
+};
+const spacing = (factor) => `${0.25 * factor}rem`;
+const props = {
+  MuiButton: {
+    disableRipple: true,
+    disableFocusRipple: true
+  },
+  MuiButtonBase: {
+    disableRipple: true,
+    disableFocusRipple: true
+  },
+  MuiLoadingButton: {
+    disableRipple: true,
+    disableFocusRipple: true
+  }
+};
+const theme = {
+  palette,
+  typography,
+  spacing,
+  shape,
+  breakpoints,
+  props,
+  components
+};
+const fontUrl = "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";
+
+export { theme as default, fontUrl };

package/dist/esm/utils/animations.js

@@ -0,0 +1,60 @@
+"use strict";
+import { keyframes, css } from 'styled-components';
+
+const easing = {
+  rubber: "cubic-bezier(0.175, 0.885, 0.335, 1.05)"
+};
+const rotate360 = keyframes`
+	0% {
+    transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(1turn);
+	}
+`;
+const glow = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: .4; }
+`;
+const float = keyframes`
+  0% { transform: translateY(1px); }
+  25% { transform: translateY(0px); }
+  50% { transform: translateY(-3px); }
+  100% { transform: translateY(1px); }
+`;
+const jiggle = keyframes`
+  0%, 100% { transform:translate3d(0,0,0); }
+  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
+  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
+`;
+const shake = keyframes`
+  0% { transform:rotate(-3deg) }
+  1.68421% { transform:rotate(3deg) }
+  2.10526% { transform:rotate(6deg) }
+  3.78947% { transform:rotate(-6deg) }
+  4.21053% { transform:rotate(-6deg) }
+  5.89474% { transform:rotate(6deg) }
+  6.31579% { transform:rotate(6deg) }
+  8% { transform:rotate(-6deg) }
+  8.42105% { transform:rotate(-6deg) }
+  10.10526% { transform:rotate(6deg) }
+  10.52632% { transform:rotate(6deg) }
+  12.21053% { transform:rotate(-6deg) }
+  12.63158% { transform:rotate(-6deg) }
+  14.31579% { transform:rotate(6deg) }
+  15.78947% { transform:rotate(0deg) }
+  100% { transform:rotate(0deg) }
+`;
+const inlineGlow = css`
+  animation: ${glow} 1.5s ease-in-out infinite;
+  background-color: #eee !important;
+  color: transparent !important;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+  background-clip: padding-box !important;
+  border: none !important;
+  box-shadow: none !important;
+`;
+
+export { easing, float, glow, inlineGlow, jiggle, rotate360, shake };

package/dist/esm/utils/colors.js

@@ -0,0 +1,28 @@
+"use strict";
+const hexToRgba = (hex, opacity) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? `rgba(${[
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16)
+  ].join()},${opacity})` : null;
+};
+const mixColors = (firstColor, secondColor, weight = 50) => {
+  const decimalToHex = (d) => d.toString(16);
+  const hexToDecimal = (h) => parseInt(h, 16);
+  let color = "#";
+  const color1 = firstColor.replace("#", "");
+  const color2 = secondColor.replace("#", "");
+  for (let i = 0; i <= 5; i += 2) {
+    const v1 = hexToDecimal(color1.substr(i, 2));
+    const v2 = hexToDecimal(color2.substr(i, 2));
+    let val = decimalToHex(Math.floor(v2 + (v1 - v2) * (weight / 100)));
+    while (val.length < 2) {
+      val = `0${val}`;
+    }
+    color += val;
+  }
+  return color;
+};
+
+export { hexToRgba, mixColors };

package/dist/esm/utils/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+const ORIENTATION_HORIZONTAL = "horizontal";
+const ORIENTATION_VERTICAL = "vertical";
+
+export { ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL };

package/dist/esm/utils/files.js

@@ -0,0 +1,39 @@
+"use strict";
+import mime from 'mime/lite';
+
+const getFileNameFromURL = (url) => {
+  if (url) {
+    const cleanURL = 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.url);
+  }
+  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.url || 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);
+};
+
+export { getFileExtension, getFileName, getFileNameFromURL, isImage };

package/dist/esm/utils/helpers/array.js

@@ -0,0 +1,20 @@
+"use strict";
+import { isEmpty, isArray } from './boolean.js';
+
+const implode = (delimiter, arr, noEmpty = true) => (noEmpty ? arr.filter((item) => !isEmpty(item)) : arr).join(delimiter);
+const range = (start, end, step = 1) => {
+  if (start === end) {
+    return [start];
+  }
+  return [start, ...range(start + step, end, step)];
+};
+const arrayUnique = (arr) => {
+  if (!isArray(arr)) {
+    console.error("first argument should be an array.");
+    return false;
+  }
+  const iterator = (value, index, self) => self.indexOf(value) === index;
+  return arr.filter(iterator);
+};
+
+export { arrayUnique, implode, range };

package/dist/esm/utils/helpers/boolean.js

@@ -0,0 +1,16 @@
+"use strict";
+const isEmpty = (val) => {
+  if (val === false || val === null || val === void 0 || val === "" || val === 0 || Array.isArray(val) && val.length === 0 || typeof val === "object" && Object.keys(val).length === 0) {
+    return true;
+  }
+  return false;
+};
+const isNotEmpty = (val) => !isEmpty(val);
+const isObject = (object) => typeof object === "object" && object instanceof Object && !Array.isArray(object);
+const isArray = (value) => Array.isArray(value);
+const isString = (value) => typeof value === "string";
+const isFunction = (value) => typeof value === "function";
+const isNumber = (val) => /^\d+$/.test(val);
+const isNumeric = (val) => /^(?!0\d)\d*(\.\d+)?$/.test(val);
+
+export { isArray, isEmpty, isFunction, isNotEmpty, isNumber, isNumeric, isObject, isString };

package/dist/esm/utils/helpers/date.js

@@ -0,0 +1,6 @@
+"use strict";
+import dayjs from 'dayjs';
+export { default } from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);

package/dist/esm/utils/helpers/dateSelect.js

@@ -0,0 +1,35 @@
+"use strict";
+import { range } from './array.js';
+import './date.js';
+import { strPadStart, toString } from './string.js';
+import dayjs from 'dayjs';
+
+const rangeYearValue = (val) => {
+  if (val === "now" || !val) {
+    return dayjs().get("year");
+  }
+  if (val.indexOf("-") === 0) {
+    return dayjs().subtract(parseInt(val.substr(1), 10), "year").get("year");
+  }
+  const literal = dayjs(val, "YYYY").get("year");
+  return literal || dayjs().add(parseInt(val, 10), "year").get("year");
+};
+const getYearRange = (format) => {
+  const [minYear, maxYear] = format.split(":");
+  return [rangeYearValue(minYear), rangeYearValue(maxYear)];
+};
+const dayOptions = () => {
+  const options = range(1, 31).map((val) => strPadStart(val, 2, "0"));
+  return ["", ...options];
+};
+const monthOptions = () => {
+  const options = range(1, 12).map((val) => strPadStart(val, 2, "0"));
+  return ["", ...options];
+};
+const yearOptions = (rng) => {
+  const [min, max] = getYearRange(rng);
+  const options = range(min, max).map((val) => toString(val));
+  return ["", ...options];
+};
+
+export { dayOptions, getYearRange, monthOptions, rangeYearValue, yearOptions };

package/dist/esm/utils/helpers/file.js

@@ -0,0 +1,47 @@
+"use strict";
+import mime from '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]}`;
+};
+
+export { formatBytes, getFileExtension, getFileName, getFileNameFromURL, isImage };

package/dist/esm/utils/helpers/index.js

@@ -0,0 +1,6 @@
+"use strict";
+export { arrayUnique, implode, range } from './array.js';
+export { isArray, isEmpty, isFunction, isNotEmpty, isNumber, isNumeric, isObject, isString } from './boolean.js';
+export { formatBytes, getFileExtension, getFileName, getFileNameFromURL, isImage } from './file.js';
+export { strPadStart, stripNonNumeric, stripTags, toString, ucFirstChar } from './string.js';
+export { getHourOptions, getMeridianOptions, getMinuteOptions, parseTimeStrByFormat } from './time.js';

package/dist/esm/utils/helpers/number.js

@@ -0,0 +1,15 @@
+"use strict";
+import { isNumeric } from './boolean.js';
+
+const toNumber = (val, radix = 10) => isNumeric(val) ? parseInt(val, radix) : false;
+const toFloat = (val, decimals) => {
+  if (isNumeric(val) || !isNaN(val)) {
+    if (decimals) {
+      return parseFloat(val).toFixed(decimals);
+    }
+    return parseFloat(val);
+  }
+  return false;
+};
+
+export { toFloat, toNumber };

package/dist/esm/utils/helpers/object.js

@@ -0,0 +1,88 @@
+"use strict";
+import { isObject, isArray, isEmpty, isNotEmpty, isString } from './boolean.js';
+
+const pick = (object, props) => {
+  if (!isObject(object)) {
+    console.error("first argument should be an object.");
+    return false;
+  }
+  if (!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 (isEmpty(obj)) {
+    return false;
+  }
+  return Object.values(obj).every(isNotEmpty);
+};
+const objectHasSomeValues = (obj) => {
+  if (isEmpty(obj)) {
+    return false;
+  }
+  return Object.values(obj).some(isNotEmpty);
+};
+const getObjectProp = (obj, prop, fallback = "") => prop.split(".").reduce((value, key) => isObject(value) && value[key] || fallback, obj);
+const objectRemoveEmpty = (obj) => {
+  if (!isObject(obj)) {
+    return {};
+  }
+  return Object.entries(obj).filter(([, value]) => !!value).reduce(
+    (carry, [k, value]) => ({
+      ...carry,
+      [k]: value
+    }),
+    {}
+  );
+};
+const objectOmit = (obj, props) => {
+  if (!isObject(obj)) {
+    return {};
+  }
+  const omit = 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 (isObject(source[key]) && isObject(target[key])) {
+        objectDeepMerge(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    }
+  }
+  return target;
+};
+
+export { getObjectProp, objectDeepMerge, objectHasAllValues, objectHasSomeValues, objectOmit, objectRemoveEmpty, pick, transformArrToObject };

package/dist/esm/utils/helpers/string.js

@@ -0,0 +1,15 @@
+"use strict";
+import { isString } from './boolean.js';
+
+const stripTags = (str) => str.replace(/(<([^>]+)>)/gi, "");
+const stripNonNumeric = (str) => {
+  if (str && 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)}`;
+
+export { strPadStart, stripNonNumeric, stripTags, toString, ucFirstChar };

package/dist/esm/utils/helpers/time.js

@@ -0,0 +1,59 @@
+"use strict";
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { range } from './array.js';
+import { strPadStart } from './string.js';
+
+dayjs.extend(customParseFormat);
+const getHourOptions = (disableFirstOption = false) => {
+  const options = range(1, 12).map((hour) => {
+    const formatted = strPadStart(hour, 2, "0");
+    return {
+      label: formatted,
+      value: formatted
+    };
+  });
+  return [
+    {
+      label: "",
+      value: "",
+      disabled: disableFirstOption
+    },
+    ...options
+  ];
+};
+const getMinuteOptions = (min, max, step, disableFirstOption = false) => {
+  const options = range(min, max, step).map((minute) => {
+    const formatted = 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);
+
+export { getHourOptions, getMeridianOptions, getMinuteOptions, parseTimeStrByFormat };