@nocios/crudify-ui 1.0.69 → 1.0.71

package/README.md

@@ -0,0 +1,375 @@
+# CrudifyLogin - Integracion Completa
+
+> Componente de autenticacion completo y reutilizable para aplicaciones React, basado en la API de Crudify.
+
+## 🚀 Instalacion
+
+```bash
+npm install @nocios/crudify-ui
+```
+
+## 📋 Dependencias Requeridas
+
+Asegurate de tener estas dependencias en tu proyecto:
+
+```bash
+npm install react react-dom @mui/material @mui/icons-material
+```
+
+## 🎯 Uso Basico
+
+### Integracion Simple
+
+```tsx
+import { CrudifyLogin } from "@nocios/crudify-ui";
+
+function LoginPage() {
+  const handleLoginSuccess = (token: string, redirectUrl?: string) => {
+    // Guardar token y redirigir
+    sessionStorage.setItem("authToken", token);
+    window.location.href = redirectUrl || "/dashboard";
+  };
+
+  return (
+    <CrudifyLogin
+      config={{
+        publicApiKey: "tu-api-key",
+        env: "prod",
+        appName: "Mi Aplicacion",
+      }}
+      onLoginSuccess={handleLoginSuccess}
+      redirectUrl="/dashboard"
+    />
+  );
+}
+```
+
+## ⚙️ Configuracion Completa
+
+### Props del Componente
+
+| Prop                  | Tipo                                            | Default   | Descripcion                       |
+| --------------------- | ----------------------------------------------- | --------- | --------------------------------- |
+| `config`              | `CrudifyLoginConfig`                            | `{}`      | Configuracion del componente      |
+| `onLoginSuccess`      | `(token: string, redirectUrl?: string) => void` | -         | Callback cuando login es exitoso  |
+| `onError`             | `(error: string) => void`                       | -         | Callback para manejo de errores   |
+| `onScreenChange`      | `(screen: string, params?: object) => void`     | -         | Callback para cambios de pantalla |
+| `onExternalNavigate`  | `(path: string) => void`                        | -         | Callback para navegacion externa  |
+| `initialScreen`       | `login,forgotPassword,resetPassword,checkCode`  | `"login"` | Pantalla inicial                  |
+| `redirectUrl`         | `string`                                        | `"/"`     | URL de redireccion post-login     |
+| `autoReadFromCookies` | `boolean`                                       | `true`    | Leer configuracion desde cookies  |
+| `language`            | `string`                                        | `"en"`    | Idioma de la interfaz             |
+| `translations`        | `CrudifyLoginTranslations`                      | -         | Traducciones customizadas         |
+| `translationsUrl`     | `string`                                        | -         | URL para cargar traducciones      |
+
+### Configuracion (CrudifyLoginConfig)
+
+```tsx
+interface CrudifyLoginConfig {
+  publicApiKey?: string; // Clave de API de Crudify
+  env?: "dev" | "stg" | "api" | "prod"; // Entorno de la API
+  appName?: string; // Nombre de tu aplicacion
+  logo?: string; // URL del logo
+  colors?: {
+    primaryColor?: string; // Color principal
+    bgColor?: string; // Color de fondo
+    [key: string]: string | undefined;
+  };
+  loginActions?: string[]; // Acciones disponibles: ["forgotPassword", "createUser"]
+}
+```
+
+## 🎨 Personalizacion Visual
+
+### Colores y Branding
+
+```tsx
+<CrudifyLogin
+  config={{
+    appName: "Mi App",
+    logo: "/mi-logo.png",
+    colors: { primaryColor: "#1066BA", bgColor: "#f5f5f5" },
+  }}
+/>
+```
+
+### Traducciones Personalizadas
+
+```tsx
+const misTraduciones = {
+  "login.title": "Iniciar Sesion",
+  "login.usernameLabel": "Usuario o Email",
+  "login.passwordLabel": "Contrasena",
+  "login.loginButton": "Entrar",
+  "login.forgotPasswordLink": "¿Olvidaste tu contrasena?",
+};
+
+<CrudifyLogin translations={misTraduciones} language="es" />;
+```
+
+## 🔧 Hooks Disponibles
+
+### useUserProfile
+
+Hook para obtener y manejar el perfil del usuario autenticado:
+
+```tsx
+import { useUserProfile } from "@nocios/crudify-ui";
+
+function UserDashboard() {
+  const { userProfile, loading, error, refreshProfile } = useUserProfile();
+
+  if (loading) return <div>Cargando...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div>
+      <h1>Bienvenido, {userProfile?.name}</h1>
+      <p>Email: {userProfile?.email}</p>
+      <button onClick={refreshProfile}>Actualizar Perfil</button>
+    </div>
+  );
+}
+```
+
+### useCrudifyLogin
+
+Hook interno para configuracion avanzada:
+
+```tsx
+import { useCrudifyLogin } from "@nocios/crudify-ui";
+
+function CustomLogin() {
+  const { config } = useCrudifyLogin({
+    publicApiKey: "mi-api-key",
+    env: "prod",
+  });
+
+  // config contiene la configuracion final combinada con cookies
+  return <div>App: {config.appName}</div>;
+}
+```
+
+## 🛠️ Utilidades Disponibles
+
+### JWT Utils
+
+```tsx
+import { getCurrentUserEmail, decodeJwtSafely, isTokenExpired } 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);
+```
+
+### Storage Seguro
+
+```tsx
+import { secureSessionStorage, secureLocalStorage } from "@nocios/crudify-ui";
+
+// Guardar token de forma segura
+secureSessionStorage.setToken(token);
+
+// Obtener token
+const token = secureSessionStorage.getToken();
+
+// Limpiar storage
+secureSessionStorage.clear();
+```
+
+### Manejo de Errores
+
+```tsx
+import { handleCrudifyError, ERROR_CODES, getErrorMessage } from "@nocios/crudify-ui";
+
+try {
+  // Tu codigo
+} catch (error) {
+  const parsedErrors = handleCrudifyError(error);
+  parsedErrors.forEach((err) => {
+    console.log(`Error ${err.code}: ${err.message} (Severidad: ${err.severity})`);
+  });
+}
+```
+
+## 📱 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
+  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>
+  );
+}
+
+export default AuthenticatedApp;
+```
+
+---
+
+**Version:** 1.0.0+
+**Mantenido por:** Equipo Crudify

package/dist/index.d.mts

@@ -1,11 +1,10 @@
-import * as _nocios_crudify_browser from '@nocios/crudify-browser';
 export * from '@nocios/crudify-browser';
 export { default as crudify } from '@nocios/crudify-browser';
 import React from 'react';
 
 type BoxScreenType = "login" | "signUp" | "forgotPassword" | "resetPassword" | "checkCode";
 interface CrudifyLoginConfig {
-    publicApiKey?: string;
+    publicApiKey?: string | null;
     env?: "dev" | "stg" | "api" | "prod";
     appName?: string;
     logo?: string;
@@ -21,7 +20,8 @@ interface CrudifyLoginTranslations {
 }
 interface CrudifyLoginProps {
     config?: CrudifyLoginConfig;
-    onNavigate?: (path: string) => void;
+    onScreenChange?: (screen: BoxScreenType, params?: Record<string, string>) => void;
+    onExternalNavigate?: (path: string) => void;
     onLoginSuccess?: (token: string, redirectUrl?: string) => void;
     onError?: (error: string) => void;
     initialScreen?: BoxScreenType;
@@ -34,13 +34,94 @@ interface CrudifyLoginProps {
 
 declare const CrudifyLogin: React.FC<CrudifyLoginProps>;
 
+interface CrudifyApiResponse<T = unknown> {
+    success: boolean;
+    data?: T;
+    errors?: string | Record<string, string[]> | string[];
+    errorCode?: string;
+    fieldsWarning?: Record<string, string[]>;
+}
+interface CrudifyTransactionResponse {
+    success: boolean;
+    data?: TransactionResponseData[];
+    errors?: string | Record<string, string[]>;
+    errorCode?: string;
+}
+interface TransactionResponseData {
+    response?: {
+        status: string;
+        data?: unknown;
+        message?: string;
+    };
+    errors?: string | Record<string, string[]>;
+}
+interface UserProfile {
+    id: string | number;
+    email: string;
+    username?: string;
+    firstName?: string;
+    lastName?: string;
+    fullName?: string;
+    avatar?: string;
+    role?: string;
+    permissions?: string[];
+    lastLogin?: string;
+    isActive?: boolean;
+    createdAt?: string;
+    updatedAt?: string;
+    [key: string]: unknown;
+}
+interface LoginResponse {
+    token: string;
+    user?: UserProfile;
+    expiresIn?: number;
+    refreshToken?: string;
+}
+interface LoginRequest {
+    identifier: string;
+    password: string;
+}
+interface ForgotPasswordRequest {
+    email: string;
+}
+interface ResetPasswordRequest {
+    email: string;
+    code: string;
+    newPassword: string;
+}
+interface ValidateCodeRequest {
+    email: string;
+    codePassword: string;
+}
+interface JwtPayload {
+    sub?: string;
+    email?: string;
+    username?: string;
+    iat?: number;
+    exp?: number;
+    iss?: string;
+    aud?: string;
+    [key: string]: unknown;
+}
+interface ApiError {
+    code: string;
+    message: string;
+    field?: string;
+    details?: Record<string, unknown>;
+}
+interface ValidationError {
+    field: string;
+    message: string;
+    code: string;
+}
+
 interface UseUserProfileOptions {
     autoFetch?: boolean;
     retryOnError?: boolean;
     maxRetries?: number;
 }
 interface UseUserProfileReturn {
-    userProfile: any | null;
+    userProfile: UserProfile | null;
     loading: boolean;
     error: string | null;
     refreshProfile: () => Promise<void>;
@@ -53,21 +134,16 @@ interface UseCrudifyLoginOptions {
     showSuccessNotifications?: boolean;
 }
 declare const useCrudifyLogin: (config: CrudifyLoginConfig, _options?: UseCrudifyLoginOptions) => {
-    crudify: {
-        login: (identifier: string, password: string) => Promise<_nocios_crudify_browser.CrudifyResponse>;
-        transaction: (data: any, options?: any) => Promise<_nocios_crudify_browser.CrudifyResponse>;
-    } | null;
+    config: {
+        publicApiKey: string | null;
+        env: "dev" | "stg" | "prod";
+        appName: string;
+        loginActions: string[];
+    };
 };
 
-interface JWTPayload {
-    email?: string;
+interface JWTPayload extends JwtPayload {
     "cognito:username"?: string;
-    sub?: string;
-    exp?: number;
-    iat?: number;
-    iss?: string;
-    aud?: string;
-    [key: string]: any;
 }
 declare const decodeJwtSafely: (token: string) => JWTPayload | null;
 declare const getCurrentUserEmail: () => string | null;
@@ -89,4 +165,57 @@ declare class SecureStorage {
 declare const secureSessionStorage: SecureStorage;
 declare const secureLocalStorage: SecureStorage;
 
-export { type BoxScreenType, CrudifyLogin, type CrudifyLoginConfig, type CrudifyLoginProps, type CrudifyLoginTranslations, decodeJwtSafely, getCookie, getCurrentUserEmail, isTokenExpired, secureLocalStorage, secureSessionStorage, useCrudifyLogin, useUserProfile };
+declare const ERROR_CODES: {
+    readonly INVALID_CREDENTIALS: "INVALID_CREDENTIALS";
+    readonly UNAUTHORIZED: "UNAUTHORIZED";
+    readonly INVALID_API_KEY: "INVALID_API_KEY";
+    readonly USER_NOT_FOUND: "USER_NOT_FOUND";
+    readonly USER_NOT_ACTIVE: "USER_NOT_ACTIVE";
+    readonly NO_PERMISSION: "NO_PERMISSION";
+    readonly ITEM_NOT_FOUND: "ITEM_NOT_FOUND";
+    readonly NOT_FOUND: "NOT_FOUND";
+    readonly IN_USE: "IN_USE";
+    readonly FIELD_ERROR: "FIELD_ERROR";
+    readonly BAD_REQUEST: "BAD_REQUEST";
+    readonly INVALID_EMAIL: "INVALID_EMAIL";
+    readonly INVALID_CODE: "INVALID_CODE";
+    readonly INTERNAL_SERVER_ERROR: "INTERNAL_SERVER_ERROR";
+    readonly DATABASE_CONNECTION_ERROR: "DATABASE_CONNECTION_ERROR";
+    readonly INVALID_CONFIGURATION: "INVALID_CONFIGURATION";
+    readonly UNKNOWN_OPERATION: "UNKNOWN_OPERATION";
+    readonly TOO_MANY_REQUESTS: "TOO_MANY_REQUESTS";
+    readonly NETWORK_ERROR: "NETWORK_ERROR";
+    readonly TIMEOUT_ERROR: "TIMEOUT_ERROR";
+};
+type ErrorCode = typeof ERROR_CODES[keyof typeof ERROR_CODES];
+type ErrorSeverity = 'info' | 'warning' | 'error' | 'critical';
+declare const ERROR_SEVERITY_MAP: Record<ErrorCode, ErrorSeverity>;
+interface ParsedError {
+    code: ErrorCode;
+    message: string;
+    severity: ErrorSeverity;
+    field?: string;
+    details?: Record<string, unknown>;
+}
+/**
+ * Parse a Crudify API response and extract standardized error information
+ */
+declare function parseApiError(response: unknown): ParsedError[];
+/**
+ * Parse transaction response errors
+ */
+declare function parseTransactionError(response: unknown): ParsedError[];
+/**
+ * Get a human-readable error message for an error code
+ */
+declare function getErrorMessage(code: ErrorCode): string;
+/**
+ * Handle JavaScript/Network errors and convert to ParsedError
+ */
+declare function parseJavaScriptError(error: unknown): ParsedError;
+/**
+ * Universal error handler that can process any type of error from Crudify APIs
+ */
+declare function handleCrudifyError(error: unknown): ParsedError[];
+
+export { type ApiError, type BoxScreenType, type CrudifyApiResponse, CrudifyLogin, type CrudifyLoginConfig, type CrudifyLoginProps, type CrudifyLoginTranslations, type CrudifyTransactionResponse, ERROR_CODES, ERROR_SEVERITY_MAP, type ErrorCode, type ErrorSeverity, type ForgotPasswordRequest, type JwtPayload, type LoginRequest, type LoginResponse, type ParsedError, type ResetPasswordRequest, type TransactionResponseData, type UserProfile, type ValidateCodeRequest, type ValidationError, decodeJwtSafely, getCookie, getCurrentUserEmail, getErrorMessage, handleCrudifyError, isTokenExpired, parseApiError, parseJavaScriptError, parseTransactionError, secureLocalStorage, secureSessionStorage, useCrudifyLogin, useUserProfile };