react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -0,0 +1,452 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const BrandSquareIcon_1 = __importDefault(require("../BrandSquareIcon"));
+const styles_1 = __importDefault(require("../../styles"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const constants_1 = require("../../constants");
+const constants_2 = require("../../constants");
+const helpers_1 = require("../../helpers");
+const helpers_2 = require("../../helpers");
+const helpers_3 = require("../../helpers");
+const helpers_4 = require("../../helpers");
+const NetworkIcons_1 = require("../NetworkIcons");
+const InspectorHeader = () => {
+    const { modalHeightPercent, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, } = (0, InspectorContext_1.useInspector)();
+    const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
+    return (<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} style={styles_1.default.headerGradient}>
+      <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
+        <react_native_1.View style={styles_1.default.header}>
+          <react_native_1.View style={[
+            styles_1.default.headerLeft,
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                flex: selected == null &&
+                    selectedEvent == null &&
+                    selectedLog == null
+                    ? 5
+                    : 1,
+            },
+        ]}>
+            <TouchableScale_1.default onPress={() => {
+            requestAnimationFrame(() => {
+                setSelected(null);
+                setSelectedEvent(null);
+                setSelectedLog(null);
+            });
+        }} hitSlop={15} style={[
+            {
+                width: 38,
+                height: 38,
+                borderRadius: 19,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: `${AppColors_1.AppColors.white}2E`,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}4D`,
+            },
+            selected == null &&
+                selectedEvent == null &&
+                selectedLog == null && { display: 'none' },
+        ]}>
+              {/* Soft outer glow to fake a blurred circle */}
+              <react_native_1.View style={{
+            position: 'absolute',
+            width: 48,
+            height: 48,
+            borderRadius: 24,
+            backgroundColor: `${AppColors_1.AppColors.white}1A`,
+        }}/>
+              <NetworkIcons_1.WhiteBackNavigation />
+            </TouchableScale_1.default>
+
+            {selected == null &&
+            selectedEvent == null &&
+            selectedLog == null ? (<TouchableScale_1.default onPress={() => setShowHeaderInfo(prev => !prev)} style={{
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: 10,
+                flex: 1,
+            }}>
+                <react_native_1.View style={{
+                width: 46,
+                height: 46,
+                borderRadius: 12,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: `${AppColors_1.AppColors.white}21`,
+                borderWidth: 1.5,
+                borderColor: `${AppColors_1.AppColors.white}40`,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.15,
+                shadowRadius: 4,
+                shadowOffset: { width: 0, height: 2 },
+                flexShrink: 0,
+            }}>
+                  <BrandSquareIcon_1.default size={42}/>
+                </react_native_1.View>
+                <react_native_1.View style={{ gap: 2, flex: 1 }}>
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                    <react_native_1.Text style={[styles_1.default.headerTitle]} numberOfLines={1}>
+                      {(0, helpers_2.getAppName)()}
+                    </react_native_1.Text>
+                    {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => react_native_1.Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${constants_2.LIB_VERSION}).`, [
+                    { text: 'Later', style: 'cancel' },
+                    {
+                        text: 'View on NPM',
+                        onPress: () => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { }),
+                    },
+                ])} style={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                        <react_native_1.Animated.View style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 4,
+                    backgroundColor: AppColors_1.AppColors.liveGreen,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.white}E6`,
+                    opacity: activePulseAnim,
+                    transform: [{ scale: unreadPulseAnim }],
+                }}/>
+                      </react_native_1.Pressable>)}
+                  </react_native_1.View>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                alignSelf: 'flex-start',
+                backgroundColor: `${AppColors_1.AppColors.white}1A`,
+                borderRadius: 10,
+                paddingHorizontal: 8,
+                paddingVertical: 3,
+                gap: 5,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}26`,
+            }}>
+                    <react_native_1.View style={{
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: AppColors_1.AppColors.liveGreen,
+            }}/>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontSize: 10,
+                color: `${AppColors_1.AppColors.white}D9`,
+                letterSpacing: 0.2,
+            }} numberOfLines={1}>
+                      {(0, helpers_3.getBundleIdentifier)()}
+                    </react_native_1.Text>
+                    <react_native_1.Animated.View style={{
+                transform: [{ rotate: showHeaderInfo ? '180deg' : '0deg' }],
+                marginLeft: 2,
+            }}>
+                      <NetworkIcons_1.ChevronIcon color="rgba(255,255,255,0.6)" size={12}/>
+                    </react_native_1.Animated.View>
+                  </react_native_1.View>
+                  {showHeaderInfo && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                    marginTop: 4,
+                }}>
+                      <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    borderRadius: 6,
+                    overflow: 'hidden',
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.white}2E`,
+                }}>
+                        <react_native_1.View style={{
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    backgroundColor: `${AppColors_1.AppColors.white}47`,
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors_1.AppColors.white,
+                    letterSpacing: 0.3,
+                }}>
+                            {react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        <react_native_1.View style={{
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    backgroundColor: `${AppColors_1.AppColors.white}1F`,
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 9.5,
+                    color: `${AppColors_1.AppColors.white}EB`,
+                }}>
+                            {String(react_native_1.Platform.Version)}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </react_native_1.View>
+                      <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    borderRadius: 6,
+                    overflow: 'hidden',
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.white}2E`,
+                }}>
+                        <react_native_1.View style={{
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    backgroundColor: `${AppColors_1.AppColors.white}47`,
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors_1.AppColors.white,
+                    letterSpacing: 0.3,
+                }}>
+                            npm
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        <react_native_1.View style={{
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    backgroundColor: `${AppColors_1.AppColors.white}1F`,
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 9.5,
+                    color: `${AppColors_1.AppColors.white}EB`,
+                }}>
+                            v{constants_2.LIB_VERSION}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </react_native_1.View>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+              </TouchableScale_1.default>) : null}
+          </react_native_1.View>
+
+          {(selected != null ||
+            selectedEvent != null ||
+            selectedLog != null) && (<react_native_1.View style={styles_1.default.headerCenter}>
+              {selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  <react_native_1.View style={styles_1.default.headerDetailRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
+                            AppColors_1.AppColors.grayText,
+                    },
+                ]}>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                        {selected.method}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {detailTitle}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                    <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: `${(0, helpers_1.getStatusColor)(selected.status)}26`,
+                    borderWidth: 1,
+                    borderColor: `${(0, helpers_1.getStatusColor)(selected.status)}55`,
+                }}>
+                      <react_native_1.View style={[
+                    styles_1.default.headerStatusDot,
+                    {
+                        backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
+                    },
+                ]}/>
+                      <react_native_1.Text style={[
+                    styles_1.default.headerSubTitle,
+                    { fontFamily: AppFonts_1.AppFonts.interBold },
+                ]}>
+                        {selected.status === 0
+                    ? 'Failed'
+                    : selected.status ?? 'Pending'}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: `${AppColors_1.AppColors.white}29`,
+                }}>
+                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
+                      <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                        {selected.duration != null
+                    ? `${selected.duration}ms`
+                    : '—'}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  <react_native_1.View style={styles_1.default.headerDetailRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: selectedEvent.source === 'firebase'
+                            ? `${AppColors_1.AppColors.firebaseOrange}4D`
+                            : `${AppColors_1.AppColors.purple}4D`,
+                    },
+                ]}>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                        {selectedEvent.source === 'firebase'
+                    ? 'FB'
+                    : 'MAN'}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {selectedEvent.name}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerStatusDot,
+                    {
+                        backgroundColor: selectedEvent.source === 'firebase'
+                            ? AppColors_1.AppColors.firebaseOrange
+                            : AppColors_1.AppColors.purple,
+                    },
+                ]}/>
+                    <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                      {Object.keys(selectedEvent.params).length} param
+                      {Object.keys(selectedEvent.params).length !== 1
+                    ? 's'
+                    : ''}
+                      {' · '}
+                      {selectedEvent.source}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>) : selectedLog != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  <react_native_1.View style={styles_1.default.headerDetailRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: selectedLog.type === 'error'
+                            ? `${AppColors_1.AppColors.errorColor}4D`
+                            : selectedLog.type === 'warn'
+                                ? `${AppColors_1.AppColors.lightOrange}4D`
+                                : `${AppColors_1.AppColors.purple}4D`,
+                    },
+                ]}>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                        {selectedLog.type.toUpperCase()}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      console.
+                      {(selectedLog.sourceMethod) ||
+                    selectedLog.type ||
+                    'log'}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                    <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: `${AppColors_1.AppColors.white}29`,
+                }}>
+                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
+                      <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                        {(0, helpers_4.formatTime)(selectedLog.timestamp)}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </react_native_1.View>) : null}
+            </react_native_1.View>)}
+
+          <react_native_1.View style={[
+            styles_1.default.headerRight,
+            selected == null &&
+                selectedEvent == null &&
+                selectedLog == null && {
+                flexShrink: 0,
+                minWidth: 116,
+            },
+        ]}>
+            {selected == null &&
+            selectedEvent == null &&
+            selectedLog == null && (<TouchableScale_1.default onPress={() => {
+                react_native_1.Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics and Redux timeline. Continue?', [
+                    { text: 'Cancel', style: 'cancel' },
+                    {
+                        text: 'Clear All',
+                        onPress: runClearAllWithAnimation,
+                        style: 'destructive',
+                    },
+                ]);
+            }} hitSlop={15} style={[
+                styles_1.default.closeButtonSquare,
+                {
+                    marginRight: 8,
+                    backgroundColor: `${AppColors_1.AppColors.white}26`,
+                },
+            ]}>
+                <react_native_1.Animated.View style={{
+                transform: [
+                    {
+                        rotate: clearAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: ['0deg', '-25deg'],
+                        }),
+                    },
+                    {
+                        scale: clearAnim.interpolate({
+                            inputRange: [0, 0.5, 1],
+                            outputRange: [1, 1.25, 1],
+                        }),
+                    },
+                ],
+            }}>
+                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={16}/>
+                </react_native_1.Animated.View>
+              </TouchableScale_1.default>)}
+
+            {selected == null &&
+            selectedEvent == null &&
+            selectedLog == null && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={[
+                styles_1.default.closeButtonSquare,
+                {
+                    marginRight: 8,
+                    backgroundColor: `${AppColors_1.AppColors.white}26`,
+                },
+            ]}>
+                <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={16}/>
+              </TouchableScale_1.default>)}
+
+            <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.closeButtonSquare}>
+              <NetworkIcons_1.CloseWhite size={16}/>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_linear_gradient_1.default>);
+};
+exports.default = InspectorHeader;

package/dist/commonjs/components/Inspector/LogDetail.d.ts

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