@tenancy.nz/ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,85 @@
+"use strict";
+import styled$1, { css } from 'styled-components';
+import { motion } from 'framer-motion';
+import { styled } from '@mui/material/styles';
+import CircularProgress from '@mui/material/CircularProgress';
+import DescriptionIcon from '@mui/icons-material/Description';
+
+const borderRadius = (edges, theme) => {
+  switch (edges) {
+    case "rounded":
+      return 99;
+    case "sharp":
+      return 0;
+    default:
+      return theme.shape.borderRadius;
+  }
+};
+const StyledFileIcon = styled(DescriptionIcon)(({ compact, theme }) => ({
+  color: theme.palette.default.light,
+  margin: compact ? `0 ${theme.spacing(2)} 0 0` : "0 auto",
+  fontSize: compact ? "2rem" : "4rem"
+}));
+const StyledSavedImage = styled(motion.div)(({ edges, theme }) => ({
+  borderRadius: borderRadius(edges, theme),
+  border: `1px solid ${theme.palette.text.secondary}`,
+  padding: theme.spacing(6, 4),
+  "& img": {
+    maxWidth: "100%",
+    width: "auto",
+    hieght: "auto",
+    margin: "0 auto",
+    boxShadow: theme.shadows[10],
+    display: "block"
+  }
+}));
+const StyledEditor = styled("div")(({ edges, showError, theme }) => ({
+  width: "100%",
+  padding: theme.spacing(6, 4),
+  backgroundImage: `linear-gradient(45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(-45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${theme.palette.grey[700]} 75%), linear-gradient(-45deg, transparent 75%, ${theme.palette.grey[700]} 75%)`,
+  backgroundSize: "20px 20px",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+  border: `1px solid ${showError ? theme.palette.error.main : theme.palette.primary.main}`,
+  borderRadius: borderRadius(edges, theme),
+  "& .ReactCrop": {
+    margin: "0 auto",
+    display: "block"
+  }
+}));
+const StyledCircularProgress = styled(CircularProgress)({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  marginTop: -20,
+  marginLeft: -20,
+  zIndex: 1
+});
+const StyledDeleteIcon = styled$1.span`
+  ${({ theme }) => css`
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    right: 25px;
+    z-index: 9;
+    background: transparent;
+    color: ${theme.palette.grey.main};
+    width: 48px;
+    height: 48px;
+    font-size: 20px;
+    transition: all 0.25s ease-in-out;
+    transform: translateY(-50%) scale(0.9);
+    box-shadow: ${theme.shadows[2]};
+    border-radius: 50%;
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+      transform: translateY(-50%) scale(1.05);
+      color: ${theme.palette.secondary.main};
+      box-shadow: ${theme.shadows[4]};
+    }
+  `}
+`;
+
+export { StyledCircularProgress, StyledDeleteIcon, StyledEditor, StyledFileIcon, StyledSavedImage };

package/dist/esm/components/CroppedImageInputActions.js

@@ -0,0 +1,74 @@
+"use strict";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Box from './Box.js';
+import Button from './Button.js';
+import Grid from './Grid.js';
+
+function CroppedImageInputActions({
+  handleCancel,
+  cancelling = false,
+  cancelButtonProps,
+  handleImageSave,
+  saving = false,
+  saveButtonProps,
+  disabled = false
+}) {
+  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
+  return (
+    // <Animate key="edit-controls">
+    /* @__PURE__ */ jsx(Box, { paddingTop: "1.25rem", children: /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        container: true,
+        justifyContent: "flex-end",
+        direction: isNotMobile ? "row" : "column-reverse",
+        spacing: 5,
+        children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              loading: true,
+              color: "primaryAlt",
+              variant: "outlined",
+              size: "large",
+              onClick: handleCancel,
+              pending: cancelling,
+              disabled,
+              fullWidth: !isNotMobile,
+              ...cancelButtonProps,
+              children: cancelButtonProps.text || "Cancel"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              loading: true,
+              color: "primary",
+              size: "large",
+              onClick: handleImageSave,
+              pending: saving,
+              disabled,
+              fullWidth: !isNotMobile,
+              ...saveButtonProps,
+              children: saveButtonProps.text || "Save"
+            }
+          ) })
+        ]
+      }
+    ) })
+  );
+}
+CroppedImageInputActions.propTypes = {
+  handleCancel: PropTypes.func.isRequired,
+  cancelling: PropTypes.bool,
+  cancelButtonProps: PropTypes.object.isRequired,
+  handleImageSave: PropTypes.func.isRequired,
+  saving: PropTypes.bool,
+  saveButtonProps: PropTypes.object.isRequired,
+  disabled: PropTypes.bool
+};
+
+export { CroppedImageInputActions as default };

package/dist/esm/components/DateInput.js

@@ -0,0 +1,214 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@mui/material/Grid';
+import FormControl from './FormControl.js';
+import DateNumberInput from './DateNumberInput.js';
+import { StyledDay, StyledSlash, StyledMonth, StyledYear } from './DateInput.styled.js';
+
+const isLeapYear = (year) => year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+function DateInput({
+  disabled = false,
+  fullWidth = false,
+  helperText = "",
+  helperTextPlacement = "below",
+  label = "",
+  required = false,
+  showError = false,
+  errorMessage = "",
+  edges = "normal",
+  name,
+  minYear = 1900,
+  maxYear = 2100,
+  onChange,
+  value = {}
+}) {
+  const [maxDays, setMaxDays] = useState(31);
+  const dayInput = useRef(null);
+  const monthInput = useRef(null);
+  const yearInput = useRef(null);
+  const handleDayChange = (day2) => {
+    onChange({ ...value, day: day2 });
+  };
+  const handleMonthChange = (month2) => {
+    onChange({ ...value, month: month2 });
+  };
+  const handleYearChange = (year2) => {
+    onChange({ ...value, year: year2 });
+  };
+  const { day, month, year } = value;
+  useEffect(() => {
+    const hasThirtyDays = [4, 6, 9, 11];
+    if (parseInt(month, 10) === 2) {
+      setMaxDays(isLeapYear(year) ? 29 : 28);
+    } else if (hasThirtyDays.includes(parseInt(month, 10))) {
+      setMaxDays(30);
+    } else {
+      setMaxDays(31);
+    }
+  }, [month, year]);
+  return /* @__PURE__ */ jsxs(
+    FormControl,
+    {
+      fullWidth,
+      name,
+      label,
+      helperText,
+      helperTextPlacement,
+      disabled,
+      required,
+      showError,
+      errorMessage,
+      edges,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            name,
+            style: {
+              height: 0,
+              width: 0,
+              appearance: "none",
+              border: "none",
+              outline: "none",
+              margin: 0,
+              padding: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Grid,
+          {
+            container: true,
+            spacing: 2,
+            style: {
+              flexWrap: "nowrap"
+            },
+            alignItems: "center",
+            children: [
+              /* @__PURE__ */ jsx(StyledDay, { item: true, children: /* @__PURE__ */ jsx(
+                DateNumberInput,
+                {
+                  disabled,
+                  min: 1,
+                  max: maxDays,
+                  placeholder: "DD",
+                  leadingZero: true,
+                  onChange: handleDayChange,
+                  value: day,
+                  name: `${name}_day`,
+                  inputRef: dayInput,
+                  required,
+                  label: "Day",
+                  hideLabel: true
+                }
+              ) }),
+              /* @__PURE__ */ jsx(StyledSlash, { item: true, children: "/" }),
+              /* @__PURE__ */ jsx(StyledMonth, { item: true, children: /* @__PURE__ */ jsx(
+                DateNumberInput,
+                {
+                  disabled,
+                  min: 1,
+                  max: 12,
+                  placeholder: "MM",
+                  leadingZero: true,
+                  onChange: handleMonthChange,
+                  value: month,
+                  name: `${name}_month`,
+                  inputRef: monthInput,
+                  required,
+                  label: "Month",
+                  hideLabel: true
+                }
+              ) }),
+              /* @__PURE__ */ jsx(StyledSlash, { item: true, children: "/" }),
+              /* @__PURE__ */ jsx(StyledYear, { item: true, children: /* @__PURE__ */ jsx(
+                DateNumberInput,
+                {
+                  disabled,
+                  min: parseInt(minYear, 10),
+                  max: parseInt(maxYear, 10),
+                  placeholder: "YYYY",
+                  leadingZero: false,
+                  onChange: handleYearChange,
+                  value: value.year,
+                  name: `${name}_year`,
+                  inputRef: yearInput,
+                  required,
+                  label: "Year",
+                  reverse: true,
+                  hideLabel: true
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+DateInput.propTypes = {
+  /**
+   * Function to handle input change
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * Function to handle input change
+   */
+  value: PropTypes.shape({
+    day: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * 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,
+  /**
+   * Minimun year
+   */
+  minYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Maximum Year
+   */
+  maxYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * If `true`, the component will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * Placed the helper text above or below the input.
+   */
+  helperTextPlacement: PropTypes.oneOf(["above", "below"]),
+  /**
+   * The label content.
+   */
+  label: PropTypes.node,
+  /**
+   * The input name.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * If `true`, the label will indicate that the input is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"])
+};
+
+export { DateInput as default };

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

@@ -0,0 +1,21 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Grid';
+
+const StyledDay = styled(Grid)({
+  flexGrow: 0.5,
+  minWidth: 80
+});
+const StyledMonth = styled(Grid)({
+  flexGrow: 0.5,
+  minWidth: 80
+});
+const StyledYear = styled(Grid)({
+  flexGrow: 2,
+  minWidth: 110
+});
+const StyledSlash = styled(Grid)(({ theme }) => ({
+  color: theme.palette.default.light
+}));
+
+export { StyledDay, StyledMonth, StyledSlash, StyledYear };

package/dist/esm/components/DateNumberInput.js

@@ -0,0 +1,171 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useAnimation } from 'framer-motion';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Autocomplete from './Autocomplete.js';
+import Select from './Select.js';
+import { StyledWrapper, StyledTextField } from './DateNumberInput.styled.js';
+
+function DateNumberInput({
+  inputRef,
+  leadingZero = true,
+  max,
+  min = 0,
+  name,
+  onChange,
+  placeholder = "",
+  required = false,
+  reverse = false,
+  value = "",
+  ...rest
+}) {
+  const [error, setError] = useState(false);
+  const [selected, setSelected] = useState(null);
+  const controls = useAnimation();
+  const maxLength = max.toString().length;
+  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("sm"));
+  useEffect(() => {
+    if (error) {
+      controls.start({
+        translateX: ["-12px", "10px", "-6px", "4px"],
+        transition: { duration: 0.25, ease: "easeInOut" }
+      });
+      inputRef.current.focus();
+      if (isNotMobile) {
+        inputRef.current.select();
+      }
+      setTimeout(() => setError(false), 500);
+    }
+  }, [error, controls, inputRef, isNotMobile]);
+  useEffect(() => {
+    if (value && parseInt(value, 10) > max) {
+      onChange(max);
+      setError(true);
+    }
+  }, [value, max, onChange]);
+  const handleKeyDown = (e) => {
+    const notAllowed = ["-", "+", ".", "e", "E"];
+    if (notAllowed.includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  const handleChange = (newValue) => {
+    let hasError = false;
+    let updatedValue = newValue;
+    updatedValue = parseInt(updatedValue, 10).toString();
+    if (updatedValue.length > maxLength) {
+      updatedValue = updatedValue.substring(0, maxLength);
+      hasError = true;
+    }
+    if (parseInt(updatedValue, 10) > max) {
+      updatedValue = max;
+      hasError = true;
+    }
+    if (hasError) {
+      setError(true);
+    }
+    if (leadingZero && updatedValue !== "0") {
+      while (updatedValue.length < maxLength) {
+        updatedValue = `0${updatedValue}`;
+      }
+    }
+    onChange(updatedValue);
+  };
+  const handleAutocompleteChange = (event, option) => {
+    setSelected(option);
+    handleChange(option.value);
+  };
+  const handleNativeChange = ({ target }) => {
+    onChange(target.value);
+  };
+  const options = useMemo(() => {
+    const optionArray = [];
+    let count = min;
+    while (count < max + 1) {
+      let label = count.toString();
+      if (leadingZero) {
+        while (label.length < maxLength) {
+          label = `0${label}`;
+        }
+      }
+      optionArray.push({
+        label,
+        value: isNotMobile ? count : parseInt(label, 10)
+      });
+      count += 1;
+    }
+    return reverse ? optionArray.reverse() : optionArray;
+  }, [min, max, leadingZero, maxLength]);
+  const autoCompleteDefault = Object.values(options).filter(
+    (option) => option.value === value
+  )[0];
+  return /* @__PURE__ */ jsx(StyledWrapper, { animate: controls, error, children: isNotMobile ? /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      fullWidth: true,
+      autoHighlight: true,
+      autoSelect: true,
+      blurOnSelect: true,
+      value: selected || autoCompleteDefault || null,
+      noOptionsText: "Invalid",
+      options: [{ value: "", label: "" }, ...options],
+      disableClearable: true,
+      name,
+      required,
+      onChange: handleAutocompleteChange,
+      getOptionLabel: (option) => option.label ? option.label : "",
+      renderInput: (params) => /* @__PURE__ */ jsx(
+        StyledTextField,
+        {
+          ...params,
+          value,
+          placeholder,
+          name,
+          variant: "outlined",
+          onChange: handleNativeChange,
+          onKeyDown: handleKeyDown,
+          inputRef,
+          required,
+          inputProps: {
+            autoComplete: "off",
+            ...params.inputProps
+          }
+        }
+      ),
+      ...rest
+    }
+  ) : /* @__PURE__ */ jsx(
+    Select,
+    {
+      fullWidth: true,
+      value: !Number.isNaN(value) ? value : null,
+      required,
+      placeholder,
+      onChange: handleNativeChange,
+      options: [{ value: "", label: placeholder }, ...options],
+      inputRef,
+      name,
+      native: true,
+      ...rest
+    }
+  ) });
+}
+DateNumberInput.propTypes = {
+  inputRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+  ]).isRequired,
+  leadingZero: PropTypes.bool,
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number,
+  name: PropTypes.string.isRequired,
+  reverse: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+export { DateNumberInput as default };

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

@@ -0,0 +1,55 @@
+"use strict";
+import { motion } from 'framer-motion';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+
+const StyledWrapper = styled(motion.div)(({ error, theme }) => ({
+  "& input": {
+    padding: "0 !important"
+  },
+  "& .MuiInputBase-root": {
+    color: error ? theme.palette.error.main : null
+  },
+  "& .Mui-focused .MuiOutlinedInput-notchedOutline, & .MuiOutlinedInput-notchedOutline": {
+    borderColor: error ? theme.palette.error.main : null
+  },
+  "& .MuiTouchRipple-root": {
+    display: "none"
+  }
+}));
+const StyledTextField = styled(TextField)(
+  ({ edges, required, showError, size, theme, value, variant }) => ({
+    margin: 0,
+    "& .MuiInputBase-root": {
+      padding: size === "small" ? `${theme.spacing(1, 8, 1, 2)} !important` : `${theme.spacing(3, 8, 3, 4)} !important`,
+      border: variant === "filled" ? "2px solid transparent" : null,
+      borderRadius: () => {
+        switch (edges) {
+          case "rounded":
+            return 99;
+          case "sharp":
+            return 0;
+          default:
+            return theme.shape.borderRadius;
+        }
+      }
+    },
+    "& .MuiOutlinedInput-notchedOutline, &:hover .MuiOutlinedInput-notchedOutline": {
+      borderColor: required && !value || showError ? theme.palette.secondary.main : null
+    },
+    "& .MuiFilledInput-root": {
+      backgroundColor: theme.palette.grey.transparent
+    },
+    "& .Mui-focused": {
+      border: variant === "filled" ? `2px solid ${required && !value ? theme.palette.secondary.main : theme.palette.primary.main}` : null
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderColor: required && !value ? theme.palette.secondary.main : null
+    },
+    "& input": {
+      padding: "0 !important"
+    }
+  })
+);
+
+export { StyledTextField, StyledWrapper };