celsia-internet v1.0.90

Table of Contents

• Introduccion
• Instalacion
• Inputs
  • CilInputText
  • CilInputNumber
  • CilInputIcon
  • CilInputLabel
  • CilInputTextArea
  • CilInputDatePicker
  • CilInputTime
  • CilInputCheck
  • CilInputRadio
  • CilInputSwitch
  • CilInputSelect
  • CilCalendar
  • CilTimeSelector
• Botones
  • CilButton
  • CilIconLabelButton
  • CilIconButton
• Cards
  • CilCard
  • CilImageCard
• Estilos

Introduccion

Esta libreria de componentes es realizada con el fin de ser integrada en los siguientes desarrollos de Celsia Internet.

Instalacion

# Instalar
$ npm install celsia-internet

Inputs

CilInputText

Un campo de texto simple.

Props:

• inputref (ref) - Referencia del input.
• type (string) - Tipo de input (por defecto es text).
• disabled (boolean) - Deshabilita el campo si se establece en true (por defecto es false).
• className (string) - Clases CSS adicionales.
• size (string) - Tamaño del campo (s, m, l, etc., por defecto es "m").
• name (string) - Nombre del campo.
• value (string) - Valor del campo.
• onChange (function) - Función de callback cuando cambia el valor.
• placeholder (string) - Texto del placeholder.
• autoComplete (string) - Configuración de autocompletado.

Uso:

//CilInputText
import { CilInputText } from "celsia-internet";

<CilInputText
  name="username"
  placeholder="Ingrese su nombre"
  value={value}
  onChange={handleChange}
/>;

CilInputIcon

Un campo de texto simple acompañado de un icono.

Props:

• icon (string) - String del icono
• inputref (ref) - Referencia del input.
• type (string) - Tipo de input (por defecto es text).
• disabled (boolean) - Deshabilita el campo si se establece en true (por defecto es false).
• className (string) - Clases CSS adicionales.
• size (string) - Tamaño del campo (s, m, l, etc., por defecto es "m").
• name (string) - Nombre del campo.
• value (string) - Valor del campo.
• onChange (function) - Función de callback cuando cambia el valor.
• placeholder (string) - Texto del placeholder.
• autoComplete (string) - Configuración de autocompletado.

Uso:

//CilInputIcon
import { CilInputIcon } from "celsia-internet";

<CilInputIcon
  icon="academic-cap"
  name="username"
  placeholder="Ingrese su nombre"
  value={value}
  onChange={handleChange}
/>;

CilInputLabel

Un campo de texto simple acompañado de un icono.

Props:

• label (string) - Label que indica el valor que se espera del input
• inputref (ref) - Referencia del input.
• type (string) - Tipo de input (por defecto es text).
• disabled (boolean) - Deshabilita el campo si se establece en true (por defecto es false).
• className (string) - Clases CSS adicionales.
• size (string) - Tamaño del campo (s, m, l, etc., por defecto es "m").
• name (string) - Nombre del campo.
• value (string) - Valor del campo.
• onChange (function) - Función de callback cuando cambia el valor.
• placeholder (string) - Texto del placeholder.
• autoComplete (string) - Configuración de autocompletado.

Uso:

//CilInputLabel
import { CilInputLabel } from "celsia-internet";

<CilInputLabel
  label="nombre"
  name="username"
  placeholder="Ingrese su nombre"
  value={value}
  onChange={handleChange}
/>;

CilInputNumber

Un campo de número con soporte para valores mínimos y máximos.

Props:

• inputref (ref): Referencia del input.
• type (string): Tipo de input (por defecto es "number").
• disabled (boolean): Deshabilita el campo si se establece en true (por defecto es false).
• classGroup (string): Clases CSS para el contenedor.
• classInput (string): Clases CSS adicionales para el input.
• name (string): Nombre del campo.
• value (number): Valor del campo.
• min (number): Valor mínimo permitido (por defecto es 0).
• max (number): Valor máximo permitido.
• decimal (number): Número de decimales.
• unit (string): Unidad a mostrar junto al valor.
• onChange (function): Función de callback cuando cambia el valor.
• placeholder (string): Texto del placeholder.

//CilInputNumber
import { CilInputNumber } from "celsia-internet";

<CilInputNumber
  name="quantity"
  placeholder="0"
  value={value}
  onChange={handleChange}
/>;

CilInputTextArea

Un área de texto para múltiples líneas.

Props:

• inputref (ref): Referencia del textarea.
• type (string): Tipo de textarea (por defecto es "text").
• disabled (boolean): Deshabilita el campo si se establece en true (por defecto es false).
• className (string): Clases CSS adicionales.
• rows (number): Número de filas visibles (por defecto es 3).
• height (number): Altura en píxeles si rows es 1 (por defecto es 30).
• name (string): Nombre del campo.
• value (string): Valor del campo.
• onChange (function): Función de callback cuando cambia el valor.
• placeholder (string): Texto del placeholder.

Uso:

//CilInputTextArea
import { CilInputTextArea } from "celsia-internet";

<CilInputTextArea
  name="description"
  placeholder="Ingrese una descripción"
  value={value}
  onChange={handleChange}
/>;

CilInputDatePicker

Un selector de fecha y hora.

Props:

• disabled (boolean): Deshabilita el campo si se establece en true (por defecto es false).
• timeCaption (string): Texto de la etiqueta de la hora (por defecto es "Hora").
• timeFormat (string): Formato de la hora (por defecto es "hh:mm aa").
• timeIntervals (number): Intervalos de tiempo (por defecto es 1).
• dateFormat (string): Formato de la fecha (por defecto es "MMM dd yy hh:mm aa").
• name (string): Nombre del campo.
• value (string): Valor de la fecha en formato yyyy-MM-dd HH:mm:ss.
• onChange (function): Función de callback cuando cambia la fecha.

Uso:

//CilInputDatePicker
import { CilInputDatePicker } from "celsia-internet";

<CilInputDatePicker
  name="eventDate"
  value={dateValue}
  onChange={handleDateChange}
/>;

CilInputTime

Muestra la diferencia entre dos fechas en días, horas y minutos.

Props:

• className (string): Clases CSS adicionales.
• dateIn (string): Fecha de inicio en formato ISO.
• dateEnd (string): Fecha de fin en formato ISO (por defecto es la fecha actual).

Uso:

//CilInputTime
import { CilInputTime } from "celsia-internet";

<CilInputTime dateIn={startDate} dateEnd={endDate} />;

CilInputCheck

Un campo de selección tipo checkbox.

Props:

• inputref (ref): Referencia del checkbox.
• disabled (boolean): Deshabilita el campo si se establece en true (por defecto es false).
• classGroup (string): Clases CSS para el contenedor.
• classInput (string): Clases CSS adicionales para el input.
• name (string): Nombre del campo.
• checked (boolean): Estado del checkbox.
• label (string): Etiqueta del checkbox.
• onChange (function): Función de callback cuando cambia el estado.

Uso:

//CilInputCheck
import { CilInputCheck } from "celsia-internet";

<CilInputCheck
  name="acceptTerms"
  checked={isChecked}
  onChange={handleCheckChange}
  label="Aceptar términos y condiciones"
/>;

CilInputRadio

Un campo de selección tipo radio.

Props:

• inputref (ref): Referencia del radio.
• disabled (boolean): Deshabilita el campo si se establece en true (por defecto es false).
• classGroup (string): Clases CSS para el contenedor.
• classInput (string): Clases CSS adicionales para el input.
• name (string): Nombre del campo.
• checked (boolean): Estado del radio.
• label (string): Etiqueta del radio.
• onChange (function): Función de callback cuando cambia el estado.

Uso:

//CilInputRadio
import { CilInputRadio } from "celsia-internet";

<CilInputRadio
  name="gender"
  checked={isChecked}
  onChange={handleRadioChange}
  label="Masculino"
/>;

CilInputSwitch

Un interruptor para opciones binarias.

Props:

• disabled (boolean): Deshabilita el campo si se establece en true (por defecto es false).
• classGroup (string): Clases CSS para el contenedor.
• classInput (string): Clases CSS adicionales para el input.
• name (string): Nombre del campo.
• checked (boolean): Estado del interruptor.
• labelT (string): Etiqueta cuando el interruptor está activado (por defecto es "Label Ok").
• labelF (string): Etiqueta cuando el interruptor está desactivado (por defecto es "Label Not").
• onChange (function): Función de callback cuando cambia el estado.

Uso:

//CilInputSwitch
import { CilInputSwitch } from "celsia-internet";

<CilInputSwitch
  labelF="no"
  labelT="yes"
  checked={switchCheck}
  onChange={handleSwitchChange}
/>;

CilInputSelect

Un campo de selección con opciones.

Props:

• inputref (ref): Referencia del select.
• disabled (boolean): Deshabilita el campo si se establece en true (por defecto es false).
• className (string): Clases CSS adicionales.
• keyFiled (string): Campo que se usará como valor (por defecto es "id").
• nameFiled (string): Campo que se usará como etiqueta (por defecto es "name").
• name (string): Nombre del campo.
• value (object): Valor seleccionado.
• values (array): Opciones disponibles para la selección en formato { id: string, name: string }.
• onChange (function): Función de callback cuando cambia el valor.

Uso:

//CilInputSelect
import { CilInputSelect } from "celsia-internet";

const [option, setoption] = useState(null);

const options = [
  { id: 1, value: "option 1", name: "option 1" },
  .
  .
  .
  { id: n, value: "option n", name: "option n" },
];

const handleSelectChange= (value) => {
    setoption(value);
    console.log('opción seleccionada:', value);
  }

  <CilInputSelect
    name="Opciones"
    values={options}
    keyField="id"
    nameField="name"
    value={option}
    onChange={handleSelectChange}
    placeholder="Elige una opción"
    className="my-custom-class"
  />

CilCalendar

componente calendario para selección de fechas

Props:

• onChange (function): Función de callback para la seleccion de la fecha.

Uso:

//CilCalendar
import { CilCalendar } from "celsia-internet";
const [dateSelect, setDateSelect] = useState();

const handleDateChange = (value) => {
  setDateSelect(value);
};

<CilCalendar onChange={handleTimeChange} />;

CilTimeSelector

componente tiempo para selección de horas, minutos y periodo (AM o PM)

Props:

• onChange (function): Función de callback para la seleccion de la hora.

Uso:

//CilTimeSelector
import { CilTimeSelector } from "celsia-internet";
const [timeSelect, setTimeSelect] = useState();

const handleTimeChange = (value) => {
  setTimeSelect(value);
};

<CilTimeSelector onChange={handleTimeChange} />;

Botones

CilButton

Props:

• label (string): Texto que se muestra en el botón.
• type (string): Tipo de botón (button, submit, reset). Por defecto es "button".
• onClick (function): Función de callback que se ejecuta cuando se hace clic en el botón.
• className (string): Clases CSS adicionales. Por defecto es "CIL-button-primary".
• variant (string): Variante del botón para aplicar diferentes estilos. Por defecto es "".
• size (string): Tamaño del botón (s, m, l, etc.). Por defecto es "s".
• disabled (boolean): Deshabilita el botón si se establece en true. Por defecto es false.

Uso:

Props:

// CilButton
import { CilButton } from "celsia-internet";

<CilButton
  label="Enviar"
  onClick={handleClick}
  className="custom-class"
  variant="secondary"
  size="m"
/>;

CilIconButton

Props:

• icon (ReactElement): Icono que se mostrará en el botón. (Asegúrate de pasar el componente CilIcon o similar.)
• onClick (function): Función de callback que se ejecuta cuando se hace clic en el botón.
• className (string): Clases CSS adicionales. Por defecto es "".
• ariaHidden (boolean): Si se debe ocultar el ícono de la accesibilidad (aria-hidden). Por defecto es true.
• disabled (boolean): Deshabilita el botón si se establece en true. Por defecto es false.
• variant (string): Variante del botón para aplicar diferentes estilos. Por defecto es "".

Uso:

// CilIconButton
import { CilIconButton } from "celsia-internet";

<CilIconButton
  icon={<Icon />}
  onClick={handleClick}
  className="custom-class"
  variant="primary"
/>;

CilIconLabelButton

Props:

• icon (ReactElement): Icono que se mostrará en el botón. (Asegúrate de pasar el componente CilIcon o similar.)
• onClick (function): Función de callback que se ejecuta cuando se hace clic en el botón.
• className (string): Clases CSS adicionales. Por defecto es "".
• ariaHidden (boolean): Si se debe ocultar el ícono de la accesibilidad (aria-hidden). Por defecto es true.
• disabled (boolean): Deshabilita el botón si se establece en true. Por defecto es false.
• size (string): Tamaño del botón (s, m, l, etc.). Por defecto es "s".
• variant (string): Variante del botón para aplicar diferentes estilos. Por defecto es "".
• label (string): Texto que se muestra al lado del ícono. Por defecto es "Label".

Uso:

// // CilIconLabelButton
import { CilIconLabelButton } from "celsia-internet";

<CilIconLabelButton
  icon={<Icon />}
  onClick={handleClick}
  className="custom-class"
  variant="danger"
  size="m"
  label="Eliminar"
/>;

Cards

CilCard

Props:

• children (ReactNode): Contenido que se mostrará dentro de la tarjeta.
• className (string): Clases CSS adicionales. Por defecto es "".
• size (string): Tamaño de la tarjeta (s, m, l, etc.). Por defecto es "m".
• shadow (string): Efecto de sombra aplicado a la tarjeta ("center", "top", "bottom", etc.). Por defecto es "center".

Uso:

import { CilCard } from "celsia-internet";

<CilCard className="custom-card-class" size="l" shadow="top">
  <h2>Título de la Tarjeta</h2>
  <p>Contenido de la tarjeta, como texto, imágenes, etc.</p>
</CilCard>;

CilImageCard

Props:

• img (string): URL de la imagen que se mostrará en la tarjeta.
• className (string): Clases CSS adicionales. Por defecto es "".
• size (string): Tamaño de la tarjeta (s, m, l, etc.). Por defecto es "m".
• shadow (string): Efecto de sombra aplicado a la tarjeta ("center", "top", "bottom", etc.). Por defecto es "center".
• alt (string): Texto alternativo para la imagen. Por defecto es "".
• children (ReactNode): Contenido adicional que se mostrará dentro de la tarjeta (si es necesario). Uso:

import { CilImageCard } from "celsia-internet";

<CilImageCard
  img="https://example.com/image.jpg"
  alt="Descripción de la imagen"
  className="custom-image-card-class"
  size="m"
  shadow="center"
>
  {/* Contenido adicional opcional */}
</CilImageCard>;

How to make a celcia-internet library

Configuracion inicial

1. Crear nuevo proyecto:

mkdir library
cd library
npm init -y

2. Instalacion de dependencias:

npm install react react-dom
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/cli
npm install --save-dev copyfiles

3. Configurar Babel:

Se crea el archivo de configuracion .babelrc en la raiz del proyecto con el siguiente contenido:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Desarrollo de libreria

1. Crear la estructura de tu librería:

mkdir src
mkdir src/components
mkdir src/styles
touch src/index.jsx

2. Crear tu primer componente en el directio /src/components

// src/button.jsx
import React from "react";
import "../styles/index.css";

export const Button = ({ label }) => {
  return <button>{label}</button>;
};

3. Crear tu archivo de estilos en el directorio /scr/styles

4. Registas y exportas el componente en el archivo /src/index.jsx

export { Button } from "./components/button";

Constuccion de la libreria

1. Configurar el script de contruccion con Babel y lo agregas al archivo packaje.json en el apartado de scripts

"scripts": {
  "build": "babel src --out-dir dist --extensions \".js,.jsx\""
}

2. Compilar la libreria:

npm run build

3. Iniciar sesión en tu cuenta de pnm

npm login

4. Publicar la libreria, debes tener en cuenta revisar los campor name, version y main

git backup
npm run build
npm version -f 1.0.90
npm publish