contentoh-components-library 21.6.55 → 21.6.56

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GalleryHeader = void 0;
+exports.GalleryHeader = exports.GALLERY_COLUMNS = void 0;
 
 var _styles = require("./styles");
 
@@ -11,13 +11,97 @@ var _CheckBox = require("../../atoms/CheckBox");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+/*
+  Las columnas de la bandeja dependen de qué se está listando: un PDF no tiene
+  "tipo de toma" ni alto por ancho, y una foto no tiene "tipo de activo".
+  Estaban escritas a mano en el marcado, así que la única forma de cambiarlas
+  era duplicar el componente.
+
+  El preset `image` reproduce exactamente las columnas y clases de antes, para
+  que la bandeja de imágenes se vea idéntica sin que nadie tenga que pasar nada.
+*/
+var GALLERY_COLUMNS = {
+  image: {
+    template: "0.1fr 1fr 1fr 1fr 1fr 1fr",
+    columns: [{
+      key: "preview",
+      label: "Imagen",
+      className: "image-header"
+    }, {
+      key: "name",
+      label: "Nombre",
+      className: "image-name"
+    }, {
+      key: "size",
+      label: "Tamaño",
+      className: "image-size"
+    }, {
+      key: "format",
+      label: "Formato",
+      className: "image-format"
+    }, {
+      key: "legend",
+      label: "¿Tiene leyenda?",
+      className: "image-description"
+    }, {
+      key: "shotType",
+      label: "Tipo de toma",
+      className: "shoot-type"
+    }]
+  },
+  asset: {
+    template: "0.1fr 1fr 1fr 1fr 1fr",
+    columns: [{
+      key: "preview",
+      label: "Activo",
+      className: "asset-header"
+    }, {
+      key: "name",
+      label: "Nombre",
+      className: "asset-name"
+    }, {
+      key: "weight",
+      label: "Peso",
+      className: "asset-weight"
+    }, {
+      key: "format",
+      label: "Formato",
+      className: "asset-format"
+    }, {
+      key: "assetType",
+      label: "Tipo de activo",
+      className: "asset-type"
+    }]
+  }
+};
+/**
+ * Encabezado de la bandeja, con su casilla de "seleccionar todo".
+ *
+ * `checkAllId` e `itemSelector` se pueden cambiar porque imágenes y activos
+ * conviven en la misma pestaña: si las dos listas compartieran el id de la
+ * casilla global, marcar todas las imágenes marcaría también los activos.
+ */
+
+exports.GALLERY_COLUMNS = GALLERY_COLUMNS;
+
 var GalleryHeader = function GalleryHeader(_ref) {
+  var _GALLERY_COLUMNS$vari;
+
   var setCheckAll = _ref.setCheckAll,
       setSelectedImages = _ref.setSelectedImages,
-      shotThd = _ref.shotThd;
+      shotThd = _ref.shotThd,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "image" : _ref$variant,
+      columns = _ref.columns,
+      _ref$checkAllId = _ref.checkAllId,
+      checkAllId = _ref$checkAllId === void 0 ? "check-all-images" : _ref$checkAllId,
+      _ref$itemSelector = _ref.itemSelector,
+      itemSelector = _ref$itemSelector === void 0 ? "[id^='gallery-element-']" : _ref$itemSelector;
+  var preset = (_GALLERY_COLUMNS$vari = GALLERY_COLUMNS[variant]) !== null && _GALLERY_COLUMNS$vari !== void 0 ? _GALLERY_COLUMNS$vari : GALLERY_COLUMNS.image;
+  var visibleColumns = columns !== null && columns !== void 0 ? columns : preset.columns;
 
   var checkAll = function checkAll(e) {
-    var checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    var checkboxList = document.querySelectorAll(itemSelector);
     checkboxList.forEach(function (chk) {
       return chk.checked = e.target.checked;
     });
@@ -26,35 +110,23 @@ var GalleryHeader = function GalleryHeader(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    template: preset.template,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "checkbox",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
-        id: "check-all-images",
+        id: checkAllId,
         onChange: function onChange(e) {
           return checkAll(e);
         }
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "information",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-header",
-        children: "Imagen"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-name",
-        children: "Nombre"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-size",
-        children: "Tama\xF1o"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-format",
-        children: "Formato"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-description",
-        children: "\xBFTiene leyenda?"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "shoot-type",
-        children: "Tipo de toma"
-      })]
+      children: visibleColumns.map(function (column) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: column.className,
+          children: column.label
+        }, column.key);
+      })
     })]
   });
 };

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

@@ -15,6 +15,9 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  padding: 10px;\n  padding-left: 0;\n  align-items: center;\n\n  .checkbox{\n    width: 5.25%;\n  }\n\n  .information{\n    width: 90%;\n    display: grid;\n    grid-template-columns: 0.1fr 1fr 1fr 1fr 1fr 1fr;\n  }\n    .image-header{\n\n    }\n\n    .image-name{\n      padding-left: 1.75rem;\n    }\n\n    .image-size{\n      padding-left: 2.75rem;\n\n    }\n\n    .image-format{\n      padding-left: 4.5rem;\n\n    }\n\n    .image-description{\n      margin-left: -1rem;\n    }\n\n    .shoot-type{\n    }\n\n  p {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n    flex: 1;\n    text-align: center;\n\n    /*&.value-header {\n      max-width: 60px;\n    }\n\n    &.image-header {\n      max-width: 60px;\n    }\n\n    &.image-name {\n      min-width: 20%;\n    }\n\n    &.image-format {\n      max-width: 60px;\n    }\n\n    &.image-size {\n      max-width: 90px;\n    }\n\n    &.image-identifier {\n      max-width: 80px;\n    }\n\n    &.image-description {\n      max-width: 120px;\n    }*/\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  padding: 10px;\n  padding-left: 0;\n  align-items: center;\n\n  .checkbox{\n    width: 5.25%;\n  }\n\n  .information{\n    width: 90%;\n    display: grid;\n    /* Lo define el preset de columnas; el valor por defecto es el de im\xE1genes. */\n    grid-template-columns: ", ";\n  }\n    .image-header{\n\n    }\n\n    .image-name{\n      padding-left: 1.75rem;\n    }\n\n    .image-size{\n      padding-left: 2.75rem;\n\n    }\n\n    .image-format{\n      padding-left: 4.5rem;\n\n    }\n\n    .image-description{\n      margin-left: -1rem;\n    }\n\n    .shoot-type{\n    }\n\n  p {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n    flex: 1;\n    text-align: center;\n\n    /*&.value-header {\n      max-width: 60px;\n    }\n\n    &.image-header {\n      max-width: 60px;\n    }\n\n    &.image-name {\n      min-width: 20%;\n    }\n\n    &.image-format {\n      max-width: 60px;\n    }\n\n    &.image-size {\n      max-width: 90px;\n    }\n\n    &.image-identifier {\n      max-width: 80px;\n    }\n\n    &.image-description {\n      max-width: 120px;\n    }*/\n  }\n"])), function (_ref) {
+  var template = _ref.template;
+  return template || "0.1fr 1fr 1fr 1fr 1fr 1fr";
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5);
 
 exports.Container = Container;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SinActivos = exports.Interactivo = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/GalleryTrayTabs",
+  component: _index.GalleryTrayTabs
+};
+exports.default = _default;
+
+var Interactivo = function Interactivo() {
+  var _useState = (0, _react.useState)(_index.TRAYS.IMAGES),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      tray = _useState2[0],
+      setTray = _useState2[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryTrayTabs, {
+    activeTray: tray,
+    setActiveTray: setTray,
+    imagesCount: 8,
+    assetsCount: 3
+  });
+};
+/** Estado real hasta que exista el backend: la bandeja de activos en cero. */
+
+
+exports.Interactivo = Interactivo;
+
+var SinActivos = function SinActivos() {
+  var _useState3 = (0, _react.useState)(_index.TRAYS.IMAGES),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      tray = _useState4[0],
+      setTray = _useState4[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryTrayTabs, {
+    activeTray: tray,
+    setActiveTray: setTray,
+    imagesCount: 8,
+    assetsCount: 0
+  });
+};
+
+exports.SinActivos = SinActivos;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TRAYS = exports.GalleryTrayTabs = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var TRAYS = {
+  IMAGES: "images",
+  ASSETS: "assets"
+};
+/**
+ * Selector entre las dos bandejas de la pestaña Imágenes.
+ *
+ * Los activos viven aquí y no en una pestaña propia porque es lo que pide la
+ * tarea —"dentro de las bandejas de imágenes"— y porque así comparten
+ * selección, descarga y permisos con las fotos en vez de duplicarlos.
+ */
+
+exports.TRAYS = TRAYS;
+
+var GalleryTrayTabs = function GalleryTrayTabs(_ref) {
+  var _ref$activeTray = _ref.activeTray,
+      activeTray = _ref$activeTray === void 0 ? TRAYS.IMAGES : _ref$activeTray,
+      setActiveTray = _ref.setActiveTray,
+      _ref$imagesCount = _ref.imagesCount,
+      imagesCount = _ref$imagesCount === void 0 ? 0 : _ref$imagesCount,
+      _ref$assetsCount = _ref.assetsCount,
+      assetsCount = _ref$assetsCount === void 0 ? 0 : _ref$assetsCount;
+  var trays = [{
+    id: TRAYS.IMAGES,
+    label: "Imágenes",
+    count: imagesCount
+  }, {
+    id: TRAYS.ASSETS,
+    label: "Activos digitales",
+    count: assetsCount
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: trays.map(function (tray) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        type: "button",
+        className: tray.id === activeTray ? "tray-tab active" : "tray-tab",
+        onClick: function onClick() {
+          return setActiveTray === null || setActiveTray === void 0 ? void 0 : setActiveTray(tray.id);
+        },
+        children: [tray.label, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "tray-count",
+          children: tray.count
+        })]
+      }, tray.id);
+    })
+  });
+};
+
+exports.GalleryTrayTabs = GalleryTrayTabs;

package/dist/components/molecules/GalleryTrayTabs/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  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 0 0;\n\n  .tray-tab {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border: none;\n    border-bottom: 2px solid transparent;\n    background: none;\n    cursor: pointer;\n    font-family: ", ";\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.active {\n      color: ", ";\n      font-weight: 600;\n      border-bottom-color: ", ";\n    }\n  }\n\n  .tray-count {\n    min-width: 20px;\n    padding: 0 6px;\n    border-radius: 10px;\n    background: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 11px;\n    line-height: 18px;\n    text-align: center;\n  }\n\n  .active .tray-count {\n    background: ", ";\n    color: ", ";\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.s5, _variables.GlobalColors.s5, _variables.GlobalColors.color_purple, _variables.GlobalColors.s2, _variables.GlobalColors.s5, _variables.FontFamily.Lato, _variables.GlobalColors.color_purple, _variables.GlobalColors.white);
+
+exports.Container = Container;

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

@@ -24,6 +24,7 @@ var ImageSelector = function ImageSelector(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImage, {
         img: image.src,
         altText: image.altText,
+        ext: image.ext,
         imageType: modalSelector ? "catalogue-modal-image" : "carousel-image",
         onClick: function onClick() {
           return setActiveImage(index);

package/dist/components/organisms/DigitalAssetsTray/DigitalAssetsTray.stories.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Vacia = exports.SoloLectura = exports.PayloadDeGuardado = exports.Cuadricula = exports.ConActivos = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _index = require("./index");
+
+var _useDigitalAssets = require("../../../global-files/digital-assets/useDigitalAssets");
+
+var _assets = require("../../../global-files/digital-assets/assets.reducer");
+
+var _assets2 = require("../../../global-files/digital-assets/assets.adapter");
+
+var _assets3 = require("../../../global-files/digital-assets/assets.mock");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/DigitalAssetsTray",
+  component: _index.DigitalAssetsTray
+};
+/*
+  Las historias usan EL MISMO reducer que la ficha, no un estado de juguete.
+  Así lo que se ve aquí es el comportamiento real: qué queda marcado para
+  guardar, qué se anota para borrar y qué payload saldría hacia el backend.
+*/
+
+exports.default = _default;
+
+var Demo = function Demo(_ref) {
+  var _ref$initialAssets = _ref.initialAssets,
+      initialAssets = _ref$initialAssets === void 0 ? [] : _ref$initialAssets,
+      _ref$gridLayout = _ref.gridLayout,
+      gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$showPayload = _ref.showPayload,
+      showPayload = _ref$showPayload === void 0 ? false : _ref$showPayload;
+
+  var _useReducer = (0, _react.useReducer)(_assets.assetsReducer, _assets.assetsInitialState),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      notices = _useState2[0],
+      setNotices = _useState2[1];
+
+  var tray = (0, _useDigitalAssets.useDigitalAssets)({
+    assets: state.assets_values,
+    dispatch: dispatch,
+    notices: notices,
+    setNotices: setNotices
+  }); // Carga inicial simulando la respuesta del backend, una sola vez.
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      loaded = _useState4[0],
+      setLoaded = _useState4[1];
+
+  if (!loaded && initialAssets.length) {
+    tray.replaceAll(initialAssets);
+    setLoaded(true);
+  }
+
+  var payload = (0, _assets2.buildSavePayload)((0, _assets.selectAssetsToSave)(state));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      width: 960
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DigitalAssetsTray, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tray), {}, {
+      unsaved: (0, _assets.countUnsavedAssets)(state),
+      gridLayout: gridLayout,
+      readOnly: readOnly,
+      selectedAssets: state.selected_assets,
+      setSelectedAssets: function setSelectedAssets(assets) {
+        return dispatch({
+          type: "SET_SELECTED_ASSETS",
+          payload: assets
+        });
+      },
+      setCheckAll: function setCheckAll(checked) {
+        return dispatch({
+          type: "TOGGLE_CHECK_ALL_ASSETS",
+          payload: checked
+        });
+      }
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      style: {
+        fontFamily: "Lato",
+        fontSize: 12
+      },
+      children: ["Seleccionados: ", state.selected_assets.length, " \xB7 Sin subir: ", tray.pending.length, " \xB7 Marcados para actualizar: ", state.updated_assets.length, " \xB7 Para borrar:", " ", state.deleted_assets.length, " \xB7 \xBFHay cambios sin guardar?", " ", (0, _assets.hasUnsavedAssets)(state) ? "sí" : "no"]
+    }), showPayload && /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+      style: {
+        fontSize: 11,
+        background: "#f7f7fc",
+        padding: 12,
+        borderRadius: 6,
+        maxHeight: 280,
+        overflow: "auto"
+      },
+      children: JSON.stringify(payload, null, 2)
+    })]
+  });
+};
+/**
+ * Estado real de hoy: sin backend, la bandeja arranca vacía. Arrastrar un mp4,
+ * un gif, un PDF, un xlsx o un psd lo valida y lo agrega; cualquier otra cosa se
+ * rechaza con su motivo. Nada se sube.
+ */
+
+
+var Vacia = function Vacia() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {});
+};
+
+exports.Vacia = Vacia;
+
+var ConActivos = function ConActivos() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    initialAssets: _assets3.backendAssetsMock
+  });
+};
+
+exports.ConActivos = ConActivos;
+
+var Cuadricula = function Cuadricula() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    initialAssets: _assets3.backendAssetsMock,
+    gridLayout: true
+  });
+};
+
+exports.Cuadricula = Cuadricula;
+
+var SoloLectura = function SoloLectura() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    initialAssets: _assets3.backendAssetsMock,
+    readOnly: true
+  });
+};
+/**
+ * Lo que se le enviaría al backend, actualizándose en vivo. Cambia el tipo de un
+ * activo y aparece en `updateAssets`; bórralo y su id pasa a `deleteAssets`;
+ * suelta un archivo nuevo y aparece en `newAssets` sin `key`, porque todavía no
+ * se ha subido a S3.
+ */
+
+
+exports.SoloLectura = SoloLectura;
+
+var PayloadDeGuardado = function PayloadDeGuardado() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    initialAssets: _assets3.backendAssetsMock,
+    showPayload: true
+  });
+};
+
+exports.PayloadDeGuardado = PayloadDeGuardado;