contentoh-components-library 21.6.49 → 21.6.50

package/src/components/molecules/GalleryAssetElement/styles.js

@@ -0,0 +1,159 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+/*
+  Calcado de `GalleryElement/styles.js` para que imágenes y activos se lean como
+  una sola tabla. Cambia solo la rejilla de la fila —cuatro columnas en vez de
+  cinco, porque un activo no tiene leyenda— y lo propio de un archivo que se
+  está subiendo: barra de progreso, mensaje de error y botón de quitar.
+*/
+export const Container = styled.div`
+  position: relative;
+
+  &.grid-gallery {
+    width: 179px;
+    border-radius: 3px;
+    overflow: hidden;
+
+    .buttons-container {
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .asset-container {
+      border: 1px solid #f0eef2;
+
+      .information-container {
+        background-color: ${GlobalColors.s2};
+        display: flex;
+        justify-content: space-between;
+        padding: 0 2px;
+
+        p {
+          font-family: ${FontFamily.Lato};
+          color: ${GlobalColors.s4};
+          font-size: 11px;
+          line-height: 17px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  &.row-gallery {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 0.05fr 1fr;
+    align-items: center;
+    padding-right: 10px;
+
+    .buttons-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .asset-container {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      flex: 1;
+
+      .information-container {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        align-items: center;
+
+        p {
+          font-family: ${FontFamily.Lato};
+          color: ${GlobalColors.s4};
+          font-size: 14px;
+          line-height: 17px;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        & > * {
+          flex: 1;
+          padding: 5px;
+        }
+      }
+    }
+  }
+
+  /* El nombre es el sitio donde uno intenta hacer clic para abrir un archivo. */
+  .asset-link {
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+
+    &:hover {
+      color: ${GlobalColors.color_purple};
+    }
+  }
+
+  &.asset-error {
+    border: 1px solid ${GlobalColors.secondary_magenta};
+    border-radius: 3px;
+  }
+
+  /* Progreso de subida. Ocupa el borde inferior de la fila para no empujar el
+     resto del contenido mientras aparece y desaparece. */
+  .asset-progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    background: ${GlobalColors.s3};
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  .asset-progress-fill {
+    height: 100%;
+    background: ${GlobalColors.color_purple};
+    transition: width 0.2s ease-out;
+  }
+
+  .asset-error-message {
+    margin: 2px 0 0;
+    padding: 0 8px;
+    font-family: ${FontFamily.Lato};
+    font-size: 11px;
+    line-height: 15px;
+    color: ${GlobalColors.secondary_magenta};
+  }
+
+  .asset-remove {
+    position: absolute;
+    top: 4px;
+    right: 6px;
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: ${GlobalColors.s2};
+    color: ${GlobalColors.s5};
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+      background: ${GlobalColors.s3};
+    }
+  }
+`;

package/src/components/molecules/GalleryElement/index.js

@@ -25,6 +25,7 @@ export const GalleryElement = ({
   auditImages,
   compare,
   updateApprovedInputsImages,
+  onSelect,
 }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [showDivStates, setShowDivStates] = useState({});
@@ -93,7 +94,15 @@ export const GalleryElement = ({
         <ProductImage
           img={compare ? auditImages?.values[number]?.src : image?.src}
           altText={image?.altText}
+          // Sin `ext`, un video se pinta como <img> rota: la URL guardada no
+          // conserva la extensión del archivo.
+          ext={compare ? auditImages?.values[number]?.ext : image?.ext}
           imageType={`catalogue-image-${gridLayout ? "big" : "small"}-size`}
+          // La miniatura de un video ya no lleva controles, así que el clic es
+          // la única forma de llegar al visor grande. Se aplica también a las
+          // imágenes: dos recuadros idénticos donde solo uno responde al clic
+          // sería peor que no responder ninguno.
+          onClick={onSelect}
         />
         <div className="information-container">
           <p>{image?.name}</p>

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

@@ -1,28 +1,80 @@
 import { Container } from "./styles";
 import { CheckBox } from "../../atoms/CheckBox";
 
-export const GalleryHeader = ({ setCheckAll, setSelectedImages, shotThd }) => {
+/*
+  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.
+*/
+export const 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.
+ */
+export const GalleryHeader = ({
+  setCheckAll,
+  setSelectedImages,
+  shotThd,
+  variant = "image",
+  columns,
+  checkAllId = "check-all-images",
+  itemSelector = "[id^='gallery-element-']",
+}) => {
+  const preset = GALLERY_COLUMNS[variant] ?? GALLERY_COLUMNS.image;
+  const visibleColumns = columns ?? preset.columns;
+
   const checkAll = (e) => {
-    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    const checkboxList = document.querySelectorAll(itemSelector);
     checkboxList.forEach((chk) => (chk.checked = e.target.checked));
     setCheckAll(e.target.checked);
     if (!e.target.checked) setSelectedImages([]);
   };
+
   return (
-    <Container>
+    <Container template={preset.template}>
       <div className="checkbox">
-        <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
+        <CheckBox id={checkAllId} onChange={(e) => checkAll(e)} />
       </div>
       <div className="information">
-        <p className="image-header">Imagen</p>
-        <p className="image-name">Nombre</p>
-        <p className="image-size">Tamaño</p>
-        <p className="image-format">Formato</p>
-        <p className="image-description">¿Tiene leyenda?</p>
-        <p className="shoot-type">Tipo de toma</p>
-        {/* <p className="">Tipo de imagen</p> */}
-        {/* <p className="">Tipo de empaque</p> */}
-        {/* <p className="">Estatus</p> */}
+        {visibleColumns.map((column) => (
+          <p key={column.key} className={column.className}>
+            {column.label}
+          </p>
+        ))}
       </div>
     </Container>
   );

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

@@ -15,7 +15,8 @@ export const Container = styled.div`
   .information{
     width: 90%;
     display: grid;
-    grid-template-columns: 0.1fr 1fr 1fr 1fr 1fr 1fr;
+    /* Lo define el preset de columnas; el valor por defecto es el de imágenes. */
+    grid-template-columns: ${({ template }) => template || "0.1fr 1fr 1fr 1fr 1fr 1fr"};
   }
     .image-header{
 

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

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { GalleryTrayTabs, TRAYS } from "./index";
+
+export default {
+  title: "Components/molecules/GalleryTrayTabs",
+  component: GalleryTrayTabs,
+};
+
+export const Interactivo = () => {
+  const [tray, setTray] = useState(TRAYS.IMAGES);
+  return (
+    <GalleryTrayTabs
+      activeTray={tray}
+      setActiveTray={setTray}
+      imagesCount={8}
+      assetsCount={3}
+    />
+  );
+};
+
+/** Estado real hasta que exista el backend: la bandeja de activos en cero. */
+export const SinActivos = () => {
+  const [tray, setTray] = useState(TRAYS.IMAGES);
+  return (
+    <GalleryTrayTabs
+      activeTray={tray}
+      setActiveTray={setTray}
+      imagesCount={8}
+      assetsCount={0}
+    />
+  );
+};

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

@@ -0,0 +1,41 @@
+import { Container } from "./styles";
+
+export const 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.
+ */
+export const GalleryTrayTabs = ({
+  activeTray = TRAYS.IMAGES,
+  setActiveTray,
+  imagesCount = 0,
+  assetsCount = 0,
+}) => {
+  const trays = [
+    { id: TRAYS.IMAGES, label: "Imágenes", count: imagesCount },
+    { id: TRAYS.ASSETS, label: "Activos digitales", count: assetsCount },
+  ];
+
+  return (
+    <Container>
+      {trays.map((tray) => (
+        <button
+          key={tray.id}
+          type="button"
+          className={tray.id === activeTray ? "tray-tab active" : "tray-tab"}
+          onClick={() => setActiveTray?.(tray.id)}
+        >
+          {tray.label}
+          <span className="tray-count">{tray.count}</span>
+        </button>
+      ))}
+    </Container>
+  );
+};

package/src/components/molecules/GalleryTrayTabs/styles.js

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 0 0;
+
+  .tray-tab {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: none;
+    cursor: pointer;
+    font-family: ${FontFamily.AvenirNext};
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: -0.015em;
+    color: ${GlobalColors.s4};
+
+    &:hover {
+      color: ${GlobalColors.s5};
+    }
+
+    &.active {
+      color: ${GlobalColors.s5};
+      font-weight: 600;
+      border-bottom-color: ${GlobalColors.color_purple};
+    }
+  }
+
+  .tray-count {
+    min-width: 20px;
+    padding: 0 6px;
+    border-radius: 10px;
+    background: ${GlobalColors.s2};
+    color: ${GlobalColors.s5};
+    font-family: ${FontFamily.Lato};
+    font-size: 11px;
+    line-height: 18px;
+    text-align: center;
+  }
+
+  .active .tray-count {
+    background: ${GlobalColors.color_purple};
+    color: ${GlobalColors.white};
+  }
+`;

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

@@ -13,6 +13,7 @@ export const ImageSelector = ({
           key={index}
           img={image.src}
           altText={image.altText}
+          ext={image.ext}
           imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
           onClick={() => setActiveImage(index)}
         />

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

@@ -0,0 +1,101 @@
+import { useReducer, useState } from "react";
+
+import { DigitalAssetsTray } from "./index";
+import { useDigitalAssets } from "../../../global-files/digital-assets/useDigitalAssets";
+import {
+  assetsInitialState,
+  assetsReducer,
+  countUnsavedAssets,
+  hasUnsavedAssets,
+  selectAssetsToSave,
+} from "../../../global-files/digital-assets/assets.reducer";
+import { buildSavePayload } from "../../../global-files/digital-assets/assets.adapter";
+import { backendAssetsMock } from "../../../global-files/digital-assets/assets.mock";
+
+export default {
+  title: "Components/organisms/DigitalAssetsTray",
+  component: 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.
+*/
+const Demo = ({ initialAssets = [], gridLayout = false, readOnly = false, showPayload = false }) => {
+  const [state, dispatch] = useReducer(assetsReducer, assetsInitialState);
+  const [notices, setNotices] = useState([]);
+
+  const tray = useDigitalAssets({
+    assets: state.assets_values,
+    dispatch,
+    notices,
+    setNotices,
+  });
+
+  // Carga inicial simulando la respuesta del backend, una sola vez.
+  const [loaded, setLoaded] = useState(false);
+  if (!loaded && initialAssets.length) {
+    tray.replaceAll(initialAssets);
+    setLoaded(true);
+  }
+
+  const payload = buildSavePayload(selectAssetsToSave(state));
+
+  return (
+    <div style={{ width: 960 }}>
+      <DigitalAssetsTray
+        {...tray}
+        unsaved={countUnsavedAssets(state)}
+        gridLayout={gridLayout}
+        readOnly={readOnly}
+        selectedAssets={state.selected_assets}
+        setSelectedAssets={(assets) => dispatch({ type: "SET_SELECTED_ASSETS", payload: assets })}
+        setCheckAll={(checked) => dispatch({ type: "TOGGLE_CHECK_ALL_ASSETS", payload: checked })}
+      />
+
+      <p style={{ fontFamily: "Lato", fontSize: 12 }}>
+        Seleccionados: {state.selected_assets.length} · Sin subir: {tray.pending.length} ·
+        Marcados para actualizar: {state.updated_assets.length} · Para borrar:{" "}
+        {state.deleted_assets.length} · ¿Hay cambios sin guardar?{" "}
+        {hasUnsavedAssets(state) ? "sí" : "no"}
+      </p>
+
+      {showPayload && (
+        <pre
+          style={{
+            fontSize: 11,
+            background: "#f7f7fc",
+            padding: 12,
+            borderRadius: 6,
+            maxHeight: 280,
+            overflow: "auto",
+          }}
+        >
+          {JSON.stringify(payload, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+};
+
+/**
+ * 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.
+ */
+export const Vacia = () => <Demo />;
+
+export const ConActivos = () => <Demo initialAssets={backendAssetsMock} />;
+
+export const Cuadricula = () => <Demo initialAssets={backendAssetsMock} gridLayout />;
+
+export const SoloLectura = () => <Demo initialAssets={backendAssetsMock} readOnly />;
+
+/**
+ * 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.
+ */
+export const PayloadDeGuardado = () => <Demo initialAssets={backendAssetsMock} showPayload />;