@nocios/crudify-ui 1.2.36 → 1.3.0

package/example-app.tsx

@@ -0,0 +1,197 @@
+// =============================
+// EXAMPLE APP - REFRESH TOKEN PATTERN
+// =============================
+
+/**
+ * Ejemplo completo de aplicación usando el Refresh Token Pattern
+ * Demuestra todas las características nuevas de crudify-ui v1.2+
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { CssBaseline, Container, AppBar, Toolbar, Typography, Box } from '@mui/material';
+import {
+  SessionProvider,
+  LoginComponent,
+  SessionStatus,
+  SessionDebugInfo,
+  useSessionContext,
+  ProtectedRoute
+} from '@nocios/crudify-ui';
+
+const theme = createTheme();
+
+// Componente de aplicación principal
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+
+      {/* Envolver toda la app con SessionProvider */}
+      <SessionProvider
+        options={{
+          autoRestore: true,          // Restaurar sesión automáticamente
+          enableLogging: true,        // Logs para debug
+          onSessionExpired: () => {   // Callback cuando expira la sesión
+            console.log('Session expired - redirecting to login');
+            // Aquí podrías hacer redirect, mostrar modal, etc.
+          },
+          onSessionRestored: (tokens) => {
+            console.log('Session restored successfully:', tokens);
+          }
+        }}
+      >
+        <AppContent />
+      </SessionProvider>
+    </ThemeProvider>
+  );
+}
+
+// Contenido principal de la aplicación
+function AppContent() {
+  return (
+    <>
+      {/* App Bar */}
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Crudify Refresh Token Demo
+          </Typography>
+          <SessionStatus />
+        </Toolbar>
+      </AppBar>
+
+      {/* Contenido principal */}
+      <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+        <LoginComponent />
+
+        {/* Área protegida - solo visible si está autenticado */}
+        <ProtectedRoute fallback={null}>
+          <ProtectedArea />
+        </ProtectedRoute>
+
+        {/* Debug info (solo en desarrollo) */}
+        {process.env.NODE_ENV === 'development' && (
+          <SessionDebugInfo />
+        )}
+      </Container>
+    </>
+  );
+}
+
+// Área protegida de la aplicación
+function ProtectedArea() {
+  const { refreshTokens, isExpiringSoon } = useSessionContext();
+
+  return (
+    <Box sx={{ mt: 4, p: 3, bgcolor: 'background.paper', borderRadius: 1 }}>
+      <Typography variant="h5" gutterBottom>
+        Protected Area 🔒
+      </Typography>
+
+      <Typography variant="body1" paragraph>
+        This content is only visible to authenticated users. The session is managed
+        automatically with the Refresh Token Pattern.
+      </Typography>
+
+      {isExpiringSoon && (
+        <Box sx={{ mb: 2, p: 2, bgcolor: 'warning.light', borderRadius: 1 }}>
+          <Typography variant="body2">
+            ⚠️ Your token is expiring soon, but don't worry - it will be refreshed automatically!
+          </Typography>
+        </Box>
+      )}
+
+      {/* Ejemplo de uso de CRUD operations */}
+      <CrudOperationsExample />
+    </Box>
+  );
+}
+
+// Ejemplo de operaciones CRUD con auto-refresh
+function CrudOperationsExample() {
+  const [data, setData] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+
+  // Importar crudify
+  const crudify = React.useMemo(() => {
+    // En una app real, ya estaría inicializado
+    import('@nocios/crudify-browser').then(module => module.default);
+  }, []);
+
+  const fetchData = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Esta operación usará automáticamente el auto-refresh si es necesario
+      const result = await crudify.getPermissions();
+
+      if (result.success) {
+        setData(result.data);
+      } else {
+        setError('Failed to fetch data: ' + JSON.stringify(result.errors));
+      }
+    } catch (err) {
+      setError('Network error: ' + err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Box sx={{ mt: 3 }}>
+      <Typography variant="h6" gutterBottom>
+        CRUD Operations with Auto-Refresh
+      </Typography>
+
+      <button onClick={fetchData} disabled={loading}>
+        {loading ? 'Loading...' : 'Fetch Permissions (Test Auto-Refresh)'}
+      </button>
+
+      {error && (
+        <Box sx={{ mt: 2, p: 2, bgcolor: 'error.light', borderRadius: 1 }}>
+          <Typography variant="body2" color="error">
+            {error}
+          </Typography>
+        </Box>
+      )}
+
+      {data && (
+        <Box sx={{ mt: 2, p: 2, bgcolor: 'success.light', borderRadius: 1 }}>
+          <Typography variant="body2">
+            ✅ Data fetched successfully! Auto-refresh is working.
+          </Typography>
+          <pre style={{ fontSize: '12px', marginTop: '8px' }}>
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+// =============================
+// BOOTSTRAP DE LA APLICACIÓN
+// =============================
+
+// Para usar este ejemplo:
+// 1. npm install @nocios/crudify-ui@^1.2.0
+// 2. Configurar crudify con tu API key antes de renderizar
+// 3. Renderizar la aplicación
+
+export default App;
+
+// Ejemplo de inicialización
+/*
+import { crudify } from '@nocios/crudify-ui';
+
+// Configurar crudify antes de renderizar la app
+await crudify.init('your-api-key', 'debug');
+
+// Renderizar la aplicación
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<App />);
+*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocios/crudify-ui",
-  "version": "1.2.36",
+  "version": "1.3.0",
   "description": "Biblioteca de componentes UI para Crudify",
   "author": "Nocios",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
     "@mui/x-data-grid": "^8.5.1",
-    "@nocios/crudify-browser": "^1.0.85",
+    "@nocios/crudify-browser": "^1.1.0",
     "crypto-js": "^4.2.0",
     "i18next-browser-languagedetector": "^8.1.0",
     "i18next-http-backend": "^3.0.2",