contentoh-components-library 21.6.54 → 21.6.55

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

@@ -1,171 +0,0 @@
-"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;

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

@@ -1,211 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DigitalAssetsTray = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _reactDropzone = require("react-dropzone");
-
-var _styles = require("./styles");
-
-var _GalleryAssetElement = require("../../molecules/GalleryAssetElement");
-
-var _GalleryHeader = require("../../molecules/GalleryHeader");
-
-var _ButtonV = require("../../atoms/ButtonV2");
-
-var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var CHECK_ALL_ID = "check-all-assets";
-var ITEM_SELECTOR = "[id^='gallery-asset-']";
-/**
- * Bandeja de activos digitales: soltar archivos, verlos, reetiquetarlos y
- * quitarlos.
- *
- * Tiene su propio dropzone en vez de compartir el de las imágenes porque los
- * formatos aceptados son distintos: mezclarlos dejaría soltar un PDF sobre la
- * bandeja de fotos y un JPG sobre la de activos.
- *
- * No guarda ni sube nada. Recibe el estado ya armado por `useDigitalAssets`,
- * así que cuando se defina el contrato del backend solo hay que conectarle las
- * llamadas; la interfaz no cambia.
- */
-
-var DigitalAssetsTray = function DigitalAssetsTray(_ref) {
-  var _ref$assets = _ref.assets,
-      assets = _ref$assets === void 0 ? [] : _ref$assets,
-      _ref$notices = _ref.notices,
-      notices = _ref$notices === void 0 ? [] : _ref$notices,
-      _ref$unsaved = _ref.unsaved,
-      unsaved = _ref$unsaved === void 0 ? {
-    nuevos: 0,
-    modificados: 0,
-    borrados: 0,
-    total: 0
-  } : _ref$unsaved,
-      _ref$remaining = _ref.remaining,
-      remaining = _ref$remaining === void 0 ? _assetTypes.MAX_ASSETS_PER_PRODUCT : _ref$remaining,
-      addFiles = _ref.addFiles,
-      removeAsset = _ref.removeAsset,
-      changeAssetType = _ref.changeAssetType,
-      clearNotices = _ref.clearNotices,
-      _ref$selectedAssets = _ref.selectedAssets,
-      selectedAssets = _ref$selectedAssets === void 0 ? [] : _ref$selectedAssets,
-      setSelectedAssets = _ref.setSelectedAssets,
-      setCheckAll = _ref.setCheckAll,
-      _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$emptyMessage = _ref.emptyMessage,
-      emptyMessage = _ref$emptyMessage === void 0 ? "Este producto no tiene activos digitales" : _ref$emptyMessage;
-
-  var _useDropzone = (0, _reactDropzone.useDropzone)({
-    accept: (0, _assetTypes.buildDropzoneAccept)(),
-    noKeyboard: true,
-    multiple: true,
-    noClick: true,
-    disabled: readOnly,
-    onDrop: function onDrop(acceptedFiles) {
-      return addFiles === null || addFiles === void 0 ? void 0 : addFiles(acceptedFiles);
-    }
-  }),
-      getRootProps = _useDropzone.getRootProps,
-      getInputProps = _useDropzone.getInputProps,
-      isDragActive = _useDropzone.isDragActive,
-      open = _useDropzone.open;
-
-  var noticesBy = function noticesBy(level) {
-    return notices.filter(function (item) {
-      return item.level === level;
-    });
-  };
-  /*
-    Se desglosa en vez de mostrar solo el número: "3 cambios sin guardar" no le
-    dice al usuario qué perdería si se va, y no es lo mismo dejar sin guardar un
-    borrado que un archivo nuevo.
-  */
-
-
-  var detalleSinGuardar = [unsaved.nuevos && "".concat(unsaved.nuevos, " nuevo").concat(unsaved.nuevos > 1 ? "s" : ""), unsaved.modificados && "".concat(unsaved.modificados, " modificado").concat(unsaved.modificados > 1 ? "s" : ""), unsaved.borrados && "".concat(unsaved.borrados, " por borrar")].filter(Boolean).join(" · ");
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "tray-toolbar",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-        className: "tray-hint",
-        title: "Formatos permitidos: ".concat((0, _assetTypes.acceptedFormatsLabel)()),
-        children: ["Arrastra aqu\xED videos, 360, GIF, documentos, hojas de c\xE1lculo o archivos editables. Quedan ", remaining, " de ", _assetTypes.MAX_ASSETS_PER_PRODUCT, "."]
-      }), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
-        label: "Agregar activos",
-        type: "pink",
-        size: 12,
-        onClick: open
-      })]
-    }), unsaved.total > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "tray-unsaved",
-      role: "status",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "tray-unsaved-dot"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("strong", {
-          children: [unsaved.total, " cambio", unsaved.total > 1 ? "s" : "", " sin guardar"]
-        }), detalleSinGuardar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          className: "tray-unsaved-detail",
-          children: [" \u2014 ", detalleSinGuardar]
-        })]
-      })]
-    }), noticesBy("error").length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "tray-notice tray-notice-error",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "tray-notice-head",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-          children: ["No se pudieron agregar ", noticesBy("error").length, " archivo(s):"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          type: "button",
-          onClick: clearNotices,
-          title: "Cerrar",
-          children: "\xD7"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-        children: noticesBy("error").map(function (item, index) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            children: item.message
-          }, "err-".concat(item.name, "-").concat(index));
-        })
-      })]
-    }), noticesBy("warning").length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "tray-notice tray-notice-warning",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "tray-notice-head",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          children: "Se agregaron, pero ten en cuenta:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          type: "button",
-          onClick: clearNotices,
-          title: "Cerrar",
-          children: "\xD7"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-        children: noticesBy("warning").map(function (item, index) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            children: item.message
-          }, "warn-".concat(item.name, "-").concat(index));
-        })
-      })]
-    }), !gridLayout && assets.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
-      variant: "asset",
-      checkAllId: CHECK_ALL_ID,
-      itemSelector: ITEM_SELECTOR,
-      setCheckAll: setCheckAll,
-      setSelectedImages: setSelectedAssets
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps({
-      className: "dropzone ".concat(isDragActive ? "drag-active" : "").trim()
-    })), {}, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "drag-overlay",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          children: "Suelta los activos aqu\xED"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
-        className: gridLayout ? "tray-grid" : "tray-rows",
-        children: assets.map(function (asset, index) {
-          var _asset$id;
-
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryAssetElement.GalleryAssetElement, {
-            asset: asset,
-            index: index,
-            gridLayout: gridLayout,
-            checkAllId: CHECK_ALL_ID,
-            itemSelector: ITEM_SELECTOR,
-            selectedAssets: selectedAssets,
-            setSelectedAssets: setSelectedAssets,
-            setCheckAll: setCheckAll,
-            changeAsset: function changeAsset(_ref2) {
-              var value = _ref2.value;
-              return changeAssetType === null || changeAssetType === void 0 ? void 0 : changeAssetType(index, value);
-            },
-            onRemove: removeAsset,
-            readOnly: readOnly
-          }, (_asset$id = asset.id) !== null && _asset$id !== void 0 ? _asset$id : asset.tempId);
-        })
-      }), assets.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "tray-empty",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          children: emptyMessage
-        }), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          className: "tray-empty-hint",
-          children: "Arr\xE1stralos aqu\xED o usa \xABAgregar activos\xBB."
-        })]
-      })]
-    }))]
-  });
-};
-
-exports.DigitalAssetsTray = DigitalAssetsTray;

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

@@ -1,22 +0,0 @@
-"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;
-
-/* El dropzone replica el de la bandeja de imágenes para que arrastrar se sienta
-   igual en las dos. */
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  .tray-toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n  }\n\n  .tray-hint {\n    margin: 0;\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 18px;\n    color: ", ";\n  }\n\n  /*\n    Aviso de cambios sin guardar. Va arriba del listado y no junto al bot\xF3n de\n    guardar, que vive en otra barra: el usuario mira la bandeja, no el men\xFA.\n  */\n  .tray-unsaved {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 12px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    background: rgba(237, 154, 77, 0.08);\n\n    p {\n      margin: 0;\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 18px;\n      color: ", ";\n    }\n\n    strong {\n      font-family: ", ";\n      color: ", ";\n    }\n  }\n\n  .tray-unsaved-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: ", ";\n    flex-shrink: 0;\n  }\n\n  .tray-unsaved-detail {\n    color: ", ";\n  }\n\n  .tray-notice {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid;\n\n    .tray-notice-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      p {\n        margin: 0;\n        font-family: ", ";\n        font-size: 12px;\n      }\n\n      button {\n        border: none;\n        background: none;\n        cursor: pointer;\n        font-size: 16px;\n        line-height: 1;\n        color: inherit;\n      }\n    }\n\n    ul {\n      margin: 4px 0 0;\n      padding-left: 18px;\n    }\n\n    li {\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 18px;\n      color: ", ";\n    }\n  }\n\n  /* Rojo = no entr\xF3. \xC1mbar = entr\xF3, pero hay algo que saber. */\n  .tray-notice-error {\n    border-color: ", ";\n    background: rgba(", ", 0.05);\n    color: ", ";\n  }\n\n  .tray-notice-warning {\n    border-color: ", ";\n    background: rgba(237, 154, 77, 0.08);\n    color: ", ";\n  }\n\n  .dropzone {\n    position: relative;\n    width: 100%;\n    min-height: 160px;\n    transition: all 0.5s ease;\n\n    &.drag-active {\n      background-color: rgba(", ", 0.05);\n      border: 2px dashed ", ";\n      border-radius: 8px;\n\n      aside {\n        opacity: 0.3;\n        pointer-events: none;\n      }\n    }\n\n    .drag-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n\n      p {\n        font-family: ", ";\n        font-size: 16px;\n        color: ", ";\n      }\n    }\n  }\n\n  .tray-rows {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .tray-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .tray-empty {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n    width: 80%;\n\n    p {\n      margin: 0;\n      font-family: ", ";\n      font-size: 16px;\n      color: ", ";\n    }\n\n    .tray-empty-hint {\n      margin-top: 6px;\n      font-size: 13px;\n      color: ", ";\n    }\n  }\n"])), _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.in_progress, _variables.FontFamily.Lato, _variables.GlobalColors.s5, _variables.FontFamily.Raleway_600, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.s4, _variables.FontFamily.Raleway_600, _variables.FontFamily.Lato, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.FontFamily.Lato, _variables.GlobalColors.gray, _variables.GlobalColors.s4);
-
-exports.Container = Container;