react-native-inapp-inspector 2.0.5 → 2.0.6

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

@@ -0,0 +1,610 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StorageTab = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const helpers_1 = require("../../helpers");
+const toast_1 = require("../../helpers/toast");
+const NetworkIcons_1 = require("../NetworkIcons");
+exports.StorageTab = react_1.default.memo(() => {
+    const { storageEntries, refreshStorageEntries, updateStorageEntry, deleteStorageEntry, clearAllStorageEntries, } = (0, InspectorContext_1.useInspector)();
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [editingItem, setEditingItem] = (0, react_1.useState)(null);
+    const [editValue, setEditValue] = (0, react_1.useState)('');
+    const [isAddingNew, setIsAddingNew] = (0, react_1.useState)(false);
+    const [newKey, setNewKey] = (0, react_1.useState)('');
+    const [newValue, setNewValue] = (0, react_1.useState)('');
+    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)(new Set());
+    const filteredEntries = (0, react_1.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 = (0, react_1.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);
+            (0, toast_1.showToast)(`Updated "${editingItem.key}"`);
+            setEditingItem(null);
+        }
+        catch {
+            react_native_1.Alert.alert('Error', 'Failed to save value to storage.');
+        }
+    };
+    const handleCreateNew = async () => {
+        if (!newKey.trim()) {
+            react_native_1.Alert.alert('Invalid Key', 'Please enter a non-empty storage key.');
+            return;
+        }
+        try {
+            await updateStorageEntry(newKey.trim(), newValue);
+            (0, toast_1.showToast)(`Saved key "${newKey.trim()}"`);
+            setIsAddingNew(false);
+            setNewKey('');
+            setNewValue('');
+        }
+        catch {
+            react_native_1.Alert.alert('Error', 'Failed to create storage item.');
+        }
+    };
+    const handleDelete = (key) => {
+        react_native_1.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);
+                    (0, toast_1.showToast)(`Deleted "${key}"`);
+                },
+            },
+        ]);
+    };
+    const handleClearAll = () => {
+        react_native_1.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();
+                    (0, toast_1.showToast)('All storage cleared');
+                },
+            },
+        ]);
+    };
+    return (<react_native_1.View style={styles.container}>
+      {/* Top Metrics & Actions Header */}
+      <react_native_1.View style={styles.metricsBar}>
+        <react_native_1.View style={styles.metricsLeft}>
+          <react_native_1.View style={styles.metricItem}>
+            <NetworkIcons_1.DatabaseIcon size={13} color={AppColors_1.AppColors.purple}/>
+            <react_native_1.Text style={styles.metricBold}>{storageEntries.length}</react_native_1.Text>
+            <react_native_1.Text style={styles.metricLabel}>Keys</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={styles.metricDivider}/>
+          <react_native_1.View style={styles.metricItem}>
+            <react_native_1.Text style={styles.metricBold}>{(0, helpers_1.formatBytes)(totalBytes)}</react_native_1.Text>
+            <react_native_1.Text style={styles.metricLabel}>Stored</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.actionsRight}>
+          <TouchableScale_1.default onPress={refreshStorageEntries} hitSlop={8} style={styles.actionBtn}>
+            <NetworkIcons_1.ResetIcon size={14} color={AppColors_1.AppColors.purple}/>
+          </TouchableScale_1.default>
+          <TouchableScale_1.default onPress={() => setIsAddingNew(true)} hitSlop={8} style={[styles.actionBtn, { backgroundColor: AppColors_1.AppColors.purple }]}>
+            <NetworkIcons_1.PlusIcon size={14} color={AppColors_1.AppColors.white}/>
+          </TouchableScale_1.default>
+          <TouchableScale_1.default onPress={handleClearAll} hitSlop={8} style={[styles.actionBtn, { borderColor: `${AppColors_1.AppColors.errorColor}40` }]}>
+            <NetworkIcons_1.TrashIcon size={14} color={AppColors_1.AppColors.errorColor}/>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* Search Input */}
+      <react_native_1.View style={styles.searchRow}>
+        <react_native_1.View style={styles.searchBox}>
+          <NetworkIcons_1.SearchIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
+          <react_native_1.TextInput style={styles.searchInput} placeholder="Search storage key or value..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} autoCapitalize="none" autoCorrect={false}/>
+          {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={8}>
+              <NetworkIcons_1.ClearIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
+            </react_native_1.Pressable>)}
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* Storage Entries List */}
+      <react_native_1.FlatList data={filteredEntries} keyExtractor={item => item.key} contentContainerStyle={styles.listContent} ListEmptyComponent={<react_native_1.View style={styles.emptyState}>
+            <NetworkIcons_1.DatabaseIcon size={36} color={AppColors_1.AppColors.grayTextWeak}/>
+            <react_native_1.Text style={styles.emptyTitle}>No Storage Entries</react_native_1.Text>
+            <react_native_1.Text style={styles.emptySub}>
+              {search
+                ? `No keys matched "${search}"`
+                : 'No AsyncStorage or local key-value pairs stored yet.'}
+            </react_native_1.Text>
+          </react_native_1.View>} renderItem={({ item }) => {
+            const isExpanded = expandedKeys.has(item.key);
+            return (<react_native_1.View style={styles.card}>
+              {/* Card Header */}
+              <react_native_1.View style={styles.cardHeader}>
+                <react_native_1.View style={styles.keyRow}>
+                  <NetworkIcons_1.KeyIcon size={13} color={AppColors_1.AppColors.purple}/>
+                  <react_native_1.Text style={styles.keyText} numberOfLines={1}>
+                    {item.key}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={styles.badgeRow}>
+                  <react_native_1.View style={[
+                    styles.typeBadge,
+                    {
+                        backgroundColor: item.isJson
+                            ? `${AppColors_1.AppColors.purple}18`
+                            : `${AppColors_1.AppColors.emerald500}18`,
+                        borderColor: item.isJson
+                            ? `${AppColors_1.AppColors.purple}40`
+                            : `${AppColors_1.AppColors.emerald500}40`,
+                    },
+                ]}>
+                    <react_native_1.Text style={[
+                    styles.typeBadgeText,
+                    {
+                        color: item.isJson
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.emerald600,
+                    },
+                ]}>
+                      {item.isJson ? 'JSON' : 'STRING'}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.Text style={styles.sizeText}>
+                    {(0, helpers_1.formatBytes)(item.sizeBytes)}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+
+              {/* Value Box */}
+              <react_native_1.Pressable onPress={() => toggleExpand(item.key)} style={styles.valueContainer}>
+                <react_native_1.Text style={styles.valueText} numberOfLines={isExpanded ? undefined : 3}>
+                  {item.value}
+                </react_native_1.Text>
+              </react_native_1.Pressable>
+
+              {/* Card Actions */}
+              <react_native_1.View style={styles.cardFooter}>
+                <react_native_1.Text style={styles.footerHint}>
+                  {isExpanded ? 'Tap to collapse' : 'Tap to expand full value'}
+                </react_native_1.Text>
+                <react_native_1.View style={styles.cardActions}>
+                  <TouchableScale_1.default onPress={() => {
+                    (0, helpers_1.copyToClipboard)(item.value, 'Storage Value');
+                    (0, toast_1.showToast)('Copied value!');
+                }} hitSlop={6} style={styles.cardActionBtn}>
+                    <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.grayText}/>
+                    <react_native_1.Text style={styles.cardActionText}>Copy</react_native_1.Text>
+                  </TouchableScale_1.default>
+
+                  <TouchableScale_1.default onPress={() => handleStartEdit(item)} hitSlop={6} style={styles.cardActionBtn}>
+                    <NetworkIcons_1.EditIcon size={12} color={AppColors_1.AppColors.purple}/>
+                    <react_native_1.Text style={[
+                    styles.cardActionText,
+                    { color: AppColors_1.AppColors.purple },
+                ]}>
+                      Edit
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>
+
+                  <TouchableScale_1.default onPress={() => handleDelete(item.key)} hitSlop={6} style={styles.cardActionBtn}>
+                    <NetworkIcons_1.TrashIcon size={12} color={AppColors_1.AppColors.errorColor}/>
+                    <react_native_1.Text style={[
+                    styles.cardActionText,
+                    { color: AppColors_1.AppColors.errorColor },
+                ]}>
+                      Delete
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>);
+        }}/>
+
+      {/* Edit Storage Key Modal */}
+      <react_native_1.Modal visible={editingItem !== null} transparent animationType="fade">
+        <react_native_1.View style={styles.modalBackdrop}>
+          <react_native_1.View style={styles.modalCard}>
+            <react_native_1.View style={styles.modalHeader}>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <NetworkIcons_1.EditIcon size={16} color={AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={styles.modalTitle}>Edit Storage Value</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Pressable onPress={() => setEditingItem(null)} hitSlop={10} style={styles.modalCloseBtn}>
+                <NetworkIcons_1.ClearIcon size={14} color={AppColors_1.AppColors.grayText}/>
+              </react_native_1.Pressable>
+            </react_native_1.View>
+
+            <react_native_1.Text style={styles.modalKeyLabel} numberOfLines={1}>
+              Key: <react_native_1.Text style={{ color: AppColors_1.AppColors.purple }}>{editingItem?.key}</react_native_1.Text>
+            </react_native_1.Text>
+
+            <react_native_1.TextInput style={styles.modalInput} multiline value={editValue} onChangeText={setEditValue} placeholder="Enter new string or JSON value..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+
+            <react_native_1.View style={styles.modalActions}>
+              <TouchableScale_1.default onPress={() => setEditingItem(null)} style={styles.modalCancelBtn}>
+                <react_native_1.Text style={styles.modalCancelText}>Cancel</react_native_1.Text>
+              </TouchableScale_1.default>
+              <TouchableScale_1.default onPress={handleSaveEdit} style={styles.modalSaveBtn}>
+                <react_native_1.Text style={styles.modalSaveText}>Save Changes</react_native_1.Text>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.Modal>
+
+      {/* Add New Key Modal */}
+      <react_native_1.Modal visible={isAddingNew} transparent animationType="fade">
+        <react_native_1.View style={styles.modalBackdrop}>
+          <react_native_1.View style={styles.modalCard}>
+            <react_native_1.View style={styles.modalHeader}>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <NetworkIcons_1.PlusIcon size={16} color={AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={styles.modalTitle}>Add New Storage Key</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Pressable onPress={() => setIsAddingNew(false)} hitSlop={10} style={styles.modalCloseBtn}>
+                <NetworkIcons_1.ClearIcon size={14} color={AppColors_1.AppColors.grayText}/>
+              </react_native_1.Pressable>
+            </react_native_1.View>
+
+            <react_native_1.TextInput style={styles.modalSingleInput} value={newKey} onChangeText={setNewKey} placeholder="@storage_key_name" placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+
+            <react_native_1.TextInput style={[styles.modalInput, { height: 110 }]} multiline value={newValue} onChangeText={setNewValue} placeholder="Value (string, number, or JSON)..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+
+            <react_native_1.View style={styles.modalActions}>
+              <TouchableScale_1.default onPress={() => setIsAddingNew(false)} style={styles.modalCancelBtn}>
+                <react_native_1.Text style={styles.modalCancelText}>Cancel</react_native_1.Text>
+              </TouchableScale_1.default>
+              <TouchableScale_1.default onPress={handleCreateNew} style={styles.modalSaveBtn}>
+                <react_native_1.Text style={styles.modalSaveText}>Save Key</react_native_1.Text>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.Modal>
+    </react_native_1.View>);
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+    metricsBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    metricsLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+    },
+    metricItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+    },
+    metricBold: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    metricLabel: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    metricDivider: {
+        width: 1,
+        height: 14,
+        backgroundColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    actionsRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    actionBtn: {
+        width: 30,
+        height: 30,
+        borderRadius: 7,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}30`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    searchRow: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    searchBox: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        paddingHorizontal: 10,
+        height: 36,
+        gap: 8,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        padding: 0,
+    },
+    listContent: {
+        paddingHorizontal: 12,
+        paddingBottom: 40,
+        gap: 8,
+    },
+    card: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.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_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    badgeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    typeBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    typeBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.5,
+    },
+    sizeText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    valueContainer: {
+        backgroundColor: `${AppColors_1.AppColors.grayBackground}`,
+        borderRadius: 6,
+        padding: 8,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.grayBorderSecondary}80`,
+    },
+    valueText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+        lineHeight: 16,
+    },
+    cardFooter: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: 2,
+    },
+    footerHint: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    cardActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+    },
+    cardActionBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    cardActionText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayText,
+    },
+    emptyState: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 60,
+        gap: 8,
+    },
+    emptyTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    emptySub: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors_1.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_1.AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 16,
+        gap: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        shadowColor: '#000',
+        shadowOpacity: 0.2,
+        shadowRadius: 10,
+        elevation: 8,
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    modalTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    modalCloseBtn: {
+        padding: 4,
+    },
+    modalKeyLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayText,
+    },
+    modalSingleInput: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        paddingHorizontal: 10,
+        height: 38,
+    },
+    modalInput: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.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_1.AppColors.grayBorderSecondary}40`,
+    },
+    modalCancelText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayText,
+    },
+    modalSaveBtn: {
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.purple,
+    },
+    modalSaveText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.white,
+    },
+});
+exports.default = exports.StorageTab;

package/dist/commonjs/components/Inspector/TabBar.js

@@ -13,7 +13,7 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const reduxLogger_1 = require("../../customHooks/reduxLogger");
 const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
 const TabBar = react_1.default.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
+    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, storageEntries, auditReport, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
     const isReduxAvail = (0, reduxLogger_1.isReduxConnected)();
     const isAnalyticsAvail = (0, analyticsLogger_1.isAnalyticsConnected)();
     return (<react_native_1.View style={styles_1.default.tabBarContainer}>
@@ -43,6 +43,24 @@ const TabBar = react_1.default.memo(() => {
                 count: 0,
                 icon: 'redux',
             },
+            {
+                key: 'storage',
+                label: 'Storage',
+                count: storageEntries.length,
+                icon: 'storage',
+            },
+            {
+                key: 'device',
+                label: 'Device',
+                count: 0,
+                icon: 'device',
+            },
+            {
+                key: 'audit',
+                label: 'Audit',
+                count: auditReport?.totalIssues || 0,
+                icon: 'audit',
+            },
             {
                 key: 'bundle',
                 label: 'Bundle',
@@ -63,7 +81,7 @@ const TabBar = react_1.default.memo(() => {
             },
         ]
             .filter(tab => {
-            if (!tabVisibility?.[tab.key])
+            if (!tabVisibility?.[tab.key] && activeTab !== tab.key)
                 return false;
             if (tab.key === 'redux' && !isReduxAvail)
                 return false;
@@ -100,6 +118,9 @@ const TabBar = react_1.default.memo(() => {
                   {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'device' && (<NetworkIcons_1.DevicePhoneIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'audit' && (<NetworkIcons_1.ShieldCheckIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}

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

@@ -22,6 +22,7 @@ export declare const SizeIcon: ({ color }: IconProps) => React.JSX.Element;
 export declare const RequestIcon: ({ color }: IconProps) => React.JSX.Element;
 export declare const ResponseIcon: ({ color }: IconProps) => React.JSX.Element;
 export declare const HeadersIcon: ({ color }: IconProps) => React.JSX.Element;
+export declare const ReplayIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const CopyIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const FetchIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const TerminalIcon: ({ color, size, }: IconProps) => React.JSX.Element;
@@ -127,3 +128,14 @@ export declare const TagIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const NpmIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ResetIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ChevronDownIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const DatabaseIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const DevicePhoneIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const FlagIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const EditIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const PlusIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const CodeIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const CpuIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const FingerprintIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const MonitorIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const ShieldCheckIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const SparklesIcon: ({ color, size }: IconProps) => React.JSX.Element;