@natykufsky/react-iframe 1.0.15

package/README.md

@@ -0,0 +1,85 @@
+
+# react-iframe
+
+A standalone React library to manage multi-instance IFrame workspaces with persistence, memory management, and cross-window communication.
+
+## Features
+- **Persistent DOM**: IFrames are cached (hidden), not unmounted.
+- **Hibernation**: Automatically unloads inactive tabs after a timeout to save memory.
+- **LRU Management**: Automatically closes least-recently-used tabs when maximum capacity is reached.
+- **Persistence**: Session recovery via LocalStorage.
+- **Bridge Support**: Easy communication between parent and IFrame.
+
+## Components
+
+### `TabProvider`
+Wrap your application with this provider.
+
+```tsx
+import { TabProvider } from '@natykufsky/react-iframe';
+
+function App() {
+  return (
+    <TabProvider persist={true} maxTabs={10}>
+      <Dashboard />
+    </TabProvider>
+  );
+}
+```
+
+### `TabList`
+The tab navigation bar.
+
+```tsx
+import { TabList } from '@natykufsky/react-iframe';
+import '@natykufsky/react-iframe/styles.css';
+
+// ... inside a component
+<TabList />
+```
+
+### `TabViews`
+The container for all iframes.
+
+```tsx
+import { TabViews } from '@natykufsky/react-iframe';
+
+// ... inside a component
+<TabViews hibernationMinutes={30} />
+```
+
+## Hook: `useTabs`
+
+```tsx
+const { addTab, removeTab, focusTab, tabs, activeTabId } = useTabs();
+
+const openPage = () => {
+  addTab({
+    id: 'user-profile',
+    title: 'User Profile',
+    url: '/admin/users/1/edit',
+    icon: 'user'
+  });
+};
+```
+
+## IFrame Bridge
+
+Include the bridge script in your child pages (e.g., in a Laravel layout):
+
+```html
+<script src="/path/to/ReFrameBridge.js"></script>
+<script>
+  // Close the current tab from inside the iframe
+  reFrame.close();
+  
+  // Set tab title
+  reFrame.setTitle('Editing User: Naty');
+</script>
+```
+
+In the React parent, use the `useIFrameBridge` hook:
+
+```tsx
+useIFrameBridge(); // Listens for postMessage events
+```

package/bridge/ReFrameBridge.js

@@ -0,0 +1,48 @@
+
+/**
+ * ReFrameBridge.js
+ * Include this script in your IFrame pages to communicate with the parent ReFrame container.
+ */
+(function() {
+    const ReFrame = {
+        getTabId: function() {
+            // Usually passed via URL params or set by the parent
+            const urlParams = new URLSearchParams(window.location.search);
+            return urlParams.get('reframe_id') || window.name;
+        },
+
+        postAction: function(action, payload = {}) {
+            const message = {
+                type: 'REFRAME_ACTION',
+                action: action,
+                payload: {
+                    id: this.getTabId(),
+                    ...payload
+                }
+            };
+            window.parent.postMessage(message, '*');
+        },
+
+        close: function() {
+            this.postAction('CLOSE_SELF');
+        },
+
+        setTitle: function(title) {
+            this.postAction('SET_TITLE', { title: title });
+            document.title = title;
+        },
+
+        notify: function(message, type = 'info') {
+            this.postAction('NOTIFICATION', { message: message, type: type });
+        },
+
+        navigate: function(url) {
+            this.postAction('NAVIGATE', { url: url });
+        }
+    };
+
+    window.reFrame = ReFrame;
+
+    // Auto-discovery: If title changes, maybe notify parent?
+    // MutationObserver could be used here to auto-sync title
+})();

package/dist/components/TabList.d.ts

@@ -0,0 +1,6 @@
+import { Tab } from '../types';
+export declare function TabItem({ tab, isActive }: {
+    tab: Tab;
+    isActive: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TabList(): import("react/jsx-runtime").JSX.Element;

package/dist/components/TabView.d.ts

@@ -0,0 +1,17 @@
+interface TabViewProps {
+    id: string;
+    url: string;
+    isActive: boolean;
+    isHibernated: boolean;
+    onLoad?: () => void;
+}
+export declare function LoadingOverlay(): import("react/jsx-runtime").JSX.Element;
+export declare function HibernationPlaceholder({ onWake, title }: {
+    onWake: () => void;
+    title: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TabView({ id, url, isActive, isHibernated, title, wakeTab }: TabViewProps & {
+    title: string;
+    wakeTab: (id: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TabViews.d.ts

@@ -0,0 +1,5 @@
+interface TabViewsProps {
+    hibernationMinutes?: number;
+}
+export declare function TabViews({ hibernationMinutes }: TabViewsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/context/TabProvider.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { ReFrameState, ReFrameAction, Tab } from '../types';
+interface ReFrameContextType {
+    state: ReFrameState;
+    dispatch: React.Dispatch<ReFrameAction>;
+    addTab: (tab: Omit<Tab, 'lastAccessed' | 'isHibernated'>) => void;
+    removeTab: (id: string) => void;
+    focusTab: (id: string) => void;
+    closeOthers: (id: string) => void;
+}
+interface ProviderProps {
+    children: ReactNode;
+    persist?: boolean;
+    maxTabs?: number;
+}
+export declare function ReFrameProvider({ children, persist, maxTabs }: ProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useReFrame: () => ReFrameContextType;
+export {};

package/dist/context/reducer.d.ts

@@ -0,0 +1,2 @@
+import { ReFrameAction, ReFrameState } from '../types';
+export declare const reFrameReducer: (state: ReFrameState, action: ReFrameAction) => ReFrameState;

package/dist/hooks/useIFrameBridge.d.ts

@@ -0,0 +1 @@
+export declare const useIFrameBridge: () => null;

package/dist/hooks/useTabs.d.ts

@@ -0,0 +1,12 @@
+import { Tab } from '../types';
+export declare const useTabs: () => {
+    tabs: Tab[];
+    activeTab: Tab | undefined;
+    activeTabId: string | null;
+    addTab: (tab: Omit<Tab, "lastAccessed" | "isHibernated">) => void;
+    removeTab: (id: string) => void;
+    focusTab: (id: string) => void;
+    closeOthers: (id: string) => void;
+    updateTab: (id: string, updates: Partial<Tab>) => void;
+    reorderTabs: (sourceIndex: number, destinationIndex: number) => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from './context/TabProvider';
+export * from './components/TabList';
+export * from './components/TabView';
+export * from './components/TabViews';
+export * from './hooks/useTabs';
+export * from './hooks/useIFrameBridge';
+export * from './types';