@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/DateSelect.cjs

@@ -0,0 +1,212 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Autocomplete = require('./Autocomplete.cjs');
+var FormControl = require('./FormControl.cjs');
+var Grid = require('./Grid.cjs');
+var Text = require('./Text.cjs');
+var DateSelect_styled = require('./DateSelect.styled.cjs');
+require('../utils/helpers/date.cjs');
+var dateSelect = require('../utils/helpers/dateSelect.cjs');
+var boolean = require('../utils/helpers/boolean.cjs');
+require('mime/lite');
+require('../utils/helpers/time.cjs');
+var dayjs = require('dayjs');
+
+const prepareValue = (value, max, pad) => {
+  const parsed = parseInt(value, 10);
+  if (isNaN(parsed) || parsed === 0) {
+    return "";
+  }
+  if (max && parsed > max) {
+    return "";
+  }
+  if (pad) {
+    return value.padStart(pad, "0");
+  }
+  return value;
+};
+function DateSelect({
+  disabled = false,
+  fromFormat = "YYYY-MM-DD",
+  name,
+  onChange,
+  required = false,
+  size = "medium",
+  toFormat = "YYYY-MM-DD",
+  value = "",
+  variant = "outlined",
+  yearRange = "-5:5",
+  selectProps = {},
+  ...rest
+}) {
+  const [day, setDay] = React.useState(null);
+  const [month, setMonth] = React.useState(null);
+  const [year, setYear] = React.useState(null);
+  React.useEffect(() => {
+    const parsed = dayjs(value, fromFormat);
+    if (parsed.isValid()) {
+      setDay(parsed.format("DD"));
+      setMonth(parsed.format("MM"));
+      setYear(parsed.format("YYYY"));
+    }
+  }, [fromFormat, value]);
+  const handleChange = ({ y, m, d }) => {
+    const values = {
+      year,
+      month,
+      day,
+      ...y !== void 0 && { year: y },
+      ...m !== void 0 && { month: m },
+      ...d !== void 0 && { day: d }
+    };
+    setDay(values.day);
+    setMonth(values.month);
+    setYear(values.year);
+    const filtered = Object.values([
+      values.year,
+      values.month,
+      values.day
+    ]).filter((v) => !!v);
+    if (filtered.length === 3) {
+      const parsed = dayjs(filtered.join("-"), "YYYY-MM-DD");
+      if (boolean.isFunction(onChange)) {
+        onChange(!parsed.isValid() ? "" : parsed.format(toFormat));
+      }
+    } else if (boolean.isFunction(onChange)) {
+      onChange("");
+    }
+  };
+  const ddProps = {
+    disabled,
+    noOptionsText: "",
+    fullWidth: true,
+    disableClearable: true,
+    required,
+    size,
+    variant,
+    freeSolo: true,
+    ...selectProps
+  };
+  const separator = /* @__PURE__ */ jsxRuntime.jsx(Grid.default, { item: true, sx: { color: "grey.400" }, children: /* @__PURE__ */ jsxRuntime.jsx(Text.default, { color: "inherit", variant: "body1", children: "/" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(FormControl.default, { fullWidth: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(DateSelect_styled.default, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Grid.default,
+    {
+      container: true,
+      spacing: 2,
+      alignItems: "center",
+      sx: { flexWrap: "nowrap" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Grid.default,
+          {
+            item: true,
+            sx: {
+              flexGrow: 0.5,
+              minWidth: {
+                xs: 70,
+                sm: 80
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Autocomplete.default,
+              {
+                ...ddProps,
+                name: `${name}_day`,
+                options: dateSelect.dayOptions(),
+                placeholder: "DD",
+                textInputAttrs: {
+                  maxLength: 2,
+                  inputMode: "numeric"
+                },
+                onInputChange: (_, val) => {
+                  setDay(val);
+                },
+                onBlur: (e) => {
+                  const d = prepareValue(e.target.value, 31, 2);
+                  handleChange({ d });
+                },
+                value: day
+              }
+            )
+          }
+        ),
+        separator,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Grid.default,
+          {
+            item: true,
+            sx: {
+              flexGrow: 0.5,
+              minWidth: {
+                xs: 70,
+                sm: 80
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Autocomplete.default,
+              {
+                ...ddProps,
+                name: `${name}_month`,
+                options: dateSelect.monthOptions(),
+                onInputChange: (_, val) => {
+                  setMonth(val);
+                },
+                onBlur: (e) => {
+                  const m = prepareValue(e.target.value, 12, 2);
+                  handleChange({ m });
+                },
+                textInputAttrs: {
+                  maxLength: 2,
+                  inputMode: "numeric"
+                },
+                placeholder: "MM",
+                value: month
+              }
+            )
+          }
+        ),
+        separator,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Grid.default,
+          {
+            item: true,
+            sx: {
+              flexGrow: 2,
+              minWidth: {
+                sm: 110
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Autocomplete.default,
+              {
+                ...ddProps,
+                name: `${name}_year`,
+                options: dateSelect.yearOptions(yearRange),
+                onInputChange: (_, val) => {
+                  setYear(val);
+                },
+                onBlur: (e) => {
+                  const y = prepareValue(e.target.value);
+                  handleChange({ y });
+                },
+                textInputAttrs: {
+                  maxLength: 4,
+                  inputMode: "numeric"
+                },
+                placeholder: "YYYY",
+                value: year
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+exports.default = DateSelect;

package/dist/cjs/components/DateSelect.styled.cjs

@@ -0,0 +1,15 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+var styles = require('@mui/material/styles');
+
+const StyledDateSelect = styles.styled(
+  "div"
+)`
+  width: 100%;
+`;
+
+exports.default = StyledDateSelect;

package/dist/cjs/components/Divider.cjs

@@ -0,0 +1,67 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Divider_styled = require('./Divider.styled.cjs');
+
+function Divider({
+  as = "hr",
+  classes = "",
+  color = "default",
+  dense = false,
+  disableGutter = false,
+  flexItem = false,
+  orientation = "horizontal",
+  variant = "dotted"
+}) {
+  const props = {
+    as,
+    color,
+    dense,
+    disableGutter,
+    flexItem,
+    orientation,
+    variant
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Divider_styled.StyledDivider, { className: classes, ...props });
+}
+Divider.propTypes = {
+  /**
+   * The element used for the root node.
+   */
+  as: PropTypes.oneOf(["div", "hr", "li", "p", "span"]),
+  /**
+   * Extend the classes to creates extra styles of the component.
+   */
+  classes: PropTypes.string,
+  /**
+   * Defines the color of line
+   */
+  color: PropTypes.oneOf(["default", "inherit"]),
+  /**
+   * If `true`, compact vertical margin will be used
+   */
+  dense: PropTypes.bool,
+  /**
+   * If `true`, compact vertical margin will be used
+   */
+  flexItem: PropTypes.bool,
+  /**
+   * If `true`, vertical margin will be removed.
+   */
+  disableGutter: PropTypes.bool,
+  /**
+   * Defines the color of line
+   */
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+  /**
+   * Defines the style of line
+   */
+  variant: PropTypes.oneOf(["solid", "dotted", "dashed"])
+};
+
+exports.default = Divider;

package/dist/cjs/components/Divider.styled.cjs

@@ -0,0 +1,62 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+
+const StyledDivider = styled.hr`
+  ${({
+  as,
+  color,
+  dense,
+  disableGutter,
+  flexItem,
+  orientation,
+  variant,
+  theme
+}) => styled.css`
+    color: inherit;
+    background: transparent;
+    border-style: ${variant};
+    border-color: ${color === "default" ? theme.palette.grey[300] : "currentColor"};
+    flex-shrink: 0;
+    list-style-type: none;
+
+    ${as === "span" && styled.css`
+      display: block;
+    `}
+
+    ${flexItem && styled.css`
+      align-self: stretch;
+    `}
+
+    ${disableGutter && styled.css`
+      margin: 0;
+    `}
+
+    ${orientation === "horizontal" && !disableGutter && !dense && styled.css`
+      margin: 1rem 0;
+    `}
+
+    ${orientation === "horizontal" && !disableGutter && dense && styled.css`
+      margin: 0.4rem 0;
+    `}
+
+    ${orientation === "vertical" && !disableGutter && !dense && styled.css`
+      margin: 0 1rem;
+    `}
+
+    ${orientation === "vertical" && !disableGutter && dense && styled.css`
+      margin: 0 0.4rem;
+    `}
+
+    ${orientation === "horizontal" && !flexItem && styled.css`
+      border-width: 0px 0px thin 0px;
+    `}
+
+    ${(orientation === "vertical" || flexItem) && styled.css`
+      border-width: 0px thin 0px 0px;
+    `}
+  `}
+`;
+
+exports.StyledDivider = StyledDivider;

package/dist/cjs/components/DropZone.cjs

@@ -0,0 +1,153 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Typography = require('@mui/material/Typography');
+var reactDropzone = require('react-dropzone');
+var CloudUploadIcon = require('@mui/icons-material/CloudUpload');
+var CheckCircleIcon = require('@mui/icons-material/CheckCircle');
+var WarningIcon = require('@mui/icons-material/Warning');
+var framerMotion = require('framer-motion');
+var file = require('../utils/helpers/file.cjs');
+require('../utils/helpers/time.cjs');
+var Alert = require('./Alert.cjs');
+var DropZone_styled = require('./DropZone.styled.cjs');
+
+function DropZone({
+  loading = false,
+  compact = false,
+  disabled = false,
+  onDrop,
+  edges = "normal",
+  dropzoneLabel = "Upload file",
+  dropzoneDescription = "Drag and drop a file here, or click to select a file",
+  dropzoneProps = null,
+  listAcceptedFiles = false
+}) {
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    acceptedFiles,
+    fileRejections
+  } = reactDropzone.useDropzone({
+    onDrop,
+    disabled,
+    ...dropzoneProps
+  });
+  const hasErrors = fileRejections.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DropZone_styled.StyledWrapper,
+      {
+        compact: compact ? "yes" : "no",
+        disabled,
+        edges,
+        errors: hasErrors ? "yes" : "no",
+        ...getRootProps(),
+        sx: {
+          mb: 1
+        },
+        children: [
+          isDragActive && /* @__PURE__ */ jsxRuntime.jsx(DropZone_styled.StyledDraggingIndicator, { isDragReject }),
+          loading && !hasErrors && /* @__PURE__ */ jsxRuntime.jsx(DropZone_styled.StyledLoader, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+          isDragAccept && /* @__PURE__ */ jsxRuntime.jsx(DropZone_styled.StyledIcon, { compact, children: /* @__PURE__ */ jsxRuntime.jsx(CheckCircleIcon, { color: "inherit", fontSize: "inherit" }) }),
+          isDragReject && /* @__PURE__ */ jsxRuntime.jsx(DropZone_styled.StyledIcon, { compact, children: /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, { color: "inherit", fontSize: "inherit" }) }),
+          !isDragAccept && !isDragReject && /* @__PURE__ */ jsxRuntime.jsx(DropZone_styled.StyledIcon, { compact, children: /* @__PURE__ */ jsxRuntime.jsx(CloudUploadIcon, { color: "inherit", fontSize: "inherit" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "subtitle2", align: "center", children: isDragReject ? "Error" : dropzoneLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", align: "center", color: "textSecondary", children: isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { children: [
+      listAcceptedFiles && acceptedFiles.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { translateY: -20, opacity: 0 },
+          animate: { translateY: 0, opacity: 1 },
+          exit: { translateY: -20, opacity: 0 },
+          transition: { duration: 0.25, ease: "easeOut" },
+          children: acceptedFiles.map((file) => /* @__PURE__ */ jsxRuntime.jsx(
+            Alert.default,
+            {
+              variant: "standard",
+              severity: "success",
+              style: { marginBottom: 5 },
+              children: file.path
+            },
+            file.path
+          ))
+        }
+      ),
+      hasErrors && /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { translateY: -20, opacity: 0 },
+          animate: { translateY: 0, opacity: 1 },
+          exit: { translateY: -20, opacity: 0 },
+          transition: { duration: 0.25, ease: "easeOut" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Alert.default, { severity: "info", variant: "standard", children: fileRejections.map(({ file: file$1, errors }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            file$1.path,
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { children: errors.map((e) => {
+              if (e.code === "file-too-large") {
+                return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                  "File size is larger than",
+                  " ",
+                  file.formatBytes(dropzoneProps.maxSize)
+                ] }, e.code);
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx("li", { children: e.message }, e.code);
+            }) })
+          ] }, file$1.path)) })
+        }
+      )
+    ] })
+  ] });
+}
+DropZone.propTypes = {
+  /**
+   * Whether or not to show a list of accepted files.
+   */
+  listAcceptedFiles: PropTypes.bool,
+  /**
+   * Show progress spinner
+   */
+  loading: PropTypes.bool,
+  /**
+   * Compact Layout
+   */
+  compact: PropTypes.bool,
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Text label displayed in the dropzone
+   */
+  dropzoneLabel: PropTypes.string,
+  /**
+   * Text description displayed in the dropzone
+   */
+  dropzoneDescription: PropTypes.string,
+  /**
+   * Pass props for react-dropzone. See https://react-dropzone.js.org/
+   */
+  dropzoneProps: PropTypes.object,
+  /**
+   * Function: do something when user drops image
+   */
+  onDrop: PropTypes.func.isRequired,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"])
+};
+
+exports.default = DropZone;

package/dist/cjs/components/DropZone.styled.cjs

@@ -0,0 +1,76 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+var Box = require('@mui/material/Box');
+var CircularProgress = require('@mui/material/CircularProgress');
+var LinearProgress = require('@mui/material/LinearProgress');
+var colors = require('../utils/colors.cjs');
+
+const borderRadius = (edges, theme) => {
+  switch (edges) {
+    case "rounded":
+      return 99;
+    case "sharp":
+      return 0;
+    default:
+      return theme.shape.borderRadius;
+  }
+};
+const StyledWrapper = styles.styled(Box)(
+  ({ compact, disabled, edges, errors, theme }) => ({
+    position: "relative",
+    display: compact === "yes" ? "flex" : "block",
+    textAlign: "center",
+    border: `2px dashed ${errors === "yes" ? theme.palette.error.main : theme.palette.primary.main}`,
+    padding: compact === "yes" ? theme.spacing(2, 4) : theme.spacing(6, 4),
+    background: disabled ? theme.palette.grey[300] : null,
+    opacity: disabled ? 0.5 : 1,
+    borderRadius: borderRadius(edges, theme),
+    "&:focus": {
+      border: `2px solid ${theme.palette.primary.main}`,
+      outline: "none",
+      background: colors.hexToRgba(theme.palette.primary.main, 0.1)
+    },
+    alignItems: "center",
+    "& .MuiTypography-root": {
+      marginRight: compact === "yes" ? theme.spacing(2) : 0
+    }
+  })
+);
+const StyledDraggingIndicator = styles.styled(LinearProgress)(
+  ({ isDragReject, theme }) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: "100%",
+    width: "100%",
+    opacity: 0.2,
+    backgroundColor: isDragReject ? theme.palette.error.main : theme.palette.primary.main,
+    "& .MuiLinearProgress-barColorPrimary": {
+      background: colors.mixColors(
+        isDragReject ? theme.palette.error.main : theme.palette.primary.main,
+        "#ffffff",
+        60
+      )
+    }
+  })
+);
+const StyledLoader = styles.styled(CircularProgress)({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  marginTop: -20,
+  marginLeft: -20
+});
+const StyledIcon = styles.styled("div")(({ compact, theme }) => ({
+  display: "inline-flex",
+  color: theme.palette.default.light,
+  margin: compact ? `0 ${theme.spacing(2)} 0 0` : "0 auto",
+  fontSize: compact ? "2rem" : "4rem"
+}));
+
+exports.StyledDraggingIndicator = StyledDraggingIndicator;
+exports.StyledIcon = StyledIcon;
+exports.StyledLoader = StyledLoader;
+exports.StyledWrapper = StyledWrapper;

package/dist/cjs/components/Embed.cjs

@@ -0,0 +1,41 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var CircularProgress = require('./CircularProgress.cjs');
+var Embed_styled = require('./Embed.styled.cjs');
+
+function Embed({ height = "50%", src, width = "100%" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Embed_styled.StyledEmbed, { height, width, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Embed_styled.StyledBox, { children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress.default, { size: 50 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Embed_styled.StyledEmbedFrame,
+      {
+        src,
+        frameborder: "0",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+        allowfullscreen: true
+      }
+    )
+  ] });
+}
+Embed.propTypes = {
+  /**
+   * Defines the height of embed container
+   */
+  height: PropTypes.string,
+  /**
+   * Url to embed in frame
+   */
+  src: PropTypes.string.isRequired,
+  /**
+   * Defines the width of embed container
+   */
+  width: PropTypes.string
+};
+
+exports.default = Embed;

package/dist/cjs/components/Embed.styled.cjs

@@ -0,0 +1,38 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+var Box = require('./Box.cjs');
+
+const StyledEmbed = styled.div`
+  ${({ height, width }) => styled.css`
+    position: relative;
+    padding-bottom: ${height};
+    height: 0;
+    overflow: hidden;
+    width: ${width};
+  `}
+`;
+const StyledEmbedFrame = styled.iframe`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 3;
+`;
+const StyledBox = styled(Box.default)`
+  display: flex !important;
+  position: absolute;
+  left: 0;
+  top: 0;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+`;
+
+exports.StyledBox = StyledBox;
+exports.StyledEmbed = StyledEmbed;
+exports.StyledEmbedFrame = StyledEmbedFrame;