@nocios/crudify-ui 3.0.4 → 3.0.10

package/README.md

@@ -24,28 +24,122 @@ npm install @nocios/crudify-ui
 npm install @mui/material @mui/icons-material react react-dom
 ```
 
-## 🏗️ Configuración Rápida
+## 🏗️ Configuración
 
-### 1. Configurar SessionProvider
+### ⚙️ Sistema de Configuración
+
+La librería utiliza un sistema de configuración por prioridad para obtener credenciales y configuración:
+
+1. **Props directos** (máxima prioridad) - Override manual
+2. **Variables de entorno** (desarrollo local) - Se leen desde `.env`
+3. **Cookies** (producción) - Las establece Lambda automáticamente
+4. **Error** - Si no hay configuración válida
+
+### 🏗️ Arquitectura
+
+### 📋 Configuración Centralizada
+
+**IMPORTANTE**: La configuración ahora se pasa al `SessionProvider` en lugar de individual componentes como `CrudifyLogin`. Esta arquitectura centralizada garantiza que todos los componentes tengan acceso a la misma configuración.
+
+````tsx
+// ✅ CORRECTO - Nueva arquitectura
+<SessionProvider config={{ publicApiKey: "...", env: "dev" }}>
+  <CrudifyLogin />
+</SessionProvider>
+
+**Requisito**: `CrudifyLogin` debe estar dentro de un `SessionProvider` para funcionar correctamente.
+
+## 🔧 Configuración para Desarrollo Local
+
+#### 1. Crear archivo `.env` en tu proyecto
+
+```bash
+# .env (para desarrollo local)
+VITE_TEST_PUBLIC_API_KEY=CRUD_tu_api_key_aqui
+VITE_TEST_ENV=dev
+VITE_TEST_LOGIN_ACTIONS=createUser,forgotPassword
+````
+
+#### 2. Configurar Providers
 
 ```tsx
-import { SessionProvider } from "@nocios/crudify-ui";
+import { SessionProvider, crudify } from "@nocios/crudify-ui";
 
 function App() {
+  useEffect(() => {
+    // Inicializar crudify (opcional)
+    const initCrudify = async () => {
+      const publicApiKey = import.meta.env.VITE_TEST_PUBLIC_API_KEY;
+      const environment = import.meta.env.VITE_TEST_ENV || "dev";
+
+      if (publicApiKey) {
+        crudify.config(environment);
+        await crudify.init(publicApiKey, "debug");
+      }
+    };
+
+    initCrudify();
+  }, []);
+
   return (
-    <SessionProvider>
+    <SessionProvider
+      options={{
+        autoRestore: true,
+        enableLogging: process.env.NODE_ENV === "development",
+      }}
+      config={{
+        publicApiKey: import.meta.env.VITE_TEST_PUBLIC_API_KEY,
+        env: import.meta.env.VITE_TEST_ENV,
+        loginActions: import.meta.env.VITE_TEST_LOGIN_ACTIONS?.split(","),
+      }}
+    >
       <YourApp />
     </SessionProvider>
   );
 }
 ```
 
-### 2. Variables de Entorno
+#### 3. Usar CrudifyLogin con configuración automática
 
-```bash
-# .env
-REACT_APP_CRUDIFY_PUBLIC_API_KEY=tu_api_key
-REACT_APP_CRUDIFY_ENV=dev
+```tsx
+import { CrudifyLogin } from "@nocios/crudify-ui";
+
+function LoginPage() {
+  return (
+    <CrudifyLogin
+      onLoginSuccess={(userData) => {
+        console.log("Login exitoso:", userData);
+        // Navegar al dashboard
+      }}
+      onError={(error) => {
+        console.error("Error en login:", error);
+      }}
+    />
+  );
+}
+```
+
+### 🌐 Configuración para Producción
+
+En producción (staging/prod), **NO** uses variables de entorno. El Lambda de AWS se encarga de establecer las cookies automáticamente:
+
+- `publicApiKey` → Cookie
+- `environment` → Cookie
+- `loginActions` → Cookie
+
+La librería las detectará automáticamente:
+
+```tsx
+// En producción, la configuración se lee de cookies automáticamente
+<SessionProvider
+  config={{
+    appName: "Mi App",
+    colors: { primaryColor: "#1976d2" },
+    // publicApiKey, env y loginActions se leen de cookies automáticamente
+  }}
+>
+  <CrudifyLogin />
+</SessionProvider>
 ```
 
 ## 🪝 Hooks Principales
@@ -117,21 +211,24 @@ function ProductManager() {
 ### CrudifyLogin - Login Completo
 
 ```tsx
-import { CrudifyLogin } from "@nocios/crudify-ui";
+import { CrudifyLogin, SessionProvider } from "@nocios/crudify-ui";
 
 function AuthPage() {
   return (
-    <CrudifyLogin
+    <SessionProvider
       config={{
         appName: "Mi App",
         logo: "/logo.png",
         colors: { primaryColor: "#1976d2" },
       }}
-      onLoginSuccess={(userData) => {
-        console.log("Login exitoso:", userData);
-      }}
-      language="es"
-    />
+    >
+      <CrudifyLogin
+        onLoginSuccess={(userData) => {
+          console.log("Login exitoso:", userData);
+        }}
+        language="es"
+      />
+    </SessionProvider>
   );
 }
 ```
@@ -221,7 +318,7 @@ function Dashboard() {
 function LoginPage() {
   return (
     <div style={{ maxWidth: "400px", margin: "0 auto" }}>
-      <CrudifyLogin config={{ appName: "Mi App" }} onLoginSuccess={(userData) => console.log("Login:", userData)} />
+      <CrudifyLogin onLoginSuccess={(userData) => console.log("Login:", userData)} />
     </div>
   );
 }

package/dist/index.d.mts

@@ -28,7 +28,6 @@ interface UserLoginData {
     [key: string]: any;
 }
 interface CrudifyLoginProps {
-    config?: CrudifyLoginConfig;
     onScreenChange?: (screen: BoxScreenType, params?: Record<string, string>) => void;
     onExternalNavigate?: (path: string) => void;
     onLoginSuccess?: (userData: UserLoginData, redirectUrl?: string) => void;
@@ -348,6 +347,18 @@ type SessionData = {
     subscriberKey: string;
     [key: string]: any;
 } | null;
+type CrudifyConfig = {
+    publicApiKey?: string;
+    env?: "dev" | "stg" | "prod";
+    appName?: string;
+    loginActions?: string[];
+    logo?: string;
+    colors?: {
+        primaryColor?: string;
+        bgColor?: string;
+        [key: string]: string | undefined;
+    };
+};
 type SessionContextType = {
     isAuthenticated: boolean;
     isLoading: boolean;
@@ -355,6 +366,7 @@ type SessionContextType = {
     tokens: TokenData | null;
     error: string | null;
     sessionData: SessionData;
+    config: CrudifyConfig;
     login: (email: string, password: string) => Promise<LoginResult>;
     logout: () => Promise<void>;
     refreshTokens: () => Promise<boolean>;
@@ -367,11 +379,12 @@ type SessionContextType = {
 type SessionProviderProps = {
     children: ReactNode;
     options?: UseSessionOptions;
+    config?: CrudifyConfig;
 };
 /**
  * Provider de sesión para envolver la aplicación
  */
-declare function SessionProvider({ children, options }: SessionProviderProps): react_jsx_runtime.JSX.Element;
+declare function SessionProvider({ children, options, config: propConfig }: SessionProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook para usar el contexto de sesión
  */

package/dist/index.d.ts

@@ -28,7 +28,6 @@ interface UserLoginData {
     [key: string]: any;
 }
 interface CrudifyLoginProps {
-    config?: CrudifyLoginConfig;
     onScreenChange?: (screen: BoxScreenType, params?: Record<string, string>) => void;
     onExternalNavigate?: (path: string) => void;
     onLoginSuccess?: (userData: UserLoginData, redirectUrl?: string) => void;
@@ -348,6 +347,18 @@ type SessionData = {
     subscriberKey: string;
     [key: string]: any;
 } | null;
+type CrudifyConfig = {
+    publicApiKey?: string;
+    env?: "dev" | "stg" | "prod";
+    appName?: string;
+    loginActions?: string[];
+    logo?: string;
+    colors?: {
+        primaryColor?: string;
+        bgColor?: string;
+        [key: string]: string | undefined;
+    };
+};
 type SessionContextType = {
     isAuthenticated: boolean;
     isLoading: boolean;
@@ -355,6 +366,7 @@ type SessionContextType = {
     tokens: TokenData | null;
     error: string | null;
     sessionData: SessionData;
+    config: CrudifyConfig;
     login: (email: string, password: string) => Promise<LoginResult>;
     logout: () => Promise<void>;
     refreshTokens: () => Promise<boolean>;
@@ -367,11 +379,12 @@ type SessionContextType = {
 type SessionProviderProps = {
     children: ReactNode;
     options?: UseSessionOptions;
+    config?: CrudifyConfig;
 };
 /**
  * Provider de sesión para envolver la aplicación
  */
-declare function SessionProvider({ children, options }: SessionProviderProps): react_jsx_runtime.JSX.Element;
+declare function SessionProvider({ children, options, config: propConfig }: SessionProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook para usar el contexto de sesión
  */