@royaltics/ui 1.0.1 → 1.0.3

package/README.md

@@ -1,6 +1,8 @@
-# 📦 Royaltics Utils & UI
+# 📦 Royaltics UI & Utils
 
-🚀 Una librería de utilidades y componentes UI reutilizables para proyectos JavaScript y TypeScript. Compatible con utilsJS y ESM.
+🚀 Librería de utilidades y componentes UI reutilizables para proyectos JavaScript y TypeScript. Compatible con ESM y utilsJS.
+
+---
 
 ## 📌 Instalación
 
@@ -18,51 +20,366 @@ yarn add royaltics
 
 ## 📂 Estructura del Paquete
 
-Esta librería está dividida en dos módulos principales:
+- `royaltics/ui` → Componentes UI y hooks
+- `royaltics/utils` → Funciones utilitarias
 
-- `` → Funciones utilitarias
-- `` → Componentes UI
+---
+
+## 🎨 Ejemplo de Uso
+
+```tsx
+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" />
+  </>
+);
+```
 
 ---
 
-## 🛠 **Uso de Utilidades (**``**)**
+## 🧩 Documentación de Componentes
 
-### 📅 **Ejemplo: Formatear fecha en español**
+### Buttons
 
-```ts
-import { dateToStringEs } from "royaltics/utils";
+#### **Button**
+
+Botón estilizado y accesible.
 
-const fecha = new Date();
-console.log(dateToStringEs(fecha)); // "Lunes, 30 de Marzo del 2023"
+```tsx
+import { Button } from "royaltics/ui";
+<Button lb="Guardar" onClick={...} theme="primary" />
 ```
 
-### 🔢 **Ejemplo: formatear Numeros**
+| 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               |
 
-```ts
-import { defaultFloat } from "royaltics/utils";
+---
+
+### Forms
+
+#### **Input**
+
+Campo de entrada de texto.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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}`             |
+
+---
 
-console.log(defaultFloat("5,599")); // 5.599
+#### **InputAutocomplete**
+
+Input con autocompletado remoto.
+
+```tsx
+import { InputAutocomplete } from "royaltics/ui";
+<InputAutocomplete 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                |
+
 ---
 
-## 🎨 **Uso de Componentes UI (**``**)**
+#### **Paginate**
 
-### ▶️ **Ejemplo: Reproductor de YouTube**
+Paginador para listas.
+
+```tsx
+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.
+
+```tsx
+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.
 
 ```tsx
 import { YouTubePlayer } from "royaltics/ui";
+<YouTubePlayer videoId="dQw4w9WgXcQ" />
+```
 
-const App = () => (
-  <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.
+
+```ts
+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)
+                }
+    })   
 
-export default App;
+```
+
+### **useNavigatorOnline**
+
+Detecta si el navegador está online/offline.
+
+```ts
+import useNavigatorOnline from "royaltics/ui/hooks/useNavigatorOnline";
+const online = useNavigatorOnline();
+```
+
+### **useRouter**
+
+Utilidades para navegación con React Router.
+
+```ts
+import useRouter from "royaltics/ui/hooks/useRouter";
+const { pathname, query, params, push, refresh } = useRouter();
+```
+
+---
+
+## 🧰 Reducers
+
+### **Reducer**
+
+Reducer genérico para formularios.
+
+```ts
+import { Reducer } from "royaltics/ui/reducers";
+const [state, setState] = useReducer(Reducer, {});
 ```
 
 ---
 
-## ⚙️ **Compilación y Desarrollo**
+## 🛡️ 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?)**
+
+```ts
+import { isEmail, isEmpty, isValidForm } from "royaltics/ui/validator/validator";
+```
+
+
+
+Funciones para validación inputs completos en `royaltics/ui/validator/validator`.
+
+- **isValidForm(inputs, rulesObject, toast?)**
+
+```ts
+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:
 
@@ -78,7 +395,6 @@ pnpm dev
 
 ---
 
-## 📜 **Licencia**
-
-MIT License © 2025 - Royaltics Solutions
+## 📜 Licencia
 
+MIT License © 2025 - Royaltics

package/package.json

@@ -1,19 +1,48 @@
 {
   "name": "@royaltics/ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "private": false,
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "files": [
-    "dist",
-    "dist/ui"
+    "dist"
   ],
   "exports": {
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./buttons": {
+      "import": "./dist/buttons/index.js",
+      "require": "./dist/buttons/index.cjs",
+      "types": "./dist/buttons/index.d.ts"
+    },
+    "./forms": {
+      "import": "./dist/forms/index.js",
+      "require": "./dist/forms/index.cjs",
+      "types": "./dist/forms/index.d.ts"
+    },
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.cjs",
+      "types": "./dist/hooks/index.d.ts"
+    },
+    "./reducers": {
+      "import": "./dist/reducers/index.js",
+      "require": "./dist/reducers/index.cjs",
+      "types": "./dist/reducers/index.d.ts"
+    },
+    "./cards": {
+      "import": "./dist/cards/index.js",
+      "require": "./dist/cards/index.cjs",
+      "types": "./dist/cards/index.d.ts"
+    },
+    "./validators": {
+      "import": "./dist/validators/index.js",
+      "require": "./dist/validators/index.cjs",
+      "types": "./dist/validators/index.d.ts"
     }
   },
   "scripts": {
@@ -24,8 +53,8 @@
     "build:esm": "tsc --module ESNext --outDir dist/esm"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",