@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/index.cjs

@@ -0,0 +1,182 @@
+"use strict";
+'use strict';
+
+var Alert = require('./components/Alert.cjs');
+var Autocomplete = require('./components/Autocomplete.cjs');
+var Avatar = require('./components/Avatar.cjs');
+var AvatarInput = require('./components/AvatarInput.cjs');
+var Badge = require('./components/Badge.cjs');
+var BankAccountInput = require('./components/BankAccountInput.cjs');
+var Bar = require('./components/Bar.cjs');
+var BooleanInput = require('./components/BooleanInput.cjs');
+var Button = require('./components/Button.cjs');
+var Box = require('./components/Box.cjs');
+var Card = require('./components/Card.cjs');
+var CardContent = require('./components/CardContent.cjs');
+var Checkbox = require('./components/Checkbox.cjs');
+var CircularProgress = require('./components/CircularProgress.cjs');
+var Container = require('./components/Container.cjs');
+var LinearProgress = require('./components/LinearProgress.cjs');
+var CollapsedText = require('./components/CollapsedText.cjs');
+var Confirmation = require('./components/Confirmation.cjs');
+var CroppedImageInput = require('./components/CroppedImageInput.cjs');
+var DateInput = require('./components/DateInput.cjs');
+var DatePicker = require('./components/DatePicker.cjs');
+var Divider = require('./components/Divider.cjs');
+var DropZone = require('./components/DropZone.cjs');
+var Embed = require('./components/Embed.cjs');
+var FileUpload = require('./components/FileUpload.cjs');
+var FileUploadButton = require('./components/FileUploadButton.cjs');
+var FileViewer = require('./components/FileViewer.cjs');
+var FlashMessage = require('./components/FlashMessage.cjs');
+var FormControl = require('./components/FormControl.cjs');
+var FormLabel = require('./components/FormLabel.cjs');
+var Grid = require('./components/Grid.cjs');
+var Heading = require('./components/Heading.cjs');
+var IconButton = require('./components/IconButton.cjs');
+var Link = require('./components/Link.cjs');
+var Media = require('./components/Media.cjs');
+var Modal = require('./components/Modal.cjs');
+var ModalActions = require('./components/ModalActions.cjs');
+var ModalContent = require('./components/ModalContent.cjs');
+var ModalHeader = require('./components/ModalHeader.cjs');
+var Nameplate = require('./components/Nameplate.cjs');
+var Pagination = require('./components/Pagination.cjs');
+var Popper = require('./components/Popper.cjs');
+var Paper = require('./components/Paper.cjs');
+var PropertyCard = require('./components/PropertyCard.cjs');
+var Radio = require('./components/Radio.cjs');
+var Rating = require('./components/Rating.cjs');
+var Select = require('./components/Select.cjs');
+var Skeleton = require('./components/Skeleton.cjs');
+var Stepper = require('./components/Stepper.cjs');
+var SuccessModal = require('./components/SuccessModal.cjs');
+var Switch = require('./components/Switch.cjs');
+var Tab = require('./components/Tab.cjs');
+var TabPanel = require('./components/TabPanel.cjs');
+var Tabs = require('./components/Tabs.cjs');
+var Tag = require('./components/Tag.cjs');
+var Text = require('./components/Text.cjs');
+var TextInput = require('./components/TextInput.cjs');
+var ThemeProvider = require('./components/ThemeProvider.cjs');
+var TimeInput = require('./components/TimeInput.cjs');
+var Tooltip = require('./components/Tooltip.cjs');
+var Table = require('./components/Table.cjs');
+var TableBody = require('./components/TableBody.cjs');
+var TableCell = require('./components/TableCell.cjs');
+var TableRow = require('./components/TableRow.cjs');
+var TableContainer = require('./components/TableContainer.cjs');
+var TableFooter = require('./components/TableFooter.cjs');
+var TableHead = require('./components/TableHead.cjs');
+var Truncate = require('./components/Truncate.cjs');
+var loadFont = require('./utils/loadFont.cjs');
+var ButtonBase = require('@mui/material/ButtonBase');
+var Drawer = require('@mui/material/Drawer');
+var Accordion = require('@mui/material/Accordion');
+var AccordionSummary = require('@mui/material/AccordionSummary');
+var AccordionDetails = require('@mui/material/AccordionDetails');
+var AccordionActions = require('@mui/material/AccordionActions');
+var CardHeader = require('@mui/material/CardHeader');
+var ClickAwayListener = require('@mui/material/ClickAwayListener');
+var FormHelperText = require('@mui/material/FormHelperText');
+var InputAdornment = require('@mui/material/InputAdornment');
+var InputBase = require('@mui/material/InputBase');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var Autocomplete$1 = require('@mui/material/Autocomplete');
+var styles = require('@mui/material/styles');
+
+
+
+exports.Alert = Alert.default;
+exports.Autocomplete = Autocomplete.default;
+exports.Avatar = Avatar.default;
+exports.AvatarInput = AvatarInput.default;
+exports.Badge = Badge.default;
+exports.BankAccountInput = BankAccountInput.default;
+exports.Bar = Bar.default;
+exports.BooleanInput = BooleanInput.default;
+exports.Button = Button.default;
+exports.Box = Box.default;
+exports.Card = Card.default;
+exports.CardContent = CardContent.default;
+exports.Checkbox = Checkbox.default;
+exports.CircularProgress = CircularProgress.default;
+exports.Container = Container.default;
+exports.LinearProgress = LinearProgress.default;
+exports.CollapsedText = CollapsedText.default;
+exports.Confirmation = Confirmation.default;
+exports.CroppedImageInput = CroppedImageInput.default;
+exports.DateInput = DateInput.default;
+exports.DatePicker = DatePicker.default;
+exports.Divider = Divider.default;
+exports.DropZone = DropZone.default;
+exports.Embed = Embed.default;
+exports.FileUpload = FileUpload.default;
+exports.FileUploadButton = FileUploadButton.default;
+exports.FileViewer = FileViewer.default;
+exports.FlashMessage = FlashMessage.default;
+exports.FormControl = FormControl.default;
+exports.FormLabel = FormLabel.default;
+exports.Grid = Grid.default;
+exports.Heading = Heading.default;
+exports.IconButton = IconButton.default;
+exports.Link = Link.default;
+exports.Media = Media.default;
+exports.Modal = Modal.default;
+exports.ModalActions = ModalActions.default;
+exports.ModalContent = ModalContent.default;
+exports.ModalHeader = ModalHeader.default;
+exports.Nameplate = Nameplate.default;
+exports.Pagination = Pagination.default;
+exports.Popper = Popper.default;
+exports.Paper = Paper.default;
+exports.PropertyCard = PropertyCard.default;
+exports.Radio = Radio.default;
+exports.Rating = Rating.default;
+exports.Select = Select.default;
+exports.Skeleton = Skeleton.default;
+exports.Stepper = Stepper.default;
+exports.SuccessModal = SuccessModal.default;
+exports.Switch = Switch.default;
+exports.Tab = Tab.default;
+exports.TabPanel = TabPanel.default;
+exports.Tabs = Tabs.default;
+exports.Tag = Tag.default;
+exports.Text = Text.default;
+exports.TextInput = TextInput.default;
+exports.ThemeProvider = ThemeProvider.default;
+exports.TimeInput = TimeInput.default;
+exports.Tooltip = Tooltip.default;
+exports.Table = Table.default;
+exports.TableBody = TableBody.default;
+exports.TableCell = TableCell.default;
+exports.TableRow = TableRow.default;
+exports.TableContainer = TableContainer.default;
+exports.TableFooter = TableFooter.default;
+exports.TableHead = TableHead.default;
+exports.Truncate = Truncate.default;
+exports.loadFont = loadFont.default;
+exports.ButtonBase = ButtonBase;
+exports.Drawer = Drawer;
+exports.Accordion = Accordion;
+exports.AccordionSummary = AccordionSummary;
+exports.AccordionDetails = AccordionDetails;
+exports.AccordionActions = AccordionActions;
+exports.CardHeader = CardHeader;
+exports.ClickAwayListener = ClickAwayListener;
+exports.FormHelperText = FormHelperText;
+exports.InputAdornment = InputAdornment;
+exports.InputBase = InputBase;
+exports.useMediaQuery = useMediaQuery;
+Object.defineProperty(exports, "createAutocompleteFilterOptions", {
+	enumerable: true,
+	get: function () { return Autocomplete$1.createFilterOptions; }
+});
+Object.defineProperty(exports, "styled", {
+	enumerable: true,
+	get: function () { return styles.styled; }
+});
+Object.defineProperty(exports, "useTheme", {
+	enumerable: true,
+	get: function () { return styles.useTheme; }
+});

package/dist/cjs/theme/index.cjs

@@ -0,0 +1,252 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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";
+
+exports.default = theme;
+exports.fontUrl = fontUrl;

package/dist/cjs/utils/animations.cjs

@@ -0,0 +1,68 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+
+const easing = {
+  rubber: "cubic-bezier(0.175, 0.885, 0.335, 1.05)"
+};
+const rotate360 = styled.keyframes`
+	0% {
+    transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(1turn);
+	}
+`;
+const glow = styled.keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: .4; }
+`;
+const float = styled.keyframes`
+  0% { transform: translateY(1px); }
+  25% { transform: translateY(0px); }
+  50% { transform: translateY(-3px); }
+  100% { transform: translateY(1px); }
+`;
+const jiggle = styled.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 = styled.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 = styled.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;
+`;
+
+exports.easing = easing;
+exports.float = float;
+exports.glow = glow;
+exports.inlineGlow = inlineGlow;
+exports.jiggle = jiggle;
+exports.rotate360 = rotate360;
+exports.shake = shake;

package/dist/cjs/utils/colors.cjs

@@ -0,0 +1,31 @@
+"use strict";
+'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;
+};
+
+exports.hexToRgba = hexToRgba;
+exports.mixColors = mixColors;

package/dist/cjs/utils/constants.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+const ORIENTATION_HORIZONTAL = "horizontal";
+const ORIENTATION_VERTICAL = "vertical";
+
+exports.ORIENTATION_HORIZONTAL = ORIENTATION_HORIZONTAL;
+exports.ORIENTATION_VERTICAL = ORIENTATION_VERTICAL;

package/dist/cjs/utils/files.cjs

@@ -0,0 +1,44 @@
+"use strict";
+'use strict';
+
+var mime = require('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);
+};
+
+exports.getFileExtension = getFileExtension;
+exports.getFileName = getFileName;
+exports.getFileNameFromURL = getFileNameFromURL;
+exports.isImage = isImage;

package/dist/cjs/utils/helpers/array.cjs

@@ -0,0 +1,24 @@
+"use strict";
+'use strict';
+
+var boolean = require('./boolean.cjs');
+
+const implode = (delimiter, arr, noEmpty = true) => (noEmpty ? arr.filter((item) => !boolean.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 (!boolean.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);
+};
+
+exports.arrayUnique = arrayUnique;
+exports.implode = implode;
+exports.range = range;

package/dist/cjs/utils/helpers/boolean.cjs

@@ -0,0 +1,25 @@
+"use strict";
+'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);
+
+exports.isArray = isArray;
+exports.isEmpty = isEmpty;
+exports.isFunction = isFunction;
+exports.isNotEmpty = isNotEmpty;
+exports.isNumber = isNumber;
+exports.isNumeric = isNumeric;
+exports.isObject = isObject;
+exports.isString = isString;

package/dist/cjs/utils/helpers/date.cjs

@@ -0,0 +1,11 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dayjs = require('dayjs');
+var customParseFormat = require('dayjs/plugin/customParseFormat');
+
+dayjs.extend(customParseFormat);
+
+exports.default = dayjs;

package/dist/cjs/utils/helpers/dateSelect.cjs

@@ -0,0 +1,41 @@
+"use strict";
+'use strict';
+
+var array = require('./array.cjs');
+require('./date.cjs');
+var string = require('./string.cjs');
+var dayjs = require('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 = array.range(1, 31).map((val) => string.strPadStart(val, 2, "0"));
+  return ["", ...options];
+};
+const monthOptions = () => {
+  const options = array.range(1, 12).map((val) => string.strPadStart(val, 2, "0"));
+  return ["", ...options];
+};
+const yearOptions = (rng) => {
+  const [min, max] = getYearRange(rng);
+  const options = array.range(min, max).map((val) => string.toString(val));
+  return ["", ...options];
+};
+
+exports.dayOptions = dayOptions;
+exports.getYearRange = getYearRange;
+exports.monthOptions = monthOptions;
+exports.rangeYearValue = rangeYearValue;
+exports.yearOptions = yearOptions;