@nocios/crudify-components 2.0.42 → 2.0.60

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-components";
+import React from 'react';
+import { SessionProvider } from '@nocios/crudify-components';
 
 function App() {
   return (
@@ -52,12 +52,12 @@ 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);
         },
       }}
     >
@@ -84,17 +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-components";
+import { useAuth } from '@nocios/crudify-components';
 
 function LoginPage() {
   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);
     }
   };
 
@@ -108,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>}
@@ -130,7 +130,7 @@ function LoginPage() {
 Hook para obtener y manejar los datos completos del usuario:
 
 ```tsx
-import { useUserData } from "@nocios/crudify-components";
+import { useUserData } from '@nocios/crudify-components';
 
 function UserProfile() {
   const { userData, sessionData, isLoading, error, refetch } = useUserData({
@@ -176,54 +176,54 @@ function UserProfile() {
 Hook para realizar operaciones CRUD type-safe:
 
 ```tsx
-import { useData } from "@nocios/crudify-components";
+import { useData } from '@nocios/crudify-components';
 
 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,
       });
-      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, {
+      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);
     }
   };
 
@@ -233,8 +233,8 @@ 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>
   );
 }
@@ -252,22 +252,23 @@ function ProductManager() {
 Hook de bajo nivel para control directo de sesiones:
 
 ```tsx
-import { useSession } from "@nocios/crudify-components";
+import { useSession } from '@nocios/crudify-components';
 
 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>}
 
@@ -287,7 +288,7 @@ function SessionManager() {
 Hook para acceder al contexto global de sesión:
 
 ```tsx
-import { useSessionContext } from "@nocios/crudify-components";
+import { useSessionContext } from '@nocios/crudify-components';
 
 function NavigationBar() {
   const { isAuthenticated, sessionData, logout, getTokenInfo } = useSessionContext();
@@ -311,26 +312,26 @@ function NavigationBar() {
 Componente completo de autenticación con múltiples pantallas:
 
 ```tsx
-import { CrudifyLogin } from "@nocios/crudify-components";
-import type { CrudifyLoginConfig } from "@nocios/crudify-components";
+import { CrudifyLogin } from '@nocios/crudify-components';
+import type { CrudifyLoginConfig } from '@nocios/crudify-components';
 
 function AuthPage() {
   const config: CrudifyLoginConfig = {
-    appName: "Mi Aplicación",
-    logo: "/logo.png",
+    appName: 'Mi Aplicación',
+    logo: '/logo.png',
     colors: {
-      primaryColor: "#1066BA",
-      bgColor: "#f5f5f5",
+      primaryColor: '#1066BA',
+      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 (
@@ -367,7 +368,7 @@ function AuthPage() {
 Componente para mostrar información del perfil del usuario:
 
 ```tsx
-import { UserProfileDisplay } from "@nocios/crudify-components";
+import { UserProfileDisplay } from '@nocios/crudify-components';
 
 function ProfilePage() {
   return (
@@ -384,7 +385,7 @@ function ProfilePage() {
 Componente para proteger rutas que requieren autenticación:
 
 ```tsx
-import { ProtectedRoute } from "@nocios/crudify-components";
+import { ProtectedRoute } from '@nocios/crudify-components';
 
 function App() {
   return (
@@ -410,7 +411,7 @@ function App() {
 Componente útil para desarrollo y debug:
 
 ```tsx
-import { SessionDebugInfo } from "@nocios/crudify-components";
+import { SessionDebugInfo } from '@nocios/crudify-components';
 
 function DevPage() {
   return (
@@ -427,32 +428,32 @@ function DevPage() {
 Componente completo para configurar políticas de acceso a datos públicos:
 
 ```tsx
-import { Policies, POLICY_ACTIONS, PREFERRED_POLICY_ORDER, PolicyAction } from "@nocios/crudify-components";
-import { useState } from "react";
+import { Policies, POLICY_ACTIONS, PREFERRED_POLICY_ORDER, PolicyAction } from '@nocios/crudify-components';
+import { useState } from 'react';
 
 function ModuleConfiguration() {
   const [policies, setPolicies] = useState([
     {
-      id: "1",
-      action: "read",
+      id: '1',
+      action: 'read',
       fields: {
-        allow: ["name", "email"],
-        owner_allow: ["phone"],
-        deny: ["password", "internal_notes"],
+        allow: ['name', 'email'],
+        owner_allow: ['phone'],
+        deny: ['password', 'internal_notes'],
       },
     },
     {
-      id: "2",
-      action: "create",
+      id: '2',
+      action: 'create',
       fields: {
-        allow: ["name", "email"],
+        allow: ['name', 'email'],
         owner_allow: [],
-        deny: ["status", "verified"],
+        deny: ['status', 'verified'],
       },
     },
   ]);
 
-  const availableFields = ["name", "email", "phone", "address", "status", "verified", "password", "internal_notes"];
+  const availableFields = ['name', 'email', 'phone', 'address', 'status', 'verified', 'password', 'internal_notes'];
 
   const handlePolicyChange = (newPolicies) => {
     setPolicies(newPolicies);
@@ -472,7 +473,7 @@ function ModuleConfiguration() {
       />
 
       {/* Mostrar acciones disponibles */}
-      <div style={{ marginTop: "20px" }}>
+      <div style={{ marginTop: '20px' }}>
         <h3>Acciones Disponibles:</h3>
         <ul>
           {POLICY_ACTIONS.map((action) => (
@@ -518,11 +519,11 @@ type Policy = {
 
 ```tsx
 // Acciones de política disponibles
-export const POLICY_ACTIONS = ["create", "read", "update", "delete"] as const;
+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"];
+export const PREFERRED_POLICY_ORDER: PolicyAction[] = ['create', 'read', 'update', 'delete'];
 ```
 
 #### Casos de Uso Comunes
@@ -532,12 +533,12 @@ export const PREFERRED_POLICY_ORDER: PolicyAction[] = ["create", "read", "update
 ```tsx
 // Permitir lectura pública de ciertos campos
 const publicReadPolicy = {
-  id: "public-read",
-  action: "read",
+  id: 'public-read',
+  action: 'read',
   fields: {
-    allow: ["name", "description", "published_at"],
-    owner_allow: ["views", "stats"],
-    deny: ["internal_notes", "admin_flags"],
+    allow: ['name', 'description', 'published_at'],
+    owner_allow: ['views', 'stats'],
+    deny: ['internal_notes', 'admin_flags'],
   },
 };
 ```
@@ -547,12 +548,12 @@ const publicReadPolicy = {
 ```tsx
 // Permitir creación pero restringir ciertos campos
 const createPolicy = {
-  id: "public-create",
-  action: "create",
+  id: 'public-create',
+  action: 'create',
   fields: {
-    allow: ["title", "content", "category"],
+    allow: ['title', 'content', 'category'],
     owner_allow: [],
-    deny: ["status", "featured", "admin_verified"],
+    deny: ['status', 'featured', 'admin_verified'],
   },
 };
 ```
@@ -562,9 +563,9 @@ const createPolicy = {
 ```tsx
 // Solo el propietario puede eliminar
 const deletePolicy = {
-  id: "owner-delete",
-  action: "delete",
-  permission: "owner", // '*' = todos, 'deny' = nadie, 'owner' = solo propietario
+  id: 'owner-delete',
+  action: 'delete',
+  permission: 'owner', // '*' = todos, 'deny' = nadie, 'owner' = solo propietario
 };
 ```
 
@@ -582,12 +583,12 @@ function PolicyManager() {
       // Error de campo específico
       if (error.fieldErrors) {
         setErrors({
-          _error: "Hay errores en la configuración",
+          _error: 'Hay errores en la configuración',
           ...error.fieldErrors,
         });
       } else {
         // Error general
-        setErrors("Error al guardar las políticas");
+        setErrors('Error al guardar las políticas');
       }
     }
   };
@@ -646,19 +647,19 @@ El componente usa react-i18next para internacionalización. Las claves de traduc
 Utilidades para trabajar con tokens JWT:
 
 ```tsx
-import { decodeJwtSafely, getCurrentUserEmail, isTokenExpired } from "@nocios/crudify-components";
+import { decodeJwtSafely, getCurrentUserEmail, isTokenExpired } from '@nocios/crudify-components';
 
 // 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
@@ -666,19 +667,19 @@ console.log("Token expirado:", expired);
 Sistema de almacenamiento seguro para tokens:
 
 ```tsx
-import { TokenStorage } from "@nocios/crudify-components";
-import type { TokenData, StorageType } from "@nocios/crudify-components";
+import { TokenStorage } from '@nocios/crudify-components';
+import type { TokenData, StorageType } from '@nocios/crudify-components';
 
 // 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,
 };
@@ -687,14 +688,14 @@ 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
@@ -702,8 +703,14 @@ console.log("Tokens válidos:", isValid);
 Sistema completo de manejo de errores:
 
 ```tsx
-import { handleCrudifyError, parseApiError, parseTransactionError, getErrorMessage, ERROR_CODES } from "@nocios/crudify-components";
-import type { ParsedError, ErrorCode } from "@nocios/crudify-components";
+import {
+  handleCrudifyError,
+  parseApiError,
+  parseTransactionError,
+  getErrorMessage,
+  ERROR_CODES,
+} from '@nocios/crudify-components';
+import type { ParsedError, ErrorCode } from '@nocios/crudify-components';
 
 // Manejo universal de errores
 try {
@@ -711,10 +718,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);
@@ -728,7 +735,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
@@ -736,12 +743,12 @@ console.log("Códigos disponibles:", ERROR_CODES);
 Esta librería re-exporta completamente `@nocios/crudify-sdk`, proporcionando una API unificada:
 
 ```tsx
-import { crudify } from "@nocios/crudify-components";
+import { crudify } from '@nocios/crudify-components';
 // Equivale a: import crudify from '@nocios/crudify-sdk';
 
 // 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:
@@ -778,7 +785,7 @@ import type {
   TokenData,
   ParsedError,
   ErrorCode,
-} from "@nocios/crudify-components";
+} from '@nocios/crudify-components';
 
 // Ejemplo con tipos
 const handleLogin = async (credentials: LoginRequest): Promise<CrudifyApiResponse<LoginResponse>> => {
@@ -848,33 +855,33 @@ import { CrudifyLogin } from '@nocios/crudify-components';
 ### SessionProvider con opciones completas
 
 ```tsx
-import { SessionProvider } from "@nocios/crudify-components";
-import type { UseSessionOptions } from "@nocios/crudify-components";
+import { SessionProvider } from '@nocios/crudify-components';
+import type { UseSessionOptions } from '@nocios/crudify-components';
 
 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);
   },
 };
 
@@ -894,13 +901,13 @@ function App() {
 Si necesitas configuración manual en lugar de variables de entorno:
 
 ```tsx
-import { crudify } from "@nocios/crudify-components";
+import { crudify } from '@nocios/crudify-components';
 
 // 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
 });
 ```
 
@@ -909,9 +916,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-components";
+import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { SessionProvider, ProtectedRoute, CrudifyLogin, useSessionContext } from '@nocios/crudify-components';
 
 // Componente Dashboard
 function Dashboard() {
@@ -929,14 +936,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" },
+          appName: 'Mi App',
+          colors: { primaryColor: '#1976d2' },
         }}
         onLoginSuccess={(userData) => {
-          console.log("Login exitoso:", userData);
+          console.log('Login exitoso:', userData);
           // La navegación se maneja automáticamente
         }}
       />
@@ -972,8 +979,8 @@ export default App;
 ### Aplicación con operaciones CRUD
 
 ```tsx
-import React, { useState, useEffect } from "react";
-import { useData, useUserData } from "@nocios/crudify-components";
+import React, { useState, useEffect } from 'react';
+import { useData, useUserData } from '@nocios/crudify-components';
 
 function ProductManager() {
   const [products, setProducts] = useState([]);
@@ -990,13 +997,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,
       });
       setProducts(result.data || []);
     } catch (error) {
-      console.error("Error cargando productos:", error);
+      console.error('Error cargando productos:', error);
     } finally {
       setLoading(false);
     }
@@ -1004,31 +1011,31 @@ function ProductManager() {
 
   const createProduct = async (productData) => {
     try {
-      await create("products", {
+      await create('products', {
         ...productData,
         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);
     }
   };
 
@@ -1041,7 +1048,7 @@ function ProductManager() {
       <button
         onClick={() =>
           createProduct({
-            name: "Nuevo Producto",
+            name: 'Nuevo Producto',
             price: 99.99,
           })
         }
@@ -1091,7 +1098,7 @@ function App() {
   return (
     <SessionProvider
       options={{
-        storageType: "localStorage", // Más persistente
+        storageType: 'localStorage', // Más persistente
         onSessionExpired: handleSessionExpired,
       }}
     >
@@ -1109,7 +1116,7 @@ function App() {
 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();
   }
@@ -1121,8 +1128,8 @@ useEffect(() => {
     // Opcional: limpiar datos sensibles
   };
 
-  window.addEventListener("beforeunload", handleBeforeUnload);
-  return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  window.addEventListener('beforeunload', handleBeforeUnload);
+  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
 }, []);
 ```
 
@@ -1156,7 +1163,7 @@ useEffect(() => {
 ```tsx
 // Verificar configuración de environment
 crudify.configure({
-  environment: "dev", // Asegurar environment correcto
+  environment: 'dev', // Asegurar environment correcto
   publicApiKey: process.env.REACT_APP_CRUDIFY_PUBLIC_API_KEY,
 });
 ```
@@ -1165,11 +1172,11 @@ crudify.configure({
 
 ```tsx
 // Usar SessionDebugInfo para desarrollo
-import { SessionDebugInfo } from "@nocios/crudify-components";
+import { SessionDebugInfo } from '@nocios/crudify-components';
 
 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;