contentoh-components-library 21.6.50 → 21.6.52

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

@@ -1,102 +0,0 @@
-import { useState } from "react";
-
-import { GalleryAssetElement } from "./index";
-import { GalleryHeader } from "../GalleryHeader";
-import {
-  fromBackendList,
-  ASSET_STATUS,
-} from "../../../global-files/digital-assets/assets.adapter";
-import { backendAssetsMock } from "../../../global-files/digital-assets/assets.mock";
-
-const 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",
-};
-
-/* Las claves del mock apuntan a S3, que todavía no tiene nada: se sustituyen
-   por archivos públicos para poder ver el componente. */
-const assets = fromBackendList(backendAssetsMock).map((asset) => ({
-  ...asset,
-  url:
-    asset.ext === "mp4" ? SAMPLES.mp4 : asset.ext === "gif" ? SAMPLES.gif : "",
-  poster: "",
-}));
-
-export default {
-  title: "Components/molecules/GalleryAssetElement",
-  component: GalleryAssetElement,
-};
-
-const Template = (args) => <GalleryAssetElement {...args} />;
-
-export const Fila = Template.bind({});
-Fila.args = { asset: assets[0], index: 0 };
-
-export const Cuadricula = Template.bind({});
-Cuadricula.args = { asset: assets[0], index: 0, gridLayout: true };
-
-export const Subiendo = Template.bind({});
-Subiendo.args = {
-  asset: { ...assets[2], status: ASSET_STATUS.UPLOADING, progress: 42 },
-  index: 0,
-};
-
-export const ConError = Template.bind({});
-ConError.args = {
-  asset: {
-    ...assets[3],
-    status: ASSET_STATUS.ERROR,
-    error: "No se pudo subir el archivo. Intenta de nuevo.",
-  },
-  index: 0,
-};
-
-/** La bandeja completa con su encabezado: es el uso real del componente. */
-export const BandejaCompleta = () => {
-  const [selected, setSelected] = useState([]);
-
-  return (
-    <div style={{ width: 900 }}>
-      <GalleryHeader
-        variant="asset"
-        checkAllId="check-all-assets"
-        itemSelector="[id^='gallery-asset-']"
-        setCheckAll={() => {}}
-        setSelectedImages={setSelected}
-      />
-      {assets.map((asset, index) => (
-        <GalleryAssetElement
-          key={asset.id}
-          asset={asset}
-          index={index}
-          selectedAssets={selected}
-          setSelectedAssets={setSelected}
-          setCheckAll={() => {}}
-          changeAsset={({ value }) => console.log("nuevo tipo:", value)}
-          onRemove={(item) => console.log("quitar:", item.name)}
-        />
-      ))}
-      <p style={{ fontFamily: "Lato", fontSize: 12, marginTop: 12 }}>
-        Seleccionados: {selected.length}
-      </p>
-    </div>
-  );
-};
-
-/** Comparación de los dos encabezados, para verificar que no se movió el de imágenes. */
-export const EncabezadosComparados = () => (
-  <div style={{ width: 900 }}>
-    <GalleryHeader
-      variant="image"
-      setCheckAll={() => {}}
-      setSelectedImages={() => {}}
-    />
-    <GalleryHeader
-      variant="asset"
-      checkAllId="check-all-assets-demo"
-      itemSelector="[id^='gallery-asset-demo-']"
-      setCheckAll={() => {}}
-      setSelectedImages={() => {}}
-    />
-  </div>
-);

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

@@ -1,162 +0,0 @@
-import { Container } from "./styles";
-import { AssetPreview } from "../../atoms/AssetPreview";
-import { CheckBox } from "../../atoms/CheckBox";
-import Select from "../../atoms/Select";
-import {
-  ASSET_PREVIEW,
-  assetTypeOptions,
-  formatBytes,
-  resolvePreviewKind,
-} from "../../../global-files/digital-assets/assetTypes";
-import {
-  ASSET_STATUS,
-  assetKey,
-} from "../../../global-files/digital-assets/assets.adapter";
-
-/*
-  Fila de un activo digital en la bandeja.
-
-  Es un componente aparte de `GalleryElement` a propósito, no una bifurcación
-  dentro de él. Un activo no comparte casi nada con una imagen de producto: no
-  tiene tipo de toma, ni leyenda, ni panel de validación, ni comparación contra
-  la versión auditable. Meterlo en el mismo archivo habría partido su render en
-  dos mitades y puesto en riesgo la bandeja de imágenes, que ya funciona.
-
-  Lo que sí comparte —rejilla, tamaños, colores— vive en los estilos, calcados
-  de `GalleryElement` para que las dos listas se vean como una sola tabla.
-*/
-export const GalleryAssetElement = ({
-  asset = {},
-  index = 0,
-  gridLayout = false,
-  id,
-  label,
-  selectedAssets = [],
-  setSelectedAssets,
-  setCheckAll,
-  changeAsset,
-  onRemove,
-  readOnly = false,
-  checkAllId = "check-all-assets",
-  itemSelector = "[id^='gallery-asset-']",
-}) => {
-  const elementId = id || `gallery-asset-${index}`;
-  const key = assetKey(asset);
-  const isUploading = asset.status === ASSET_STATUS.UPLOADING;
-  const hasError = asset.status === ASSET_STATUS.ERROR;
-
-  const checkOnChange = (e) => {
-    const chkGlobal = document.getElementById(checkAllId);
-    const checkboxList = document.querySelectorAll(itemSelector);
-    let temp = selectedAssets.slice();
-
-    // Se compara por `assetKey` y no por `id`: un activo recién soltado todavía
-    // no tiene id del backend, y comparando por id todos los pendientes serían
-    // "el mismo" y se quitarían juntos de la selección.
-    temp = e.target.checked
-      ? [...temp, asset]
-      : temp.filter((item) => assetKey(item) !== key);
-
-    let counter = 0;
-    checkboxList?.forEach((chk) => chk.checked && counter++);
-    if (chkGlobal) chkGlobal.checked = checkboxList.length === counter;
-    setCheckAll?.(checkboxList.length === counter);
-    setSelectedAssets?.(temp);
-  };
-
-  /*
-    Abrir el activo en otra pestaña.
-
-    Sirve para TODOS los tipos y por eso se prefiere a un visor propio: un video
-    se reproduce con el reproductor del navegador, un PDF se abre, y un .psd se
-    descarga. Sin esto, la bandeja mostraba el archivo pero no había forma de
-    verlo — un video quedaba como un fotograma fijo sin botón de reproducir.
-
-    Solo cuando ya está en S3: un activo recién soltado apunta al archivo del
-    disco del usuario y abrirlo no le diría nada nuevo.
-  */
-  const abrir = () => {
-    if (!asset.id || !asset.url) return;
-    window.open(asset.url, "_blank", "noopener,noreferrer");
-  };
-
-  const onChangeType = (e) => {
-    changeAsset?.({
-      action: "changeAssetInfo",
-      attribute: "assetType",
-      value: e.target.value,
-      index,
-    });
-  };
-
-  return (
-    <Container
-      className={`${gridLayout ? "grid-gallery" : "row-gallery"} ${
-        hasError ? "asset-error" : ""
-      }`.trim()}
-    >
-      <div className="buttons-container">
-        <CheckBox id={elementId} label={label} onChange={checkOnChange} />
-      </div>
-      <div className="asset-container">
-        <AssetPreview
-          asset={asset}
-          size={`catalogue-image-${gridLayout ? "big" : "small"}-size`}
-          /*
-            En cuadrícula hay sitio para el reproductor; en la fila, de 60px,
-            los controles no caben y estorban al clic.
-          */
-          controls={gridLayout && resolvePreviewKind(asset) === ASSET_PREVIEW.VIDEO}
-          onClick={abrir}
-        />
-        <div className="information-container">
-          <p
-            className={asset.id ? "asset-name asset-link" : "asset-name"}
-            title={asset.id ? `Abrir ${asset.name}` : asset.name}
-            onClick={abrir}
-          >
-            {asset.name}
-          </p>
-          {!gridLayout && (
-            <>
-              <p className="asset-weight">{formatBytes(asset.sizeBytes)}</p>
-              <p className="asset-format">{(asset.ext || "").toUpperCase()}</p>
-              <Select
-                width="100%"
-                placeholder="Tipo de activo"
-                options={assetTypeOptions()}
-                valueSelected={asset.assetType}
-                onChange={onChangeType}
-                className={readOnly ? "disabled" : ""}
-              />
-            </>
-          )}
-        </div>
-      </div>
-
-      {isUploading && (
-        <div className="asset-progress" aria-label="Subiendo activo">
-          <div
-            className="asset-progress-fill"
-            style={{
-              width: `${Math.min(100, Math.max(0, asset.progress ?? 0))}%`,
-            }}
-          />
-        </div>
-      )}
-
-      {hasError && <p className="asset-error-message">{asset.error}</p>}
-
-      {onRemove && !readOnly && (
-        <button
-          type="button"
-          className="asset-remove"
-          onClick={() => onRemove(asset)}
-          title="Quitar activo"
-        >
-          ×
-        </button>
-      )}
-    </Container>
-  );
-};

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

@@ -1,159 +0,0 @@
-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/GalleryTrayTabs/GalleryTrayTabs.stories.js

@@ -1,32 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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/organisms/DigitalAssetsTray/DigitalAssetsTray.stories.js

@@ -1,101 +0,0 @@
-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 />;