@tenancy.nz/feature-ui 1.0.0 → 1.0.2

package/dist/esm/components/GridList.js

@@ -0,0 +1,76 @@
+"use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { Grid, Box, Pagination, Select } from '@tenancy.nz/ui';
+import Hidden from './Hidden.js';
+
+var _excluded = ["items", "children", "renderItem", "headerComponent", "footerComponent", "spacing", "loading", "loadingComponent", "emptyComponent", "currentPage", "totalPages", "onChangePage", "showHeaderComponent", "resultsPerPage", "onChangeResultsPerPage", "perPage", "scrollTopOnChangePage"];
+function GridList(_ref) {
+  var items = _ref.items,
+    children = _ref.children,
+    renderItem = _ref.renderItem,
+    headerComponent = _ref.headerComponent,
+    footerComponent = _ref.footerComponent,
+    spacing = _ref.spacing,
+    loading = _ref.loading,
+    loadingComponent = _ref.loadingComponent,
+    emptyComponent = _ref.emptyComponent,
+    currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    onChangePage = _ref.onChangePage,
+    showHeaderComponent = _ref.showHeaderComponent,
+    resultsPerPage = _ref.resultsPerPage,
+    onChangeResultsPerPage = _ref.onChangeResultsPerPage,
+    perPage = _ref.perPage,
+    scrollTopOnChangePage = _ref.scrollTopOnChangePage,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var gridContainerRef = React.useRef(null);
+  var childLen = React.Children.count(children);
+  var isChildren = childLen > 0;
+  var listLength = 0;
+  if (!isChildren) {
+    listLength = Array.isArray(items) ? items.length : 0;
+  } else {
+    listLength = childLen;
+  }
+  var isEmpty = listLength === 0;
+  React.useEffect(function () {
+    if (scrollTopOnChangePage && currentPage > 1 && !loading && gridContainerRef && gridContainerRef.current) {
+      gridContainerRef.current.scrollIntoView();
+    }
+  }, [currentPage, loading, gridContainerRef, scrollTopOnChangePage]);
+  return /* @__PURE__ */React.createElement(React.Fragment, null, showHeaderComponent && headerComponent, loading && /* @__PURE__ */React.createElement(React.Fragment, null, loadingComponent), !loading && isEmpty && /* @__PURE__ */React.createElement(React.Fragment, null, emptyComponent), !loading && !isEmpty && /* @__PURE__ */React.createElement("div", {
+    ref: gridContainerRef,
+    style: {
+      width: "100%"
+    }
+  }, /* @__PURE__ */React.createElement(Grid, _objectSpread2(_objectSpread2({
+    container: true
+  }, rest), {}, {
+    spacing: spacing
+  }), isChildren ? children : items.map(renderItem))), typeof onChangePage === "function" && /* @__PURE__ */React.createElement(Hidden, {
+    hide: isEmpty
+  }, /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    justify: "center",
+    align: "center",
+    direction: "column",
+    marginTop: 12
+  }, /* @__PURE__ */React.createElement(Pagination, {
+    page: currentPage,
+    count: totalPages,
+    color: "textPrimary",
+    shape: "round",
+    size: "large",
+    onChange: onChangePage
+  }), typeof onChangeResultsPerPage === "function" && /* @__PURE__ */React.createElement(Box, {
+    mt: 4
+  }, /* @__PURE__ */React.createElement(Select, {
+    name: "gridListSelect",
+    value: perPage,
+    options: resultsPerPage,
+    onChange: onChangeResultsPerPage
+  })))), footerComponent);
+}
+
+export { GridList as default };

package/dist/esm/components/Hidden.js

@@ -0,0 +1,14 @@
+"use strict";
+import 'react';
+
+function Hidden(_ref) {
+  var _ref$hide = _ref.hide,
+    hide = _ref$hide === void 0 ? false : _ref$hide,
+    children = _ref.children;
+  if (hide) {
+    return null;
+  }
+  return children;
+}
+
+export { Hidden as default };

package/dist/esm/components/IconLabel.js

@@ -0,0 +1,40 @@
+"use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { Box } from '@tenancy.nz/ui';
+
+var _excluded = ["children", "endIcon", "startIcon", "onClick"];
+function IconLabel(_ref) {
+  var children = _ref.children,
+    _ref$endIcon = _ref.endIcon,
+    endIcon = _ref$endIcon === void 0 ? void 0 : _ref$endIcon,
+    _ref$startIcon = _ref.startIcon,
+    startIcon = _ref$startIcon === void 0 ? void 0 : _ref$startIcon,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var iconLabel = /* @__PURE__ */React.createElement(Box, _objectSpread2({
+    align: "center",
+    display: "inline-flex"
+  }, rest), startIcon && /* @__PURE__ */React.createElement(Box, {
+    display: "inline-flex",
+    color: "inherit",
+    fontSize: "inherit"
+  }, startIcon), children && /* @__PURE__ */React.createElement(Box, {
+    display: "inline-flex",
+    color: "inherit",
+    fontSize: "inherit",
+    marginLeft: startIcon ? 1 : 0,
+    marginRight: endIcon ? 1 : 0,
+    fontWeight: "inherit"
+  }, children), endIcon && /* @__PURE__ */React.createElement(Box, {
+    display: "inline-flex",
+    color: "text.muted",
+    marginLeft: 1
+  }, endIcon));
+  return /* @__PURE__ */React.createElement(React.Fragment, null, typeof onClick === "function" ? /* @__PURE__ */React.createElement(Box, {
+    onClick: onClick
+  }, iconLabel) : iconLabel);
+}
+
+export { IconLabel as default };

package/dist/esm/components/NotesCard.js

@@ -0,0 +1,63 @@
+"use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { Paper, Box, Skeleton, Text, Tag } from '@tenancy.nz/ui';
+
+var _excluded = ["loading", "tag", "text"];
+var tagMap = function tagMap(name) {
+  if (typeof name !== "string") {
+    return name;
+  }
+  if (name === "feedback") {
+    return /* @__PURE__ */React.createElement(Tag, {
+      color: "info",
+      label: "Feedback"
+    });
+  }
+  if (name === "maintenance") {
+    return /* @__PURE__ */React.createElement(Tag, {
+      color: "orange",
+      label: "Maintenance"
+    });
+  }
+  return name;
+};
+function NotesCard(_ref) {
+  var _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$tag = _ref.tag,
+    tag = _ref$tag === void 0 ? void 0 : _ref$tag,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? void 0 : _ref$text,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */React.createElement(Paper, _objectSpread2({
+    inset: "medium",
+    sx: {
+      minHeight: "100%"
+    }
+  }, rest), /* @__PURE__ */React.createElement(Box, {
+    mb: "8px",
+    mt: loading ? "-5px" : "0px"
+  }, loading ? /* @__PURE__ */React.createElement(Skeleton, {
+    width: "114px",
+    height: "30px",
+    variant: "text"
+  }) : tagMap(tag)), loading && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Skeleton, {
+    width: "90%",
+    height: "20px",
+    variant: "text"
+  }), /* @__PURE__ */React.createElement(Skeleton, {
+    width: "80%",
+    height: "20px",
+    variant: "text"
+  }), /* @__PURE__ */React.createElement(Skeleton, {
+    width: "70%",
+    height: "20px",
+    variant: "text"
+  })), !loading && /* @__PURE__ */React.createElement(Text, {
+    variant: "body2",
+    weight: "400"
+  }, text));
+}
+
+export { NotesCard as default };

package/dist/esm/components/PropertyCard.js

@@ -0,0 +1,141 @@
+"use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { Paper, Media, Box, Heading, Text } from '@tenancy.nz/ui';
+import { Icon } from '@tenancy.nz/icons';
+import IconLabel from './IconLabel.js';
+import { StyledPropertyImage, StyledPropertyDetailsBox, StyledPropertyAmenitiesBox } from './PropertyCard.styled.js';
+
+var _excluded = ["address", "compact", "enquiriesCount", "imgSrc", "noOfBedrooms", "noOfBathrooms", "noOfCarparks", "rent", "viewingsCount"];
+function PropertyCard(_ref) {
+  var _ref$address = _ref.address,
+    address = _ref$address === void 0 ? void 0 : _ref$address,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact,
+    _ref$enquiriesCount = _ref.enquiriesCount,
+    enquiriesCount = _ref$enquiriesCount === void 0 ? void 0 : _ref$enquiriesCount,
+    imgSrc = _ref.imgSrc,
+    _ref$noOfBedrooms = _ref.noOfBedrooms,
+    noOfBedrooms = _ref$noOfBedrooms === void 0 ? void 0 : _ref$noOfBedrooms,
+    _ref$noOfBathrooms = _ref.noOfBathrooms,
+    noOfBathrooms = _ref$noOfBathrooms === void 0 ? void 0 : _ref$noOfBathrooms,
+    _ref$noOfCarparks = _ref.noOfCarparks,
+    noOfCarparks = _ref$noOfCarparks === void 0 ? void 0 : _ref$noOfCarparks,
+    _ref$rent = _ref.rent,
+    rent = _ref$rent === void 0 ? void 0 : _ref$rent,
+    _ref$viewingsCount = _ref.viewingsCount,
+    viewingsCount = _ref$viewingsCount === void 0 ? void 0 : _ref$viewingsCount,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */React.createElement(Paper, _objectSpread2({
+    overflow: false,
+    sx: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }, rest), /* @__PURE__ */React.createElement(StyledPropertyImage, null, /* @__PURE__ */React.createElement(Media, {
+    as: "img",
+    title: address,
+    src: imgSrc
+  })), /* @__PURE__ */React.createElement(StyledPropertyDetailsBox, null, /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(Heading, {
+    as: "h4",
+    weight: "700"
+  }, address)), /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      ml: {
+        sm: "auto"
+      },
+      mt: {
+        xs: "10px",
+        sm: 0
+      },
+      "@media print": {
+        ml: "auto"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(StyledPropertyAmenitiesBox, null, rent && /* @__PURE__ */React.createElement(Heading, {
+    as: "h4",
+    weight: "700"
+  }, rent), /* @__PURE__ */React.createElement(Box, {
+    fontSize: "16px"
+  }, noOfBedrooms && /* @__PURE__ */React.createElement(IconLabel, {
+    color: "text.primary",
+    startIcon: /* @__PURE__ */React.createElement(Icon, {
+      size: 21,
+      color: "inherit",
+      name: "bed"
+    })
+  }, /* @__PURE__ */React.createElement(Text, {
+    as: "span",
+    variant: "inherit"
+  }, noOfBedrooms)), noOfBathrooms && /* @__PURE__ */React.createElement(IconLabel, {
+    color: "text.primary",
+    startIcon: /* @__PURE__ */React.createElement(Icon, {
+      size: 21,
+      color: "inherit",
+      name: "bath"
+    }),
+    marginLeft: 3
+  }, /* @__PURE__ */React.createElement(Text, {
+    as: "span",
+    variant: "inherit"
+  }, noOfBathrooms)), noOfCarparks && /* @__PURE__ */React.createElement(IconLabel, {
+    color: "text.primary",
+    startIcon: /* @__PURE__ */React.createElement(Icon, {
+      size: 21,
+      color: "inherit",
+      name: "car"
+    }),
+    marginLeft: 3
+  }, /* @__PURE__ */React.createElement(Text, {
+    as: "span",
+    variant: "inherit"
+  }, noOfCarparks)))), !compact && /* @__PURE__ */React.createElement(Box, {
+    paddingLeft: "25px",
+    borderLeft: "1px solid #00000040",
+    display: "flex",
+    direction: "column",
+    sx: {
+      gap: {
+        xs: "18px",
+        lg: "10px",
+        xl: 0
+      },
+      justifyContent: "space-between"
+    }
+  }, viewingsCount && /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    align: "center",
+    gap: "12px"
+  }, /* @__PURE__ */React.createElement(Box, {
+    minWidth: "87px"
+  }, /* @__PURE__ */React.createElement(Text, {
+    transform: "uppercase",
+    color: "textPrimary",
+    as: "span",
+    weight: "600",
+    align: "right",
+    lineHeight: "15px"
+  }, "Viewings")), /* @__PURE__ */React.createElement(Heading, {
+    as: "h2"
+  }, viewingsCount)), enquiriesCount && /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    align: "center",
+    gap: "12px"
+  }, /* @__PURE__ */React.createElement(Box, {
+    minWidth: "87px"
+  }, /* @__PURE__ */React.createElement(Text, {
+    transform: "uppercase",
+    color: "textPrimary",
+    as: "span",
+    weight: "600",
+    minWidth: "87px",
+    align: "right",
+    lineHeight: "15px"
+  }, "Enquiries")), /* @__PURE__ */React.createElement(Heading, {
+    as: "h2"
+  }, enquiriesCount))))));
+}
+
+export { PropertyCard as default };

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

@@ -0,0 +1,20 @@
+"use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var StyledPropertyImage = styled.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  width: 120px;\n  height: 95px;\n  flex: 0 0 95px;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      display: none;\n    }\n\n    ", " {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n    }\n\n    @media print {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n      display: block;\n    }\n  "])), theme.breakpoints.down("sm"), theme.breakpoints.up("sm"));
+});
+var StyledPropertyDetailsBox = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  padding: 16px 24px 16px 20px;\n  flex-direction: column;\n\n  ", "\n\n  @media print {\n    flex-direction: row;\n    align-items: center;\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", " {\n      flex-direction: row;\n      align-items: center;\n    }\n  "])), theme.breakpoints.up("sm"));
+});
+var StyledPropertyAmenitiesBox = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-right: 25px;\n  display: flex;\n  flex-direction: column;\n  margin-top: 5px;\n\n  gap: 18px;\n  min-width: 170px;\n  height: 100%;\n  justify-content: space-between;\n\n  ", "\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return "\n    @media (min-width: ".concat(theme.breakpoints.values.md, "px) {\n      align-items: flex-end;\n    }\n  ");
+});
+
+export { StyledPropertyAmenitiesBox, StyledPropertyDetailsBox, StyledPropertyImage };

package/dist/esm/index.js

@@ -0,0 +1,16 @@
+"use strict";
+export { default as AgentDetailsCard } from './components/AgentDetailsCard.js';
+export { default as AnalyticsBox } from './components/AnalyticsBox.js';
+export { default as AnalyticsSection } from './components/AnalyticsSection.js';
+export { default as BookingChart } from './components/BookingChart.js';
+export { default as BookingTable } from './components/BookingTable.js';
+export { default as BookingTableRow } from './components/BookingTableRow.js';
+export { default as BookingTableRowHeader } from './components/BookingTableRowHeader.js';
+export { default as BookingTableRowSkeleton } from './components/BookingTableRowSkeleton.js';
+export { default as CheckedIcon } from './components/CheckedIcon.js';
+export { default as EnquiriesDoughnutChart } from './components/EnquiriesDoughnutChart.js';
+export { default as GridList } from './components/GridList.js';
+export { default as Hidden } from './components/Hidden.js';
+export { default as IconLabel } from './components/IconLabel.js';
+export { default as NotesCard } from './components/NotesCard.js';
+export { default as PropertyCard } from './components/PropertyCard.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tenancy.nz/feature-ui",
   "description": "React UI feature components.",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": "TPS <https://www.tenancy.co.nz>",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -18,14 +18,14 @@
     "primereact": "^3.1.3",
     "react": ">= 16.0.0  <= 18.3.1",
     "react-dom": ">= 16.0.0  <= 18.3.1",
-    "@tenancy.nz/icons": "1.0.0",
-    "@tenancy.nz/ui": "1.0.0"
+    "@tenancy.nz/icons": "1.0.2",
+    "@tenancy.nz/ui": "1.0.5"
   },
   "devDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@tenancy.nz/icons": "1.0.0",
-    "@tenancy.nz/ui": "1.0.0"
+    "@tenancy.nz/icons": "1.0.2",
+    "@tenancy.nz/ui": "1.0.5"
   },
   "dependencies": {
     "react-uid": "^2.4.0"