@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/BooleanInput.cjs

@@ -0,0 +1,173 @@
+"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 FormFocus = require('./FormFocus.cjs');
+var BooleanInput_styled = require('./BooleanInput.styled.cjs');
+
+function BooleanInput({
+  disabled = false,
+  disableRipple = false,
+  fullWidth = false,
+  helperText = "",
+  helperTextPlacement = "below",
+  label = "",
+  required = false,
+  onChange,
+  edges = "normal",
+  value = null,
+  showError = false,
+  errorMessage = "",
+  trueLabel = "Yes",
+  falseLabel = "No",
+  parseBool = (v) => !!v,
+  name,
+  parseValue = (v) => !!v
+}) {
+  const [indeterminate, setIndeterminate] = React.useState(true);
+  const [checked, setChecked] = React.useState(true);
+  const hasError = showError && errorMessage;
+  React.useEffect(() => {
+    if (value !== null && value !== "" && value !== void 0) {
+      setIndeterminate(false);
+      setChecked(parseBool(value));
+    }
+  }, [value, parseBool]);
+  const handleChange = (e, bool) => {
+    e.preventDefault();
+    onChange(parseValue(bool));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormControl.default,
+    {
+      fullWidth,
+      label,
+      name,
+      helperText,
+      helperTextPlacement,
+      disabled,
+      required,
+      showError,
+      errorMessage,
+      edges,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FormFocus.default, { name }),
+        /* @__PURE__ */ jsxRuntime.jsxs(BooleanInput_styled.StyledButtonGroup, { edges, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BooleanInput_styled.StyledButton,
+            {
+              variant: indeterminate || !checked ? "outlined" : "contained",
+              onClick: (e) => handleChange(e, true),
+              disableElevation: true,
+              disableRipple,
+              disableTouchRipple: disableRipple,
+              disableFocusRipple: disableRipple,
+              type: "button",
+              indeterminate: indeterminate ? "yes" : "no",
+              checked,
+              required,
+              selected: !indeterminate && checked,
+              error: hasError ? "yes" : "no",
+              children: trueLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BooleanInput_styled.StyledButton,
+            {
+              variant: indeterminate || checked ? "outlined" : "contained",
+              onClick: (e) => handleChange(e, false),
+              disableElevation: true,
+              disableRipple,
+              disableTouchRipple: disableRipple,
+              disableFocusRipple: disableRipple,
+              type: "button",
+              indeterminate: indeterminate ? "yes" : "no",
+              checked,
+              required,
+              selected: !indeterminate && !checked,
+              error: hasError ? "yes" : "no",
+              children: falseLabel
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+BooleanInput.propTypes = {
+  /**
+   * The input name.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * Whether or not the 'Yes' option is selected. Pass null if indeterminate.
+   */
+  value: PropTypes.any,
+  /**
+   * If `true`, the buttons will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the buttons will not have ripple effect when clicked.
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the buttons will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Label for the left button
+   */
+  trueLabel: PropTypes.string,
+  /**
+   * Label for the right button
+   */
+  falseLabel: PropTypes.string,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.string,
+  /**
+   * Placed the helper text above or below the input.
+   */
+  helperTextPlacement: PropTypes.oneOf(["above", "below"]),
+  /**
+   * The label content.
+   */
+  label: PropTypes.string,
+  /**
+   * If `true`, the label is displayed as required and the `input` element` will be required.
+   */
+  required: PropTypes.bool,
+  /**
+   * Function to change input value
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * 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,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * Function for parsing the value as a bool to determine which button is currently selected (true = left)
+   */
+  parseBool: PropTypes.func,
+  /**
+   * Function for parsing the value back
+   */
+  parseValue: PropTypes.func
+};
+
+exports.default = BooleanInput;

package/dist/cjs/components/BooleanInput.styled.cjs

@@ -0,0 +1,65 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+var Button = require('@mui/material/Button');
+var ButtonGroup = require('@mui/material/ButtonGroup');
+
+const selectedStyles = (hasError, theme) => ({
+  borderColor: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
+  color: "#fff",
+  background: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
+  "&:hover": {
+    background: hasError === "yes" ? theme.palette.secondary.dark : theme.palette.primaryAlt.dark
+  }
+});
+const unselectedStyles = (error, theme) => ({
+  borderColor: error === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
+  color: error === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main
+});
+const requiredUnselectedStyles = (selected, theme) => ({
+  borderColor: !selected ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
+  color: !selected ? theme.palette.secondary.main : theme.palette.primaryAlt.main
+});
+const borderRadiusStyles = (edges, theme) => {
+  if (edges === "rounded") {
+    return 99;
+  }
+  if (edges === "sharp") {
+    return 0;
+  }
+  return theme.shape.borderRadius;
+};
+const StyledButton = styles.styled(Button)(
+  ({ error, indeterminate, required, selected, theme }) => ({
+    ...!selected && required && {
+      ...requiredUnselectedStyles(selected, theme),
+      "&:hover, &:active, &:focus": {
+        ...requiredUnselectedStyles(selected, theme)
+      }
+    },
+    ...!selected && !required && {
+      ...unselectedStyles(error, theme),
+      "&:hover, &:active, &:focus": {
+        ...unselectedStyles(error, theme)
+      }
+    },
+    ...selected && indeterminate === "no" && selectedStyles(error, theme)
+  })
+);
+const StyledButtonGroup = styles.styled(ButtonGroup)(({ edges, theme }) => ({
+  "& .MuiButtonBase-root": {
+    borderRadius: borderRadiusStyles(edges, theme),
+    "&:first-child": {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    "&:last-child": {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    }
+  }
+}));
+
+exports.StyledButton = StyledButton;
+exports.StyledButtonGroup = StyledButtonGroup;

package/dist/cjs/components/BorderedGrid.cjs

@@ -0,0 +1,46 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Grid = require('./Grid.cjs');
+var Grid_styled = require('./Grid.styled.cjs');
+
+function BorderedGrid({
+  error = false,
+  spacing = 5,
+  borderStyle = "solid",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid_styled.StyledGridBox, { error, borderStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Grid.default,
+    {
+      ...rest,
+      spacing,
+      marginFix: true
+    }
+  ) });
+}
+BorderedGrid.propTypes = {
+  error: PropTypes.bool,
+  spacing: PropTypes.number,
+  borderStyle: PropTypes.oneOf([
+    "none",
+    "hidden",
+    "dotted",
+    "dashed",
+    "solid",
+    "double",
+    "groove",
+    "ridge",
+    "inset",
+    "outset",
+    "initial",
+    "inherit"
+  ])
+};
+
+exports.default = BorderedGrid;

package/dist/cjs/components/Box.cjs

@@ -0,0 +1,97 @@
+"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 Box$2 = require('@mui/material/Box');
+
+function Box({
+  as = "div",
+  align = "flex-start",
+  children,
+  display = "block",
+  direction = "row",
+  justify = "flex-start",
+  sx = {},
+  ...rest
+}, ref) {
+  const flexProps = {
+    ...(display === "flex" || display === "inline-flex") && {
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box$2,
+    {
+      component: as,
+      ref,
+      sx: {
+        display,
+        ...flexProps,
+        ...sx
+      },
+      ...rest,
+      children
+    }
+  );
+}
+Box.propTypes = {
+  /**
+   * The component used for the root node.
+   */
+  as: PropTypes.oneOf([
+    "aside",
+    "div",
+    "footer",
+    "header",
+    "main",
+    "nav",
+    "section",
+    "span"
+  ]),
+  /**
+   * Defines css `align-items` property
+   */
+  align: PropTypes.oneOf(["flex-start", "center", "flex-end", "stretch"]),
+  /**
+   * Box render function or node.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Defines css `display` property
+   */
+  display: PropTypes.oneOf(["block", "flex", "inline-block", "inline-flex"]),
+  /**
+   * Defines css `display` property
+   */
+  direction: PropTypes.oneOf([
+    "row",
+    "row-reverse",
+    "column",
+    "column-reverse"
+  ]),
+  /**
+   * Defines css `justify-content` property
+   */
+  justify: PropTypes.oneOf([
+    "flex-start",
+    "center",
+    "flex-end",
+    "space-around",
+    "space-between",
+    "space-evenly"
+  ]),
+  /**
+   * Accepts all system properties, as well as any valid CSS properties.
+   * @see: https://next.material-ui.com/system/properties/
+   */
+  sx: PropTypes.object
+};
+var Box$1 = React.forwardRef(Box);
+
+exports.default = Box$1;

package/dist/cjs/components/Button.cjs

@@ -0,0 +1,48 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var CircularProgress = require('@mui/material/CircularProgress');
+var Button_styled = require('./Button.styled.cjs');
+
+const loadingIndicatorSizes = {
+  small: 14,
+  medium: 16,
+  large: 20
+};
+function Button({
+  as = "button",
+  children,
+  color = "primary",
+  disabled = false,
+  elevation = false,
+  fill = false,
+  loading = false,
+  loadingPosition = "start",
+  size = "medium",
+  type = "button",
+  variant = "contained",
+  ...others
+}) {
+  const rest = {
+    color,
+    disabled,
+    size,
+    type,
+    variant,
+    loadingPosition,
+    disableElevation: !elevation,
+    disableRipple: true,
+    disableFocusRipple: true,
+    component: as,
+    fullWidth: fill,
+    loadingIndicator: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: loadingIndicatorSizes[size], color: "inherit" }),
+    ...others,
+    ...loading === true && { loading: !disabled && loading }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Button_styled.default, { ...rest, children });
+}
+
+exports.default = Button;

package/dist/cjs/components/Button.styled.cjs

@@ -0,0 +1,106 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Button = require('@mui/material/Button');
+var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
+var object = require('../utils/helpers/object.cjs');
+
+const edgesStyles = ({ edges, theme }) => react.css`
+  ${edges === "sharp" && react.css`
+    border-radius: 0px;
+  `}
+  ${edges === "rounded" && react.css`
+    border-radius: 99999px;
+  `}
+  ${edges === "smooth" && react.css`
+    border-radius: ${object.getObjectProp(theme, "shape.borderRadius", "4")}px;
+  `}
+`;
+const focusStyles = react.css`
+  &:focus {
+    box-shadow: 0px 0px 6px 0px #1f1c4f;
+  }
+`;
+const sizeStyles = ({ size, theme }) => react.css`
+  font-weight: ${object.getObjectProp(theme, "typography.button.fontWeight", "700")};
+  ${size === "small" && react.css`
+    font-size: calc(
+      ${object.getObjectProp(theme, "typography.button.fontSize", "14")}px - 2px
+    );
+    height: 32px;
+  `}
+  ${size === "medium" && react.css`
+    font-size: ${object.getObjectProp(theme, "typography.button.fontSize", "14")}px;
+    height: 36px;
+  `}
+     ${size === "large" && react.css`
+    font-size: font-size: calc(
+      ${object.getObjectProp(theme, "typography.button.fontSize", "14")}px + 2px
+    );
+    height: 44px;
+  `}
+`;
+const disabledStyles = react.css`
+  color: var(--tn-palette-text-muted);
+  background-color: var(--tn-palette-background-muted);
+  border: none;
+`;
+const containedStyles = ({ color, theme }) => react.css`
+  color: ${object.getObjectProp(theme, `vars.palette.${color}.contrastText`)};
+  background-color: ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+
+  &:hover {
+    background-color: ${object.getObjectProp(theme, `vars.palette.${color}.light`)};
+  }
+
+  &:active {
+    background-color: ${object.getObjectProp(theme, `vars.palette.${color}.dark`)};
+  }
+  .MuiButton-loadingWrapper {
+    color: ${object.getObjectProp(theme, `vars.palette.${color}.contrastText`)};
+  }
+
+  ${focusStyles}
+`;
+const outlinedStyles = ({ color, theme }) => react.css`
+  color: ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+  background-color: transparent;
+  border: 1px solid currentColor;
+
+  .MuiButton-loadingWrapper {
+    color: ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+  }
+
+  &:hover,
+  &:active {
+    background-color: ${object.getObjectProp(theme, "vars.palette.background.muted")};
+  }
+
+  ${focusStyles}
+`;
+const StyledButton = styles.styled(Button)`
+  ${({ color, disabled, edges, size, theme, variant }) => react.css`
+    padding: 0px 24px;
+    text-transform: initial;
+    ${edgesStyles({ edges, theme })}
+    ${sizeStyles({ size, theme })}
+    ${disabled && disabledStyles}
+    ${variant === "contained" && !disabled && containedStyles({ color, theme })}
+    ${variant === "outlined" && !disabled && outlinedStyles({ color, theme })}
+
+    && {
+      font-weight: 700;
+    }
+  `}
+`;
+
+exports.containedStyles = containedStyles;
+exports.default = StyledButton;
+exports.disabledStyles = disabledStyles;
+exports.edgesStyles = edgesStyles;
+exports.focusStyles = focusStyles;
+exports.outlinedStyles = outlinedStyles;
+exports.sizeStyles = sizeStyles;

package/dist/cjs/components/Card.cjs

@@ -0,0 +1,61 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var CardContent = require('./CardContent.cjs');
+var Media = require('./Media.cjs');
+var Paper = require('./Paper.cjs');
+var Card_styled = require('./Card.styled.cjs');
+
+function Card({
+  children,
+  elevate = false,
+  imgContent = void 0,
+  imgSrc = "",
+  onClick = null,
+  title = "",
+  ...others
+}) {
+  const rest = { elevate, ...others };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Paper.default, { elevate: false, outlined: true, ...rest, children: [
+    onClick && // <ActionArea onClick={onClick}>
+    /* @__PURE__ */ jsxRuntime.jsxs(Card_styled.StyledCardMedia, { children: [
+      imgContent,
+      !imgContent && /* @__PURE__ */ jsxRuntime.jsx(Media.default, { src: imgSrc, title })
+    ] }),
+    !onClick && /* @__PURE__ */ jsxRuntime.jsx(Card_styled.StyledCardMedia, { children: /* @__PURE__ */ jsxRuntime.jsx(Media.default, { src: imgSrc, title }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent.default, { children })
+  ] });
+}
+Card.propTypes = {
+  /**
+   * The content of the component. React component, node, text etc.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Adds the box shadow
+   */
+  elevate: PropTypes.bool,
+  /**
+   * Custom image component, element, node etc.
+   */
+  imgContent: PropTypes.node,
+  /**
+   * Path to the image
+   */
+  imgSrc: PropTypes.string,
+  /**
+   * Function called when node is clicked
+   */
+  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(null)]),
+  /**
+   * Specifies an title & alternate text for an image
+   */
+  title: PropTypes.string
+};
+
+exports.default = Card;

package/dist/cjs/components/Card.styled.cjs

@@ -0,0 +1,15 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+
+const StyledCardMedia = styled.div`
+  height: 170px;
+  width: 100%;
+
+  @media screen and (min-width: 768px) {
+    height: 195px;
+  }
+`;
+
+exports.StyledCardMedia = StyledCardMedia;

package/dist/cjs/components/CardContent.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var CardContent_styled = require('./CardContent.styled.cjs');
+
+function CardContent({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CardContent_styled.StyledCardContent, { children });
+}
+CardContent.propTypes = {
+  /**
+   * The content of the component. React component, node, text etc.
+   */
+  children: PropTypes.node.isRequired
+};
+
+exports.default = CardContent;

package/dist/cjs/components/CardContent.styled.cjs

@@ -0,0 +1,10 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+
+const StyledCardContent = styled.div`
+  padding: 10px;
+`;
+
+exports.StyledCardContent = StyledCardContent;

package/dist/cjs/components/Checkbox.cjs

@@ -0,0 +1,49 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Stack = require('@mui/material/Stack');
+var Box = require('./Box.cjs');
+var FormLabel = require('./FormLabel.cjs');
+var Checkbox_styled = require('./Checkbox.styled.cjs');
+
+function Checkbox({
+  color = "primary",
+  disabled = false,
+  id = "",
+  required = false,
+  value = "",
+  label,
+  name,
+  size = "medium",
+  ...rest
+}) {
+  const props = {
+    color,
+    disabled,
+    id: id || name,
+    required,
+    value,
+    size,
+    name,
+    ...rest
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { direction: "row", gap: "10px", alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Box.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox_styled.StyledCheckbox, { ...props, disableRipple: true }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormLabel.default,
+      {
+        htmlFor: id,
+        size,
+        disabled,
+        margin: "none",
+        sx: { mt: "2px", fontWeight: "500" },
+        children: label
+      }
+    )
+  ] });
+}
+
+exports.default = Checkbox;