@nocios/crudify-ui 1.3.2 → 1.3.6

package/README.md

@@ -29,7 +29,7 @@ npm install @mui/material @mui/icons-material react react-dom
 ### 1. Configurar SessionProvider
 
 ```tsx
-import { SessionProvider } from '@nocios/crudify-ui';
+import { SessionProvider } from "@nocios/crudify-ui";
 
 function App() {
   return (
@@ -53,13 +53,13 @@ REACT_APP_CRUDIFY_ENV=dev
 ### useAuth - Autenticación
 
 ```tsx
-import { useAuth } from '@nocios/crudify-ui';
+import { useAuth } from "@nocios/crudify-ui";
 
 function LoginComponent() {
   const { login, logout, isAuthenticated, isLoading } = useAuth();
 
   const handleLogin = async () => {
-    const result = await login('user@example.com', 'password');
+    const result = await login("user@example.com", "password");
   };
 
   return isAuthenticated ? (
@@ -75,7 +75,7 @@ function LoginComponent() {
 ### useUserData - Datos del Usuario
 
 ```tsx
-import { useUserData } from '@nocios/crudify-ui';
+import { useUserData } from "@nocios/crudify-ui";
 
 function UserProfile() {
   const { userData, sessionData, isLoading } = useUserData();
@@ -95,22 +95,20 @@ function UserProfile() {
 ### useData - Operaciones CRUD
 
 ```tsx
-import { useData } from '@nocios/crudify-ui';
+import { useData } from "@nocios/crudify-ui";
 
 function ProductManager() {
   const { create, read, update, remove } = useData();
 
   const createProduct = async () => {
-    await create('products', { name: 'Nuevo Producto', price: 99.99 });
+    await create("products", { name: "Nuevo Producto", price: 99.99 });
   };
 
   const getProducts = async () => {
-    const products = await read('products', { limit: 10 });
+    const products = await read("products", { limit: 10 });
   };
 
-  return (
-    <button onClick={createProduct}>Crear Producto</button>
-  );
+  return <button onClick={createProduct}>Crear Producto</button>;
 }
 ```
 
@@ -119,7 +117,7 @@ function ProductManager() {
 ### CrudifyLogin - Login Completo
 
 ```tsx
-import { CrudifyLogin } from '@nocios/crudify-ui';
+import { CrudifyLogin } from "@nocios/crudify-ui";
 
 function AuthPage() {
   return (
@@ -127,10 +125,10 @@ function AuthPage() {
       config={{
         appName: "Mi App",
         logo: "/logo.png",
-        colors: { primaryColor: "#1976d2" }
+        colors: { primaryColor: "#1976d2" },
       }}
       onLoginSuccess={(userData) => {
-        console.log('Login exitoso:', userData);
+        console.log("Login exitoso:", userData);
       }}
       language="es"
     />
@@ -141,7 +139,7 @@ function AuthPage() {
 ### ProtectedRoute - Protección de Rutas
 
 ```tsx
-import { ProtectedRoute } from '@nocios/crudify-ui';
+import { ProtectedRoute } from "@nocios/crudify-ui";
 
 function App() {
   return (
@@ -152,16 +150,29 @@ function App() {
 }
 ```
 
+### Policies - Gestión de Políticas Públicas
+
+```tsx
+import { Policies, POLICY_ACTIONS, PolicyAction } from "@nocios/crudify-ui";
+
+function ModuleConfiguration() {
+  const [policies, setPolicies] = useState([]);
+  const availableFields = ["name", "email", "description", "status"];
+
+  return <Policies policies={policies} onChange={setPolicies} availableFields={availableFields} errors={null} isSubmitting={false} />;
+}
+```
+
 ## 🔄 API de Crudify Browser
 
 Re-exporta completamente `@nocios/crudify-browser`:
 
 ```tsx
-import { crudify } from '@nocios/crudify-ui';
+import { crudify } from "@nocios/crudify-ui";
 
 // Usar directamente la API de crudify
-const result = await crudify.create('users', userData);
-const users = await crudify.read('users');
+const result = await crudify.create("users", userData);
+const users = await crudify.read("users");
 ```
 
 ## 🛠️ Utilidades
@@ -169,7 +180,7 @@ const users = await crudify.read('users');
 ### JWT Utils
 
 ```tsx
-import { decodeJwtSafely, getCurrentUserEmail } from '@nocios/crudify-ui';
+import { decodeJwtSafely, getCurrentUserEmail } from "@nocios/crudify-ui";
 
 const payload = decodeJwtSafely(token);
 const email = getCurrentUserEmail();
@@ -178,7 +189,7 @@ const email = getCurrentUserEmail();
 ### Error Handler
 
 ```tsx
-import { handleCrudifyError, getErrorMessage } from '@nocios/crudify-ui';
+import { handleCrudifyError, getErrorMessage } from "@nocios/crudify-ui";
 
 try {
   // operación
@@ -191,14 +202,9 @@ try {
 ## 🚀 Ejemplo Completo
 
 ```tsx
-import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import {
-  SessionProvider,
-  ProtectedRoute,
-  CrudifyLogin,
-  useSessionContext
-} from '@nocios/crudify-ui';
+import React from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { SessionProvider, ProtectedRoute, CrudifyLogin, useSessionContext } from "@nocios/crudify-ui";
 
 function Dashboard() {
   const { sessionData, logout } = useSessionContext();
@@ -214,11 +220,8 @@ function Dashboard() {
 
 function LoginPage() {
   return (
-    <div style={{ maxWidth: '400px', margin: '0 auto' }}>
-      <CrudifyLogin
-        config={{ appName: "Mi App" }}
-        onLoginSuccess={(userData) => console.log('Login:', userData)}
-      />
+    <div style={{ maxWidth: "400px", margin: "0 auto" }}>
+      <CrudifyLogin config={{ appName: "Mi App" }} onLoginSuccess={(userData) => console.log("Login:", userData)} />
     </div>
   );
 }
@@ -249,12 +252,7 @@ function App() {
 Tipos completos incluidos:
 
 ```tsx
-import type {
-  CrudifyLoginProps,
-  UseAuthReturn,
-  UserProfile,
-  TokenData
-} from '@nocios/crudify-ui';
+import type { CrudifyLoginProps, UseAuthReturn, UserProfile, TokenData } from "@nocios/crudify-ui";
 ```
 
 ## 🌐 Internacionalización
@@ -288,4 +286,4 @@ MIT © [Nocios](https://github.com/nocios)
 
 ---
 
-**¿Necesitas ayuda?** Consulta [README_DEPTH.md](./README_DEPTH.md) para documentación completa.
+**¿Necesitas ayuda?** Consulta [README_DEPTH.md](./README_DEPTH.md) para documentación completa.