max-remotes-helper 1.0.0 → 1.0.1

package/README.md

@@ -25,7 +25,7 @@ npm install bo-remotes-helper
 ### Basic Setup
 
 ```tsx
-import { RemoteWrapper, useRemoteAuth, Secured } from 'bo-remotes-helper';
+import { RemoteWrapper, useRemoteAuth, Secured } from "bo-remotes-helper";
 
 // Wrap your remote component
 export const MyRemoteComponent = ({ token }) => {
@@ -39,11 +39,11 @@ export const MyRemoteComponent = ({ token }) => {
 // Use authentication context
 const MyContent = () => {
   const { state, hasPermission } = useRemoteAuth();
-  
+
   return (
     <div>
       <h1>Welcome {state.user?.name}</h1>
-      
+
       <Secured permission="edit">
         <button>Edit Content</button>
       </Secured>
@@ -55,12 +55,12 @@ const MyContent = () => {
 ### Module Federation Configuration
 
 ```javascript
-import { useRemoteConfig } from 'bo-remotes-helper';
+import { useRemoteConfig } from "bo-remotes-helper";
 
 const { getWebpackConfig } = useRemoteConfig();
 
-const config = getWebpackConfig('my-remote', {
-  './MyComponent': './src/MyComponent',
+const config = getWebpackConfig("my-remote", {
+  "./MyComponent": "./src/MyComponent",
 });
 ```
 
@@ -69,38 +69,75 @@ const config = getWebpackConfig('my-remote', {
 ### Components
 
 #### `RemoteWrapper`
+
 Main wrapper component that provides authentication context.
 
 #### `Secured`
+
 Conditional rendering component based on permissions.
 
 ### Hooks
 
 #### `useRemoteAuth()`
+
 Access authentication state and methods.
 
+**[📖 Ver documentación completa de useRemoteAuth](./docs/useRemoteAuth.md)**
+
+```tsx
+const { state, hasPermission, setToken, clearAuth } = useRemoteAuth();
+
+// Verificar autenticación
+if (state.isAuthenticated) {
+  console.log("User:", state.user?.name);
+  console.log("Permissions:", state.permissions);
+}
+
+// Verificar permisos específicos
+if (hasPermission("users:write")) {
+  // Usuario puede editar
+}
+```
+
 #### `useRemoteConfig()`
+
 Get standard Module Federation configuration.
 
+### Components
+
+#### `<Secured />`
+
+Conditional rendering based on permissions.
+
+**[📖 Ver documentación completa de Secured](./docs/Secured.md)**
+
+```tsx
+<Secured permission="admin:all" fallback={<div>No autorizado</div>}>
+  <AdminPanel />
+</Secured>
+```
+
 ### Utils
 
 #### Token utilities
+
 - `decodeToken(token)` - Decode JWT safely
 - `isTokenExpired(token)` - Check token expiration
 - `tokenStorage` - Browser storage utilities
 
 #### Module utilities
+
 - `loadRemoteModule()` - Dynamic remote loading
 - `isRemoteAvailable()` - Check remote availability
 
 ## Differences from bo-library
 
-| Feature | bo-library | bo-remotes-helper |
-|---------|------------|-------------------|
-| Authentication | Full JWT verification | Client-side decode only |
-| Node.js APIs | Required (crypto, etc.) | Browser-only |
-| Bundle size | Large | Lightweight |
-| Use case | Host applications | Remote modules |
+| Feature        | bo-library              | bo-remotes-helper       |
+| -------------- | ----------------------- | ----------------------- |
+| Authentication | Full JWT verification   | Client-side decode only |
+| Node.js APIs   | Required (crypto, etc.) | Browser-only            |
+| Bundle size    | Large                   | Lightweight             |
+| Use case       | Host applications       | Remote modules          |
 
 ## Development
 
@@ -118,6 +155,18 @@ npm run dev
 npm run test
 ```
 
+## Documentation
+
+📚 **[Documentación Completa](./docs/README.md)** - Guías, tutoriales y referencia completa
+
+### Quick Links
+
+- 🔐 **[Hook useRemoteAuth](./docs/useRemoteAuth.md)** - Autenticación y permisos
+- 🛡️ **[Componente Secured](./docs/Secured.md)** - Renderizado condicional
+- 🚀 **[Quick Start Guide](./docs/quick-start.md)** - Comenzar en 5 minutos
+- 🧪 **[Testing Guide](./docs/guides/testing.md)** - Probar componentes
+- ❓ **[FAQ](./docs/FAQ.md)** - Preguntas frecuentes
+
 ## Integration with bo-module-react-template
 
-This library is designed to be the standard authentication solution for all remote modules created from `bo-module-react-template`.
+This library is designed to be the standard authentication solution for all remote modules created from `bo-module-react-template`.

package/dist/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-(()=>{var e={20:(e,r,t)=>{"use strict";var o=t(953),n=Symbol.for("react.element"),s=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,i=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};r.Fragment=s,r.jsx=function(e,r,t){var o,s={},c=null,d=null;for(o in void 0!==t&&(c=""+t),void 0!==r.key&&(c=""+r.key),void 0!==r.ref&&(d=r.ref),r)a.call(r,o)&&!l.hasOwnProperty(o)&&(s[o]=r[o]);if(e&&e.defaultProps)for(o in r=e.defaultProps)void 0===s[o]&&(s[o]=r[o]);return{$$typeof:n,type:e,key:c,ref:d,props:s,_owner:i.current}}},60:(e,r,t)=>{var o={"./moduleUtils":226,"./moduleUtils.ts":226,"./tokenUtils":433,"./tokenUtils.ts":433};function n(e){return Promise.resolve().then(()=>{if(!t.o(o,e)){var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}return t(o[e])})}n.keys=()=>Object.keys(o),n.id=60,e.exports=n},226:(e,r,t)=>{"use strict";t.r(r),t.d(r,{createRemoteComponentLoader:()=>i,getRemoteEnvironment:()=>l,isRemoteAvailable:()=>a,loadRemoteModule:()=>s});var o=t(953),n=t.n(o);const s=async(e,r)=>{try{return await t(60)(`${e}/${r}`)}catch(t){throw console.error(`Failed to load remote module ${e}/${r}:`,t),t}},a=async e=>{try{const r=window[e];return"function"==typeof r?.get}catch(e){return!1}},i=(e,r,t)=>n().lazy(async()=>{try{return await s(e,r)}catch(o){return console.error(`Remote component loading failed: ${e}/${r}`,o),t?{default:t}:{default:()=>n().createElement("div",{style:{padding:"20px",color:"red"}},`Failed to load remote component: ${e}/${r}`)}}}),l=()=>({isDevelopment:!1,apiBaseUrl:process.env.REACT_APP_API_URL||"",frontUrl:process.env.REACT_APP_FRONT_URL||""})},433:(e,r,t)=>{"use strict";t.r(r),t.d(r,{decodeToken:()=>o,extractPermissions:()=>s,isTokenExpired:()=>n,tokenStorage:()=>a});const o=e=>{try{if(!e)return null;const r=e.split(".");if(3!==r.length)return null;const t=r[1],o=t+"=".repeat((4-t.length%4)%4),n=atob(o);return JSON.parse(n)}catch(e){return console.error("Error decoding token:",e),null}},n=e=>{const r=o(e);if(!r||!r.exp)return!0;const t=Math.floor(Date.now()/1e3);return r.exp<t},s=e=>{if(!e)return[];const r=["permissions","roles","authorities","scope"];for(const t of r){const r=e[t];if(Array.isArray(r))return r;if("string"==typeof r)return r.split(" ").filter(Boolean)}return[]},a={key:"bo-remote-token",save:e=>{try{sessionStorage.setItem(a.key,e)}catch(e){console.error("Error saving token:",e)}},get:()=>{try{return sessionStorage.getItem(a.key)}catch(e){return console.error("Error getting token:",e),null}},remove:()=>{try{sessionStorage.removeItem(a.key)}catch(e){console.error("Error removing token:",e)}},clear:()=>{try{sessionStorage.clear()}catch(e){console.error("Error clearing storage:",e)}}}},848:(e,r,t)=>{"use strict";e.exports=t(20)},953:e=>{"use strict";e.exports=require("react")}},r={};function t(o){var n=r[o];if(void 0!==n)return n.exports;var s=r[o]={exports:{}};return e[o](s,s.exports,t),s.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.e=()=>Promise.resolve(),t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};(()=>{"use strict";t.r(o),t.d(o,{RemoteAuthProvider:()=>l,RemoteWrapper:()=>u,Secured:()=>d,createRemoteComponentLoader:()=>p.createRemoteComponentLoader,decodeToken:()=>n.decodeToken,extractPermissions:()=>n.extractPermissions,getRemoteEnvironment:()=>p.getRemoteEnvironment,isRemoteAvailable:()=>p.isRemoteAvailable,isTokenExpired:()=>n.isTokenExpired,loadRemoteModule:()=>p.loadRemoteModule,tokenStorage:()=>n.tokenStorage,useRemoteAuth:()=>c,useRemoteConfig:()=>m});var e=t(848),r=t(953),n=t(433);const s={token:null,isAuthenticated:!1,permissions:[],user:void 0},a=(e,r)=>{switch(r.type){case"SET_TOKEN":const t=(0,n.decodeToken)(r.payload),o=t?(0,n.extractPermissions)(t):[];return{...e,token:r.payload,isAuthenticated:!(0,n.isTokenExpired)(r.payload),permissions:o,user:t?{id:t.sub||"",email:t.email||"",name:t.name||t.email||""}:void 0};case"CLEAR_AUTH":return{...s};case"SET_USER_INFO":return{...e,user:{id:r.payload.sub||"",email:r.payload.email||"",name:r.payload.name||r.payload.email||""}};default:return e}},i=(0,r.createContext)(void 0),l=({children:t,initialToken:o})=>{const[l,c]=(0,r.useReducer)(a,s);(0,r.useEffect)(()=>{const e=n.tokenStorage.get(),r=o||e;r&&!(0,n.isTokenExpired)(r)?c({type:"SET_TOKEN",payload:r}):e&&n.tokenStorage.remove()},[o]);const d={state:l,setToken:e=>{e&&(n.tokenStorage.save(e),c({type:"SET_TOKEN",payload:e}))},clearAuth:()=>{n.tokenStorage.remove(),c({type:"CLEAR_AUTH"})},hasPermission:e=>!!l.isAuthenticated&&l.permissions.includes(e)};return(0,e.jsx)(i.Provider,{value:d,children:t})},c=()=>{const e=(0,r.useContext)(i);if(void 0===e)throw new Error("useRemoteAuth must be used within a RemoteAuthProvider");return e},d=({children:r,permission:t,fallback:o=null})=>{const{hasPermission:n,state:s}=c();return s.isAuthenticated&&n(t)?(0,e.jsx)(e.Fragment,{children:r}):(0,e.jsx)(e.Fragment,{children:o})},u=({children:r,token:t,apiBaseUrl:o,module:n})=>(0,e.jsx)(l,{initialToken:t,children:(0,e.jsx)("div",{"data-remote-module":n,"data-api-base":o,children:r})}),m=()=>{const e=(0,r.useMemo)(()=>({react:{singleton:!0,eager:!1},"react-dom":{singleton:!0,eager:!1},"aurora-web":{singleton:!0,eager:!1},"react-i18next":{singleton:!0,eager:!1},i18next:{singleton:!0,eager:!1}}),[]);return{sharedDependencies:e,getWebpackConfig:(r,t)=>({name:r,filename:"remoteEntry.js",exposes:t,shared:e})}};var p=t(226)})(),module.exports=o})();
+(()=>{var e={20:(e,t,o)=>{"use strict";var r=o(953),n=Symbol.for("react.element"),s=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,i=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};t.Fragment=s,t.jsx=function(e,t,o){var r,s={},c=null,d=null;for(r in void 0!==o&&(c=""+o),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(d=t.ref),t)a.call(t,r)&&!l.hasOwnProperty(r)&&(s[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===s[r]&&(s[r]=t[r]);return{$$typeof:n,type:e,key:c,ref:d,props:s,_owner:i.current}}},60:(e,t,o)=>{var r={"./moduleUtils":226,"./moduleUtils.ts":226,"./tokenUtils":433,"./tokenUtils.ts":433};function n(e){return Promise.resolve().then(()=>{if(!o.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o(r[e])})}n.keys=()=>Object.keys(r),n.id=60,e.exports=n},226:(e,t,o)=>{"use strict";o.r(t),o.d(t,{createRemoteComponentLoader:()=>i,getRemoteEnvironment:()=>l,isRemoteAvailable:()=>a,loadRemoteModule:()=>s});var r=o(953),n=o.n(r);const s=async(e,t)=>{try{return await o(60)(`${e}/${t}`)}catch(o){throw console.error(`Failed to load remote module ${e}/${t}:`,o),o}},a=async e=>{try{const t=window[e];return"function"==typeof t?.get}catch(e){return!1}},i=(e,t,o)=>n().lazy(async()=>{try{return await s(e,t)}catch(r){return console.error(`Remote component loading failed: ${e}/${t}`,r),o?{default:o}:{default:()=>n().createElement("div",{style:{padding:"20px",color:"red"}},`Failed to load remote component: ${e}/${t}`)}}}),l=()=>({isDevelopment:!1,apiBaseUrl:process.env.REACT_APP_API_URL||"",frontUrl:process.env.REACT_APP_FRONT_URL||""})},433:(e,t,o)=>{"use strict";o.r(t),o.d(t,{decodeToken:()=>r,extractPermissions:()=>s,isTokenExpired:()=>n,tokenStorage:()=>a});const r=e=>{try{if(!e)return null;const t=e.split(".");if(3!==t.length)return null;const o=t[1],r=o+"=".repeat((4-o.length%4)%4),n=atob(r);return JSON.parse(n)}catch(e){return console.error("Error decoding token:",e),null}},n=e=>{const t=r(e);if(!t||!t.exp)return!0;const o=Math.floor(Date.now()/1e3);return t.exp<o},s=e=>{if(!e)return[];const t=["permissions","roles","authorities","scope"];for(const o of t){const t=e[o];if(Array.isArray(t))return t;if("string"==typeof t)return t.split(" ").filter(Boolean)}return[]},a={key:"bo-remote-token",save:e=>{try{sessionStorage.setItem(a.key,e)}catch(e){console.error("Error saving token:",e)}},get:()=>{try{return sessionStorage.getItem(a.key)}catch(e){return console.error("Error getting token:",e),null}},remove:()=>{try{sessionStorage.removeItem(a.key)}catch(e){console.error("Error removing token:",e)}},clear:()=>{try{sessionStorage.clear()}catch(e){console.error("Error clearing storage:",e)}}}},848:(e,t,o)=>{"use strict";e.exports=o(20)},953:e=>{"use strict";e.exports=require("react")}},t={};function o(r){var n=t[r];if(void 0!==n)return n.exports;var s=t[r]={exports:{}};return e[r](s,s.exports,o),s.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.e=()=>Promise.resolve(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};(()=>{"use strict";o.r(r),o.d(r,{RemoteAuthProvider:()=>l,RemoteWrapper:()=>u,Secured:()=>d,createRemoteComponentLoader:()=>p.createRemoteComponentLoader,decodeToken:()=>n.decodeToken,extractPermissions:()=>n.extractPermissions,getRemoteEnvironment:()=>p.getRemoteEnvironment,isRemoteAvailable:()=>p.isRemoteAvailable,isTokenExpired:()=>n.isTokenExpired,loadRemoteModule:()=>p.loadRemoteModule,tokenStorage:()=>n.tokenStorage,useRemoteAuth:()=>c,useRemoteConfig:()=>m});var e=o(848),t=o(953),n=o(433);const s={token:null,isAuthenticated:!1,permissions:[],user:void 0},a=(e,t)=>{switch(t.type){case"SET_TOKEN":const o=(0,n.decodeToken)(t.payload),r=o?(0,n.extractPermissions)(o):[];return{...e,token:t.payload,isAuthenticated:!(0,n.isTokenExpired)(t.payload),permissions:r,user:o?{id:o.sub||"",email:o.email||"",name:o.name||o.email||""}:void 0};case"CLEAR_AUTH":return{...s};case"SET_USER_INFO":return{...e,user:{id:t.payload.sub||"",email:t.payload.email||"",name:t.payload.name||t.payload.email||""}};default:return e}},i=(0,t.createContext)(void 0),l=({children:o,initialToken:r})=>{const[l,c]=(0,t.useReducer)(a,s);(0,t.useEffect)(()=>{if(console.log("🔍 RemoteAuthContext: useEffect triggered",{initialToken:r?r.substring(0,30)+"...":"No initialToken"}),r)console.log("✅ RemoteAuthContext: Using initialToken from prop"),(0,n.isTokenExpired)(r)?(console.log("🔴 RemoteAuthContext: Provided token is expired, clearing auth"),n.tokenStorage.remove(),c({type:"CLEAR_AUTH"})):(console.log("🟢 RemoteAuthContext: Token is valid, dispatching SET_TOKEN"),c({type:"SET_TOKEN",payload:r}),n.tokenStorage.save(r));else{console.log("⚪ RemoteAuthContext: No initialToken, checking stored token");const e=n.tokenStorage.get();e&&!(0,n.isTokenExpired)(e)?(console.log("💾 RemoteAuthContext: Using stored token"),c({type:"SET_TOKEN",payload:e})):e&&(console.log("🗑️ RemoteAuthContext: Stored token expired, clearing"),n.tokenStorage.remove(),c({type:"CLEAR_AUTH"}))}},[r]);const d={state:l,setToken:e=>{e&&(n.tokenStorage.save(e),c({type:"SET_TOKEN",payload:e}))},clearAuth:()=>{n.tokenStorage.remove(),c({type:"CLEAR_AUTH"})},hasPermission:e=>!!l.isAuthenticated&&l.permissions.includes(e)};return(0,e.jsx)(i.Provider,{value:d,children:o})},c=()=>{const e=(0,t.useContext)(i);if(void 0===e)throw new Error("useRemoteAuth must be used within a RemoteAuthProvider");return e},d=({children:t,permission:o,fallback:r=null})=>{const{hasPermission:n,state:s}=c();return s.isAuthenticated&&n(o)?(0,e.jsx)(e.Fragment,{children:t}):(0,e.jsx)(e.Fragment,{children:r})},u=({children:t,token:o,apiBaseUrl:r,module:n})=>(0,e.jsx)(l,{initialToken:o,children:(0,e.jsx)("div",{"data-remote-module":n,"data-api-base":r,children:t})}),m=()=>{const e=(0,t.useMemo)(()=>({react:{singleton:!0,eager:!1},"react-dom":{singleton:!0,eager:!1},"aurora-web":{singleton:!0,eager:!1},"react-i18next":{singleton:!0,eager:!1},i18next:{singleton:!0,eager:!1}}),[]);return{sharedDependencies:e,getWebpackConfig:(t,o)=>({name:t,filename:"remoteEntry.js",exposes:o,shared:e})}};var p=o(226)})(),module.exports=r})();

package/docs/CONTRIBUTING.md

@@ -0,0 +1,371 @@
+# Guía de Contribución a bo-remotes-helper
+
+¡Gracias por tu interés en contribuir a `bo-remotes-helper`! Esta guía te ayudará a comenzar.
+
+## 📋 Tabla de Contenidos
+
+- [Código de Conducta](#código-de-conducta)
+- [Cómo Contribuir](#cómo-contribuir)
+- [Configuración del Entorno](#configuración-del-entorno)
+- [Estructura del Proyecto](#estructura-del-proyecto)
+- [Convenciones de Código](#convenciones-de-código)
+- [Testing](#testing)
+- [Documentación](#documentación)
+- [Pull Requests](#pull-requests)
+
+## Código de Conducta
+
+Este proyecto se adhiere al código de conducta de Intive. Al participar, se espera que mantengas un ambiente profesional y respetuoso.
+
+## Cómo Contribuir
+
+### Reportar Bugs
+
+1. Verifica que el bug no esté ya reportado en [Issues](#)
+2. Abre un nuevo issue con:
+   - Descripción clara del problema
+   - Pasos para reproducir
+   - Comportamiento esperado vs actual
+   - Versión de la librería
+   - Navegador/entorno
+
+Ejemplo:
+
+```markdown
+**Descripción:**
+useRemoteAuth lanza error cuando...
+
+**Pasos para reproducir:**
+
+1. Crear componente con...
+2. Llamar a hasPermission()...
+3. Ver error...
+
+**Esperado:** Debería retornar false
+**Actual:** Lanza TypeError
+
+**Entorno:**
+
+- bo-remotes-helper: v1.0.0
+- React: 18.2.0
+- Browser: Chrome 120
+```
+
+### Proponer Mejoras
+
+1. Abre un issue con etiqueta `enhancement`
+2. Describe el caso de uso
+3. Propón una solución (opcional)
+4. Espera feedback del equipo
+
+### Contribuir Código
+
+1. Fork el repositorio
+2. Crea una rama desde `main`: `feature/mi-mejora` o `fix/mi-bug`
+3. Implementa tus cambios
+4. Escribe/actualiza tests
+5. Actualiza documentación
+6. Crea un Pull Request
+
+## Configuración del Entorno
+
+### Prerrequisitos
+
+- Node.js >= 16
+- npm >= 8
+
+### Setup
+
+```bash
+# Clonar el repositorio
+git clone https://github.com/intive/bo-remotes-helper.git
+cd bo-remotes-helper
+
+# Instalar dependencias
+npm install
+
+# Ejecutar tests
+npm test
+
+# Build
+npm run build
+
+# Watch mode para desarrollo
+npm run dev
+```
+
+## Estructura del Proyecto
+
+```
+bo-remotes-helper/
+├── src/
+│   ├── components/         # Componentes React
+│   │   ├── RemoteWrapper.tsx
+│   │   └── Secured.tsx
+│   ├── context/           # Context providers
+│   │   └── RemoteAuthContext.tsx
+│   ├── hooks/             # Custom hooks (si los hay)
+│   │   └── useRemoteConfig.ts
+│   ├── types/             # Definiciones TypeScript
+│   │   └── index.ts
+│   ├── utils/             # Utilidades
+│   │   ├── tokenUtils.ts
+│   │   └── moduleUtils.ts
+│   └── index.ts           # Punto de entrada
+├── docs/                  # Documentación
+├── dist/                  # Build output
+├── webpack.config.js
+├── tsconfig.json
+└── package.json
+```
+
+## Convenciones de Código
+
+### TypeScript
+
+- Usar tipos explícitos (evitar `any`)
+- Exportar interfaces/tipos necesarios
+- Documentar funciones públicas con JSDoc
+
+```tsx
+/**
+ * Decodifica un token JWT sin verificar firma
+ * @param token - Token JWT a decodificar
+ * @returns Objeto con el payload del token o null si es inválido
+ */
+export const decodeToken = (token: string): TokenInfo | null => {
+  // implementación
+};
+```
+
+### React
+
+- Componentes funcionales con TypeScript
+- Props interface exportada
+- Usar `React.FC` con props tipadas
+
+```tsx
+interface MyComponentProps {
+  title: string;
+  onAction?: () => void;
+}
+
+export const MyComponent: React.FC<MyComponentProps> = ({
+  title,
+  onAction,
+}) => {
+  // implementación
+};
+```
+
+### Nombres
+
+- **Componentes**: PascalCase (`RemoteWrapper`)
+- **Hooks**: camelCase con prefijo `use` (`useRemoteAuth`)
+- **Utilidades**: camelCase (`decodeToken`)
+- **Tipos/Interfaces**: PascalCase (`RemoteAuthState`)
+- **Constantes**: UPPER_SNAKE_CASE (`DEFAULT_TOKEN_KEY`)
+
+### Formato
+
+Usamos Prettier para formateo automático:
+
+```bash
+npm run format
+```
+
+Configuración:
+
+```json
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
+```
+
+## Testing
+
+### Escribir Tests
+
+- Todos los PRs deben incluir tests
+- Objetivo: >80% de cobertura
+- Usar Jest + React Testing Library
+
+```tsx
+// src/components/__tests__/Secured.test.tsx
+import { render, screen } from "@testing-library/react";
+import { RemoteAuthProvider } from "../../context/RemoteAuthContext";
+import { Secured } from "../Secured";
+
+describe("Secured Component", () => {
+  it("renders children when user has permission", () => {
+    const mockToken = "valid-token";
+
+    render(
+      <RemoteAuthProvider initialToken={mockToken}>
+        <Secured permission="test:view">
+          <div>Protected Content</div>
+        </Secured>
+      </RemoteAuthProvider>,
+    );
+
+    expect(screen.getByText("Protected Content")).toBeInTheDocument();
+  });
+});
+```
+
+### Ejecutar Tests
+
+```bash
+# Todos los tests
+npm test
+
+# Watch mode
+npm test -- --watch
+
+# Cobertura
+npm test -- --coverage
+```
+
+## Documentación
+
+### Actualizar Docs
+
+Si tu cambio afecta la API pública:
+
+1. Actualiza `docs/[archivo-relevante].md`
+2. Actualiza ejemplos si es necesario
+3. Actualiza `README.md` si cambió algo fundamental
+4. Agrega entrada en `CHANGELOG.md`
+
+### Escribir Docs
+
+- Usa Markdown
+- Incluye ejemplos de código
+- Usa emojis para claridad visual
+- Agrega enlaces a secciones relacionadas
+
+Ejemplo:
+
+```markdown
+## useRemoteAuth()
+
+Hook que proporciona acceso al contexto de autenticación.
+
+**Uso:**
+\`\`\`tsx
+const { state, hasPermission } = useRemoteAuth();
+\`\`\`
+
+**Ver también:** [Quick Start](./quick-start.md)
+```
+
+## Pull Requests
+
+### Checklist
+
+Antes de crear un PR, verifica:
+
+- [ ] Los tests pasan (`npm test`)
+- [ ] El build funciona (`npm run build`)
+- [ ] Código formateado (`npm run format`)
+- [ ] Documentación actualizada
+- [ ] CHANGELOG.md actualizado
+- [ ] Commits descriptivos
+
+### Formato de Commits
+
+Usamos Conventional Commits:
+
+```
+tipo(scope): descripción corta
+
+Descripción más detallada si es necesario
+
+BREAKING CHANGE: Si hay cambios que rompen compatibilidad
+```
+
+Tipos:
+
+- `feat`: Nueva funcionalidad
+- `fix`: Corrección de bug
+- `docs`: Solo cambios en documentación
+- `refactor`: Refactorización sin cambiar funcionalidad
+- `test`: Agregar o modificar tests
+- `chore`: Cambios en build, deps, etc.
+
+Ejemplos:
+
+```
+feat(auth): agregar soporte para refresh token
+fix(types): corregir tipo de retorno de hasPermission
+docs(quick-start): actualizar ejemplo de setup
+```
+
+### Template de PR
+
+```markdown
+## Descripción
+
+Breve descripción del cambio
+
+## Tipo de Cambio
+
+- [ ] Bug fix
+- [ ] Nueva funcionalidad
+- [ ] Breaking change
+- [ ] Documentación
+
+## Testing
+
+¿Cómo se probó este cambio?
+
+## Checklist
+
+- [ ] Tests pasan
+- [ ] Documentación actualizada
+- [ ] CHANGELOG actualizado
+```
+
+### Proceso de Review
+
+1. Crea el PR contra `main`
+2. Asigna reviewers del equipo BO
+3. Espera al menos 1 aprobación
+4. Resuelve comentarios
+5. Merge (squash commits)
+
+## Versionado
+
+Seguimos Semantic Versioning:
+
+- **MAJOR**: Cambios incompatibles (v1.0.0 → v2.0.0)
+- **MINOR**: Nueva funcionalidad compatible (v1.0.0 → v1.1.0)
+- **PATCH**: Bug fixes compatibles (v1.0.0 → v1.0.1)
+
+## Release Process
+
+1. Actualizar versión en `package.json`
+2. Actualizar `CHANGELOG.md`
+3. Crear tag: `git tag v1.0.0`
+4. Push tag: `git push origin v1.0.0`
+5. Publish: `npm publish`
+
+## Contacto
+
+- **Slack**: #bo-team
+- **Email**: bo-team@intive.com
+- **Issues**: [GitHub Issues](#)
+
+## Recursos
+
+- [React Docs](https://react.dev)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+- [Testing Library](https://testing-library.com/react)
+- [Module Federation](https://webpack.js.org/concepts/module-federation/)
+
+---
+
+¡Gracias por contribuir! 🎉