@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/FileViewer.js

@@ -0,0 +1,113 @@
+"use strict";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import mime from 'mime/lite';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Button from './Button.js';
+import Box from './Box.js';
+import Embed from './Embed.js';
+import Grid from './Grid.js';
+import Modal from './Modal.js';
+import ModalContent from './ModalContent.js';
+import ModalHeader from './ModalHeader.js';
+import Heading from './Heading.js';
+import { StyledFilePreviewAreaOuter, StyledBrokenFileIcon } from './FileViewer.styled.js';
+import { isString } from '../utils/helpers/boolean.js';
+import '../utils/helpers/time.js';
+
+const getFileName = (file) => {
+  if (file.filename) {
+    return file.filename;
+  }
+  if (file.url) {
+    const name = file.url.substring(file.url.lastIndexOf("/") + 1);
+    if (name.includes("?")) {
+      const chuncks = name.split("?");
+      return chuncks[0];
+    }
+    return name;
+  }
+  return "";
+};
+const getFileExtension = (file) => {
+  const type = mime.getType(getFileName(file));
+  if (type) {
+    return mime.getExtension(type);
+  }
+  if (file.type) {
+    return mime.getExtension(file.type);
+  }
+  return "unsupported";
+};
+const isImage = (file) => {
+  if (file && file.url && file.url.startsWith("data:image")) {
+    return true;
+  }
+  const extension = getFileExtension(file);
+  const extensions = ["jpg", "jpeg", "png", "gif", "svg"];
+  return extensions.includes(extension);
+};
+function FileViewer({ file = null, heading = "", open = false, onClose }) {
+  return /* @__PURE__ */ jsx(Modal, { open: open && file !== null, onClose, fullWidth: true, children: file !== null && open && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ModalHeader, { onClose, children: /* @__PURE__ */ jsx(Heading, { as: "h5", children: heading || getFileName(file) }) }),
+    /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsx(StyledFilePreviewAreaOuter, { children: (() => {
+      if (isImage(file)) {
+        return /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", width: "100%", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: file.url,
+            alt: getFileName(file),
+            style: { maxWidth: "100%" }
+          }
+        ) });
+      }
+      if (file && isString(file.url) && file.url.startsWith("data") && getFileExtension(file) !== "pdf" || getFileExtension(file) === "unsupported") {
+        return /* @__PURE__ */ jsxs(
+          Grid,
+          {
+            container: true,
+            spacing: 5,
+            direction: "column",
+            alignItems: "center",
+            justify: "center",
+            children: [
+              /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(StyledBrokenFileIcon, { children: /* @__PURE__ */ jsx(ErrorOutlineIcon, {}) }) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { as: "h5", transform: "uppercase", children: "Preview unavailable" }) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  href: file.url,
+                  as: "a",
+                  download: true,
+                  color: "primary",
+                  size: "large",
+                  children: "Download"
+                }
+              ) })
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Embed,
+        {
+          src: file.url.startsWith("data") || file.url.includes(".pdf") ? file.url : `https://docs.google.com/gview?url=${file.url}&embedded=true`,
+          height: "85%"
+        }
+      );
+    })() }) })
+  ] }) });
+}
+FileViewer.propTypes = {
+  file: PropTypes.shape({
+    url: PropTypes.string,
+    filename: PropTypes.string,
+    type: PropTypes.string
+  }),
+  heading: PropTypes.string,
+  open: PropTypes.bool,
+  onClose: PropTypes.func.isRequired
+};
+
+export { FileViewer as default };

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

@@ -0,0 +1,25 @@
+"use strict";
+import styled, { css } from 'styled-components';
+import Heading from './Heading.js';
+
+const StyledFilePreviewAreaOuter = styled.div`
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+`;
+const StyledBrokenFileIcon = styled.div`
+  ${({ theme }) => css`
+    color: ${theme.palette.default.light};
+
+    & svg {
+      font-size: 100px;
+    }
+  `}
+`;
+const StyledHeading = styled(Heading)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export { StyledBrokenFileIcon, StyledFilePreviewAreaOuter, StyledHeading };

package/dist/esm/components/FlashMessage.js

@@ -0,0 +1,65 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from './Alert.js';
+
+function FlashMessage({
+  autoHideDuration = 3500,
+  children,
+  color = "success",
+  horizontal = "center",
+  open = false,
+  onClose,
+  vertical = "top",
+  ...rest
+}) {
+  const handleClose = () => {
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    Snackbar,
+    {
+      anchorOrigin: { vertical, horizontal },
+      autoHideDuration,
+      open,
+      onClose: handleClose,
+      message: "This is a text snack message",
+      ...rest,
+      children: /* @__PURE__ */ jsx(Alert, { color, onClose: handleClose, elevation: 7, children })
+    }
+  );
+}
+FlashMessage.propTypes = {
+  /**
+   * The number of milliseconds to wait before automatically calling the `onClose` function.
+   */
+  autoHideDuration: PropTypes.number,
+  /**
+   * The main color for the component.
+   */
+  color: PropTypes.oneOf(["error", "info", "success", "warning"]),
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Horizontal position of component
+   */
+  horizontal: PropTypes.oneOf(["left", "center", "right"]),
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool,
+  /**
+   * Callback fired when the component requests to be closed.
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Vertical position of component
+   */
+  vertical: PropTypes.oneOf(["bottom", "top"])
+};
+
+export { FlashMessage as default };

package/dist/esm/components/FormControl.js

@@ -0,0 +1,98 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormLabel from './FormLabel.js';
+import StatusMessage from './StatusMessage.js';
+import StyledFormControl from './FormControl.styled.js';
+import { isString } from '../utils/helpers/boolean.js';
+import 'mime/lite';
+import '../utils/helpers/time.js';
+
+const FormControl = forwardRef(
+  function FormControl2({
+    children,
+    color = "default",
+    disabled = false,
+    errorMessage = "",
+    fullWidth = false,
+    helperText = "",
+    label = void 0,
+    message = "",
+    required = false,
+    showError = false,
+    id,
+    size = "medium"
+  }, ref) {
+    const props = {
+      color: showError ? "error" : color,
+      $disabled: disabled,
+      fullWidth,
+      $required: required
+    };
+    const statusMessage = errorMessage || message;
+    return (
+      /** @ts-ignore */
+      /* @__PURE__ */ jsxs(StyledFormControl, { ...props, ref, children: [
+        !!label && isString(label) ? /* @__PURE__ */ jsx(
+          FormLabel,
+          {
+            disabled,
+            htmlFor: id,
+            required,
+            size,
+            children: label
+          }
+        ) : label,
+        children,
+        /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: true,
+            initial: "collapsed",
+            animate: "open",
+            exit: "collapsed",
+            variants: {
+              open: { opacity: 1, height: "auto" },
+              collapsed: { opacity: 0, height: 0 }
+            },
+            transition: {
+              delay: 0.15,
+              duration: 0.3,
+              ease: [0.04, 0.62, 0.23, 0.98]
+            },
+            children: !!statusMessage && /* @__PURE__ */ jsx(
+              StatusMessage,
+              {
+                color: props.color === "default" ? "info" : props.color,
+                children: statusMessage
+              }
+            )
+          },
+          `${id}_message`
+        ) }),
+        !!helperText && /* @__PURE__ */ jsx(
+          FormHelperText,
+          {
+            sx: {
+              color: "text.primary",
+              fontSize: (theme) => {
+                if (size === "medium") {
+                  return `${theme.typography.fontSize}px`;
+                }
+                return null;
+              },
+              padding: 0,
+              margin: 0,
+              mt: statusMessage ? 0 : "8px"
+            },
+            children: helperText
+          }
+        )
+      ] })
+    );
+  }
+);
+
+export { FormControl as default };

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

@@ -0,0 +1,18 @@
+"use strict";
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+import FormControl from '@mui/material/FormControl';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const StyledFormControl = styled(FormControl)`
+  ${({ size, theme }) => css`
+    ${size === "small" && css`
+      font-size: calc(${getObjectProp(theme, "typography.fontSize")}px - 2px);
+    `}
+    ${size === "medium" && css`
+      font-size: ${getObjectProp(theme, "typography.fontSize")}px;
+    `}
+  `}
+`;
+
+export { StyledFormControl as default };

package/dist/esm/components/FormFocus.js

@@ -0,0 +1,33 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+
+function FormFocus({ name }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      name,
+      style: {
+        appearance: "none",
+        border: "none",
+        outline: "none",
+        margin: 0,
+        padding: 0,
+        // needs to be 'visisble for iOS to scroll to..
+        width: "100%",
+        height: 1,
+        marginBottom: -1,
+        opacity: 0.1,
+        // prevent zoom...
+        fontSize: 20
+      },
+      readOnly: true
+    }
+  );
+}
+FormFocus.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+export { FormFocus as default };

package/dist/esm/components/FormLabel.js

@@ -0,0 +1,20 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import StyledFormLabel from './FormLabel.styled.js';
+
+function FormLabel({
+  children,
+  disabled = false,
+  margin = "default",
+  required = false,
+  ...rest
+}) {
+  const props = {
+    disabled,
+    margin,
+    required
+  };
+  return /* @__PURE__ */ jsx(StyledFormLabel, { ...rest, ...props, children });
+}
+
+export { FormLabel as default };

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

@@ -0,0 +1,51 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+import { css } from '@emotion/react';
+import FormLabel from '@mui/material/FormLabel';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const colorStyles = ({ disabled, theme }) => css`
+  ${!disabled && css`
+    color: ${getObjectProp(theme, "vars.palette.text.primary")};
+  `}
+
+  ${disabled && css`
+    color: ${getObjectProp(theme, "vars.palette.grey.400")};
+    pointer-events: none;
+    user-select: none;
+  `}
+`;
+const marginStyles = ({ margin }) => css`
+  ${margin === "default" && css`
+    margin-bottom: 8px;
+  `}
+  ${margin === "dense" && css`
+    margin-bottom: 4px;
+  `}
+`;
+const StyledFormLabel = styled(FormLabel)`
+  ${({ disabled, margin, size, theme }) => css`
+    font-weight: 600;
+    ${marginStyles({ margin })}
+    && {
+      display: inline-flex;
+      ${colorStyles({ disabled, theme })}
+    }
+
+    ${size === "small" && css`
+      font-size: calc(${getObjectProp(theme, "typography.fontSize")}px - 2px);
+    `}
+    ${size === "medium" && css`
+      font-size: ${getObjectProp(theme, "typography.fontSize")}px;
+    `}
+
+    .MuiFormLabel-asterisk {
+      color: ${getObjectProp(
+  theme,
+  disabled ? "vars.palette.grey.400" : "vars.palette.error.main"
+)};
+    }
+  `}
+`;
+
+export { StyledFormLabel as default };

package/dist/esm/components/Grid.js

@@ -0,0 +1,48 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import MuiGrid from '@mui/material/GridLegacy';
+import { useTheme } from '@mui/material/styles';
+
+function Grid({
+  children,
+  marginFix = false,
+  spacing = 0,
+  container = false,
+  ...rest
+}) {
+  const theme = useTheme();
+  return marginFix && spacing && container ? /* @__PURE__ */ jsx("div", { style: { padding: `${theme.spacing(spacing)}` }, children: /* @__PURE__ */ jsx(
+    MuiGrid,
+    {
+      container: true,
+      spacing,
+      ...rest,
+      children
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    MuiGrid,
+    {
+      spacing,
+      container,
+      ...rest,
+      children
+    }
+  );
+}
+Grid.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired,
+  spacing: PropTypes.number,
+  container: PropTypes.bool,
+  /**
+   * Remove negative margin issues on containers
+   * @see https://material-ui.com/components/grid/#negative-margin
+   */
+  marginFix: PropTypes.bool
+};
+
+export { Grid as default };

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

@@ -0,0 +1,10 @@
+"use strict";
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+
+const StyledGridBox = styled(Box)(({ borderStyle, error, theme }) => ({
+  border: `${borderStyle} 1px ${error ? theme.palette.error.main : theme.palette.grey.A100}`,
+  borderRadius: theme.shape.borderRadius
+}));
+
+export { StyledGridBox };

package/dist/esm/components/Heading.js

@@ -0,0 +1,37 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import Typography from '@mui/material/Typography';
+
+function Heading({
+  as,
+  children,
+  color = "textPrimary",
+  italic = false,
+  transform = void 0,
+  weight = "600",
+  sx = {},
+  ...rest
+}) {
+  const textStyles = {
+    fontWeight: weight,
+    ...italic && { fontStyle: "italic" },
+    ...transform && { textTransform: transform }
+  };
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      ...rest,
+      color,
+      component: as,
+      variant: as,
+      paragraph: false,
+      sx: {
+        ...textStyles,
+        ...sx
+      },
+      children
+    }
+  );
+}
+
+export { Heading as default };

package/dist/esm/components/IconButton.js

@@ -0,0 +1,27 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import StyledIconButton from './IconButton.styled.js';
+
+function IconButton({
+  children,
+  color = "default",
+  edges = "smooth",
+  disabled = false,
+  size = "medium",
+  ...others
+}) {
+  const rest = { size, ...others };
+  return /* @__PURE__ */ jsx(
+    StyledIconButton,
+    {
+      type: "button",
+      color,
+      edges,
+      disabled,
+      ...rest,
+      children
+    }
+  );
+}
+
+export { IconButton as default };

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

@@ -0,0 +1,27 @@
+"use strict";
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import { disabledStyles, edgesStyles } from './Button.styled.js';
+
+const sizeStyles = ({ size }) => css`
+  ${size === "small" && css`
+    font-size: 24px;
+  `}
+  ${size === "medium" && css`
+    font-size: 30px;
+  `}
+    ${size === "large" && css`
+    font-size: 36px;
+  `}
+`;
+const StyledIconButton = styled(IconButton)`
+  ${({ disabled, edges, size, theme }) => css`
+    padding: 4px;
+    ${disabled && disabledStyles}
+    ${edgesStyles({ edges, theme })}
+    ${sizeStyles({ size })}
+  `}
+`;
+
+export { StyledIconButton as default };

package/dist/esm/components/Icons.js

@@ -0,0 +1,58 @@
+"use strict";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react';
+import styled from 'styled-components';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import Heading from './Heading.js';
+import Link from './Link.js';
+import Text from './Text.js';
+
+const Code = styled.code`
+  line-height: 1;
+  margin: 0 2px;
+  padding: 3px 5px;
+  white-space: nowrap;
+  border-radius: 3px;
+  font-size: 13px;
+  border: 1px solid #eeeeee;
+  color: rgba(51, 51, 51, 0.9);
+  background-color: #f8f8f8;
+`;
+function Icons() {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h3", children: "Icons" }),
+    /* @__PURE__ */ jsxs(Text, { color: "inherit", children: [
+      "This design system uses ",
+      /* @__PURE__ */ jsx(Code, { children: "@mui/icons-material" }),
+      ", which includes the 1,100+ official Material icons converted to ",
+      /* @__PURE__ */ jsx(Code, { children: "SvgIcon" }),
+      " ",
+      "components."
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { color: "inherit", children: [
+      "Visit",
+      " ",
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: "https://material-ui.com/components/material-icons/",
+          target: "_blank",
+          rel: "noreferrer",
+          children: "Material UI Documentation"
+        }
+      ),
+      " ",
+      "for full list and examples."
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Heading, { as: "h5", children: "Basic usage" }),
+    /* @__PURE__ */ jsx(Text, { as: "div", children: /* @__PURE__ */ jsx(Code, { children: "import AddCircleIcon from '@mui/icons-material/AddCircle';" }) }),
+    /* @__PURE__ */ jsx(Text, { as: "div", paragraph: false, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AddCircleIcon, {}),
+      " ",
+      /* @__PURE__ */ jsx(Text, { as: "span", paragraph: false, children: "Add Circle Icon" })
+    ] }) })
+  ] });
+}
+
+export { Icons as default };

package/dist/esm/components/LinearProgress.js

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

package/dist/esm/components/Link.js

@@ -0,0 +1,33 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledLink } from './Link.styled.js';
+
+function Link({ children, color = "primary", underline = "none", ...others }) {
+  const rest = { color, underline, ...others };
+  return /* @__PURE__ */ jsx(StyledLink, { ...rest, children });
+}
+Link.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The color of the link.
+   */
+  color: PropTypes.oneOf([
+    "error",
+    "inherit",
+    "primary",
+    "secondary",
+    "textPrimary",
+    "textSecondary"
+  ]),
+  /**
+   * When the link should have an underline.
+   */
+  underline: PropTypes.oneOf(["always", "hover", "none"])
+};
+
+export { Link as default };