celsia-internet

v1.0.50

Published

12 days ago

<h1 align="center"> Celsia Internet Library (CIL) </h1> <br>

Downloads

1,493

0High
0Medium
0Low

andercordoba

cgalvisleon

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

Crear nuevo proyecto:

mkdir library
cd library
npm init -y

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

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

Crear la estructura de tu librería:

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

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>;
};

Crear tu archivo de estilos en el directorio /scr/styles
Registas y exportas el componente en el archivo /src/index.jsx

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

Constuccion de la libreria

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\""
}

Compilar la libreria:

npm run build

Iniciar sesión en tu cuenta de pnm

npm login

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of Contents

Introduccion

Instalacion

Inputs

CilInputText

CilInputIcon

CilInputLabel

CilInputNumber

CilInputTextArea

CilInputDatePicker

CilInputTime

CilInputCheck

CilInputRadio

CilInputSwitch

CilInputSelect

CilCalendar

CilTimeSelector

Botones

CilButton

CilIconButton

CilIconLabelButton

Cards

CilCard

CilImageCard

How to make a celcia-internet library

Configuracion inicial

Desarrollo de libreria

Constuccion de la libreria