@bigbinary/neeto-themes-frontend 1.2.3 → 1.2.4

package/dist/index.cjs.js

@@ -12,9 +12,9 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/regenerator');
-require('@bigbinary/neetoui/Toastr');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var Toastr = require('@bigbinary/neetoui/Toastr');
 var reactQuery = require('react-query');
 var axios = require('axios');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -30,8 +30,8 @@ var formik = require('formik');
 var jsxRuntime = require('react/jsx-runtime');
 var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var Select = require('@bigbinary/neetoui/Select');
+var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var antd = require('antd');
 var Switch = require('@bigbinary/neetoui/Switch');
 var Input = require('@bigbinary/neetoui/formik/Input');
@@ -62,6 +62,9 @@ function _interopNamespace(e) {
 var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
+var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
@@ -70,8 +73,8 @@ var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
-var ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var ColorPicker__default = /*#__PURE__*/_interopDefaultLegacy(ColorPicker);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
@@ -100,6 +103,52 @@ var useThemeStore = zustand.create(reactUtils.withImmutableActions(function (set
   };
 }));
 
+var getImageFromUrl = function getImageFromUrl(source) {
+  var image = new Image();
+  image.crossOrigin = "anonymous";
+  image.src = source;
+  return new Promise(function (resolve) {
+    image.onload = function () {
+      resolve(image);
+    };
+  });
+};
+var getDominantColorFromUrl = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(imageUrl) {
+    var image, context, c;
+    return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return getImageFromUrl(imageUrl);
+        case 3:
+          image = _context.sent;
+          context = document.createElement("canvas").getContext("2d");
+          context === null || context === void 0 || context.drawImage(image, 0, 0, 1, 1);
+          c = context === null || context === void 0 ? void 0 : context.getImageData(0, 0, 1, 1).data;
+          if (!c) {
+            _context.next = 9;
+            break;
+          }
+          return _context.abrupt("return", "#".concat(((1 << 24) + (c[0] << 16) + (c[1] << 8) + c[2]).toString(16).slice(1)));
+        case 9:
+          return _context.abrupt("return", null);
+        case 12:
+          _context.prev = 12;
+          _context.t0 = _context["catch"](0);
+          Toastr__default["default"].error(_context.t0);
+          return _context.abrupt("return", null);
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 12]]);
+  }));
+  return function getDominantColorFromUrl(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
 var scrollElementIntoView = function scrollElementIntoView(elementId) {
   var elementToScroll = document.getElementById(elementId);
   elementToScroll === null || elementToScroll === void 0 || elementToScroll.scrollIntoView({
@@ -238,6 +287,8 @@ var setTheme = function setTheme(theme, variableNamesMap, themeConfig) {
       var overlayOpacity = Number(property.value);
       setVariable(neetoCist.snakeToCamelCase("".concat(property.key, "_overlay_opacity")), Math.abs(overlayOpacity / 100), variableNamesMap);
       setVariable(neetoCist.snakeToCamelCase("".concat(property.key, "_overlay_color")), overlayOpacity < 0 ? BLACK : WHITE, variableNamesMap);
+    } else if (property.kind === "radius") {
+      setVariable(attribute, "".concat(property.value, "px"), variableNamesMap);
     } else {
       setVariable(attribute, property.value, variableNamesMap);
     }
@@ -424,6 +475,12 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             kind: "slider",
             key: key
           };
+        case "radius":
+          return {
+            value: defaultValue,
+            kind: "radius",
+            key: key
+          };
         case "boolean":
           return {
             value: String(defaultValue),
@@ -436,6 +493,12 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
             kind: "position_selector",
             key: key
           };
+        case "alignment_block":
+          return {
+            value: defaultValue,
+            kind: "alignment_block",
+            key: key
+          };
         default:
           return null;
       }
@@ -453,23 +516,26 @@ var buildImageData = function buildImageData(values, themePropertiesSchema) {
   }, {});
 };
 var isPropertyVisible = function isPropertyVisible(key, formikValues, themePropertiesSchema) {
-  var _findBy;
   var property = neetoCist.findBy({
     key: key
   }, themePropertiesSchema);
   if (neetoCist.isNotPresent(property)) return false;
+  if (property !== null && property !== void 0 && property.hidden) return false;
   var conditionalKey = property === null || property === void 0 ? void 0 : property.dependsOn;
   if (neetoCist.isNotPresent(conditionalKey)) return true;
-  var dependentProperty = neetoCist.findBy({
+  var dependentPropertySchema = neetoCist.findBy({
     key: conditionalKey
   }, themePropertiesSchema);
-  if (dependentProperty.kind === "image") {
+  var dependentProperty = neetoCist.findBy({
+    key: conditionalKey
+  }, formikValues.properties);
+  if (dependentPropertySchema.kind === "image") {
     var _formikValues$snakeTo;
     return neetoCist.isPresent((_formikValues$snakeTo = formikValues[neetoCist.snakeToCamelCase(conditionalKey)]) === null || _formikValues$snakeTo === void 0 ? void 0 : _formikValues$snakeTo.url);
+  } else if (dependentPropertySchema.kind === "boolean") {
+    return (dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value) !== "false";
   }
-  return neetoCist.isPresent((_findBy = neetoCist.findBy({
-    key: conditionalKey
-  }, formikValues.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value);
+  return neetoCist.isPresent(dependentProperty === null || dependentProperty === void 0 ? void 0 : dependentProperty.value);
 };
 var buildLabel = function buildLabel(key, kind) {
   return i18next.t("neetoThemes.properties.".concat(neetoCist.snakeToCamelCase(kind), ".").concat(neetoCist.snakeToCamelCase(key)));
@@ -497,6 +563,32 @@ var Card$2 = function Card(_ref) {
   });
 };
 
+var SelectBlock = function SelectBlock(_ref) {
+  var label = _ref.label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    value = _ref.value,
+    options = _ref.options,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
+    "data-cy": "theme-style-".concat(utils.joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      "data-cy": "logo-field-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value
+      })
+    })]
+  });
+};
+
 var DESIGN_SCREENS = {
   THEMES: "Themes",
   Customize: "Customize"
@@ -504,6 +596,7 @@ var DESIGN_SCREENS = {
 var ONE_MEGABYTE = 1;
 
 var ImageBlock = function ImageBlock(_ref) {
+  var _findBy;
   var label = _ref.label,
     name = _ref.name,
     _ref$imageData = _ref.imageData,
@@ -511,22 +604,73 @@ var ImageBlock = function ImageBlock(_ref) {
     _ref$uploadConfig = _ref.uploadConfig,
     uploadConfig = _ref$uploadConfig === void 0 ? {
       maxImageSize: ONE_MEGABYTE
-    } : _ref$uploadConfig;
+    } : _ref$uploadConfig,
+    attribute = _ref.attribute;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
-  var handleImageChange = function handleImageChange(image) {
-    if (ramda.isEmpty(image.signedId) || ramda.isEmpty(image.url)) {
-      setFieldValue(name, {
-        signedId: null,
-        url: image.url
-      });
-      return;
-    }
-    setFieldValue(name, {
-      signedId: image.signedId,
-      url: image.url
-    });
-  };
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  var _useConfigStore = useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow.shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var propertySchema = neetoCist.findBy({
+    key: attribute
+  }, themePropertiesSchema);
+  var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
+  var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
+  var positionKeyInSchema = neetoCist.findBy({
+    key: "".concat(name, "_position")
+  }, themePropertiesSchema);
+  var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && neetoCist.isPresent(positionKeyInSchema);
+  var positionKeyIndex = neetoCist.findIndexBy({
+    key: "".concat(name, "_position")
+  }, values.properties);
+  var handleImageChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(image) {
+      var dominantColor;
+      return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            if (!(ramda.isEmpty(image.signedId) || ramda.isEmpty(image.url))) {
+              _context.next = 4;
+              break;
+            }
+            setFieldValue(name, {
+              signedId: null,
+              url: image.url
+            });
+            return _context.abrupt("return");
+          case 4:
+            _context.next = 6;
+            return getDominantColorFromUrl(image.url);
+          case 6:
+            dominantColor = _context.sent;
+            setFieldValue(name, {
+              signedId: image.signedId,
+              url: image.url,
+              dominantColor: dominantColor
+            });
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](0);
+            Toastr__default["default"].error(_context.t0);
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+    return function handleImageChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "space-y-3 py-3 first:pt-0 last:pb-0",
     "data-cy": "theme-style-".concat(utils.joinHyphenCase(label)),
@@ -537,12 +681,25 @@ var ImageBlock = function ImageBlock(_ref) {
         style: "body2",
         children: label
       })
-    }), /*#__PURE__*/react.createElement(neetoImageUploaderFrontend.ImageUploader, {
-      uploadConfig: uploadConfig,
-      className: "h-40 w-full",
-      key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
-      src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
-      onUploadComplete: handleImageChange
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-3 divide-y divide-gray-200",
+      children: [/*#__PURE__*/react.createElement(neetoImageUploaderFrontend.ImageUploader, {
+        uploadConfig: uploadConfig,
+        className: "h-40 w-full",
+        key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
+        src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
+        onUploadComplete: handleImageChange
+      }), isPositionChangerVisible && /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
+        label: buildLabel("".concat(name, "Position"), "image"),
+        options: options || POSITION_OPTIONS,
+        placeholder: t("neetoThemes.common.left"),
+        value: neetoCist.toLabelAndValue((_findBy = neetoCist.findBy({
+          key: "".concat(name, "_position")
+        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value),
+        onChange: function onChange(option) {
+          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
+        }
+      })]
     })]
   });
 };
@@ -559,6 +716,7 @@ var Images = function Images(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "divide-y divide-gray-200",
       children: /*#__PURE__*/jsxRuntime.jsx(ImageBlock, {
+        attribute: attribute,
         imageData: imageData,
         name: key
       })
@@ -566,6 +724,54 @@ var Images = function Images(_ref) {
   });
 };
 
+var AlignmentBlock = function AlignmentBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between gap-2 py-3 first:pt-0 last:pb-0",
+    "data-cy": utils.joinHyphenCase(label),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      "data-cy": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(formik.Field, {
+      name: name,
+      children: function children(_ref2) {
+        var value = _ref2.field.value,
+          setFieldValue = _ref2.form.setFieldValue;
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-3",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            "data-cy": "alignment-left",
+            icon: neetoIcons.LeftAlign,
+            size: "large",
+            style: value === "left" ? "primary" : "text",
+            tooltipProps: {
+              content: "Left align",
+              position: "bottom"
+            },
+            onClick: function onClick() {
+              return setFieldValue(name, "left");
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            "data-cy": "alignment-center",
+            icon: neetoIcons.CenterAlign,
+            size: "large",
+            style: value === "center" ? "primary" : "text",
+            tooltipProps: {
+              content: "Center align",
+              position: "bottom"
+            },
+            onClick: function onClick() {
+              return setFieldValue(name, "center");
+            }
+          })]
+        });
+      }
+    })]
+  });
+};
+
 var ColorBlock = function ColorBlock(_ref) {
   var label = _ref.label,
     _ref$color = _ref.color,
@@ -625,32 +831,6 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
   });
 };
 
-var SelectBlock = function SelectBlock(_ref) {
-  var label = _ref.label,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
-    value = _ref.value,
-    options = _ref.options,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
-    "data-cy": "theme-style-".concat(utils.joinHyphenCase(label)),
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-      "data-cy": "logo-field-labels",
-      style: "body2",
-      children: label
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "w-40",
-      children: /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
-        onChange: onChange,
-        options: options,
-        placeholder: placeholder,
-        value: value
-      })
-    })]
-  });
-};
-
 var SliderBlock = function SliderBlock(_ref) {
   var label = _ref.label,
     onChange = _ref.onChange,
@@ -747,7 +927,7 @@ var Properties = function Properties(_ref) {
     }
   };
   react.useEffect(function () {
-    onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, setFieldValue);
+    onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
     setTheme(values);
     setThemeState({
       previewingTheme: values
@@ -786,11 +966,26 @@ var Properties = function Properties(_ref) {
           onChange: handleColorChange(key)
         }, key);
       }), neetoCist.filterBy({
-        kind: "overlay_opacity"
+        kind: "radius"
       }, values.properties).map(function (_ref6) {
         var key = _ref6.key,
           value = _ref6.value,
           kind = _ref6.kind;
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(SliderBlock, {
+          label: buildLabel(key, kind),
+          max: 50,
+          min: 0,
+          value: Number(value) || 0,
+          onChange: function onChange(radius) {
+            return handleChange(key, radius, "".concat(radius, "px"));
+          }
+        }, key);
+      }), neetoCist.filterBy({
+        kind: "overlay_opacity"
+      }, values.properties).map(function (_ref7) {
+        var key = _ref7.key,
+          value = _ref7.value,
+          kind = _ref7.kind;
         return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(SliderBlock, {
           label: buildLabel(key, kind),
           marks: OVERLAY_OPACITY_SLIDER_MARKS,
@@ -803,11 +998,11 @@ var Properties = function Properties(_ref) {
         }, key);
       }), neetoCist.filterBy({
         kind: "position_selector"
-      }, values.properties).map(function (_ref7) {
+      }, values.properties).map(function (_ref8) {
         var _findBy;
-        var key = _ref7.key,
-          kind = _ref7.kind,
-          value = _ref7.value;
+        var key = _ref8.key,
+          kind = _ref8.kind,
+          value = _ref8.value;
         var index = neetoCist.findIndexBy({
           key: key
         }, values.properties);
@@ -825,10 +1020,10 @@ var Properties = function Properties(_ref) {
         }, key);
       }), neetoCist.filterBy({
         kind: "boolean"
-      }, values.properties).map(function (_ref8) {
-        var key = _ref8.key,
-          kind = _ref8.kind,
-          value = _ref8.value;
+      }, values.properties).map(function (_ref9) {
+        var key = _ref9.key,
+          kind = _ref9.kind,
+          value = _ref9.value;
         var index = neetoCist.findIndexBy({
           key: key
         }, values.properties);
@@ -839,6 +1034,18 @@ var Properties = function Properties(_ref) {
             return setFieldValue("properties[".concat(index, "].value"), String(e.target.checked));
           }
         }, key);
+      }), neetoCist.filterBy({
+        kind: "alignment_block"
+      }, values.properties).map(function (_ref10) {
+        var key = _ref10.key,
+          kind = _ref10.kind;
+        var index = neetoCist.findIndexBy({
+          key: key
+        }, values.properties);
+        return isPropertyVisible(key, values, themePropertiesSchema) && /*#__PURE__*/jsxRuntime.jsx(AlignmentBlock, {
+          label: buildLabel(key, kind),
+          name: "properties[".concat(index, "].value")
+        });
       })]
     })
   });