contentoh-components-library 21.6.50 → 21.6.51

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

@@ -1,189 +0,0 @@
-import { useDropzone } from "react-dropzone";
-
-import { Container } from "./styles";
-import { GalleryAssetElement } from "../../molecules/GalleryAssetElement";
-import { GalleryHeader } from "../../molecules/GalleryHeader";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import {
-  MAX_ASSETS_PER_PRODUCT,
-  acceptedFormatsLabel,
-  buildDropzoneAccept,
-} from "../../../global-files/digital-assets/assetTypes";
-
-const CHECK_ALL_ID = "check-all-assets";
-const 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.
- */
-export const DigitalAssetsTray = ({
-  assets = [],
-  notices = [],
-  unsaved = { nuevos: 0, modificados: 0, borrados: 0, total: 0 },
-  remaining = MAX_ASSETS_PER_PRODUCT,
-  addFiles,
-  removeAsset,
-  changeAssetType,
-  clearNotices,
-  selectedAssets = [],
-  setSelectedAssets,
-  setCheckAll,
-  gridLayout = false,
-  readOnly = false,
-  emptyMessage = "Este producto no tiene activos digitales",
-}) => {
-  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
-    accept: buildDropzoneAccept(),
-    noKeyboard: true,
-    multiple: true,
-    noClick: true,
-    disabled: readOnly,
-    onDrop: (acceptedFiles) => addFiles?.(acceptedFiles),
-  });
-
-  const noticesBy = (level) => notices.filter((item) => 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.
-  */
-  const detalleSinGuardar = [
-    unsaved.nuevos && `${unsaved.nuevos} nuevo${unsaved.nuevos > 1 ? "s" : ""}`,
-    unsaved.modificados && `${unsaved.modificados} modificado${unsaved.modificados > 1 ? "s" : ""}`,
-    unsaved.borrados && `${unsaved.borrados} por borrar`,
-  ].filter(Boolean).join(" · ");
-
-  return (
-    <Container>
-      <div className="tray-toolbar">
-        {/* La lista completa son 27 formatos: no cabe en una línea, así que va
-            en el title y en el texto solo las familias. */}
-        <p className="tray-hint" title={`Formatos permitidos: ${acceptedFormatsLabel()}`}>
-          Arrastra aquí videos, 360, GIF, documentos, hojas de cálculo o archivos
-          editables. Quedan {remaining} de {MAX_ASSETS_PER_PRODUCT}.
-        </p>
-        {!readOnly && (
-          <ButtonV2
-            label={"Agregar activos"}
-            type={"pink"}
-            size={12}
-            onClick={open}
-          />
-        )}
-      </div>
-
-      {/*
-        Rechazos y advertencias se separan en dos paneles.
-
-        Mezclarlos en rojo haría creer que un archivo que sí entró tampoco
-        sirvió: un .mov se guarda y se descarga bien, solo que el navegador no
-        lo reproduce. Son mensajes distintos y merecen colores distintos.
-      */}
-      {unsaved.total > 0 && (
-        <div className="tray-unsaved" role="status">
-          <span className="tray-unsaved-dot" />
-          <p>
-            <strong>
-              {unsaved.total} cambio{unsaved.total > 1 ? "s" : ""} sin guardar
-            </strong>
-            {detalleSinGuardar && <span className="tray-unsaved-detail"> — {detalleSinGuardar}</span>}
-          </p>
-        </div>
-      )}
-
-      {noticesBy("error").length > 0 && (
-        <div className="tray-notice tray-notice-error">
-          <div className="tray-notice-head">
-            <p>No se pudieron agregar {noticesBy("error").length} archivo(s):</p>
-            <button type="button" onClick={clearNotices} title="Cerrar">
-              ×
-            </button>
-          </div>
-          <ul>
-            {noticesBy("error").map((item, index) => (
-              <li key={`err-${item.name}-${index}`}>{item.message}</li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {noticesBy("warning").length > 0 && (
-        <div className="tray-notice tray-notice-warning">
-          <div className="tray-notice-head">
-            <p>Se agregaron, pero ten en cuenta:</p>
-            <button type="button" onClick={clearNotices} title="Cerrar">
-              ×
-            </button>
-          </div>
-          <ul>
-            {noticesBy("warning").map((item, index) => (
-              <li key={`warn-${item.name}-${index}`}>{item.message}</li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {!gridLayout && assets.length > 0 && (
-        <GalleryHeader
-          variant="asset"
-          checkAllId={CHECK_ALL_ID}
-          itemSelector={ITEM_SELECTOR}
-          setCheckAll={setCheckAll}
-          setSelectedImages={setSelectedAssets}
-        />
-      )}
-
-      <div
-        {...getRootProps({
-          className: `dropzone ${isDragActive ? "drag-active" : ""}`.trim(),
-        })}
-      >
-        <input {...getInputProps()} />
-        {isDragActive && (
-          <div className="drag-overlay">
-            <p>Suelta los activos aquí</p>
-          </div>
-        )}
-        <aside className={gridLayout ? "tray-grid" : "tray-rows"}>
-          {assets.map((asset, index) => (
-            <GalleryAssetElement
-              key={asset.id ?? asset.tempId}
-              asset={asset}
-              index={index}
-              gridLayout={gridLayout}
-              checkAllId={CHECK_ALL_ID}
-              itemSelector={ITEM_SELECTOR}
-              selectedAssets={selectedAssets}
-              setSelectedAssets={setSelectedAssets}
-              setCheckAll={setCheckAll}
-              changeAsset={({ value }) => changeAssetType?.(index, value)}
-              onRemove={removeAsset}
-              readOnly={readOnly}
-            />
-          ))}
-        </aside>
-
-        {assets.length === 0 && (
-          <div className="tray-empty">
-            <p>{emptyMessage}</p>
-            {!readOnly && (
-              <p className="tray-empty-hint">
-                Arrástralos aquí o usa «Agregar activos».
-              </p>
-            )}
-          </div>
-        )}
-      </div>
-    </Container>
-  );
-};

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

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