reqwise-react 1.1.4 → 1.2.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> reqwise-react@1.1.3 build C:\Users\PC\Desktop\Code\reqwise\packages\react
+> reqwise-react@1.2.1 build C:\Users\PC\Desktop\Code\reqwise\packages\react
 > tsup
 
 CLI Building entry: src/index.ts
@@ -12,7 +12,7 @@
 ESM Build start
 ESM dist\index.mjs     2.96 KB
 ESM dist\index.mjs.map 5.45 KB
-ESM ⚡️ Build success in 11ms
+ESM ⚡️ Build success in 10ms
 CJS dist\index.js     4.92 KB
 CJS dist\index.js.map 5.62 KB
 CJS ⚡️ Build success in 11ms

package/README.md

@@ -4,7 +4,7 @@
 
 It operates like a mini **Postman** or **Chrome DevTools Network** panel embedded directly inside your React app. Through a floating aside panel, developers can inspect requests in real-time, browse page history, analyze API endpoints, and send manual test requests with a single click.
 
-**Version:** 1.1.3 | **Status:** Production Ready | **React:** 17+
+**Version:** 1.2.1 | **Status:** Production Ready | **React:** 17+
 
 ---
 
@@ -18,6 +18,7 @@ It operates like a mini **Postman** or **Chrome DevTools Network** panel embedde
 
 ### 💾 Smart Persistence
 - **localStorage Integration:** Stores all request history under `reqwise_history_v1` key
+- **In-Memory Mode:** Optional in-memory storage without localStorage pollution (for restricted environments)
 - **Auto-Cleanup:** Configurable `maxItems` limit with oldest-first eviction strategy
 - **TTL Support:** Automatic deletion of entries older than configurable `historyTTL` (in days)
 
@@ -39,17 +40,20 @@ It operates like a mini **Postman** or **Chrome DevTools Network** panel embedde
 ### 🎨 UI & UX Enhancements
 - **4 Tabbed Interface:**
   - **Current Tab:** Requests from current page
-  - **History Tab:** All captured requests with filtering (method, status, page)
+  - **History Tab:** All captured requests with filtering (method, status, page, source)
   - **Send Tab:** Mini HTTP client — compose and send test requests
-  - **Endpoints Tab:** Auto-discovered API endpoints with statistics
-- **Placement Flexibility:** 4 positions (top, right, bottom, left)
-- **Theme Support:** Dark, Light, and System themes
-- **Responsive Sizing:** 4 size presets (sm, md, lg, full)
-- **Opacity Control:** Configurable opacity (0.0–1.0)
+  - **Endpoints Tab:** Auto-discovered API endpoints with statistics (hit count, methods, params, examples)
+- **Placement Flexibility:** 4 positions (top, right, bottom, left) — sidebars or drawers
+- **Theme Support:** Dark, Light, and System (prefers-color-scheme) themes
+- **Responsive Sizing:** 4 size presets (sm: 320px, md: 420px, lg: 560px, full: 100%)
+- **Opacity Control:** Semi-transparent panels with configurable opacity (0.0–1.0) and backdrop blur
+- **Request Cards:** Compact view (method + URL + status + duration) or detailed view with collapsible sections
 
 ### 🔍 Filtering & Search
 - **Method Filter:** GET, POST, PUT, PATCH, DELETE
 - **Status Filter:** All, Success (2xx), Client Errors (4xx), Server Errors (5xx)
+- **Page Filter:** View requests by page (useful in SPAs)
+- **Source Filter:** Auto-captured vs. manual (Send tab) requests
 - **URL Search:** Text filter by URL patterns
 
 ### 📊 Endpoint Intelligence
@@ -195,6 +199,110 @@ export default function App() {
 
 ---
 
+## 🚀 Architecture Flow
+
+Reqwise acts as a transparent interceptor layer:
+
+```
+React Application
+    ↓
+ReqwiseDevTools Component (mounts Reqwise)
+    ↓
+[Capture request metadata via Axios interceptor]
+    ↓
+axios.post(...)
+    ↓
+Backend API
+    ↓
+Response received
+    ↓
+[Record response, status, duration]
+    ↓
+[Dispatch reqwise:update event]
+    ↓
+[Panel re-renders with new entry]
+    ↓
+[Save to localStorage]
+    ↓
+Application receives response
+```
+
+### Data Lifecycle
+1. **Request Started** → captured metadata (method, URL, headers, body)
+2. **HTTP Executed** → Axios sends actual request
+3. **Response Received** → status, headers, body captured
+4. **Callbacks Fired** → `onRequest` → storage → `onResponse/onError`
+5. **UI Updated** → panel detects new entry via custom event
+6. **Persistence** → `localStorage.setItem('reqwise_history_v1', ...)`
+
+---
+
+## 💻 TypeScript Data Models
+
+### ReqwiseEntry
+```typescript
+interface ReqwiseEntry {
+  id: string                           // Unique ID (auto-generated)
+  source: "auto" | "manual"            // auto: captured, manual: Send tab
+  page: string                         // window.location.href at capture time
+  timestamp: string                    // ISO 8601 timestamp
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE"
+  url: string                          // Full URL or relative path
+  params?: Record<string, unknown>     // Query parameters
+  requestHeaders?: Record<string, string>
+  requestBody?: unknown                // JSON or FormData
+  status?: number                      // HTTP status (200, 404, 500, etc.)
+  statusText?: string                  // Status text ("OK", "Not Found", etc.)
+  responseHeaders?: Record<string, string>
+  responseBody?: unknown               // Response JSON/text
+  duration?: number                    // Round-trip time in milliseconds
+  error?: { message: string; stack?: string }
+}
+```
+
+### ReqwiseConfig
+```typescript
+interface ReqwiseConfig {
+  // UI & Display
+  theme?: "light" | "dark" | "system"              // default: "system"
+  placement?: "top" | "right" | "bottom" | "left"  // default: "right"
+  defaultOpen?: boolean                            // default: false
+  show?: "general" | "detailed"                    // default: "general"
+  size?: "sm" | "md" | "lg" | "full"              // default: "md"
+  opacity?: number                                 // 0.0-1.0, default: 1.0
+
+  // Control
+  enabled?: boolean                                // default: true
+  hotkey?: string                                  // default: "ctrl+shift+e"
+  axiosInstance?: unknown                          // Axios instance to monitor
+
+  // Storage
+  persistHistory?: boolean                         // default: true
+  maxItems?: number                                // default: 200
+  historyTTL?: number                             // TTL in days, default: undefined (no expiry)
+
+  // Filtering
+  ignore?: string[]                                // default: []
+  maskHeaders?: string[]                           // default: []
+  maskFields?: string[]                            // default: []
+
+  // i18n
+  langs?: SupportedLang[]                         // default: ["en"]
+  defaultLang?: SupportedLang                     // Auto-detected from browser
+
+  // Callbacks
+  onRequest?: (entry: Partial<ReqwiseEntry>) => void
+  onResponse?: (entry: ReqwiseEntry) => void
+  onError?: (entry: ReqwiseEntry) => void
+
+  // UX
+  groupBy?: "url" | "method" | "status" | "page"
+  highlight?: "error" | "slow" | "none"           // default: "error"
+}
+```
+
+---
+
 ## 🎯 Use Cases
 
 ### 1. Development Debugging
@@ -301,6 +409,192 @@ export function App() {
 
 ---
 
+## ⚙️ Core Modules (via reqwise-core)
+
+### `client.ts` — HTTP Interception Engine
+- `initClient(config)` — Initialize with configuration
+- `recordPartial(entry)` — Record partial entry (request or response)
+- `wrapAxios(instance)` — Setup Axios interceptors
+- `get/post/put/patch/delete(url, data?, config?)` — HTTP methods with fallback to fetch
+
+### `storage.ts` — Persistent & In-Memory Storage
+- `initStorage(config)` — Setup storage backend
+- `saveEntry(entry)` — Save entry to memory and localStorage (if enabled)
+- `getEntries()` — Retrieve all entries (newest first)
+- `subscribe(callback)` — Listen for storage changes
+- TTL enforcement — auto-delete entries older than `historyTTL` days
+- Limit enforcement — keep only latest `maxItems` entries
+
+### `filter.ts` — Security & Pattern Matching
+- `shouldIgnore(url)` — Check if URL matches ignore patterns
+- `maskHeaders(headers)` — Redact sensitive headers with `****`
+- `maskFields(obj)` — Recursively redact nested object fields
+- Pattern matching — supports regex and substring matching
+
+### `panel.ts` — DOM & Hotkey Management
+- `mount(config)` — Inject panel into document.body
+- `unmount()` — Remove panel and clean up event listeners
+- `open()` / `close()` / `toggle()` — Panel state management
+- Hotkey listener — parse and bind keyboard shortcut
+- Placement handling — position panel relative to viewport
+- Theme application — data-theme attribute for CSS scoping
+
+### `renderer.ts` — Tab System & UI Rendering
+- `renderTabs()` — Render and switch between 4 tabs
+- `renderCurrent()` — Show requests from current page
+- `renderHistory()` — Show all requests with filters
+- `renderSendRequest()` — Mini HTTP client form
+- `renderEndpoints()` — API endpoint analytics
+- Event listeners — "Send" button, tab switching, form submission
+
+### `i18n.ts` — Translation Catalog
+- `t(key, lang)` — Get translated string
+- `setLanguage(lang)` — Update active language
+- `getLanguage()` — Get current language
+- **Supported languages:** en, tr, az, ru, de, fr, es, pt, zh, ja, ar, ko, it, pl, nl
+
+---
+
+## 🔌 API Reference (React Component)
+
+### ReqwiseDevTools Props
+```typescript
+interface ReqwiseDevToolsProps {
+  axiosInstance: AxiosInstance        // Axios instance to monitor
+  enabled?: boolean                   // Enable/disable panel (default: true)
+  placement?: Placement               // Panel position (default: "right")
+  defaultOpen?: boolean               // Open on mount (default: false)
+  theme?: Theme                       // Color theme (default: "system")
+  hotkey?: string                     // Keyboard shortcut (default: "ctrl+shift+e")
+  show?: "general" | "detailed"       // Request card detail (default: "general")
+  size?: "sm" | "md" | "lg" | "full" // Panel size (default: "md")
+  opacity?: number                    // Panel opacity 0-1 (default: 1)
+  maxItems?: number                   // Max requests to store (default: 200)
+  persistHistory?: boolean            // Save to localStorage (default: true)
+  ignore?: string[]                   // URL patterns to ignore (default: [])
+  maskHeaders?: string[]              // Headers to mask (default: [])
+  maskFields?: string[]               // JSON fields to mask (default: [])
+  groupBy?: "url" | "method" | "status" | "page" // Group requests by
+  highlight?: "error" | "slow" | "none"          // Highlight type (default: "error")
+  langs?: string[]                    // Supported languages (default: ["en"])
+  defaultLang?: string                // Initial language (default: auto-detect)
+  onRequest?: (entry: Partial<ReqwiseEntry>) => void
+  onResponse?: (entry: ReqwiseEntry) => void
+  onError?: (entry: ReqwiseEntry) => void
+}
+```
+
+### Storage API Methods
+```typescript
+// Available from reqwise-core → storage module
+storage.initStorage(config?)
+storage.saveEntry(entry)
+storage.getEntries() // returns all entries
+storage.subscribe(callback) // listen for changes
+```
+
+### Panel Control Methods
+```typescript
+// Available from reqwise-core → panel module
+panel.open()
+panel.close()
+panel.toggle()
+panel.isMounted()
+panel.isOpen()
+```
+
+### i18n Methods
+```typescript
+// Available from reqwise-core → i18n module
+i18n.t(key, lang?) // Get translation
+i18n.setLanguage(lang) // Set active language
+i18n.getLanguage() // Get current language
+```
+
+---
+
+## 🌐 Supported Languages
+
+| Code | Language | Code | Language |
+|------|----------|------|----------|
+| en   | English | tr   | Türkçe (Turkish) |
+| az   | Azərbaycanca | ru   | Русский (Russian) |
+| de   | Deutsch | fr   | Français |
+| es   | Español | pt   | Português |
+| zh   | 中文 (Chinese) | ja   | 日本語 (Japanese) |
+| ar   | العربية (Arabic) | ko   | 한국어 (Korean) |
+| it   | Italiano | pl   | Polski |
+| nl   | Nederlands |
+
+---
+
+## 📊 Browser & Environment Support
+
+- **Node.js:** 14+ (for SSR checks, no DOM operations)
+- **Browsers:** Chrome, Firefox, Safari, Edge (all modern versions)
+- **React:** 17+ (the ReqwiseDevTools component)
+- **Framework:** Works with any React version 17+
+
+---
+
+## 🚀 Performance Considerations
+
+- **Bundle Size:** ~8KB gzipped (React wrapper only; includes ~15KB core)
+- **Runtime Overhead:** <2ms per request (timing measurement)
+- **Memory Usage:** ~100KB for 200 entries (default limit)
+- **Storage:** ~50KB in localStorage for 200 typical entries
+- **No Memory Leaks:** Proper cleanup on component unmount
+- **Lazy Loading:** Core modules load dynamically when needed
+
+---
+
+## 📝 Changelog
+
+### v1.2.1 (Current)
+- Fixed npm registry compatibility: replaced workspace:^ with explicit version for reqwise-core dependency
+
+### v1.2.0
+- Fixed scroll functionality in all tabs with proper flex layout constraints
+- Fixed panel sizing for top/bottom placements (100vw width)
+- Fixed toggle button positioning for all placement types (left, right, top, bottom)
+- Fixed panel transform directions on toggle for top/bottom placements
+- Added expand/collapse buttons for request/response content in Current tab
+- Fixed full-size panel button positioning (inside panel when open, outside when closed)
+- Comprehensive React README documentation with core package structure
+- Added Architecture Flow, TypeScript data models, and Core Modules documentation
+- Added API Reference and Supported Languages to React README
+- Performance Considerations and comprehensive feature documentation
+
+### v1.1.4
+- Updated React README with comprehensive documentation
+- Full API reference aligned with core package
+- Architecture flow diagrams
+- TypeScript data models documentation
+- Supported languages table
+
+### v1.1.3
+- Improved documentation with comprehensive examples
+- Enhanced TypeScript types and interfaces
+- Stable callback system (onRequest, onResponse, onError)
+- TTL support for automatic history cleanup
+- Better error handling and logging
+
+### v1.1.2
+- Added callback hooks (onRequest, onResponse, onError)
+- Introduced TTL (Time-To-Live) for history entries
+- Enhanced filtering capabilities
+- Improved renderer performance
+
+### v1.1.0
+- Introduced Endpoints tab with auto-discovery
+- Added size and opacity props
+- Improved UI responsiveness
+
+### v1.0.0
+- Initial React component release
+
+---
+
 ## 📚 Resources
 
 - [Reqwise Core](https://www.npmjs.com/package/reqwise-core) — Core package
@@ -314,4 +608,10 @@ MIT © Ali Zadeh
 
 ---
 
+## 🤝 Contributing
+
+Contributions are welcome! Since Reqwise React is a wrapper around reqwise-core, please refer to the [main repository](https://github.com) for contribution guidelines. Bug reports, feature requests, and pull requests are appreciated.
+
+---
+
 **Reqwise** makes debugging HTTP requests in React apps dramatically easier. Enjoy! 🎉

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reqwise-react",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "exports": {
@@ -11,6 +11,10 @@
     }
   },
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "type-check": "tsc -p tsconfig.json --noEmit"
+  },
   "peerDependencies": {
     "axios": ">=1.0.0",
     "react": ">=17.0.0"
@@ -21,16 +25,12 @@
     }
   },
   "dependencies": {
-    "reqwise-core": "^1.1.5"
+    "reqwise-core": "^1.2.1"
   },
   "devDependencies": {
     "@types/node": "^25.8.0",
     "@types/react": "^18.0.0",
     "typescript": "^5.0.0",
     "tsup": "^8.5.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "type-check": "tsc -p tsconfig.json --noEmit"
   }
-}
+}