minerva-components-library v2.1.5

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

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.

Props del Componente AlertModal

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

Props del Componente CheckboxMinerva

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

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

Props del Componente DateInputMinerva

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

Componente de campo de entrada para seleccionar fechas.

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
    />

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.

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.

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.

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

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 (NPM):

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

Publica la librería (Gitlab Packages):

yarn version --patch
yarn build && yarn publish --new-version 2.0.77 --no-git-tag-version --registry=https://repo.plexus.services/api/v4/projects/2724/packages/npm/

Empuja los cambios al repositorio remoto (si aplicable):

git push origin <branch-name> --tags

IMPORTANTE: los proyectos que instalen la libreria de componente minerva deben tener en la raiz de su proyecto un archivo .npmrc con el contenido:

@building_blocks:registry=https://repo.plexus.services/api/v4/projects/2724/packages/npm/
//repo.plexus.services/api/v4/projects/2724/packages/npm/:_authToken=<TU TOKEN AUTH CON SCOPE API>

y posteriormente instalar con el comando

yarn add @building_blocks/minerva-components-library

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

Author: rafael.penyavargas@plexus.tech