react-native-inapp-inspector 1.1.12 → 1.1.13

package/dist/esm/components/JsonViewer.js

@@ -1,16 +1,301 @@
-import React from 'react';
-import { ScrollView, View } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { ScrollView, View, Text, StyleSheet, Platform } from 'react-native';
+import Svg, { Path, Rect } from 'react-native-svg';
 // Components
 import TreeNode from './TreeNode';
-// Stylesheet
+import TouchableScale from './TouchableScale';
+// Helpers
+import { copyToClipboard } from '../helpers';
+// Styles
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
-const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, }) => {
-    const tree = (<TreeNode data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
-    if (wrap) {
-        return <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>;
+// ── Tab Icons ────────────────────────────────────────────────────────────────
+const PrettyIcon = ({ color = '#94A3B8', size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Path d="M5 3C3.9 3 3 3.9 3 5v1.5c0 .8-.7 1.5-1.5 1.5S0 7.3 0 6.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1zm6 0c-1.1 0-2 .9-2 2v1.5c0 .8-.7 1.5-1.5 1.5S6 9.3 6 8.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1z" fill={color} opacity={0.9}/>
+    <Path d="M3 11v1.5c0 .8.7 1.5 1.5 1.5S6 13.3 6 12.5V11H3zm7 0v1.5c0 .8.7 1.5 1.5 1.5S13 13.3 13 12.5V11H10z" fill={color} opacity={0.6}/>
+  </Svg>);
+const RawIcon = ({ color = '#94A3B8', size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Rect x="1" y="2" width="10" height="1.5" rx="0.75" fill={color} opacity={0.9}/>
+    <Rect x="1" y="5.5" width="14" height="1.5" rx="0.75" fill={color} opacity={0.6}/>
+    <Rect x="1" y="9" width="8" height="1.5" rx="0.75" fill={color} opacity={0.45}/>
+    <Rect x="1" y="12.5" width="12" height="1.5" rx="0.75" fill={color} opacity={0.3}/>
+  </Svg>);
+const TableIcon = ({ color = '#94A3B8', size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Rect x="1" y="1" width="14" height="14" rx="2" stroke={color} strokeWidth={1.2} opacity={0.7}/>
+    <Path d="M1 5.5h14M1 10h14M5.5 1v14M10.5 1v14" stroke={color} strokeWidth={0.8} opacity={0.5}/>
+  </Svg>);
+// ── JsonViewer Component ─────────────────────────────────────────────────────
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, onModeChange, }) => {
+    const [mode, setMode] = useState('pretty');
+    useEffect(() => {
+        onModeChange?.(mode);
+    }, [mode, onModeChange]);
+    // Determine type and size details
+    const isObject = typeof data === 'object' && data !== null;
+    const isArray = Array.isArray(data);
+    let typeLabel = typeof data;
+    let countLabel = '';
+    if (data === null) {
+        typeLabel = 'null';
+    }
+    else if (isArray) {
+        typeLabel = 'array';
+        countLabel = `${data.length} items`;
     }
-    return (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
-      <View style={styles.codeBlock}>{tree}</View>
-    </ScrollView>);
+    else if (isObject) {
+        typeLabel = 'object';
+        countLabel = `${Object.keys(data).length} keys`;
+    }
+    // Copy helper
+    const handleCopy = () => {
+        copyToClipboard(data, 'JSON data');
+    };
+    // Render Table view (Key-Value flat table for root keys)
+    const renderTableMode = () => {
+        if (!isObject) {
+            return (<View style={localStyles.tableRow}>
+          <Text style={localStyles.tableCellKey}>value</Text>
+          <Text style={localStyles.tableCellValue}>{String(data)}</Text>
+        </View>);
+        }
+        const keys = Object.keys(data);
+        if (keys.length === 0) {
+            return (<View style={localStyles.emptyTable}>
+          <Text style={localStyles.emptyTableText}>Empty Object</Text>
+        </View>);
+        }
+        return (<View style={localStyles.tableView}>
+        <View style={localStyles.tableHeaderRow}>
+          <Text style={[localStyles.tableHeaderCell, { flex: 2 }]}>Key</Text>
+          <Text style={[localStyles.tableHeaderCell, { flex: 3 }]}>Value</Text>
+        </View>
+        {keys.map((key) => {
+                const val = data[key];
+                let displayVal = '';
+                if (val === null) {
+                    displayVal = 'null';
+                }
+                else if (val === undefined) {
+                    displayVal = 'undefined';
+                }
+                else if (typeof val === 'object') {
+                    displayVal = Array.isArray(val) ? `[Array(${val.length})]` : '{Object}';
+                }
+                else {
+                    displayVal = String(val);
+                }
+                return (<View key={key} style={localStyles.tableRow}>
+              <Text style={[localStyles.tableCellKey, { flex: 2 }]}>{key}</Text>
+              <Text style={[localStyles.tableCellValue, { flex: 3 }]} numberOfLines={2}>
+                {displayVal}
+              </Text>
+            </View>);
+            })}
+      </View>);
+    };
+    // Tree View Content
+    const tree = (<TreeNode data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
+    return (<View style={[localStyles.container, fullHeight && { flex: 1 }]}>
+      {/* ── Top Toolbar Bar (Postman-style) ── */}
+      <View style={localStyles.toolbar}>
+        {/* Left Segmented Control */}
+        <View style={localStyles.segmentedControl}>
+          {[
+            { key: 'pretty', label: 'Pretty', icon: PrettyIcon },
+            { key: 'raw', label: 'Raw', icon: RawIcon },
+            { key: 'table', label: 'Table', icon: TableIcon },
+        ].map(({ key, label, icon: Icon }) => (<TouchableScale key={key} onPress={() => setMode(key)} style={[
+                localStyles.segButton,
+                mode === key && localStyles.segButtonActive,
+            ]}>
+              <Icon color={mode === key ? AppColors.purple : '#94A3B8'} size={12}/>
+              <Text style={[
+                localStyles.segText,
+                mode === key && localStyles.segTextActive,
+            ]}>
+                {label}
+              </Text>
+            </TouchableScale>))}
+        </View>
+
+        {/* Right Actions — badges & copy removed (caller provides header) */}
+
+      </View>
+
+      {/* ── Main View Content Area (Royal Monospace Theme) ── */}
+      <View style={[localStyles.contentWrapper, { backgroundColor: '#F8F9FB' }, fullHeight && { flex: 1, maxHeight: undefined }]}>
+        {mode === 'pretty' && (wrap ? (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
+                <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
+              </ScrollView>) : (<View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>)) : (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
+                <View style={styles.codeBlock}>{tree}</View>
+              </ScrollView>) : (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
+                <View style={styles.codeBlock}>{tree}</View>
+              </ScrollView>)))}
+
+        {mode === 'raw' && (fullHeight ? (<ScrollView style={localStyles.rawScroll} contentContainerStyle={localStyles.rawContent}>
+              <Text selectable={true} style={localStyles.rawMonospaceText}>
+                {JSON.stringify(data, null, 2)}
+              </Text>
+            </ScrollView>) : (<View style={localStyles.rawContent}>
+              <Text selectable={true} style={localStyles.rawMonospaceText}>
+                {JSON.stringify(data, null, 2)}
+              </Text>
+            </View>))}
+
+        {mode === 'table' && (fullHeight ? (<ScrollView style={localStyles.rawScroll}>
+              {renderTableMode()}
+            </ScrollView>) : (<View style={localStyles.rawScroll}>
+              {renderTableMode()}
+            </View>))}
+      </View>
+    </View>);
 };
+const localStyles = StyleSheet.create({
+    container: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 12,
+        borderWidth: 1.5,
+        borderColor: '#E2E8F0',
+        overflow: 'hidden',
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowRadius: 5,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+        width: '100%',
+    },
+    toolbar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: '#F8FAFC',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E2E8F0',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    segmentedControl: {
+        flexDirection: 'row',
+        backgroundColor: '#E2E8F0',
+        borderRadius: 8,
+        padding: 2,
+    },
+    segButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 6,
+    },
+    segButtonActive: {
+        backgroundColor: '#FFFFFF',
+        shadowColor: '#000',
+        shadowOpacity: 0.08,
+        shadowRadius: 2,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    segText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#64748B',
+        letterSpacing: 0.3,
+    },
+    segTextActive: {
+        color: AppColors.purple,
+    },
+    rightActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    badge: {
+        backgroundColor: 'rgba(104,75,155,0.06)',
+        borderWidth: 1,
+        borderColor: 'rgba(104,75,155,0.15)',
+        borderRadius: 5,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+    },
+    badgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors.purple,
+    },
+    copyButton: {
+        width: 24,
+        height: 24,
+        borderRadius: 6,
+        backgroundColor: 'rgba(104,75,155,0.08)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    contentWrapper: {
+        backgroundColor: '#FFFFFF',
+        minHeight: 120,
+        maxHeight: 480,
+    },
+    rawScroll: {
+        flex: 1,
+        backgroundColor: '#FAF9F6', // Royal off-white paper tone
+    },
+    rawContent: {
+        padding: 12,
+    },
+    rawMonospaceText: {
+        fontFamily: Platform.OS === 'ios' ? 'Courier New' : 'monospace',
+        fontSize: 11.5,
+        color: '#0F172A',
+        lineHeight: 16,
+    },
+    tableView: {
+        flex: 1,
+    },
+    tableHeaderRow: {
+        flexDirection: 'row',
+        backgroundColor: '#F1F5F9',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E2E8F0',
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+    },
+    tableHeaderCell: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#475569',
+        letterSpacing: 0.5,
+        textTransform: 'uppercase',
+    },
+    tableRow: {
+        flexDirection: 'row',
+        borderBottomWidth: 1,
+        borderBottomColor: '#F1F5F9',
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        alignItems: 'center',
+    },
+    tableCellKey: {
+        fontFamily: Platform.OS === 'ios' ? 'Courier-Bold' : 'monospace',
+        fontSize: 11.5,
+        fontWeight: 'bold',
+        color: '#0F172A',
+    },
+    tableCellValue: {
+        fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+        fontSize: 11.5,
+        color: '#475569',
+    },
+    emptyTable: {
+        padding: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyTableText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12,
+        color: '#94A3B8',
+    },
+});
 export default JsonViewer;

package/dist/esm/components/MetaAccordion.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
-import { MetaAccordionProps } from '../types';
+export interface MetaAccordionProps {
+    status: number | null | undefined;
+    statusColor: string;
+    duration: number | null | undefined;
+    size: string;
+    triggeredAt: string;
+    method: string;
+    contentType?: string;
+    url: string;
+}
 declare const MetaAccordion: ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }: MetaAccordionProps) => React.JSX.Element;
 export default MetaAccordion;

package/dist/esm/components/MetaAccordion.js

@@ -1,20 +1,59 @@
-import React from 'react';
-import { View, Pressable, Text, Animated, Linking } from 'react-native';
+import React, { useState } from 'react';
+import { View, Pressable, Text, Animated } from 'react-native';
 // Constants
 import { DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
 // Custom Hooks
 import useAccordion from '../customHooks/useAccordion';
 // Helpers
-import { getDurationColor } from '../helpers';
+import { getDurationColor, handleOpenExternalLink } from '../helpers';
 // Assets
 import { ChevronIcon, CalendarIcon, StatusIcon, ClockIcon, SizeIcon, TerminalIcon, GlobeIcon, } from './NetworkIcons';
+// Components
+import TouchableScale from './TouchableScale';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
-import styles from '../styles';
 import { AppFonts } from '../styles/AppFonts';
+import styles from '../styles';
 const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
+    const [urlExpanded, setUrlExpanded] = useState(false);
     const { toggleOpen, chevronStyle, bodyStyle } = useAccordion(true, 400, 390);
     const isFailed = status === 0 || status == null;
+    const renderFormattedUrl = (rawUrl) => {
+        if (!rawUrl)
+            return '—';
+        try {
+            const doubleSlashIndex = rawUrl.indexOf('//');
+            let temp = rawUrl;
+            let protocol = '';
+            if (doubleSlashIndex !== -1) {
+                protocol = rawUrl.substring(0, doubleSlashIndex + 2);
+                temp = rawUrl.substring(doubleSlashIndex + 2);
+            }
+            const slashIndex = temp.indexOf('/');
+            let host = temp;
+            let pathAndSearch = '';
+            if (slashIndex !== -1) {
+                host = temp.substring(0, slashIndex);
+                pathAndSearch = temp.substring(slashIndex);
+            }
+            const queryIndex = pathAndSearch.indexOf('?');
+            let pathname = pathAndSearch;
+            let search = '';
+            if (queryIndex !== -1) {
+                pathname = pathAndSearch.substring(0, queryIndex);
+                search = pathAndSearch.substring(queryIndex);
+            }
+            return (<Text style={{ lineHeight: 16 }}>
+          {protocol ? (<Text style={{ color: '#94A3B8', fontFamily: AppFonts.interRegular }}>{protocol}</Text>) : null}
+          <Text style={{ color: AppColors.purple, fontFamily: AppFonts.interBold }}>{host}</Text>
+          <Text style={{ color: '#334155', fontFamily: AppFonts.interMedium }}>{pathname}</Text>
+          {search ? (<Text style={{ color: '#0D9488', fontFamily: AppFonts.interRegular }}>{search}</Text>) : null}
+        </Text>);
+        }
+        catch {
+            return rawUrl;
+        }
+    };
     return (<View style={styles.metaContainer}>
       <Pressable onPress={toggleOpen} hitSlop={12}>
         <View style={styles.metaHeader}>
@@ -140,29 +179,54 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           </View>
           <View style={styles.metaDivider}/>
 
-          <View style={[styles.metaRow, { alignItems: 'flex-start' }]}>
-            <View style={styles.metaLabelRow}>
-              <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
-              <Text style={styles.metaLabel}>Full URL</Text>
+          <View style={[styles.metaRow, { alignItems: 'flex-start', flexDirection: 'column', gap: 6 }]}>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
+              <View style={styles.metaLabelRow}>
+                <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
+                <Text style={styles.metaLabel}>Full URL</Text>
+              </View>
+              
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                {url && url.length > 50 && (<TouchableScale onPress={() => setUrlExpanded(prev => !prev)} hitSlop={8}>
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors.purple,
+            }}>
+                      {urlExpanded ? 'Show Less' : 'Show More'}
+                    </Text>
+                  </TouchableScale>)}
+                
+                {url && (<TouchableScale onPress={() => handleOpenExternalLink(url)} hitSlop={8}>
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors.purple,
+                textDecorationLine: 'underline',
+            }}>
+                      Open
+                    </Text>
+                  </TouchableScale>)}
+              </View>
+            </View>
+            
+            <View style={{
+            backgroundColor: '#F8FAFC',
+            borderRadius: 8,
+            padding: 8,
+            borderWidth: 1.5,
+            borderColor: '#E2E8F0',
+            width: '100%',
+            marginTop: 2,
+        }}>
+              <Text selectable={true} numberOfLines={urlExpanded ? undefined : 2} ellipsizeMode="tail" style={{
+            fontSize: 11,
+            textAlign: 'left',
+            lineHeight: 16.5,
+        }}>
+                {renderFormattedUrl(url)}
+              </Text>
             </View>
-            <Text selectable={true} numberOfLines={3} ellipsizeMode="tail" onPress={() => {
-            if (url) {
-                Linking.openURL(url).catch(() => { });
-            }
-        }} style={[
-            styles.metaValue,
-            {
-                fontSize: 11.5,
-                color: url ? AppColors.purple : AppColors.grayTextWeak,
-                textDecorationLine: url ? 'underline' : 'none',
-                fontFamily: AppFonts.interMedium,
-                flex: 1,
-                textAlign: 'right',
-                lineHeight: 16,
-            },
-        ]}>
-              {url || '—'}
-            </Text>
           </View>
         </View>
       </Animated.View>

package/dist/esm/components/NetworkIcons.d.ts

@@ -50,3 +50,4 @@ export declare const WarningTriangleIcon: ({ color, size, }: any) => React.JSX.E
 export declare const ErrorCircleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TrendingUpIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MotionIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const SortIcon: ({ ascending, color, size, }: any) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -302,3 +302,9 @@ export const MotionIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
       <Path d="M5 3l14 9-14 9V3z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
+export const SortIcon = ({ ascending, color = AppColors.purple, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M12 4l-6 6h12z" fill={ascending ? color : AppColors.grayTextWeak}/>
+      <Path d="M12 20l6-6H6z" fill={!ascending ? color : AppColors.grayTextWeak}/>
+    </Svg>);
+};

package/dist/esm/components/ReduxTreeView.d.ts

@@ -1,7 +1,16 @@
 import React from 'react';
-export declare const ReduxStoreIcon: ({ color, size, }: any) => React.JSX.Element;
-export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
+export declare const ReduxTreeView: ({ state, actionHistory, lastActionMap, search, onSearchChange, autoRefresh, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey, onSelectSliceKey, selectedActionId, onSelectActionId, }: {
     state: any;
-    lastActionMap: Record<string, any>;
+    actionHistory?: any[];
+    lastActionMap?: Record<string, any>;
     search?: string;
+    onSearchChange?: (val: string) => void;
+    autoRefresh?: boolean;
+    onToggleAutoRefresh?: () => void;
+    onClearHistory?: () => void;
+    onDetailOpenChange?: (isOpen: boolean) => void;
+    selectedSliceKey?: string | null;
+    onSelectSliceKey?: (key: string | null) => void;
+    selectedActionId?: number | null;
+    onSelectActionId?: (id: number | null) => void;
 }) => React.JSX.Element;