contentoh-components-library 0.1.1

package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js

@@ -0,0 +1,377 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RetailerProductEditionDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/pages/RetailerProductEdition",
+  component: _index.RetailerProductEdition
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.RetailerProductEdition, args);
+};
+
+var RetailerProductEditionDefault = Template.bind({});
+exports.RetailerProductEditionDefault = RetailerProductEditionDefault;
+RetailerProductEditionDefault.args = {
+  productData: {
+    imagesData: {
+      image: {
+        src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
+        name: "Hero.jpg"
+      }
+    },
+    headerData: {
+      name: "Nombre del producto",
+      status: "P",
+      percent: 20,
+      backgroundColor: "in_progress",
+      priority: "low",
+      date: new Date().toLocaleDateString(),
+      features: [{
+        feature: "Prov",
+        value: "Unilever"
+      }, {
+        feature: "Vendor",
+        value: "1234567890"
+      }, {
+        feature: "SKU",
+        value: "1234567890"
+      }, {
+        feature: "UPC",
+        value: "1234567890"
+      }, {
+        feature: "Categoría",
+        value: "Desodorantes Caballero y Dama"
+      }],
+      validation: "null-button"
+    },
+    status: "AA",
+    image: {
+      src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg"
+    },
+    services: {
+      Descripción: [{
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }],
+      "Ficha técnica": [{
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }, {
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }, {
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }, {
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }],
+      Imágenes: [{
+        img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+        alt: "img",
+        name: "Hero",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+        alt: "img",
+        name: "Hero2",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+        alt: "img",
+        name: "Hero3",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+        alt: "img",
+        name: "Hero4",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "https://memegenerator.net/img/images/72798198.jpg",
+        alt: "img",
+        name: "Hero5",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+        alt: "img",
+        name: "Hero6",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }],
+      "Golden SKU": {}
+    }
+  },
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+    "Golden SKU": false
+  }
+};

package/dist/components/pages/RetailerProductEdition/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetailerProductEdition = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _HeaderTop = require("../../molecules/HeaderTop");
+
+var _ImagePreviewer = require("../../organisms/ImagePreviewer");
+
+var _ImageDataTable = require("../../organisms/ImageDataTable");
+
+var _FullProductNameHeader = require("../../organisms/FullProductNameHeader");
+
+var _FullTabsMenu = require("../../organisms/FullTabsMenu");
+
+var _InputGroup = require("../../organisms/InputGroup");
+
+var _react = require("react");
+
+var _GalleryElement = require("../../molecules/GalleryElement");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var RetailerProductEdition = function RetailerProductEdition(_ref) {
+  var _productData$services, _productData$services2, _productData$services3, _productData$services4;
+
+  var productData = _ref.productData,
+      tabsSections = _ref.tabsSections;
+
+  var _useState = (0, _react.useState)("Descripción"),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeTab = _useState2[0],
+      setActiveTab = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(productData === null || productData === void 0 ? void 0 : (_productData$services = productData.services) === null || _productData$services === void 0 ? void 0 : _productData$services.Imágenes[0]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      activeImage = _useState4[0],
+      setActiveImage = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      imageLayout = _useState6[0],
+      setImageLayout = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      headerTop = _useState8[0],
+      setHeaderTop = _useState8[1];
+
+  var getData = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return _axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT, "?idCategory=846&articleId=238&version=2"));
+
+            case 2:
+              response = _context.sent;
+              console.log(JSON.parse(response.data.body).data);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function getData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    getData();
+  }, []);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    headerTop: headerTop
+  }, /*#__PURE__*/React.createElement(_HeaderTop.HeaderTop, {
+    setHeaderTop: setHeaderTop
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "data-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "image-data-panel"
+  }, /*#__PURE__*/React.createElement(_ImagePreviewer.ImagePreviewer, {
+    activeImage: activeImage,
+    imagesArray: productData === null || productData === void 0 ? void 0 : (_productData$services2 = productData.services) === null || _productData$services2 === void 0 ? void 0 : _productData$services2.Imágenes,
+    setActiveImage: setActiveImage
+  }), /*#__PURE__*/React.createElement(_ImageDataTable.ImageDataTable, {
+    imageData: activeImage === null || activeImage === void 0 ? void 0 : activeImage.data,
+    activeImage: activeImage
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "product-information"
+  }, /*#__PURE__*/React.createElement(_FullProductNameHeader.FullProductNameHeader, {
+    headerData: productData.headerData
+  }), /*#__PURE__*/React.createElement(_FullTabsMenu.FullTabsMenu, {
+    tabsSections: tabsSections,
+    status: productData.status,
+    profileImage: productData.asigned,
+    setActiveTab: setActiveTab,
+    setImageLayout: setImageLayout
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "services-information-container " + (imageLayout && activeTab === "Imágenes" && "image-services")
+  }, activeTab !== "Imágenes" ? productData === null || productData === void 0 ? void 0 : (_productData$services3 = productData.services[activeTab]) === null || _productData$services3 === void 0 ? void 0 : _productData$services3.map(function (_ref3, index) {
+    var inputGroup = _ref3.inputGroup;
+    return /*#__PURE__*/React.createElement(_InputGroup.InputGroup, {
+      key: index,
+      inputGroup: inputGroup,
+      activeSection: activeTab
+    });
+  }) : productData === null || productData === void 0 ? void 0 : (_productData$services4 = productData.services["Imágenes"]) === null || _productData$services4 === void 0 ? void 0 : _productData$services4.map(function (image, index) {
+    return /*#__PURE__*/React.createElement(_GalleryElement.GalleryElement, {
+      key: index,
+      image: image,
+      gridLayout: imageLayout,
+      id: "gallery-element-" + index
+    });
+  })))));
+};
+
+exports.RetailerProductEdition = RetailerProductEdition;

package/dist/components/pages/RetailerProductEdition/styles.js

@@ -0,0 +1,21 @@
+"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 _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 7px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        overflow: auto;\n      }\n\n      .image-services {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 179px);\n        column-gap: 15px;\n        row-gap: 15px;\n      }\n    }\n  }\n"])), function (_ref) {
+  var headerTop = _ref.headerTop;
+  return headerTop;
+});
+
+exports.Container = Container;

package/dist/global-files/variables.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalStatus = exports.GlobalColors = exports.FontFamily = void 0;
+var GlobalColors = {
+  s1: "#FAFAFA",
+  s2: "#F0EEF2",
+  s3: "#D4D1D7",
+  s4: "#817393",
+  s5: "#503D66",
+  original_magenta: "#B12D84",
+  secondary_magenta: "#BA0070",
+  magenta_s2: "#E33AA9",
+  original_purpura: "#603888",
+  in_progress: "#ED9A4D",
+  deep_gray: "#281F33",
+  reception: "#E57432",
+  finished: "#18A0FB",
+  exported: "#71DE56",
+  white: "#FFFFFF"
+};
+exports.GlobalColors = GlobalColors;
+var FontFamily = {
+  AvenirNext: "Avenir Next",
+  Lato: "Lato",
+  Raleway: "Raleway",
+  Raleway_500: "Raleway-500",
+  Raleway_600: "Raleway-600",
+  Raleway_700: "Raleway-700",
+  Raleway_800: "Raleway-800",
+  Raleway_900: "Raleway-900"
+};
+exports.FontFamily = FontFamily;
+var GlobalStatus = ["-", "As", "Pr", "Rr", "P", "AA", "AP", "Ex", "DDI", "Dat", "Dsc", "Imgs", "GLD", "TAB", "Pt"];
+exports.GlobalStatus = GlobalStatus;