@nocios/crudify-ui 1.3.1 → 1.3.2

package/README.md

@@ -1,1244 +1,291 @@
-# @nocios/crudify-ui - Sistema Completo de Autenticación y CRUD
+# @nocios/crudify-ui
 
-> Biblioteca completa de componentes React para autenticación y operaciones CRUD, basada en la API de Crudify con sistema de inicialización robusto y gestión unificada de estado.
+[![npm version](https://badge.fury.io/js/%40nocios%2Fcrudify-ui.svg)](https://badge.fury.io/js/%40nocios%2Fcrudify-ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-## 🚀 Instalación
+Biblioteca completa de componentes UI y hooks de React para aplicaciones Crudify. Proporciona autenticación moderna, manejo de sesiones y una API unificada.
 
-```bash
-npm install @nocios/crudify-ui
-```
+## 🚀 Características
 
-## 📋 Dependencias Requeridas
+- **🔐 Autenticación Moderna**: Sistema completo con Refresh Token Pattern
+- **⚡ Manejo de Sesiones**: Persistencia automática y sincronización cross-tab
+- **🎨 Componentes UI**: Componentes React listos con Material-UI
+- **🪝 React Hooks**: Hooks especializados para CRUD y autenticación
+- **🔄 API Unificada**: Re-exporta completamente @nocios/crudify-browser
+- **🌍 Internacionalización**: Soporte para múltiples idiomas
+- **📱 TypeScript**: Completamente tipado
 
-Asegúrate de tener estas dependencias en tu proyecto:
+## 📦 Instalación
 
 ```bash
-npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled
-```
+npm install @nocios/crudify-ui
 
-## ⭐ **NUEVO: Sistema Unificado (Recomendado)**
+# Peer dependencies
+npm install @mui/material @mui/icons-material react react-dom
+```
 
-### 🏗️ Implementación con CrudifyDataProvider
+## 🏗️ Configuración Rápida
 
-El nuevo sistema unificado proporciona inicialización robusta, gestión automática de tokens y operaciones CRUD sin configuración compleja:
+### 1. Configurar SessionProvider
 
 ```tsx
-// App.tsx - Configuración principal
-import React from 'react';
-import { CrudifyDataProvider } from '@nocios/crudify-ui';
-import AppContent from './AppContent';
+import { SessionProvider } from '@nocios/crudify-ui';
 
 function App() {
   return (
-    <CrudifyDataProvider
-      publicApiKey={process.env.REACT_APP_CRUDIFY_API_KEY}
-      env={process.env.NODE_ENV === 'development' ? 'dev' : 'prod'}
-      appName="Mi Aplicación"
-    >
-      <AppContent />
-    </CrudifyDataProvider>
+    <SessionProvider>
+      <YourApp />
+    </SessionProvider>
   );
 }
-
-export default App;
 ```
 
-```tsx
-// AppContent.tsx - Lógica de autenticación
-import React from 'react';
-import { useCrudifyAuth, CrudifyLogin } from '@nocios/crudify-ui';
-import Dashboard from './Dashboard';
+### 2. Variables de Entorno
 
-function AppContent() {
-  const { isAuthenticated, token, setToken, user, loading } = useCrudifyAuth();
-
-  if (loading) {
-    return <div>Cargando...</div>;
-  }
-
-  if (!isAuthenticated) {
-    return (
-      <CrudifyLogin
-        onLoginSuccess={(newToken) => {
-          setToken(newToken); // ✅ Sincronización automática
-          // No necesitas manejar redirección manual
-        }}
-        config={{
-          colors: { primaryColor: "#1066BA" },
-          loginActions: ["forgotPassword"]
-        }}
-      />
-    );
-  }
-
-  return <Dashboard user={user} />;
-}
-```
-
-```tsx
-// Dashboard.tsx - Uso de operaciones CRUD
-import React, { useEffect, useState } from 'react';
-import { useCrudifyData } from '@nocios/crudify-ui';
-
-function Dashboard({ user }) {
-  const { readItems, createItem, isReady, loading } = useCrudifyData();
-  const [items, setItems] = useState([]);
-
-  useEffect(() => {
-    if (isReady) {
-      loadItems();
-    }
-  }, [isReady]);
-
-  const loadItems = async () => {
-    try {
-      const response = await readItems('products', { active: true });
-      if (response.success) {
-        setItems(response.data);
-      }
-    } catch (error) {
-      console.error('Error loading items:', error);
-    }
-  };
-
-  if (!isReady) {
-    return <div>Inicializando sistema...</div>;
-  }
-
-  return (
-    <div>
-      <h1>Dashboard - {user?.name}</h1>
-      <div>
-        {items.map(item => (
-          <div key={item.id}>{item.name}</div>
-        ))}
-      </div>
-    </div>
-  );
-}
+```bash
+# .env
+REACT_APP_CRUDIFY_PUBLIC_API_KEY=tu_api_key
+REACT_APP_CRUDIFY_ENV=dev
 ```
 
-## 🔧 **Hooks Disponibles**
-
-### 🎯 **useCrudifyAuth** - Gestión de Autenticación
+## 🪝 Hooks Principales
 
-Hook principal para manejar el estado de autenticación:
+### useAuth - Autenticación
 
 ```tsx
-import { useCrudifyAuth } from '@nocios/crudify-ui';
-
-function AuthComponent() {
-  const {
-    isAuthenticated,    // boolean - Si el usuario está autenticado
-    token,             // string | null - Token JWT actual
-    setToken,          // (token: string | null) => void - Función para establecer token
-    user,              // object | null - Datos del usuario
-    loading,           // boolean - Estado de carga
-    login,             // (email: string, password: string) => Promise<CrudifyApiResponse>
-    logout,            // () => void - Función para logout
-    refreshUserData    // () => Promise<void> - Actualizar datos del usuario
-  } = useCrudifyAuth();
-
-  return (
-    <div>
-      {isAuthenticated ? (
-        <div>
-          <h1>Bienvenido, {user?.name}</h1>
-          <button onClick={logout}>Cerrar Sesión</button>
-        </div>
-      ) : (
-        <div>No autenticado</div>
-      )}
-    </div>
-  );
-}
-```
+import { useAuth } from '@nocios/crudify-ui';
 
-### 📊 **useCrudifyData** - Operaciones CRUD
+function LoginComponent() {
+  const { login, logout, isAuthenticated, isLoading } = useAuth();
 
-Hook para realizar operaciones CRUD con inicialización automática:
-
-```tsx
-import { useCrudifyData } from '@nocios/crudify-ui';
-
-function DataComponent() {
-  const {
-    readItems,         // (moduleKey: string, filter?: object, options?: any) => Promise<CrudifyApiResponse>
-    readItem,          // (moduleKey: string, filter: object, options?: any) => Promise<CrudifyApiResponse>
-    createItem,        // (moduleKey: string, data: object, options?: any) => Promise<CrudifyApiResponse>
-    updateItem,        // (moduleKey: string, data: object, options?: any) => Promise<CrudifyApiResponse>
-    deleteItem,        // (moduleKey: string, id: string, options?: any) => Promise<CrudifyApiResponse>
-    transaction,       // (operations: any[], options?: any) => Promise<CrudifyApiResponse>
-    getStructure,      // (options?: any) => Promise<CrudifyApiResponse>
-    getStructurePublic,// (options?: any) => Promise<CrudifyApiResponse>
-    isReady,           // boolean - Si el sistema está listo para operaciones
-    loading            // boolean - Estado de carga
-  } = useCrudifyData();
-
-  const handleLoadProducts = async () => {
-    if (!isReady) return;
-
-    try {
-      const response = await readItems('products', { active: true });
-      if (response.success) {
-        console.log('Productos:', response.data);
-      }
-    } catch (error) {
-      console.error('Error:', error);
-    }
+  const handleLogin = async () => {
+    const result = await login('user@example.com', 'password');
   };
 
-  return (
-    <div>
-      <button onClick={handleLoadProducts} disabled={!isReady}>
-        Cargar Productos
-      </button>
-    </div>
+  return isAuthenticated ? (
+    <button onClick={logout}>Cerrar Sesión</button>
+  ) : (
+    <button onClick={handleLogin} disabled={isLoading}>
+      Iniciar Sesión
+    </button>
   );
 }
 ```
 
-### 👤 **useCrudifyUser** - Gestión de Usuario
-
-Hook especializado para datos del usuario:
+### useUserData - Datos del Usuario
 
 ```tsx
-import { useCrudifyUser } from '@nocios/crudify-ui';
+import { useUserData } from '@nocios/crudify-ui';
 
 function UserProfile() {
-  const {
-    user,              // object | null - Datos del usuario
-    loading,           // boolean - Estado de carga
-    error,             // string | null - Error si existe
-    refreshUserData,   // () => Promise<void> - Actualizar datos
-    updateUserProfile, // (data: object) => Promise<CrudifyApiResponse>
-    isReady           // boolean - Si está listo
-  } = useCrudifyUser();
-
-  if (loading) return <div>Cargando perfil...</div>;
-  if (error) return <div>Error: {error}</div>;
-
-  return (
-    <div>
-      <h2>Perfil de Usuario</h2>
-      <p>Nombre: {user?.name}</p>
-      <p>Email: {user?.email}</p>
-      <button onClick={refreshUserData}>Actualizar Datos</button>
-    </div>
-  );
-}
-```
-
-### ⚙️ **useCrudifyConfig** - Acceso a Configuración
-
-Hook para acceder a la configuración actual:
-
-```tsx
-import { useCrudifyConfig } from '@nocios/crudify-ui';
+  const { userData, sessionData, isLoading } = useUserData();
 
-function ConfigDisplay() {
-  const {
-    config,            // CrudifyConfig - Configuración actual
-    updateConfig,      // (newConfig: Partial<CrudifyConfig>) => void
-    isConfigured,      // boolean - Si está configurado
-    environment        // string - Entorno actual (dev, prod, etc.)
-  } = useCrudifyConfig();
+  if (isLoading) return <div>Cargando...</div>;
 
   return (
     <div>
-      <h3>Configuración Actual</h3>
-      <p>App: {config.appName}</p>
-      <p>Entorno: {environment}</p>
-      <p>Configurado: {isConfigured ? 'Sí' : 'No'}</p>
+      <h2>{userData?.fullName}</h2>
+      <p>Email: {sessionData?.email}</p>
+      <img src={userData?.avatar} alt="Avatar" />
     </div>
   );
 }
 ```
 
-## ⚙️ **Configuración del CrudifyDataProvider**
-
-### Props del Provider
+### useData - Operaciones CRUD
 
 ```tsx
-interface CrudifyDataProviderProps {
-  children: React.ReactNode;
-
-  // Configuración básica
-  publicApiKey?: string;           // Clave de API de Crudify
-  env?: 'dev' | 'stg' | 'api' | 'prod'; // Entorno
-  appName?: string;                // Nombre de la aplicación
-
-  // Configuración visual
-  logo?: string;                   // URL del logo
-  colors?: {
-    primaryColor?: string;         // Color principal
-    bgColor?: string;             // Color de fondo
-    [key: string]: string | undefined;
-  };
+import { useData } from '@nocios/crudify-ui';
 
-  // Configuración avanzada
-  autoReadFromCookies?: boolean;   // Leer configuración desde cookies (default: true)
-  autoInitialize?: boolean;        // Inicializar automáticamente (default: true)
-  persistToken?: boolean;          // Persistir token entre sesiones (default: true)
+function ProductManager() {
+  const { create, read, update, remove } = useData();
 
-  // Configuración de login
-  loginActions?: string[];         // Acciones disponibles: ["forgotPassword", "createUser"]
-
-  // Callbacks opcionales
-  onInitialized?: () => void;      // Callback cuando se inicializa
-  onError?: (error: string) => void; // Callback para errores
-  onTokenChange?: (token: string | null) => void; // Callback cuando cambia el token
-}
-```
-
-### Ejemplo de Configuración Completa
+  const createProduct = async () => {
+    await create('products', { name: 'Nuevo Producto', price: 99.99 });
+  };
 
-```tsx
-import { CrudifyDataProvider } from '@nocios/crudify-ui';
+  const getProducts = async () => {
+    const products = await read('products', { limit: 10 });
+  };
 
-function App() {
   return (
-    <CrudifyDataProvider
-      // Configuración básica
-      publicApiKey={process.env.REACT_APP_CRUDIFY_API_KEY}
-      env={process.env.NODE_ENV === 'development' ? 'dev' : 'prod'}
-      appName="Mi Aplicación"
-
-      // Configuración visual
-      logo="/logo.png"
-      colors={{
-        primaryColor: "#1066BA",
-        bgColor: "#f5f5f5"
-      }}
-
-      // Configuración avanzada
-      autoReadFromCookies={true}
-      autoInitialize={true}
-      persistToken={true}
-
-      // Acciones de login disponibles
-      loginActions={["forgotPassword", "createUser"]}
-
-      // Callbacks
-      onInitialized={() => console.log('Sistema inicializado')}
-      onError={(error) => console.error('Error del sistema:', error)}
-      onTokenChange={(token) => console.log('Token actualizado:', !!token)}
-    >
-      <AppContent />
-    </CrudifyDataProvider>
+    <button onClick={createProduct}>Crear Producto</button>
   );
 }
 ```
 
-## 🎨 **Componente CrudifyLogin**
-
-### Uso Standalone (Sistema Legacy)
+## 🎨 Componentes UI
 
-Para uso directo del componente de login sin el provider unificado:
+### CrudifyLogin - Login Completo
 
 ```tsx
 import { CrudifyLogin } from '@nocios/crudify-ui';
 
-function LoginPage() {
-  const handleLoginSuccess = (token: string, redirectUrl?: string) => {
-    // ⚠️ Importante: Sincronizar con el sistema global
-    sessionStorage.setItem("authToken", token);
-
-    // Si usas CrudifyDataProvider, también sincronizar ahí
-    // setToken(token); // usando useCrudifyAuth
-
-    window.location.href = redirectUrl || "/dashboard";
-  };
-
+function AuthPage() {
   return (
     <CrudifyLogin
       config={{
-        publicApiKey: "tu-api-key",
-        env: "prod",
-        appName: "Mi Aplicación",
+        appName: "Mi App",
         logo: "/logo.png",
-        colors: {
-          primaryColor: "#1066BA",
-          bgColor: "#f5f5f5"
-        },
-        loginActions: ["forgotPassword", "createUser"]
+        colors: { primaryColor: "#1976d2" }
+      }}
+      onLoginSuccess={(userData) => {
+        console.log('Login exitoso:', userData);
       }}
-      onLoginSuccess={handleLoginSuccess}
-      onError={(error) => console.error('Login error:', error)}
-      redirectUrl="/dashboard"
       language="es"
     />
   );
 }
 ```
 
-### Props del CrudifyLogin
+### ProtectedRoute - Protección de Rutas
 
 ```tsx
-interface CrudifyLoginProps {
-  // Configuración
-  config?: CrudifyLoginConfig;
-
-  // Callbacks
-  onLoginSuccess?: (token: string, redirectUrl?: string) => void;
-  onError?: (error: string) => void;
-  onScreenChange?: (screen: string, params?: object) => void;
-  onExternalNavigate?: (path: string) => void;
-
-  // Navegación
-  initialScreen?: 'login' | 'forgotPassword' | 'resetPassword' | 'checkCode';
-  redirectUrl?: string;
-
-  // Personalización
-  language?: string;
-  translations?: CrudifyLoginTranslations;
-  translationsUrl?: string;
-
-  // Opciones
-  autoReadFromCookies?: boolean;
+import { ProtectedRoute } from '@nocios/crudify-ui';
+
+function App() {
+  return (
+    <ProtectedRoute fallback={<LoginPage />}>
+      <Dashboard />
+    </ProtectedRoute>
+  );
 }
 ```
 
-### Personalización Visual
-
-```tsx
-<CrudifyLogin
-  config={{
-    appName: "Mi App",
-    logo: "/mi-logo.png",
-    colors: {
-      primaryColor: "#1066BA",
-      bgColor: "#f5f5f5",
-      textColor: "#333333",
-      buttonTextColor: "#ffffff"
-    },
-  }}
-/>
-```
+## 🔄 API de Crudify Browser
 
-### Traducciones Personalizadas
+Re-exporta completamente `@nocios/crudify-browser`:
 
 ```tsx
-const misTraduciones = {
-  "login.title": "Iniciar Sesión",
-  "login.usernameLabel": "Usuario o Email",
-  "login.passwordLabel": "Contraseña",
-  "login.loginButton": "Entrar",
-  "login.forgotPasswordLink": "¿Olvidaste tu contraseña?",
-  "forgotPassword.title": "Recuperar Contraseña",
-  "forgotPassword.emailLabel": "Email",
-  "forgotPassword.sendButton": "Enviar Código"
-};
+import { crudify } from '@nocios/crudify-ui';
 
-<CrudifyLogin
-  translations={misTraduciones}
-  language="es"
-/>;
+// Usar directamente la API de crudify
+const result = await crudify.create('users', userData);
+const users = await crudify.read('users');
 ```
 
-## 🛠️ **Utilidades y Funciones de Alto Nivel**
-
-### 🔑 **Acceso Directo a la Instancia**
-
-Para casos avanzados donde necesitas acceso directo a la instancia de crudify:
-
-```tsx
-import { getCrudifyInstanceAsync, getCrudifyInstanceSync } from '@nocios/crudify-ui';
-
-// Método asíncrono (recomendado) - espera a que se inicialice
-async function loadData() {
-  try {
-    const crudifyInstance = await getCrudifyInstanceAsync();
-    const response = await crudifyInstance.readItems('products', {});
-    return response;
-  } catch (error) {
-    console.error('Error:', error);
-  }
-}
-
-// Método síncrono - lanza error si no está listo
-function quickOperation() {
-  try {
-    const crudifyInstance = await getCrudifyInstanceSync();
-    // Usar solo si estás seguro de que ya está inicializado
-    return crudifyInstance.readItems('products', {});
-  } catch (error) {
-    console.error('Crudify not ready:', error);
-  }
-}
-```
+## 🛠️ Utilidades
 
-### 🔐 **Utilidades de Tokens JWT**
+### JWT Utils
 
 ```tsx
-import {
-  getCurrentUserEmail,
-  decodeJwtSafely,
-  isTokenExpired,
-  getTokenPayload
-} from '@nocios/crudify-ui';
+import { decodeJwtSafely, getCurrentUserEmail } from '@nocios/crudify-ui';
 
-// Obtener email del usuario actual
-const userEmail = getCurrentUserEmail();
-
-// Decodificar token JWT de forma segura
 const payload = decodeJwtSafely(token);
-
-// Verificar si token ha expirado
-const expired = isTokenExpired(token);
-
-// Obtener payload completo con validación
-const tokenData = getTokenPayload(token);
-console.log('Usuario:', tokenData?.email);
-console.log('Expira:', new Date(tokenData?.exp * 1000));
-```
-
-### 🔒 **Storage Seguro**
-
-```tsx
-import {
-  secureSessionStorage,
-  secureLocalStorage,
-  TokenManager
-} from '@nocios/crudify-ui';
-
-// Uso básico del storage seguro
-secureSessionStorage.setToken(token);
-const currentToken = secureSessionStorage.getToken();
-secureSessionStorage.clear();
-
-// Uso avanzado con TokenManager
-const tokenManager = TokenManager.getInstance();
-
-// Establecer token con sincronización automática
-await tokenManager.setToken(token);
-
-// Obtener token válido (verifica expiración)
-const validToken = tokenManager.getValidToken();
-
-// Limpiar todo
-tokenManager.clearToken();
-
-// Verificar si hay token válido
-const hasValidToken = tokenManager.hasValidToken();
+const email = getCurrentUserEmail();
 ```
 
-### 🚨 **Manejo de Errores**
+### Error Handler
 
 ```tsx
-import {
-  handleCrudifyError,
-  ERROR_CODES,
-  getErrorMessage,
-  CrudifyErrorHandler
-} from '@nocios/crudify-ui';
+import { handleCrudifyError, getErrorMessage } from '@nocios/crudify-ui';
 
-// Manejo básico de errores
 try {
-  await readItems('products', {});
+  // operación
 } catch (error) {
-  const parsedErrors = handleCrudifyError(error);
-  parsedErrors.forEach((err) => {
-    console.log(`Error ${err.code}: ${err.message} (Severidad: ${err.severity})`);
-
-    // Diferentes acciones según el código de error
-    switch (err.code) {
-      case ERROR_CODES.INVALID_CREDENTIALS:
-        // Redirigir a login
-        break;
-      case ERROR_CODES.NETWORK_ERROR:
-        // Mostrar mensaje de conectividad
-        break;
-      case ERROR_CODES.TOO_MANY_REQUESTS:
-        // Mostrar mensaje de espera
-        break;
-    }
-  });
+  const parsedError = handleCrudifyError(error);
+  const userMessage = getErrorMessage(parsedError.code);
 }
-
-// Manejo avanzado con categorías
-const errorHandler = new CrudifyErrorHandler();
-errorHandler.setErrorCallback('authentication', (error) => {
-  // Manejar errores de autenticación
-  console.log('Auth error:', error);
-});
-
-errorHandler.setErrorCallback('validation', (error) => {
-  // Manejar errores de validación
-  console.log('Validation error:', error);
-});
 ```
 
-### 🔍 **Hooks Legacy (Compatibilidad)**
-
-Para migrar desde versiones anteriores:
+## 🚀 Ejemplo Completo
 
 ```tsx
-// ✅ Hooks nuevos (recomendado)
-import { useCrudifyAuth, useCrudifyData, useCrudifyUser } from '@nocios/crudify-ui';
-
-// ⚠️ Hooks legacy (mantienen compatibilidad)
-import { useUserProfile, useCrudifyLogin } from '@nocios/crudify-ui';
-
-function LegacyComponent() {
-  // Hook legacy para perfil de usuario
-  const { userProfile, loading, error, refreshProfile } = useUserProfile();
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import {
+  SessionProvider,
+  ProtectedRoute,
+  CrudifyLogin,
+  useSessionContext
+} from '@nocios/crudify-ui';
 
-  if (loading) return <div>Cargando...</div>;
-  if (error) return <div>Error: {error}</div>;
+function Dashboard() {
+  const { sessionData, logout } = useSessionContext();
 
   return (
     <div>
-      <h1>Bienvenido, {userProfile?.name}</h1>
-      <p>Email: {userProfile?.email}</p>
-      <button onClick={refreshProfile}>Actualizar Perfil</button>
+      <h1>Dashboard</h1>
+      <p>Bienvenido, {sessionData?.email}</p>
+      <button onClick={logout}>Cerrar Sesión</button>
     </div>
   );
 }
 
-function LegacyLoginConfig() {
-  // Hook legacy para configuración
-  const { config } = useCrudifyLogin({
-    publicApiKey: "mi-api-key",
-    env: "prod",
-  });
-
-  return <div>App: {config.appName}</div>;
-}
-```
-
-## 📱 Flujos de Autenticacion
-
-### 1. Login Estandar
-
-```
-Usuario ingresa credenciales → Validacion → Token JWT → Redireccion
-```
-
-### 2. Recuperacion de Contrasena
-
-```
-Email → Codigo por email → Validacion → Nueva contrasena → Login automatico
-```
-
-### 3. Navegacion entre Pantallas
-
-```tsx
-const handleScreenChange = (screen, params) => {
-  console.log(`Cambiando a: ${screen}`, params);
-  // Logica personalizada de navegacion
-};
-
-<CrudifyLogin onScreenChange={handleScreenChange} />;
-```
-
-## 🔐 Integracion con Cookies
-
-El componente puede leer configuracion automaticamente desde cookies:
-
-```javascript
-// Configurar desde JavaScript
-document.cookie = "publicApiKey=tu-api-key; path=/";
-document.cookie = "environment=prod; path=/";
-document.cookie = "appName=Mi App; path=/";
-document.cookie = 'loginActions=["forgotPassword","createUser"]; path=/';
-```
-
-## 🌍 Internacionalizacion
-
-### Idiomas Soportados
-
-- **English** (`en`) - Default
-- **Espanol** (`es`)
-- **Personalizado** (via props)
-
-### Cargar traducciones desde URL
-
-```tsx
-<CrudifyLogin translationsUrl="/api/translations/es.json" language="es" />
-```
-
-## 📊 Integracion con Crudify API
-
-El componente incluye acceso completo a la API de Crudify:
-
-```tsx
-import { crudify } from "@nocios/crudify-ui";
-
-// Usar directamente en tu app
-const usuarios = await crudify.users.list();
-const perfil = await crudify.users.profile();
-```
-
-## 🚨 Manejo de Errores
-
-### Codigos de Error Estandar
-
-| Codigo                  | Descripcion              | Severidad |
-| ----------------------- | ------------------------ | --------- |
-| `INVALID_CREDENTIALS`   | Credenciales incorrectas | warning   |
-| `TOO_MANY_REQUESTS`     | Demasiados intentos      | warning   |
-| `NETWORK_ERROR`         | Error de conexion        | error     |
-| `INTERNAL_SERVER_ERROR` | Error del servidor       | error     |
-
-### Callback de Errores
-
-```tsx
-const handleError = (error: string) => {
-  // Notificar al usuario
-  toast.error(error);
-
-  // Log para debugging
-  console.error("Login error:", error);
-
-  // Analytics
-  analytics.track("login_error", { error });
-};
-
-<CrudifyLogin onError={handleError} />;
-```
-
-## 🔄 Estados del Componente
-
-### Estados de Carga
-
-- Login en progreso
-- Validacion de codigo
-- Envio de email de recuperacion
-- Reseteo de contrasena
-
-### Estados de Error
-
-- Errores por campo especifico
-- Errores globales
-- Errores de red/servidor
-
-## 📱 Ejemplo Avanzado
-
-```tsx
-import React from "react";
-import { CrudifyLogin, useUserProfile, secureSessionStorage, handleCrudifyError } from "@nocios/crudify-ui";
-
-function AuthenticatedApp() {
-  const { userProfile, loading } = useUserProfile();
-
-  // Si hay usuario, mostrar app
-  if (userProfile) {
-    return <MainApp user={userProfile} />;
-  }
-
-  // Si esta cargando, mostrar spinner
-  if (loading) {
-    return <div>Verificando autenticacion...</div>;
-  }
-
-  // Mostrar login
+function LoginPage() {
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        minHeight: "100vh",
-        backgroundColor: "#f5f5f5",
-      }}
-    >
-      <div style={{ width: "400px", padding: "2rem" }}>
-        <CrudifyLogin
-          config={{
-            publicApiKey: process.env.REACT_APP_CRUDIFY_API_KEY,
-            env: process.env.NODE_ENV || "dev",
-            appName: "Mi Aplicacion",
-            logo: "/logo.svg",
-            colors: {
-              primaryColor: "#1066BA",
-            },
-            loginActions: ["forgotPassword", "createUser"],
-          }}
-          onLoginSuccess={(token, redirectUrl) => {
-            secureSessionStorage.setToken(token);
-            // Force re-render para activar useUserProfile
-            window.location.reload();
-          }}
-          onError={(error) => {
-            console.error("Authentication error:", error);
-            // Mostrar notificacion de error
-          }}
-          onExternalNavigate={(path) => {
-            window.location.href = path;
-          }}
-          language="es"
-          redirectUrl="/dashboard"
-          autoReadFromCookies={true}
-        />
-      </div>
+    <div style={{ maxWidth: '400px', margin: '0 auto' }}>
+      <CrudifyLogin
+        config={{ appName: "Mi App" }}
+        onLoginSuccess={(userData) => console.log('Login:', userData)}
+      />
     </div>
   );
 }
 
-export default AuthenticatedApp;
-```
-
-## 🏗️ Implementación con UnifiedProvider (Recomendado)
-
-### Patrón Unificado para Apps Completas
-
-Para aplicaciones que necesitan gestión completa de estado y autenticación, recomendamos usar el patrón UnifiedProvider que combina la gestión de configuración y autenticación en un solo componente:
-
-```tsx
-// src/contexts/UnifiedProvider.tsx
-import React, { createContext, useContext, useMemo, useState, useCallback, useEffect, type ReactNode } from "react"
-import { createTheme } from "@mui/material"
-import { crudify, type CrudifyEnvType } from "@nocios/crudify-ui"
-
-interface AppContextValue {
-  logo: string | null
-  setLogo: (logo: string) => void
-  publicApiKey: string | null
-  setPublicApiKey: (key: string | null) => void
-  env: CrudifyEnvType
-  setEnv: (env: CrudifyEnvType) => void
-  appName: string | null
-  setAppName: (name: string | null) => void
-  colors: { primaryColor: string; [key: string]: string }
-  setColors: (colors: any) => void
-  theme: any
-  setTheme: (theme: any) => void
-  configLoading: boolean
-  configError: string | null
-  loginActions: string[]
-  setLoginActions: (actions: string[]) => void
-}
-
-interface DataContextValue {
-  token: string | null
-  setToken: (token: string | null) => void
-  user: Record<string, any> | null
-  isInitialized: boolean
-  initializationError: string | null
-}
-
-const AppContext = createContext<AppContextValue | null>(null)
-const DataContext = createContext<DataContextValue | null>(null)
-
-const UnifiedProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  // Estado para token y usuario
-  const [token, setTokenState] = useState<string | null>(null)
-  const [user, setUser] = useState<Record<string, any> | null>(null)
-  const [isFullyInitialized, setIsFullyInitialized] = useState(false)
-
-  // Configuración desde variables de entorno
-  const config = useMemo(() => ({
-    publicApiKey: import.meta.env.VITE_TEST_PUBLIC_API_KEY || 'default-key',
-    env: import.meta.env.VITE_TEST_ENV || 'prod',
-    appName: 'Mi Aplicación'
-  }), [])
-
-  const handleSetToken = useCallback((newToken: string | null) => {
-    setTokenState(newToken)
-    if (newToken) {
-      sessionStorage.setItem('crud_token', newToken)
-    } else {
-      sessionStorage.removeItem('crud_token')
-    }
-  }, [])
-
-  // Inicializar token desde sessionStorage
-  useEffect(() => {
-    const savedToken = sessionStorage.getItem('crud_token')
-    if (savedToken) {
-      setTokenState(savedToken)
-    }
-  }, [])
-
-  // Inicialización de Crudify cuando hay token
-  useEffect(() => {
-    if (!token) {
-      setIsFullyInitialized(false)
-      return
-    }
-
-    const initializeCrudify = async () => {
-      if (isFullyInitialized) return
-
-      try {
-        await crudify.config(config.env)
-        await crudify.init(config.publicApiKey, "none")
-        crudify.setToken(token)
-        setIsFullyInitialized(true)
-      } catch (error) {
-        console.error('Error initializing Crudify:', error)
-        setIsFullyInitialized(true) // Evitar bucles
-      }
-    }
-
-    initializeCrudify()
-  }, [token, config.env, config.publicApiKey, isFullyInitialized])
-
-  // Contexto de App
-  const appContextValue: AppContextValue = {
-    logo: null,
-    setLogo: () => {},
-    publicApiKey: config.publicApiKey,
-    setPublicApiKey: () => {},
-    env: config.env as CrudifyEnvType,
-    setEnv: () => {},
-    appName: config.appName,
-    setAppName: () => {},
-    colors: { primaryColor: "#1066BA" },
-    setColors: () => {},
-    theme: createTheme({ palette: { primary: { main: "#1066BA" } } }),
-    setTheme: () => {},
-    configLoading: false,
-    configError: null,
-    loginActions: [],
-    setLoginActions: () => {}
-  }
-
-  // Contexto de Data
-  const dataContextValue: DataContextValue = {
-    token,
-    setToken: handleSetToken,
-    user,
-    isInitialized: !!token && isFullyInitialized,
-    initializationError: null
-  }
-
-  return (
-    <AppContext.Provider value={appContextValue}>
-      <DataContext.Provider value={dataContextValue}>
-        {children}
-      </DataContext.Provider>
-    </AppContext.Provider>
-  )
-}
-
-export const useApp = (): AppContextValue => {
-  const context = useContext(AppContext)
-  if (!context) throw new Error("useApp should be used within a UnifiedProvider")
-  return context
-}
-
-export const useData = (): DataContextValue => {
-  const context = useContext(DataContext)
-  if (!context) throw new Error("useData should be used within a UnifiedProvider")
-  return context
-}
-
-export { UnifiedProvider }
-```
-
-### Implementación del AppStatusHandler
-
-```tsx
-// src/components/AppStatusHandler/index.tsx
-import { type ReactNode } from "react"
-import { useLocation } from "react-router-dom"
-import { useApp, useData } from "@contexts/UnifiedProvider"
-import LoadingApp from "@components/LoadingApp"
-import { CssBaseline, ThemeProvider } from "@mui/material"
-import InitError from "@components/InitError"
-
-interface AppStatusHandlerProps {
-  children: ReactNode
-}
-
-const AppStatusHandler = ({ children }: AppStatusHandlerProps) => {
-  const location = useLocation()
-  const { theme, configLoading, configError } = useApp()
-  const { isInitialized, initializationError } = useData()
-
-  // Rutas que no requieren inicialización completa
-  const authRoutes = ['/login', '/login/forgotPassword', '/login/checkCode', '/login/resetPassword']
-  const isAuthRoute = authRoutes.some(route => location.pathname.startsWith(route))
-
-  if (configLoading) {
-    return <LoadingApp stage="config" />
-  }
-
-  if (!theme) {
-    return <LoadingApp stage="theme" />
-  }
-
-  // Solo requerir inicialización para rutas protegidas
-  if (!isInitialized && !isAuthRoute) {
-    return <LoadingApp stage="initializing" />
-  }
-
-  if (configError || initializationError) {
-    return <InitError configError={configError} initializationError={Boolean(initializationError)} />
-  }
-
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      {children}
-    </ThemeProvider>
-  )
-}
-
-export default AppStatusHandler
-```
-
-### Implementación de ProtectedRoute
-
-```tsx
-// src/components/Auth/ProtectedRoute/index.tsx
-import { type ReactNode } from "react"
-import { Navigate, useLocation } from "react-router-dom"
-import { useData } from "@contexts/UnifiedProvider"
-
-interface ProtectedRouteProps {
-  children: ReactNode
-}
-
-const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
-  const { token } = useData()
-  const location = useLocation()
-
-  if (!token) {
-    const fullPath = location.pathname + location.search
-    const redirectPath = encodeURIComponent(fullPath)
-    return <Navigate to={`/login?redirect=${redirectPath}`} replace />
-  }
-
-  return children
-}
-
-export default ProtectedRoute
-```
-
-### Configuración de la App Principal
-
-```tsx
-// src/main.tsx
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import { UnifiedProvider } from '@contexts/UnifiedProvider'
-import { GlobalNotificationProvider } from '@contexts/GlobalNotificationProvider'
-import AppStatusHandler from '@components/AppStatusHandler'
-import App from './App'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <UnifiedProvider>
-        <GlobalNotificationProvider>
-          <AppStatusHandler>
-            <App />
-          </AppStatusHandler>
-        </GlobalNotificationProvider>
-      </UnifiedProvider>
-    </BrowserRouter>
-  </React.StrictMode>,
-)
-```
-
-### Uso en Componentes
-
-```tsx
-// Cualquier componente de la app
-import { useApp, useData } from '@contexts/UnifiedProvider'
-
-function Dashboard() {
-  const { appName, theme } = useApp()
-  const { user, token, isInitialized } = useData()
-
-  if (!isInitialized) {
-    return <div>Inicializando...</div>
-  }
-
+function App() {
   return (
-    <div>
-      <h1>Bienvenido a {appName}</h1>
-      <p>Usuario: {user?.email}</p>
-      <p>Token válido: {token ? 'Sí' : 'No'}</p>
-    </div>
-  )
+    <SessionProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route
+            path="/dashboard"
+            element={
+              <ProtectedRoute fallback={<LoginPage />}>
+                <Dashboard />
+              </ProtectedRoute>
+            }
+          />
+        </Routes>
+      </BrowserRouter>
+    </SessionProvider>
+  );
 }
 ```
 
-### Variables de Entorno Requeridas
-
-```env
-# .env.development
-VITE_TEST_PUBLIC_API_KEY=tu-clave-de-api-de-desarrollo
-VITE_TEST_ENV=dev
-
-# .env.production
-VITE_TEST_PUBLIC_API_KEY=tu-clave-de-api-de-produccion
-VITE_TEST_ENV=prod
-```
-
-### Ventajas de este Patrón
-
-✅ **Inicialización automática**: Crudify se inicializa automáticamente cuando hay token
-✅ **Gestión unificada**: Un solo provider para configuración y autenticación
-✅ **Rutas protegidas**: Manejo automático de redirecciones según autenticación
-✅ **Estados de carga**: Diferentes estados para config, theme e inicialización
-✅ **Variables de entorno**: Configuración centralizada desde .env
-✅ **Compatibilidad completa**: Mantiene la API de providers anteriores
-✅ **Sin recursión**: Evita problemas de bucles infinitos en la inicialización
-
----
-
-## 🚀 **Mejores Prácticas**
-
-### ✅ **DO - Recomendaciones**
-
-```tsx
-// ✅ Usar el sistema unificado
-<CrudifyDataProvider publicApiKey="..." env="prod">
-  <App />
-</CrudifyDataProvider>
-
-// ✅ Verificar estado antes de operaciones
-const { isReady } = useCrudifyData();
-if (isReady) {
-  await readItems('products', {});
-}
-
-// ✅ Manejar errores apropiadamente
-try {
-  const response = await createItem('products', data);
-  if (response.success) {
-    // Manejar éxito
-  }
-} catch (error) {
-  const errors = handleCrudifyError(error);
-  // Mostrar errores al usuario
-}
+## 📱 TypeScript
 
-// ✅ Usar hooks especializados
-const { isAuthenticated } = useCrudifyAuth();
-const { readItems } = useCrudifyData();
-const { user } = useCrudifyUser();
-```
-
-### ❌ **DON'T - Evitar**
+Tipos completos incluidos:
 
 ```tsx
-// ❌ No inicializar crudify manualmente
-await crudify.init(); // La librería maneja esto
-
-// ❌ No usar múltiples providers
-<CrudifyProvider>
-  <AnotherProvider>
-    <CrudifyDataProvider> // Conflicto
-      <App />
-    </CrudifyDataProvider>
-  </AnotherProvider>
-</CrudifyProvider>
-
-// ❌ No ignorar el estado isReady
-const { readItems } = useCrudifyData();
-await readItems('products', {}); // Puede fallar si no está listo
-
-// ❌ No manejar tokens manualmente cuando usas el provider
-sessionStorage.setItem('token', token); // El provider lo maneja
+import type {
+  CrudifyLoginProps,
+  UseAuthReturn,
+  UserProfile,
+  TokenData
+} from '@nocios/crudify-ui';
 ```
 
-### 🔄 **Migración desde Versiones Anteriores**
-
-Si tienes código existente, puedes migrar gradualmente:
+## 🌐 Internacionalización
 
 ```tsx
-// Antes (código legacy)
-import { CrudifyLogin, useUserProfile } from '@nocios/crudify-ui';
-
-function OldApp() {
-  const { userProfile } = useUserProfile();
-  return userProfile ? <Dashboard /> : <CrudifyLogin />;
-}
-
-// Después (sistema unificado)
-import { CrudifyDataProvider, useCrudifyAuth, CrudifyLogin } from '@nocios/crudify-ui';
-
-function NewApp() {
-  return (
-    <CrudifyDataProvider publicApiKey="..." env="prod">
-      <AppContent />
-    </CrudifyDataProvider>
-  );
-}
-
-function AppContent() {
-  const { isAuthenticated, user, setToken } = useCrudifyAuth();
-
-  return isAuthenticated ? (
-    <Dashboard user={user} />
-  ) : (
-    <CrudifyLogin onLoginSuccess={setToken} />
-  );
-}
-```
-
-### 🌍 **Variables de Entorno**
-
-Configura estas variables en tu proyecto:
-
-```bash
-# .env.development
-REACT_APP_CRUDIFY_API_KEY=tu-clave-de-desarrollo
-REACT_APP_CRUDIFY_ENV=dev
+// Idiomas soportados: 'en' | 'es'
+<CrudifyLogin language="es" />
 
-# .env.production
-REACT_APP_CRUDIFY_API_KEY=tu-clave-de-produccion
-REACT_APP_CRUDIFY_ENV=prod
-```
-
-```tsx
-// Uso en la aplicación
-<CrudifyDataProvider
-  publicApiKey={process.env.REACT_APP_CRUDIFY_API_KEY}
-  env={process.env.REACT_APP_CRUDIFY_ENV || 'prod'}
-  appName="Mi Aplicación"
->
-  <App />
-</CrudifyDataProvider>
+// Traducciones personalizadas
+<CrudifyLogin
+  translations={{
+    login: { title: "Iniciar Sesión" }
+  }}
+/>
 ```
 
-### 📊 **Debugging y Desarrollo**
+## 🔒 Seguridad
 
-```tsx
-// Habilitar logs detallados en desarrollo
-const isDevelopment = process.env.NODE_ENV === 'development';
-
-<CrudifyDataProvider
-  publicApiKey="..."
-  onInitialized={() => isDevelopment && console.log('✅ Crudify inicializado')}
-  onError={(error) => isDevelopment && console.error('❌ Error:', error)}
-  onTokenChange={(token) => isDevelopment && console.log('🔑 Token:', !!token)}
->
-  <App />
-</CrudifyDataProvider>
-```
+- ✅ Encriptación de tokens
+- ✅ Refresh Token Pattern
+- ✅ Validación automática
+- ✅ Limpieza automática de tokens expirados
 
----
+## 📚 Documentación Completa
 
-## 📋 **Changelog y Migración**
+Para documentación detallada, ejemplos avanzados y guías completas, consulta [README_DEPTH.md](./README_DEPTH.md).
 
-### Versión 1.2.x (Actual)
-- ✅ **Nuevo**: Sistema unificado `CrudifyDataProvider`
-- ✅ **Nuevo**: Hooks especializados (`useCrudifyAuth`, `useCrudifyData`, `useCrudifyUser`)
-- ✅ **Nuevo**: Inicialización robusta con singleton thread-safe
-- ✅ **Nuevo**: Gestión automática de tokens con sincronización cross-tab
-- ✅ **Nuevo**: Acceso directo a instancia con `getCrudifyInstanceAsync`
-- 🔄 **Mejorado**: Sistema de manejo de errores
-- 🔄 **Mejorado**: TypeScript con tipos más precisos
-- ⚠️ **Legacy**: Hooks anteriores mantienen compatibilidad
+## 📄 Licencia
 
-### Migración desde 1.1.x
-1. Envolver la aplicación con `CrudifyDataProvider`
-2. Reemplazar hooks individuales con el sistema unificado
-3. Actualizar manejo de tokens para usar `setToken` del hook
-4. (Opcional) Migrar configuración a props del provider
+MIT © [Nocios](https://github.com/nocios)
 
 ---
 
-**Version:** 1.2.1
-**Mantenido por:** Equipo Crudify
-**Repositorio:** [GitHub](https://github.com/nocios/crudify-ui)
-**Documentación:** [Docs](https://docs.crudify.com)
-**Soporte:** [Issues](https://github.com/nocios/crudify-ui/issues)
+**¿Necesitas ayuda?** Consulta [README_DEPTH.md](./README_DEPTH.md) para documentación completa.