react-native-inapp-inspector 2.0.7 → 2.1.0

package/dist/esm/components/Inspector/StorageTab.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const StorageTab: React.MemoExoticComponent<() => React.JSX.Element>;
-export default StorageTab;

package/dist/esm/components/Inspector/StorageTab.js

@@ -1,571 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { Alert, FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View, } from 'react-native';
-import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { formatBytes, copyToClipboard } from '../../helpers';
-import { showToast } from '../../helpers/toast';
-import { DatabaseIcon, SearchIcon, ClearIcon, TrashIcon, EditIcon, PlusIcon, CopyIcon, ResetIcon, KeyIcon, } from '../NetworkIcons';
-export const StorageTab = React.memo(() => {
-    const { storageEntries, refreshStorageEntries, updateStorageEntry, deleteStorageEntry, clearAllStorageEntries, } = useInspector();
-    const [search, setSearch] = useState('');
-    const [editingItem, setEditingItem] = useState(null);
-    const [editValue, setEditValue] = useState('');
-    const [isAddingNew, setIsAddingNew] = useState(false);
-    const [newKey, setNewKey] = useState('');
-    const [newValue, setNewValue] = useState('');
-    const [expandedKeys, setExpandedKeys] = useState(new Set());
-    const filteredEntries = useMemo(() => {
-        if (!search || search.trim().length === 0)
-            return storageEntries;
-        const term = search.toLowerCase().trim();
-        return storageEntries.filter(item => item.key.toLowerCase().includes(term) ||
-            item.value.toLowerCase().includes(term));
-    }, [storageEntries, search]);
-    const totalBytes = useMemo(() => storageEntries.reduce((acc, cur) => acc + (cur.sizeBytes || 0), 0), [storageEntries]);
-    const toggleExpand = (key) => {
-        setExpandedKeys(prev => {
-            const next = new Set(prev);
-            if (next.has(key)) {
-                next.delete(key);
-            }
-            else {
-                next.add(key);
-            }
-            return next;
-        });
-    };
-    const handleStartEdit = (item) => {
-        setEditingItem(item);
-        setEditValue(item.value);
-    };
-    const handleSaveEdit = async () => {
-        if (!editingItem)
-            return;
-        try {
-            await updateStorageEntry(editingItem.key, editValue);
-            showToast(`Updated "${editingItem.key}"`);
-            setEditingItem(null);
-        }
-        catch {
-            Alert.alert('Error', 'Failed to save value to storage.');
-        }
-    };
-    const handleCreateNew = async () => {
-        if (!newKey.trim()) {
-            Alert.alert('Invalid Key', 'Please enter a non-empty storage key.');
-            return;
-        }
-        try {
-            await updateStorageEntry(newKey.trim(), newValue);
-            showToast(`Saved key "${newKey.trim()}"`);
-            setIsAddingNew(false);
-            setNewKey('');
-            setNewValue('');
-        }
-        catch {
-            Alert.alert('Error', 'Failed to create storage item.');
-        }
-    };
-    const handleDelete = (key) => {
-        Alert.alert('Delete Storage Key', `Are you sure you want to delete "${key}"?`, [
-            { text: 'Cancel', style: 'cancel' },
-            {
-                text: 'Delete',
-                style: 'destructive',
-                onPress: async () => {
-                    await deleteStorageEntry(key);
-                    showToast(`Deleted "${key}"`);
-                },
-            },
-        ]);
-    };
-    const handleClearAll = () => {
-        Alert.alert('Clear All Storage', 'This will erase all saved keys and values in local storage. Are you sure?', [
-            { text: 'Cancel', style: 'cancel' },
-            {
-                text: 'Clear All',
-                style: 'destructive',
-                onPress: async () => {
-                    await clearAllStorageEntries();
-                    showToast('All storage cleared');
-                },
-            },
-        ]);
-    };
-    return (<View style={styles.container}>
-      {/* Top Metrics & Actions Header */}
-      <View style={styles.metricsBar}>
-        <View style={styles.metricsLeft}>
-          <View style={styles.metricItem}>
-            <DatabaseIcon size={13} color={AppColors.purple}/>
-            <Text style={styles.metricBold}>{storageEntries.length}</Text>
-            <Text style={styles.metricLabel}>Keys</Text>
-          </View>
-          <View style={styles.metricDivider}/>
-          <View style={styles.metricItem}>
-            <Text style={styles.metricBold}>{formatBytes(totalBytes)}</Text>
-            <Text style={styles.metricLabel}>Stored</Text>
-          </View>
-        </View>
-
-        <View style={styles.actionsRight}>
-          <TouchableScale onPress={refreshStorageEntries} hitSlop={8} style={styles.actionBtn}>
-            <ResetIcon size={14} color={AppColors.purple}/>
-          </TouchableScale>
-          <TouchableScale onPress={() => setIsAddingNew(true)} hitSlop={8} style={[styles.actionBtn, { backgroundColor: AppColors.purple }]}>
-            <PlusIcon size={14} color={AppColors.white}/>
-          </TouchableScale>
-          <TouchableScale onPress={handleClearAll} hitSlop={8} style={[styles.actionBtn, { borderColor: `${AppColors.errorColor}40` }]}>
-            <TrashIcon size={14} color={AppColors.errorColor}/>
-          </TouchableScale>
-        </View>
-      </View>
-
-      {/* Search Input */}
-      <View style={styles.searchRow}>
-        <View style={styles.searchBox}>
-          <SearchIcon size={14} color={AppColors.grayTextWeak}/>
-          <TextInput style={styles.searchInput} placeholder="Search storage key or value..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} autoCapitalize="none" autoCorrect={false}/>
-          {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={8}>
-              <ClearIcon size={14} color={AppColors.grayTextWeak}/>
-            </Pressable>)}
-        </View>
-      </View>
-
-      {/* Storage Entries List */}
-      <FlatList data={filteredEntries} keyExtractor={item => item.key} contentContainerStyle={styles.listContent} ListEmptyComponent={<View style={styles.emptyState}>
-            <DatabaseIcon size={36} color={AppColors.grayTextWeak}/>
-            <Text style={styles.emptyTitle}>No Storage Entries</Text>
-            <Text style={styles.emptySub}>
-              {search
-                ? `No keys matched "${search}"`
-                : 'No AsyncStorage or local key-value pairs stored yet.'}
-            </Text>
-          </View>} renderItem={({ item }) => {
-            const isExpanded = expandedKeys.has(item.key);
-            return (<View style={styles.card}>
-              {/* Card Header */}
-              <View style={styles.cardHeader}>
-                <View style={styles.keyRow}>
-                  <KeyIcon size={13} color={AppColors.purple}/>
-                  <Text style={styles.keyText} numberOfLines={1}>
-                    {item.key}
-                  </Text>
-                </View>
-
-                <View style={styles.badgeRow}>
-                  <View style={[
-                    styles.typeBadge,
-                    {
-                        backgroundColor: item.isJson
-                            ? `${AppColors.purple}18`
-                            : `${AppColors.emerald500}18`,
-                        borderColor: item.isJson
-                            ? `${AppColors.purple}40`
-                            : `${AppColors.emerald500}40`,
-                    },
-                ]}>
-                    <Text style={[
-                    styles.typeBadgeText,
-                    {
-                        color: item.isJson
-                            ? AppColors.purple
-                            : AppColors.emerald600,
-                    },
-                ]}>
-                      {item.isJson ? 'JSON' : 'STRING'}
-                    </Text>
-                  </View>
-                  <Text style={styles.sizeText}>
-                    {formatBytes(item.sizeBytes)}
-                  </Text>
-                </View>
-              </View>
-
-              {/* Value Box */}
-              <Pressable onPress={() => toggleExpand(item.key)} style={styles.valueContainer}>
-                <Text style={styles.valueText} numberOfLines={isExpanded ? undefined : 3}>
-                  {item.value}
-                </Text>
-              </Pressable>
-
-              {/* Card Actions */}
-              <View style={styles.cardFooter}>
-                <Text style={styles.footerHint}>
-                  {isExpanded ? 'Tap to collapse' : 'Tap to expand full value'}
-                </Text>
-                <View style={styles.cardActions}>
-                  <TouchableScale onPress={() => {
-                    copyToClipboard(item.value, 'Storage Value');
-                    showToast('Copied value!');
-                }} hitSlop={6} style={styles.cardActionBtn}>
-                    <CopyIcon size={12} color={AppColors.grayText}/>
-                    <Text style={styles.cardActionText}>Copy</Text>
-                  </TouchableScale>
-
-                  <TouchableScale onPress={() => handleStartEdit(item)} hitSlop={6} style={styles.cardActionBtn}>
-                    <EditIcon size={12} color={AppColors.purple}/>
-                    <Text style={[
-                    styles.cardActionText,
-                    { color: AppColors.purple },
-                ]}>
-                      Edit
-                    </Text>
-                  </TouchableScale>
-
-                  <TouchableScale onPress={() => handleDelete(item.key)} hitSlop={6} style={styles.cardActionBtn}>
-                    <TrashIcon size={12} color={AppColors.errorColor}/>
-                    <Text style={[
-                    styles.cardActionText,
-                    { color: AppColors.errorColor },
-                ]}>
-                      Delete
-                    </Text>
-                  </TouchableScale>
-                </View>
-              </View>
-            </View>);
-        }}/>
-
-      {/* Edit Storage Key Modal */}
-      <Modal visible={editingItem !== null} transparent animationType="fade">
-        <View style={styles.modalBackdrop}>
-          <View style={styles.modalCard}>
-            <View style={styles.modalHeader}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                <EditIcon size={16} color={AppColors.purple}/>
-                <Text style={styles.modalTitle}>Edit Storage Value</Text>
-              </View>
-              <Pressable onPress={() => setEditingItem(null)} hitSlop={10} style={styles.modalCloseBtn}>
-                <ClearIcon size={14} color={AppColors.grayText}/>
-              </Pressable>
-            </View>
-
-            <Text style={styles.modalKeyLabel} numberOfLines={1}>
-              Key: <Text style={{ color: AppColors.purple }}>{editingItem?.key}</Text>
-            </Text>
-
-            <TextInput style={styles.modalInput} multiline value={editValue} onChangeText={setEditValue} placeholder="Enter new string or JSON value..." placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-
-            <View style={styles.modalActions}>
-              <TouchableScale onPress={() => setEditingItem(null)} style={styles.modalCancelBtn}>
-                <Text style={styles.modalCancelText}>Cancel</Text>
-              </TouchableScale>
-              <TouchableScale onPress={handleSaveEdit} style={styles.modalSaveBtn}>
-                <Text style={styles.modalSaveText}>Save Changes</Text>
-              </TouchableScale>
-            </View>
-          </View>
-        </View>
-      </Modal>
-
-      {/* Add New Key Modal */}
-      <Modal visible={isAddingNew} transparent animationType="fade">
-        <View style={styles.modalBackdrop}>
-          <View style={styles.modalCard}>
-            <View style={styles.modalHeader}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                <PlusIcon size={16} color={AppColors.purple}/>
-                <Text style={styles.modalTitle}>Add New Storage Key</Text>
-              </View>
-              <Pressable onPress={() => setIsAddingNew(false)} hitSlop={10} style={styles.modalCloseBtn}>
-                <ClearIcon size={14} color={AppColors.grayText}/>
-              </Pressable>
-            </View>
-
-            <TextInput style={styles.modalSingleInput} value={newKey} onChangeText={setNewKey} placeholder="@storage_key_name" placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-
-            <TextInput style={[styles.modalInput, { height: 110 }]} multiline value={newValue} onChangeText={setNewValue} placeholder="Value (string, number, or JSON)..." placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-
-            <View style={styles.modalActions}>
-              <TouchableScale onPress={() => setIsAddingNew(false)} style={styles.modalCancelBtn}>
-                <Text style={styles.modalCancelText}>Cancel</Text>
-              </TouchableScale>
-              <TouchableScale onPress={handleCreateNew} style={styles.modalSaveBtn}>
-                <Text style={styles.modalSaveText}>Save Key</Text>
-              </TouchableScale>
-            </View>
-          </View>
-        </View>
-      </Modal>
-    </View>);
-});
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors.grayBackground,
-    },
-    metricsBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        backgroundColor: AppColors.primaryLight,
-        borderBottomWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    metricsLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
-    },
-    metricItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-    },
-    metricBold: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    metricLabel: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-    },
-    metricDivider: {
-        width: 1,
-        height: 14,
-        backgroundColor: AppColors.grayBorderSecondary,
-    },
-    actionsRight: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    actionBtn: {
-        width: 30,
-        height: 30,
-        borderRadius: 7,
-        backgroundColor: `${AppColors.purple}14`,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}30`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    searchRow: {
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-    },
-    searchBox: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 10,
-        height: 36,
-        gap: 8,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        padding: 0,
-    },
-    listContent: {
-        paddingHorizontal: 12,
-        paddingBottom: 40,
-        gap: 8,
-    },
-    card: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        padding: 12,
-        gap: 8,
-    },
-    cardHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    keyRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flex: 1,
-        marginRight: 8,
-    },
-    keyText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    badgeRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    typeBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-    },
-    typeBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        letterSpacing: 0.5,
-    },
-    sizeText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-    },
-    valueContainer: {
-        backgroundColor: `${AppColors.grayBackground}`,
-        borderRadius: 6,
-        padding: 8,
-        borderWidth: 1,
-        borderColor: `${AppColors.grayBorderSecondary}80`,
-    },
-    valueText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayText,
-        lineHeight: 16,
-    },
-    cardFooter: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 2,
-    },
-    footerHint: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    cardActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
-    },
-    cardActionBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-    },
-    cardActionText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.grayText,
-    },
-    emptyState: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 60,
-        gap: 8,
-    },
-    emptyTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.primaryBlack,
-    },
-    emptySub: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11.5,
-        color: AppColors.grayTextWeak,
-        textAlign: 'center',
-        maxWidth: 260,
-    },
-    modalBackdrop: {
-        flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.5)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingHorizontal: 20,
-    },
-    modalCard: {
-        width: '100%',
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 14,
-        padding: 16,
-        gap: 12,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        shadowColor: '#000',
-        shadowOpacity: 0.2,
-        shadowRadius: 10,
-        elevation: 8,
-    },
-    modalHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    modalTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.primaryBlack,
-    },
-    modalCloseBtn: {
-        padding: 4,
-    },
-    modalKeyLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors.grayText,
-    },
-    modalSingleInput: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 10,
-        height: 38,
-    },
-    modalInput: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        padding: 10,
-        height: 140,
-        textAlignVertical: 'top',
-    },
-    modalActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-        gap: 10,
-        marginTop: 4,
-    },
-    modalCancelBtn: {
-        paddingHorizontal: 14,
-        paddingVertical: 8,
-        borderRadius: 8,
-        backgroundColor: `${AppColors.grayBorderSecondary}40`,
-    },
-    modalCancelText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.grayText,
-    },
-    modalSaveBtn: {
-        paddingHorizontal: 14,
-        paddingVertical: 8,
-        borderRadius: 8,
-        backgroundColor: AppColors.purple,
-    },
-    modalSaveText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.white,
-    },
-});
-export default StorageTab;

package/dist/esm/customHooks/storageInspector.d.ts

@@ -1,13 +0,0 @@
-import { StorageEntry } from '../types';
-type StorageListener = () => void;
-export declare function setCustomStorageAdapter(adapter: any): void;
-export declare function subscribeStorageChanges(listener: StorageListener): () => void;
-export declare function notifyStorageChange(): void;
-/**
- * Reads all entries from on-device storage (AsyncStorage or fallback store).
- */
-export declare function fetchAllStorageEntries(): Promise<StorageEntry[]>;
-export declare function setStorageItem(key: string, value: string): Promise<void>;
-export declare function removeStorageItem(key: string): Promise<void>;
-export declare function clearAllStorage(): Promise<void>;
-export {};