@bigbinary/neeto-molecules 0.0.1

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{display:flex;flex-direction:column;gap:6px;max-width:360px;min-width:184px;padding:8px}.neeto-molecules-dynamic-variables__list{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.neeto-molecules-dynamic-variables__list 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;text-align:left;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-molecules-dynamic-variables__list button:focus,.neeto-molecules-dynamic-variables__list button:focus-visible,.neeto-molecules-dynamic-variables__list 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: "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, {
+      style: "h6"
+    }, label), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "neeto-molecules-dynamic-variables__list"
+    }, 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;
+//# sourceMappingURL=DynamicVariables.cjs.js.map

package/dist/DynamicVariables.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicVariables.cjs.js","sources":["../node_modules/@babel/runtime/helpers/esm/extends.js","../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js","../src/components/DynamicVariables/utils.js","../src/components/DynamicVariables/index.jsx"],"sourcesContent":["export default function _extends() {\n  _extends = Object.assign ? Object.assign.bind() : function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n    return target;\n  };\n  return _extends.apply(this, arguments);\n}","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}}export{n as default};\n","import { findBy } from \"neetocommons/pure\";\nimport { prop, assoc, isEmpty, uniqBy } from \"ramda\";\n\nexport const parseVariables = (variableArr = []) => {\n  const uncategorized = [];\n  const groupedVariables = [];\n  const categorySet = new Set();\n\n  variableArr.forEach(variable => {\n    const { category, label, variables } = variable;\n    if (category && variables) {\n      const parsedVariables = variables.map(assoc(\"category\", category));\n\n      if (!categorySet.has(category)) {\n        categorySet.add(category);\n        groupedVariables.push({ label, variables: parsedVariables });\n      } else {\n        const existingGroup = findBy({ label }, groupedVariables);\n\n        existingGroup.variables = uniqBy(\n          prop(\"key\"),\n          existingGroup.variables.concat(parsedVariables)\n        );\n      }\n    } else {\n      uncategorized.push(variable);\n    }\n  });\n\n  if (!isEmpty(uncategorized)) {\n    groupedVariables.push({\n      label: !isEmpty(groupedVariables) ? \"Others\" : null,\n      variables: uncategorized,\n    });\n  }\n\n  return groupedVariables;\n};\n","import React, { Fragment } from \"react\";\n\nimport { noop } from \"neetocommons/pure\";\nimport { Braces } from \"neetoicons\";\nimport { Dropdown, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { isEmpty } from \"ramda\";\n\nimport \"./dynamic-variables.scss\";\nimport { parseVariables } from \"./utils\";\n\nconst { Menu } = Dropdown;\n\nconst DynamicVariables = ({\n  onVariableClick = noop,\n  variables = [],\n  dropdownProps = {},\n}) => {\n  if (isEmpty(variables)) {\n    return null;\n  }\n\n  const parsedVariables = parseVariables(variables);\n\n  return (\n    <Dropdown\n      buttonProps={{ \"data-testid\": \"variables-dropdown\" }}\n      buttonStyle=\"secondary\"\n      icon={Braces}\n      strategy=\"fixed\"\n      {...dropdownProps}\n    >\n      <Menu>\n        <div\n          className=\"neeto-molecules-dynamic-variables\"\n          data-testid=\"variables-list\"\n        >\n          {parsedVariables.map(({ label, variables }) => (\n            <Fragment key={label}>\n              {label && <Typography style=\"h6\">{label}</Typography>}\n              <div className=\"neeto-molecules-dynamic-variables__list\">\n                {variables.map(item => (\n                  <button\n                    key={item.label}\n                    onClick={() => onVariableClick(item)}\n                  >\n                    {item.label}\n                  </button>\n                ))}\n              </div>\n            </Fragment>\n          ))}\n        </div>\n      </Menu>\n    </Dropdown>\n  );\n};\n\nDynamicVariables.propTypes = {\n  /**\n   * A function that is triggered when a dynamic variable button is clicked. It receives an object containing information about the clicked variable.\n   */\n  onVariableClick: PropTypes.func,\n  /**\n   * An array of objects, each representing a category or standalone variable, with the ability to define a label, key, and default value for each variable.\n   */\n  variables: PropTypes.arrayOf(\n    PropTypes.shape({ label: PropTypes.string, key: PropTypes.string })\n  ),\n  /**\n   * Additional props for the dropdown (optional).\n   */\n  dropdownProps: PropTypes.object,\n};\n\nexport default DynamicVariables;\n"],"names":["parseVariables","variableArr","arguments","length","undefined","uncategorized","groupedVariables","categorySet","Set","forEach","variable","category","label","variables","parsedVariables","map","assoc","has","add","push","existingGroup","findBy","uniqBy","prop","concat","isEmpty","Menu","Dropdown","DynamicVariables","_ref","_ref$onVariableClick","onVariableClick","noop","_ref$variables","_ref$dropdownProps","dropdownProps","React","createElement","_extends","buttonProps","buttonStyle","icon","Braces","strategy","className","_ref2","Fragment","key","Typography","style","item","onClick"],"mappings":"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"}

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{display:flex;flex-direction:column;gap:6px;max-width:360px;min-width:184px;padding:8px}.neeto-molecules-dynamic-variables__list{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.neeto-molecules-dynamic-variables__list 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;text-align:left;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-molecules-dynamic-variables__list button:focus,.neeto-molecules-dynamic-variables__list button:focus-visible,.neeto-molecules-dynamic-variables__list 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: "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, {
+      style: "h6"
+    }, label), /*#__PURE__*/React.createElement("div", {
+      className: "neeto-molecules-dynamic-variables__list"
+    }, variables.map(function (item) {
+      return /*#__PURE__*/React.createElement("button", {
+        key: item.label,
+        onClick: function onClick() {
+          return onVariableClick(item);
+        }
+      }, item.label);
+    })));
+  }))));
+};
+
+export { DynamicVariables as default };
+//# sourceMappingURL=DynamicVariables.js.map

package/dist/DynamicVariables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicVariables.js","sources":["../node_modules/@babel/runtime/helpers/esm/extends.js","../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js","../src/components/DynamicVariables/utils.js","../src/components/DynamicVariables/index.jsx"],"sourcesContent":["export default function _extends() {\n  _extends = Object.assign ? Object.assign.bind() : function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n    return target;\n  };\n  return _extends.apply(this, arguments);\n}","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}}export{n as default};\n","import { findBy } from \"neetocommons/pure\";\nimport { prop, assoc, isEmpty, uniqBy } from \"ramda\";\n\nexport const parseVariables = (variableArr = []) => {\n  const uncategorized = [];\n  const groupedVariables = [];\n  const categorySet = new Set();\n\n  variableArr.forEach(variable => {\n    const { category, label, variables } = variable;\n    if (category && variables) {\n      const parsedVariables = variables.map(assoc(\"category\", category));\n\n      if (!categorySet.has(category)) {\n        categorySet.add(category);\n        groupedVariables.push({ label, variables: parsedVariables });\n      } else {\n        const existingGroup = findBy({ label }, groupedVariables);\n\n        existingGroup.variables = uniqBy(\n          prop(\"key\"),\n          existingGroup.variables.concat(parsedVariables)\n        );\n      }\n    } else {\n      uncategorized.push(variable);\n    }\n  });\n\n  if (!isEmpty(uncategorized)) {\n    groupedVariables.push({\n      label: !isEmpty(groupedVariables) ? \"Others\" : null,\n      variables: uncategorized,\n    });\n  }\n\n  return groupedVariables;\n};\n","import React, { Fragment } from \"react\";\n\nimport { noop } from \"neetocommons/pure\";\nimport { Braces } from \"neetoicons\";\nimport { Dropdown, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { isEmpty } from \"ramda\";\n\nimport \"./dynamic-variables.scss\";\nimport { parseVariables } from \"./utils\";\n\nconst { Menu } = Dropdown;\n\nconst DynamicVariables = ({\n  onVariableClick = noop,\n  variables = [],\n  dropdownProps = {},\n}) => {\n  if (isEmpty(variables)) {\n    return null;\n  }\n\n  const parsedVariables = parseVariables(variables);\n\n  return (\n    <Dropdown\n      buttonProps={{ \"data-testid\": \"variables-dropdown\" }}\n      buttonStyle=\"secondary\"\n      icon={Braces}\n      strategy=\"fixed\"\n      {...dropdownProps}\n    >\n      <Menu>\n        <div\n          className=\"neeto-molecules-dynamic-variables\"\n          data-testid=\"variables-list\"\n        >\n          {parsedVariables.map(({ label, variables }) => (\n            <Fragment key={label}>\n              {label && <Typography style=\"h6\">{label}</Typography>}\n              <div className=\"neeto-molecules-dynamic-variables__list\">\n                {variables.map(item => (\n                  <button\n                    key={item.label}\n                    onClick={() => onVariableClick(item)}\n                  >\n                    {item.label}\n                  </button>\n                ))}\n              </div>\n            </Fragment>\n          ))}\n        </div>\n      </Menu>\n    </Dropdown>\n  );\n};\n\nDynamicVariables.propTypes = {\n  /**\n   * A function that is triggered when a dynamic variable button is clicked. It receives an object containing information about the clicked variable.\n   */\n  onVariableClick: PropTypes.func,\n  /**\n   * An array of objects, each representing a category or standalone variable, with the ability to define a label, key, and default value for each variable.\n   */\n  variables: PropTypes.arrayOf(\n    PropTypes.shape({ label: PropTypes.string, key: PropTypes.string })\n  ),\n  /**\n   * Additional props for the dropdown (optional).\n   */\n  dropdownProps: PropTypes.object,\n};\n\nexport default DynamicVariables;\n"],"names":["parseVariables","variableArr","arguments","length","undefined","uncategorized","groupedVariables","categorySet","Set","forEach","variable","category","label","variables","parsedVariables","map","assoc","has","add","push","existingGroup","findBy","uniqBy","prop","concat","isEmpty","Menu","Dropdown","DynamicVariables","_ref","_ref$onVariableClick","onVariableClick","noop","_ref$variables","_ref$dropdownProps","dropdownProps","React","createElement","_extends","buttonProps","buttonStyle","icon","Braces","strategy","className","_ref2","Fragment","key","Typography","style","item","onClick"],"mappings":"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"}

package/dist/EmailPreview.cjs.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var React = require('react');
+var pure = require('@bigbinary/neeto-commons-frontend/pure');
+var neetoEditor = require('@bigbinary/neeto-editor');
+var neetoui = require('@bigbinary/neetoui');
+var reactI18next = require('react-i18next');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var MemoizedEditorContent = /*#__PURE__*/React__default["default"].memo(neetoEditor.EditorContent);
+var EmailPreview = function EmailPreview(_ref) {
+  var to = _ref.to,
+    from = _ref.from,
+    subject = _ref.subject,
+    body = _ref.body,
+    productName = _ref.productName,
+    actionButtonText = _ref.actionButtonText,
+    logo = _ref.logo;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border",
+    "data-cy": "email-preview-card"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex gap-2",
+    "data-cy": "email-send-to-preview",
+    "data-testid": "email-to-block"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-500",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.emailPreview.to"), ":"), pure.isNotEmpty(to) ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    lineHeight: "normal",
+    style: "body2"
+  }, to.join(", ")) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40"
+  })), from && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-2 pt-3"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-500",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.emailPreview.from"), ":"), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    "data-cy": "email-send-from-preview",
+    lineHeight: "normal",
+    style: "body2"
+  }, from)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-2 pt-3"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-500",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.emailPreview.subject"), ":"), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    "data-cy": "email-subject-preview",
+    lineHeight: "normal",
+    style: "body2"
+  }, subject || /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
+  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed",
+    "data-cy": "email-body-preview-container"
+  }, body ? /*#__PURE__*/React__default["default"].createElement(MemoizedEditorContent, {
+    content: body
+  }) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-72"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80"
+  })), actionButtonText && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mt-6 flex w-full items-center justify-center"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "pointer-events-none",
+    label: actionButtonText
+  })), logo && /*#__PURE__*/React__default["default"].createElement("img", {
+    alt: t("neetoMolecules.emailPreview.logoAltText"),
+    className: "h-20 w-36 object-cover",
+    "data-cy": "company-logo-preview",
+    src: logo
+  })), productName && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-gray-100 mt-auto p-2",
+    "data-testid": "product-name-block"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-600 text-center leading-6",
+    style: "body3"
+  }, t("neetoMolecules.emailPreview.poweredBy"), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "neeto-ui-text-gray-800 font-medium"
+  }, productName))));
+};
+
+module.exports = EmailPreview;
+//# sourceMappingURL=EmailPreview.cjs.js.map

package/dist/EmailPreview.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailPreview.cjs.js","sources":["../src/components/EmailPreview.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { isNotEmpty } from \"neetocommons/pure\";\nimport { EditorContent } from \"neetoeditor\";\nimport { Typography, Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nconst MemoizedEditorContent = React.memo(EditorContent);\n\nconst EmailPreview = ({\n  to,\n  from,\n  subject,\n  body,\n  productName,\n  actionButtonText,\n  logo,\n}) => {\n  const { t } = useTranslation();\n\n  return (\n    <div\n      className=\"neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border\"\n      data-cy=\"email-preview-card\"\n    >\n      <div className=\"neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6\">\n        <div\n          className=\"flex gap-2\"\n          data-cy=\"email-send-to-preview\"\n          data-testid=\"email-to-block\"\n        >\n          <Typography\n            className=\"neeto-ui-text-gray-500\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {t(\"neetoMolecules.emailPreview.to\")}:\n          </Typography>\n          {isNotEmpty(to) ? (\n            <Typography\n              className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {to.join(\", \")}\n            </Typography>\n          ) : (\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40\" />\n          )}\n        </div>\n        {from && (\n          <div className=\"flex items-center gap-2 pt-3\">\n            <Typography\n              className=\"neeto-ui-text-gray-500\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {t(\"neetoMolecules.emailPreview.from\")}:\n            </Typography>\n            <Typography\n              className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n              data-cy=\"email-send-from-preview\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {from}\n            </Typography>\n          </div>\n        )}\n        <div className=\"flex items-center gap-2 pt-3\">\n          <Typography\n            className=\"neeto-ui-text-gray-500\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {t(\"neetoMolecules.emailPreview.subject\")}:\n          </Typography>\n          <Typography\n            className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n            data-cy=\"email-subject-preview\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {subject || (\n              <span className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40\" />\n            )}\n          </Typography>\n        </div>\n      </div>\n      <div\n        className=\"neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed\"\n        data-cy=\"email-body-preview-container\"\n      >\n        {body ? (\n          <MemoizedEditorContent content={body} />\n        ) : (\n          <div className=\"space-y-4\">\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80\" />\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-72\" />\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80\" />\n          </div>\n        )}\n        {actionButtonText && (\n          <div className=\"mt-6 flex w-full items-center justify-center\">\n            <Button className=\"pointer-events-none\" label={actionButtonText} />\n          </div>\n        )}\n        {logo && (\n          <img\n            alt={t(\"neetoMolecules.emailPreview.logoAltText\")}\n            className=\"h-20 w-36 object-cover\"\n            data-cy=\"company-logo-preview\"\n            src={logo}\n          />\n        )}\n      </div>\n      {productName && (\n        <div\n          className=\"neeto-ui-bg-gray-100 mt-auto p-2\"\n          data-testid=\"product-name-block\"\n        >\n          <Typography\n            className=\"neeto-ui-text-gray-600 text-center leading-6\"\n            style=\"body3\"\n          >\n            {t(\"neetoMolecules.emailPreview.poweredBy\")}\n            <span className=\"neeto-ui-text-gray-800 font-medium\">\n              {productName}\n            </span>\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nEmailPreview.propTypes = {\n  /**\n   * The value of the send-to field.\n   */\n  to: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * The value of the send-from field.\n   */\n  from: PropTypes.string,\n  /**\n   * The subject of the email.\n   */\n  subject: PropTypes.string,\n  /**\n   * The body of the email.\n   */\n  body: PropTypes.string,\n  /**\n   * The name of the neeto product to be previewed.\n   */\n  productName: PropTypes.string,\n  /**\n   * The text to be shown in the action button.\n   */\n  actionButtonText: PropTypes.string,\n  /**\n   * Source link for the company logo.\n   */\n  logo: PropTypes.string,\n};\n\nexport default EmailPreview;\n"],"names":["MemoizedEditorContent","React","memo","EditorContent","EmailPreview","_ref","to","from","subject","body","productName","actionButtonText","logo","_useTranslation","useTranslation","t","createElement","className","Typography","lineHeight","style","isNotEmpty","join","content","Button","label","alt","src"],"mappings":"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"}

package/dist/EmailPreview.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
+import { EditorContent } from '@bigbinary/neeto-editor';
+import { Typography, Button } from '@bigbinary/neetoui';
+import { useTranslation } from 'react-i18next';
+
+var MemoizedEditorContent = /*#__PURE__*/React.memo(EditorContent);
+var EmailPreview = function EmailPreview(_ref) {
+  var to = _ref.to,
+    from = _ref.from,
+    subject = _ref.subject,
+    body = _ref.body,
+    productName = _ref.productName,
+    actionButtonText = _ref.actionButtonText,
+    logo = _ref.logo;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border",
+    "data-cy": "email-preview-card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2",
+    "data-cy": "email-send-to-preview",
+    "data-testid": "email-to-block"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-500",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.emailPreview.to"), ":"), isNotEmpty(to) ? /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    lineHeight: "normal",
+    style: "body2"
+  }, to.join(", ")) : /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40"
+  })), from && /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2 pt-3"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-500",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.emailPreview.from"), ":"), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    "data-cy": "email-send-from-preview",
+    lineHeight: "normal",
+    style: "body2"
+  }, from)), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2 pt-3"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-500",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.emailPreview.subject"), ":"), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    "data-cy": "email-subject-preview",
+    lineHeight: "normal",
+    style: "body2"
+  }, subject || /*#__PURE__*/React.createElement("span", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed",
+    "data-cy": "email-body-preview-container"
+  }, body ? /*#__PURE__*/React.createElement(MemoizedEditorContent, {
+    content: body
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-72"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80"
+  })), actionButtonText && /*#__PURE__*/React.createElement("div", {
+    className: "mt-6 flex w-full items-center justify-center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "pointer-events-none",
+    label: actionButtonText
+  })), logo && /*#__PURE__*/React.createElement("img", {
+    alt: t("neetoMolecules.emailPreview.logoAltText"),
+    className: "h-20 w-36 object-cover",
+    "data-cy": "company-logo-preview",
+    src: logo
+  })), productName && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-100 mt-auto p-2",
+    "data-testid": "product-name-block"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-600 text-center leading-6",
+    style: "body3"
+  }, t("neetoMolecules.emailPreview.poweredBy"), /*#__PURE__*/React.createElement("span", {
+    className: "neeto-ui-text-gray-800 font-medium"
+  }, productName))));
+};
+
+export { EmailPreview as default };
+//# sourceMappingURL=EmailPreview.js.map

package/dist/EmailPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailPreview.js","sources":["../src/components/EmailPreview.jsx"],"sourcesContent":["import React from \"react\";\n\nimport { isNotEmpty } from \"neetocommons/pure\";\nimport { EditorContent } from \"neetoeditor\";\nimport { Typography, Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nconst MemoizedEditorContent = React.memo(EditorContent);\n\nconst EmailPreview = ({\n  to,\n  from,\n  subject,\n  body,\n  productName,\n  actionButtonText,\n  logo,\n}) => {\n  const { t } = useTranslation();\n\n  return (\n    <div\n      className=\"neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border\"\n      data-cy=\"email-preview-card\"\n    >\n      <div className=\"neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6\">\n        <div\n          className=\"flex gap-2\"\n          data-cy=\"email-send-to-preview\"\n          data-testid=\"email-to-block\"\n        >\n          <Typography\n            className=\"neeto-ui-text-gray-500\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {t(\"neetoMolecules.emailPreview.to\")}:\n          </Typography>\n          {isNotEmpty(to) ? (\n            <Typography\n              className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {to.join(\", \")}\n            </Typography>\n          ) : (\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40\" />\n          )}\n        </div>\n        {from && (\n          <div className=\"flex items-center gap-2 pt-3\">\n            <Typography\n              className=\"neeto-ui-text-gray-500\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {t(\"neetoMolecules.emailPreview.from\")}:\n            </Typography>\n            <Typography\n              className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n              data-cy=\"email-send-from-preview\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {from}\n            </Typography>\n          </div>\n        )}\n        <div className=\"flex items-center gap-2 pt-3\">\n          <Typography\n            className=\"neeto-ui-text-gray-500\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {t(\"neetoMolecules.emailPreview.subject\")}:\n          </Typography>\n          <Typography\n            className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n            data-cy=\"email-subject-preview\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {subject || (\n              <span className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40\" />\n            )}\n          </Typography>\n        </div>\n      </div>\n      <div\n        className=\"neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed\"\n        data-cy=\"email-body-preview-container\"\n      >\n        {body ? (\n          <MemoizedEditorContent content={body} />\n        ) : (\n          <div className=\"space-y-4\">\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80\" />\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-72\" />\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80\" />\n          </div>\n        )}\n        {actionButtonText && (\n          <div className=\"mt-6 flex w-full items-center justify-center\">\n            <Button className=\"pointer-events-none\" label={actionButtonText} />\n          </div>\n        )}\n        {logo && (\n          <img\n            alt={t(\"neetoMolecules.emailPreview.logoAltText\")}\n            className=\"h-20 w-36 object-cover\"\n            data-cy=\"company-logo-preview\"\n            src={logo}\n          />\n        )}\n      </div>\n      {productName && (\n        <div\n          className=\"neeto-ui-bg-gray-100 mt-auto p-2\"\n          data-testid=\"product-name-block\"\n        >\n          <Typography\n            className=\"neeto-ui-text-gray-600 text-center leading-6\"\n            style=\"body3\"\n          >\n            {t(\"neetoMolecules.emailPreview.poweredBy\")}\n            <span className=\"neeto-ui-text-gray-800 font-medium\">\n              {productName}\n            </span>\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nEmailPreview.propTypes = {\n  /**\n   * The value of the send-to field.\n   */\n  to: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * The value of the send-from field.\n   */\n  from: PropTypes.string,\n  /**\n   * The subject of the email.\n   */\n  subject: PropTypes.string,\n  /**\n   * The body of the email.\n   */\n  body: PropTypes.string,\n  /**\n   * The name of the neeto product to be previewed.\n   */\n  productName: PropTypes.string,\n  /**\n   * The text to be shown in the action button.\n   */\n  actionButtonText: PropTypes.string,\n  /**\n   * Source link for the company logo.\n   */\n  logo: PropTypes.string,\n};\n\nexport default EmailPreview;\n"],"names":["MemoizedEditorContent","React","memo","EditorContent","EmailPreview","_ref","to","from","subject","body","productName","actionButtonText","logo","_useTranslation","useTranslation","t","createElement","className","Typography","lineHeight","style","isNotEmpty","join","content","Button","label","alt","src"],"mappings":"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"}