@tenancy.nz/ui 1.0.0 → 1.0.1

package/dist/cjs/components/TextInput.styled.cjs

@@ -0,0 +1,117 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
+var InputBase = require('@mui/material/InputBase');
+var object = require('../utils/helpers/object.cjs');
+
+const colorStyles = ({ color, theme }) => react.css`
+  ${color === "default" && react.css`
+    border: 1px solid ${object.getObjectProp(theme, "vars.palette.grey.400")};
+  `}
+
+  ${color !== "default" && react.css`
+    border: 1px solid ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+    background-color: ${object.getObjectProp(theme, `vars.palette.${color}.light`)};
+  `}
+`;
+const disabledStyles = ({ theme }) => react.css`
+  border-color: ${object.getObjectProp(theme, "vars.palette.grey.200")};
+  color: ${object.getObjectProp(theme, "vars.palette.grey.600")};
+  background-color: ${object.getObjectProp(theme, "vars.palette.grey.200")};
+`;
+const edgesStyles = ({ edges, theme }) => react.css`
+  ${edges === "smooth" && react.css`
+    border-radius: ${object.getObjectProp(theme, "vars.shape.borderRadius")};
+  `}
+  ${edges === "sharp" && react.css`
+    border-radius: 0px;
+  `}
+    ${edges === "rounded" && react.css`
+    border-radius: 9999px;
+  `}
+`;
+const focusStyles = ({ theme, color }) => react.css`
+  ${color === "default" && react.css`
+    &:focus-within {
+      box-shadow: 0px 0px 6px 0px
+        ${object.getObjectProp(theme, "vars.palette.info.main")};
+      border-color: ${object.getObjectProp(theme, "vars.palette.info.main")};
+    }
+  `}
+  ${color !== "default" && react.css`
+    &:focus-within {
+      box-shadow: 0px 0px 6px 0px
+        ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+    }
+  `}
+
+  > input:focus::placeholder {
+    opacity: 0;
+  }
+`;
+const hoverStyles = react.css`
+  &:hover {
+    border-color: #1f1c4f;
+  }
+`;
+const placeholderStyles = ({ theme }) => react.css`
+  > input::placeholder {
+    color: ${object.getObjectProp(theme, "vars.palette.grey.600")};
+    opacity: 1;
+    transition: none;
+  }
+`;
+const readOnlyStyles = ({ theme }) => react.css`
+  background-color: ${object.getObjectProp(theme, "vars.palette.background.muted")};
+`;
+const sizeStyles = ({ size, multiline, theme }) => react.css`
+  ${size === "small" && react.css`
+    height: 36px;
+    padding: 8px 12px;
+    font-size: calc(${object.getObjectProp(theme, "typography.fontSize")}px - 2px);
+  `}
+  ${size === "medium" && react.css`
+    height: 48px;
+    padding: 12px 16px;
+    font-size: ${object.getObjectProp(theme, "typography.fontSize")}px;
+  `}
+  ${multiline && react.css`
+    height: auto;
+    min-height: 78px;
+  `}
+`;
+const StyledTextInput = styles.styled(InputBase)`
+  ${({ color, disabled, edges, multiline, readOnly, size, theme }) => react.css`
+    background-color: #fff;
+    font-weight: 400;
+    transition: none;
+    color: ${object.getObjectProp(theme, "vars.palette.text.primary")};
+
+    ${colorStyles({ color, theme })}
+    ${edgesStyles({ edges, theme })}
+    ${!disabled && !readOnly && hoverStyles}
+    ${!disabled && !readOnly && focusStyles({ theme, color })}
+    ${!disabled && readOnly && readOnlyStyles({ theme })}
+    ${disabled && disabledStyles({ theme })}
+    ${placeholderStyles({ theme })}
+    ${sizeStyles({ size, multiline, theme })}
+
+    > input {
+      padding: 0;
+    }
+  `}
+`;
+
+exports.colorStyles = colorStyles;
+exports.default = StyledTextInput;
+exports.disabledStyles = disabledStyles;
+exports.edgesStyles = edgesStyles;
+exports.focusStyles = focusStyles;
+exports.hoverStyles = hoverStyles;
+exports.placeholderStyles = placeholderStyles;
+exports.readOnlyStyles = readOnlyStyles;
+exports.sizeStyles = sizeStyles;

package/dist/cjs/components/ThemeProvider.cjs

@@ -0,0 +1,43 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var react = require('@emotion/react');
+var styled = require('styled-components');
+var styles = require('@mui/material/styles');
+var CssBaseline = require('@mui/material/CssBaseline');
+var index = require('../theme/index.cjs');
+
+function ThemeProvider({ theme = {}, children, ...rest }) {
+  const mergedTheme = styles.createTheme({
+    ...index.default,
+    ...theme,
+    cssVariables: { cssVarPrefix: "tn" }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.StyledEngineProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(styled.ThemeProvider, { theme: mergedTheme, children: /* @__PURE__ */ jsxRuntime.jsx(react.ThemeProvider, { theme: mergedTheme, children: /* @__PURE__ */ jsxRuntime.jsxs(styles.ThemeProvider, { theme: mergedTheme, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CssBaseline, {}),
+    children
+  ] }) }) }) });
+}
+ThemeProvider.propTypes = {
+  theme: PropTypes.shape({
+    breakpoints: PropTypes.object,
+    mixins: PropTypes.object,
+    overrides: PropTypes.object,
+    palette: PropTypes.object,
+    props: PropTypes.object,
+    shadows: PropTypes.array,
+    typography: PropTypes.object,
+    spacing: PropTypes.func,
+    shape: PropTypes.object,
+    transitions: PropTypes.object,
+    zIndex: PropTypes.object
+  }),
+  children: PropTypes.any.isRequired
+};
+
+exports.default = ThemeProvider;

package/dist/cjs/components/TimeInput.cjs

@@ -0,0 +1,248 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var FormControl = require('./FormControl.cjs');
+var Select = require('./Select.cjs');
+require('mime/lite');
+var time = require('../utils/helpers/time.cjs');
+var TimeInput_styled = require('./TimeInput.styled.cjs');
+
+function TimeInput({
+  disabled = false,
+  disableFirstOption = false,
+  errorMessage = "",
+  fullWidth = false,
+  fromFormat = "HH:mm:ss",
+  helperText = "",
+  helperTextPlacement = "below",
+  label = "",
+  minutesIncrementStep = 5,
+  onChange,
+  name,
+  required = false,
+  showError = false,
+  size = "medium",
+  toFormat = "HH:mm:ss",
+  value = "",
+  ...rest
+}) {
+  const inputRef = React.useRef();
+  const [values, setValues] = React.useState({
+    hour: "",
+    minute: "",
+    meridian: ""
+  });
+  React.useEffect(() => {
+    if (value) {
+      const dateObj = time.parseTimeStrByFormat(value, fromFormat);
+      setValues({
+        hour: dateObj.format("hh"),
+        minute: dateObj.format("mm"),
+        meridian: dateObj.format("a")
+      });
+    }
+  }, [fromFormat, value]);
+  const hourOptions = time.getHourOptions(disableFirstOption);
+  const meridianOptions = time.getMeridianOptions(disableFirstOption);
+  const minuteOptions = time.getMinuteOptions(
+    0,
+    minutesIncrementStep === 5 ? 55 : 59,
+    minutesIncrementStep,
+    disableFirstOption
+  );
+  const handleChange = (e, type) => {
+    const newValues = { ...values, [type]: e.target.value };
+    const dateObj = time.parseTimeStrByFormat(
+      `${newValues.hour}:${newValues.minute}${newValues.meridian}`,
+      "hh:mma"
+    );
+    const dateStr = dateObj.format(toFormat);
+    const newValue = dateStr === "Invalid Date" ? "" : dateStr;
+    inputRef.current.value = newValue;
+    const evt = new Event("change", { bubbles: true, cancelable: false });
+    inputRef.current.dispatchEvent(evt);
+    setValues(newValues);
+    onChange(evt);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormControl.default,
+    {
+      fullWidth,
+      name,
+      label,
+      helperText,
+      helperTextPlacement,
+      disabled,
+      required,
+      showError,
+      errorMessage,
+      edges: "normal",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            defaultValue: rest.defaultValue || value,
+            name,
+            ref: inputRef,
+            style: {
+              height: 0,
+              width: 0,
+              appearance: "none",
+              border: "none",
+              outline: "none",
+              margin: 0,
+              padding: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(TimeInput_styled.StyledContainer, { size, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeInput_styled.StyledSelect,
+            {
+              required,
+              size,
+              value: inputRef.current ? inputRef.current.value : value,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Select.default,
+                {
+                  disabled,
+                  name: `${name}_hours`,
+                  placeholder: "HH",
+                  required,
+                  native: true,
+                  options: hourOptions,
+                  value: values.hour,
+                  onChange: (e) => {
+                    handleChange(e, "hour");
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(TimeInput_styled.StyledSpacer, { children: ":" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeInput_styled.StyledSelect,
+            {
+              required,
+              size,
+              value: inputRef.current ? inputRef.current.value : value,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Select.default,
+                {
+                  disabled,
+                  name: `${name}_minutes`,
+                  placeholder: "MM",
+                  required,
+                  native: true,
+                  options: minuteOptions,
+                  value: values.minute,
+                  onChange: (e) => {
+                    handleChange(e, "minute");
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(TimeInput_styled.StyledSpacer, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeInput_styled.StyledSelect,
+            {
+              required,
+              size,
+              value: inputRef.current ? inputRef.current.value : value,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Select.default,
+                {
+                  disabled,
+                  name: `${name}_meridian`,
+                  placeholder: "AM",
+                  required,
+                  native: true,
+                  options: meridianOptions,
+                  value: values.meridian,
+                  onChange: (e) => {
+                    handleChange(e, "meridian");
+                  }
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+TimeInput.propTypes = {
+  /**
+   * If `true`, the input will be not be intractive.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, will disable the first option in each select box.
+   */
+  disableFirstOption: PropTypes.bool,
+  /**
+   * 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 time format in which `value` is provided.
+   */
+  fromFormat: PropTypes.string,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * Placement of the helper text above or below the input.
+   */
+  helperTextPlacement: PropTypes.oneOf(["above", "below"]),
+  /**
+   * The increment value used to create minutes list.
+   */
+  minutesIncrementStep: PropTypes.oneOf([1, 5]),
+  /**
+   * Function to handle input change
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * Text to describe the field.
+   */
+  label: PropTypes.node,
+  /**
+   * HTML `name` attribute of the field.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   *
+   */
+  required: PropTypes.bool,
+  /**
+   * Whether or not to display an error message (if there is a message to display).
+   */
+  showError: PropTypes.bool,
+  /**
+   * The size of the input.
+   */
+  size: PropTypes.oneOf(["medium", "small"]),
+  /**
+   * The time format in which new `value` will be returned after selection.
+   * @see https://day.js.org/docs/en/display/format#list-of-all-available-formats
+   */
+  toFormat: PropTypes.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: PropTypes.string
+};
+
+exports.default = TimeInput;

package/dist/cjs/components/TimeInput.styled.cjs

@@ -0,0 +1,38 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+var Box = require('@mui/material/Box');
+
+const StyledContainer = styles.styled(Box)(({ size }) => ({
+  display: "flex",
+  flexWrap: "nowrap",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  "& .MuiNativeSelect-icon": {
+    width: size === "small" ? "0.7em" : null,
+    height: size === "small" ? "0.7em" : null,
+    right: size === "small" ? "3px" : null,
+    top: size === "small" ? "calc(50% - 9px)" : null
+  }
+}));
+const StyledSelect = styles.styled("div")(({ required, size, theme, value }) => ({
+  minWidth: size === "small" ? 50 : 80,
+  "& select": {
+    padding: "0.8rem 2rem 0.7rem 1rem !important"
+  },
+  "& fieldset": {
+    borderColor: required && !value ? theme.palette.secondary.main : null
+  }
+}));
+const StyledSpacer = styles.styled("span")(({ size, theme }) => ({
+  color: theme.palette.default.light,
+  padding: size === "small" ? "0 3px" : "0 5px",
+  fontSize: size === "small" ? "14px" : "18px",
+  fontWeight: 700
+}));
+
+exports.StyledContainer = StyledContainer;
+exports.StyledSelect = StyledSelect;
+exports.StyledSpacer = StyledSpacer;

package/dist/cjs/components/Tooltip.cjs

@@ -0,0 +1,40 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Box = require('./Box.cjs');
+var Tooltip_styled = require('./Tooltip.styled.cjs');
+
+function Tooltip({
+  children,
+  boxProps = {},
+  arrow = true,
+  enterDelay = 100,
+  enterNextDelay = 0,
+  enterTouchDelay = 700,
+  followCursor = false,
+  id = "",
+  leaveDelay = 0,
+  leaveTouchDelay = 1500,
+  placement = "top",
+  ...others
+}) {
+  const { className } = others;
+  const rest = {
+    arrow,
+    enterDelay,
+    enterNextDelay,
+    enterTouchDelay,
+    followCursor,
+    id,
+    leaveDelay,
+    leaveTouchDelay,
+    placement,
+    ...others
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip_styled.default, { classes: { popper: className }, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(Box.default, { display: "inline-flex", sx: boxProps, children }) });
+}
+
+exports.default = Tooltip;

package/dist/cjs/components/Tooltip.styled.cjs

@@ -0,0 +1,55 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mui/material/styles');
+var Tooltip = require('@mui/material/Tooltip');
+var object = require('../utils/helpers/object.cjs');
+
+const StyledTooltip = styles.styled(Tooltip)`
+  ${({ theme }) => `
+    & .${Tooltip.tooltipClasses.tooltip} {
+      padding: ${theme.spacing(3)};
+      background-color: ${object.getObjectProp(theme, "vars.palette.secondary.main")};
+      color: ${object.getObjectProp(theme, "vars.palette.secondary.contrastText")};
+      border: none;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    && .${Tooltip.tooltipClasses.arrow} {
+      color: ${object.getObjectProp(theme, "vars.palette.secondary.main")};
+
+
+      &:before {
+        border-radius: ${theme.shape.borderRadius}px;
+      }
+    }
+
+    && .${Tooltip.tooltipClasses.tooltipPlacementTop} .${Tooltip.tooltipClasses.arrow} {
+      margin-bottom: -1.08em;
+      width: 2em;
+      height: 1.2em;
+    }
+    && .${Tooltip.tooltipClasses.tooltipPlacementBottom} .${Tooltip.tooltipClasses.arrow} {
+      margin-top: -1.08em;
+      width: 2em;
+      height: 1.2em;
+    }
+
+    && .${Tooltip.tooltipClasses.tooltipPlacementLeft} .${Tooltip.tooltipClasses.arrow} {
+      margin-right: -1.08em;
+      width: 1.2em;
+      height: 2em;
+    }
+
+    && .${Tooltip.tooltipClasses.tooltipPlacementRight} .${Tooltip.tooltipClasses.arrow} {
+      margin-left: -1.08em;
+      width: 1.2em;
+      height: 2em;
+    }
+`}
+`;
+
+exports.default = StyledTooltip;

package/dist/cjs/components/Truncate.cjs

@@ -0,0 +1,23 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+require('mime/lite');
+var string = require('../utils/helpers/string.cjs');
+require('../utils/helpers/time.cjs');
+
+function Truncate({ children, limit }) {
+  const truncatedStr = string.stripTags(children).slice(0, limit).trim();
+  if (children.length > truncatedStr.length) {
+    return `${truncatedStr}...`;
+  }
+  return truncatedStr;
+}
+Truncate.propTypes = {
+  children: PropTypes.string.isRequired,
+  limit: PropTypes.number.isRequired
+};
+
+exports.default = Truncate;