react-native-inapp-inspector 2.0.6 → 2.0.7

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

@@ -62,7 +62,7 @@ const helpers_1 = require("../../helpers");
 const toast_1 = require("../../helpers/toast");
 const SettingsPanel = () => {
     const { t } = (0, i18n_1.useTranslation)();
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, isPerformanceHudEnabled, setIsPerformanceHudEnabled, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, } = (0, InspectorContext_1.useInspector)();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, isPerformanceHudEnabled, setIsPerformanceHudEnabled, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, updateAvailable, latestNpmVersion, openWalkthrough, deviceInfo, auditReport, storageEntries, } = (0, InspectorContext_1.useInspector)();
     const [stagedHeight, setStagedHeight] = (0, react_1.useState)(modalHeightPercent);
     const [telemetryConsent, setTelemetryConsentState] = (0, react_1.useState)(true);
     (0, react_1.useEffect)(() => {
@@ -462,17 +462,23 @@ const SettingsPanel = () => {
                     ? `${logs.length} requests • Limit: ${maxNetworkLogs}`
                     : moduleItem.key === 'logs'
                         ? `${consoleLogs.length} logs • Limit: ${maxConsoleLogs}`
-                        : moduleItem.key === 'performance'
-                            ? '60 FPS Target • Memory Telemetry'
-                            : moduleItem.key === 'bundle'
-                                ? 'Metro Packager • Dependency Map'
-                                : moduleItem.key === 'crash'
-                                    ? `${crashRecords?.length || 0} crashes recorded • Crash Guard`
-                                    : moduleItem.key === 'analytics'
-                                        ? `${analyticsEvents.length} events logged`
-                                        : moduleItem.key === 'redux'
-                                            ? `${Object.keys(reduxState || {}).length} slices • Depth: ${reduxExpandDepth}`
-                                            : '';
+                        : moduleItem.key === 'storage'
+                            ? `${storageEntries?.length || 0} keys • AsyncStorage/MMKV`
+                            : moduleItem.key === 'device'
+                                ? `${deviceInfo?.platform ? deviceInfo.platform.toUpperCase() : 'Device'} • Hermes ${deviceInfo?.isHermes ? 'Enabled' : 'Off'}`
+                                : moduleItem.key === 'audit'
+                                    ? `${auditReport?.score != null ? `${auditReport.score}/100 Score • Quality Audit` : 'Package & Health Audit'}`
+                                    : moduleItem.key === 'performance'
+                                        ? '60 FPS Target • Memory Telemetry'
+                                        : moduleItem.key === 'bundle'
+                                            ? 'Metro Packager • Dependency Map'
+                                            : moduleItem.key === 'crash'
+                                                ? `${crashRecords?.length || 0} crashes recorded • Crash Guard`
+                                                : moduleItem.key === 'analytics'
+                                                    ? `${analyticsEvents.length} events logged`
+                                                    : moduleItem.key === 'redux'
+                                                        ? `${Object.keys(reduxState || {}).length} slices • Depth: ${reduxExpandDepth}`
+                                                        : '';
                 return (<react_native_1.View key={moduleItem.key} style={{
                         backgroundColor: AppColors_1.AppColors.primaryLight,
                         borderRadius: 14,
@@ -741,29 +747,29 @@ const SettingsPanel = () => {
                             borderTopColor: AppColors_1.AppColors.dividerColor,
                         }}>
                         {/* Live Info Pill */}
-                        <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 6,
-                            flex: 1,
-                        }}>
-                          <react_native_1.View style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: 3,
-                            backgroundColor: isChecked
-                                ? AppColors_1.AppColors.liveGreen
-                                : AppColors_1.AppColors.grayTextWeak,
-                        }}/>
-                          <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interMedium,
-                            fontSize: 11,
-                            color: AppColors_1.AppColors.grayText,
-                            lineHeight: 14,
-                        }}>
-                            {liveStats}
-                          </react_native_1.Text>
-                        </react_native_1.View>
+                        {Boolean(liveStats) ? (<react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 6,
+                                flex: 1,
+                            }}>
+                            <react_native_1.View style={{
+                                width: 6,
+                                height: 6,
+                                borderRadius: 3,
+                                backgroundColor: isChecked
+                                    ? AppColors_1.AppColors.liveGreen
+                                    : AppColors_1.AppColors.grayTextWeak,
+                            }}/>
+                            <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interMedium,
+                                fontSize: 11,
+                                color: AppColors_1.AppColors.grayText,
+                                lineHeight: 14,
+                            }}>
+                              {liveStats}
+                            </react_native_1.Text>
+                          </react_native_1.View>) : (<react_native_1.View style={{ flex: 1 }}/>)}
 
                         {/* Sleek Configure Button */}
                         <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
@@ -1262,6 +1268,88 @@ const SettingsPanel = () => {
 
         {/* ─── TAB 3: UI & APPEARANCE ────────────────────────────────────────── */}
         {settingsActiveSubTab === 'ui' && (<react_native_1.View style={{ gap: 14 }}>
+            {/* Section 0: Interactive Walkthrough Tour */}
+            <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors_1.AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                ONBOARDING & GUIDE
+              </react_native_1.Text>
+
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 10,
+            }}>
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
+                  <react_native_1.View style={{
+                width: 34,
+                height: 34,
+                borderRadius: 9,
+                backgroundColor: `${AppColors_1.AppColors.purple}16`,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                    <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={16}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                      First-Time Walkthrough
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.grayTextWeak,
+                marginTop: 1,
+                lineHeight: 16,
+            }}>
+                      Explore features, gestures & developer tools
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                <TouchableScale_1.default style={{
+                backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                borderColor: `${AppColors_1.AppColors.purple}30`,
+                borderWidth: 1,
+                paddingHorizontal: 12,
+                paddingVertical: 7,
+                borderRadius: 8,
+            }} onPress={openWalkthrough} hitSlop={8}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 12,
+                color: AppColors_1.AppColors.purple,
+            }}>
+                    Start Tour →
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
             {/* Section 1: Appearance */}
             <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.0.6";
+export declare const LIB_VERSION = "2.0.7";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '2.0.6';
+exports.LIB_VERSION = '2.0.7';

package/dist/commonjs/helpers/settingsStore.d.ts

@@ -2,7 +2,7 @@ import { InspectorStorage, PersistedSettings } from '../types';
 export { InspectorStorage, PersistedSettings };
 export declare function setCustomStorage(storage: InspectorStorage | null): void;
 export declare function loadSettings(): Promise<PersistedSettings>;
-export declare function saveSettings(settings: PersistedSettings): void;
+export declare function saveSettings(settings: PersistedSettings): Promise<void>;
 export declare function clearPersistedSettings(): Promise<void>;
 export declare const isPersistentStorageAvailable: () => boolean;
 export declare function getCustomStorage(): InspectorStorage | null;

package/dist/commonjs/helpers/settingsStore.js

@@ -57,9 +57,11 @@ async function loadSettings() {
         return {};
     }
 }
-function saveSettings(settings) {
+async function saveSettings(settings) {
     try {
-        const raw = JSON.stringify(settings);
+        const existing = await loadSettings();
+        const merged = { ...existing, ...settings };
+        const raw = JSON.stringify(merged);
         if (customStorage) {
             customStorage.setItem(SETTINGS_KEY, raw);
             return;

package/dist/commonjs/index.js

@@ -130,6 +130,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const [sectionFilters, setSectionFilters] = (0, react_1.useState)({});
     const [collapsedSections, setCollapsedSections] = (0, react_1.useState)(new Set());
     const [showHeaderInfo, setShowHeaderInfo] = (0, react_1.useState)(true);
+    const [isWalkthroughVisible, setIsWalkthroughVisible] = (0, react_1.useState)(true);
+    const hasCompletedWalkthroughRef = (0, react_1.useRef)(null);
     const [sortOrder, setSortOrder] = (0, react_1.useState)('newest');
     // #7 — sort order for the Logs (console) tab
     const [logSortOrder, setLogSortOrder] = (0, react_1.useState)('newest');
@@ -433,6 +435,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 };
                 setActiveTab(vis[dt] ? dt : 'apis');
             }
+            hasCompletedWalkthroughRef.current = saved.hasCompletedWalkthrough === true;
             settingsHydratedRef.current = true;
         });
         return () => {
@@ -898,6 +901,11 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             setSelectedReduxSlice(null);
             setSelectedReduxAction(null);
             setSelectedCrash(null);
+            // Trigger first-time walkthrough strictly on first FAB launch if not yet completed
+            if (hasCompletedWalkthroughRef.current === false) {
+                setIsWalkthroughVisible(true);
+                hasCompletedWalkthroughRef.current = true;
+            }
             // Track inspector opened event in GA4
             (0, helpers_1.trackInspectorOpen)({ activeTab: target });
             // Instant synchronization of data collected while modal was closed
@@ -1743,6 +1751,12 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         setModalAnimationType,
         hasNavigationContext,
         setNavState,
+        isWalkthroughVisible,
+        setIsWalkthroughVisible,
+        openWalkthrough: () => {
+            setSettingsPage(null);
+            setIsWalkthroughVisible(true);
+        },
         // ─── Tabs ───────────────────────────────────────────────────────────
         activeTab,
         switchActiveTab,

package/dist/commonjs/types/interfaces.d.ts

@@ -211,6 +211,7 @@ export interface PersistedSettings {
     reduxExpandDepth?: number;
     showDuplicateLogs?: boolean;
     showUpdateToast?: boolean;
+    hasCompletedWalkthrough?: boolean;
 }
 export interface NetworkInspectorProps {
     enabled?: boolean;
@@ -244,6 +245,9 @@ export interface InspectorContextValue {
     setModalAnimationType: React.Dispatch<React.SetStateAction<'slide' | 'fade' | 'none'>>;
     hasNavigationContext: boolean;
     setNavState: React.Dispatch<React.SetStateAction<any>>;
+    isWalkthroughVisible: boolean;
+    setIsWalkthroughVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    openWalkthrough: () => void;
     activeTab: ActiveTab;
     switchActiveTab: (key: ActiveTab) => void;
     tabVisibility: Record<ActiveTab, boolean>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FirstTimeWalkthroughModalProps {
+    visible: boolean;
+    onClose: () => void;
+}
+export declare const FirstTimeWalkthroughModal: React.FC<FirstTimeWalkthroughModalProps>;
+export default FirstTimeWalkthroughModal;