📦 Royaltics UI & Utils

🚀 Librería de utilidades y componentes UI reutilizables para proyectos JavaScript y TypeScript. Compatible con ESM y utilsJS.

📌 Instalación

Puedes instalar la librería usando pnpm, npm o yarn:

pnpm add royaltics
# o
npm install royaltics
# o
yarn add royaltics

📂 Estructura del Paquete

• royaltics/ui → Componentes UI y hooks
• royaltics/utils → Funciones utilitarias

🎨 Ejemplo de Uso

import { Button, Input, Checkbox, YouTubePlayer } from "royaltics/ui";

const [inputs, setInputs] = useState({});

const App = () => (
  <>
    <Button lb="Guardar" onClick={() => alert("Guardado!")} />
    <Input id="nombre" state={{inputs, setInputs}} lb="Nombre" />
    <Checkbox id="activo" state={{inputs, setInputs}} lb="Activo" />
    <YouTubePlayer videoId="dQw4w9WgXcQ" />
  </>
);

🧩 Documentación de Componentes

Buttons

Button

Botón estilizado y accesible.

import { Button } from "royaltics/ui";
<Button lb="Guardar" onClick={...} theme="primary" />

| Prop | Tipo | Requerido | Descripción | |-----------|------------|-----------|-----------------------------------| | lb | string | No | Texto del botón | | onClick | function | No | Callback al hacer click | | theme | string | No | primary, secondary, danger, warn, default | | icon | ReactNode | No | Icono a mostrar | | disabled | boolean | No | Deshabilita el botón | | children | ReactNode | No | Contenido del botón |

Forms

Input

Campo de entrada de texto.

import { Input } from "royaltics/ui";
<Input id="nombre" state={{inputs, setInputs}} lb="Nombre" />

| Prop | Tipo | Requerido | Descripción | |-------------|------------|-----------|-----------------------------------| | id | string | Sí | Identificador del input | | state | object | Sí | {inputs, setInputs} | | lb | string | No | Etiqueta | | type | string | No | text, number, email, etc. | | placeholder | string | No | Texto de ayuda |

Checkbox

Checkbox controlado.

import { Checkbox } from "royaltics/ui";
<Checkbox id="activo" state={{inputs, setInputs}} lb="Activo" />

| Prop | Tipo | Requerido | Descripción | |-----------|------------|-----------|-----------------------------------| | id | string | Sí | Identificador | | state | object | Sí | {inputs, setInputs} | | lb | string | No | Etiqueta | | readOnly | boolean | No | Solo lectura |

RadioButton

Radio button controlado.

import { RadioButton } from "royaltics/ui";
<RadioButton id="sexo" value="M" state={{inputs, setInputs}} lb="Masculino" />

| Prop | Tipo | Requerido | Descripción | |-----------|------------|-----------|-----------------------------------| | id | string | Sí | Identificador | | value | any | Sí | Valor del radio | | state | object | Sí | {inputs, setInputs} | | lb | string | No | Etiqueta |

Select

Select estilizado.

import { Select } from "royaltics/ui";
<Select id="pais" data={paises} state={{inputs, setInputs}} lb="País" keyText="nombre" keyValue="id" />

| Prop | Tipo | Requerido | Descripción | |-----------|------------|-----------|-----------------------------------| | id | string | Sí | Identificador | | data | array | Sí | Opciones | | state | object | Sí | {inputs, setInputs} | | lb | string | No | Etiqueta | | keyText | string | No | Propiedad de texto | | keyValue | string | No | Propiedad de valor |

TextArea

Área de texto multilínea.

import { TextArea } from "royaltics/ui";
<TextArea id="descripcion" state={{inputs, setInputs}} lb="Descripción" />

| Prop | Tipo | Requerido | Descripción | |-------------|------------|-----------|-----------------------------------| | id | string | Sí | Identificador | | state | object | Sí | {inputs, setInputs} | | lb | string | No | Etiqueta |

ToogleSwitch

Switch de activación.

import { ToogleSwitch } from "royaltics/ui";
<ToogleSwitch id="notificaciones" lb="Notificaciones" state={{inputs, setInputs}} />

| Prop | Tipo | Requerido | Descripción | |-----------|------------|-----------|-----------------------------------| | id | string | Sí | Identificador | | lb | string | Sí | Etiqueta | | state | object | Sí | {inputs, setInputs} |

Autocomplete

Input con autocompletado remoto.

import { Autocomplete } from "royaltics/ui";
<Autocomplete id="usuario" api="/api/usuarios" state={{inputs, setInputs}} lb="Usuario" keyText="nombre" keyValue="id" />

| Prop | Tipo | Requerido | Descripción | |-----------|------------|-----------|-----------------------------------| | id | string | Sí | Identificador | | api | string | Sí | Endpoint de búsqueda | | state | object | Sí | {inputs, setInputs} | | lb | string | No | Etiqueta | | keyText | string | No | Propiedad de texto | | keyValue | string | No | Propiedad de valor |

Paginate

Paginador para listas.

import { Paginate } from "royaltics/ui";
<Paginate rows={100} rowsPage={10} onChangue={...}>{/* contenido */}</Paginate>

| Prop | Tipo | Requerido | Descripción | |-------------|------------|-----------|-----------------------------------| | rows | number | Sí | Total de filas | | rowsPage | number | Sí | Filas por página | | onChangue | function | Sí | Callback de cambio de página | | children | ReactNode | Sí | Contenido |

PhotoCard

Carga y muestra de foto de perfil.

import { PhotoCard } from "royaltics/ui";
<PhotoCard api="/api/usuarios/foto" photo={inputs.photo} set={setInputs} />

| Prop | Tipo | Requerido | Descripción | |-----------|------------|-----------|-----------------------------------| | api | string | Sí | Endpoint de la foto | | photo | string | Sí | URL de la foto | | set | function | Sí | Setter para actualizar foto | | theme | string | No | small o default |

YouTubePlayer

Reproductor de videos de YouTube embebido.

import { YouTubePlayer } from "royaltics/ui";
<YouTubePlayer videoId="dQw4w9WgXcQ" />

| Prop | Tipo | Requerido | Descripción | |-----------|----------|-----------|-----------------------------------| | videoId | string | Sí | ID del video de YouTube | | className | string | No | Clase para el contenedor | | options | object | No | { autoplay, controls, loop, mute } |

🪝 Hooks

Todos los hooks están en royaltics/ui/hooks.

useHttpState

Hook para peticiones HTTP con estado y manejo de errores.

import useHttpState from "royaltics/ui/hooks/useHttpState";
const { post, get, patch, deleteReq, file, isSending } = useHttpState();

    get('/webhooks/googleapi/calendar/list', { data: { limit: 1 }, onSuccess: (data) => { setState({ event: data?.[0] }) } })
    post('/services/generate-ats', {
            data: {
              action: action, date_start: inputs.date_start,
              date_end: inputs.date_end, generate_sales: inputs.generate_sales, generate_buys: inputs.generate_buys,
              type_report: inputs.type_report, cost_center_id: inputs.cost_center_id,
              enterprise_id: enterprise?.id, all_sucursal: inputs.all_sucursal
            },
            onSuccess: (data) => {

            }
   })

    patch(api, {
                data: { user_id: Auth?.id, enterprise_id: 1, photo: e.target.files[0] },
                content_type: 'file',
                onSuccess: (data) => {

                    set({ photo: data.photo });
                    toast.success('Imagen Actualizada Correctamente!');
                }
    })

    deleteReq(api, {
                onSuccess: (data) => {
                    set({ photo: 'Photo.jpg' });
                    toast.success('Imagen Eliminada Correctamente!');
                    setPreview(null)
                }
    })   

useNavigatorOnline

Detecta si el navegador está online/offline.

import useNavigatorOnline from "royaltics/ui/hooks/useNavigatorOnline";
const online = useNavigatorOnline();

useRouter

Utilidades para navegación con React Router.

import useRouter from "royaltics/ui/hooks/useRouter";
const { pathname, query, params, push, refresh } = useRouter();

🧰 Reducers

Reducer

Reducer genérico para formularios.

import { Reducer } from "royaltics/ui/reducers";
const [state, setState] = useReducer(Reducer, {});

🛡️ Validator

Funciones para validación de formularios en royaltics/ui/validator/validator.

• isEmpty(value, minLength?)
• isInteger(value)
• isFloat(value)
• isUUID(value)
• isNumberDocument(doc_number)
• isEmail(value)
• isURL(value)
• isValidForm(inputs, rulesObject, toast?)

import { isEmail, isEmpty, isValidForm } from "royaltics/ui/validator/validator";

Funciones para validación inputs completos en royaltics/ui/validator/validator.

• isValidForm(inputs, rulesObject, toast?)

import { isValidForm } from "royaltics/ui/validator/validator";
import { toast } from "react-toastify"; //(optional)

  /**
   * type stringRules = 'req' | 'number' | 'str' | 'date' | 'array' | 'cb' | 'email' | `len:${number},${number}` | `max:${number}` | `min:${number}` | `len:${number}`;
   * - type Rules = {
      [Key: string]: { rules: stringRules[], name?: string, message?: string, cb?: (value?: any) => boolean | string, format?: (value: any) => any }
  }**/

  //
	return isValidForm(inputs, {
			business_names: { rules: ['req'], name: "Razon Social" },
			cardid: { rules: ['req', 'str', 'len:5,13'], name: "Identificacion" },
			datedoc: { rules: ['req'], name: "Fecha/Emision" },
			emails: { rules: ['email'], name: 'Correo' },
			vendor_id: { rules: ['req'], name: "Vendedor" },
			box_id: { rules: ['req'], message: 'Se requiere la configuracion de caja, dirijase a la ventana de configuracion local' },
			direction: { rules: ['req'], message: 'Ingresar una dirección' },
			details: { rules: ['cb'], message: 'Ingrese al menos un empaque', cb: () => details.length > 0 && details [0].factor > 0 },
			total: { rules: ['number', 'req'], name: 'Total' },
		}, toast);

⚙️ Compilación y Desarrollo

Para compilar la librería:

pnpm build

Para ejecutar en modo desarrollo:

pnpm dev

📜 Licencia

MIT License © 2025 - Royaltics