@etdt/etdt-e-comps 1.0.0 → 1.1.0

package/README.md

@@ -1,5 +1,13 @@
 # etdt-e-comps
 
+## Instalar
+
+```sh
+npm install @etdt/etdt-e-comps
+```
+
+## Componentes
+
 Componentes reutilizables para aplicaciones React con Ionic:
 
 - `PForm`: formulario con campos Ionic y validación de `react-hook-form`.
@@ -7,15 +15,117 @@ Componentes reutilizables para aplicaciones React con Ionic:
 - `PFooter`: pie de página Ionic con texto opcional.
 - `PRecordList`: lista de registros con acciones opcionales.
 
-## Instalar y usar
+### Utilizar los componentes
 
-```sh
-npm install etdt-e-comps
+```tsx
+import { PFooter, PForm, PInput, PRecordList } from '@etdt/etdt-e-comps';
 ```
 
+> La aplicación que utilice estos componentes debe tener instaladas las dependencias
+peer declaradas en `package.json`.
+
+## Contexto de autenticación (AuthContext.tsx)
+
+Contexto de autenticación para compartir el estado del usuario y las operaciones de inicio y
+cierre de sesión entre los componentes de la aplicación, delegando la comunicación con el
+servidor en un adaptador configurable.
+
+`createAuthContext<TUser, TLoginInput>(options)` crea un proveedor y un hook tipados.
+`TUser` es el tipo del usuario y `TLoginInput` el tipo de los datos necesarios para iniciar
+sesión.
+
+El almacenamiento se configura mediante un objeto `AuthStorage` que permite proporcionar una
+implementación propia de `getItem`, `setItem` y `removeItem` o con los siguientes `storage`:
+
+- `local`: usa `localStorage`.
+- `session`: usa `sessionStorage`.
+- `memory`: usa un `Map` en memoria; los datos se pierden al recargar o cerrar la pestaña.
+
+> Por defecto se tiene `storage: 'localStorage'` y `storageKey: 'user'`.
+
+La autenticación se conecta mediante un `AuthAdapter<TUser, TLoginInput>`, que debe
+implementar `login` y `logout`. Puede implementar también `restoreSession` para recuperar
+la sesión al iniciar o cuando se llame a `refreshSession`. Por ejemplo, para una aplicación
+que autentica mediante cookies:
+
 ```tsx
-import { PFooter, PForm, PInput, PRecordList } from 'etdt-e-comps';
+import {
+  createAuthContext,
+  type AuthAdapter,
+} from '@etdt/etdt-e-comps';
+
+interface User {
+  id: number;
+  name: string;
+}
+
+interface LoginInput {
+  username: string;
+  password: string;
+}
+
+const authAdapter: AuthAdapter<User, LoginInput> = {
+  async login(input) {
+    const response = await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify(input),
+    });
+    if (!response.ok) {
+      throw new Error(`Login failed (${response.status})`);
+    }
+    return (await response.json()) as User;
+  },
+
+  async restoreSession() {
+    const response = await fetch('/api/get_user', {
+      credentials: 'include',
+    });
+    if (response.status === 401) {
+      return null;
+    }
+    if (!response.ok) {
+      throw new Error(`Session restore failed (${response.status})`);
+    }
+    return (await response.json()) as User;
+  },
+
+  async logout() {
+    const response = await fetch('/api/logout', {
+      method: 'POST',
+      credentials: 'include',
+    });
+    if (!response.ok) {
+      throw new Error(`Logout failed (${response.status})`);
+    }
+  },
+};
+
+const { AuthProvider, useAuth } = createAuthContext<User, LoginInput>({
+  storage: 'local',
+});
+
+
+const UserProvider = ({ children }: { children: React.ReactNode }) => (
+  <AuthProvider adapter={authAdapter}>{children}</AuthProvider>
+);
+
+export default UserProvider
 ```
 
-> La aplicación que utilice estos componentes debe tener instaladas las dependencias 
-peer declaradas en `package.json`.
+`restoreSession` devuelve el usuario si la sesión sigue activa o `null` si no lo está.
+El ejemplo supone que `/api/get_user` responde directamente con el usuario y devuelve
+HTTP 401 cuando no hay sesión; adapta el manejo de la respuesta al contrato de tu API.
+El paquete no gestiona ni almacena el token o la cookie de sesión: eso corresponde a la
+aplicación y al servidor.
+
+El hook expone `user`, `isLoading`, `restoreError`, `login`, `logout`, `updateUser` y
+`refreshSession`. `login` y `logout` delegan en el adaptador. `updateUser` combina los
+cambios indicados con el usuario actual. `refreshSession` vuelve a llamar a
+`adapter.restoreSession`; si no se ha proporcionado ese método, lanza un error. El hook
+debe usarse dentro de su `AuthProvider`.
+
+El usuario guardado se serializa como JSON y se parsea al leerlo. El paquete no valida la
+forma de los datos leídos; valida la respuesta del servidor y cualquier dato almacenado si
+no confías en su origen.

package/dist/AuthContext.d.ts

@@ -0,0 +1,33 @@
+import { type ReactElement, type ReactNode } from 'react';
+export interface AuthAdapter<TUser, TLoginInput> {
+    login: (input: TLoginInput) => Promise<TUser>;
+    logout: () => Promise<void>;
+    restoreSession?: () => Promise<TUser | null>;
+}
+export interface AuthContextValue<TUser, TLoginInput> {
+    user: TUser | null;
+    isLoading: boolean;
+    restoreError: unknown | null;
+    login: (input: TLoginInput) => Promise<void>;
+    logout: () => Promise<void>;
+    updateUser: (data: Partial<TUser>) => void;
+    refreshSession: () => Promise<TUser | null>;
+}
+export interface AuthStorage {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
+}
+export interface AuthContextOptions {
+    storage?: 'local' | 'session' | 'memory' | AuthStorage;
+    storageKey?: string;
+}
+export interface AuthProviderProps<TUser, TLoginInput> {
+    adapter: AuthAdapter<TUser, TLoginInput>;
+    children: ReactNode;
+}
+export declare function createAuthContext<TUser, TLoginInput>(options?: AuthContextOptions): {
+    AuthProvider: ({ adapter, children, }: AuthProviderProps<TUser, TLoginInput>) => ReactElement;
+    useAuth: () => AuthContextValue<TUser, TLoginInput>;
+};
+//# sourceMappingURL=AuthContext.d.ts.map

package/dist/AuthContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthContext.d.ts","sourceRoot":"","sources":["../src/AuthContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,WAAW,CAAC,KAAK,EAAE,WAAW;IAC7C,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAClD,IAAI,EAAE,KAAK,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,EAAE,WAAW;IACnD,OAAO,EAAE,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACzC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAeD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,EAClD,OAAO,GAAE,kBAAuB;2CA8B7B,iBAAiB,CAAC,KAAK,EAAE,WAAW,CAAC,KAAG,YAAY;mBAqInC,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC;EASzD"}

package/dist/AuthContext.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+function createMemoryStorage() {
+    const values = new Map();
+    return {
+        getItem: (key) => values.get(key) ?? null,
+        setItem: (key, value) => {
+            values.set(key, value);
+        },
+        removeItem: (key) => {
+            values.delete(key);
+        },
+    };
+}
+export function createAuthContext(options = {}) {
+    const AuthContext = createContext(undefined);
+    const memoryStorage = createMemoryStorage();
+    const storageKey = options.storageKey ?? 'user';
+    const getStorage = () => {
+        if (typeof options.storage === 'object') {
+            return options.storage;
+        }
+        if (options.storage === 'memory') {
+            return memoryStorage;
+        }
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        if (options.storage === 'local') {
+            return window.localStorage;
+        }
+        if (options.storage === 'session') {
+            return window.sessionStorage;
+        }
+        return window.localStorage;
+    };
+    function AuthProvider({ adapter, children, }) {
+        const [user, setUser] = useState(() => {
+            const storage = getStorage();
+            if (!storage) {
+                return null;
+            }
+            try {
+                const storedUser = storage.getItem(storageKey);
+                return storedUser === null ? null : JSON.parse(storedUser);
+            }
+            catch (error) {
+                const detail = error instanceof Error ? error.message : String(error);
+                throw new Error(`Unable to read auth user from storage key "${storageKey}": ${detail}`);
+            }
+        });
+        const shouldRestoreSession = useRef(user === null);
+        const [isLoading, setIsLoading] = useState(adapter.restoreSession !== undefined && user === null);
+        const [restoreError, setRestoreError] = useState(null);
+        useEffect(() => {
+            const storage = getStorage();
+            if (!storage) {
+                return;
+            }
+            try {
+                if (user === null) {
+                    storage.removeItem(storageKey);
+                }
+                else {
+                    storage.setItem(storageKey, JSON.stringify(user));
+                }
+            }
+            catch (error) {
+                const detail = error instanceof Error ? error.message : String(error);
+                throw new Error(`Unable to persist auth user to storage key "${storageKey}": ${detail}`);
+            }
+        }, [storageKey, user]);
+        useEffect(() => {
+            const restoreSession = adapter.restoreSession;
+            if (!restoreSession || !shouldRestoreSession.current) {
+                setIsLoading(false);
+                return;
+            }
+            let cancelled = false;
+            setIsLoading(true);
+            setRestoreError(null);
+            const restore = async () => {
+                try {
+                    const restoredUser = await restoreSession();
+                    if (!cancelled) {
+                        setUser(restoredUser);
+                    }
+                }
+                catch (error) {
+                    if (!cancelled) {
+                        setRestoreError(error);
+                    }
+                }
+                finally {
+                    if (!cancelled) {
+                        setIsLoading(false);
+                        shouldRestoreSession.current = false;
+                    }
+                }
+            };
+            void restore();
+            return () => {
+                cancelled = true;
+            };
+        }, [adapter]);
+        const refreshSession = async () => {
+            if (!adapter.restoreSession) {
+                throw new Error('Refreshing the session requires a restoreSession adapter.');
+            }
+            setIsLoading(true);
+            setRestoreError(null);
+            try {
+                const restoredUser = await adapter.restoreSession();
+                setUser(restoredUser);
+                return restoredUser;
+            }
+            catch (error) {
+                setRestoreError(error);
+                throw error;
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        const login = async (input) => {
+            const authenticatedUser = await adapter.login(input);
+            setUser(authenticatedUser);
+            setRestoreError(null);
+        };
+        const logout = async () => {
+            await adapter.logout();
+            setUser(null);
+        };
+        const updateUser = (data) => {
+            setUser((currentUser) => currentUser === null ? null : { ...currentUser, ...data });
+        };
+        return (_jsx(AuthContext.Provider, { value: {
+                user,
+                isLoading,
+                restoreError,
+                login,
+                logout,
+                updateUser,
+                refreshSession,
+            }, children: children }));
+    }
+    function useAuth() {
+        const context = useContext(AuthContext);
+        if (!context) {
+            throw new Error('useAuth must be used within its AuthProvider');
+        }
+        return context;
+    }
+    return { AuthProvider, useAuth };
+}

package/dist/index.d.ts

@@ -5,4 +5,6 @@ export type { PInputOption, PInputProps, } from './PInput/PInput.types.js';
 export { default as PFooter } from './PFooter.js';
 export { default as PRecordList } from './PRecordList.js';
 export type { PRecord, PRecordAction, PRecordListProps, } from './PRecordList.js';
+export { createAuthContext } from './AuthContext.js';
+export type { AuthAdapter, AuthContextValue, AuthContextOptions, AuthProviderProps, AuthStorage, } from './AuthContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,GACX,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EACV,YAAY,EACZ,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,YAAY,EACV,OAAO,EACP,aAAa,EACb,gBAAgB,GACjB,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,GACX,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EACV,YAAY,EACZ,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,YAAY,EACV,OAAO,EACP,aAAa,EACb,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,GACZ,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -2,3 +2,4 @@ export { default as PForm } from './PForm/PForm.js';
 export { default as PInput } from './PInput/PInput.js';
 export { default as PFooter } from './PFooter.js';
 export { default as PRecordList } from './PRecordList.js';
+export { createAuthContext } from './AuthContext.js';

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@etdt/etdt-e-comps",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Reusable Ionic React form components",
   "keywords": [
     "react",
-    "typescript"
+    "typescript",
+    "ionic"
   ],
   "homepage": "https://gitlab.com/etdt/etdt-e-comps#readme",
   "bugs": {
@@ -17,6 +18,8 @@
   "license": "MIT",
   "author": "ETDT",
   "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,13 +27,12 @@
       "default": "./dist/index.js"
     }
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "README.md",
     "LICENSE"
   ],
+  "sideEffects": false,
   "scripts": {
     "build": "tsc --project tsconfig.json",
     "prepack": "npm run build"
@@ -39,6 +41,13 @@
     "moment": "^2.30.1",
     "ionicons": "^7.0.0"
   },
+  "peerDependencies": {
+    "@capacitor/core": "^7.0.0",
+    "@ionic/react": "^9.0.0",
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "react-hook-form": "^7.53.2"
+  },
   "devDependencies": {
     "@capacitor/core": "^7.0.0",
     "@ionic/react": "^9.0.0",
@@ -48,13 +57,5 @@
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.0.0",
     "typescript": "^5.4.0"
-  },
-  "peerDependencies": {
-    "@capacitor/core": "^7.0.0",
-    "@ionic/react": "^9.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.53.2"
-  },
-  "sideEffects": false
+  }
 }