@codeplex-sac/feedback

Componentes de retroalimentación para aplicaciones React: notificaciones, diálogos, modales y tooltips avanzados. Basado en Material UI con estilos premium (glassmorphism, animaciones).

Instalación

bun add @codeplex-sac/feedback @codeplex-sac/tema @mui/material @emotion/react @emotion/styled

[!IMPORTANT] Envuelve la aplicación con CodeplexProveedorTema de @codeplex-sac/tema para que los estilos funcionen correctamente.

Componentes

CodeplexNotificacion

Toast / Snackbar con barra de progreso animada y múltiples estilos visuales.

Ejemplo:

import { CodeplexNotificacion } from '@codeplex-sac/feedback';
import { useState } from 'react';

export const Ejemplo = () => {
  const [abierto, setAbierto] = useState(false);

  return (
    <>
      <button onClick={() => setAbierto(true)}>Mostrar notificación</button>
      <CodeplexNotificacion
        abierto={abierto}
        mensaje="Cambios guardados correctamente."
        variante="exito"
        estilo="cristal"
        mostrarProgreso
        alCerrar={() => setAbierto(false)}
      />
    </>
  );
};

Props: | Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | abierto | boolean | — | Controla la visibilidad. | | mensaje | string \| ReactNode | — | Texto de la notificación. | | titulo | string | — | Título en negrita sobre el mensaje. | | variante | 'info' \| 'exito' \| 'advertencia' \| 'error' | 'info' | Color e icono. | | estilo | 'solido' \| 'suave' \| 'cristal' \| 'contorno' | 'suave' | Acabado visual. | | posicion | 'arriba-izquierda' \| 'arriba-centro' \| 'arriba-derecha' \| 'abajo-izquierda' \| 'abajo-centro' \| 'abajo-derecha' | 'abajo-izquierda' | Posición en pantalla. | | animacion | 'deslizar' \| 'crecer' \| 'desvanecer' | 'deslizar' | Tipo de animación de entrada. | | duracion | number \| null | 6000 | Tiempo en ms antes del auto-cierre. null desactiva el auto-cierre. | | mostrarProgreso | boolean | false | Muestra barra de tiempo restante. | | cerrable | boolean | true | Muestra botón de cierre. | | accion | ReactNode | — | Slot para botón de acción personalizado. | | mostrarIcono | boolean | true | Muestra el icono de variante. | | alCerrar | () => void | — | Callback al cerrarse. |

CodeplexDialogo

Ventana modal para confirmaciones y formularios, con subcomponentes de composición.

Componentes incluidos: CodeplexDialogo, CodeplexDialogoTitulo, CodeplexDialogoContenido, CodeplexDialogoTexto, CodeplexDialogoAcciones

Ejemplo:

import {
  CodeplexDialogo,
  CodeplexDialogoTitulo,
  CodeplexDialogoContenido,
  CodeplexDialogoTexto,
  CodeplexDialogoAcciones,
} from '@codeplex-sac/feedback';
import { CodeplexBoton } from '@codeplex-sac/ui';

export const Ejemplo = () => (
  <CodeplexDialogo abierto={true} alCerrar={() => {}}>
    <CodeplexDialogoTitulo>Confirmar eliminación</CodeplexDialogoTitulo>
    <CodeplexDialogoContenido>
      <CodeplexDialogoTexto>
        ¿Estás seguro de que deseas eliminar este registro? Esta acción no se puede deshacer.
      </CodeplexDialogoTexto>
    </CodeplexDialogoContenido>
    <CodeplexDialogoAcciones>
      <CodeplexBoton variante="fantasma" texto="Cancelar" alHacerClick={() => {}} />
      <CodeplexBoton variante="peligro" texto="Eliminar" alHacerClick={() => {}} />
    </CodeplexDialogoAcciones>
  </CodeplexDialogo>
);

Props de CodeplexDialogo: | Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | abierto | boolean | — | Controla la visibilidad del diálogo. | | alCerrar | () => void | — | Callback al cerrar (clic en fondo o Esc). | | anchoMaximo | 'diminuto' \| 'pequeno' \| 'mediano' \| 'grande' \| 'enorme' | 'pequeno' | Ancho máximo del panel. | | anchoCompleto | boolean | false | Ocupa el ancho máximo definido. | | pantallaCompleta | boolean | false | Ocupa toda la pantalla. |

CodeplexModal

Contenedor modal de propósito general con cabecera y botón de cierre integrados.

Ejemplo:

import { CodeplexModal } from '@codeplex-sac/feedback';
import { useState } from 'react';

export const Ejemplo = () => {
  const [abierto, setAbierto] = useState(false);

  return (
    <>
      <button onClick={() => setAbierto(true)}>Abrir modal</button>
      <CodeplexModal
        abierto={abierto}
        titulo="Detalles del pedido"
        alCerrar={() => setAbierto(false)}
      >
        <p>Contenido del modal</p>
      </CodeplexModal>
    </>
  );
};

Props: | Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | abierto | boolean | — | Controla la visibilidad. | | titulo | ReactNode | — | Título de la cabecera. | | alCerrar | () => void | — | Callback al cerrar. | | anchoMaximo | 'diminuto' \| 'pequeno' \| 'mediano' \| 'grande' \| 'enorme' | 'pequeno' | Ancho máximo del panel. | | anchoCompleto | boolean | true | Ocupa el ancho máximo. | | children | ReactNode | — | Contenido interno del modal. |

CodeplexMensajeEmergente

Tooltip avanzado con estilos cristal y múltiples animaciones (Zoom, Fade, Grow).

Ejemplo:

import { CodeplexMensajeEmergente } from '@codeplex-sac/feedback';
import { CodeplexBoton } from '@codeplex-sac/ui';

export const Ejemplo = () => (
  <CodeplexMensajeEmergente
    contenido="Guarda los cambios del formulario"
    lado="arriba"
    color="oscuro"
  >
    <CodeplexBoton texto="Guardar" variante="primario" />
  </CodeplexMensajeEmergente>
);

Props: | Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | contenido | ReactNode | — | Texto o elemento dentro del tooltip. | | lado | 'arriba' \| 'abajo' \| 'izquierda' \| 'derecha' | 'arriba' | Posición relativa al hijo. | | color | 'oscuro' \| 'claro' \| 'primario' \| 'azul' | 'oscuro' | Esquema de color del globo. | | distancia | number | 8 | Separación en px del elemento base. | | children | ReactNode | — | Elemento que activa el tooltip. |

CodeplexVentanaEmergente

Popover completo con cabecera, contenido libre y control de posicionamiento.

Ejemplo:

import { CodeplexVentanaEmergente } from '@codeplex-sac/feedback';
import { useState } from 'react';

export const Ejemplo = () => {
  const [ancla, setAncla] = useState<HTMLButtonElement | null>(null);

  return (
    <>
      <button onClick={(e) => setAncla(e.currentTarget)}>Abrir</button>
      <CodeplexVentanaEmergente
        abierto={Boolean(ancla)}
        elementoAncla={ancla}
        titulo="Filtros avanzados"
        alCerrar={() => setAncla(null)}
      >
        <p>Opciones de filtro aquí</p>
      </CodeplexVentanaEmergente>
    </>
  );
};

Props: | Propiedad | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | abierto | boolean | — | Controla la visibilidad. | | elementoAncla | HTMLElement \| null | — | Elemento de referencia para posicionarse. | | titulo | ReactNode | — | Cabecera del panel. | | alCerrar | () => void | — | Callback al cerrar. | | colocacion | 'arriba' \| 'arriba-inicio' \| 'arriba-fin' \| 'abajo' \| 'abajo-inicio' \| 'abajo-fin' \| 'izquierda' \| 'derecha' | 'abajo-inicio' | Posición relativa al ancla. | | children | ReactNode | — | Contenido del panel. |

Personalización

Todos los componentes heredan la configuración de CodeplexProveedorTema. El estilo cristal usa backdropFilter y se adapta automáticamente al modo oscuro.

Licencia

Propiedad privada de Codeplex SAC. Todos los derechos reservados.