@nocios/crudify-ui 1.3.4 → 2.0.0

package/README_DEPTH.md

@@ -43,8 +43,8 @@ npm install @mui/material @mui/icons-material react react-dom
 El `SessionProvider` es el punto de entrada principal para manejar la autenticación y sesiones en tu aplicación:
 
 ```tsx
-import React from 'react';
-import { SessionProvider } from '@nocios/crudify-ui';
+import React from "react";
+import { SessionProvider } from "@nocios/crudify-ui";
 
 function App() {
   return (
@@ -52,13 +52,13 @@ function App() {
       options={{
         // Configuración automática basada en variables de entorno
         // o configuración manual si es necesario
-        storageType: 'localStorage', // 'localStorage' | 'sessionStorage'
+        storageType: "localStorage", // 'localStorage' | 'sessionStorage'
         onSessionExpired: () => {
-          console.log('Sesión expirada');
+          console.log("Sesión expirada");
         },
         onSessionRestored: (tokens) => {
-          console.log('Sesión restaurada:', tokens);
-        }
+          console.log("Sesión restaurada:", tokens);
+        },
       }}
     >
       <YourApp />
@@ -84,24 +84,17 @@ REACT_APP_CRUDIFY_ENV=dev # dev | stg | api | prod
 Hook principal para manejo completo de autenticación:
 
 ```tsx
-import { useAuth } from '@nocios/crudify-ui';
+import { useAuth } from "@nocios/crudify-ui";
 
 function LoginPage() {
-  const {
-    login,
-    logout,
-    isAuthenticated,
-    isLoading,
-    error,
-    clearError
-  } = useAuth();
+  const { login, logout, isAuthenticated, isLoading, error, clearError } = useAuth();
 
   const handleLogin = async () => {
     try {
-      const result = await login('user@example.com', 'password');
-      console.log('Login exitoso:', result);
+      const result = await login("user@example.com", "password");
+      console.log("Login exitoso:", result);
     } catch (error) {
-      console.error('Error de login:', error);
+      console.error("Error de login:", error);
     }
   };
 
@@ -115,7 +108,7 @@ function LoginPage() {
         <button onClick={handleLogout}>Cerrar Sesión</button>
       ) : (
         <button onClick={handleLogin} disabled={isLoading}>
-          {isLoading ? 'Iniciando...' : 'Iniciar Sesión'}
+          {isLoading ? "Iniciando..." : "Iniciar Sesión"}
         </button>
       )}
       {error && <div>Error: {error}</div>}
@@ -125,6 +118,7 @@ function LoginPage() {
 ```
 
 **Características del useAuth:**
+
 - ✅ Login/logout automático con refresh tokens
 - ✅ Estado de autenticación en tiempo real
 - ✅ Manejo de errores integrado
@@ -136,19 +130,13 @@ function LoginPage() {
 Hook para obtener y manejar los datos completos del usuario:
 
 ```tsx
-import { useUserData } from '@nocios/crudify-ui';
+import { useUserData } from "@nocios/crudify-ui";
 
 function UserProfile() {
-  const {
-    userData,
-    sessionData,
-    isLoading,
-    error,
-    refetch
-  } = useUserData({
+  const { userData, sessionData, isLoading, error, refetch } = useUserData({
     autoFetch: true, // Fetch automático al montar
     retryOnError: true, // Retry automático en errores
-    cacheTime: 300000 // Cache por 5 minutos
+    cacheTime: 300000, // Cache por 5 minutos
   });
 
   if (isLoading) return <div>Cargando usuario...</div>;
@@ -164,18 +152,19 @@ function UserProfile() {
 
       {/* Datos de la base de datos (userData) */}
       <p>Nombre completo: {userData?.fullName}</p>
-      <p>Avatar: <img src={userData?.avatar} alt="Avatar" /></p>
+      <p>
+        Avatar: <img src={userData?.avatar} alt="Avatar" />
+      </p>
       <p>Último login: {userData?.lastLogin}</p>
 
-      <button onClick={() => refetch()}>
-        Actualizar Datos
-      </button>
+      <button onClick={() => refetch()}>Actualizar Datos</button>
     </div>
   );
 }
 ```
 
 **Características del useUserData:**
+
 - ✅ Combina datos del JWT (sessionData) y de la BD (userData)
 - ✅ Auto-fetch con deduplicación inteligente
 - ✅ Retry automático en errores de red
@@ -187,54 +176,54 @@ function UserProfile() {
 Hook para realizar operaciones CRUD type-safe:
 
 ```tsx
-import { useData } from '@nocios/crudify-ui';
+import { useData } from "@nocios/crudify-ui";
 
 function ProductManager() {
   const { create, read, update, remove, isInitialized } = useData();
 
   const createProduct = async () => {
     try {
-      const result = await create('products', {
-        name: 'Nuevo Producto',
+      const result = await create("products", {
+        name: "Nuevo Producto",
         price: 99.99,
-        category: 'electronics'
+        category: "electronics",
       });
-      console.log('Producto creado:', result);
+      console.log("Producto creado:", result);
     } catch (error) {
-      console.error('Error creando producto:', error);
+      console.error("Error creando producto:", error);
     }
   };
 
   const getProducts = async () => {
     try {
-      const products = await read('products', {
-        filters: { category: 'electronics' },
+      const products = await read("products", {
+        filters: { category: "electronics" },
         limit: 10,
-        offset: 0
+        offset: 0,
       });
-      console.log('Productos:', products);
+      console.log("Productos:", products);
     } catch (error) {
-      console.error('Error obteniendo productos:', error);
+      console.error("Error obteniendo productos:", error);
     }
   };
 
   const updateProduct = async (productId: string) => {
     try {
-      const result = await update('products', productId, {
-        price: 89.99
+      const result = await update("products", productId, {
+        price: 89.99,
       });
-      console.log('Producto actualizado:', result);
+      console.log("Producto actualizado:", result);
     } catch (error) {
-      console.error('Error actualizando producto:', error);
+      console.error("Error actualizando producto:", error);
     }
   };
 
   const deleteProduct = async (productId: string) => {
     try {
-      await remove('products', productId);
-      console.log('Producto eliminado');
+      await remove("products", productId);
+      console.log("Producto eliminado");
     } catch (error) {
-      console.error('Error eliminando producto:', error);
+      console.error("Error eliminando producto:", error);
     }
   };
 
@@ -244,14 +233,15 @@ function ProductManager() {
     <div>
       <button onClick={createProduct}>Crear Producto</button>
       <button onClick={getProducts}>Obtener Productos</button>
-      <button onClick={() => updateProduct('123')}>Actualizar</button>
-      <button onClick={() => deleteProduct('123')}>Eliminar</button>
+      <button onClick={() => updateProduct("123")}>Actualizar</button>
+      <button onClick={() => deleteProduct("123")}>Eliminar</button>
     </div>
   );
 }
 ```
 
 **Características del useData:**
+
 - ✅ Operaciones CRUD type-safe
 - ✅ Verificación automática de inicialización
 - ✅ Soporte para transacciones
@@ -262,38 +252,24 @@ function ProductManager() {
 Hook de bajo nivel para control directo de sesiones:
 
 ```tsx
-import { useSession } from '@nocios/crudify-ui';
+import { useSession } from "@nocios/crudify-ui";
 
 function SessionManager() {
-  const {
-    isAuthenticated,
-    isLoading,
-    tokens,
-    error,
-    login,
-    logout,
-    refreshTokens,
-    isExpiringSoon,
-    expiresIn
-  } = useSession({
-    onSessionExpired: () => console.log('Sesión expirada'),
-    onSessionRestored: (tokens) => console.log('Sesión restaurada', tokens),
-    onTokensRefreshed: (tokens) => console.log('Tokens renovados', tokens)
+  const { isAuthenticated, isLoading, tokens, error, login, logout, refreshTokens, isExpiringSoon, expiresIn } = useSession({
+    onSessionExpired: () => console.log("Sesión expirada"),
+    onSessionRestored: (tokens) => console.log("Sesión restaurada", tokens),
+    onTokensRefreshed: (tokens) => console.log("Tokens renovados", tokens),
   });
 
   return (
     <div>
       <h3>Estado de Sesión</h3>
-      <p>Autenticado: {isAuthenticated ? 'Sí' : 'No'}</p>
-      <p>Cargando: {isLoading ? 'Sí' : 'No'}</p>
+      <p>Autenticado: {isAuthenticated ? "Sí" : "No"}</p>
+      <p>Cargando: {isLoading ? "Sí" : "No"}</p>
       <p>Expira en: {Math.floor(expiresIn / 60)} minutos</p>
-      <p>Expira pronto: {isExpiringSoon ? 'Sí' : 'No'}</p>
+      <p>Expira pronto: {isExpiringSoon ? "Sí" : "No"}</p>
 
-      {isExpiringSoon && (
-        <button onClick={() => refreshTokens()}>
-          Renovar Tokens
-        </button>
-      )}
+      {isExpiringSoon && <button onClick={() => refreshTokens()}>Renovar Tokens</button>}
 
       {tokens && (
         <div>
@@ -311,15 +287,10 @@ function SessionManager() {
 Hook para acceder al contexto global de sesión:
 
 ```tsx
-import { useSessionContext } from '@nocios/crudify-ui';
+import { useSessionContext } from "@nocios/crudify-ui";
 
 function NavigationBar() {
-  const {
-    isAuthenticated,
-    sessionData,
-    logout,
-    getTokenInfo
-  } = useSessionContext();
+  const { isAuthenticated, sessionData, logout, getTokenInfo } = useSessionContext();
 
   if (!isAuthenticated) return null;
 
@@ -327,9 +298,7 @@ function NavigationBar() {
     <nav>
       <span>Bienvenido, {sessionData?.email}</span>
       <button onClick={() => logout()}>Cerrar Sesión</button>
-      <button onClick={() => console.log(getTokenInfo())}>
-        Ver Token Info
-      </button>
+      <button onClick={() => console.log(getTokenInfo())}>Ver Token Info</button>
     </nav>
   );
 }
@@ -342,8 +311,8 @@ function NavigationBar() {
 Componente completo de autenticación con múltiples pantallas:
 
 ```tsx
-import { CrudifyLogin } from '@nocios/crudify-ui';
-import type { CrudifyLoginConfig } from '@nocios/crudify-ui';
+import { CrudifyLogin } from "@nocios/crudify-ui";
+import type { CrudifyLoginConfig } from "@nocios/crudify-ui";
 
 function AuthPage() {
   const config: CrudifyLoginConfig = {
@@ -351,17 +320,17 @@ function AuthPage() {
     logo: "/logo.png",
     colors: {
       primaryColor: "#1066BA",
-      bgColor: "#f5f5f5"
-    }
+      bgColor: "#f5f5f5",
+    },
   };
 
   const handleLoginSuccess = (userData, redirectUrl) => {
-    console.log('Login exitoso:', userData);
+    console.log("Login exitoso:", userData);
     // Redireccionar o actualizar estado
   };
 
   const handleError = (error: string) => {
-    console.error('Error de autenticación:', error);
+    console.error("Error de autenticación:", error);
   };
 
   return (
@@ -379,12 +348,14 @@ function AuthPage() {
 ```
 
 **Pantallas incluidas en CrudifyLogin:**
+
 - 🔐 **Login**: Formulario principal de autenticación
 - 🔑 **Forgot Password**: Solicitar recuperación de contraseña
 - 📧 **Check Code**: Verificar código de recuperación
 - 🔄 **Reset Password**: Establecer nueva contraseña
 
 **Configuración disponible:**
+
 - ✅ Logo y nombre de aplicación personalizable
 - ✅ Colores y temas personalizables
 - ✅ Traducciones completas (ES/EN)
@@ -396,7 +367,7 @@ function AuthPage() {
 Componente para mostrar información del perfil del usuario:
 
 ```tsx
-import { UserProfileDisplay } from '@nocios/crudify-ui';
+import { UserProfileDisplay } from "@nocios/crudify-ui";
 
 function ProfilePage() {
   return (
@@ -413,7 +384,7 @@ function ProfilePage() {
 Componente para proteger rutas que requieren autenticación:
 
 ```tsx
-import { ProtectedRoute } from '@nocios/crudify-ui';
+import { ProtectedRoute } from "@nocios/crudify-ui";
 
 function App() {
   return (
@@ -439,7 +410,7 @@ function App() {
 Componente útil para desarrollo y debug:
 
 ```tsx
-import { SessionDebugInfo } from '@nocios/crudify-ui';
+import { SessionDebugInfo } from "@nocios/crudify-ui";
 
 function DevPage() {
   return (
@@ -451,6 +422,223 @@ function DevPage() {
 }
 ```
 
+### Policies - Gestión de Políticas Públicas
+
+Componente completo para configurar políticas de acceso a datos públicos:
+
+```tsx
+import { Policies, POLICY_ACTIONS, PREFERRED_POLICY_ORDER, PolicyAction } from "@nocios/crudify-ui";
+import { useState } from "react";
+
+function ModuleConfiguration() {
+  const [policies, setPolicies] = useState([
+    {
+      id: "1",
+      action: "read",
+      fields: {
+        allow: ["name", "email"],
+        owner_allow: ["phone"],
+        deny: ["password", "internal_notes"],
+      },
+    },
+    {
+      id: "2",
+      action: "create",
+      fields: {
+        allow: ["name", "email"],
+        owner_allow: [],
+        deny: ["status", "verified"],
+      },
+    },
+  ]);
+
+  const availableFields = ["name", "email", "phone", "address", "status", "verified", "password", "internal_notes"];
+
+  const handlePolicyChange = (newPolicies) => {
+    setPolicies(newPolicies);
+    // Guardar en base de datos o estado global
+  };
+
+  return (
+    <div>
+      <h2>Configuración de Políticas Públicas</h2>
+
+      <Policies
+        policies={policies}
+        onChange={handlePolicyChange}
+        availableFields={availableFields}
+        errors={null} // O errores de validación del servidor
+        isSubmitting={false}
+      />
+
+      {/* Mostrar acciones disponibles */}
+      <div style={{ marginTop: "20px" }}>
+        <h3>Acciones Disponibles:</h3>
+        <ul>
+          {POLICY_ACTIONS.map((action) => (
+            <li key={action}>{action}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+```
+
+#### Propiedades del Componente Policies
+
+| Prop              | Tipo                           | Requerido | Descripción                             |
+| ----------------- | ------------------------------ | --------- | --------------------------------------- |
+| `policies`        | `Policy[]`                     | ✅        | Array de políticas configuradas         |
+| `onChange`        | `(policies: Policy[]) => void` | ✅        | Callback cuando cambian las políticas   |
+| `availableFields` | `string[]`                     | ✅        | Campos disponibles para configurar      |
+| `errors`          | `string \| object`             | ❌        | Errores de validación                   |
+| `isSubmitting`    | `boolean`                      | ❌        | Estado de envío (deshabilita controles) |
+
+#### Estructura de una Policy
+
+```tsx
+type Policy = {
+  id: string; // ID único de la política
+  action: PolicyAction; // 'create' | 'read' | 'update' | 'delete'
+
+  // Para acciones create, read, update:
+  fields?: {
+    allow: string[]; // Campos permitidos para todos
+    owner_allow: string[]; // Campos adicionales para el propietario
+    deny: string[]; // Campos explícitamente denegados
+  };
+
+  // Para acción delete:
+  permission?: string; // '*' | 'deny' | 'owner'
+};
+```
+
+#### Constantes Disponibles
+
+```tsx
+// Acciones de política disponibles
+export const POLICY_ACTIONS = ["create", "read", "update", "delete"] as const;
+export type PolicyAction = (typeof POLICY_ACTIONS)[number];
+
+// Orden preferido para mostrar las políticas
+export const PREFERRED_POLICY_ORDER: PolicyAction[] = ["create", "read", "update", "delete"];
+```
+
+#### Casos de Uso Comunes
+
+**1. Configuración de API Pública**
+
+```tsx
+// Permitir lectura pública de ciertos campos
+const publicReadPolicy = {
+  id: "public-read",
+  action: "read",
+  fields: {
+    allow: ["name", "description", "published_at"],
+    owner_allow: ["views", "stats"],
+    deny: ["internal_notes", "admin_flags"],
+  },
+};
+```
+
+**2. Restricciones de Creación**
+
+```tsx
+// Permitir creación pero restringir ciertos campos
+const createPolicy = {
+  id: "public-create",
+  action: "create",
+  fields: {
+    allow: ["title", "content", "category"],
+    owner_allow: [],
+    deny: ["status", "featured", "admin_verified"],
+  },
+};
+```
+
+**3. Permisos de Eliminación**
+
+```tsx
+// Solo el propietario puede eliminar
+const deletePolicy = {
+  id: "owner-delete",
+  action: "delete",
+  permission: "owner", // '*' = todos, 'deny' = nadie, 'owner' = solo propietario
+};
+```
+
+#### Manejo de Errores
+
+```tsx
+function PolicyManager() {
+  const [errors, setErrors] = useState(null);
+
+  const handleSubmit = async (policies) => {
+    try {
+      await saveModulePolicies(moduleId, policies);
+      setErrors(null);
+    } catch (error) {
+      // Error de campo específico
+      if (error.fieldErrors) {
+        setErrors({
+          _error: "Hay errores en la configuración",
+          ...error.fieldErrors,
+        });
+      } else {
+        // Error general
+        setErrors("Error al guardar las políticas");
+      }
+    }
+  };
+
+  return (
+    <Policies
+      policies={policies}
+      onChange={setPolicies}
+      availableFields={fields}
+      errors={errors} // Se mostrará como Alert en el componente
+      isSubmitting={isLoading}
+    />
+  );
+}
+```
+
+#### Integración con i18next
+
+El componente usa react-i18next para internacionalización. Las claves de traducción incluidas:
+
+```json
+{
+  "modules": {
+    "form": {
+      "publicPolicies": {
+        "title": "Políticas Públicas",
+        "description": "Configura qué datos pueden acceder los usuarios públicos",
+        "noPolicies": "No hay políticas configuradas. Agrega una política para comenzar.",
+        "addPolicy": "Agregar Política",
+        "actions": {
+          "create": "Crear",
+          "read": "Leer",
+          "update": "Actualizar",
+          "delete": "Eliminar"
+        }
+      }
+    }
+  }
+}
+```
+
+#### Características del Componente
+
+- ✅ **Interfaz Intuitiva**: UI clara para gestionar permisos complejos
+- ✅ **Validación en Tiempo Real**: Errores mostrados inmediatamente
+- ✅ **Scroll Automático**: Nuevo ítem automáticamente visible
+- ✅ **Prevención de Duplicados**: No permite acciones duplicadas
+- ✅ **Orden Lógico**: Políticas ordenadas según PREFERRED_POLICY_ORDER
+- ✅ **Responsive**: Adaptable a diferentes tamaños de pantalla
+- ✅ **Internacionalización**: Soporte completo para múltiples idiomas
+
 ## 🛠️ Utilidades
 
 ### JWT Utils
@@ -458,23 +646,19 @@ function DevPage() {
 Utilidades para trabajar con tokens JWT:
 
 ```tsx
-import {
-  decodeJwtSafely,
-  getCurrentUserEmail,
-  isTokenExpired
-} from '@nocios/crudify-ui';
+import { decodeJwtSafely, getCurrentUserEmail, isTokenExpired } from "@nocios/crudify-ui";
 
 // Decodificar JWT de forma segura
 const payload = decodeJwtSafely(token);
-console.log('Usuario ID:', payload?.sub);
+console.log("Usuario ID:", payload?.sub);
 
 // Obtener email del usuario actual
 const email = getCurrentUserEmail();
-console.log('Email:', email);
+console.log("Email:", email);
 
 // Verificar si un token está expirado
 const expired = isTokenExpired(token);
-console.log('Token expirado:', expired);
+console.log("Token expirado:", expired);
 ```
 
 ### Token Storage
@@ -482,35 +666,35 @@ console.log('Token expirado:', expired);
 Sistema de almacenamiento seguro para tokens:
 
 ```tsx
-import { TokenStorage } from '@nocios/crudify-ui';
-import type { TokenData, StorageType } from '@nocios/crudify-ui';
+import { TokenStorage } from "@nocios/crudify-ui";
+import type { TokenData, StorageType } from "@nocios/crudify-ui";
 
 // Crear instancia de storage
 const storage = new TokenStorage({
-  type: 'localStorage', // 'localStorage' | 'sessionStorage'
-  encryptionKey: 'mi-clave-secreta'
+  type: "localStorage", // 'localStorage' | 'sessionStorage'
+  encryptionKey: "mi-clave-secreta",
 });
 
 // Guardar tokens
 const tokens: TokenData = {
-  accessToken: 'access_token_here',
-  refreshToken: 'refresh_token_here',
+  accessToken: "access_token_here",
+  refreshToken: "refresh_token_here",
   expiresIn: 3600,
-  refreshExpiresIn: 86400
+  refreshExpiresIn: 86400,
 };
 
 await storage.setTokens(tokens);
 
 // Obtener tokens
 const storedTokens = await storage.getTokens();
-console.log('Tokens almacenados:', storedTokens);
+console.log("Tokens almacenados:", storedTokens);
 
 // Limpiar tokens
 await storage.clearTokens();
 
 // Verificar validez
 const isValid = await storage.isValid();
-console.log('Tokens válidos:', isValid);
+console.log("Tokens válidos:", isValid);
 ```
 
 ### Error Handler
@@ -518,14 +702,8 @@ console.log('Tokens válidos:', isValid);
 Sistema completo de manejo de errores:
 
 ```tsx
-import {
-  handleCrudifyError,
-  parseApiError,
-  parseTransactionError,
-  getErrorMessage,
-  ERROR_CODES
-} from '@nocios/crudify-ui';
-import type { ParsedError, ErrorCode } from '@nocios/crudify-ui';
+import { handleCrudifyError, parseApiError, parseTransactionError, getErrorMessage, ERROR_CODES } from "@nocios/crudify-ui";
+import type { ParsedError, ErrorCode } from "@nocios/crudify-ui";
 
 // Manejo universal de errores
 try {
@@ -533,10 +711,10 @@ try {
 } catch (error) {
   const parsedError: ParsedError = handleCrudifyError(error);
 
-  console.log('Tipo:', parsedError.type);
-  console.log('Código:', parsedError.code);
-  console.log('Mensaje:', parsedError.message);
-  console.log('Severidad:', parsedError.severity);
+  console.log("Tipo:", parsedError.type);
+  console.log("Código:", parsedError.code);
+  console.log("Mensaje:", parsedError.message);
+  console.log("Severidad:", parsedError.severity);
 
   // Mostrar mensaje apropiado al usuario
   const userMessage = getErrorMessage(parsedError.code as ErrorCode);
@@ -550,7 +728,7 @@ const apiError = parseApiError(response);
 const transactionError = parseTransactionError(response);
 
 // Códigos de error disponibles
-console.log('Códigos disponibles:', ERROR_CODES);
+console.log("Códigos disponibles:", ERROR_CODES);
 ```
 
 ## 🔄 API de Crudify Browser
@@ -558,15 +736,16 @@ console.log('Códigos disponibles:', ERROR_CODES);
 Esta librería re-exporta completamente `@nocios/crudify-browser`, proporcionando una API unificada:
 
 ```tsx
-import { crudify } from '@nocios/crudify-ui';
+import { crudify } from "@nocios/crudify-ui";
 // Equivale a: import crudify from '@nocios/crudify-browser';
 
 // Todas las funcionalidades de crudify-browser están disponibles
-const result = await crudify.create('users', userData);
-const users = await crudify.read('users');
+const result = await crudify.create("users", userData);
+const users = await crudify.read("users");
 ```
 
 Esto significa que puedes:
+
 - ✅ Importar solo desde `@nocios/crudify-ui`
 - ✅ Usar todas las funcionalidades de crudify-browser
 - ✅ Tener una API unificada
@@ -598,13 +777,11 @@ import type {
   // Tipos de utilidades
   TokenData,
   ParsedError,
-  ErrorCode
-} from '@nocios/crudify-ui';
+  ErrorCode,
+} from "@nocios/crudify-ui";
 
 // Ejemplo con tipos
-const handleLogin = async (
-  credentials: LoginRequest
-): Promise<CrudifyApiResponse<LoginResponse>> => {
+const handleLogin = async (credentials: LoginRequest): Promise<CrudifyApiResponse<LoginResponse>> => {
   // implementación con tipos seguros
 };
 ```
@@ -671,43 +848,41 @@ import { CrudifyLogin } from '@nocios/crudify-ui';
 ### SessionProvider con opciones completas
 
 ```tsx
-import { SessionProvider } from '@nocios/crudify-ui';
-import type { UseSessionOptions } from '@nocios/crudify-ui';
+import { SessionProvider } from "@nocios/crudify-ui";
+import type { UseSessionOptions } from "@nocios/crudify-ui";
 
 const sessionOptions: UseSessionOptions = {
   // Tipo de almacenamiento
-  storageType: 'localStorage', // 'localStorage' | 'sessionStorage'
+  storageType: "localStorage", // 'localStorage' | 'sessionStorage'
 
   // Callbacks del ciclo de vida
   onSessionExpired: () => {
-    console.log('Sesión expirada - redirigir a login');
-    window.location.href = '/login';
+    console.log("Sesión expirada - redirigir a login");
+    window.location.href = "/login";
   },
 
   onSessionRestored: (tokens) => {
-    console.log('Sesión restaurada exitosamente', tokens);
+    console.log("Sesión restaurada exitosamente", tokens);
   },
 
   onTokensRefreshed: (tokens) => {
-    console.log('Tokens renovados', tokens);
+    console.log("Tokens renovados", tokens);
   },
 
   onLogout: () => {
-    console.log('Usuario cerró sesión');
+    console.log("Usuario cerró sesión");
   },
 
   onError: (error) => {
-    console.error('Error de sesión:', error);
-  }
+    console.error("Error de sesión:", error);
+  },
 };
 
 function App() {
   return (
     <SessionProvider options={sessionOptions}>
       <Router>
-        <Routes>
-          {/* tus rutas */}
-        </Routes>
+        <Routes>{/* tus rutas */}</Routes>
       </Router>
     </SessionProvider>
   );
@@ -719,13 +894,13 @@ function App() {
 Si necesitas configuración manual en lugar de variables de entorno:
 
 ```tsx
-import { crudify } from '@nocios/crudify-ui';
+import { crudify } from "@nocios/crudify-ui";
 
 // Configurar manualmente antes de usar
 crudify.configure({
-  publicApiKey: 'tu-api-key',
-  environment: 'production', // 'dev' | 'stg' | 'api' | 'prod'
-  baseUrl: 'https://api.tudominio.com' // opcional
+  publicApiKey: "tu-api-key",
+  environment: "production", // 'dev' | 'stg' | 'api' | 'prod'
+  baseUrl: "https://api.tudominio.com", // opcional
 });
 ```
 
@@ -734,14 +909,9 @@ crudify.configure({
 ### Aplicación básica con autenticación
 
 ```tsx
-import React from 'react';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
-import {
-  SessionProvider,
-  ProtectedRoute,
-  CrudifyLogin,
-  useSessionContext
-} from '@nocios/crudify-ui';
+import React from "react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { SessionProvider, ProtectedRoute, CrudifyLogin, useSessionContext } from "@nocios/crudify-ui";
 
 // Componente Dashboard
 function Dashboard() {
@@ -759,14 +929,14 @@ function Dashboard() {
 // Componente Login
 function LoginPage() {
   return (
-    <div style={{ maxWidth: '400px', margin: '0 auto', padding: '2rem' }}>
+    <div style={{ maxWidth: "400px", margin: "0 auto", padding: "2rem" }}>
       <CrudifyLogin
         config={{
           appName: "Mi App",
-          colors: { primaryColor: "#1976d2" }
+          colors: { primaryColor: "#1976d2" },
         }}
         onLoginSuccess={(userData) => {
-          console.log('Login exitoso:', userData);
+          console.log("Login exitoso:", userData);
           // La navegación se maneja automáticamente
         }}
       />
@@ -802,8 +972,8 @@ export default App;
 ### Aplicación con operaciones CRUD
 
 ```tsx
-import React, { useState, useEffect } from 'react';
-import { useData, useUserData } from '@nocios/crudify-ui';
+import React, { useState, useEffect } from "react";
+import { useData, useUserData } from "@nocios/crudify-ui";
 
 function ProductManager() {
   const [products, setProducts] = useState([]);
@@ -820,13 +990,13 @@ function ProductManager() {
   const loadProducts = async () => {
     setLoading(true);
     try {
-      const result = await read('products', {
+      const result = await read("products", {
         filters: { userId: userData?.id },
-        limit: 20
+        limit: 20,
       });
       setProducts(result.data || []);
     } catch (error) {
-      console.error('Error cargando productos:', error);
+      console.error("Error cargando productos:", error);
     } finally {
       setLoading(false);
     }
@@ -834,31 +1004,31 @@ function ProductManager() {
 
   const createProduct = async (productData) => {
     try {
-      await create('products', {
+      await create("products", {
         ...productData,
-        userId: userData?.id
+        userId: userData?.id,
       });
       await loadProducts(); // Recargar lista
     } catch (error) {
-      console.error('Error creando producto:', error);
+      console.error("Error creando producto:", error);
     }
   };
 
   const updateProduct = async (productId, updates) => {
     try {
-      await update('products', productId, updates);
+      await update("products", productId, updates);
       await loadProducts(); // Recargar lista
     } catch (error) {
-      console.error('Error actualizando producto:', error);
+      console.error("Error actualizando producto:", error);
     }
   };
 
   const deleteProduct = async (productId) => {
     try {
-      await remove('products', productId);
+      await remove("products", productId);
       await loadProducts(); // Recargar lista
     } catch (error) {
-      console.error('Error eliminando producto:', error);
+      console.error("Error eliminando producto:", error);
     }
   };
 
@@ -868,25 +1038,33 @@ function ProductManager() {
     <div>
       <h2>Mis Productos</h2>
 
-      <button onClick={() => createProduct({
-        name: 'Nuevo Producto',
-        price: 99.99
-      })}>
+      <button
+        onClick={() =>
+          createProduct({
+            name: "Nuevo Producto",
+            price: 99.99,
+          })
+        }
+      >
         Crear Producto
       </button>
 
       <ul>
-        {products.map(product => (
+        {products.map((product) => (
           <li key={product.id}>
-            <span>{product.name} - ${product.price}</span>
-            <button onClick={() => updateProduct(product.id, {
-              price: product.price * 1.1
-            })}>
+            <span>
+              {product.name} - ${product.price}
+            </span>
+            <button
+              onClick={() =>
+                updateProduct(product.id, {
+                  price: product.price * 1.1,
+                })
+              }
+            >
               Aumentar Precio 10%
             </button>
-            <button onClick={() => deleteProduct(product.id)}>
-              Eliminar
-            </button>
+            <button onClick={() => deleteProduct(product.id)}>Eliminar</button>
           </li>
         ))}
       </ul>
@@ -911,10 +1089,12 @@ function ProductManager() {
 // 1. Usar SessionProvider en el nivel más alto
 function App() {
   return (
-    <SessionProvider options={{
-      storageType: 'localStorage', // Más persistente
-      onSessionExpired: handleSessionExpired
-    }}>
+    <SessionProvider
+      options={{
+        storageType: "localStorage", // Más persistente
+        onSessionExpired: handleSessionExpired,
+      }}
+    >
       <YourApp />
     </SessionProvider>
   );
@@ -923,13 +1103,13 @@ function App() {
 // 2. Proteger rutas sensibles
 <ProtectedRoute fallback={<LoginRedirect />}>
   <SensitiveComponent />
-</ProtectedRoute>
+</ProtectedRoute>;
 
 // 3. Manejar errores de autenticación
 const { error, clearError } = useAuth();
 useEffect(() => {
   if (error) {
-    console.error('Error de auth:', error);
+    console.error("Error de auth:", error);
     // Mostrar notificación al usuario
     clearError();
   }
@@ -941,8 +1121,8 @@ useEffect(() => {
     // Opcional: limpiar datos sensibles
   };
 
-  window.addEventListener('beforeunload', handleBeforeUnload);
-  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  window.addEventListener("beforeunload", handleBeforeUnload);
+  return () => window.removeEventListener("beforeunload", handleBeforeUnload);
 }, []);
 ```
 
@@ -951,6 +1131,7 @@ useEffect(() => {
 ### Problemas Comunes
 
 **1. Token expirado constantemente**
+
 ```tsx
 // Verificar configuración de refresh tokens
 const { isExpiringSoon, refreshTokens } = useSession();
@@ -963,6 +1144,7 @@ useEffect(() => {
 ```
 
 **2. Sesión no se restaura al recargar**
+
 ```tsx
 // Asegurar que SessionProvider esté en el nivel correcto
 // y verificar storageType
@@ -970,11 +1152,12 @@ useEffect(() => {
 ```
 
 **3. Errores de CORS**
+
 ```tsx
 // Verificar configuración de environment
 crudify.configure({
-  environment: 'dev', // Asegurar environment correcto
-  publicApiKey: process.env.REACT_APP_CRUDIFY_PUBLIC_API_KEY
+  environment: "dev", // Asegurar environment correcto
+  publicApiKey: process.env.REACT_APP_CRUDIFY_PUBLIC_API_KEY,
 });
 ```
 
@@ -982,11 +1165,11 @@ crudify.configure({
 
 ```tsx
 // Usar SessionDebugInfo para desarrollo
-import { SessionDebugInfo } from '@nocios/crudify-ui';
+import { SessionDebugInfo } from "@nocios/crudify-ui";
 
 function DevPanel() {
-  return process.env.NODE_ENV === 'development' ? (
-    <div style={{ position: 'fixed', bottom: 0, right: 0, background: 'white', padding: '1rem' }}>
+  return process.env.NODE_ENV === "development" ? (
+    <div style={{ position: "fixed", bottom: 0, right: 0, background: "white", padding: "1rem" }}>
       <SessionDebugInfo />
     </div>
   ) : null;
@@ -997,34 +1180,35 @@ function DevPanel() {
 
 ### Hooks API Reference
 
-| Hook | Propósito | Returns |
-|------|-----------|---------|
-| `useAuth` | Autenticación principal | `{ login, logout, isAuthenticated, isLoading, error }` |
-| `useUserData` | Datos del usuario | `{ userData, sessionData, isLoading, error, refetch }` |
-| `useData` | Operaciones CRUD | `{ create, read, update, remove, isInitialized }` |
-| `useSession` | Control de sesión | `{ tokens, isAuthenticated, refreshTokens, expiresIn }` |
-| `useSessionContext` | Contexto global | `{ sessionData, isAuthenticated, logout, getTokenInfo }` |
+| Hook                | Propósito               | Returns                                                  |
+| ------------------- | ----------------------- | -------------------------------------------------------- |
+| `useAuth`           | Autenticación principal | `{ login, logout, isAuthenticated, isLoading, error }`   |
+| `useUserData`       | Datos del usuario       | `{ userData, sessionData, isLoading, error, refetch }`   |
+| `useData`           | Operaciones CRUD        | `{ create, read, update, remove, isInitialized }`        |
+| `useSession`        | Control de sesión       | `{ tokens, isAuthenticated, refreshTokens, expiresIn }`  |
+| `useSessionContext` | Contexto global         | `{ sessionData, isAuthenticated, logout, getTokenInfo }` |
 
 ### Componentes API Reference
 
-| Componente | Props Principales | Propósito |
-|------------|-------------------|-----------|
-| `SessionProvider` | `options: UseSessionOptions` | Provider global de sesión |
-| `CrudifyLogin` | `config, onLoginSuccess, language` | Componente de login completo |
-| `ProtectedRoute` | `fallback, children` | Protección de rutas |
-| `UserProfileDisplay` | `showAvatar, showDetails` | Display de perfil |
+| Componente           | Props Principales                  | Propósito                    |
+| -------------------- | ---------------------------------- | ---------------------------- |
+| `SessionProvider`    | `options: UseSessionOptions`       | Provider global de sesión    |
+| `CrudifyLogin`       | `config, onLoginSuccess, language` | Componente de login completo |
+| `ProtectedRoute`     | `fallback, children`               | Protección de rutas          |
+| `UserProfileDisplay` | `showAvatar, showDetails`          | Display de perfil            |
 
 ### Utilidades API Reference
 
-| Utilidad | Funciones | Propósito |
-|----------|-----------|-----------|
-| `JWT Utils` | `decodeJwtSafely, getCurrentUserEmail, isTokenExpired` | Manejo de JWT |
-| `Token Storage` | `setTokens, getTokens, clearTokens, isValid` | Almacenamiento seguro |
-| `Error Handler` | `handleCrudifyError, parseApiError, getErrorMessage` | Manejo de errores |
+| Utilidad        | Funciones                                              | Propósito             |
+| --------------- | ------------------------------------------------------ | --------------------- |
+| `JWT Utils`     | `decodeJwtSafely, getCurrentUserEmail, isTokenExpired` | Manejo de JWT         |
+| `Token Storage` | `setTokens, getTokens, clearTokens, isValid`           | Almacenamiento seguro |
+| `Error Handler` | `handleCrudifyError, parseApiError, getErrorMessage`   | Manejo de errores     |
 
 ## 🔄 Changelog
 
 ### v1.3.1
+
 - ✅ Sistema completo de Refresh Token Pattern
 - ✅ Hooks modernos (useAuth, useUserData, useData)
 - ✅ SessionProvider con contexto global
@@ -1043,4 +1227,4 @@ Si encuentras bugs o tienes sugerencias, por favor crea un issue en el repositor
 
 ---
 
-**¿Necesitas ayuda?** Consulta la documentación completa o contacta al equipo de desarrollo.
+**¿Necesitas ayuda?** Consulta la documentación completa o contacta al equipo de desarrollo.