contentoh-components-library 21.6.48 → 21.6.50

package/.claude/launch.json

@@ -0,0 +1,14 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "start",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": [
+        "run",
+        "start"
+      ],
+      "port": 3000
+    }
+  ]
+}

package/.env.test

@@ -75,3 +75,4 @@ REACT_APP_ENVIRONMENT=test
 REACT_APP_REGION=us-east-1
 REACT_APP_VARIANTS_ENDPOINT=https://7o2hp8msfl.execute-api.us-east-1.amazonaws.com/test/variants
 REACT_APP_NEW_ARTICLES_ENDPOINT=https://7o2hp8msfl.execute-api.us-east-1.amazonaws.com/test/new-articles
+REACT_APP_ASSETS_PRESIGN_ENDPOINT=https://7o2hp8msfl.execute-api.us-east-1.amazonaws.com/test/articles-assets/presign

package/dist/ai/prompts/attribute.prompt.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateAttributePrompt = void 0;
+
+var generateAttributePrompt = function generateAttributePrompt(_ref) {
+  var _ref$upc = _ref.upc,
+      upc = _ref$upc === void 0 ? 0 : _ref$upc,
+      _ref$inputName = _ref.inputName,
+      inputName = _ref$inputName === void 0 ? "" : _ref$inputName,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? "" : _ref$description,
+      _ref$currentValue = _ref.currentValue,
+      currentValue = _ref$currentValue === void 0 ? "" : _ref$currentValue,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$category = _ref.category,
+      category = _ref$category === void 0 ? "" : _ref$category,
+      _ref$retailer = _ref.retailer,
+      retailer = _ref$retailer === void 0 ? "" : _ref$retailer,
+      _ref$maxChar = _ref.maxChar,
+      maxChar = _ref$maxChar === void 0 ? 100 : _ref$maxChar;
+  return "\n    Eres un especialista en la generaci\xF3n, optimizaci\xF3n, mejora y captura de atributos de la ficha t\xE9cnica de productos para cat\xE1logos en l\xEDnea.\n    Tu tarea es crear atributos claros, concisos y relevantes que resalten las caracter\xEDsticas y beneficios del producto, utilizando un lenguaje preciso y adaptado al p\xFAblico objetivo.\n\n    Datos del producto:\n    - UPC: ".concat(upc, "\n    - Nombre del producto: ").concat(name, "\n    - Categor\xEDa: ").concat(category, "\n    - Nombre del atributo: ").concat(inputName, "\n    - Requerimiento del atributo: ").concat(description, "\n    - Valor actual del atributo: ").concat(currentValue, "\n    - Cadena comercial dirigida: ").concat(retailer, "\n\n    Instrucciones:\n    1. Analiza el nombre del producto y la categor\xEDa para entender su contexto.\n    2. Analiza la descripci\xF3n del atributo actual del producto.\n    3. Identifica la informaci\xF3n clave del atributo que sean relevantes y \xFAtiles para los clientes potenciales.\n    4. Genera una lista de atributos que:\n      - Cumplan con la descripcion del atributo proporcionada, no inventes datos o cambies el contexto de lo que pide la descripci\xF3n del atributo.\n      - Sean claros y f\xE1ciles de entender.\n      - Destaquen las caracter\xEDsticas y beneficios clave del producto.\n      - Utilicen un lenguaje preciso y adaptado al p\xFAblico objetivo.\n      - Mantengan un tono profesional y coherente con la marca.\n      - Aumenten la probabilidad de compra del producto.\n      - No excedan los ").concat(maxChar, " caracteres en total.\n      - Si existe ejemplo en la descripci\xF3n del atributo, sigue el mismo formato para generar los atributos.\n    5. No incluyas emojis ni signos especiales (*/+\xB4!\xA1?\xBF)\n    6. No repitas el encabezado: ").concat(inputName, "\n    7. No incluyas call to action, ejemplo: \"!Compra ya!\" \"!Da click!\" \"!Apurate!\"\n\n    Aseg\xFArate de que los atributos generados cumplan con todas las instrucciones proporcionadas.\n\n    No lo olvides, el objetivo principal es mejorar la captura de atributos para la ficha t\xE9cnica del producto para atraer, convencer y dar la informaci\xF3n completa a los clientes potenciales que puedan realizar una compra.\n  ");
+};
+
+exports.generateAttributePrompt = generateAttributePrompt;

package/dist/ai/prompts/description.prompt.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateDescriptionPrompt = void 0;
+
+// Cadena y Proveedor
+
+/**
+ * La cadena ${cadena} tiene estas reglas ${reglas} para el tipo de descripcion que es: ${descripcion}
+*/
+var generateDescriptionPrompt = function generateDescriptionPrompt(_ref) {
+  var _ref$upc = _ref.upc,
+      upc = _ref$upc === void 0 ? 0 : _ref$upc,
+      _ref$inputName = _ref.inputName,
+      inputName = _ref$inputName === void 0 ? "" : _ref$inputName,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? "" : _ref$description,
+      _ref$currentValue = _ref.currentValue,
+      currentValue = _ref$currentValue === void 0 ? "" : _ref$currentValue,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$category = _ref.category,
+      category = _ref$category === void 0 ? "" : _ref$category,
+      _ref$retailer = _ref.retailer,
+      retailer = _ref$retailer === void 0 ? "" : _ref$retailer,
+      _ref$maxChar = _ref.maxChar,
+      maxChar = _ref$maxChar === void 0 ? 100 : _ref$maxChar;
+  return "\n    Eres un especialista en la generaci\xF3n, optimizaci\xF3n y mejora de descripciones de productos para cat\xE1logos en l\xEDnea.\n    Tu tarea es crear descripciones claras, concisas y atractivas que resalten las caracter\xEDsticas y beneficios del producto, utilizando un lenguaje persuasivo y adaptado al p\xFAblico objetivo.\n\n    Datos del producto:\n    - UPC: ".concat(upc, "\n    - Nombre del producto: ").concat(name, "\n    - Categor\xEDa: ").concat(category, "\n    - Encabezado de la descripci\xF3n: ").concat(inputName, "\n    - Requerimiento de la descripcion: ").concat(description, "\n    - Descripcion actual del producto: ").concat(currentValue, "\n    - Cadena comercial dirigida: ").concat(retailer, "\n\n    Instrucciones:\n    1. Analiza la descripci\xF3n actual del producto en caso de tenerla.\n    2. Identifica \xE1reas de mejora, como claridad, concisi\xF3n, atractivo y relevancia.\n    3. Genera una descripci\xF3n que:\n      - Sea clara y f\xE1cil de entender.\n      - Destaque las caracter\xEDsticas y beneficios clave del producto.\n      - Utilice un lenguaje persuasivo y adaptado al p\xFAblico objetivo.\n      - Mantenga un tono profesional y coherente con la marca.\n      - No exceda los ").concat(maxChar, " caracteres.\n      - Aumente la probabilidad de compra del producto, utilizando persuasi\xF3n en la necesidad de compra del producto.\n    4. No incluyas emojis ni signos especiales (*/+\xB4!\xA1?\xBF)\n    5. No repitas el encabezado: ").concat(inputName, "\n    6. No incluyas call to action, ejemplo: \"!Compra ya!\" \"!Da click!\" \"!Apurate!\"\n\n\n    Aseg\xFArate de que la descripci\xF3n generada cumpla con todas las instrucciones proporcionadas.\n\n    No lo olvides, el objetivo principal es mejorar la descripci\xF3n del producto para atraer y convencer a los clientes potenciales de realizar una compra. Eres un experto en marketing y redacci\xF3n persuasiva.\n\n    Nota: No estas hablando con los clientes, estas descripciones ir\xE1n en la tienda de E-commerce de la cadena comercial. No realices saludos, despedidas, sugerencias\n  ");
+};
+
+exports.generateDescriptionPrompt = generateDescriptionPrompt;

package/dist/ai/schemas/attribute.schema.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var schema = {
+  type: "object",
+  properties: {
+    results: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string"
+          },
+          value: {
+            type: "string"
+          }
+        }
+      },
+      maxItems: 3
+    },
+    compliance_warnings: {
+      type: "array",
+      items: {
+        type: "string"
+      }
+    }
+  },
+  required: ["results"]
+};
+var _default = schema;
+exports.default = _default;

package/dist/ai/schemas/description.schema.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var schema = {
+  type: "object",
+  properties: {
+    results: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          value: {
+            type: "string"
+          }
+        }
+      },
+      minItems: 1,
+      maxItems: 3
+    }
+  },
+  required: ["results"]
+};
+var _default = schema;
+exports.default = _default;

package/dist/components/atoms/AssetPreview/AssetPreview.stories.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VideoConControles = exports.Video360 = exports.SinFuente = exports.Pdf = exports.Gif360 = exports.Bandeja = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _index = require("./index");
+
+var _assets = require("../../../global-files/digital-assets/assets.adapter");
+
+var _assets2 = require("../../../global-files/digital-assets/assets.mock");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Los activos del mock apuntan a claves de S3 que no existen todavía. Para poder
+  ver el componente antes de que haya backend, se sustituyen las URLs por
+  archivos públicos de ejemplo; el resto del objeto (tipo, nombre, peso,
+  duración) es el que devolvería el adaptador.
+*/
+var SAMPLES = {
+  mp4: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+  gif: "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif"
+};
+
+var _fromBackendList$map = (0, _assets.fromBackendList)(_assets2.backendAssetsMock).map(function (asset) {
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, asset), {}, {
+    url: asset.ext === "mp4" ? SAMPLES.mp4 : asset.ext === "gif" ? SAMPLES.gif : "",
+    poster: ""
+  });
+}),
+    _fromBackendList$map2 = (0, _slicedToArray2.default)(_fromBackendList$map, 4),
+    giro360 = _fromBackendList$map2[0],
+    gif360 = _fromBackendList$map2[1],
+    video = _fromBackendList$map2[2],
+    pdf = _fromBackendList$map2[3];
+
+var _default = {
+  title: "Components/atoms/AssetPreview",
+  component: _index.AssetPreview,
+  argTypes: {
+    size: {
+      options: ["catalogue-image-small-size", "catalogue-image-big-size", "carousel-image", "catalogue-modal-image", "main-image"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AssetPreview, (0, _objectSpread2.default)({}, args));
+};
+
+var Video360 = Template.bind({});
+exports.Video360 = Video360;
+Video360.args = {
+  asset: giro360,
+  size: "catalogue-image-big-size"
+};
+var Gif360 = Template.bind({});
+exports.Gif360 = Gif360;
+Gif360.args = {
+  asset: gif360,
+  size: "catalogue-image-big-size"
+};
+var VideoConControles = Template.bind({});
+exports.VideoConControles = VideoConControles;
+VideoConControles.args = {
+  asset: video,
+  size: "main-image",
+  controls: true
+};
+var Pdf = Template.bind({});
+exports.Pdf = Pdf;
+Pdf.args = {
+  asset: pdf,
+  size: "catalogue-image-big-size"
+};
+/** Un activo sin URL todavía —recién soltado en la bandeja— no debe romper. */
+
+var SinFuente = Template.bind({});
+exports.SinFuente = SinFuente;
+SinFuente.args = {
+  asset: {
+    name: "manual_sin_subir.pdf",
+    ext: "pdf",
+    assetType: "pdf"
+  },
+  size: "catalogue-image-big-size"
+};
+/** Cómo se ve la bandeja completa, que es el uso real. */
+
+var Bandeja = function Bandeja() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: "flex",
+      gap: 12,
+      flexWrap: "wrap"
+    },
+    children: [giro360, gif360, video, pdf].map(function (asset) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AssetPreview, {
+        asset: asset,
+        size: "catalogue-image-big-size"
+      }, asset.id);
+    })
+  });
+};
+
+exports.Bandeja = Bandeja;

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

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AssetPreview = void 0;
+
+var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
+
+var _styles = require("./styles");
+
+var _IconFile = require("../IconFile");
+
+var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
+
+var _defaultProductImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProductImage.png"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var PlayBadge = function PlayBadge() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "play-badge",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      viewBox: "0 0 24 24",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        cx: "12",
+        cy: "12",
+        r: "11"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polygon", {
+        points: "9.5,7.5 17,12 9.5,16.5"
+      })]
+    })
+  });
+};
+/**
+ * Previsualización de un activo digital o de una imagen de producto.
+ *
+ * Acepta el modelo de `assets.adapter` y también un objeto suelto
+ * (`{ url, mime, ext, name }`), para poder usarse donde todavía no hay activos
+ * adaptados.
+ *
+ * `controls` distingue los dos usos: en la bandeja se quieren miniaturas
+ * quietas; en el visor grande, un reproductor.
+ */
+
+
+var AssetPreview = function AssetPreview(_ref) {
+  var _ref$asset = _ref.asset,
+      asset = _ref$asset === void 0 ? {} : _ref$asset,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "catalogue-image-small-size" : _ref$size,
+      _ref$controls = _ref.controls,
+      controls = _ref$controls === void 0 ? false : _ref$controls,
+      _ref$showBadge = _ref.showBadge,
+      showBadge = _ref$showBadge === void 0 ? true : _ref$showBadge,
+      _ref$showDuration = _ref.showDuration,
+      showDuration = _ref$showDuration === void 0 ? true : _ref$showDuration,
+      onClick = _ref.onClick,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? "" : _ref$className;
+  var url = asset.url,
+      src = asset.src,
+      poster = asset.poster,
+      mime = asset.mime,
+      ext = asset.ext,
+      name = asset.name,
+      assetType = asset.assetType,
+      duration = asset.duration;
+  var source = url || src || "";
+  var kind = (0, _assetTypes.resolvePreviewKind)({
+    mime: mime,
+    ext: ext,
+    name: name
+  });
+  var extension = (ext || (0, _assetTypes.getExtension)(name) || "").toLowerCase();
+  var label = assetType ? (0, _assetTypes.getAssetType)(assetType).label : extension.toUpperCase();
+  var badge = showBadge && label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "asset-badge",
+    children: label
+  }) : null;
+  var durationTag = showDuration && duration ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "asset-duration",
+    children: (0, _assetTypes.formatDuration)(duration)
+  }) : null;
+
+  var body = function body() {
+    if (!source) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "asset-fallback",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconFile.IconFile, {
+          ext: extension,
+          size: "34"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          title: name,
+          children: name
+        })]
+      });
+    }
+
+    if (kind === _assetTypes.ASSET_PREVIEW.VIDEO) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+          // `#t=0.5` pide al navegador el fotograma del medio segundo en vez
+          // de una pantalla negra. Resuelve la miniatura sin descargar el
+          // archivo entero ni convertirlo a base64, que es lo que hacía el
+          // parche que este componente reemplaza.
+          src: poster ? source : "".concat(source, "#t=0.5"),
+          poster: poster || undefined,
+          controls: controls,
+          muted: !controls,
+          playsInline: true,
+          preload: "metadata"
+        }), !controls && /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayBadge, {})]
+      });
+    }
+
+    if (kind === _assetTypes.ASSET_PREVIEW.IMAGE) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
+        src: source,
+        fallbackImage: _defaultProductImage.default,
+        alt: name,
+        onClick: onClick
+      });
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "asset-fallback",
+      onClick: onClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconFile.IconFile, {
+        ext: extension,
+        size: "34"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        title: name,
+        children: name
+      })]
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: "".concat(size, " ").concat(className).trim(),
+    onClick: controls ? undefined : onClick,
+    $clickable: Boolean(onClick) && !controls,
+    children: [body(), badge, durationTag]
+  });
+};
+
+exports.AssetPreview = AssetPreview;

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

@@ -0,0 +1,28 @@
+"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;
+
+/*
+  Los tamaños replican los de `ProductImage` con los mismos nombres de clase,
+  para que el componente entre donde ya había una imagen sin tocar el layout
+  de la bandeja.
+*/
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  cursor: ", ";\n\n  img,\n  video {\n    object-fit: contain;\n    background: ", ";\n  }\n\n  .asset-fallback {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 6px;\n    width: 100%;\n    height: 100%;\n    padding: 8px;\n    box-sizing: border-box;\n    background: ", ";\n    border-radius: 6px;\n\n    p {\n      margin: 0;\n      font-family: ", ";\n      font-size: 10px;\n      color: ", ";\n      text-align: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      word-break: break-all;\n    }\n  }\n\n  /* Solo aparece cuando el video se muestra sin controles. */\n  .play-badge {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 32px;\n    height: 32px;\n    pointer-events: none;\n\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n\n    circle {\n      fill: rgba(0, 0, 0, 0.55);\n    }\n\n    polygon {\n      fill: ", ";\n    }\n  }\n\n  &:hover .play-badge circle {\n    fill: rgba(0, 0, 0, 0.75);\n  }\n\n  .asset-badge {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    padding: 1px 6px;\n    border-radius: 10px;\n    background: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 9px;\n    line-height: 14px;\n    letter-spacing: 0.02em;\n    pointer-events: none;\n  }\n\n  .asset-duration {\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n    padding: 1px 5px;\n    border-radius: 4px;\n    background: rgba(38, 38, 38, 0.75);\n    color: ", ";\n    font-family: ", ";\n    font-size: 9px;\n    line-height: 14px;\n    pointer-events: none;\n  }\n\n  &.carousel-image {\n    .play-badge {\n      width: 22px;\n      height: 22px;\n    }\n\n    img,\n    video,\n    .asset-fallback {\n      width: 85px;\n      height: 55px;\n      cursor: pointer;\n    }\n\n    & + * {\n      margin-left: 1px;\n    }\n  }\n\n  &.main-image {\n    img,\n    video,\n    .asset-fallback {\n      width: 340px;\n      height: 295px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    img,\n    video,\n    .asset-fallback {\n      width: 179px;\n      height: 179px;\n    }\n  }\n\n  &.catalogue-image-small-size {\n    img,\n    video,\n    .asset-fallback {\n      width: 60px;\n      height: 60px;\n    }\n\n    .asset-badge {\n      font-size: 8px;\n      padding: 0 4px;\n    }\n\n    /* En 60px un badge de 32 tapa el fotograma completo. */\n    .play-badge {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.catalogue-modal-image {\n    flex: 1 0 50%;\n    cursor: pointer;\n\n    img,\n    video,\n    .asset-fallback {\n      width: 168px;\n      height: 108px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 710px;\n    height: 710px;\n\n    img,\n    video,\n    .asset-fallback {\n      width: 710px;\n      height: 710px;\n    }\n  }\n"])), function (_ref) {
+  var $clickable = _ref.$clickable;
+  return $clickable ? "pointer" : "default";
+}, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light, _variables.FontFamily.Raleway, _variables.GlobalColors.gray, _variables.GlobalColors.white, _variables.GlobalColors.color_purple, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600, _variables.GlobalColors.white, _variables.FontFamily.Raleway);
+
+exports.Container = Container;

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

@@ -69,14 +69,85 @@ var IconFile = function IconFile(props) {
       type: "csv"
     },
     // file image
-    svg: {
+    gif: {
       icon: _freeSolidSvgIcons.faFileImage,
       type: "image"
     },
-    gif: {
+    jpg: {
+      icon: _freeSolidSvgIcons.faFileImage,
+      type: "image"
+    },
+    jpeg: {
+      icon: _freeSolidSvgIcons.faFileImage,
+      type: "image"
+    },
+    png: {
       icon: _freeSolidSvgIcons.faFileImage,
       type: "image"
     },
+    webp: {
+      icon: _freeSolidSvgIcons.faFileImage,
+      type: "image"
+    },
+    // archivos de diseño editables: no se pueden previsualizar en el navegador,
+    // así que el icono es lo único que distingue uno de otro en la bandeja.
+    psd: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    psb: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    ai: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    eps: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    indd: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    idml: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    sketch: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    fig: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    xd: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    afphoto: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    afdesign: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    svg: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    // proyectos de animación y edición de video
+    aep: {
+      icon: _freeSolidSvgIcons.faFilm,
+      type: "motion"
+    },
+    prproj: {
+      icon: _freeSolidSvgIcons.faFilm,
+      type: "motion"
+    },
     // file pdf
     pdf: {
       icon: _freeSolidSvgIcons.faFilePdf,
@@ -132,6 +203,10 @@ var IconFile = function IconFile(props) {
       icon: _freeSolidSvgIcons.faFileZipper,
       type: "zip"
     },
+    "7z": {
+      icon: _freeSolidSvgIcons.faFileZipper,
+      type: "zip"
+    },
     // file code
     xml: {
       icon: _freeSolidSvgIcons.faFileCode,
@@ -198,6 +273,14 @@ var IconFile = function IconFile(props) {
       icon: _freeSolidSvgIcons.faFileVideo,
       type: "video"
     },
+    mov: {
+      icon: _freeSolidSvgIcons.faFileVideo,
+      type: "video"
+    },
+    webm: {
+      icon: _freeSolidSvgIcons.faFileVideo,
+      type: "video"
+    },
     mpeg: {
       icon: _freeSolidSvgIcons.faFileVideo,
       type: "video"

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  min-width: min-content;\n  min-height: min-content;\n  overflow: hidden;\n  cursor: default;\n  display: grid;\n  place-items: center;\n  padding: 0px;\n  border-radius: ", ";\n  border: none;\n\n  // colores de acuerdo al tipo de icono\n  &.icon-word .icon {\n    color: #1f3780;\n    border-color: #1f3780;\n  }\n  &.icon-excel .icon {\n    color: #2d5639;\n    border-color: #2d5639;\n  }\n  &.icon-csv .icon {\n    color: #6b8e73;\n    border-color: #6b8e73;\n  }\n  &.icon-image .icon {\n    color: #ca7f4d;\n    border-color: #ca7f4d;\n  }\n  &.icon-pdf .icon {\n    color: #951a1a;\n    border-color: #951a1a;\n  }\n  &.icon-powerPoint .icon {\n    color: #ba4f19;\n    border-color: #ba4f19;\n  }\n  &.icon-zip .icon {\n    color: #b8950c;\n    border-color: #b8950c;\n  }\n  &.icon-code .icon {\n    color: #1c778e;\n    border-color: #1c778e;\n  }\n  &.icon-video .icon {\n    color: #a15bb1;\n    border-color: #a15bb1;\n  }\n  &.icon-audio .icon {\n    color: #3090e9;\n    border-color: #3090e9;\n  }\n  &.icon-default .icon {\n    color: #5e6265;\n    border-color: #5e6265;\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  min-width: min-content;\n  min-height: min-content;\n  overflow: hidden;\n  cursor: default;\n  display: grid;\n  place-items: center;\n  padding: 0px;\n  border-radius: ", ";\n  border: none;\n\n  // colores de acuerdo al tipo de icono\n  &.icon-word .icon {\n    color: #1f3780;\n    border-color: #1f3780;\n  }\n  &.icon-excel .icon {\n    color: #2d5639;\n    border-color: #2d5639;\n  }\n  &.icon-csv .icon {\n    color: #6b8e73;\n    border-color: #6b8e73;\n  }\n  &.icon-image .icon {\n    color: #ca7f4d;\n    border-color: #ca7f4d;\n  }\n  &.icon-pdf .icon {\n    color: #951a1a;\n    border-color: #951a1a;\n  }\n  &.icon-powerPoint .icon {\n    color: #ba4f19;\n    border-color: #ba4f19;\n  }\n  &.icon-zip .icon {\n    color: #b8950c;\n    border-color: #b8950c;\n  }\n  &.icon-code .icon {\n    color: #1c778e;\n    border-color: #1c778e;\n  }\n  &.icon-design .icon {\n    color: #2a5cb8;\n    border-color: #2a5cb8;\n  }\n  &.icon-motion .icon {\n    color: #6d3fc0;\n    border-color: #6d3fc0;\n  }\n  &.icon-video .icon {\n    color: #a15bb1;\n    border-color: #a15bb1;\n  }\n  &.icon-audio .icon {\n    color: #3090e9;\n    border-color: #3090e9;\n  }\n  &.icon-default .icon {\n    color: #5e6265;\n    border-color: #5e6265;\n  }\n"])), function (_ref) {
   var borderType = _ref.borderType;
   return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "6px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "circle" ? "50%" : "0px";
 });

package/dist/components/atoms/ProductImage/ProductImage.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Template = void 0;
+exports.default = exports.VideoReproductor = exports.VideoMiniaturas = exports.Template = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -36,4 +36,72 @@ var ProductImageDefault = Template.bind({});
 ProductImageDefault.args = {
   imageType: "main-image",
   altText: "default image"
-};
+};
+/*
+  Las escalas de video, lado a lado. Las cuatro primeras son miniaturas: sin
+  controles, con su duración y un botón de play, y todo el recuadro clicable.
+  Las dos últimas son reproductores de verdad.
+*/
+
+var VIDEO = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+
+var Escala = function Escala(_ref) {
+  var imageType = _ref.imageType;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("figure", {
+    style: {
+      margin: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ProductImage, {
+      img: VIDEO,
+      ext: "mp4",
+      imageType: imageType,
+      altText: "video de producto",
+      onClick: function onClick() {
+        return console.log("clic en", imageType);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("figcaption", {
+      style: {
+        fontFamily: "Lato",
+        fontSize: 11,
+        marginTop: 4
+      },
+      children: imageType
+    })]
+  });
+};
+
+var VideoMiniaturas = function VideoMiniaturas() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: "flex",
+      gap: 24,
+      alignItems: "flex-start"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "carousel-image"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "catalogue-image-small-size"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "catalogue-modal-image"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "catalogue-image-big-size"
+    })]
+  });
+};
+
+exports.VideoMiniaturas = VideoMiniaturas;
+
+var VideoReproductor = function VideoReproductor() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: "flex",
+      gap: 24,
+      alignItems: "flex-start"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "main-image"
+    })
+  });
+};
+
+exports.VideoReproductor = VideoReproductor;