@bigbinary/neeto-molecules 1.0.5 → 1.0.7

package/README.md

@@ -10,7 +10,9 @@ A package of reusable molecular components for neeto products.
 - [BrowserSupport](./docs/components.md#browsersupport)
 - [Columns](./docs/components.md#columns)
 - [CustomDomain](./docs/components.md#customdomain)
+- [DateFormat/TimeFormat](./docs/components.md#dateformattimeformat)
 - [DateRangeFilter](./docs/components.md#daterangefilter)
+- [DynamicVariables](./docs/components.md#dynamicvariables)
 - [EmailPreview](./docs/components.md#emailpreview)
 - [ErrorPage](./docs/components.md#errorpage)
 - [IpRestriction](./docs/components.md#iprestriction)

package/dist/DateFormat.cjs.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var pure = require('@bigbinary/neeto-commons-frontend/pure');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+var DateFormat = ramda.fromPairs(ramda.keys(utils.timeFormat).map(function (key) {
+  return [pure.capitalize(key), function (_ref) {
+    var date = _ref.date,
+      _ref$tooltipProps = _ref.tooltipProps,
+      tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
+      _ref$typographyProps = _ref.typographyProps,
+      typographyProps = _ref$typographyProps === void 0 ? {} : _ref$typographyProps;
+    var dateDisplay = /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, _extends({
+      component: "span",
+      style: "body2"
+    }, typographyProps), utils.timeFormat[key](date));
+    return key === "extended" ? dateDisplay : /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, _extends({
+      content: utils.timeFormat.extended(date),
+      position: "top"
+    }, tooltipProps), dateDisplay);
+  }];
+}));
+
+module.exports = DateFormat;

package/dist/DateFormat.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { capitalize } from '@bigbinary/neeto-commons-frontend/pure';
+import { timeFormat } from '@bigbinary/neeto-commons-frontend/utils';
+import { Typography, Tooltip } from '@bigbinary/neetoui';
+import { fromPairs, keys } from 'ramda';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+var DateFormat = fromPairs(keys(timeFormat).map(function (key) {
+  return [capitalize(key), function (_ref) {
+    var date = _ref.date,
+      _ref$tooltipProps = _ref.tooltipProps,
+      tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
+      _ref$typographyProps = _ref.typographyProps,
+      typographyProps = _ref$typographyProps === void 0 ? {} : _ref$typographyProps;
+    var dateDisplay = /*#__PURE__*/React.createElement(Typography, _extends({
+      component: "span",
+      style: "body2"
+    }, typographyProps), timeFormat[key](date));
+    return key === "extended" ? dateDisplay : /*#__PURE__*/React.createElement(Tooltip, _extends({
+      content: timeFormat.extended(date),
+      position: "top"
+    }, tooltipProps), dateDisplay);
+  }];
+}));
+
+export { DateFormat as default };

package/dist/DateRangeFilter.cjs.js

@@ -211,9 +211,9 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     autoFocus: true,
     className: "ml-3 w-full",
     dateFormat: initializers.globalProps === null || initializers.globalProps === void 0 ? void 0 : (_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.dateFormat,
-    defaultValue: [dayjs__default["default"](startDate), dayjs__default["default"](endDate)],
     picker: "date",
     type: "range",
+    defaultValue: [startDate ? dayjs__default["default"](startDate) : null, endDate ? dayjs__default["default"](endDate) : null],
     onChange: function onChange(_, _ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
         startDate = _ref3[0],

package/dist/DateRangeFilter.js

@@ -204,9 +204,9 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     autoFocus: true,
     className: "ml-3 w-full",
     dateFormat: globalProps === null || globalProps === void 0 ? void 0 : (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.dateFormat,
-    defaultValue: [dayjs(startDate), dayjs(endDate)],
     picker: "date",
     type: "range",
+    defaultValue: [startDate ? dayjs(startDate) : null, endDate ? dayjs(endDate) : null],
     onChange: function onChange(_, _ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
         startDate = _ref3[0],

package/dist/DynamicVariables.cjs.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var pure = require('@bigbinary/neeto-commons-frontend/pure');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".neeto-molecules-dynamic-variables{max-width:360px;min-width:184px}.neeto-molecules-dynamic-variables button{border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-md);color:rgb(var(--neeto-ui-black));padding:6px;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-molecules-dynamic-variables button:focus,.neeto-molecules-dynamic-variables button:focus-visible,.neeto-molecules-dynamic-variables button:hover{border-color:rgb(var(--neeto-ui-primary-800));box-shadow:none;color:rgb(var(--neeto-ui-primary-800));outline:none}";
+n(css,{});
+
+var parseVariables = function parseVariables() {
+  var variableArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var uncategorized = [];
+  var groupedVariables = [];
+  var categorySet = new Set();
+  variableArr.forEach(function (variable) {
+    var category = variable.category,
+      label = variable.label,
+      variables = variable.variables;
+    if (category && variables) {
+      var parsedVariables = variables.map(ramda.assoc("category", category));
+      if (!categorySet.has(category)) {
+        categorySet.add(category);
+        groupedVariables.push({
+          label: label,
+          variables: parsedVariables
+        });
+      } else {
+        var existingGroup = pure.findBy({
+          label: label
+        }, groupedVariables);
+        existingGroup.variables = ramda.uniqBy(ramda.prop("key"), existingGroup.variables.concat(parsedVariables));
+      }
+    } else {
+      uncategorized.push(variable);
+    }
+  });
+  if (!ramda.isEmpty(uncategorized)) {
+    groupedVariables.push({
+      label: !ramda.isEmpty(groupedVariables) ? "Others" : null,
+      variables: uncategorized
+    });
+  }
+  return groupedVariables;
+};
+
+var Menu = neetoui.Dropdown.Menu;
+var DynamicVariables = function DynamicVariables(_ref) {
+  var _ref$onVariableClick = _ref.onVariableClick,
+    onVariableClick = _ref$onVariableClick === void 0 ? pure.noop : _ref$onVariableClick,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps;
+  if (ramda.isEmpty(variables)) {
+    return null;
+  }
+  var parsedVariables = parseVariables(variables);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, _extends({
+    buttonProps: {
+      "data-testid": "variables-dropdown"
+    },
+    buttonStyle: "secondary",
+    icon: neetoIcons.Braces,
+    strategy: "fixed"
+  }, dropdownProps), /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-3 p-2 neeto-molecules-dynamic-variables",
+    "data-testid": "variables-list"
+  }, parsedVariables.map(function (_ref2) {
+    var label = _ref2.label,
+      variables = _ref2.variables;
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+      key: label
+    }, label && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "",
+      style: "h6"
+    }, label), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex flex-wrap items-center gap-2"
+    }, variables.map(function (item) {
+      return /*#__PURE__*/React__default["default"].createElement("button", {
+        key: item.label,
+        onClick: function onClick() {
+          return onVariableClick(item);
+        }
+      }, item.label);
+    })));
+  }))));
+};
+
+module.exports = DynamicVariables;

package/dist/DynamicVariables.js

@@ -0,0 +1,106 @@
+import React, { Fragment } from 'react';
+import { findBy, noop } from '@bigbinary/neeto-commons-frontend/pure';
+import { Braces } from '@bigbinary/neeto-icons';
+import { Dropdown, Typography } from '@bigbinary/neetoui';
+import { assoc, uniqBy, prop, isEmpty } from 'ramda';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".neeto-molecules-dynamic-variables{max-width:360px;min-width:184px}.neeto-molecules-dynamic-variables button{border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-md);color:rgb(var(--neeto-ui-black));padding:6px;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-molecules-dynamic-variables button:focus,.neeto-molecules-dynamic-variables button:focus-visible,.neeto-molecules-dynamic-variables button:hover{border-color:rgb(var(--neeto-ui-primary-800));box-shadow:none;color:rgb(var(--neeto-ui-primary-800));outline:none}";
+n(css,{});
+
+var parseVariables = function parseVariables() {
+  var variableArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var uncategorized = [];
+  var groupedVariables = [];
+  var categorySet = new Set();
+  variableArr.forEach(function (variable) {
+    var category = variable.category,
+      label = variable.label,
+      variables = variable.variables;
+    if (category && variables) {
+      var parsedVariables = variables.map(assoc("category", category));
+      if (!categorySet.has(category)) {
+        categorySet.add(category);
+        groupedVariables.push({
+          label: label,
+          variables: parsedVariables
+        });
+      } else {
+        var existingGroup = findBy({
+          label: label
+        }, groupedVariables);
+        existingGroup.variables = uniqBy(prop("key"), existingGroup.variables.concat(parsedVariables));
+      }
+    } else {
+      uncategorized.push(variable);
+    }
+  });
+  if (!isEmpty(uncategorized)) {
+    groupedVariables.push({
+      label: !isEmpty(groupedVariables) ? "Others" : null,
+      variables: uncategorized
+    });
+  }
+  return groupedVariables;
+};
+
+var Menu = Dropdown.Menu;
+var DynamicVariables = function DynamicVariables(_ref) {
+  var _ref$onVariableClick = _ref.onVariableClick,
+    onVariableClick = _ref$onVariableClick === void 0 ? noop : _ref$onVariableClick,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps;
+  if (isEmpty(variables)) {
+    return null;
+  }
+  var parsedVariables = parseVariables(variables);
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    buttonProps: {
+      "data-testid": "variables-dropdown"
+    },
+    buttonStyle: "secondary",
+    icon: Braces,
+    strategy: "fixed"
+  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+    className: "space-y-3 p-2 neeto-molecules-dynamic-variables",
+    "data-testid": "variables-list"
+  }, parsedVariables.map(function (_ref2) {
+    var label = _ref2.label,
+      variables = _ref2.variables;
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: label
+    }, label && /*#__PURE__*/React.createElement(Typography, {
+      className: "",
+      style: "h6"
+    }, label), /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-wrap items-center gap-2"
+    }, variables.map(function (item) {
+      return /*#__PURE__*/React.createElement("button", {
+        key: item.label,
+        onClick: function onClick() {
+          return onVariableClick(item);
+        }
+      }, item.label);
+    })));
+  }))));
+};
+
+export { DynamicVariables as default };