@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/BooleanInput.js

@@ -0,0 +1,169 @@
+"use strict";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import FormControl from './FormControl.js';
+import FormFocus from './FormFocus.js';
+import { StyledButtonGroup, StyledButton } from './BooleanInput.styled.js';
+
+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] = useState(true);
+  const [checked, setChecked] = useState(true);
+  const hasError = showError && errorMessage;
+  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__ */ jsx(
+    FormControl,
+    {
+      fullWidth,
+      label,
+      name,
+      helperText,
+      helperTextPlacement,
+      disabled,
+      required,
+      showError,
+      errorMessage,
+      edges,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(FormFocus, { name }),
+        /* @__PURE__ */ jsxs(StyledButtonGroup, { edges, children: [
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+            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
+};
+
+export { BooleanInput as default };

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

@@ -0,0 +1,62 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@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 = 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 = styled(ButtonGroup)(({ edges, theme }) => ({
+  "& .MuiButtonBase-root": {
+    borderRadius: borderRadiusStyles(edges, theme),
+    "&:first-child": {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    "&:last-child": {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    }
+  }
+}));
+
+export { StyledButton, StyledButtonGroup };

package/dist/esm/components/BorderedGrid.js

@@ -0,0 +1,42 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import Grid from './Grid.js';
+import { StyledGridBox } from './Grid.styled.js';
+
+function BorderedGrid({
+  error = false,
+  spacing = 5,
+  borderStyle = "solid",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(StyledGridBox, { error, borderStyle, children: /* @__PURE__ */ jsx(
+    Grid,
+    {
+      ...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"
+  ])
+};
+
+export { BorderedGrid as default };

package/dist/esm/components/Box.js

@@ -0,0 +1,93 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Box$2 from '@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__ */ 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 = forwardRef(Box);
+
+export { Box$1 as default };

package/dist/esm/components/Button.js

@@ -0,0 +1,44 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import CircularProgress from '@mui/material/CircularProgress';
+import StyledButton from './Button.styled.js';
+
+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__ */ jsx(CircularProgress, { size: loadingIndicatorSizes[size], color: "inherit" }),
+    ...others,
+    ...loading === true && { loading: !disabled && loading }
+  };
+  return /* @__PURE__ */ jsx(StyledButton, { ...rest, children });
+}
+
+export { Button as default };

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

@@ -0,0 +1,96 @@
+"use strict";
+import Button from '@mui/material/Button';
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const edgesStyles = ({ edges, theme }) => css`
+  ${edges === "sharp" && css`
+    border-radius: 0px;
+  `}
+  ${edges === "rounded" && css`
+    border-radius: 99999px;
+  `}
+  ${edges === "smooth" && css`
+    border-radius: ${getObjectProp(theme, "shape.borderRadius", "4")}px;
+  `}
+`;
+const focusStyles = css`
+  &:focus {
+    box-shadow: 0px 0px 6px 0px #1f1c4f;
+  }
+`;
+const sizeStyles = ({ size, theme }) => css`
+  font-weight: ${getObjectProp(theme, "typography.button.fontWeight", "700")};
+  ${size === "small" && css`
+    font-size: calc(
+      ${getObjectProp(theme, "typography.button.fontSize", "14")}px - 2px
+    );
+    height: 32px;
+  `}
+  ${size === "medium" && css`
+    font-size: ${getObjectProp(theme, "typography.button.fontSize", "14")}px;
+    height: 36px;
+  `}
+     ${size === "large" && css`
+    font-size: font-size: calc(
+      ${getObjectProp(theme, "typography.button.fontSize", "14")}px + 2px
+    );
+    height: 44px;
+  `}
+`;
+const disabledStyles = css`
+  color: var(--tn-palette-text-muted);
+  background-color: var(--tn-palette-background-muted);
+  border: none;
+`;
+const containedStyles = ({ color, theme }) => css`
+  color: ${getObjectProp(theme, `vars.palette.${color}.contrastText`)};
+  background-color: ${getObjectProp(theme, `vars.palette.${color}.main`)};
+
+  &:hover {
+    background-color: ${getObjectProp(theme, `vars.palette.${color}.light`)};
+  }
+
+  &:active {
+    background-color: ${getObjectProp(theme, `vars.palette.${color}.dark`)};
+  }
+  .MuiButton-loadingWrapper {
+    color: ${getObjectProp(theme, `vars.palette.${color}.contrastText`)};
+  }
+
+  ${focusStyles}
+`;
+const outlinedStyles = ({ color, theme }) => css`
+  color: ${getObjectProp(theme, `vars.palette.${color}.main`)};
+  background-color: transparent;
+  border: 1px solid currentColor;
+
+  .MuiButton-loadingWrapper {
+    color: ${getObjectProp(theme, `vars.palette.${color}.main`)};
+  }
+
+  &:hover,
+  &:active {
+    background-color: ${getObjectProp(theme, "vars.palette.background.muted")};
+  }
+
+  ${focusStyles}
+`;
+const StyledButton = styled(Button)`
+  ${({ color, disabled, edges, size, theme, variant }) => 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;
+    }
+  `}
+`;
+
+export { containedStyles, StyledButton as default, disabledStyles, edgesStyles, focusStyles, outlinedStyles, sizeStyles };

package/dist/esm/components/Card.js

@@ -0,0 +1,57 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import CardContent from './CardContent.js';
+import Media from './Media.js';
+import Paper from './Paper.js';
+import { StyledCardMedia } from './Card.styled.js';
+
+function Card({
+  children,
+  elevate = false,
+  imgContent = void 0,
+  imgSrc = "",
+  onClick = null,
+  title = "",
+  ...others
+}) {
+  const rest = { elevate, ...others };
+  return /* @__PURE__ */ jsxs(Paper, { elevate: false, outlined: true, ...rest, children: [
+    onClick && // <ActionArea onClick={onClick}>
+    /* @__PURE__ */ jsxs(StyledCardMedia, { children: [
+      imgContent,
+      !imgContent && /* @__PURE__ */ jsx(Media, { src: imgSrc, title })
+    ] }),
+    !onClick && /* @__PURE__ */ jsx(StyledCardMedia, { children: /* @__PURE__ */ jsx(Media, { src: imgSrc, title }) }),
+    /* @__PURE__ */ jsx(CardContent, { 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
+};
+
+export { Card as default };

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

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

package/dist/esm/components/CardContent.js

@@ -0,0 +1,17 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledCardContent } from './CardContent.styled.js';
+
+function CardContent({ children }) {
+  return /* @__PURE__ */ jsx(StyledCardContent, { children });
+}
+CardContent.propTypes = {
+  /**
+   * The content of the component. React component, node, text etc.
+   */
+  children: PropTypes.node.isRequired
+};
+
+export { CardContent as default };

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

@@ -0,0 +1,8 @@
+"use strict";
+import styled from 'styled-components';
+
+const StyledCardContent = styled.div`
+  padding: 10px;
+`;
+
+export { StyledCardContent };

package/dist/esm/components/Checkbox.js

@@ -0,0 +1,45 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Box from './Box.js';
+import FormLabel from './FormLabel.js';
+import { StyledCheckbox } from './Checkbox.styled.js';
+
+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__ */ jsxs(Stack, { direction: "row", gap: "10px", alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(StyledCheckbox, { ...props, disableRipple: true }) }),
+    /* @__PURE__ */ jsx(
+      FormLabel,
+      {
+        htmlFor: id,
+        size,
+        disabled,
+        margin: "none",
+        sx: { mt: "2px", fontWeight: "500" },
+        children: label
+      }
+    )
+  ] });
+}
+
+export { Checkbox as default };

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

@@ -0,0 +1,23 @@
+"use strict";
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+import Checkbox from '@mui/material/Checkbox';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const StyledCheckbox = styled(Checkbox)`
+  ${({ checked, disabled, theme }) => css`
+    padding: 0;
+    border-radius: 0;
+
+    ${!checked && css`
+      color: ${getObjectProp(theme, "vars.palette.grey.600")};
+    `}
+    ${disabled && css`
+      && {
+        color: ${getObjectProp(theme, "vars.palette.grey.400")};
+      }
+    `}
+  `}
+`;
+
+export { StyledCheckbox };

package/dist/esm/components/CircularProgress.js

@@ -0,0 +1,10 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import CircularProgress$1 from '@mui/material/CircularProgress';
+
+function CircularProgress({ ...rest }) {
+  return /* @__PURE__ */ jsx(CircularProgress$1, { ...rest });
+}
+
+export { CircularProgress as default };