max-remotes-helper 1.0.1 → 1.0.2

package/dist/components/DevButton.d.ts

@@ -0,0 +1,20 @@
+/**
+ * DevButton.tsx
+ *
+ * Componente de botón simple para componentes de desarrollo (DevWrapper, TokenInput, etc.)
+ * No depende de Aurora Web para facilitar la separación del código de desarrollo.
+ */
+import React from "react";
+type ButtonVariant = "primary" | "secondary" | "text";
+type ButtonSize = "small" | "medium" | "large";
+interface DevButtonProps {
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    className?: string;
+    type?: "button" | "submit" | "reset";
+}
+declare const DevButton: React.FC<DevButtonProps>;
+export default DevButton;

package/dist/components/DevCard.d.ts

@@ -0,0 +1,13 @@
+/**
+ * DevCard.tsx
+ *
+ * Componente de tarjeta simple para componentes de desarrollo.
+ * Reemplaza EmptyCard de Aurora Web para eliminar dependencias.
+ */
+import React from "react";
+interface DevCardProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const DevCard: React.FC<DevCardProps>;
+export default DevCard;

package/dist/components/DevWrapper.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface DevWrapperProps {
+    children: React.ReactNode;
+}
+declare const DevWrapper: React.FC<DevWrapperProps>;
+export default DevWrapper;

package/dist/components/FloatingTokenButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface FloatingTokenButtonProps {
+    onClick: () => void;
+}
+declare const FloatingTokenButton: React.FC<FloatingTokenButtonProps>;
+export default FloatingTokenButton;

package/dist/components/RemoteWrapper.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { AuthProviderProps } from '../types';
+import React from "react";
+import { AuthProviderProps } from "../types";
 /**
  * Wrapper component that provides authentication context to remote components
  * This is the main component that remote applications should use

package/dist/components/TokenGenerator.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface TokenGeneratorProps {
+    onSubmit: (token: string) => void;
+    onCancel: () => void;
+    onClearStorage: () => void;
+    currentToken?: string;
+    jsonExample?: string;
+    defaultDevRoles?: string[];
+}
+declare const TokenGenerator: React.FC<TokenGeneratorProps>;
+export default TokenGenerator;

package/dist/components/TokenInput.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface TokenInputProps {
+    onSubmit: (token: string) => void;
+    onCancel: () => void;
+    onClearStorage: () => void;
+    currentToken?: string;
+}
+declare const TokenInput: React.FC<TokenInputProps>;
+export default TokenInput;

package/dist/context/RemoteAuthContext.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { RemoteAuthContextValue } from '../types';
+import React, { ReactNode } from "react";
+import { RemoteAuthContextValue } from "../types";
 interface RemoteAuthProviderProps {
     children: ReactNode;
     initialToken?: string;

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-export { RemoteAuthProvider, useRemoteAuth } from './context/RemoteAuthContext';
-export { Secured } from './components/Secured';
-export { RemoteWrapper } from './components/RemoteWrapper';
-export { useRemoteConfig } from './hooks/useRemoteConfig';
-export { decodeToken, isTokenExpired, extractPermissions, tokenStorage } from './utils/tokenUtils';
-export { loadRemoteModule, isRemoteAvailable, createRemoteComponentLoader, getRemoteEnvironment } from './utils/moduleUtils';
-export type { RemoteAuthState, RemoteAuthContextValue, AuthProviderProps, SecuredProps, TokenInfo, RemoteConfig, SharedDependencies, } from './types';
+export { RemoteAuthProvider, useRemoteAuth } from "./context/RemoteAuthContext";
+export { Secured } from "./components/Secured";
+export { RemoteWrapper } from "./components/RemoteWrapper";
+export { default as DevWrapper } from "./components/DevWrapper";
+export { useRemoteConfig } from "./hooks/useRemoteConfig";
+export { decodeToken, isTokenExpired, extractPermissions, tokenStorage, } from "./utils/tokenUtils";
+export { loadRemoteModule, isRemoteAvailable, createRemoteComponentLoader, getRemoteEnvironment, } from "./utils/moduleUtils";
+export type { RemoteAuthState, RemoteAuthContextValue, AuthProviderProps, SecuredProps, TokenInfo, RemoteConfig, SharedDependencies, } from "./types";

package/dist/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-(()=>{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})();
+(()=>{var e={20:(e,t,r)=>{"use strict";var o=r(953),n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),s=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};function c(e,t,r){var o,a={},c=null,d=null;for(o in void 0!==r&&(c=""+r),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(d=t.ref),t)s.call(t,o)&&!l.hasOwnProperty(o)&&(a[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===a[o]&&(a[o]=t[o]);return{$$typeof:n,type:e,key:c,ref:d,props:a,_owner:i.current}}t.Fragment=a,t.jsx=c,t.jsxs=c},60:(e,t,r)=>{var o={"./moduleUtils":226,"./moduleUtils.ts":226,"./tokenUtils":433,"./tokenUtils.ts":433};function n(e){return Promise.resolve().then(()=>{if(!r.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r(o[e])})}n.keys=()=>Object.keys(o),n.id=60,e.exports=n},87:(e,t,r)=>{(()=>{var t={20:(e,t,r)=>{"use strict";var o=r(953),n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),s=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};t.Fragment=a,t.jsx=function(e,t,r){var o,a={},c=null,d=null;for(o in void 0!==r&&(c=""+r),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(d=t.ref),t)s.call(t,o)&&!l.hasOwnProperty(o)&&(a[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===a[o]&&(a[o]=t[o]);return{$$typeof:n,type:e,key:c,ref:d,props:a,_owner:i.current}}},60:(e,t,r)=>{var o={"./moduleUtils":226,"./moduleUtils.ts":226,"./tokenUtils":433,"./tokenUtils.ts":433};function n(e){return Promise.resolve().then(()=>{if(!r.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r(o[e])})}n.keys=()=>Object.keys(o),n.id=60,e.exports=n},226:(e,t,r)=>{"use strict";r.r(t),r.d(t,{createRemoteComponentLoader:()=>i,getRemoteEnvironment:()=>l,isRemoteAvailable:()=>s,loadRemoteModule:()=>a});var o=r(953),n=r.n(o);const a=async(e,t)=>{try{return await r(60)(`${e}/${t}`)}catch(r){throw console.error(`Failed to load remote module ${e}/${t}:`,r),r}},s=async e=>{try{const t=window[e];return"function"==typeof t?.get}catch(e){return!1}},i=(e,t,r)=>n().lazy(async()=>{try{return await a(e,t)}catch(o){return console.error(`Remote component loading failed: ${e}/${t}`,o),r?{default:r}:{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,r)=>{"use strict";r.r(t),r.d(t,{decodeToken:()=>o,extractPermissions:()=>a,isTokenExpired:()=>n,tokenStorage:()=>s});const o=e=>{try{if(!e)return null;const t=e.split(".");if(3!==t.length)return null;const r=t[1],o=r+"=".repeat((4-r.length%4)%4),n=atob(o);return JSON.parse(n)}catch(e){return console.error("Error decoding token:",e),null}},n=e=>{const t=o(e);if(!t||!t.exp)return!0;const r=Math.floor(Date.now()/1e3);return t.exp<r},a=e=>{if(!e)return[];const t=["permissions","roles","authorities","scope"];for(const r of t){const t=e[r];if(Array.isArray(t))return t;if("string"==typeof t)return t.split(" ").filter(Boolean)}return[]},s={key:"bo-remote-token",save:e=>{try{sessionStorage.setItem(s.key,e)}catch(e){console.error("Error saving token:",e)}},get:()=>{try{return sessionStorage.getItem(s.key)}catch(e){return console.error("Error getting token:",e),null}},remove:()=>{try{sessionStorage.removeItem(s.key)}catch(e){console.error("Error removing token:",e)}},clear:()=>{try{sessionStorage.clear()}catch(e){console.error("Error clearing storage:",e)}}}},848:(e,t,r)=>{"use strict";e.exports=r(20)},953:e=>{"use strict";e.exports=r(953)}},o={};function n(e){var r=o[e];if(void 0!==r)return r.exports;var a=o[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.e=()=>Promise.resolve(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};(()=>{"use strict";n.r(a),n.d(a,{RemoteAuthProvider:()=>l,RemoteWrapper:()=>u,Secured:()=>d,createRemoteComponentLoader:()=>g.createRemoteComponentLoader,decodeToken:()=>r.decodeToken,extractPermissions:()=>r.extractPermissions,getRemoteEnvironment:()=>g.getRemoteEnvironment,isRemoteAvailable:()=>g.isRemoteAvailable,isTokenExpired:()=>r.isTokenExpired,loadRemoteModule:()=>g.loadRemoteModule,tokenStorage:()=>r.tokenStorage,useRemoteAuth:()=>c,useRemoteConfig:()=>m});var e=n(848),t=n(953),r=n(433);const o={token:null,isAuthenticated:!1,permissions:[],user:void 0},s=(e,t)=>{switch(t.type){case"SET_TOKEN":const n=(0,r.decodeToken)(t.payload),a=n?(0,r.extractPermissions)(n):[];return{...e,token:t.payload,isAuthenticated:!(0,r.isTokenExpired)(t.payload),permissions:a,user:n?{id:n.sub||"",email:n.email||"",name:n.name||n.email||""}:void 0};case"CLEAR_AUTH":return{...o};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:n,initialToken:a})=>{const[l,c]=(0,t.useReducer)(s,o);(0,t.useEffect)(()=>{if(console.log("🔍 RemoteAuthContext: useEffect triggered",{initialToken:a?a.substring(0,30)+"...":"No initialToken"}),a)console.log("✅ RemoteAuthContext: Using initialToken from prop"),(0,r.isTokenExpired)(a)?(console.log("🔴 RemoteAuthContext: Provided token is expired, clearing auth"),r.tokenStorage.remove(),c({type:"CLEAR_AUTH"})):(console.log("🟢 RemoteAuthContext: Token is valid, dispatching SET_TOKEN"),c({type:"SET_TOKEN",payload:a}),r.tokenStorage.save(a));else{console.log("⚪ RemoteAuthContext: No initialToken, checking stored token");const e=r.tokenStorage.get();e&&!(0,r.isTokenExpired)(e)?(console.log("💾 RemoteAuthContext: Using stored token"),c({type:"SET_TOKEN",payload:e})):e&&(console.log("🗑️ RemoteAuthContext: Stored token expired, clearing"),r.tokenStorage.remove(),c({type:"CLEAR_AUTH"}))}},[a]);const d={state:l,setToken:e=>{e&&(r.tokenStorage.save(e),c({type:"SET_TOKEN",payload:e}))},clearAuth:()=>{r.tokenStorage.remove(),c({type:"CLEAR_AUTH"})},hasPermission:e=>!!l.isAuthenticated&&l.permissions.includes(e)};return(0,e.jsx)(i.Provider,{value:d,children:n})},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:r,fallback:o=null})=>{const{hasPermission:n,state:a}=c();return a.isAuthenticated&&n(r)?(0,e.jsx)(e.Fragment,{children:t}):(0,e.jsx)(e.Fragment,{children:o})},u=({children:t,token:r,apiBaseUrl:o,module:n})=>(0,e.jsx)(l,{initialToken:r,children:(0,e.jsx)("div",{"data-remote-module":n,"data-api-base":o,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,r)=>({name:t,filename:"remoteEntry.js",exposes:r,shared:e})}};var g=n(226)})(),e.exports=a})()},226:(e,t,r)=>{"use strict";r.r(t),r.d(t,{createRemoteComponentLoader:()=>i,getRemoteEnvironment:()=>l,isRemoteAvailable:()=>s,loadRemoteModule:()=>a});var o=r(953),n=r.n(o);const a=async(e,t)=>{try{return await r(60)(`${e}/${t}`)}catch(r){throw console.error(`Failed to load remote module ${e}/${t}:`,r),r}},s=async e=>{try{const t=window[e];return"function"==typeof t?.get}catch(e){return!1}},i=(e,t,r)=>n().lazy(async()=>{try{return await a(e,t)}catch(o){return console.error(`Remote component loading failed: ${e}/${t}`,o),r?{default:r}:{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,r)=>{"use strict";r.r(t),r.d(t,{decodeToken:()=>o,extractPermissions:()=>a,isTokenExpired:()=>n,tokenStorage:()=>s});const o=e=>{try{if(!e)return null;const t=e.split(".");if(3!==t.length)return null;const r=t[1],o=r+"=".repeat((4-r.length%4)%4),n=atob(o);return JSON.parse(n)}catch(e){return console.error("Error decoding token:",e),null}},n=e=>{const t=o(e);if(!t||!t.exp)return!0;const r=Math.floor(Date.now()/1e3);return t.exp<r},a=e=>{if(!e)return[];const t=["permissions","roles","authorities","scope"];for(const r of t){const t=e[r];if(Array.isArray(t))return t;if("string"==typeof t)return t.split(" ").filter(Boolean)}return[]},s={key:"bo-remote-token",save:e=>{try{sessionStorage.setItem(s.key,e)}catch(e){console.error("Error saving token:",e)}},get:()=>{try{return sessionStorage.getItem(s.key)}catch(e){return console.error("Error getting token:",e),null}},remove:()=>{try{sessionStorage.removeItem(s.key)}catch(e){console.error("Error removing token:",e)}},clear:()=>{try{sessionStorage.clear()}catch(e){console.error("Error clearing storage:",e)}}}},848:(e,t,r)=>{"use strict";e.exports=r(20)},953:e=>{"use strict";e.exports=require("react")}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var a=t[o]={exports:{}};return e[o](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.e=()=>Promise.resolve(),r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};(()=>{"use strict";r.r(o),r.d(o,{DevWrapper:()=>y,RemoteAuthProvider:()=>l,RemoteWrapper:()=>u,Secured:()=>d,createRemoteComponentLoader:()=>b.createRemoteComponentLoader,decodeToken:()=>n.decodeToken,extractPermissions:()=>n.extractPermissions,getRemoteEnvironment:()=>b.getRemoteEnvironment,isRemoteAvailable:()=>b.isRemoteAvailable,isTokenExpired:()=>n.isTokenExpired,loadRemoteModule:()=>b.loadRemoteModule,tokenStorage:()=>n.tokenStorage,useRemoteAuth:()=>c,useRemoteConfig:()=>v});var e=r(848),t=r(953),n=r(433);const a={token:null,isAuthenticated:!1,permissions:[],user:void 0},s=(e,t)=>{switch(t.type){case"SET_TOKEN":const r=(0,n.decodeToken)(t.payload),o=r?(0,n.extractPermissions)(r):[];return{...e,token:t.payload,isAuthenticated:!(0,n.isTokenExpired)(t.payload),permissions:o,user:r?{id:r.sub||"",email:r.email||"",name:r.name||r.email||""}:void 0};case"CLEAR_AUTH":return{...a};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:r,initialToken:o})=>{const[l,c]=(0,t.useReducer)(s,a),d="dev"===process.env.REACT_APP_ENVIRONMENT?console.log:()=>{};(0,t.useEffect)(()=>{if(d("🔍 RemoteAuthContext: useEffect triggered",{initialToken:o?o.substring(0,30)+"...":"No initialToken"}),o)d("✅ RemoteAuthContext: Using initialToken from prop"),(0,n.isTokenExpired)(o)?(d("🔴 RemoteAuthContext: Provided token is expired, clearing auth"),n.tokenStorage.remove(),c({type:"CLEAR_AUTH"})):(d("🟢 RemoteAuthContext: Token is valid, dispatching SET_TOKEN"),c({type:"SET_TOKEN",payload:o}),n.tokenStorage.save(o));else{d("⚪ RemoteAuthContext: No initialToken, checking stored token");const e=n.tokenStorage.get();e&&!(0,n.isTokenExpired)(e)?(d("💾 RemoteAuthContext: Using stored token"),c({type:"SET_TOKEN",payload:e})):e&&(d("🗑️ RemoteAuthContext: Stored token expired, clearing"),n.tokenStorage.remove(),c({type:"CLEAR_AUTH"}))}},[o]);const u={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:u,children:r})},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:r,fallback:o=null})=>{const{hasPermission:n,state:a}=c();return a.isAuthenticated&&n(r)?(0,e.jsx)(e.Fragment,{children:t}):(0,e.jsx)(e.Fragment,{children:o})},u=({children:t,token:r})=>(0,e.jsx)(l,{initialToken:r,children:(0,e.jsx)("div",{children:t})});var m=r(87);const g=({children:t,className:r=""})=>(0,e.jsx)("div",{className:`bg-white rounded-lg shadow-md border border-gray-20 ${r}`,children:t}),p=({label:t,onClick:r,disabled:o=!1,variant:n="primary",size:a="medium",className:s="",type:i="button"})=>(0,e.jsx)("button",{type:i,onClick:r,disabled:o,className:`rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${{primary:"bg-gradient-to-br from-blue-40 to-blue-70 hover:from-blue-50 hover:to-blue-90 text-white focus:ring-blue-50 shadow-sm hover:shadow-md",secondary:"bg-gray-20 hover:bg-gray-30 text-gray-80 focus:ring-gray-40 border border-gray-30",text:"bg-transparent hover:bg-gray-10 text-blue-60 hover:text-blue-80 focus:ring-blue-30"}[n]} ${{small:"px-4 py-2 text-sm",medium:"px-5 py-2.5 text-base",large:"px-6 py-3 text-lg"}[a]} ${s}`,children:t}),x=({onSubmit:r,onCancel:o,onClearStorage:n,defaultDevRoles:a=[],currentToken:s=""})=>{const[i,l]=(0,t.useState)(!1),[c,d]=(0,t.useState)(""),[u,m]=(0,t.useState)({user:"usuario@bdsol.com.ar",roles:a,channel:"mf-testing",sessionId:crypto.randomUUID()}),[x,h]=(0,t.useState)(a.join("\n")),f=(e,t)=>{m(r=>({...r,[e]:t}))};return(0,e.jsx)("div",{className:"p-6 w-full overflow-y-auto",children:(0,e.jsx)(g,{className:"p-6",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("h2",{className:"text-2xl font-bold text-gray-80 mb-4",children:"🔧 Generador de Tokens (Desarrollo)"}),(0,e.jsx)("p",{className:"text-gray-60 mb-6",children:"Genera un token JWT para desarrollo usando el BFF. Solo disponible cuando ENVIRONMENT=dev."}),c&&(0,e.jsx)("div",{className:"mb-4 p-3 bg-red-10 border border-red-40 text-red-70 rounded",children:c}),(0,e.jsxs)("div",{className:"space-y-4 mb-6",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("label",{className:"block text-sm font-medium text-gray-70 mb-1",children:"Email del usuario"}),(0,e.jsx)("input",{type:"email",value:u.user,onChange:e=>f("user",e.target.value),className:"w-full p-2 border border-gray-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-50",placeholder:"usuario@bdsol.com.ar"})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("label",{className:"block text-sm font-medium text-gray-70 mb-1",children:"Roles (uno por línea)"}),(0,e.jsx)("textarea",{value:x,onChange:e=>h(e.target.value),className:"w-full h-32 p-2 border border-gray-30 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-50",placeholder:a.join("&#10;")}),(0,e.jsx)("p",{className:"text-xs text-gray-50 mt-1",children:"Roles definidos en src/config/roles.ts"})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("label",{className:"block text-sm font-medium text-gray-70 mb-1",children:"Channel"}),(0,e.jsx)("input",{type:"text",value:u.channel,onChange:e=>f("channel",e.target.value),className:"w-full p-2 border border-gray-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-50",placeholder:"mf-testing"})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("label",{className:"block text-sm font-medium text-gray-70 mb-1",children:"Session ID"}),(0,e.jsxs)("div",{className:"flex gap-2",children:[(0,e.jsx)("input",{type:"text",value:u.sessionId,onChange:e=>f("sessionId",e.target.value),className:"flex-1 p-2 border border-gray-30 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-50",placeholder:"uuid-session-id"}),(0,e.jsx)(p,{label:"🎲",variant:"primary",size:"small",onClick:()=>{m(e=>({...e,sessionId:crypto.randomUUID()}))},className:"px-3"})]})]})]}),(0,e.jsxs)("div",{className:"flex gap-3 flex-wrap mb-4",children:[(0,e.jsx)(p,{label:i?"Generando...":"🚀 Generar Token",variant:"primary",size:"small",onClick:async()=>{l(!0),d(""),n();try{const e=x.split("\n").map(e=>e.trim()).filter(e=>e.length>0),t={...u,roles:e},o=process.env.REACT_APP_API_URL||"http://localhost:3020",n=await fetch(`${o}/template/api/dev/generate-token`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)});if(!n.ok){const e=await n.json();throw new Error(e.error||"Error al generar token")}const a=await n.json();r(a.token)}catch(e){d(e instanceof Error?e.message:"Error desconocido")}finally{l(!1)}},disabled:i||!u.user.trim()}),(0,e.jsx)(p,{label:"Limpiar almacenamiento",variant:"primary",size:"small",onClick:()=>{n(),alert("SessionStorage limpiado correctamente")}}),(0,e.jsx)(p,{label:"Cancelar",size:"small",variant:"secondary",onClick:o})]}),s&&(0,e.jsxs)("div",{className:"mt-4 p-4 bg-green-50 rounded-lg",children:[(0,e.jsx)("h3",{className:"font-semibold text-green-70 mb-2",children:"✅ Token cargado"}),(0,e.jsx)("p",{className:"text-sm text-green-60",children:"Tienes un token activo en el almacenamiento local."})]})," "]})})})},h=({onSubmit:r,onCancel:o,onClearStorage:n,currentToken:a=""})=>{const[s,i]=(0,t.useState)(a),[l,c]=(0,t.useState)(!0);return(0,e.jsxs)("div",{className:"bg-white rounded-lg shadow-lg p-6 w-full max-w-2xl",children:[(0,e.jsx)("h2",{className:"text-2xl font-bold text-gray-80 mb-4",children:"Modo Desarrollo - Cargar Token JWT"}),(0,e.jsx)("p",{className:"text-gray-60 mb-6",children:"Ingresa el token JWT decodificado (JSON) que normalmente recibiría desde el host:"}),(0,e.jsxs)("div",{className:"mb-4",children:[(0,e.jsx)("textarea",{value:s,onChange:e=>{const t=e.target.value;i(t),l||c(!0)},placeholder:"Pegue aquí el token JWT en formato JSON",className:`w-full h-40 p-3 border rounded-lg font-mono text-sm ${l?"border-gray-30":"border-red-50"} focus:outline-none focus:ring-2 focus:ring-blue-50`}),!l&&(0,e.jsx)("p",{className:"text-red-50 text-sm mt-2",children:"El JSON no es válido. Por favor verifica la sintaxis."})]}),(0,e.jsxs)("div",{className:"flex gap-3 flex-wrap",children:[(0,e.jsx)(p,{label:"Cargar Token",variant:"primary",size:"small",onClick:()=>{try{JSON.parse(s),c(!0),r(s)}catch(e){c(!1)}},disabled:!s.trim()}),(0,e.jsx)(p,{label:"Limpiar",size:"small",variant:"text",onClick:()=>i("")}),(0,e.jsx)(p,{label:"Limpiar Storage",variant:"primary",size:"small",onClick:()=>{n(),i(""),alert("SessionStorage limpiado correctamente")}}),(0,e.jsx)(p,{label:"Cancelar",variant:"secondary",size:"small",onClick:o})]})]})},f=({onClick:t})=>(0,e.jsxs)("button",{onClick:t,className:"fixed bottom-6 right-6 bg-gradient-to-br from-blue-40 to-blue-70 hover:from-blue-50 hover:to-blue-90 text-white p-4 rounded-full shadow-dropdown hover:shadow-2xl transition-all duration-300 z-50 group transform hover:scale-110",title:"Recargar Token",children:[(0,e.jsx)("svg",{className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,e.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"})}),(0,e.jsx)("span",{className:"absolute bottom-full right-0 mb-3 px-3 py-1 text-xs text-white bg-gray-90/90 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap backdrop-blur-sm",children:"Recargar Token"})]}),y=({children:r})=>{const[o,n]=(0,t.useState)(""),[a,s]=(0,t.useState)(!1),[i,l]=(0,t.useState)(!1),[c,d]=(0,t.useState)(!0),u="dev"===process.env.REACT_APP_ENVIRONMENT&&!o;(0,t.useEffect)(()=>{const e=m.tokenStorage.get();e?(n(e),l(!1)):u&&l(!0)},[u]);const g=e=>{console.log("🔄 DevWrapper: Nuevo token generado",{token:e.substring(0,50)+"..."}),n(e),m.tokenStorage.save(e),console.log("💾 DevWrapper: Token guardado en storage"),s(!1),l(!1)},p=()=>{m.tokenStorage.clear(),n(""),l(u)};return i?(0,e.jsx)("div",{className:"min-h-screen bg-gray-50 flex items-center justify-center p-4",children:(0,e.jsx)(x,{onSubmit:g,onCancel:()=>l(!1),onClearStorage:p,currentToken:o})}):(0,e.jsxs)("div",{className:"min-h-screen bg-gray-50",children:[a&&(0,e.jsx)("div",{className:"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50",children:(0,e.jsxs)("div",{className:"bg-white rounded-lg shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto",children:[(0,e.jsxs)("div",{className:"flex border-b",children:[(0,e.jsx)("button",{onClick:()=>d(!0),className:"flex-1 py-3 px-4 text-sm font-medium "+(c?"bg-blue-50 ":"bg-gray-10 text-gray-70 hover:bg-gray-20"),children:"Generar Token"}),(0,e.jsx)("button",{onClick:()=>d(!1),className:"flex-1 py-3 px-4 text-sm font-medium "+(c?"bg-gray-10 text-gray-70 hover:bg-gray-20":"bg-blue-50 text-gray-50"),children:"Input Manual"})]}),(0,e.jsx)("div",{className:"p-0",children:c?(0,e.jsx)(x,{onSubmit:g,onCancel:()=>s(!1),onClearStorage:p,currentToken:o}):(0,e.jsx)("div",{className:"p-6",children:(0,e.jsx)(h,{onSubmit:g,onCancel:()=>s(!1),onClearStorage:p,currentToken:o})})})]})}),(0,e.jsx)(f,{onClick:()=>{s(!a)}}),(0,e.jsx)(m.RemoteWrapper,{token:o,children:r})]})},v=()=>{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,r)=>({name:t,filename:"remoteEntry.js",exposes:r,shared:e})}};var b=r(226)})(),module.exports=o})();

package/dist/index.js.LICENSE.txt

@@ -1,3 +1,5 @@
+/*! For license information please see index.js.LICENSE.txt */
+
 /**
  * @license React
  * react-jsx-runtime.production.min.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "max-remotes-helper",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Helper library for Module Federation remotes in BO ecosystem",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,6 +20,7 @@
   "author": "BO Team",
   "license": "ISC",
   "dependencies": {
+    "max-remotes-helper": "^1.0.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/components/DevButton.tsx

@@ -0,0 +1,61 @@
+/**
+ * DevButton.tsx
+ *
+ * Componente de botón simple para componentes de desarrollo (DevWrapper, TokenInput, etc.)
+ * No depende de Aurora Web para facilitar la separación del código de desarrollo.
+ */
+
+import React from "react";
+
+type ButtonVariant = "primary" | "secondary" | "text";
+type ButtonSize = "small" | "medium" | "large";
+
+interface DevButtonProps {
+  label: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const DevButton: React.FC<DevButtonProps> = ({
+  label,
+  onClick,
+  disabled = false,
+  variant = "primary",
+  size = "medium",
+  className = "",
+  type = "button",
+}) => {
+  const baseStyles =
+    "rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+
+  const variantStyles = {
+    primary:
+      "bg-gradient-to-br from-blue-40 to-blue-70 hover:from-blue-50 hover:to-blue-90 text-white focus:ring-blue-50 shadow-sm hover:shadow-md",
+    secondary:
+      "bg-gray-20 hover:bg-gray-30 text-gray-80 focus:ring-gray-40 border border-gray-30",
+    text: "bg-transparent hover:bg-gray-10 text-blue-60 hover:text-blue-80 focus:ring-blue-30",
+  };
+
+  const sizeStyles = {
+    small: "px-4 py-2 text-sm",
+    medium: "px-5 py-2.5 text-base",
+    large: "px-6 py-3 text-lg",
+  };
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default DevButton;

package/src/components/DevCard.tsx

@@ -0,0 +1,25 @@
+/**
+ * DevCard.tsx
+ *
+ * Componente de tarjeta simple para componentes de desarrollo.
+ * Reemplaza EmptyCard de Aurora Web para eliminar dependencias.
+ */
+
+import React from "react";
+
+interface DevCardProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const DevCard: React.FC<DevCardProps> = ({ children, className = "" }) => {
+  return (
+    <div
+      className={`bg-white rounded-lg shadow-md border border-gray-20 ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DevCard;

package/src/components/DevWrapper.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from "react";
+import { RemoteWrapper, tokenStorage } from "max-remotes-helper";
+import TokenGenerator from "./TokenGenerator";
+import TokenInput from "./TokenInput";
+import FloatingTokenButton from "./FloatingTokenButton";
+
+interface DevWrapperProps {
+  children: React.ReactNode;
+}
+
+const DevWrapper: React.FC<DevWrapperProps> = ({ children }) => {
+  const [currentToken, setCurrentToken] = useState<string>("");
+  const [showTokenInput, setShowTokenInput] = useState<boolean>(false);
+  const [needsToken, setNeedsToken] = useState<boolean>(false);
+  const [showGenerator, setShowGenerator] = useState<boolean>(true);
+
+  // Detectar si estamos en desarrollo y sin host
+  const isDevEnvironment = process.env.REACT_APP_ENVIRONMENT === "dev";
+  const shouldShowTokenScreen = isDevEnvironment && !currentToken;
+
+  useEffect(() => {
+    const savedToken = tokenStorage.get();
+    if (savedToken) {
+      setCurrentToken(savedToken);
+      setNeedsToken(false);
+    } else if (shouldShowTokenScreen) {
+      setNeedsToken(true);
+    }
+  }, [shouldShowTokenScreen]);
+
+  const handleTokenSubmit = (token: string) => {
+    console.log("🔄 DevWrapper: Nuevo token generado", {
+      token: token.substring(0, 50) + "...",
+    });
+    setCurrentToken(token);
+    tokenStorage.save(token);
+    console.log("💾 DevWrapper: Token guardado en storage");
+    setShowTokenInput(false);
+    setNeedsToken(false);
+  };
+
+  const handleClearStorage = () => {
+    tokenStorage.clear();
+    setCurrentToken("");
+    setNeedsToken(shouldShowTokenScreen);
+  };
+
+  const toggleTokenInput = () => {
+    setShowTokenInput(!showTokenInput);
+  };
+
+  // Si estamos en desarrollo, sin host y sin token, mostrar pantalla de generación
+  if (needsToken) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+        <TokenGenerator
+          onSubmit={handleTokenSubmit}
+          onCancel={() => setNeedsToken(false)}
+          onClearStorage={handleClearStorage}
+          currentToken={currentToken}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Token Input/Generator Modal */}
+      {showTokenInput && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+            {/* Tabs para cambiar entre generador y input manual */}
+            <div className="flex border-b">
+              <button
+                onClick={() => setShowGenerator(true)}
+                className={`flex-1 py-3 px-4 text-sm font-medium ${
+                  showGenerator
+                    ? "bg-blue-50 "
+                    : "bg-gray-10 text-gray-70 hover:bg-gray-20"
+                }`}
+              >
+                Generar Token
+              </button>
+              <button
+                onClick={() => setShowGenerator(false)}
+                className={`flex-1 py-3 px-4 text-sm font-medium ${
+                  !showGenerator
+                    ? "bg-blue-50 text-gray-50"
+                    : "bg-gray-10 text-gray-70 hover:bg-gray-20"
+                }`}
+              >
+                Input Manual
+              </button>
+            </div>
+
+            <div className="p-0">
+              {showGenerator ? (
+                <TokenGenerator
+                  onSubmit={handleTokenSubmit}
+                  onCancel={() => setShowTokenInput(false)}
+                  onClearStorage={handleClearStorage}
+                  currentToken={currentToken}
+                />
+              ) : (
+                <div className="p-6">
+                  <TokenInput
+                    onSubmit={handleTokenSubmit}
+                    onCancel={() => setShowTokenInput(false)}
+                    onClearStorage={handleClearStorage}
+                    currentToken={currentToken}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Floating Token Button */}
+      <FloatingTokenButton onClick={toggleTokenInput} />
+
+      {/* Main Content wrapped with RemoteWrapper */}
+      <RemoteWrapper token={currentToken}>{children}</RemoteWrapper>
+    </div>
+  );
+};
+
+export default DevWrapper;

package/src/components/FloatingTokenButton.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+interface FloatingTokenButtonProps {
+  onClick: () => void;
+}
+
+const FloatingTokenButton: React.FC<FloatingTokenButtonProps> = ({
+  onClick,
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className="fixed bottom-6 right-6 bg-gradient-to-br from-blue-40 to-blue-70 hover:from-blue-50 hover:to-blue-90 text-white p-4 rounded-full shadow-dropdown hover:shadow-2xl transition-all duration-300 z-50 group transform hover:scale-110"
+      title="Recargar Token"
+    >
+      <svg
+        className="w-5 h-5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+        />
+      </svg>
+      <span className="absolute bottom-full right-0 mb-3 px-3 py-1 text-xs text-white bg-gray-90/90 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap backdrop-blur-sm">
+        {"Recargar Token"}
+      </span>
+    </button>
+  );
+};
+
+export default FloatingTokenButton;

package/src/components/RemoteWrapper.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { RemoteAuthProvider } from '../context/RemoteAuthContext';
-import { AuthProviderProps } from '../types';
+import React from "react";
+import { RemoteAuthProvider } from "../context/RemoteAuthContext";
+import { AuthProviderProps } from "../types";
 
 /**
  * Wrapper component that provides authentication context to remote components
@@ -9,14 +9,10 @@ import { AuthProviderProps } from '../types';
 export const RemoteWrapper: React.FC<AuthProviderProps> = ({
   children,
   token,
-  apiBaseUrl,
-  module,
 }) => {
   return (
     <RemoteAuthProvider initialToken={token}>
-      <div data-remote-module={module} data-api-base={apiBaseUrl}>
-        {children}
-      </div>
+      <div>{children}</div>
     </RemoteAuthProvider>
   );
-};
+};

package/src/components/TokenGenerator.tsx

@@ -0,0 +1,227 @@
+import React, { useState } from "react";
+
+import DevCard from "./DevCard";
+import DevButton from "./DevButton";
+
+interface TokenGeneratorProps {
+  onSubmit: (token: string) => void;
+  onCancel: () => void;
+  onClearStorage: () => void;
+  currentToken?: string;
+  jsonExample?: string;
+  defaultDevRoles?: string[];
+}
+
+interface TokenPayload {
+  user: string;
+  roles: string[];
+  channel: string;
+  sessionId: string;
+}
+
+const TokenGenerator: React.FC<TokenGeneratorProps> = ({
+  onSubmit,
+  onCancel,
+  onClearStorage,
+  defaultDevRoles = [],
+  currentToken = "",
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>("");
+
+  // Estado del formulario
+  const [formData, setFormData] = useState<TokenPayload>({
+    user: "usuario@bdsol.com.ar",
+    roles: defaultDevRoles,
+    channel: "mf-testing",
+    sessionId: crypto.randomUUID(),
+  });
+
+  const [rolesText, setRolesText] = useState(defaultDevRoles.join("\n"));
+
+  const generateToken = async () => {
+    setLoading(true);
+    setError("");
+    onClearStorage();
+    try {
+      // Parsear roles del textarea
+      const roles = rolesText
+        .split("\n")
+        .map((role) => role.trim())
+        .filter((role) => role.length > 0);
+
+      const payload = {
+        ...formData,
+        roles,
+      };
+
+      const bffUrl = process.env.REACT_APP_API_URL || "http://localhost:3020";
+      const response = await fetch(
+        `${bffUrl}/template/api/dev/generate-token`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        },
+      );
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Error al generar token");
+      }
+
+      const data = await response.json();
+      onSubmit(data.token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Error desconocido");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInputChange = (field: keyof TokenPayload, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const generateNewSessionId = () => {
+    setFormData((prev) => ({
+      ...prev,
+      sessionId: crypto.randomUUID(),
+    }));
+  };
+
+  const handleClearStorageClick = () => {
+    onClearStorage();
+    alert("SessionStorage limpiado correctamente");
+  };
+
+  return (
+    <div className="p-6 w-full overflow-y-auto">
+      <DevCard className="p-6">
+        <>
+          <h2 className="text-2xl font-bold text-gray-80 mb-4">
+            🔧 Generador de Tokens (Desarrollo)
+          </h2>
+          <p className="text-gray-60 mb-6">
+            Genera un token JWT para desarrollo usando el BFF. Solo disponible
+            cuando ENVIRONMENT=dev.
+          </p>
+          {error && (
+            <div className="mb-4 p-3 bg-red-10 border border-red-40 text-red-70 rounded">
+              {error}
+            </div>
+          )}
+          <div className="space-y-4 mb-6">
+            {/* Email */}
+            <div>
+              <label className="block text-sm font-medium text-gray-70 mb-1">
+                Email del usuario
+              </label>
+              <input
+                type="email"
+                value={formData.user}
+                onChange={(e) => handleInputChange("user", e.target.value)}
+                className="w-full p-2 border border-gray-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-50"
+                placeholder="usuario@bdsol.com.ar"
+              />
+            </div>
+
+            {/* Roles */}
+            <div>
+              <label className="block text-sm font-medium text-gray-70 mb-1">
+                Roles (uno por línea)
+              </label>
+              <textarea
+                value={rolesText}
+                onChange={(e) => setRolesText(e.target.value)}
+                className="w-full h-32 p-2 border border-gray-30 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-50"
+                placeholder={defaultDevRoles.join("&#10;")}
+              />
+              <p className="text-xs text-gray-50 mt-1">
+                Roles definidos en src/config/roles.ts
+              </p>
+            </div>
+
+            {/* Channel */}
+            <div>
+              <label className="block text-sm font-medium text-gray-70 mb-1">
+                Channel
+              </label>
+              <input
+                type="text"
+                value={formData.channel}
+                onChange={(e) => handleInputChange("channel", e.target.value)}
+                className="w-full p-2 border border-gray-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-50"
+                placeholder="mf-testing"
+              />
+            </div>
+
+            {/* Session ID */}
+            <div>
+              <label className="block text-sm font-medium text-gray-70 mb-1">
+                Session ID
+              </label>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={formData.sessionId}
+                  onChange={(e) =>
+                    handleInputChange("sessionId", e.target.value)
+                  }
+                  className="flex-1 p-2 border border-gray-30 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-50"
+                  placeholder="uuid-session-id"
+                />
+                <DevButton
+                  label="🎲"
+                  variant="primary"
+                  size="small"
+                  onClick={generateNewSessionId}
+                  className="px-3"
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-3 flex-wrap mb-4">
+            <DevButton
+              label={loading ? "Generando..." : "🚀 Generar Token"}
+              variant="primary"
+              size="small"
+              onClick={generateToken}
+              disabled={loading || !formData.user.trim()}
+            />
+            <DevButton
+              label="Limpiar almacenamiento"
+              variant="primary"
+              size="small"
+              onClick={handleClearStorageClick}
+            />
+            <DevButton
+              label="Cancelar"
+              size="small"
+              variant="secondary"
+              onClick={onCancel}
+            />
+          </div>
+          {/* Información del token actual */}
+          {currentToken && (
+            <div className="mt-4 p-4 bg-green-50 rounded-lg">
+              <h3 className="font-semibold text-green-70 mb-2">
+                ✅ Token cargado
+              </h3>
+              <p className="text-sm text-green-60">
+                Tienes un token activo en el almacenamiento local.
+              </p>
+            </div>
+          )}{" "}
+        </>
+      </DevCard>
+    </div>
+  );
+};
+
+export default TokenGenerator;

package/src/components/TokenInput.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import DevButton from "./DevButton";
+
+interface TokenInputProps {
+  onSubmit: (token: string) => void;
+  onCancel: () => void;
+  onClearStorage: () => void;
+  currentToken?: string;
+}
+
+const TokenInput: React.FC<TokenInputProps> = ({
+  onSubmit,
+  onCancel,
+  onClearStorage,
+  currentToken = "",
+}) => {
+  const [token, setToken] = useState(currentToken);
+  const [isValidJson, setIsValidJson] = useState(true);
+
+  const validateAndSubmit = () => {
+    try {
+      JSON.parse(token);
+      setIsValidJson(true);
+      onSubmit(token);
+    } catch (error) {
+      setIsValidJson(false);
+    }
+  };
+
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setToken(value);
+
+    // Reset validation state when user starts typing
+    if (!isValidJson) {
+      setIsValidJson(true);
+    }
+  };
+
+  const handleClearStorageClick = () => {
+    onClearStorage();
+    setToken("");
+    alert("SessionStorage limpiado correctamente");
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-2xl">
+      <h2 className="text-2xl font-bold text-gray-80 mb-4">
+        Modo Desarrollo - Cargar Token JWT
+      </h2>
+      <p className="text-gray-60 mb-6">
+        Ingresa el token JWT decodificado (JSON) que normalmente recibiría desde
+        el host:
+      </p>
+
+      <div className="mb-4">
+        <textarea
+          value={token}
+          onChange={handleTextareaChange}
+          placeholder="Pegue aquí el token JWT en formato JSON"
+          className={`w-full h-40 p-3 border rounded-lg font-mono text-sm ${
+            !isValidJson ? "border-red-50" : "border-gray-30"
+          } focus:outline-none focus:ring-2 focus:ring-blue-50`}
+        />
+        {!isValidJson && (
+          <p className="text-red-50 text-sm mt-2">
+            El JSON no es válido. Por favor verifica la sintaxis.
+          </p>
+        )}
+      </div>
+
+      <div className="flex gap-3 flex-wrap">
+        <DevButton
+          label="Cargar Token"
+          variant="primary"
+          size="small"
+          onClick={validateAndSubmit}
+          disabled={!token.trim()}
+        />
+        <DevButton
+          label="Limpiar"
+          size="small"
+          variant="text"
+          onClick={() => setToken("")}
+        />
+        <DevButton
+          label="Limpiar Storage"
+          variant="primary"
+          size="small"
+          onClick={handleClearStorageClick}
+        />
+        <DevButton
+          label="Cancelar"
+          variant="secondary"
+          size="small"
+          onClick={onCancel}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TokenInput;

package/src/context/RemoteAuthContext.tsx

@@ -86,25 +86,39 @@ export const RemoteAuthProvider: React.FC<RemoteAuthProviderProps> = ({
   initialToken,
 }) => {
   const [state, dispatch] = useReducer(authReducer, initialState);
+  const isDev = process.env.REACT_APP_ENVIRONMENT === "dev";
+  const log = isDev ? console.log : () => {};
 
   // Initialize with token from storage or props
   useEffect(() => {
+    log("🔍 RemoteAuthContext: useEffect triggered", {
+      initialToken: initialToken
+        ? initialToken.substring(0, 30) + "..."
+        : "No initialToken",
+    });
+
     // Prioritize the prop token over stored token when initialToken is provided
     if (initialToken) {
+      log("✅ RemoteAuthContext: Using initialToken from prop");
       if (!isTokenExpired(initialToken)) {
+        log("🟢 RemoteAuthContext: Token is valid, dispatching SET_TOKEN");
         dispatch({ type: "SET_TOKEN", payload: initialToken });
         tokenStorage.save(initialToken); // Also update storage
       } else {
+        log("🔴 RemoteAuthContext: Provided token is expired, clearing auth");
         // If provided token is expired, clear it
         tokenStorage.remove();
         dispatch({ type: "CLEAR_AUTH" });
       }
     } else {
+      log("⚪ RemoteAuthContext: No initialToken, checking stored token");
       // Fallback to stored token when no initialToken prop
       const storedToken = tokenStorage.get();
       if (storedToken && !isTokenExpired(storedToken)) {
+        log("💾 RemoteAuthContext: Using stored token");
         dispatch({ type: "SET_TOKEN", payload: storedToken });
       } else if (storedToken) {
+        log("🗑️ RemoteAuthContext: Stored token expired, clearing");
         // Remove expired stored token
         tokenStorage.remove();
         dispatch({ type: "CLEAR_AUTH" });

package/src/index.ts

@@ -1,29 +1,30 @@
 // Main entry point for bo-remotes-helper
 
 // Context and Providers
-export { RemoteAuthProvider, useRemoteAuth } from './context/RemoteAuthContext';
+export { RemoteAuthProvider, useRemoteAuth } from "./context/RemoteAuthContext";
 
 // Components
-export { Secured } from './components/Secured';
-export { RemoteWrapper } from './components/RemoteWrapper';
+export { Secured } from "./components/Secured";
+export { RemoteWrapper } from "./components/RemoteWrapper";
+export { default as DevWrapper } from "./components/DevWrapper";
 
 // Hooks
-export { useRemoteConfig } from './hooks/useRemoteConfig';
+export { useRemoteConfig } from "./hooks/useRemoteConfig";
 
 // Utils
-export { 
-  decodeToken, 
-  isTokenExpired, 
-  extractPermissions, 
-  tokenStorage 
-} from './utils/tokenUtils';
+export {
+  decodeToken,
+  isTokenExpired,
+  extractPermissions,
+  tokenStorage,
+} from "./utils/tokenUtils";
 
-export { 
-  loadRemoteModule, 
-  isRemoteAvailable, 
-  createRemoteComponentLoader, 
-  getRemoteEnvironment 
-} from './utils/moduleUtils';
+export {
+  loadRemoteModule,
+  isRemoteAvailable,
+  createRemoteComponentLoader,
+  getRemoteEnvironment,
+} from "./utils/moduleUtils";
 
 // Types
 export type {
@@ -34,4 +35,4 @@ export type {
   TokenInfo,
   RemoteConfig,
   SharedDependencies,
-} from './types';
+} from "./types";