@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/DatePicker.js

@@ -0,0 +1,130 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import InputAdornment from '@mui/material/InputAdornment';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import EventIcon from '@mui/icons-material/Event';
+import { LocalizationProvider, DatePicker as DatePicker$1 } from '@mui/x-date-pickers';
+import TextInput from './TextInput.js';
+import IconButton from './IconButton.js';
+import { StyledWrapper } from './DatePicker.styled.js';
+
+function DatePicker({
+  disabled = false,
+  edges = "normal",
+  error = false,
+  showError = false,
+  errorMessage = "",
+  fullWidth = false,
+  helperText = "",
+  icon = void 0,
+  label = "",
+  required = false,
+  variant = "outlined",
+  format = "dd/MM/yyyy",
+  value = void 0,
+  onChange = null,
+  name,
+  ...others
+}) {
+  const rest = { error, ...others };
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(StyledWrapper, { required, hasValue: !!value, children: /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(
+    DatePicker$1,
+    {
+      clearable: true,
+      disableCloseOnSelect: false,
+      inputFormat: format,
+      value,
+      onChange,
+      onClose: () => setOpen(false),
+      renderInput: (params) => /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ...params,
+          onClick: () => setOpen(true),
+          name,
+          fullWidth,
+          label,
+          helperText,
+          disabled,
+          required,
+          showError,
+          message: errorMessage,
+          edges,
+          variant,
+          autoComplete: "off",
+          InputProps: {
+            endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => setOpen(true), children: icon || /* @__PURE__ */ jsx(EventIcon, {}) }) })
+          }
+        }
+      ),
+      ...rest
+    }
+  ) }) });
+}
+DatePicker.propTypes = {
+  /**
+   * If `true`, the `input` element will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * If `true`, the label will be displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.string,
+  /**
+   * Input icon
+   */
+  icon: PropTypes.node,
+  /**
+   * The label content.
+   */
+  label: PropTypes.string,
+  /**
+   * The field name.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * If `true`, the label is displayed as required and the `input` element` will be required.
+   */
+  required: PropTypes.bool,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: PropTypes.any,
+  /**
+   * 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,
+  /**
+   * Date format. See: https://day.js.org/docs/en/display/format
+   */
+  format: PropTypes.string,
+  /**
+   * Handle Input change event
+   */
+  onChange: PropTypes.func
+};
+
+export { DatePicker as default };

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

@@ -0,0 +1,15 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+
+const StyledWrapper = styled("span")(({ required, theme, hasValue }) => ({
+  "& input": {
+    "&::placeholder": {
+      textTransform: "uppercase"
+    }
+  },
+  "& .MuiOutlinedInput-notchedOutline, &:hover .MuiOutlinedInput-notchedOutline": {
+    borderColor: required && !hasValue ? theme.palette.secondary.main : theme.palette.grey.main
+  }
+}));
+
+export { StyledWrapper };

package/dist/esm/components/DateSelect.js

@@ -0,0 +1,208 @@
+"use strict";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import Autocomplete from './Autocomplete.js';
+import FormControl from './FormControl.js';
+import Grid from './Grid.js';
+import Text from './Text.js';
+import StyledDateSelect from './DateSelect.styled.js';
+import '../utils/helpers/date.js';
+import { dayOptions, monthOptions, yearOptions } from '../utils/helpers/dateSelect.js';
+import { isFunction } from '../utils/helpers/boolean.js';
+import 'mime/lite';
+import '../utils/helpers/time.js';
+import dayjs from 'dayjs';
+
+const prepareValue = (value, max, pad) => {
+  const parsed = parseInt(value, 10);
+  if (isNaN(parsed) || parsed === 0) {
+    return "";
+  }
+  if (max && parsed > max) {
+    return "";
+  }
+  if (pad) {
+    return value.padStart(pad, "0");
+  }
+  return value;
+};
+function DateSelect({
+  disabled = false,
+  fromFormat = "YYYY-MM-DD",
+  name,
+  onChange,
+  required = false,
+  size = "medium",
+  toFormat = "YYYY-MM-DD",
+  value = "",
+  variant = "outlined",
+  yearRange = "-5:5",
+  selectProps = {},
+  ...rest
+}) {
+  const [day, setDay] = useState(null);
+  const [month, setMonth] = useState(null);
+  const [year, setYear] = useState(null);
+  useEffect(() => {
+    const parsed = dayjs(value, fromFormat);
+    if (parsed.isValid()) {
+      setDay(parsed.format("DD"));
+      setMonth(parsed.format("MM"));
+      setYear(parsed.format("YYYY"));
+    }
+  }, [fromFormat, value]);
+  const handleChange = ({ y, m, d }) => {
+    const values = {
+      year,
+      month,
+      day,
+      ...y !== void 0 && { year: y },
+      ...m !== void 0 && { month: m },
+      ...d !== void 0 && { day: d }
+    };
+    setDay(values.day);
+    setMonth(values.month);
+    setYear(values.year);
+    const filtered = Object.values([
+      values.year,
+      values.month,
+      values.day
+    ]).filter((v) => !!v);
+    if (filtered.length === 3) {
+      const parsed = dayjs(filtered.join("-"), "YYYY-MM-DD");
+      if (isFunction(onChange)) {
+        onChange(!parsed.isValid() ? "" : parsed.format(toFormat));
+      }
+    } else if (isFunction(onChange)) {
+      onChange("");
+    }
+  };
+  const ddProps = {
+    disabled,
+    noOptionsText: "",
+    fullWidth: true,
+    disableClearable: true,
+    required,
+    size,
+    variant,
+    freeSolo: true,
+    ...selectProps
+  };
+  const separator = /* @__PURE__ */ jsx(Grid, { item: true, sx: { color: "grey.400" }, children: /* @__PURE__ */ jsx(Text, { color: "inherit", variant: "body1", children: "/" }) });
+  return /* @__PURE__ */ jsx(FormControl, { fullWidth: true, ...rest, children: /* @__PURE__ */ jsx(StyledDateSelect, { children: /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      spacing: 2,
+      alignItems: "center",
+      sx: { flexWrap: "nowrap" },
+      children: [
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            item: true,
+            sx: {
+              flexGrow: 0.5,
+              minWidth: {
+                xs: 70,
+                sm: 80
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              Autocomplete,
+              {
+                ...ddProps,
+                name: `${name}_day`,
+                options: dayOptions(),
+                placeholder: "DD",
+                textInputAttrs: {
+                  maxLength: 2,
+                  inputMode: "numeric"
+                },
+                onInputChange: (_, val) => {
+                  setDay(val);
+                },
+                onBlur: (e) => {
+                  const d = prepareValue(e.target.value, 31, 2);
+                  handleChange({ d });
+                },
+                value: day
+              }
+            )
+          }
+        ),
+        separator,
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            item: true,
+            sx: {
+              flexGrow: 0.5,
+              minWidth: {
+                xs: 70,
+                sm: 80
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              Autocomplete,
+              {
+                ...ddProps,
+                name: `${name}_month`,
+                options: monthOptions(),
+                onInputChange: (_, val) => {
+                  setMonth(val);
+                },
+                onBlur: (e) => {
+                  const m = prepareValue(e.target.value, 12, 2);
+                  handleChange({ m });
+                },
+                textInputAttrs: {
+                  maxLength: 2,
+                  inputMode: "numeric"
+                },
+                placeholder: "MM",
+                value: month
+              }
+            )
+          }
+        ),
+        separator,
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            item: true,
+            sx: {
+              flexGrow: 2,
+              minWidth: {
+                sm: 110
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              Autocomplete,
+              {
+                ...ddProps,
+                name: `${name}_year`,
+                options: yearOptions(yearRange),
+                onInputChange: (_, val) => {
+                  setYear(val);
+                },
+                onBlur: (e) => {
+                  const y = prepareValue(e.target.value);
+                  handleChange({ y });
+                },
+                textInputAttrs: {
+                  maxLength: 4,
+                  inputMode: "numeric"
+                },
+                placeholder: "YYYY",
+                value: year
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+export { DateSelect as default };

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

@@ -0,0 +1,11 @@
+"use strict";
+import 'react';
+import { styled } from '@mui/material/styles';
+
+const StyledDateSelect = styled(
+  "div"
+)`
+  width: 100%;
+`;
+
+export { StyledDateSelect as default };

package/dist/esm/components/Divider.js

@@ -0,0 +1,63 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledDivider } from './Divider.styled.js';
+
+function Divider({
+  as = "hr",
+  classes = "",
+  color = "default",
+  dense = false,
+  disableGutter = false,
+  flexItem = false,
+  orientation = "horizontal",
+  variant = "dotted"
+}) {
+  const props = {
+    as,
+    color,
+    dense,
+    disableGutter,
+    flexItem,
+    orientation,
+    variant
+  };
+  return /* @__PURE__ */ jsx(StyledDivider, { className: classes, ...props });
+}
+Divider.propTypes = {
+  /**
+   * The element used for the root node.
+   */
+  as: PropTypes.oneOf(["div", "hr", "li", "p", "span"]),
+  /**
+   * Extend the classes to creates extra styles of the component.
+   */
+  classes: PropTypes.string,
+  /**
+   * Defines the color of line
+   */
+  color: PropTypes.oneOf(["default", "inherit"]),
+  /**
+   * If `true`, compact vertical margin will be used
+   */
+  dense: PropTypes.bool,
+  /**
+   * If `true`, compact vertical margin will be used
+   */
+  flexItem: PropTypes.bool,
+  /**
+   * If `true`, vertical margin will be removed.
+   */
+  disableGutter: PropTypes.bool,
+  /**
+   * Defines the color of line
+   */
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+  /**
+   * Defines the style of line
+   */
+  variant: PropTypes.oneOf(["solid", "dotted", "dashed"])
+};
+
+export { Divider as default };

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

@@ -0,0 +1,60 @@
+"use strict";
+import styled, { css } from 'styled-components';
+
+const StyledDivider = styled.hr`
+  ${({
+  as,
+  color,
+  dense,
+  disableGutter,
+  flexItem,
+  orientation,
+  variant,
+  theme
+}) => css`
+    color: inherit;
+    background: transparent;
+    border-style: ${variant};
+    border-color: ${color === "default" ? theme.palette.grey[300] : "currentColor"};
+    flex-shrink: 0;
+    list-style-type: none;
+
+    ${as === "span" && css`
+      display: block;
+    `}
+
+    ${flexItem && css`
+      align-self: stretch;
+    `}
+
+    ${disableGutter && css`
+      margin: 0;
+    `}
+
+    ${orientation === "horizontal" && !disableGutter && !dense && css`
+      margin: 1rem 0;
+    `}
+
+    ${orientation === "horizontal" && !disableGutter && dense && css`
+      margin: 0.4rem 0;
+    `}
+
+    ${orientation === "vertical" && !disableGutter && !dense && css`
+      margin: 0 1rem;
+    `}
+
+    ${orientation === "vertical" && !disableGutter && dense && css`
+      margin: 0 0.4rem;
+    `}
+
+    ${orientation === "horizontal" && !flexItem && css`
+      border-width: 0px 0px thin 0px;
+    `}
+
+    ${(orientation === "vertical" || flexItem) && css`
+      border-width: 0px thin 0px 0px;
+    `}
+  `}
+`;
+
+export { StyledDivider };

package/dist/esm/components/DropZone.js

@@ -0,0 +1,149 @@
+"use strict";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import { useDropzone } from 'react-dropzone';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import WarningIcon from '@mui/icons-material/Warning';
+import { AnimatePresence, motion } from 'framer-motion';
+import { formatBytes } from '../utils/helpers/file.js';
+import '../utils/helpers/time.js';
+import Alert from './Alert.js';
+import { StyledWrapper, StyledDraggingIndicator, StyledLoader, StyledIcon } from './DropZone.styled.js';
+
+function DropZone({
+  loading = false,
+  compact = false,
+  disabled = false,
+  onDrop,
+  edges = "normal",
+  dropzoneLabel = "Upload file",
+  dropzoneDescription = "Drag and drop a file here, or click to select a file",
+  dropzoneProps = null,
+  listAcceptedFiles = false
+}) {
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    acceptedFiles,
+    fileRejections
+  } = useDropzone({
+    onDrop,
+    disabled,
+    ...dropzoneProps
+  });
+  const hasErrors = fileRejections.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      StyledWrapper,
+      {
+        compact: compact ? "yes" : "no",
+        disabled,
+        edges,
+        errors: hasErrors ? "yes" : "no",
+        ...getRootProps(),
+        sx: {
+          mb: 1
+        },
+        children: [
+          isDragActive && /* @__PURE__ */ jsx(StyledDraggingIndicator, { isDragReject }),
+          loading && !hasErrors && /* @__PURE__ */ jsx(StyledLoader, {}),
+          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+          isDragAccept && /* @__PURE__ */ jsx(StyledIcon, { compact, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "inherit", fontSize: "inherit" }) }),
+          isDragReject && /* @__PURE__ */ jsx(StyledIcon, { compact, children: /* @__PURE__ */ jsx(WarningIcon, { color: "inherit", fontSize: "inherit" }) }),
+          !isDragAccept && !isDragReject && /* @__PURE__ */ jsx(StyledIcon, { compact, children: /* @__PURE__ */ jsx(CloudUploadIcon, { color: "inherit", fontSize: "inherit" }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", align: "center", children: isDragReject ? "Error" : dropzoneLabel }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", align: "center", color: "textSecondary", children: isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+      listAcceptedFiles && acceptedFiles.length > 0 && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { translateY: -20, opacity: 0 },
+          animate: { translateY: 0, opacity: 1 },
+          exit: { translateY: -20, opacity: 0 },
+          transition: { duration: 0.25, ease: "easeOut" },
+          children: acceptedFiles.map((file) => /* @__PURE__ */ jsx(
+            Alert,
+            {
+              variant: "standard",
+              severity: "success",
+              style: { marginBottom: 5 },
+              children: file.path
+            },
+            file.path
+          ))
+        }
+      ),
+      hasErrors && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { translateY: -20, opacity: 0 },
+          animate: { translateY: 0, opacity: 1 },
+          exit: { translateY: -20, opacity: 0 },
+          transition: { duration: 0.25, ease: "easeOut" },
+          children: /* @__PURE__ */ jsx(Alert, { severity: "info", variant: "standard", children: fileRejections.map(({ file, errors }) => /* @__PURE__ */ jsxs("div", { children: [
+            file.path,
+            /* @__PURE__ */ jsx("ul", { children: errors.map((e) => {
+              if (e.code === "file-too-large") {
+                return /* @__PURE__ */ jsxs("li", { children: [
+                  "File size is larger than",
+                  " ",
+                  formatBytes(dropzoneProps.maxSize)
+                ] }, e.code);
+              }
+              return /* @__PURE__ */ jsx("li", { children: e.message }, e.code);
+            }) })
+          ] }, file.path)) })
+        }
+      )
+    ] })
+  ] });
+}
+DropZone.propTypes = {
+  /**
+   * Whether or not to show a list of accepted files.
+   */
+  listAcceptedFiles: PropTypes.bool,
+  /**
+   * Show progress spinner
+   */
+  loading: PropTypes.bool,
+  /**
+   * Compact Layout
+   */
+  compact: PropTypes.bool,
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Text label displayed in the dropzone
+   */
+  dropzoneLabel: PropTypes.string,
+  /**
+   * Text description displayed in the dropzone
+   */
+  dropzoneDescription: PropTypes.string,
+  /**
+   * Pass props for react-dropzone. See https://react-dropzone.js.org/
+   */
+  dropzoneProps: PropTypes.object,
+  /**
+   * Function: do something when user drops image
+   */
+  onDrop: PropTypes.func.isRequired,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"])
+};
+
+export { DropZone as default };