lb-comp-test-bcie

Una librería React institucional, basada en Material-UI, pero con componentes personalizados para adaptarse a estéticas y requerimientos corporativos específicos.

Install

npm install --save lb-comp-test-bcie

Importar la hoja de estilos en un componente superior.

import "lb-comp-test-bcie/dist/index.css";

Components

• [x] Alerts
• [x] Autocomplete
• [x] Button
• [x] ButtonDelete
• [x] ButtonEdit
• [x] ButtonSubmit
• [x] Checkbox
• [x] DatePicker
• [x] MultiSelect
• [x] RadioButton
• [x] Select
• [x] Stepper
• [x] Switch
• [x] TextArea
• [x] TextField
• [x] Modal
• [x] Accordions

Usage

BCIESweetAlert

Muestra una alerta personalizada utilizando íconos de Material-UI y SweetAlert.

Ejemplo de uso

import { Button } from "@material-ui/core";
import React from "react";
import { BCIESweetAlert } from "lb-comp-test-bcie";

export default function AlertTest() {
  const handleSuccessAlert = () => {
    BCIESweetAlert("Éxito", "Operación realizada con éxito", "success");
  };

  const handleErrorAlert = () => {
    BCIESweetAlert("Error", "Operación realizada con éxito", "error");
  };

  const handleInformationAlert = () => {
    BCIESweetAlert(
      "Information",
      "Operación realizada con éxito",
      "information"
    );
  };

  const handleWarningAlert = () => {
    BCIESweetAlert("Warning", "Operación realizada con éxito", "warning");
  };

  return (
    <div>
      <h1 className="txt-theme">Alert Test</h1>
      <Button
        className="txt-theme"
        onClick={handleSuccessAlert}
        variant="filled"
      >
        Success
      </Button>
      <Button
        className="txt-theme"
        onClick={handleInformationAlert}
        variant="filled"
      >
        Information
      </Button>
      <Button className="txt-theme" onClick={handleErrorAlert} variant="filled">
        Error
      </Button>
      <Button
        className="txt-theme"
        onClick={handleWarningAlert}
        variant="filled"
      >
        Warning
      </Button>
    </div>
  );
}

BCIEAutocomplete es un componente de React que utiliza el componente Autocomplete de Material-UI y permite al usuario seleccionar una opción de buscar una lista de opciones.

Propiedades

• title: (opcional) Es el título que se mostrará en el campo de texto. El valor predeterminado es una cadena vacía.
• variant: (opcional) Es la variante del componente TextField de Material-UI. El valor predeterminado es 'outlined'.
• rows: Es un array de objetos que contienen las opciones a mostrar en el Autocomplete. Cada objeto debe contener un id y un title.
• name: Es el nombre del campo. Se utilizará para actualizar el objeto data.
• setData: Es una función que se utilizará para actualizar el objeto data.
• data: Es un objeto que contiene los datos del formulario.
• id: Identificador unico del elemento.

Uso

import React, { useState } from "react";
import { BCIEAutocomplete } from "ruta/del/componente";

const MiComponente = () => {
  const [data, setData] = useState({});

  const opciones = [
    { id: 1, title: "Opción 1" },
    { id: 2, title: "Opción 2" },
    // ... otras opciones
  ];

  return (
    <BCIEAutocomplete
      title="Mi Autocomplete"
      variant="outlined"
      rows={opciones}
      name="miAutocomplete"
      setData={setData}
      data={data}
    />
  );
};

export default MiComponente;

BCIEButtonDelete es un componente que renderiza un botón con un icono de eliminar.

Props

• children (Requerido): Los elementos hijos del componente. Tipo: React.ReactNode.
• variant (Opcional): La variante del botón. Puede ser 'fill' o 'outline'. Tipo: string.
• id (Requerido): Identificador unico.
• disabled (Opcional): Si true, el botón estará deshabilitado. Tipo: boolean. Default: false.

Uso

// Renderiza un botón rojo con un icono de eliminar y el texto 'Eliminar'.
<BCIEButtonDelete
  onClick={() => console.log("Press btn delete")}
  id={"btn-d-1"}
  variant="inline"
>
  Eliminar
</BCIEButtonDelete>

BCIEButtonEdit es un componente de React que renderiza un botón con un icono de edición (lápiz) de Material-UI. Este componente es altamente personalizable, permitiendo cambiar el color de fondo, el color del icono y el contenido del botón.

Uso

Para utilizar este componente, importa BCIEButtonEdit de tu biblioteca de componentes y úsalo en tu componente de React.

import { BCIEButtonEdit } from "ruta/de/tu/biblioteca";

//...
<BCIEButtonEdit variantColor="2" id="btn-edit">
  Editar
</BCIEButtonEdit>;

Props

• id (Requerido): Identificador unico.

• variantColor: (string) Define el color principal del botón. Puede tomar uno de los siguientes valores:

  • '1': Azul oscuro (#02195a)
  • '2': Azul (#0347d0)
  • '3': Verde (#14c66e)
  • '4': Gradiente de azul a verde Default: '1'.

• children: (React.ReactNode) Define el contenido del botón, generalmente será un texto. Por ejemplo: "Editar".

• variant: (string) Define la apariencia del botón. Puede ser:

  • 'fill': Botón sólido con fondo del color principal y texto blanco.
  • 'outline': Botón con borde del color principal y fondo transparente. Default: 'fill'.

• ...rest: (any) Cualquier otra prop pasada al componente se propagará al componente Button de Material-UI.

Ejemplo

<BCIEButtonEdit
  onClick={() => console.log("Press btn edit")}
  id="btn-edit"
  variantColor="3"
  variant="outline"
>
  Editar
</BCIEButtonEdit>

Esto renderizará un botón con borde verde, fondo transparente, un icono de edición verde y el texto "Editar".

BCIEButtonSubmit

BCIEButtonSubmit es un componente de React que renderiza un botón con un icono de envío (flecha) de Material-UI. Este componente es altamente personalizable, permitiendo cambiar el color de fondo, el color del icono y el contenido del botón.

Props

• id (string): Identificador único del botón. Es obligatorio.
• variantColor (string): Define el color principal del botón. Puede tomar uno de los siguientes valores: '1' (Azul oscuro), '2' (Azul), '3' (Verde), '4' (Azul claro). Default: '1'.
• children (React.ReactNode): Define el contenido del botón, generalmente será un texto. Por ejemplo: "Enviar". Es obligatorio.
• variant (string): Define la apariencia del botón. Puede ser 'fill' (Botón sólido con fondo del color principal y texto blanco) o 'outline' (Botón con borde del color principal y fondo transparente). Default: 'fill'.
• rest (object): Cualquier otra prop pasada al componente se propagará al componente Button de Material-UI.

Ejemplo de uso

<BCIEButtonSubmit
  onClick={() => console.log("Press btn submit")}
  id="submit-button"
  variantColor="3"
  variant="outline"
>
  Enviar
</BCIEButtonSubmit>

PropTypes

El componente BCIEButtonSubmit tiene los siguientes PropTypes:

BCIEButtonSubmit.propTypes = {
  id: PropTypes.string.isRequired,
  variantColor: PropTypes.string,
  children: PropTypes.node.isRequired,
  variant: PropTypes.string,
};

BCIEButton

BCIEButton es un componente de React que renderiza un botón de Material-UI. Este componente es altamente personalizable, permitiendo cambiar el color de fondo y el contenido del botón.

Props

• children (Requerido): React.ReactNode que define el contenido del botón, generalmente será un texto.
• id (required): string que define el identificador único del botón.
• variantColor (Opcional): string que define el color principal del botón. Puede tomar uno de los siguientes valores: '1', '2', '3', '4'. Default: '1'.
• rest (Opcional): object que representa cualquier otra prop pasada al componente y se propagará al componente Button de Material-UI.

Ejemplo de uso

import React from "react";
import { BCIEButton } from "./BCIEButton";

function App() {
  return (
    <div>
      <BCIEButton
        onClick={() => console.log("Press btn")}
        variantColor="2"
        id="test-button"
      >
        Click me
      </BCIEButton>
    </div>
  );
}

export default App;

BCIECheckbox

BCIECheckbox es un componente de React que renderiza un checkbox de color azul de Material-UI.

Props

• id: String. Identificador único del checkbox.
• name: (requerido) String. Nombre del item checkbox. Default: "".
• ...rest: (opcional) Object. Cualquier otra prop pasada al componente se propagará al componente Checkbox de Material-UI.

Ejemplo de uso

import React from "react";
import { BCIECheckbox } from "library_name";

function App() {
  return (
    <div>
      <BCIECheckbox
        id="checkbox1"
        checked={data.checkedA}
        name="checkedA"
        onChange={(event) =>
          setData({ ...data, [event.target.name]: event.target.checked })
        }
      />
    </div>
  );
}

export default App;

BCIEDatePicker

BCIEDatePicker es un componente de React que renderiza un selector de fecha (DatePicker) de Material-UI.

Props

• size (opcional): Define el tamaño del DatePicker. Puede ser 'small', 'medium' o 'large'. Default: 'medium'.
• variant (opcional): Define la variante del DatePicker. Puede ser 'standard', 'outlined' o 'filled'. Default: 'outlined'.
• id (requerido): Identificador único del DatePicker.
• label (opcional): Etiqueta del DatePicker.
• name (requerido): Nombre del DatePicker.
• value (opcional): Valor del DatePicker. Puede ser un objeto Date, una cadena de fecha ISO o null.
• error (opcional): Error del DatePicker. Puede ser cualquier valor.
• disabled (opcional): Define si el DatePicker está deshabilitado. Default: false.
• touched (opcional): Objeto que indica si el DatePicker ha sido tocado.
• onChange (requerido): Función que se llama cuando el valor del DatePicker cambia.

Uso

import React from "react";
import { BCIEDatePicker } from "path-to-component";

function App() {
  const [date, setDate] = React.useState(null);
  const [touched, setTouched] = useState({
    fechaNacimiento: false,
  });

  const handleDateChange = (e) => {
    const { name, value } = e.target;
    setData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  return (
    <div>
      <BCIEDatePicker
        id={"dp1"}
        label="Fecha de Nacimiento"
        name="fechaNacimiento"
        value={data.fechaNacimiento}
        onChange={handleDateChange}
        touched={touched}
        error={
          touched.fechaNacimiento && !data.fechaNacimiento
            ? "La fecha es requerida"
            : null
        }
      />
    </div>
  );
}

export default App;

Componente BCIEMultiSelect

BCIEMultiSelect es un componente React para renderizar un campo de selección múltiple. Utiliza los componentes FormControl, InputLabel, Select, y MenuItem de Material-UI para renderizar el campo de selección.

Props

• name (opcional): Una cadena que define el nombre del campo de selección múltiple. Por defecto es una cadena vacía.
• title (opcional): Una cadena que define el título del campo de selección múltiple. Por defecto es una cadena vacía.
• variant (opcional): Una cadena que define la variante del campo de selección múltiple. Puede ser 'standard', 'outlined' o 'filled'. Por defecto es 'outlined'.
• rows (opcional): Un array de cadenas que define las opciones disponibles para seleccionar. Por defecto es un array vacío.
• value (requerido): Un objeto que define los valores actualmente seleccionados.
• setValue (requerido): Una función que se llama cuando el valor seleccionado cambia.

Uso

Aquí hay un ejemplo de cómo usar el componente BCIEMultiSelect:

import React, { useState } from "react";
import { BCIEMultiSelect } from "./BCIEMultiSelect";

function EjemploComponente() {
  const [value, setValue] = useState({});

  const ListRoles = [
    "Acceso para usuarios PMU - CII",
    "Administrador Operaciones Externo",
  ];

  return (
    <BCIEMultiSelect
      rows={ListRoles}
      value={data}
      setValue={setData}
      name="roles"
      title="Roles"
      variant="filled"
    />
  );
}

export default EjemploComponente;

BCIERadioButton

BCIERadioButton es un componente de React que renderiza un botón de radio con un estilo personalizado.

Props

Este componente acepta todas las props y eventos que acepta el componente Radio de Material-UI, ya que las props que no están especificadas en esta documentación se pasan directamente al componente Radio.

Ejemplo

A continuación se muestra un ejemplo de cómo usar el componente BCIERadioButton:

import React from "react";
import { BCIERadioButton } from "path-to-component";

function EjemploComponente() {
  const [selectedValue, setSelectedValue] = React.useState("a");

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div>
      <p className="pt-2">Genero</p>
      <div style={{ display: "flex" }}>
        <div className="flex justify-center items-center">
          <BCIERadioButton
            checked={data?.gender === "M"}
            value={"M"}
            onChange={(event) =>
              setData({ ...data, gender: event.target.value })
            }
          />
          <p className="txt-theme">Masculino</p>
        </div>

        <div className="flex justify-center items-center">
          <BCIERadioButton
            checked={data?.gender === "F"}
            value={"F"}
            onChange={(event) =>
              setData({ ...data, gender: event.target.value })
            }
          />
          <p className="txt-theme">Femenino</p>
        </div>
      </div>
    </div>
  );
}

BCIESelect

El componente BCIESelect es un componente personalizado para seleccionar un valor de una lista de opciones. Se basa en el componente Select de Material-UI, pero con estilos y funcionalidades adicionales.

Props

• id: Identificador unico del elemento.
• value (String): Representa el valor actualmente seleccionado. Valor por defecto es una cadena vacía ''.
• titleValueDefault (String): Es una cadena que se mostrará cuando no se haya seleccionado ninguna opción.
• rows (Array): Un array de objetos que representan las opciones disponibles. Cada objeto debe tener una propiedad id que será el valor de la opción, y una propiedad title que será el texto mostrado de la opción.
• helperText (String, opcional): Es una cadena que representa el texto de ayuda que se mostrará debajo del select. Valor por defecto es undefined.
• onChange (Function): Es una función que se llamará cuando el valor seleccionado cambie.

Ejemplo de uso

import React, { useState } from "react";
import { BCIESelect } from "./BCIESelect";

function App() {
  const [value, setValue] = useState("");

  const options = [
    { id: "1", title: "Option 1" },
    { id: "2", title: "Option 2" },
    { id: "3", title: "Option 3" },
  ];

  return (
    <div>
      <BCIESelect
        id="select-options"
        value={value}
        titleValueDefault="Select an option"
        rows={options}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}

export default App;

BCIEStepper

El componente BCIEStepper se utiliza para guiar al usuario a través de una serie de pasos.

Props

• id: Identificador unico del elemento.
• btnBackTitle (String): Texto para el botón de regresar. Valor por defecto es 'Back'.
• btnNextTitle (String): Texto para el botón de siguiente. Valor por defecto es 'Next'.
• btnFinishTitle (String): Texto para el botón de finalizar. Valor por defecto es 'Finish'.
• JSXAllSteps (JSX.Element): JSX de todos los pasos.
• arraySteps (Array): Array de objetos que representan los pasos. Cada objeto debe tener una propiedad title que es el título del paso, una propiedad stepNumber que es el número del paso, una propiedad stateTitle que es el estado actual del paso, y una propiedad component que es el JSX del componente del paso.

Ejemplo de uso

import React from "react";
import { BCIEStepper } from "./BCIEStepper";

function App() {
  const steps = [
    {
      title: "Step 1",
      stepNumber: "1",
      stateTitle: "Completed",
      component: <div>Step 1 Content</div>,
    },
    {
      title: "Step 2",
      stepNumber: "2",
      stateTitle: "In Progress",
      component: <div>Step 2 Content</div>,
    },
    {
      title: "Step 3",
      stepNumber: "3",
      stateTitle: "Not Started",
      component: <div>Step 3 Content</div>,
    },
  ];

  return (
    <div>
      <BCIEStepper id="stepper-task" arraySteps={steps} />
    </div>
  );
}

export default App;

BCIESwitch

El componente BCIESwitch se utiliza para renderizar un interruptor IOS-like.

Props

• id: Identificador unico del elemento.
• value (Boolean): Estado actual del interruptor. Es requerido.
• setValue (Function): Función que se llama cuando el interruptor se activa/desactiva. Es requerido.
• rest (Object): Otras props que se deben pasar al componente Switch.

Ejemplo de uso

import React, { useState } from "react";
import { BCIESwitch } from "./BCIESwitch";

function App() {
  const [value, setValue] = useState(false);

  return (
    <div>
      <BCIESwitch id="switch-theme" value={value} setValue={setValue} />
    </div>
  );
}

export default App;

BCIETextArea

El componente BCIETextArea se utiliza para renderizar un área de texto.

Props

• id: Identificador unico del elemento.
• title (String): Título o placeholder para el área de texto. Valor por defecto: ''.
• value (String): Valor actual del área de texto. Valor por defecto: ''.
• rest (Object): Otras props que se deben pasar al componente TextareaAutosize.

Ejemplo de uso

import React, { useState } from "react";
import { BCIETextArea } from "./BCIETextArea";

function App() {
  const [value, setValue] = useState("");

  return (
    <div>
      <BCIETextArea
        id="text-area-obs"
        title="Escriba algo aquí"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}

export default App;

BCIETextField

BCIETextField es un componente React que renderiza un campo de texto utilizando el componente TextField de Material-UI.

Props

• id: Identificador unico del elemento.
• title (String): El título que se mostrará como etiqueta del campo de texto. Es requerido.
• value (String): El valor actual del campo de texto. Es requerido.
• setValue (Function): La función que se llamará cuando el valor del campo de texto cambie. Es requerido.
• variant (String): La variante del TextField. Puede ser 'standard', 'outlined', o 'filled'. Por defecto es 'outlined'.
• rest (Object): Cualquier otra propiedad que se quiera pasar al TextField de Material-UI.

Ejemplo de uso

import React, { useState } from "react";
import { BCIETextField } from "mi-libreria";

const MiFormulario = () => {
  const [nombre, setNombre] = useState("");

  return (
    <form>
      <BCIETextField
        id="textfield-name"
        title="Nombre"
        value={nombre}
        setValue={setNombre}
      />
      <button type="submit">Enviar</button>
    </form>
  );
};

export default MiFormulario;

Descripción

BCIEModal es un componente React que permite renderizar un modal o diálogo haciendo uso de los componentes proporcionados por Material-UI. Puedes controlar fácilmente la apertura y cierre del modal y personalizar su contenido.

Propiedades del Componente BCIEModal

Propiedades Obligatorias:

• id (string):
  • Descripción: Identificador único para el modal.
• open (boolean):
  • Descripción: Controla si el modal está actualmente abierto o cerrado.
• setOpen (función):
  • Descripción: Función para cambiar el estado de open.
• bodyBtnOpen (ReactNode):
  • Descripción: Nodo que, al ser clickeado, abrirá el modal.
• children (ReactNode):
  • Descripción: Contenido principal del modal.

Propiedades Opcionales:

• title (string):
  • Descripción: Título del modal.
  • Valor por defecto: "" (cadena vacía).
• maxWidth (enum):
  • Descripción: Ancho máximo del modal.
  • Valores posibles: "xs", "sm", "md", "lg", "xl".
  • Valor por defecto: "md".
• titleColorVariant (enum):
  • Descripción: Variante de color para el título.
  • Valores posibles: "ms1", "ms2", "ms3", "ms4".
  • Valor por defecto: "ms1".
• ...rest (Object):
  • Descripción: Cualquier otra propiedad que desees pasar al componente Dialog de Material-UI.

Cómo usar

const [openModal, setOpenModal] = useState(false);

return (
  <BCIEModal
    id={"bcie-modal"}
    open={open}
    setOpen={setOpen}
    titleColorVariant="ms2"
    title="This is modal example"
    maxWidth={"md"}
    bodyBtnOpen={
      <div>
        <IconButton>
          <Send />
        </IconButton>
        <p className="text-theme">Abrir modal</p>
      </div>
    }
  >
    <h1 className="text-theme">BCIE MODAL</h1>
  </BCIEModal>
);

BCIEAccordions

BCIEAccordions es un componente React que muestra una serie de acordeones con título, subtítulo y cuerpo.

Uso

const rowsData = [
  {
    title: "Acordeón 1",
    subTitle: "Subtítulo 1",
    body: <p>Contenido del acordeón 1</p>,
  },
  {
    title: "Acordeón 2",
    subTitle: "Subtítulo 2",
    body: <p>Contenido del acordeón 2</p>,
  },
];

<BCIEAccordions rows={rowsData} />;

License

MIT © Banco Centroamericano de Integración Económica (BCIE)

Dependencias

| Nombre | Versión | |--------|---------| | @emotion/styled | ^11.11.0 | | @material-ui/core | ^4.12.4 | | @material-ui/icons | ^4.11.2 | | @material-ui/lab | ^4.0.0-alpha.60 | | @material-ui/pickers | ^3.3.10 | | @mui/x-date-pickers | ^6.2.1 | | date-fns | ^2.28.0 | | prop-types | ^15.7.2 | | sweetalert | ^2.1.2 | | sweetalert2 | ^11.1.7 |

Peer Dependencias

| Nombre | Versión | |--------|---------| | react | ^17.0.2 |

Dev Dependencias

| Nombre | Versión | |--------|---------| | @babel/plugin-proposal-unicode-property-regex | ^7.18.6 | | @testing-library/react | ^11.2.7 | | babel-eslint | ^10.0.3 | | cross-env | ^7.0.2 | | eslint | ^7.11.0 | | eslint-config-prettier | ^6.7.0 | | eslint-config-standard | ^14.1.0 | | eslint-config-standard-react | ^9.2.0 | | eslint-plugin-import | ^2.18.2 | | eslint-plugin-node | ^11.0.0 | | eslint-plugin-prettier | ^3.1.1 | | eslint-plugin-promise | ^4.2.1 | | eslint-plugin-react | ^7.17.0 | | eslint-plugin-standard | ^4.0.1 | | gh-pages | ^2.2.0 | | microbundle-crl | ^0.13.10 | | npm-run-all | ^4.1.5 | | prettier | ^2.0.4 | | react | ^17.0.2 | | react-dom | ^17.0.2 | | react-scripts | ^4.0.3 |