@tenancy.nz/feature-ui 1.0.1 → 1.0.7

package/dist/esm/components/AnalyticsBox.js

@@ -1,54 +1,54 @@
 "use strict";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
 import { Paper, Box, Heading, Text } from '@tenancy.nz/ui';
 
-function AnalyticsBox({
-  width,
-  minWidth,
-  maxWidth,
-  height,
-  border,
-  label,
-  amount,
-  text,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    Paper,
-    {
-      ...rest,
-      sx: {
-        maxWidth,
-        width,
-        minWidth,
-        border,
-        height: height || "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "16px"
+var _excluded = ["width", "minWidth", "maxWidth", "height", "border", "label", "amount", "text"];
+function AnalyticsBox(_ref) {
+  var width = _ref.width,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
+    height = _ref.height,
+    border = _ref.border,
+    label = _ref.label,
+    amount = _ref.amount,
+    text = _ref.text,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */React.createElement(Paper, _objectSpread2(_objectSpread2({}, rest), {}, {
+    sx: {
+      maxWidth: maxWidth,
+      width: width,
+      minWidth: minWidth,
+      border: border,
+      height: height || "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "16px"
+    }
+  }), /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(Heading, {
+    align: "center",
+    weight: "700",
+    as: "h3",
+    gutterBottom: true
+  }, amount), /* @__PURE__ */React.createElement(Text, {
+    align: "center",
+    weight: "400",
+    variant: "body2"
+  }, label), text && /* @__PURE__ */React.createElement(Text, {
+    align: "center",
+    weight: "400",
+    sx: {
+      fontSize: {
+        xs: 8,
+        sm: 10,
+        xl: 14
       },
-      children: /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Heading, { align: "center", weight: "700", as: "h3", gutterBottom: true, children: amount }),
-        /* @__PURE__ */ jsx(Text, { align: "center", weight: "400", variant: "body2", children: label }),
-        text && /* @__PURE__ */ jsx(
-          Text,
-          {
-            align: "center",
-            weight: "400",
-            sx: {
-              fontSize: { xs: 8, sm: 10, xl: 14 },
-              lineHeight: "15.6px",
-              maxWidth: "366px",
-              mt: "8px"
-            },
-            children: text
-          }
-        )
-      ] })
+      lineHeight: "15.6px",
+      maxWidth: "366px",
+      mt: "8px"
     }
-  );
+  }, text)));
 }
 
 export { AnalyticsBox as default };

package/dist/esm/components/AnalyticsSection.js

@@ -1,205 +1,157 @@
 "use strict";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import { useMediaQuery, Box, Paper, Text } from '@tenancy.nz/ui';
 import AnalyticsBox from './AnalyticsBox.js';
 import EnquiriesDoughnutChart from './EnquiriesDoughnutChart.js';
 
-function AnalyticsSection({
-  viewingsCount,
-  bookingsCount,
-  attendeesCount,
-  cancellationsCount,
-  applicationsCount,
-  averageRent,
-  textUsage,
-  tradeMeEnquiriesCount,
-  bookMeEnquiriesCount,
-  manualEnquiryCount,
-  agreementsCount,
-  agreementsFinalisedCount,
-  filterDaysCount
-}) {
-  const isXlUp = useMediaQuery((theme) => theme.breakpoints.up("xl"));
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      display: "flex",
-      align: "stretch",
-      direction: { xs: "column-reverse", mlg: "row" },
-      gap: "27px",
-      children: [
-        /* @__PURE__ */ jsx(Box, { width: "100%", maxWidth: { xs: "100%", mob: "340px", xl: "463px" }, children: /* @__PURE__ */ jsx(Paper, { style: { width: "100%", position: "relative", height: "100%" }, children: /* @__PURE__ */ jsx(Box, { mt: "20px", height: "100%", children: /* @__PURE__ */ jsx(
-          EnquiriesDoughnutChart,
-          {
-            tradeMeEnquiriesCount,
-            bookMeEnquiriesCount,
-            manualEnquiryCount
-          }
-        ) }) }) }),
-        /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsxs(Box, { display: "flex", direction: "row", width: "100%", gap: 6, children: [
-          /* @__PURE__ */ jsxs(Box, { flex: 3, children: [
-            /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 6, children: [
-              /* @__PURE__ */ jsx(
-                AnalyticsBox,
-                {
-                  label: "Viewings",
-                  amount: viewingsCount,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AnalyticsBox,
-                {
-                  label: "Bookings",
-                  amount: bookingsCount,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AnalyticsBox,
-                {
-                  label: "Attendees",
-                  amount: attendeesCount,
-                  width: "100%",
-                  border: "3px solid #6FD3C0",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(Box, { display: "flex", width: "100%", gap: 6, mt: 6, children: [
-              /* @__PURE__ */ jsx(
-                AnalyticsBox,
-                {
-                  label: "Converted Properties",
-                  amount: agreementsCount,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px",
-                  text: /* @__PURE__ */ jsxs(Box, { as: "span", maxWidth: "276px", children: [
-                    "Properties that have had a viewing in the last",
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "span",
-                        display: "inline",
-                        weight: "700",
-                        fontSize: "inherit",
-                        children: filterDaysCount
-                      }
-                    ),
-                    " ",
-                    "days where an agreement has been",
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "span",
-                        display: "inline",
-                        weight: "700",
-                        fontSize: "inherit",
-                        children: "created"
-                      }
-                    )
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AnalyticsBox,
-                {
-                  label: "Converted Properties",
-                  amount: agreementsFinalisedCount,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px",
-                  text: /* @__PURE__ */ jsxs(Box, { as: "span", maxWidth: "276px", children: [
-                    "Properties that have had a viewing in the last",
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "span",
-                        display: "inline",
-                        weight: "700",
-                        fontSize: "inherit",
-                        children: filterDaysCount
-                      }
-                    ),
-                    " ",
-                    "days where an agreement has been",
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "span",
-                        display: "inline",
-                        weight: "700",
-                        fontSize: "inherit",
-                        children: "finalised"
-                      }
-                    )
-                  ] })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(Box, { flex: 2, children: [
-            /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 6, children: [
-              /* @__PURE__ */ jsx(
-                AnalyticsBox,
-                {
-                  label: "Cancellations",
-                  amount: cancellationsCount,
-                  width: "100%",
-                  border: "3px solid #ED0D8D",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AnalyticsBox,
-                {
-                  label: "Applications",
-                  amount: applicationsCount,
-                  width: "100%",
-                  border: "3px solid #F5C440",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 6, mt: 6, children: [
-              /* @__PURE__ */ jsx(
-                AnalyticsBox,
-                {
-                  label: /* @__PURE__ */ jsxs("span", { children: [
-                    "Average",
-                    /* @__PURE__ */ jsx("br", {}),
-                    " Rent"
-                  ] }),
-                  amount: averageRent,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AnalyticsBox,
-                {
-                  label: /* @__PURE__ */ jsxs("span", { children: [
-                    "Text Usage",
-                    /* @__PURE__ */ jsx("br", {}),
-                    " Total"
-                  ] }),
-                  amount: textUsage,
-                  width: "100%",
-                  height: isXlUp ? "157px" : "125px"
-                }
-              )
-            ] })
-          ] })
-        ] }) })
-      ]
+function AnalyticsSection(_ref) {
+  var viewingsCount = _ref.viewingsCount,
+    bookingsCount = _ref.bookingsCount,
+    attendeesCount = _ref.attendeesCount,
+    cancellationsCount = _ref.cancellationsCount,
+    applicationsCount = _ref.applicationsCount,
+    averageRent = _ref.averageRent,
+    textUsage = _ref.textUsage,
+    tradeMeEnquiriesCount = _ref.tradeMeEnquiriesCount,
+    bookMeEnquiriesCount = _ref.bookMeEnquiriesCount,
+    manualEnquiryCount = _ref.manualEnquiryCount,
+    agreementsCount = _ref.agreementsCount,
+    agreementsFinalisedCount = _ref.agreementsFinalisedCount,
+    filterDaysCount = _ref.filterDaysCount;
+  var isXlUp = useMediaQuery(function (theme) {
+    return theme.breakpoints.up("xl");
+  });
+  return /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    align: "stretch",
+    direction: {
+      xs: "column-reverse",
+      mlg: "row"
+    },
+    gap: "27px"
+  }, /* @__PURE__ */React.createElement(Box, {
+    width: "100%",
+    maxWidth: {
+      xs: "100%",
+      mob: "340px",
+      xl: "463px"
     }
-  );
+  }, /* @__PURE__ */React.createElement(Paper, {
+    style: {
+      width: "100%",
+      position: "relative",
+      height: "100%"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    mt: "20px",
+    height: "100%"
+  }, /* @__PURE__ */React.createElement(EnquiriesDoughnutChart, {
+    tradeMeEnquiriesCount: tradeMeEnquiriesCount,
+    bookMeEnquiriesCount: bookMeEnquiriesCount,
+    manualEnquiryCount: manualEnquiryCount
+  })))), /* @__PURE__ */React.createElement(Box, {
+    width: "100%"
+  }, /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    direction: "row",
+    width: "100%",
+    gap: 6
+  }, /* @__PURE__ */React.createElement(Box, {
+    flex: 3
+  }, /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    gap: 6
+  }, /* @__PURE__ */React.createElement(AnalyticsBox, {
+    label: "Viewings",
+    amount: viewingsCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
+    label: "Bookings",
+    amount: bookingsCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
+    label: "Attendees",
+    amount: attendeesCount,
+    width: "100%",
+    border: "3px solid #6FD3C0",
+    height: isXlUp ? "157px" : "125px"
+  })), /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    width: "100%",
+    gap: 6,
+    mt: 6
+  }, /* @__PURE__ */React.createElement(AnalyticsBox, {
+    label: "Converted Properties",
+    amount: agreementsCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px",
+    text: /* @__PURE__ */React.createElement(Box, {
+      as: "span",
+      maxWidth: "276px"
+    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(Text, {
+      as: "span",
+      display: "inline",
+      weight: "700",
+      fontSize: "inherit"
+    }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(Text, {
+      as: "span",
+      display: "inline",
+      weight: "700",
+      fontSize: "inherit"
+    }, "created"))
+  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
+    label: "Converted Properties",
+    amount: agreementsFinalisedCount,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px",
+    text: /* @__PURE__ */React.createElement(Box, {
+      as: "span",
+      maxWidth: "276px"
+    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(Text, {
+      as: "span",
+      display: "inline",
+      weight: "700",
+      fontSize: "inherit"
+    }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(Text, {
+      as: "span",
+      display: "inline",
+      weight: "700",
+      fontSize: "inherit"
+    }, "finalised"))
+  }))), /* @__PURE__ */React.createElement(Box, {
+    flex: 2
+  }, /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    gap: 6
+  }, /* @__PURE__ */React.createElement(AnalyticsBox, {
+    label: "Cancellations",
+    amount: cancellationsCount,
+    width: "100%",
+    border: "3px solid #ED0D8D",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
+    label: "Applications",
+    amount: applicationsCount,
+    width: "100%",
+    border: "3px solid #F5C440",
+    height: isXlUp ? "157px" : "125px"
+  })), /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    gap: 6,
+    mt: 6
+  }, /* @__PURE__ */React.createElement(AnalyticsBox, {
+    label: /* @__PURE__ */React.createElement("span", null, "Average", /* @__PURE__ */React.createElement("br", null), " Rent"),
+    amount: averageRent,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
+    label: /* @__PURE__ */React.createElement("span", null, "Text Usage", /* @__PURE__ */React.createElement("br", null), " Total"),
+    amount: textUsage,
+    width: "100%",
+    height: isXlUp ? "157px" : "125px"
+  }))))));
 }
 
 export { AnalyticsSection as default };

package/dist/esm/components/BookingChart.js

@@ -1,11 +1,11 @@
 "use strict";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useMemo } from 'react';
 import { Box } from '@tenancy.nz/ui';
 import { Chart } from 'primereact/chart';
 import { StyledBookingChartStack, StyledBookingChartLegend, StyledBookingChartButton } from './BookingChart.styled.js';
 
-const defaultOptions = {
+var defaultOptions = {
   scaleFontColor: "black",
   legend: {
     display: false
@@ -18,103 +18,105 @@ const defaultOptions = {
         size: 12,
         family: "Montserrat, sans-serif"
       },
-      display: (ctx) => ctx.dataset.data[ctx.dataIndex] > 0
+      display: function display(ctx) {
+        return ctx.dataset.data[ctx.dataIndex] > 0;
+      }
     }
   },
   scales: {
-    xAxes: [
-      {
-        gridLines: {
-          labelString: "Date",
-          display: false
-        },
-        ticks: {
-          fontSize: 13,
-          family: "Montserrat, sans-serif",
-          fontWeight: "bold"
-        },
-        stacked: true
-      }
-    ],
-    yAxes: [
-      {
-        scaleLabel: {
-          display: true,
-          labelString: "Total bookings",
-          fontFamily: "Montserrat, sans-serif",
-          fontSize: 13,
-          fontStyle: "600"
-        },
-        ticks: {
-          min: 0,
-          stepSize: 5,
-          fontSize: 13,
-          fontWeight: 500
-        },
-        gridLines: {
-          display: false
-        },
-        stacked: true
-      }
-    ]
+    xAxes: [{
+      gridLines: {
+        labelString: "Date",
+        display: false
+      },
+      ticks: {
+        fontSize: 13,
+        family: "Montserrat, sans-serif",
+        fontWeight: "bold"
+      },
+      stacked: true
+    }],
+    yAxes: [{
+      scaleLabel: {
+        display: true,
+        labelString: "Total bookings",
+        fontFamily: "Montserrat, sans-serif",
+        fontSize: 13,
+        fontStyle: "600"
+      },
+      ticks: {
+        min: 0,
+        stepSize: 5,
+        fontSize: 13,
+        fontWeight: 500
+      },
+      gridLines: {
+        display: false
+      },
+      stacked: true
+    }]
   }
 };
-function BookingChart({
-  data,
-  labels,
-  mode = "day",
-  options = {},
-  onModeChange = void 0
-}) {
-  const legends = useMemo(
-    () => data.map(({ label, backgroundColor }) => [label, backgroundColor]).filter(
-      ([label], i, items) => items.findIndex(([l]) => l === label) === i
-    ),
-    [data]
-  );
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", direction: "column", gap: "16px", width: "100%", children: [
-    legends.length > 0 && /* @__PURE__ */ jsx(StyledBookingChartStack, { children: legends.map(([label, backgroundColor]) => /* @__PURE__ */ jsx(StyledBookingChartLegend, { color: backgroundColor, children: label }, label)) }),
-    /* @__PURE__ */ jsx(Box, { width: "100%", overflow: "hidden", children: /* @__PURE__ */ jsx(
-      Chart,
-      {
-        type: "bar",
-        data: {
-          labels,
-          datasets: data
-        },
-        options: { ...defaultOptions, ...options }
-      }
-    ) }),
-    onModeChange && /* @__PURE__ */ jsxs(StyledBookingChartStack, { children: [
-      /* @__PURE__ */ jsx(
-        StyledBookingChartButton,
-        {
-          onClick: onModeChange,
-          active: mode === "day",
-          value: "day",
-          children: "Day"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StyledBookingChartButton,
-        {
-          onClick: onModeChange,
-          active: mode === "week",
-          value: "week",
-          children: "Week"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StyledBookingChartButton,
-        {
-          onClick: onModeChange,
-          active: mode === "month",
-          value: "month",
-          children: "Month"
-        }
-      )
-    ] })
-  ] });
+function BookingChart(_ref) {
+  var data = _ref.data,
+    labels = _ref.labels,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "day" : _ref$mode,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options,
+    _ref$onModeChange = _ref.onModeChange,
+    onModeChange = _ref$onModeChange === void 0 ? void 0 : _ref$onModeChange;
+  var legends = useMemo(function () {
+    return data.map(function (_ref2) {
+      var label = _ref2.label,
+        backgroundColor = _ref2.backgroundColor;
+      return [label, backgroundColor];
+    }).filter(function (_ref3, i, items) {
+      var _ref4 = _slicedToArray(_ref3, 1),
+        label = _ref4[0];
+      return items.findIndex(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 1),
+          l = _ref6[0];
+        return l === label;
+      }) === i;
+    });
+  }, [data]);
+  return /* @__PURE__ */React.createElement(Box, {
+    display: "flex",
+    direction: "column",
+    gap: "16px",
+    width: "100%"
+  }, legends.length > 0 && /* @__PURE__ */React.createElement(StyledBookingChartStack, null, legends.map(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      label = _ref8[0],
+      backgroundColor = _ref8[1];
+    return /* @__PURE__ */React.createElement(StyledBookingChartLegend, {
+      key: label,
+      color: backgroundColor
+    }, label);
+  })), /* @__PURE__ */React.createElement(Box, {
+    width: "100%",
+    overflow: "hidden"
+  }, /* @__PURE__ */React.createElement(Chart, {
+    type: "bar",
+    data: {
+      labels: labels,
+      datasets: data
+    },
+    options: _objectSpread2(_objectSpread2({}, defaultOptions), options)
+  })), onModeChange && /* @__PURE__ */React.createElement(StyledBookingChartStack, null, /* @__PURE__ */React.createElement(StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "day",
+    value: "day"
+  }, "Day"), /* @__PURE__ */React.createElement(StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "week",
+    value: "week"
+  }, "Week"), /* @__PURE__ */React.createElement(StyledBookingChartButton, {
+    onClick: onModeChange,
+    active: mode === "month",
+    value: "month"
+  }, "Month")));
 }
 
 export { BookingChart as default };