@nocios/crudify-components 1.0.0

package/.github/workflows/test.yml

@@ -0,0 +1,59 @@
+name: Test & Quality Check
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js 24.12.0
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24.12.0"
+
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run linter
+        run: npm run lint --if-present
+        continue-on-error: true
+
+      - name: Run type check
+        run: npm run type-check --if-present
+        continue-on-error: true
+
+      - name: Run tests with coverage
+        run: npm test -- --run
+        timeout-minutes: 5
+
+      - name: Upload coverage to Codecov
+        if: success()
+        uses: codecov/codecov-action@v4
+        with:
+          file: ./coverage/coverage-final.json
+          flags: unittests
+          name: codecov-umbrella
+        continue-on-error: true
+
+      - name: Build package
+        run: npm run build
+
+      - name: Check bundle size
+        run: npm run build:analyze --if-present
+        continue-on-error: true

package/.nvmrc

@@ -0,0 +1 @@
+24.12.0

package/README.md

@@ -0,0 +1,398 @@
+# @nocios/crudify-components
+
+[![npm version](https://badge.fury.io/js/%40nocios%2Fcrudify-ui.svg)](https://badge.fury.io/js/%40nocios%2Fcrudify-ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.1.3-3178c6.svg)](https://typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-19.1.0-61dafb.svg)](https://reactjs.org/)
+
+**UI component library for the Crudify ecosystem - Modern React components with authentication, session management, and CRUD operations.**
+
+Biblioteca completa de componentes UI y hooks de React para aplicaciones Crudify. Proporciona autenticación moderna, manejo de sesiones y una API unificada.
+
+## 🚀 Características
+
+- **🔐 Autenticación Moderna**: Sistema completo con Refresh Token Pattern
+- **⚡ Manejo de Sesiones**: Persistencia automática y sincronización cross-tab
+- **🎨 Componentes UI**: Componentes React listos con Material-UI
+- **🪝 React Hooks**: Hooks especializados para CRUD y autenticación
+- **🔄 API Unificada**: Re-exporta completamente @nocios/crudify-sdk
+- **🌍 Internacionalización**: Soporte para múltiples idiomas
+- **📱 TypeScript**: Completamente tipado
+
+## 📖 Documentation
+
+- 📋 **[Complete Documentation](docs/overview.md)** - Comprehensive component and API reference
+- 🔒 **[Security Guide](docs/security.md)** - Security features and best practices
+- 🏗️ **[Architecture](docs/architecture.md)** - Library design and patterns
+- 🔧 **[Migration Guide](docs/migration.md)** - Upgrade instructions between versions
+- 💡 **[Examples](docs/examples.md)** - Real-world usage examples
+
+## 📦 Instalación
+
+```bash
+npm install @nocios/crudify-components
+
+# Peer dependencies
+npm install @mui/material @mui/icons-material react react-dom
+```
+
+## 🏗️ Configuración
+
+### ⚙️ 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, crudify } from "@nocios/crudify-components";
+
+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
+      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>
+  );
+}
+```
+
+#### 3. Usar CrudifyLogin con configuración automática
+
+```tsx
+import { CrudifyLogin } from "@nocios/crudify-components";
+
+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
+
+### useAuth - Autenticación
+
+```tsx
+import { useAuth } from "@nocios/crudify-components";
+
+function LoginComponent() {
+  const { login, logout, isAuthenticated, isLoading } = useAuth();
+
+  const handleLogin = async () => {
+    const result = await login("user@example.com", "password");
+  };
+
+  return isAuthenticated ? (
+    <button onClick={logout}>Cerrar Sesión</button>
+  ) : (
+    <button onClick={handleLogin} disabled={isLoading}>
+      Iniciar Sesión
+    </button>
+  );
+}
+```
+
+### useUserData - Datos del Usuario
+
+```tsx
+import { useUserData } from "@nocios/crudify-components";
+
+function UserProfile() {
+  const { userData, sessionData, isLoading } = useUserData();
+
+  if (isLoading) return <div>Cargando...</div>;
+
+  return (
+    <div>
+      <h2>{userData?.fullName}</h2>
+      <p>Email: {sessionData?.email}</p>
+      <img src={userData?.avatar} alt="Avatar" />
+    </div>
+  );
+}
+```
+
+### useData - Operaciones CRUD
+
+```tsx
+import { useData } from "@nocios/crudify-components";
+
+function ProductManager() {
+  const { create, read, update, remove } = useData();
+
+  const createProduct = async () => {
+    await create("products", { name: "Nuevo Producto", price: 99.99 });
+  };
+
+  const getProducts = async () => {
+    const products = await read("products", { limit: 10 });
+  };
+
+  return <button onClick={createProduct}>Crear Producto</button>;
+}
+```
+
+## 🎨 Componentes UI
+
+### CrudifyLogin - Login Completo
+
+```tsx
+import { CrudifyLogin, SessionProvider } from "@nocios/crudify-components";
+
+function AuthPage() {
+  return (
+    <SessionProvider
+      config={{
+        appName: "Mi App",
+        logo: "/logo.png",
+        colors: { primaryColor: "#1976d2" },
+      }}
+    >
+      <CrudifyLogin
+        onLoginSuccess={(userData) => {
+          console.log("Login exitoso:", userData);
+        }}
+        language="es"
+      />
+    </SessionProvider>
+  );
+}
+```
+
+### ProtectedRoute - Protección de Rutas
+
+```tsx
+import { ProtectedRoute } from "@nocios/crudify-components";
+
+function App() {
+  return (
+    <ProtectedRoute fallback={<LoginPage />}>
+      <Dashboard />
+    </ProtectedRoute>
+  );
+}
+```
+
+### Policies - Gestión de Políticas Públicas
+
+```tsx
+import { Policies, POLICY_ACTIONS, PolicyAction } from "@nocios/crudify-components";
+
+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 SDK
+
+Re-exporta completamente `@nocios/crudify-sdk`:
+
+```tsx
+import { crudify } from "@nocios/crudify-components";
+
+// Usar directamente la API de crudify
+const result = await crudify.create("users", userData);
+const users = await crudify.read("users");
+```
+
+## 🛠️ Utilidades
+
+### JWT Utils
+
+```tsx
+import { decodeJwtSafely, getCurrentUserEmail } from "@nocios/crudify-components";
+
+const payload = decodeJwtSafely(token);
+const email = getCurrentUserEmail();
+```
+
+### Error Handler
+
+```tsx
+import { handleCrudifyError, getErrorMessage } from "@nocios/crudify-components";
+
+try {
+  // operación
+} catch (error) {
+  const parsedError = handleCrudifyError(error);
+  const userMessage = getErrorMessage(parsedError.code);
+}
+```
+
+## 🚀 Ejemplo Completo
+
+```tsx
+import React from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { SessionProvider, ProtectedRoute, CrudifyLogin, useSessionContext } from "@nocios/crudify-components";
+
+function Dashboard() {
+  const { sessionData, logout } = useSessionContext();
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>Bienvenido, {sessionData?.email}</p>
+      <button onClick={logout}>Cerrar Sesión</button>
+    </div>
+  );
+}
+
+function LoginPage() {
+  return (
+    <div style={{ maxWidth: "400px", margin: "0 auto" }}>
+      <CrudifyLogin onLoginSuccess={(userData) => console.log("Login:", userData)} />
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <SessionProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route
+            path="/dashboard"
+            element={
+              <ProtectedRoute fallback={<LoginPage />}>
+                <Dashboard />
+              </ProtectedRoute>
+            }
+          />
+        </Routes>
+      </BrowserRouter>
+    </SessionProvider>
+  );
+}
+```
+
+## 📱 TypeScript
+
+Tipos completos incluidos:
+
+```tsx
+import type { CrudifyLoginProps, UseAuthReturn, UserProfile, TokenData } from "@nocios/crudify-components";
+```
+
+## 🌐 Internacionalización
+
+```tsx
+// Idiomas soportados: 'en' | 'es'
+<CrudifyLogin language="es" />
+
+// Traducciones personalizadas
+<CrudifyLogin
+  translations={{
+    login: { title: "Iniciar Sesión" }
+  }}
+/>
+```
+
+## 🔒 Seguridad
+
+- ✅ Encriptación de tokens
+- ✅ Refresh Token Pattern
+- ✅ Validación automática
+- ✅ Limpieza automática de tokens expirados
+
+## 📚 Documentación Completa
+
+Para documentación detallada, ejemplos avanzados y guías completas, consulta [README_DEPTH.md](./README_DEPTH.md).
+
+## 📄 Licencia
+
+MIT © [Nocios](https://github.com/nocios)
+
+---
+
+**¿Necesitas ayuda?** Consulta [README_DEPTH.md](./README_DEPTH.md) para documentación completa.