Minerva Components Library

Minerva Components Library es una colección de componentes React reutilizables y estilizados, diseñados para facilitar la construcción de interfaces de usuario consistentes y modernas.

Instalación

Puedes instalar la biblioteca a través de npm:

npm install minerva-components-library

Uso

A continuación se muestra un ejemplo básico de cómo importar y utilizar ModalMinerva en tu aplicación React.

Uso de Fuentes

Para asegurar que los componentes utilicen la fuente "Open Sans", incluye la siguiente línea en el archivo HTML principal o en el CSS global:

<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap"
  rel="stylesheet"
/>

Importar

import React, { useState } from 'react';
import { ModalMinerva } from 'minerva-components-library'; // Importa el componente desde la biblioteca

function App() {
const [isOpen, setIsOpen] = useState(false);

const handleOpen = () => setIsOpen(true);
const handleClose = () => setIsOpen(false);

return (
<div className="App">
<button onClick={handleOpen}>Open Modal</button>
<ModalMinerva
        isOpen={isOpen}
        onClose={handleClose}
        title="My Modal Title"
        ariaLabel="Modal Example"
      >
<p>This is the content of the modal.</p>
</ModalMinerva>
</div>
);
}
export default App;

Props del Componente ModalMinerva

| Prop | Tipo | Predeterminado | Descripción | | ---------------------- | --------------- | -------------- | --------------------------------------------------------------- | | isOpen | boolean | false | Indica si el modal está abierto (true) o cerrado (false). | | onClose | () => void | - | Función que se llama cuando se cierra el modal. | | title | string | - | Título del modal que se muestra en la parte superior. | | children | ReactNode | - | Contenido del modal. Puede incluir cualquier nodo React. | | customStyles | CSSProperties | {} | Estilos CSS personalizados para el contenedor del modal. | | testId | string | - | Identificador de prueba para seleccionar el modal en los tests. | | ariaLabel | string | - | Etiqueta aria para accesibilidad. | | width | string | "50%" | Ancho del contenido del modal. | | height | string | "auto" | Altura del contenido del modal. | | disableBackdropClick | boolean | false | Si es true, no se cierra el modal al hacer clic en el fondo. | | data | any | - | Información adicional que se puede mostrar dentro del modal. | | className | string | - | Clase CSS personalizada para el contenedor del modal. |

Props del Componente AlertMessMinerva

Componente de alerta que muestra mensajes de diferentes tipos y puede cerrarse automáticamente después de 5 segundos o manualmente a través de un botón de cierre.

| Propiedad | Tipo | Opcional | Descripción | | ----------- | ---------- | -------- | ---------------------------------------------------------------------------------------------- | | type | string | Sí | Tipo de alerta (success, error, warning, info). Por defecto es info. | | message | string | No | Mensaje que se muestra en la alerta. | | onClose | function | Sí | Función que se llama al hacer clic en el botón de cierre. | | autoClose | boolean | Sí | Determina si la alerta se cierra automáticamente después de 5 segundos. Por defecto es true. | | className | string | Sí | Clase CSS personalizada para el componente. | | testId | string | Sí | Identificador de prueba para el componente. |

Props del Componente AlertModal

Componente de modal que muestra un mensaje y proporciona opciones para cerrar, confirmar o cancelar.

| Propiedad | Tipo | Opcional | Descripción | | ------------------- | ---------- | -------- | ------------------------------------------------------------------- | | title | string | No | Título del modal. | | message | string | No | Mensaje que se muestra en el modal. | | isOpen | boolean | No | Determina si el modal está abierto o cerrado. | | onClose | function | No | Función que se llama al hacer clic en el botón de cierre. | | onConfirm | function | Sí | Función que se llama al hacer clic en el botón de confirmar. | | onCancel | function | Sí | Función que se llama al hacer clic en el botón de cancelar. | | showCloseButton | boolean | Sí | Muestra el botón de cierre si es true. Por defecto es true. | | showConfirmButton | boolean | Sí | Muestra el botón de confirmar si es true. Por defecto es false. | | showCancelButton | boolean | Sí | Muestra el botón de cancelar si es true. Por defecto es false. | | className | string | Sí | Clase CSS personalizada para el componente. | | testId | string | Sí | Identificador de prueba para el componente. |

Props del Componente CheckboxMinerva

import { CheckboxMinerva } from "minerva-components-library";

Componente de checkbox que permite seleccionar o deseleccionar una opción.

| Propiedad | Tipo | Opcional | Descripción | | ----------- | ---------- | -------- | ------------------------------------------------------- | | label | string | No | Etiqueta que se muestra junto al checkbox. | | checked | boolean | No | Determina si el checkbox está marcado. | | onChange | function | No | Función que se llama al cambiar el estado del checkbox. | | disabled | boolean | Sí | Deshabilita el checkbox si es true. | | className | string | Sí | Clase CSS personalizada para el componente. | | testId | string | Sí | Identificador de prueba para el componente. |

Props del Componente DateInputMinerva

import { DateInputMinerva } from 'minerva-components-library';

Componente de campo de entrada para seleccionar fechas.

| Propiedad | Tipo | Opcional | Descripción | | ------------- | ---------- | -------- | ------------------------------------------------------------------ | | value | string | No | Valor actual del campo de fecha. | | onChange | function | No | Función que se llama al cambiar el valor del campo de fecha. | | placeholder | string | Sí | Texto de marcador de posición que se muestra en el campo de fecha. | | label | string | Sí | Etiqueta que se muestra antes del campo de fecha. | | disabled | boolean | Sí | Deshabilita el campo de fecha si es true. | | className | string | Sí | Clase CSS personalizada para el componente. | | testId | string | Sí | Identificador de prueba para el componente. |

Props del Componente RadioMinerva

import { RadioMinerva } from 'minerva-components-library';

Props:

• name (string): Nombre del grupo de opciones de radio.
• selectedValue (string): Valor seleccionado actualmente.
• onChange (function): Función que se llama cuando se selecciona una opción.
• label (string): Etiqueta que acompaña al grupo de radio.
• options (Array<{ value: string, label: string }>): Opciones disponibles en el grupo de radio.
• disabled (boolean): Desactiva el grupo de radio si se establece en true.

Props del Componente SelectMinerva

import { SelectMinerva } from 'minerva-components-library';

Props:

• options (Array<{ value: string, label: string }>): Lista de opciones disponibles en el select.
• value (string): Valor seleccionado actualmente.
• onChange (function): Función que se llama cuando se selecciona una opción.
• placeholder (string): Texto del placeholder cuando no hay ninguna opción seleccionada.
• label (string): Etiqueta que acompaña al select.
• disabled (boolean): Desactiva el select si se establece en true.

Props del componente SearchInputMinerva

import { SearchInputMinerva } from 'minerva-components-library';

Props:

• value (string): Valor actual del input de búsqueda.
• onChange (function): Función que se llama cuando se cambia el valor del input.
• placeholder (string): Texto del placeholder.
• label (string): Etiqueta que acompaña al input de búsqueda.
• disabled (boolean): Desactiva el input de búsqueda si se establece en true.

Props del componente TextareaMinerva

Importación:

import { TextareaMinerva } from 'minerva-components-library';

Props:

• value (string): Valor actual del textarea.
• onChange (function): Función que se llama cuando se cambia el valor del textarea.
• placeholder (string): Texto del placeholder.
• label (string): Etiqueta que acompaña al textarea.
• rows (number): Número de filas visibles en el textarea.
• disabled (boolean): Desactiva el textarea si se establece en true.

Props del componente TextInputMinerva

Ejemplo

 <TextInputMinerva
      iconClickable={true}
      haveIcon={true}
      icon={<EyeIconMinerva />}  // Icono personalizado
      label="Password"
      value={password}
      placeholder="Enter your password"
      onChange={(e) => setPassword(e.target.value)}
      onIconClick={handleIconClick} // Pasando la función como prop
      id="password"
      required
      data-testid="password-input"
      type="password"  // Tipo de input password
    />

| Prop | Tipo | Descripción | Predeterminado | | --------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | | value | string | El valor del campo de entrada. | - | | onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | Función que se ejecuta cuando el valor del campo de entrada cambia. | - | | placeholder | string | Texto de marcador de posición en el campo de entrada. | - | | label | string | Texto de la etiqueta para el campo de entrada. | - | | labelposition | "block" \| "inline" | Posición de la etiqueta: block la coloca arriba del campo de entrada, inline la coloca al lado del campo de entrada. | "block" | | onIconClick | () => void | Función que se ejecuta cuando se hace clic en el icono (si está presente). | undefined | | haveIcon | boolean | Determina si se muestra un icono a la derecha del campo de entrada. | true | | icon | string \| React.ReactNode | Icono a mostrar: puede ser una URL a un SVG, o un componente React. | DefaultIcon | | iconClickable | boolean | Determina si el icono es clickable. Si es false, no ejecuta onIconClick y muestra el cursor estándar. | true | | type | string | "text" | El tipo de input, como text, password, email, etc. |

Props del componente ButtonGroupMinerva

import { ButtonGroupMinerva } from 'minerva-components-library';

Props:

• children (ReactNode): Los botones u otros elementos que se mostrarán dentro del grupo. Generalmente se usaría con ActionButtonMinerva.

Descripción:

ButtonGroupMinerva es un contenedor que organiza varios botones (u otros elementos) en una disposición específica, alineándolos horizontalmente con un espaciado uniforme entre ellos. Es ideal para usar en conjunto con ActionButtonMinerva, pero puede contener cualquier otro componente que necesites organizar en un grupo.

Props del componente ActionButtonMinerva

ActionButtonMinerva es un componente de botón reutilizable, diseñado para ser altamente configurable tamaños, variantes, colores y otros parámetros.

| Propiedad | Tipo | Valor por Defecto | Descripción | | -------------- | --------------------------------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------- | | label | string | "" | Texto que se mostrará dentro del botón. | | onClick | () => void | undefined | Función que se llamará al hacer clic en el botón. | | onKeyDown | (event: React.KeyboardEvent<HTMLButtonElement>) => void | undefined | Función opcional que se llamará al presionar una tecla mientras el botón está enfocado. | | size | "big", "middle", "small" | "big" | Tamaño del botón. | | variant | "filled", "outlined" | "filled" | Tipo de botón que define si es relleno o solo borde. | | color | "primary", "secondary", "tertiary" | "primary" | Color del botón, define el esquema de color para los bordes, fondo y texto. | | borderradius | string | "100px" | Define el radio de las esquinas del botón. | | customStyle | React.CSSProperties | undefined | Objeto de estilos en línea para aplicar estilos CSS personalizados al botón. | | width | string | "123px" | Ancho del botón. Se puede especificar en pixeles o porcentaje (e.g., fullwidth para 100%). | | type | "button", "submit", "reset" | "button" | Tipo de botón, útil para formularios. | | data-testid | string | undefined | Atributo para propósitos de prueba, utilizado para identificar el botón en los tests. | | className | string | undefined | Nombre de clase adicional para aplicar estilos personalizados desde archivos CSS o styled-components. |

Ejemplo de Uso

import React from "react";
import { ActionButtonMinerva } from "minerva-components-library";

const MyComponent = () => {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <div>
      <ActionButtonMinerva
        label="Click Me"
        onClick={handleClick}
        size="middle"
        variant="outlined"
        color="secondary"
        borderradius="8px"
        width="150px"
        customStyle={{ margin: "10px" }}
        className="my-custom-class"
        data-testid="my-button"
      />
    </div>
  );
};

export default MyComponent;

Ejemplo de Uso Conjunto:

import React from 'react';
import { ButtonGroupMinerva, ActionButtonMinerva } from 'minerva-components-library';

function App() {
return (
<ButtonGroupMinerva>
<ActionButtonMinerva label="Button 1" onClick={() => console.log('Button 1 clicked')} />
<ActionButtonMinerva label="Button 2" onClick={() => console.log('Button 2 clicked')} />
<ActionButtonMinerva label="Button 3" onClick={() => console.log('Button 3 clicked')} />
</ButtonGroupMinerva>
);
}

export default App;

Nota:

Aunque ButtonGroupMinerva y ActionButtonMinerva están diseñados para funcionar bien juntos, ambos componentes pueden utilizarse de manera independiente en tu aplicación.

Props del componente NotFoundPageMinerva

import { NotFoundPageMinerva } from 'minerva-components-library';

Props:

• title (string): Título que se muestra en la página. Por defecto es "404 - Page Not Found".
• message (string): Mensaje adicional que se muestra debajo del título. Por defecto es "Sorry, the page you are looking for does not exist."
• redirectLabel (string): Texto del botón de redirección. Por defecto es "Go to Homepage".
• onRedirect (function): Función llamada al hacer clic en el botón de redirección. Puedes utilizarla para navegar a la página principal o a cualquier otra ruta.
• imageSrc (string): URL de una imagen opcional para mostrar en la página, lo que ayuda a mejorar la experiencia visual.
• customStyles (CSSProperties): Estilos personalizados para sobrescribir los estilos predeterminados de la página.

Descripción:

NotFoundPageMinerva es un componente reutilizable que muestra una página de "No encontrado" (404) cuando un usuario intenta acceder a una página que no existe. Este componente es ideal para manejar errores de navegación y mejorar la experiencia del usuario.

Ejemplo de Uso:

import React from 'react';
import { NotFoundPageMinerva } from 'minerva-components-library';

function App() {
const handleRedirect = () => {
// Redirige a la página de inicio o a otra página
window.location.href = '/';
};

return (
<NotFoundPageMinerva
      title="Oops! Page Not Found"
      message="We can't seem to find the page you're looking for."
      redirectLabel="Return Home"
      onRedirect={handleRedirect}
      imageSrc="https://via.placeholder.com/400x300"
    />
);
}

export default App;

Props del componente TooltipMinerva

import { TooltipMinerva } from 'minerva-components-library';

Props:

• text (string): El texto que se muestra en el tooltip.
• position (string): La posición del tooltip en relación con el elemento. Puede ser "top", "bottom", "left", "right". Por defecto, "top".
• trigger (ReactNode): El elemento que, al pasar el mouse o enfocar, activará el tooltip.
• backgroundColor (string): El color de fondo del tooltip. Por defecto, negro.
• textColor (string): El color del texto dentro del tooltip. Por defecto, blanco.
• customStyles (CSSProperties): Estilos personalizados para sobrescribir los estilos predeterminados del tooltip.
• delay (number): El retraso en milisegundos antes de que el tooltip aparezca después de que el usuario interactúe con el elemento.

Descripción:

TooltipMinerva es un componente que permite agregar información adicional o explicaciones a un elemento en la interfaz, que se muestra al pasar el mouse o enfocar dicho elemento. Es ideal para proporcionar detalles sin ocupar espacio adicional en la pantalla.

Uso Sugerido:

• Iconos y Botones: Usa TooltipMinerva para proporcionar una breve explicación de iconos o botones cuyo propósito no es inmediatamente obvio para los usuarios.
• Campos de Formularios: Añade tooltips a campos de formulario complicados para proporcionar ejemplos o instrucciones adicionales.
• Advertencias: Utiliza tooltips para advertir a los usuarios sobre posibles errores o problemas si interactúan con un elemento de cierta manera.

Ejemplo de Uso:

import React from 'react';
import { TooltipMinerva } from 'minerva-components-library';

function App() {
return (
<div className="App">
<TooltipMinerva
text="This is a tooltip"
position="top"
trigger={<button>Hover over me</button>}
backgroundColor="black"
textColor="white"
delay={300}
/>
</div>
);
}

export default App;

Props del componente LoaderMinerva

import { LoaderMinerva } from 'minerva-components-library';

Componente de cargador que muestra una animación de carga.

| Propiedad | Tipo | Opcional | Descripción | | ----------- | --------- | -------- | ------------------------------------------- | | type | string | No | Tipo de cargador (fullscreen, small). | | show | boolean | No | Muestra u oculta el cargador. | | className | string | Sí | Clase CSS personalizada para el componente. | | testId | string | Sí | Identificador de prueba para el componente. |

Uso:

El LoaderMinerva es un componente versátil que permite mostrar loaders de pantalla completa o loaders pequeños en botones y otros elementos. Simplemente elige el tipo y controla su visibilidad con la prop show.

GRID: ContainerMinerva

import { ContainerMinerva } from 'minerva-components-library';

Props:

• fluid (boolean): Define si el contenedor debe ser de ancho completo (true) o limitado a anchos específicos (false). Por defecto, false.
• customStyles (CSSProperties): Estilos personalizados para sobrescribir los estilos predeterminados.

GRID: RowMinerva

import { RowMinerva } from 'minerva-components-library';

Props:

• customStyles (CSSProperties): Estilos personalizados para sobrescribir los estilos predeterminados.

GRID: ColMinerva

import { ColMinerva } from 'minerva-components-library';

Props:

• size (number): Tamaño de la columna en un sistema de 12 columnas. Por defecto, es 12.
• sm (number): Tamaño de la columna para pantallas pequeñas (≥576px).
• md (number): Tamaño de la columna para pantallas medianas (≥768px).
• lg (number): Tamaño de la columna para pantallas grandes (≥992px).
• xl (number): Tamaño de la columna para pantallas extra grandes (≥1200px).
• xxl (number): Tamaño de la columna para pantallas extra extra grandes (≥1400px).
• customStyles (CSSProperties): Estilos personalizados para sobrescribir los estilos predeterminados.

GRID: CardMinerva

import { CardMinerva } from 'minerva-components-library';

Componente de tarjeta para mostrar contenido dentro de un contenedor estilizado.

| Propiedad | Tipo | Opcional | Descripción | | -------------- | --------------------- | -------- | ------------------------------------------- | | customStyles | React.CSSProperties | Sí | Estilos CSS personalizados para la tarjeta. | | className | string | Sí | Clase CSS personalizada para el componente. | | children | React.ReactNode | No | Contenido de la tarjeta. | | testId | string | Sí | Identificador de prueba para el componente. |

Beneficios y Sugerencias de Uso

Este sistema de grid permite a los desarrolladores crear layouts flexibles y reutilizables, con el mismo comportamiento responsive que ofrece Bootstrap 5, pero encapsulado en componentes React. Se pueden usar en conjunto o de manera individual, según las necesidades del proyecto.

BackgroundGraphicMinerva

Es un componente React que renderiza un gráfico SVG como fondo, simulando un patrón de ondas de mar animadas. Este componente es ideal para usar como fondo decorativo en un layout o en secciones específicas de una aplicación.

import BackgroundGraphicMinerva from "minerva-components-library/dist/components/BackgroundGraphicMinerva/BackgroundGraphicMinerva";

LogotipoMinerva

LogotipoMinerva es un componente que renderiza el logotipo de Minerva con diferentes tamaños y versiones (light/dark). También permite personalizar el tamaño del logotipo según sea necesario.

El componente LogotipoMinerva muestra el logotipo de Minerva en diferentes tamaños y versiones. Ahora incluye las propiedades className y testId para facilitar la personalización y las pruebas.

Propiedades

| Propiedad | Tipo | Opcional | Descripción | | ----------- | -------- | -------- | -------------------------------------------------------------------------- | | logosize | string | Sí | Tamaño del logotipo (small, medium, large). Por defecto es medium. | | version | string | Sí | Versión del logotipo (light, dark). Por defecto es light. | | className | string | Sí | Clase CSS personalizada para el componente. | | testId | string | Sí | Identificador de prueba para el componente. |

Ejemplos de Uso

import LogotipoMinerva from "minerva-components-library";

const MyComponent = () => (
  <div>
    {/* Logotipo por defecto (versión light, tamaño medium) */}
    <LogotipoMinerva />

    {/* Logotipo versión dark */}
    <LogotipoMinerva version="dark" />

    {/* Logotipo pequeño */}
    <LogotipoMinerva logosize="small" />

    {/* Logotipo grande con clase personalizada */}
    <LogotipoMinerva logosize="large" className="my-custom-class" />
  </div>
);

Biblioteca de Iconos

import { HomeIconMinerva, EyeIconMinerva, AtIconMinerva } from 'minerva-components-library';

const MyComponent = () => (
  <div>
    <HomeIconMinerva size={24} color="#003E57" variant="outline" />
    <EyeIconMinerva size={24} color="#003E57" />
    <AtIconMinerva size={24} color="#FF6347" />
  </div>
);

Icon Props

| Prop Name | Type       | Default   | Description                     |
| --------- | ---------- | --------- | ------------------------------- | -------------------------------------------------- |
| `size`    | `number`   | `24`      | The size of the icon in pixels. |
| `color`   | `string`   | `#003E57` | The color of the icon.          |
| `variant` | `'outline' | 'filled'` | `outline`                       | Determines whether the icon is outlined or filled. |

Layout Minerva

LayoutMinerva es un componente de layout flexible y responsive que puede ser utilizado en cualquier aplicación para estructurar contenido con una barra lateral y una sección principal. El diseño del componente cambia automáticamente de una disposición vertical a una horizontal dependiendo del ancho de la pantalla.

Instalación

Primero, asegúrate de tener styled-components instalado en el proyecto, ya que este componente depende de él.

npm install styled-components
yarn add styled-components

Luego, importa el componente LayoutMinerva desde la biblioteca:

import LayoutMinerva from 'minerva-components-library';

Uso

Puedes usar el componente LayoutMinerva para crear un diseño que incluya una barra lateral y contenido principal. Aquí hay un ejemplo básico:

import React from 'react'; import LayoutMinerva from 'minerva-components-library'; const App = () => { return (
  <LayoutMinerva sidebar={<nav>Sidebar content</nav>}
  layoutBackColor="#f0f0f0"
  sidebarBackColor="#d0d0d0"
  testId="layout-minerva"
  sidebarTestId="sidebar-test-id" >
  <div>{children}</div>
  </LayoutMinerva> );
  };

export default App;

Props

| Prop | Tipo | Descripción | Predeterminado |

| ---------- | ----------- | ------------------------------------------------------------------- |

| children | ReactNode | Contenido principal del layout que se renderiza en MainContent. | undefined |

| sidebar | ReactNode | Contenido de la barra lateral que se renderiza en Sidebar. | undefined |

| layoutBackColor | string | Color de fondo para el contenedor principal del layout. | "inherit" |

| sidebarBackColor | string | Color de fondo para el contenedor de la barra lateral. | "inherit" |

| testId | string | Identificador para pruebas para el contenedor principal del layout. | undefined |

| sidebarTestId | string | Identificador para pruebas para el contenedor de la barra lateral. | undefined | | className | string | Clase CSS adicional para personalizar el contenedor principal del layout. | undefined |

Comportamiento Responsive

Estos son los estilos por defecto, pero se puede indicar el punto de ruptura con el parámetro:

responsiveBreakpoint="600px"

• Desktop (más de 768px): La barra lateral se muestra verticalmente al lado izquierdo del contenido principal.
• Móvil (menos de 769px): La barra lateral se convierte en un "header" horizontal que se muestra en la parte superior, ocupando todo el ancho de la pantalla.

Estilos Personalizados

Puedes utilizar layoutBackColor y sidebarBackColor para aplicar colores de fondo personalizados. También puedes pasar clases CSS personalizadas a través de className para un estilo más avanzado.

Changes for build to publish:

Secuencia de comandos para publicar la librería usando yarn Asegúrate de que tu repositorio esté limpio y actualizado:

git status

Si hay cambios pendientes, asegúrate de confirmarlos o hacer stash.

Instala las dependencias:

yarn install

Construye la librería:

yarn build
tsc --project tsconfig.lib.json
tsc --project tsconfig.cjs.json
node fix-imports.cjs
yarn copy-assets

Este comando ejecutará ambos builds (esm y cjs) y luego ejecutará el script fix-imports.cjs para ajustar las importaciones.

Incrementa la versión de la librería:

yarn version --patch

O puedes usar --minor o --major dependiendo de los cambios.

Publica la librería:

yarn publish --new-version <new-version>

Empuja los cambios al repositorio remoto (si aplicable):

git push origin <branch-name> --tags

Esto incluye las etiquetas de la versión, lo cual es importante para mantener el seguimiento de las versiones publicadas.

Author: [email protected]