contentoh-components-library 14.0.0 → 17.0.0

package/dist/assets/images/generalButton/downloadIcon.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7063 7.61134C13.2246 5.16759 11.0783 3.33301 8.5 3.33301C6.45292 3.33301 4.675 4.49467 3.78958 6.19467C1.6575 6.42134 0 8.22759 0 10.4163C0 12.7609 1.90542 14.6663 4.25 14.6663H13.4583C15.4133 14.6663 17 13.0797 17 11.1247C17 9.25467 15.5479 7.73884 13.7063 7.61134ZM12.0417 9.70801L8.5 13.2497L4.95833 9.70801H7.08333V6.87467H9.91667V9.70801H12.0417Z" fill="#817393"/>
+</svg>

package/dist/components/atoms/CheckBox/index.js

@@ -13,13 +13,15 @@ var CheckBox = function CheckBox(_ref) {
   var id = _ref.id,
       label = _ref.label,
       onChange = _ref.onChange,
-      isFilter = _ref.isFilter;
+      isFilter = _ref.isFilter,
+      defaultChecked = _ref.defaultChecked;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "checkbox",
       name: id,
       id: id,
-      onChange: onChange
+      onChange: onChange,
+      defaultChecked: defaultChecked
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       htmlFor: id,
       children: label && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {

package/dist/components/atoms/GeneralButton/styles.js

@@ -37,12 +37,14 @@ var _deleteIcon = _interopRequireDefault(require("../../../assets/images/general
 
 var _deleteIconHover = _interopRequireDefault(require("../../../assets/images/generalButton/deleteIconHover.svg"));
 
+var _downloadIcon = _interopRequireDefault(require("../../../assets/images/generalButton/downloadIcon.svg"));
+
 var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
   return props.buttonFont;
-}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _arrowIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white);
+}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _arrowIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white);
 
 exports.Container = Container;

package/dist/components/atoms/GeneralInput/index.js

@@ -9,28 +9,22 @@ exports.GeneralInput = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
-var _jsBase = require("js-base64");
-
 var _react = require("react");
 
-var _styledComponents = require("styled-components");
-
 var _styles = require("./styles");
 
+var _InputFormatter = require("../InputFormatter");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var GeneralInput = function GeneralInput(_ref) {
   var inputType = _ref.inputType,
       inputId = _ref.inputId,
-      inputCols = _ref.inputCols,
-      inputRows = _ref.inputRows,
-      inputName = _ref.inputName,
       inputValue = _ref.inputValue,
       articleId = _ref.articleId,
       isRequired = _ref.isRequired,
       version = _ref.version,
       inputPlaceholder = _ref.inputPlaceholder,
-      updatedDescriptions = _ref.updatedDescriptions,
       setUpdatedDescriptions = _ref.setUpdatedDescriptions,
       updatedDatasheets = _ref.updatedDatasheets,
       setUpdatedDatasheets = _ref.setUpdatedDatasheets,
@@ -52,14 +46,6 @@ var GeneralInput = function GeneralInput(_ref) {
     updatedDatasheets && addTextAreaToArray(e.target.value, updatedDatasheets, setUpdatedDatasheets);
   };
 
-  var onHandleTextAreaChange = function onHandleTextAreaChange(e) {
-    setTextValue(function (_ref3) {
-      var value = _ref3.value;
-      return value = e.target.value;
-    });
-    updatedDatasheets && addTextAreaToArray(e.target.value, updatedDescriptions, setUpdatedDescriptions);
-  };
-
   (0, _react.useEffect)(function () {
     if (dinamicHeight) {
       var input = document.querySelector("textarea#description-".concat(inputId, "-").concat(index));
@@ -70,7 +56,9 @@ var GeneralInput = function GeneralInput(_ref) {
     }
   }, [textValue]);
 
-  var addTextAreaToArray = function addTextAreaToArray(textValue, array, setArray) {
+  var addTextAreaToArray = function addTextAreaToArray(textValue) {
+    var array = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var setArray = arguments.length > 2 ? arguments[2] : undefined;
     var tempDescriptions = array;
     var newArticle = {
       articleId: articleId,
@@ -78,18 +66,18 @@ var GeneralInput = function GeneralInput(_ref) {
       value: textValue,
       versionId: version
     };
-    var isOnArray = tempDescriptions.some(function (desc, index) {
+    var isOnArray = tempDescriptions === null || tempDescriptions === void 0 ? void 0 : tempDescriptions.some(function (desc, index) {
       if (desc.attributeId === newArticle.attributeId) {
         tempDescriptions[index] = newArticle;
         return true;
       }
     });
-    !isOnArray && tempDescriptions.push(newArticle);
+    !isOnArray && (tempDescriptions === null || tempDescriptions === void 0 ? void 0 : tempDescriptions.push(newArticle));
     setArray(tempDescriptions);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    isRequired: isRequired && !textValue,
+    isRequired: isRequired && !textValue.value,
     children: inputType !== "textarea" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: inputType,
       id: "datasheet-" + inputId + "-" + index,
@@ -97,14 +85,13 @@ var GeneralInput = function GeneralInput(_ref) {
       placeholder: inputPlaceholder,
       value: textValue === null || textValue === void 0 ? void 0 : textValue.value,
       onChange: onHandleChange
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
-      name: inputName,
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFormatter.InputFormatter, {
       id: "description-" + inputId + "-" + index,
-      cols: inputCols,
-      rows: inputRows,
-      placeholder: inputPlaceholder,
-      value: textValue.value,
-      onChange: onHandleTextAreaChange
+      addTextAreaToArray: addTextAreaToArray,
+      updatedDescriptions: updatedDatasheets,
+      setUpdatedDescriptions: setUpdatedDescriptions,
+      inputValue: inputValue === null || inputValue === void 0 ? void 0 : inputValue.replace(/<br>/gm, "<p><br></p>"),
+      isRequired: isRequired && !inputValue
     })
   });
 };

package/dist/components/atoms/GenericModal/index.js

@@ -12,12 +12,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 var GenericModal = function GenericModal(_ref) {
   var _ref$componentsArray = _ref.componentsArray,
       componentsArray = _ref$componentsArray === void 0 ? [] : _ref$componentsArray,
-      buttonType = _ref.buttonType;
+      buttonType = _ref.buttonType,
+      onClick = _ref.onClick;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "global-styles " + buttonType,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        className: "close-button"
+        className: "close-button",
+        onClick: onClick
       }), componentsArray === null || componentsArray === void 0 ? void 0 : componentsArray.map(function (component) {
         return component;
       })]

package/dist/components/atoms/GenericModal/styles.js

@@ -17,6 +17,6 @@ var _genericModalClose = _interopRequireDefault(require("../../../assets/images/
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n\n  .global-styles {\n    background-color: ", ";\n    height: auto;\n    width: auto;\n    position: relative;\n    border-radius: 15px;\n    padding: 40px;\n    text-align: center;\n    .close-button {\n      background-image: url(", ");\n      background-color: transparent;\n      width: 14px;\n      height: 14px;\n      cursor: pointer;\n      border: none;\n      position: absolute;\n      right: 20px;\n      top: 20px;\n    }\n    .general-white-button {\n      width: 160px;\n      height: 40px;\n      color: ", ";\n      border: 1px solid ", ";\n      background-color: transparent;\n      & + * {\n        margin-left: 45px;\n        height: 40px;\n        width: 161px;\n      }\n    }\n\n    &.log-out {\n      padding-bottom: 60px;\n      img {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .with-bold-text {\n        font-size: 24px;\n        & + * {\n          margin-top: 20px;\n        }\n      }\n    }\n\n    &.delete-product {\n      img {\n        height: 50px;\n        width: 56px;\n        & + * {\n          margin-top: 30px;\n        }\n      }\n      .product-name-header {\n        & + * {\n          margin-bottom: 30px;\n        }\n      }\n    }\n\n    &.product-edition {\n      padding-top: 50px;\n      .product-name-header {\n        & + * {\n          margin-top: 25px;\n        }\n      }\n    }\n\n    &.send-invitation {\n      width: 604px;\n      img {\n        & + * {\n          margin-top: 40px;\n        }\n      }\n      p {\n        font-family: ", ";\n        font-style: normal;\n        font-size: 24px;\n        color: ", ";\n        line-height: 28px;\n        span {\n          font-family: ", ";\n        }\n      }\n    }\n\n    &.upload-image {\n      width: 430px;\n      padding: 50px;\n      img {\n        & + * {\n          margin-top: 33px;\n        }\n      }\n      .input-name-header {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .list-container {\n        & + .general-button-default {\n          margin-top: 40px;\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.white, _variables.GlobalColors.deep_gray, _genericModalClose.default, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.white, _variables.FontFamily.Raleway_700);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  z-index: 100;\n\n  .global-styles {\n    background-color: ", ";\n    height: auto;\n    width: auto;\n    position: relative;\n    border-radius: 15px;\n    padding: 40px;\n    text-align: center;\n    .close-button {\n      background-image: url(", ");\n      background-color: transparent;\n      width: 14px;\n      height: 14px;\n      cursor: pointer;\n      border: none;\n      position: absolute;\n      right: 20px;\n      top: 20px;\n    }\n    .general-white-button {\n      width: 160px;\n      height: 40px;\n      color: ", ";\n      border: 1px solid ", ";\n      background-color: transparent;\n      & + * {\n        margin-left: 45px;\n        height: 40px;\n        width: 161px;\n      }\n    }\n\n    &.log-out {\n      padding-bottom: 60px;\n      img {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .with-bold-text {\n        font-size: 24px;\n        & + * {\n          margin-top: 20px;\n        }\n      }\n    }\n\n    &.delete-product {\n      img {\n        height: 50px;\n        width: 56px;\n        & + * {\n          margin-top: 30px;\n        }\n      }\n      .product-name-header {\n        & + * {\n          margin-bottom: 30px;\n        }\n      }\n    }\n\n    &.product-edition {\n      padding-top: 50px;\n      .product-name-header {\n        & + * {\n          margin-top: 25px;\n        }\n      }\n    }\n\n    &.send-invitation {\n      width: 604px;\n      img {\n        & + * {\n          margin-top: 40px;\n        }\n      }\n      p {\n        font-family: ", ";\n        font-style: normal;\n        font-size: 24px;\n        color: ", ";\n        line-height: 28px;\n        span {\n          font-family: ", ";\n        }\n      }\n    }\n\n    &.upload-image {\n      width: 430px;\n      padding: 50px;\n      img {\n        & + * {\n          margin-top: 33px;\n        }\n      }\n      .input-name-header {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .list-container {\n        & + .general-button-default {\n          margin-top: 40px;\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.white, _variables.GlobalColors.deep_gray, _genericModalClose.default, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.white, _variables.FontFamily.Raleway_700);
 
 exports.Container = Container;

package/dist/components/atoms/Input/index.js

@@ -15,9 +15,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function Input(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.MainContainer, {
-    width: props.width,
     error: props.error,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.InputCustom, (0, _objectSpread2.default)({
+      autoFocus: true,
       onChange: function onChange(event) {
         return props.onChange && props.onChange(event.target.value);
       }

package/dist/components/atoms/Input/style.js

@@ -11,16 +11,16 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _variables = require("../../../global-files/variables");
+
 var _templateObject, _templateObject2;
 
-var MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  width: ", ";\n  height: 20px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  background: #fafafa;\n  border-radius: 2px;\n  border: ", ";\n"])), function (props) {
-  return props.width ? props.width : "150px";
-}, function (props) {
+var MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: 20px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  background: #fafafa;\n  border-radius: 2px;\n  border: ", ";\n"])), function (props) {
   return props.error && "1px solid red";
 });
 
 exports.MainContainer = MainContainer;
 
-var InputCustom = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-width: 0;\n  width: 100%;\n  font-family: Avenir Next;\n  font-style: normal;\n  font-weight: normal;\n  border-width: 0;\n  background-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    font-size: 12px;\n    color: #d4d1d7;\n  }\n"])));
+var InputCustom = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-width: 0;\n  width: 100%;\n  font-family: ", ";\n  font-weight: 400;\n  font-size: 11px;\n  line-height: 19px;\n  border-width: 0;\n  color: ", ";\n  background-color: ", ";\n  outline: none;\n  &::placeholder {\n    font-size: 12px;\n    color: #d4d1d7;\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s2);
 
 exports.InputCustom = InputCustom;

package/dist/components/atoms/InputFormatter/Wysiwyg.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DefaultInputFormatter = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/InputFormatter",
+  component: _index.InputFormatter
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputFormatter, (0, _objectSpread2.default)({}, args));
+};
+
+var DefaultInputFormatter = Template.bind({});
+exports.DefaultInputFormatter = DefaultInputFormatter;
+DefaultInputFormatter.args = {
+  text: "hola mundo"
+};

package/dist/components/atoms/InputFormatter/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputFormatter = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _reactQuill = _interopRequireDefault(require("react-quill"));
+
+require("react-quill/dist/quill.snow.css");
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var InputFormatter = function InputFormatter(_ref) {
+  var _ref$inputValue = _ref.inputValue,
+      inputValue = _ref$inputValue === void 0 ? "" : _ref$inputValue,
+      id = _ref.id,
+      updatedDescriptions = _ref.updatedDescriptions,
+      setUpdatedDescriptions = _ref.setUpdatedDescriptions,
+      addTextAreaToArray = _ref.addTextAreaToArray,
+      isRequired = _ref.isRequired;
+
+  var _useState = (0, _react.useState)(inputValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      convertedText = _useState2[0],
+      setConvertedText = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      focus = _useState4[0],
+      setFocus = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      selection = _useState6[0],
+      setSelection = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({
+    left: 0,
+    top: 0
+  }),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      position = _useState8[0],
+      setPosition = _useState8[1];
+
+  var onHandleTextAreaChange = function onHandleTextAreaChange(value) {
+    setConvertedText(function (current) {
+      return current = value;
+    });
+    !id.includes("commentary") && addTextAreaToArray(value.replace(/<\/?p>/gm, ""), updatedDescriptions, setUpdatedDescriptions);
+  };
+
+  function getSelectionText() {
+    setPosition({
+      left: 0,
+      top: 0
+    });
+    var text = "";
+
+    if (window.getSelection) {
+      text = window.getSelection().toString();
+    } else if (document.selection && document.selection.type != "Control") {
+      text = document.selection.createRange().text;
+    }
+
+    setSelection(text.length > 0);
+  }
+
+  var getCursorPosition = function getCursorPosition(e) {
+    var input = document.getElementById(id);
+    var elementPosition = input.getBoundingClientRect();
+    position.top === 0 && position.left === 0 && setPosition({
+      left: e.clientX - elementPosition.x,
+      top: e.clientY - elementPosition.y
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    focus: focus,
+    selection: selection,
+    position: position,
+    isRequired: isRequired,
+    onClick: function onClick(e) {
+      getCursorPosition(e);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, {
+      id: id,
+      value: convertedText,
+      onChange: onHandleTextAreaChange,
+      modules: {
+        toolbar: ["bold"]
+      },
+      onFocus: function onFocus() {
+        return setFocus(true);
+      },
+      onBlur: function onBlur() {
+        setFocus(false);
+        setSelection(false);
+        setPosition({
+          left: 0,
+          top: 0
+        });
+      },
+      onChangeSelection: function onChangeSelection() {
+        return getSelectionText();
+      }
+    })
+  });
+};
+
+exports.InputFormatter = InputFormatter;

package/dist/components/atoms/InputFormatter/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .quill {\n    border: 1px solid\n      ", ";\n    position: relative;\n    border-radius: 2px;\n\n    .ql-toolbar {\n      background-color: ", ";\n      position: absolute;\n      z-index: 10;\n      border: 1px solid ", ";\n      width: 45px;\n      height: 45px;\n      border-radius: 4px;\n      visibility: ", ";\n      top: ", "px;\n      left: ", "px;\n    }\n\n    .ql-container {\n      border: none;\n      font-family: ", ";\n      color: ", ";\n      strong {\n        font-family: ", ";\n      }\n    }\n  }\n"])), function (_ref) {
+  var focus = _ref.focus,
+      isRequired = _ref.isRequired;
+  return focus ? _variables.GlobalColors.magenta_s2 : isRequired ? "red" : _variables.GlobalColors.s3;
+}, _variables.GlobalColors.s2, _variables.GlobalColors.s3, function (_ref2) {
+  var selection = _ref2.selection;
+  return selection ? "visible" : "hidden";
+}, function (_ref3) {
+  var position = _ref3.position;
+  return position.top;
+}, function (_ref4) {
+  var position = _ref4.position;
+  return position.left;
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.FontFamily.Raleway_900);
+
+exports.Container = Container;

package/dist/components/atoms/LabelToInput/style.js

@@ -11,11 +11,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _variables = require("../../../global-files/variables");
+
 var _templateObject;
 
-var MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  width: ", ";\n  height: 20px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-left: 15px;\n  white-space: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  & > p {\n    color: #000;\n  }\n  border: ", ";\n  ::-webkit-scrollbar {\n    width: 3px;\n    height: 3px;\n  }\n  ::-webkit-scrollbar-track {\n    background: #f1f1f1;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: #d4d1d7;\n    border-radius: 3px;\n  }\n"])), function (props) {
-  return props.width ? props.width : "150px";
-}, function (props) {
+var MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: 20px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-left: 15px;\n  white-space: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  & > p {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 19px;\n    color: ", ";\n    background-color: ", ";\n    padding: 1px 3px;\n    border-radius: 3px;\n  }\n  border: ", ";\n  ::-webkit-scrollbar {\n    width: 3px;\n    height: 3px;\n  }\n  ::-webkit-scrollbar-track {\n    background: #f1f1f1;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: #d4d1d7;\n    border-radius: 3px;\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s2, function (props) {
   return props.error && "1px solid red";
 });
 

package/dist/components/atoms/ProductPercentCard/Percent.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductPercentCardDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var status = ["-", "Pr", "Rc", "As", "P", "QF", "AF", "AA", "AP", "AC", "RA", "RF", "RP", "RC", "Ex"];
+var _default = {
+  title: "Components/atoms/ProductPercentCard",
+  component: _index.ProductPercentCard,
+  argTypes: {
+    statusType: {
+      options: status,
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductPercentCard, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductPercentCardDefault = Template.bind({});
+exports.ProductPercentCardDefault = ProductPercentCardDefault;
+ProductPercentCardDefault.args = {
+  statusType: "-",
+  productsInStatus: 0,
+  totalProcucts: 0
+};

package/dist/components/atoms/ProductPercentCard/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductPercentCard = void 0;
+
+var _styles = require("./styles");
+
+var _polygon = _interopRequireDefault(require("../../../assets/images/arrow/polygon.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductPercentCard = function ProductPercentCard(_ref) {
+  var statusType = _ref.statusType,
+      _ref$totalProcucts = _ref.totalProcucts,
+      totalProcucts = _ref$totalProcucts === void 0 ? 0 : _ref$totalProcucts,
+      _ref$productsInStatus = _ref.productsInStatus,
+      productsInStatus = _ref$productsInStatus === void 0 ? 0 : _ref$productsInStatus;
+  var result = productsInStatus / totalProcucts * 100;
+  var percent = result.toString().search(/\./) ? result.toFixed(2) : result;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: "status-".concat(statusType),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "text",
+      children: "Productos en proceso"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "percent-text",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "number",
+        children: productsInStatus
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _polygon.default,
+        alt: ""
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: "span",
+        children: [percent == "NaN" ? 0 : percent, "%"]
+      })]
+    })]
+  });
+};
+
+exports.ProductPercentCard = ProductPercentCard;

package/dist/components/atoms/ProductPercentCard/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 7px;\n  max-width: fit-content;\n  flex-direction: column;\n  height: 83px;\n  padding: 10px;\n\n  &.status-Pr,\n  &.status-Rc {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n  &.status-- {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-As,\n  &.status-P,\n  &.status-QF {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-AF,\n  &.status-AA,\n  &.status-AP,\n  &.status-AC {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    border: 1px solid #d74ded;\n    .span {\n      color: #d74ded;\n    }\n  }\n\n  &.status-Ex {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  .text {\n    color: ", ";\n    text-align: center;\n    font-size: 12px;\n    width: 70px;\n    font-family: ", ";\n    line-height: 14px;\n    margin: auto;\n  }\n  .percent-text {\n    display: flex;\n    font-family: ", ";\n    align-items: center;\n    .number {\n      font-size: 28px;\n      color: ", ";\n    }\n    .span {\n      padding-top: 8px;\n      font-size: 18px;\n    }\n  }\n"])), _variables.GlobalColors.reception, _variables.GlobalColors.reception, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.finished, _variables.GlobalColors.finished, _variables.GlobalColors.exported, _variables.GlobalColors.exported, _variables.GlobalColors.s4, _variables.FontFamily.Raleway, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/molecules/GalleryElement/index.js

@@ -38,7 +38,10 @@ var GalleryElement = function GalleryElement(_ref) {
       imageInputs = _ref.imageInputs,
       imageType = _ref.imageType,
       imagePackagingType = _ref.imagePackagingType,
-      changeImage = _ref.changeImage;
+      changeImage = _ref.changeImage,
+      selectedImages = _ref.selectedImages,
+      setSelectedImages = _ref.setSelectedImages,
+      setCheckAll = _ref.setCheckAll;
 
   var _useState = (0, _react.useState)(validation),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -57,6 +60,22 @@ var GalleryElement = function GalleryElement(_ref) {
     }
   };
 
+  var checkOnChange = function checkOnChange(e) {
+    var chkGlobal = document.getElementById("check-all-images");
+    var checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    var temp = selectedImages.slice();
+    e.target.checked ? temp.push(image) : temp = temp.filter(function (img) {
+      return image.id !== img.id;
+    });
+    var counter = 0;
+    checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.forEach(function (chk) {
+      return chk.checked && counter++;
+    });
+    chkGlobal.checked = checkboxList.length === counter;
+    setCheckAll(checkboxList.length === counter);
+    setSelectedImages(temp);
+  };
+
   (0, _react.useEffect)(function () {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
@@ -68,7 +87,10 @@ var GalleryElement = function GalleryElement(_ref) {
       className: "buttons-container",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
         id: id,
-        label: label
+        label: label,
+        onChange: function onChange(e) {
+          return checkOnChange(e);
+        }
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "image-container",

package/dist/components/molecules/GalleryHeader/index.js

@@ -11,10 +11,27 @@ var _CheckBox = require("../../atoms/CheckBox");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var GalleryHeader = function GalleryHeader() {
+var GalleryHeader = function GalleryHeader(_ref) {
+  var setCheckAll = _ref.setCheckAll,
+      setSelectedImages = _ref.setSelectedImages;
+
+  var checkAll = function checkAll(e) {
+    var checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    checkboxList.forEach(function (chk) {
+      return chk.checked = e.target.checked;
+    });
+    setCheckAll(e.target.checked);
+    if (!e.target.checked) setSelectedImages([]);
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+        id: "check-all-images",
+        onChange: function onChange(e) {
+          return checkAll(e);
+        }
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       className: "image-header",
       children: "Image"