@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/TimeInput.js

@@ -0,0 +1,244 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import FormControl from './FormControl.js';
+import Select from './Select.js';
+import 'mime/lite';
+import { parseTimeStrByFormat, getHourOptions, getMinuteOptions, getMeridianOptions } from '../utils/helpers/time.js';
+import { StyledContainer, StyledSelect, StyledSpacer } from './TimeInput.styled.js';
+
+function TimeInput({
+  disabled = false,
+  disableFirstOption = false,
+  errorMessage = "",
+  fullWidth = false,
+  fromFormat = "HH:mm:ss",
+  helperText = "",
+  helperTextPlacement = "below",
+  label = "",
+  minutesIncrementStep = 5,
+  onChange,
+  name,
+  required = false,
+  showError = false,
+  size = "medium",
+  toFormat = "HH:mm:ss",
+  value = "",
+  ...rest
+}) {
+  const inputRef = useRef();
+  const [values, setValues] = useState({
+    hour: "",
+    minute: "",
+    meridian: ""
+  });
+  useEffect(() => {
+    if (value) {
+      const dateObj = parseTimeStrByFormat(value, fromFormat);
+      setValues({
+        hour: dateObj.format("hh"),
+        minute: dateObj.format("mm"),
+        meridian: dateObj.format("a")
+      });
+    }
+  }, [fromFormat, value]);
+  const hourOptions = getHourOptions(disableFirstOption);
+  const meridianOptions = getMeridianOptions(disableFirstOption);
+  const minuteOptions = getMinuteOptions(
+    0,
+    minutesIncrementStep === 5 ? 55 : 59,
+    minutesIncrementStep,
+    disableFirstOption
+  );
+  const handleChange = (e, type) => {
+    const newValues = { ...values, [type]: e.target.value };
+    const dateObj = parseTimeStrByFormat(
+      `${newValues.hour}:${newValues.minute}${newValues.meridian}`,
+      "hh:mma"
+    );
+    const dateStr = dateObj.format(toFormat);
+    const newValue = dateStr === "Invalid Date" ? "" : dateStr;
+    inputRef.current.value = newValue;
+    const evt = new Event("change", { bubbles: true, cancelable: false });
+    inputRef.current.dispatchEvent(evt);
+    setValues(newValues);
+    onChange(evt);
+  };
+  return /* @__PURE__ */ jsxs(
+    FormControl,
+    {
+      fullWidth,
+      name,
+      label,
+      helperText,
+      helperTextPlacement,
+      disabled,
+      required,
+      showError,
+      errorMessage,
+      edges: "normal",
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            defaultValue: rest.defaultValue || value,
+            name,
+            ref: inputRef,
+            style: {
+              height: 0,
+              width: 0,
+              appearance: "none",
+              border: "none",
+              outline: "none",
+              margin: 0,
+              padding: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(StyledContainer, { size, children: [
+          /* @__PURE__ */ jsx(
+            StyledSelect,
+            {
+              required,
+              size,
+              value: inputRef.current ? inputRef.current.value : value,
+              children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  disabled,
+                  name: `${name}_hours`,
+                  placeholder: "HH",
+                  required,
+                  native: true,
+                  options: hourOptions,
+                  value: values.hour,
+                  onChange: (e) => {
+                    handleChange(e, "hour");
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(StyledSpacer, { children: ":" }),
+          /* @__PURE__ */ jsx(
+            StyledSelect,
+            {
+              required,
+              size,
+              value: inputRef.current ? inputRef.current.value : value,
+              children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  disabled,
+                  name: `${name}_minutes`,
+                  placeholder: "MM",
+                  required,
+                  native: true,
+                  options: minuteOptions,
+                  value: values.minute,
+                  onChange: (e) => {
+                    handleChange(e, "minute");
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(StyledSpacer, {}),
+          /* @__PURE__ */ jsx(
+            StyledSelect,
+            {
+              required,
+              size,
+              value: inputRef.current ? inputRef.current.value : value,
+              children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  disabled,
+                  name: `${name}_meridian`,
+                  placeholder: "AM",
+                  required,
+                  native: true,
+                  options: meridianOptions,
+                  value: values.meridian,
+                  onChange: (e) => {
+                    handleChange(e, "meridian");
+                  }
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+TimeInput.propTypes = {
+  /**
+   * If `true`, the input will be not be intractive.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, will disable the first option in each select box.
+   */
+  disableFirstOption: PropTypes.bool,
+  /**
+   * The error message to display if showError === true
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * If `true`, the component will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The time format in which `value` is provided.
+   */
+  fromFormat: PropTypes.string,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * Placement of the helper text above or below the input.
+   */
+  helperTextPlacement: PropTypes.oneOf(["above", "below"]),
+  /**
+   * The increment value used to create minutes list.
+   */
+  minutesIncrementStep: PropTypes.oneOf([1, 5]),
+  /**
+   * Function to handle input change
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * Text to describe the field.
+   */
+  label: PropTypes.node,
+  /**
+   * HTML `name` attribute of the field.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   *
+   */
+  required: PropTypes.bool,
+  /**
+   * Whether or not to display an error message (if there is a message to display).
+   */
+  showError: PropTypes.bool,
+  /**
+   * The size of the input.
+   */
+  size: PropTypes.oneOf(["medium", "small"]),
+  /**
+   * The time format in which new `value` will be returned after selection.
+   * @see https://day.js.org/docs/en/display/format#list-of-all-available-formats
+   */
+  toFormat: PropTypes.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: PropTypes.string
+};
+
+export { TimeInput as default };

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

@@ -0,0 +1,34 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+
+const StyledContainer = styled(Box)(({ size }) => ({
+  display: "flex",
+  flexWrap: "nowrap",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  "& .MuiNativeSelect-icon": {
+    width: size === "small" ? "0.7em" : null,
+    height: size === "small" ? "0.7em" : null,
+    right: size === "small" ? "3px" : null,
+    top: size === "small" ? "calc(50% - 9px)" : null
+  }
+}));
+const StyledSelect = styled("div")(({ required, size, theme, value }) => ({
+  minWidth: size === "small" ? 50 : 80,
+  "& select": {
+    padding: "0.8rem 2rem 0.7rem 1rem !important"
+  },
+  "& fieldset": {
+    borderColor: required && !value ? theme.palette.secondary.main : null
+  }
+}));
+const StyledSpacer = styled("span")(({ size, theme }) => ({
+  color: theme.palette.default.light,
+  padding: size === "small" ? "0 3px" : "0 5px",
+  fontSize: size === "small" ? "14px" : "18px",
+  fontWeight: 700
+}));
+
+export { StyledContainer, StyledSelect, StyledSpacer };

package/dist/esm/components/Tooltip.js

@@ -0,0 +1,36 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import Box from './Box.js';
+import StyledTooltip from './Tooltip.styled.js';
+
+function Tooltip({
+  children,
+  boxProps = {},
+  arrow = true,
+  enterDelay = 100,
+  enterNextDelay = 0,
+  enterTouchDelay = 700,
+  followCursor = false,
+  id = "",
+  leaveDelay = 0,
+  leaveTouchDelay = 1500,
+  placement = "top",
+  ...others
+}) {
+  const { className } = others;
+  const rest = {
+    arrow,
+    enterDelay,
+    enterNextDelay,
+    enterTouchDelay,
+    followCursor,
+    id,
+    leaveDelay,
+    leaveTouchDelay,
+    placement,
+    ...others
+  };
+  return /* @__PURE__ */ jsx(StyledTooltip, { classes: { popper: className }, ...rest, children: /* @__PURE__ */ jsx(Box, { display: "inline-flex", sx: boxProps, children }) });
+}
+
+export { Tooltip as default };

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

@@ -0,0 +1,51 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const StyledTooltip = styled(Tooltip)`
+  ${({ theme }) => `
+    & .${tooltipClasses.tooltip} {
+      padding: ${theme.spacing(3)};
+      background-color: ${getObjectProp(theme, "vars.palette.secondary.main")};
+      color: ${getObjectProp(theme, "vars.palette.secondary.contrastText")};
+      border: none;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    && .${tooltipClasses.arrow} {
+      color: ${getObjectProp(theme, "vars.palette.secondary.main")};
+
+
+      &:before {
+        border-radius: ${theme.shape.borderRadius}px;
+      }
+    }
+
+    && .${tooltipClasses.tooltipPlacementTop} .${tooltipClasses.arrow} {
+      margin-bottom: -1.08em;
+      width: 2em;
+      height: 1.2em;
+    }
+    && .${tooltipClasses.tooltipPlacementBottom} .${tooltipClasses.arrow} {
+      margin-top: -1.08em;
+      width: 2em;
+      height: 1.2em;
+    }
+
+    && .${tooltipClasses.tooltipPlacementLeft} .${tooltipClasses.arrow} {
+      margin-right: -1.08em;
+      width: 1.2em;
+      height: 2em;
+    }
+
+    && .${tooltipClasses.tooltipPlacementRight} .${tooltipClasses.arrow} {
+      margin-left: -1.08em;
+      width: 1.2em;
+      height: 2em;
+    }
+`}
+`;
+
+export { StyledTooltip as default };

package/dist/esm/components/Truncate.js

@@ -0,0 +1,19 @@
+"use strict";
+import PropTypes from 'prop-types';
+import 'mime/lite';
+import { stripTags } from '../utils/helpers/string.js';
+import '../utils/helpers/time.js';
+
+function Truncate({ children, limit }) {
+  const truncatedStr = stripTags(children).slice(0, limit).trim();
+  if (children.length > truncatedStr.length) {
+    return `${truncatedStr}...`;
+  }
+  return truncatedStr;
+}
+Truncate.propTypes = {
+  children: PropTypes.string.isRequired,
+  limit: PropTypes.number.isRequired
+};
+
+export { Truncate as default };

package/dist/esm/index.js

@@ -0,0 +1,84 @@
+"use strict";
+export { default as Alert } from './components/Alert.js';
+export { default as Autocomplete } from './components/Autocomplete.js';
+export { default as Avatar } from './components/Avatar.js';
+export { default as AvatarInput } from './components/AvatarInput.js';
+export { default as Badge } from './components/Badge.js';
+export { default as BankAccountInput } from './components/BankAccountInput.js';
+export { default as Bar } from './components/Bar.js';
+export { default as BooleanInput } from './components/BooleanInput.js';
+export { default as Button } from './components/Button.js';
+export { default as Box } from './components/Box.js';
+export { default as Card } from './components/Card.js';
+export { default as CardContent } from './components/CardContent.js';
+export { default as Checkbox } from './components/Checkbox.js';
+export { default as CircularProgress } from './components/CircularProgress.js';
+export { default as Container } from './components/Container.js';
+export { default as LinearProgress } from './components/LinearProgress.js';
+export { default as CollapsedText } from './components/CollapsedText.js';
+export { default as Confirmation } from './components/Confirmation.js';
+export { default as CroppedImageInput } from './components/CroppedImageInput.js';
+export { default as DateInput } from './components/DateInput.js';
+export { default as DatePicker } from './components/DatePicker.js';
+export { default as Divider } from './components/Divider.js';
+export { default as DropZone } from './components/DropZone.js';
+export { default as Embed } from './components/Embed.js';
+export { default as FileUpload } from './components/FileUpload.js';
+export { default as FileUploadButton } from './components/FileUploadButton.js';
+export { default as FileViewer } from './components/FileViewer.js';
+export { default as FlashMessage } from './components/FlashMessage.js';
+export { default as FormControl } from './components/FormControl.js';
+export { default as FormLabel } from './components/FormLabel.js';
+export { default as Grid } from './components/Grid.js';
+export { default as Heading } from './components/Heading.js';
+export { default as IconButton } from './components/IconButton.js';
+export { default as Link } from './components/Link.js';
+export { default as Media } from './components/Media.js';
+export { default as Modal } from './components/Modal.js';
+export { default as ModalActions } from './components/ModalActions.js';
+export { default as ModalContent } from './components/ModalContent.js';
+export { default as ModalHeader } from './components/ModalHeader.js';
+export { default as Nameplate } from './components/Nameplate.js';
+export { default as Pagination } from './components/Pagination.js';
+export { default as Popper } from './components/Popper.js';
+export { default as Paper } from './components/Paper.js';
+export { default as PropertyCard } from './components/PropertyCard.js';
+export { default as Radio } from './components/Radio.js';
+export { default as Rating } from './components/Rating.js';
+export { default as Select } from './components/Select.js';
+export { default as Skeleton } from './components/Skeleton.js';
+export { default as Stepper } from './components/Stepper.js';
+export { default as SuccessModal } from './components/SuccessModal.js';
+export { default as Switch } from './components/Switch.js';
+export { default as Tab } from './components/Tab.js';
+export { default as TabPanel } from './components/TabPanel.js';
+export { default as Tabs } from './components/Tabs.js';
+export { default as Tag } from './components/Tag.js';
+export { default as Text } from './components/Text.js';
+export { default as TextInput } from './components/TextInput.js';
+export { default as ThemeProvider } from './components/ThemeProvider.js';
+export { default as TimeInput } from './components/TimeInput.js';
+export { default as Tooltip } from './components/Tooltip.js';
+export { default as Table } from './components/Table.js';
+export { default as TableBody } from './components/TableBody.js';
+export { default as TableCell } from './components/TableCell.js';
+export { default as TableRow } from './components/TableRow.js';
+export { default as TableContainer } from './components/TableContainer.js';
+export { default as TableFooter } from './components/TableFooter.js';
+export { default as TableHead } from './components/TableHead.js';
+export { default as Truncate } from './components/Truncate.js';
+export { default as loadFont } from './utils/loadFont.js';
+export { default as ButtonBase } from '@mui/material/ButtonBase';
+export { default as Drawer } from '@mui/material/Drawer';
+export { default as Accordion } from '@mui/material/Accordion';
+export { default as AccordionSummary } from '@mui/material/AccordionSummary';
+export { default as AccordionDetails } from '@mui/material/AccordionDetails';
+export { default as AccordionActions } from '@mui/material/AccordionActions';
+export { default as CardHeader } from '@mui/material/CardHeader';
+export { default as ClickAwayListener } from '@mui/material/ClickAwayListener';
+export { default as FormHelperText } from '@mui/material/FormHelperText';
+export { default as InputAdornment } from '@mui/material/InputAdornment';
+export { default as InputBase } from '@mui/material/InputBase';
+export { default as useMediaQuery } from '@mui/material/useMediaQuery';
+export { createFilterOptions as createAutocompleteFilterOptions } from '@mui/material/Autocomplete';
+export { styled, useTheme } from '@mui/material/styles';