@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/BankAccountInput.js

@@ -0,0 +1,292 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import CancelIcon from '@mui/icons-material/Cancel';
+import FormControl from './FormControl.js';
+import IconButton from './IconButton.js';
+import { StyledWrapper, StyledInputWrapper, StyledInput, StyledIcon } from './BankAccountInput.styled.js';
+import { isFunction, isNumber } from '../utils/helpers/boolean.js';
+import 'mime/lite';
+import { stripNonNumeric } from '../utils/helpers/string.js';
+import '../utils/helpers/time.js';
+
+function BankAccountInput({
+  disabled = false,
+  edges = "normal",
+  errorMessage = "",
+  fullWidth = false,
+  helperText = "",
+  helperTextPlacement = "below",
+  hideLabel = false,
+  label = "",
+  name,
+  onChange,
+  onClear = void 0,
+  required = false,
+  showError = false,
+  value = void 0,
+  variant = "outlined"
+}) {
+  const bankRef = useRef(null);
+  const branchRef = useRef(null);
+  const accountRef = useRef(null);
+  const suffixRef = useRef(null);
+  const [bank, setBank] = useState(value && value.bank || "");
+  const [branch, setBranch] = useState(value && value.branch || "");
+  const [account, setAccount] = useState(value && value.account || "");
+  const [suffix, setSuffix] = useState(value && value.suffix || "");
+  const [focused, setFocused] = useState(false);
+  const valueStr = `${bank}${branch}${account}${suffix}`;
+  const handleFocus = () => {
+    setFocused(true);
+  };
+  const handleBlur = () => {
+    setFocused(false);
+  };
+  const handleNextFieldFocus = (e) => {
+    const { target } = e;
+    if (target.id === `${name}_bank` && branch.length === 0) {
+      branchRef.current.focus();
+    } else if (target.id === `${name}_branch` && account.length === 0) {
+      accountRef.current.focus();
+    } else if (target.id === `${name}_account` && suffix.length === 0) {
+      suffixRef.current.focus();
+    } else if (target.id === `${name}_suffix` && bank.length === 0) {
+      bankRef.current.focus();
+    }
+  };
+  const handleClear = () => {
+    setAccount("");
+    setBank("");
+    setBranch("");
+    setSuffix("");
+    onClear({ account, bank, branch, suffix });
+  };
+  const handleBankChange = (e) => {
+    const thisValue = stripNonNumeric(e.target.value);
+    if (thisValue !== bank) {
+      onChange({ account, bank: thisValue, branch, suffix });
+      setBank(thisValue);
+      if (thisValue && isNumber(thisValue) && thisValue.length === 2) {
+        handleNextFieldFocus(e);
+      }
+    }
+  };
+  const handleBranchChange = (e) => {
+    const thisValue = stripNonNumeric(e.target.value);
+    if (thisValue !== branch) {
+      onChange({ account, bank, branch: thisValue, suffix });
+      setBranch(thisValue);
+      if (thisValue && isNumber(thisValue) && thisValue.length === 4) {
+        handleNextFieldFocus(e);
+      }
+    }
+  };
+  const handleAccountChange = (e) => {
+    const thisValue = stripNonNumeric(e.target.value);
+    if (thisValue !== account) {
+      onChange({ account: thisValue, bank, branch, suffix });
+      setAccount(thisValue);
+      if (thisValue && isNumber(thisValue) && thisValue.length === 7) {
+        handleNextFieldFocus(e);
+      }
+    }
+  };
+  const handleSuffixChange = (e) => {
+    const thisValue = stripNonNumeric(e.target.value);
+    if (thisValue !== suffix) {
+      onChange({ account, bank, branch, suffix: thisValue });
+      setSuffix(thisValue);
+      if (thisValue && isNumber(thisValue) && thisValue.length === 3) {
+        handleNextFieldFocus(e);
+      }
+    }
+  };
+  const handlePaste = (e) => {
+    const text = (e.clipboardData || window.clipboardData).getData("text");
+    const sanitizedText = stripNonNumeric(text);
+    if (bankRef.current.id === e.target.id && !bankRef.current.value) {
+      const values = {
+        bank: sanitizedText.slice(0, bankRef.current.maxLength),
+        branch: sanitizedText.slice(2, 2 + branchRef.current.maxLength),
+        account: sanitizedText.slice(6, 6 + accountRef.current.maxLength),
+        suffix: sanitizedText.slice(13, 13 + suffixRef.current.maxLength)
+      };
+      onChange(values);
+      setBank(values.bank);
+      setBranch(values.branch);
+      setAccount(values.account);
+      setSuffix(values.suffix);
+    }
+  };
+  return /* @__PURE__ */ jsxs(StyledWrapper, { fullWidth, children: [
+    /* @__PURE__ */ jsxs(
+      FormControl,
+      {
+        fullWidth,
+        disabled,
+        name,
+        required,
+        label,
+        hideLabel,
+        helperText,
+        helperTextPlacement,
+        showError,
+        errorMessage,
+        edges,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "hidden",
+              name,
+              value: `${bank} ${branch} ${account} ${suffix}`
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            StyledInputWrapper,
+            {
+              disabled,
+              edges,
+              focused,
+              fullWidth,
+              required: required && valueStr.length < 15,
+              variant,
+              children: [
+                /* @__PURE__ */ jsx(
+                  StyledInput,
+                  {
+                    disabled,
+                    id: `${name}_bank`,
+                    fieldType: "bank",
+                    placeholder: "Bank",
+                    maxLength: "2",
+                    ref: bankRef,
+                    value: bank,
+                    onChange: handleBankChange,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur,
+                    onPaste: handlePaste
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StyledInput,
+                  {
+                    disabled,
+                    id: `${name}_branch`,
+                    fieldType: "branch",
+                    placeholder: "Branch",
+                    maxLength: "4",
+                    ref: branchRef,
+                    value: branch,
+                    onChange: handleBranchChange,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StyledInput,
+                  {
+                    disabled,
+                    id: `${name}_account`,
+                    fieldType: "account",
+                    placeholder: "Account",
+                    maxLength: "7",
+                    ref: accountRef,
+                    value: account,
+                    onChange: handleAccountChange,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StyledInput,
+                  {
+                    disabled,
+                    id: `${name}_suffix`,
+                    fieldType: "suffix",
+                    placeholder: "Suffix",
+                    maxLength: "3",
+                    ref: suffixRef,
+                    value: suffix,
+                    onChange: handleSuffixChange,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    isFunction(onClear) && valueStr && /* @__PURE__ */ jsx(StyledIcon, { children: /* @__PURE__ */ jsx(IconButton, { onClick: handleClear, size: "small", color: "inherit", children: /* @__PURE__ */ jsx(CancelIcon, {}) }) })
+  ] });
+}
+BankAccountInput.propTypes = {
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * The error message to display if showError === true
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * If `true`, the component will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * Make label visible only to screen readers
+   */
+  hideLabel: PropTypes.bool,
+  /**
+   * 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,
+  /**
+   * Function to handle change event
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * Function to handle clear event
+   */
+  onClear: PropTypes.func,
+  /**
+   * If `true`, the label will indicate that the input is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * Whether or not to display an error message (if there is a message to display).
+   */
+  showError: PropTypes.bool,
+  value: PropTypes.exact({
+    bank: PropTypes.string,
+    branch: PropTypes.string,
+    account: PropTypes.string,
+    suffix: PropTypes.string
+  }),
+  /**
+   * How input should look visually
+   */
+  variant: PropTypes.oneOf(["filled", "outlined"])
+};
+
+export { BankAccountInput as default };

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

@@ -0,0 +1,158 @@
+"use strict";
+import styled, { css } from 'styled-components';
+
+const StyledWrapper = styled.div`
+  ${({ fullWidth }) => css`
+    display: inline-flex;
+    align-items: center;
+    ${fullWidth && css`
+      width: 100%;
+    `}
+  `}
+`;
+const StyledInputWrapper = styled.div`
+  ${({ disabled, edges, focused, fullWidth, required, theme, variant }) => css`
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    font-size: 15px;
+    line-height: 1.4375em;
+    color: #394869;
+    position: relative;
+    cursor: text;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0.75rem 0;
+    width: ${fullWidth ? "100%" : "400px"};
+
+    ${!required && !focused && css`
+      border: 1px solid rgba(0, 0, 0, 0.23);
+    `}
+
+    ${required && !focused && css`
+      border: 1px solid ${theme.palette.secondary.main};
+    `}
+
+    ${!required && focused && css`
+      border: 1px solid ${theme.palette.primary.main};
+    `}
+
+      ${required && focused && css`
+      border: 1px solid ${theme.palette.secondary.main};
+    `}
+
+    ${edges === "sharp" && css`
+      border-radius: 0px;
+    `}
+
+    ${edges === "normal" && css`
+      border-radius: 5px;
+    `}
+
+    ${edges === "rounded" && css`
+      border-radius: 9999px;
+    `}
+
+    ${variant === "filled" && css`
+      background: rgba(140, 152, 178, 0.1);
+      border-color: rgba(140, 152, 178, 0.1);
+    `}
+
+    ${disabled && css`
+      background: rgba(140, 152, 178, 0.1);
+    `}
+  `}
+`;
+const StyledInput = styled.input.attrs({
+  type: "text",
+  autoComplete: "off",
+  inputMode: "numeric"
+})`
+  ${({ fieldType }) => css`
+    height: 1.4375em;
+    -webkit-tap-highlight-color: transparent;
+    background: transparent;
+    letter-spacing: inherit;
+    color: currentColor;
+    box-sizing: content-box;
+    font: inherit;
+    border: none;
+    border-left: 1px solid rgba(0, 0, 0, 0.23);
+    padding: 0 1rem;
+    text-align: center;
+
+    ${fieldType === "bank" && css`
+      width: 15%;
+    `}
+
+    ${fieldType === "branch" && css`
+      width: 22%;
+    `}
+
+    ${fieldType === "account" && css`
+      width: 43%;
+    `}
+
+    ${fieldType === "suffix" && css`
+      width: 20%;
+    `}
+
+    &:focus,
+    &:active {
+      box-shadow: none;
+      outline: none;
+    }
+
+    &:first-child {
+      border: none;
+    }
+
+    &::-webkit-input-placeholder {
+      transition: opacity 200ms ease;
+    }
+
+    &::-moz-placeholder {
+      transition: opacity 200ms ease;
+    }
+
+    &:-ms-input-placeholder {
+      transition: opacity 200ms ease;
+    }
+
+    &:-moz-placeholder {
+      transition: opacity 200ms ease;
+    }
+
+    &:focus::-webkit-input-placeholder {
+      opacity: 0.4;
+    }
+
+    &:focus::-moz-placeholder {
+      opacity: 0.4;
+    }
+
+    &:focus:-ms-input-placeholder {
+      opacity: 0.4;
+    }
+
+    &:focus:-moz-placeholder {
+      opacity: 0.4;
+    }
+  `}
+`;
+const StyledIcon = styled.div`
+  ${({ theme }) => css`
+    color: ${theme.palette.grey[300]};
+    margin-left: 5px;
+    transition: color 200ms ease;
+    svg {
+      font-size: 1.15rem;
+    }
+
+    &:hover {
+      color: ${theme.palette.grey[400]};
+    }
+  `}
+`;
+
+export { StyledIcon, StyledInput, StyledInputWrapper, StyledWrapper };

package/dist/esm/components/Bar.js

@@ -0,0 +1,40 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledBar } from './Bar.styled.js';
+
+function Bar({ children, color = "transparent", position = "relative" }) {
+  return /* @__PURE__ */ jsx(StyledBar, { color, position, children });
+}
+Bar.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf([
+    "default",
+    "inherit",
+    "primary",
+    "primaryAlt",
+    "secondary",
+    "secondaryAlt",
+    "tertiary",
+    "transparent"
+  ]),
+  /**
+   * The positioning type.
+   */
+  position: PropTypes.oneOf([
+    "absolute",
+    "fixed",
+    "relative",
+    "static",
+    "sticky"
+  ])
+};
+
+export { Bar as default };

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

@@ -0,0 +1,20 @@
+"use strict";
+import styled, { css } from 'styled-components';
+
+const defaultColors = ["inherit", "transparent"];
+const StyledBar = styled.div`
+  ${({ color, position, theme }) => css`
+    position: ${position};
+    ${defaultColors.includes(color) && css`
+      background: ${color};
+      color: inherit;
+    `}
+
+    ${!defaultColors.includes(color) && css`
+      background: ${theme.palette[color].main};
+      color: ${theme.palette[color].contrastText};
+    `}
+  `}
+`;
+
+export { StyledBar };

package/dist/esm/components/BaseModal.js

@@ -0,0 +1,37 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import StyledBaseModal from './BaseModal.styled.js';
+import { objectDeepMerge } from '../utils/helpers/object.js';
+
+function BaseModal({
+  children,
+  fullScreen = false,
+  fullWidth = false,
+  escapePress = false,
+  hideBackdrop = false,
+  maxWidth = "sm",
+  onClose = () => {
+  },
+  open = false,
+  slotProps = {},
+  ...rest
+}) {
+  const defaultSlotProps = {
+    paper: {
+      elevation: "none"
+    }
+  };
+  const props = {
+    fullScreen,
+    fullWidth,
+    hideBackdrop,
+    maxWidth,
+    onClose,
+    open,
+    ...rest,
+    slotProps: objectDeepMerge(defaultSlotProps, slotProps)
+  };
+  return /* @__PURE__ */ jsx(StyledBaseModal, { ...props, disableEscapeKeyDown: !escapePress, children });
+}
+
+export { BaseModal as default };

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

@@ -0,0 +1,16 @@
+"use strict";
+import { css } from '@emotion/react';
+import Dialog from '@mui/material/Dialog';
+import { styled } from '@mui/material/styles';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const StyledBaseModal = styled(Dialog)`
+  ${({ theme }) => css`
+    .MuiPaper-root {
+      color: ${getObjectProp(theme, "vars.palette.text.body")};
+      box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25);
+    }
+  `};
+`;
+
+export { StyledBaseModal as default };