contentoh-components-library 21.4.69 → 21.4.70

package/dist/components/molecules/Phase/Phase.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PhaseDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/Phase",
+  component: _index.Phase,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Phase, (0, _objectSpread2.default)({}, args));
+};
+
+var PhaseDefault = Template.bind({});
+exports.PhaseDefault = PhaseDefault;
+PhaseDefault.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString()
+};

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

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Phase = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles");
+
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+
+var _material = require("@mui/material");
+
+var _Select = _interopRequireDefault(require("../../atoms/Select"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var Phase = function Phase(_ref) {
+  var id = _ref.id,
+      grupos = _ref.grupos,
+      phases = _ref.phases;
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selectedValue = _useState2[0],
+      setSelectedValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      chips = _useState4[0],
+      setChips = _useState4[1];
+
+  var onAdd = function onAdd() {
+    if (selectedValue) {
+      setChips(function (prevChips) {
+        return [].concat((0, _toConsumableArray2.default)(prevChips), [selectedValue]);
+      });
+      setSelectedValue("");
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "header-phase",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+        children: ["Fase ", id]
+      }), id === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "text-phase",
+        children: "Al rechazar en esta fase enviar a proveedor"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "phase-sel",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "text-phase",
+          children: "Al rechazar en esta fase enviar a "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+          width: "100px",
+          valueSelected: selectedValue,
+          placeholder: "Fase",
+          options: Array.from({
+            length: phases.length
+          }, function (_, i) {
+            return {
+              value: "".concat(i + 1),
+              name: "Fase ".concat(i + 1)
+            };
+          }),
+          onChange: function onChange(e) {
+            setSelectedValue(e.target.value);
+          }
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attributes-container",
+      children: [grupos.map(function (grupo, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+          label: grupo,
+          disabled: false
+        }, index);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        onClick: onAdd,
+        variant: "outlined",
+        className: "button-circle",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerIcon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "iconos-out iconos-grises",
+            children: "add"
+          })
+        })
+      })]
+    })]
+  });
+};
+
+exports.Phase = Phase;

package/dist/components/molecules/Phase/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerIcon = 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, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction:column;\n  gap:10px;\n  align-items: center;\n  border-radius:10px;\n  border:1px solid ", ";\n  padding:10px 15px;\n  font-family:", ", sans-serif;\n  font-size:17px;\n\n .header-phase{\n  display:flex;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  h2{\n    font-family:", ", sans-serif;\n    font-size:17px;\n  }\n  p{\n    font-family:", ", sans-serif;\n    font-size:12px;\n  }\n }\n .attributes-container{\n  display: flex;\n  align-self: flex-start;\n  flex-wrap: wrap;\n  gap: 10px;\n }\n .phase-sel{\n  display: flex;\n  align-items: center;\n  gap: 10px;\n }\n .button-circle{\n  width:30px;\n  height:30px;\n  padding:2px;\n  border-radius:100%;\n  min-width:30px;\n  border: 1px solid ", ";\n}\n.button-circle:hover {\n  border: 1px solid ", ";\n}\n.text-phase{\n  font-family:", ", sans-serif;\n  font-size:12px;\n  color:", ";\n}\n"])), _variables.GlobalColors.gray_light, _variables.FontFamily.Roboto, _variables.GlobalColors.gray_light, _variables.FontFamily.Roboto, _variables.FontFamily.Roboto, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Roboto, _variables.GlobalColors.gray);
+
+exports.Container = Container;
+
+var ContainerIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\ncursor: pointer;\n@font-face {\n  font-family: \"Material Symbols Outlined\";\n  font-style: normal;\n  font-weight: 100 700;\n  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)\n    format(\"woff2\");\n}\n.iconos-out {\n  font-family: \"Material Symbols Outlined\";\n  font-size: 20px;\n  //line-height: 1;\n  margin-top: 10px;\n}\n.iconos-out {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  #B64545;\n}\n.iconos-grises {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  ", ";\n}"])), _variables.GlobalColors.magenta_s2);
+
+exports.ContainerIcon = ContainerIcon;

package/dist/components/molecules/ProductNameHeaderv2/ProductNameHeaderv2.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductNameHeaderv2Default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ProductNameHeaderv2",
+  component: _index.ProductNameHeaderv2,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductNameHeaderv2, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductNameHeaderv2Default = Template.bind({});
+exports.ProductNameHeaderv2Default = ProductNameHeaderv2Default;
+ProductNameHeaderv2Default.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString()
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductNameHeaderv2 = void 0;
+
+var _styles = require("./styles");
+
+var _ScreenHeaderv = require("../../atoms/ScreenHeaderv2");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductNameHeaderv2 = function ProductNameHeaderv2(_ref) {
+  var productName = _ref.productName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeaderv.ScreenHeaderv2, {
+      headerType: "product-name-header",
+      text: productName
+    })
+  });
+};
+
+exports.ProductNameHeaderv2 = ProductNameHeaderv2;

package/dist/components/molecules/ProductNameHeaderv2/styles.js

@@ -0,0 +1,18 @@
+"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  align-items: center;\n\n  * + * {\n    margin-left: 10px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/ProductSkuStatus/ProductSkuStatus.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductSkuStatusDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ProductSkuStatus",
+  component: _index.ProductSkuStatus,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductSkuStatus, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductSkuStatusDefault = Template.bind({});
+exports.ProductSkuStatusDefault = ProductSkuStatusDefault;
+ProductSkuStatusDefault.args = {
+  statusType: "AP",
+  percent: 84,
+  backgroundColor: "s2",
+  priority: "no priority",
+  percentRequired: 100 // date: new Date().toLocaleDateString(),
+
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductSkuStatus = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/Status/index");
+
+var _Progress = require("../../atoms/Progress");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductSkuStatus = function ProductSkuStatus(_ref) {
+  var statusType = _ref.statusType,
+      percentRequired = _ref.percentRequired,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      showShield = _ref.showShield;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [statusType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Status, {
+      statusType: statusType
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.Progress, {
+      percent: percentRequired,
+      progressBarType: statusType,
+      percentRequired: percentRequired,
+      version: version,
+      setShowVersionSelector: setShowVersionSelector,
+      showShield: showShield
+    })]
+  });
+};
+
+exports.ProductSkuStatus = ProductSkuStatus;

package/dist/components/molecules/ProductSkuStatus/styles.js

@@ -0,0 +1,18 @@
+"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  align-items: center;\n  gap:10px;\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/RetailerSelectorv2/RetailerSelectorv2.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RetailerSelectorDefault = 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/molecules/RetailerSelectorv2",
+  component: _index.RetailerSelectorv2
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RetailerSelectorv2, (0, _objectSpread2.default)({}, args));
+};
+
+var RetailerSelectorDefault = Template.bind({});
+exports.RetailerSelectorDefault = RetailerSelectorDefault;
+RetailerSelectorDefault.args = {
+  retailers: [{
+    id: 2,
+    name: "Walmart Mercancías Generales",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 3,
+    name: "Sam´s Club",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 14,
+    name: "Maskota y Petsy",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }]
+};

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

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetailerSelectorv2 = 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 _Avatar = require("../../atoms/Avatar");
+
+var _react = require("react");
+
+var _AsignationOption = require("../../atoms/AsignationOption");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RetailerSelectorv2 = function RetailerSelectorv2(_ref) {
+  var retailers = _ref.retailers,
+      activeRetailer = _ref.activeRetailer,
+      setActiveRetailer = _ref.setActiveRetailer,
+      showStatus = _ref.showStatus;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      retailersPanel = _useState2[0],
+      setRetailersPanel = _useState2[1];
+
+  var closeRetailersPanel = function closeRetailersPanel(e) {
+    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
+      document.removeEventListener("click", closeRetailersPanel, false);
+      setRetailersPanel(false);
+    }
+  };
+
+  var getRetailerImage = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              activeRetailer.image = "https://content-management-images.s3.amazonaws.com/retailers/".concat(activeRetailer.id, ".png");
+              retailers.forEach(function (retailer) {
+                return retailer.image = "https://content-management-images.s3.amazonaws.com/retailers/".concat(retailer.id, ".png");
+              });
+
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function getRetailerImage() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    if (retailersPanel) {
+      document.addEventListener("click", closeRetailersPanel, false);
+    }
+  }, [retailersPanel]);
+  (0, _react.useEffect)(function () {
+    getRetailerImage();
+  }, [activeRetailer]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: "retailers-assignation",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      image: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.image,
+      altText: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.name,
+      imageType: "medium-image",
+      onClick: function onClick() {
+        (retailers === null || retailers === void 0 ? void 0 : retailers.length) > 0 && setRetailersPanel(!retailersPanel);
+        if (retailersPanel) document.removeEventListener("click", closeRetailersPanel, false);
+      }
+    }), retailersPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "retailers-panel",
+      children: retailers.map(function (retailer, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsignationOption.AsignationOption, {
+          profileImage: retailer === null || retailer === void 0 ? void 0 : retailer.image,
+          imageType: "medium-image",
+          asignationType: null,
+          name: retailer === null || retailer === void 0 ? void 0 : retailer.name,
+          team: retailer === null || retailer === void 0 ? void 0 : retailer.team,
+          services: retailer === null || retailer === void 0 ? void 0 : retailer.services,
+          onClick: function onClick() {
+            setActiveRetailer(retailer);
+            document.removeEventListener("click", closeRetailersPanel, false);
+            setRetailersPanel(false);
+          },
+          active: retailer.id === activeRetailer.id,
+          showStatus: showStatus
+        }, "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name));
+      })
+    })]
+  });
+};
+
+exports.RetailerSelectorv2 = RetailerSelectorv2;

package/dist/components/molecules/RetailerSelectorv2/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  position: relative;\n  cursor: pointer;\n  display: flex;\n\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
+
+exports.Container = Container;