@tenancy.nz/ui 1.0.0 → 1.0.2

package/README.md

@@ -1,69 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```

package/dist/cjs/components/Alert.cjs

@@ -0,0 +1,48 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var CheckCircleOutlineOutlinedIcon = require('@mui/icons-material/CheckCircleOutlineOutlined');
+var ErrorOutlineOutlinedIcon = require('@mui/icons-material/ErrorOutlineOutlined');
+var InfoOutlinedIcon = require('@mui/icons-material/InfoOutlined');
+var WarningAmberOutlinedIcon = require('@mui/icons-material/WarningAmberOutlined');
+var Alert_styled = require('./Alert.styled.cjs');
+
+const variantMap = {
+  contained: "filled"
+};
+const icons = {
+  info: /* @__PURE__ */ jsxRuntime.jsx(InfoOutlinedIcon, { sx: { fontSize: 24 } }),
+  success: /* @__PURE__ */ jsxRuntime.jsx(CheckCircleOutlineOutlinedIcon, { sx: { fontSize: 24 } }),
+  error: /* @__PURE__ */ jsxRuntime.jsx(ErrorOutlineOutlinedIcon, { sx: { fontSize: 24 } }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(WarningAmberOutlinedIcon, { sx: { fontSize: 24 } })
+};
+function Alert({
+  children,
+  color = "info",
+  icon = true,
+  title = void 0,
+  variant = "standard",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Alert_styled.default,
+    {
+      color,
+      variant: variantMap[variant] || variant,
+      severity: color,
+      iconMapping: icons,
+      closeText: "undo",
+      ...rest,
+      ...(!icon || !color || !icons[color]) && { icon: false },
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(Alert_styled.StyledAlertTitle, { children: title }),
+        children
+      ]
+    }
+  );
+}
+
+exports.default = Alert;

package/dist/cjs/components/Alert.styled.cjs

@@ -0,0 +1,41 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var Alert = require('@mui/material/Alert');
+var AlertTitle = require('@mui/material/AlertTitle');
+var styles = require('@mui/material/styles');
+var object = require('../utils/helpers/object.cjs');
+
+const standardStyles = ({ color, theme }) => react.css`
+  border: 1px solid currentColor;
+  background-color: ${object.getObjectProp(theme, `vars.palette.${color}.light`)};
+  color: ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+`;
+const outlinedStyles = ({ color, theme }) => react.css`
+  background-color: transparent;
+  border: 1px solid currentColor;
+  color: ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+`;
+const StyledAlertTitle = styles.styled(
+  AlertTitle
+)`
+  font-size: inherit;
+`;
+const StyledAlert = styles.styled(Alert)`
+  ${({ color, theme, variant }) => react.css`
+    font-size: ${object.getObjectProp(theme, "typography.fontSize")}px;
+    padding: 8px 16px;
+    ${variant === "standard" && standardStyles({ color, theme })}
+    ${variant === "outlined" && outlinedStyles({ color, theme })}
+
+    .MuiAlert-action {
+      margin-right: 0;
+    }
+  `}
+`;
+
+exports.StyledAlertTitle = StyledAlertTitle;
+exports.default = StyledAlert;

package/dist/cjs/components/Autocomplete.cjs

@@ -0,0 +1,176 @@
+"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 KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
+var FormControl = require('./FormControl.cjs');
+var Autocomplete_styled = require('./Autocomplete.styled.cjs');
+var TextInput = require('./TextInput.cjs');
+
+function Autocomplete({
+  disabled = false,
+  edges = "smooth",
+  fullWidth = true,
+  helperText = "",
+  helperTextPlacement = "below",
+  label = "",
+  placeholder = "",
+  popupIcon = void 0,
+  required = false,
+  size = "medium",
+  variant = "outlined",
+  showError = false,
+  errorMessage = "",
+  name,
+  hideLabel = false,
+  disableIconRotation = false,
+  TextInputProps = {},
+  onChange = () => {
+  },
+  textInputAttrs = {},
+  ...rest
+}) {
+  const [selectedValue, setSelectedValue] = React.useState(rest.value || null);
+  const handleChange = (event, val, ...extras) => {
+    setSelectedValue(val);
+    onChange(event, val, ...extras);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormControl.default,
+    {
+      name,
+      fullWidth,
+      label,
+      helperText,
+      helperTextPlacement,
+      disabled,
+      required,
+      showError,
+      errorMessage,
+      hideLabel,
+      edges,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Autocomplete_styled.StyledAutocomplete,
+        {
+          disabled,
+          iconrotation: disableIconRotation ? "no" : "yes",
+          popupIcon: popupIcon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, {}) : popupIcon,
+          renderInput: ({ inputProps, InputProps, ...params }) => /* @__PURE__ */ jsxRuntime.jsx(
+            TextInput.default,
+            {
+              ...params,
+              disabled,
+              name,
+              variant,
+              size,
+              edges,
+              required,
+              value: selectedValue,
+              placeholder,
+              inputProps: {
+                autoComplete: "off",
+                ...textInputAttrs,
+                ...inputProps
+              },
+              slotProps: {
+                input: {
+                  ...TextInputProps,
+                  ...InputProps
+                }
+              },
+              showError,
+              message: errorMessage,
+              ref: InputProps.ref
+            }
+          ),
+          onChange: handleChange,
+          ...rest
+        }
+      )
+    }
+  );
+}
+Autocomplete.propTypes = {
+  /**
+   * If `true`, the `input` element will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Prevent icon rotating on open
+   */
+  disableIconRotation: PropTypes.bool,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * If `true`, the input will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Field name.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * 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,
+  /**
+   * The short hint displayed in the input before the user enters a value.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * The icon that displays the arrow.
+   */
+  popupIcon: PropTypes.any,
+  /**
+   * If `true`, the label is displayed as required and the `input` element` will be required.
+   */
+  required: PropTypes.bool,
+  /**
+   * The size to use.
+   */
+  size: PropTypes.oneOf(["medium", "small"]),
+  /**
+   * Props to pass to the TextField component.
+   */
+  TextInputProps: PropTypes.object,
+  /**
+   * Pass HTML attrs to the TextField component.
+   */
+  textInputAttrs: PropTypes.shape({}),
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes.oneOf(["filled", "outlined"]),
+  /**
+   * 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 label visible only to screen readers
+   */
+  hideLabel: PropTypes.bool,
+  /**
+   * Function to handle value chage
+   */
+  onChange: PropTypes.func
+};
+
+exports.default = Autocomplete;

package/dist/cjs/components/Autocomplete.styled.cjs

@@ -0,0 +1,15 @@
+"use strict";
+'use strict';
+
+var Autocomplete = require('@mui/material/Autocomplete');
+var styles = require('@mui/material/styles');
+
+const StyledAutocomplete = styles.styled(
+  Autocomplete
+)(({ iconrotation }) => ({
+  "& .MuiAutocomplete-popupIndicatorOpen": {
+    transform: iconrotation === "yes" ? null : "rotate(0)"
+  }
+}));
+
+exports.StyledAutocomplete = StyledAutocomplete;

package/dist/cjs/components/Avatar.cjs

@@ -0,0 +1,52 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Avatar_styled = require('./Avatar.styled.cjs');
+
+function Avatar({
+  children = null,
+  size = "small",
+  src = "",
+  srcSet = "",
+  variant = "",
+  ...rest
+}) {
+  const props = { size, src, srcSet, variant, ...rest };
+  return /* @__PURE__ */ jsxRuntime.jsx(Avatar_styled.StyledAvatar, { ...props, children });
+}
+Avatar.propTypes = {
+  /**
+   * Used in combination with src to provide an alt
+   * attribute for the rendered img element.
+   */
+  alt: PropTypes.string.isRequired,
+  /**
+   * Used to render icon or text elements inside the
+   * Avatar if src is not set. This can be an element,
+   * or just a string.
+   */
+  children: PropTypes.node,
+  /**
+   * Defines the size of component
+   */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  /**
+   * The `src` attribute for the `img` element.
+   */
+  src: PropTypes.string,
+  /**
+   * The `srcSet` attribute for the `img` element. Use this attribute for responsive image display.
+   */
+  srcSet: PropTypes.string,
+  /**
+   * The shape of the avatar.
+   */
+  variant: PropTypes.oneOf(["circular", "rounded", "square"])
+};
+
+exports.default = Avatar;

package/dist/cjs/components/Avatar.styled.cjs

@@ -0,0 +1,24 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+var MuiAvatar = require('@mui/material/Avatar');
+
+const sizeFn = (size) => {
+  const sizes = {
+    large: 50,
+    medium: 40,
+    small: 30
+  };
+  return sizes[size];
+};
+const StyledAvatar = styled(MuiAvatar)`
+  ${({ size }) => styled.css`
+    && {
+      width: ${sizeFn(size)}px;
+      height: ${sizeFn(size)}px;
+    }
+  `}
+`;
+
+exports.StyledAvatar = StyledAvatar;

package/dist/cjs/components/AvatarCropDialog.cjs

@@ -0,0 +1,200 @@
+"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 useMediaQuery = require('@mui/material/useMediaQuery');
+var ReactCrop = require('react-image-crop');
+var FormControl = require('./FormControl.cjs');
+var Button = require('./Button.cjs');
+var Confirmation = require('./Confirmation.cjs');
+var ModalActions = require('./ModalActions.cjs');
+require('react-image-crop/dist/ReactCrop.css');
+var AvatarCropDialog_styled = require('./AvatarCropDialog.styled.cjs');
+
+function AvatarCropDialog({
+  helperText = "",
+  label = "",
+  showError = false,
+  errorMessage = "",
+  onSave = () => Promise.resolve(true),
+  onDelete = () => Promise.resolve(true),
+  droppedFile = null
+}) {
+  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
+  const [crop, setCrop] = React.useState({ aspect: 1, unit: "%", width: 100 });
+  const [originalImage, setOriginalImage] = React.useState(null);
+  const [confirmDelete, setConfirmDelete] = React.useState(false);
+  const [editorWidth, setEditorWidth] = React.useState("100%");
+  const [saving, setSaving] = React.useState(false);
+  const [cancelling, setCancelling] = React.useState(false);
+  const handleCancel = () => {
+    setCancelling(true);
+    onDelete().then(() => {
+      setOriginalImage(null);
+      setConfirmDelete(false);
+      setCancelling(false);
+    });
+  };
+  const handleCropChange = (newCrop) => setCrop(newCrop);
+  const handleImageLoaded = (image) => {
+    let { width } = image;
+    if (window.innerHeight * 0.7 < image.height) {
+      width = image.width * (window.innerHeight * 0.7 / image.height);
+    }
+    if (width < window.innerWidth * 0.7) {
+      setEditorWidth(`${width}px`);
+    }
+    const widthPercent = image.width < image.height ? 1 : image.height / image.width;
+    const heightPercent = image.width > image.height ? 1 : image.width / image.height;
+    const y = (1 - heightPercent) / 2;
+    const x = (1 - widthPercent) / 2;
+    const height = image.height * (width / image.width);
+    setCrop({
+      unit: "px",
+      width: width * widthPercent,
+      height: height * heightPercent,
+      x: width * x,
+      y: height * y,
+      aspect: 1
+    });
+    setOriginalImage(image);
+    return false;
+  };
+  const handleImageSave = () => {
+    if (originalImage && crop.width && crop.height) {
+      const canvas = document.createElement("canvas");
+      const scaleX = originalImage.naturalWidth / originalImage.width;
+      const scaleY = originalImage.naturalHeight / originalImage.height;
+      canvas.width = crop.width;
+      canvas.height = crop.height;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(
+        originalImage,
+        crop.x * scaleX,
+        crop.y * scaleY,
+        crop.width * scaleX,
+        crop.height * scaleY,
+        0,
+        0,
+        crop.width,
+        crop.height
+      );
+      return new Promise((resolve, reject) => {
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              console.error("Canvas is empty");
+              reject();
+            }
+            setSaving(true);
+            const reader = new FileReader();
+            reader.addEventListener("load", () => {
+              onSave(reader.result, blob).then(() => resolve());
+            });
+            reader.readAsDataURL(blob);
+          },
+          "image/jpeg",
+          0.6
+        );
+      });
+    }
+    return false;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormControl.default,
+      {
+        name: "avatar-crop-editor",
+        fullWidth: true,
+        label,
+        helperText,
+        showError,
+        errorMessage,
+        children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCropDialog_styled.StyledEditor, { showError, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ReactCrop,
+          {
+            src: droppedFile,
+            crop,
+            style: {
+              width: editorWidth,
+              maxHeight: window.innerHeight * 0.7
+            },
+            circularCrop: true,
+            onChange: handleCropChange,
+            onImageLoaded: handleImageLoaded,
+            keepSelection: true
+          }
+        ) })
+      },
+      "form-control"
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(ModalActions.default, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.default,
+        {
+          onClick: handleCancel,
+          variant: "outlined",
+          loading: cancelling,
+          color: "primaryAlt",
+          fullWidth: !isNotMobile,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.default,
+        {
+          onClick: handleImageSave,
+          loading: saving,
+          color: "primaryAlt",
+          fullWidth: !isNotMobile,
+          children: "Save"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Confirmation.default,
+      {
+        open: confirmDelete,
+        onCancel: () => setConfirmDelete(false),
+        onConfirm: handleCancel,
+        message: "Are you sure you want to remove the attached image?"
+      }
+    )
+  ] });
+}
+AvatarCropDialog.propTypes = {
+  /**
+   * 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,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * Do something when user saves cropped image, received the base64 string
+   */
+  onSave: PropTypes.func,
+  /**
+   * Do something when user removes image
+   */
+  onDelete: PropTypes.func,
+  /**
+   * The label content.
+   */
+  label: PropTypes.string,
+  /**
+   * Result from dropzone...
+   */
+  droppedFile: PropTypes.any
+};
+
+exports.default = AvatarCropDialog;

package/dist/cjs/components/AvatarCropDialog.styled.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+
+const StyledEditor = styles.styled("div")(({ showError, theme }) => ({
+  width: "100%",
+  padding: theme.spacing(6, 4),
+  backgroundImage: `linear-gradient(45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(-45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${theme.palette.grey[700]} 75%), linear-gradient(-45deg, transparent 75%, ${theme.palette.grey[700]} 75%)`,
+  backgroundSize: "20px 20px",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+  border: `1px solid ${showError ? theme.palette.error.main : theme.palette.primary.main}`,
+  borderRadius: theme.shape.borderRadius,
+  "& .ReactCrop": {
+    margin: "0 auto",
+    display: "block"
+  }
+}));
+
+exports.StyledEditor = StyledEditor;