@nocios/crudify-ui 1.0.83 → 1.0.84

package/README.md

@@ -369,6 +369,308 @@ function AuthenticatedApp() {
 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>
+  }
+
+  return (
+    <div>
+      <h1>Bienvenido a {appName}</h1>
+      <p>Usuario: {user?.email}</p>
+      <p>Token válido: {token ? 'Sí' : 'No'}</p>
+    </div>
+  )
+}
+```
+
+### 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
+
 ---
 
 **Version:** 1.0.0+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocios/crudify-ui",
-  "version": "1.0.83",
+  "version": "1.0.84",
   "description": "Biblioteca de componentes UI para Crudify",
   "author": "Nocios",
   "license": "MIT",