react-native-inapp-inspector 2.0.5 → 2.0.6

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

@@ -0,0 +1,702 @@
+import React, { useState, useMemo } from 'react';
+import { Platform, ScrollView, 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 { copyToClipboard } from '../../helpers';
+import { showToast } from '../../helpers/toast';
+import { ShieldCheckIcon, SparklesIcon, CopyIcon, SearchIcon, ClearIcon, TerminalIcon, PackageIcon, CodeIcon, } from '../NetworkIcons';
+export const AuditTab = React.memo(() => {
+    const { auditReport, refreshAuditReport } = useInspector();
+    const [activeSubTab, setActiveSubTab] = useState('all');
+    const [selectedSeverity, setSelectedSeverity] = useState('all');
+    const [search, setSearch] = useState('');
+    const subTabs = [
+        { key: 'all', label: 'All Issues', icon: 'shield' },
+        { key: 'packages', label: 'Packages & Peers', icon: 'package' },
+        { key: 'runtime', label: 'Runtime & Types', icon: 'code' },
+        { key: 'bestpractices', label: 'Best Practices', icon: 'sparkles' },
+        { key: 'raw', label: 'Raw Report', icon: 'copy' },
+    ];
+    const optimalCount = useMemo(() => {
+        return (auditReport.issues || []).filter(i => i.severity === 'optimal').length;
+    }, [auditReport.issues]);
+    const severityFilters = [
+        { key: 'all', label: 'All', count: auditReport.totalIssues },
+        { key: 'critical', label: 'Critical', count: auditReport.criticalCount },
+        { key: 'warning', label: 'Warnings', count: auditReport.warningCount },
+        { key: 'optimal', label: 'Passed / Optimal', count: optimalCount + auditReport.infoCount },
+    ];
+    const handleCopyReport = () => {
+        copyToClipboard(JSON.stringify(auditReport, null, 2), 'Code Quality Audit Report');
+        showToast('Copied full audit report!');
+    };
+    const handleCopyFix = (cmd) => {
+        if (!cmd)
+            return;
+        copyToClipboard(cmd, 'Fix Command');
+        showToast('Copied fix command to clipboard!');
+    };
+    // Filtered issues based on sub-tab, severity, and search text
+    const filteredIssues = useMemo(() => {
+        let list = auditReport.issues || [];
+        // Filter by subtab
+        if (activeSubTab === 'packages') {
+            list = list.filter(i => i.category === 'dependency' || i.category === 'peer');
+        }
+        else if (activeSubTab === 'runtime') {
+            list = list.filter(i => i.category === 'typescript');
+        }
+        else if (activeSubTab === 'bestpractices') {
+            list = list.filter(i => i.category === 'performance' || i.category === 'security');
+        }
+        // Filter by severity
+        if (selectedSeverity !== 'all') {
+            if (selectedSeverity === 'optimal') {
+                list = list.filter(i => i.severity === 'optimal' || i.severity === 'info');
+            }
+            else {
+                list = list.filter(i => i.severity === selectedSeverity);
+            }
+        }
+        // Filter by search query
+        if (search.trim().length > 0) {
+            const q = search.toLowerCase();
+            list = list.filter(i => i.title.toLowerCase().includes(q) ||
+                i.message.toLowerCase().includes(q) ||
+                i.packageName?.toLowerCase().includes(q) ||
+                i.category.toLowerCase().includes(q));
+        }
+        return list;
+    }, [auditReport.issues, activeSubTab, selectedSeverity, search]);
+    const getSeverityBadgeStyle = (sev) => {
+        switch (sev) {
+            case 'critical':
+                return {
+                    bg: `${AppColors.errorColor}15`,
+                    border: `${AppColors.errorColor}40`,
+                    text: AppColors.errorColor,
+                    label: 'CRITICAL',
+                };
+            case 'warning':
+                return {
+                    bg: `${AppColors.warningIconGold}18`,
+                    border: `${AppColors.warningIconGold}40`,
+                    text: '#D97706',
+                    label: 'WARNING',
+                };
+            case 'info':
+                return {
+                    bg: `${AppColors.purple}15`,
+                    border: `${AppColors.purple}40`,
+                    text: AppColors.purple,
+                    label: 'INFO',
+                };
+            default:
+                return {
+                    bg: `${AppColors.greenColor}15`,
+                    border: `${AppColors.greenColor}40`,
+                    text: AppColors.greenColor,
+                    label: 'OPTIMAL',
+                };
+        }
+    };
+    const getScoreColor = (score) => {
+        if (score >= 90)
+            return AppColors.greenColor;
+        if (score >= 70)
+            return '#D97706';
+        return AppColors.errorColor;
+    };
+    return (<View style={styles.container}>
+      {/* ─── Top Sub-Tab Navigation Bar with Vector Icons ──────────────────────── */}
+      <View style={styles.tabBarWrapper}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.subTabBarContainer}>
+          {subTabs.map(tab => {
+            const isActive = activeSubTab === tab.key;
+            const iconColor = isActive ? AppColors.white : AppColors.grayText;
+            return (<TouchableScale key={tab.key} onPress={() => setActiveSubTab(tab.key)} style={[
+                    styles.subTabButton,
+                    isActive && styles.subTabButtonActive,
+                ]}>
+                <View style={styles.subTabInnerRow}>
+                  {tab.icon === 'shield' && <ShieldCheckIcon size={12} color={iconColor}/>}
+                  {tab.icon === 'package' && <PackageIcon size={12} color={iconColor}/>}
+                  {tab.icon === 'code' && <CodeIcon size={12} color={iconColor}/>}
+                  {tab.icon === 'sparkles' && <SparklesIcon size={12} color={iconColor}/>}
+                  {tab.icon === 'copy' && <CopyIcon size={12} color={iconColor}/>}
+                  <Text style={[
+                    styles.subTabText,
+                    isActive && styles.subTabTextActive,
+                ]}>
+                    {tab.label}
+                  </Text>
+                </View>
+              </TouchableScale>);
+        })}
+        </ScrollView>
+      </View>
+
+      <ScrollView style={styles.scrollArea} contentContainerStyle={styles.contentContainer} showsVerticalScrollIndicator={false}>
+        {/* ─── Health Score Hero Banner ────────────────────────────────────────── */}
+        <View style={styles.heroCard}>
+          <View style={styles.heroTopRow}>
+            {/* Health Score Gauge */}
+            <View style={[
+            styles.scoreBadgeBox,
+            {
+                borderColor: `${getScoreColor(auditReport.score)}40`,
+                backgroundColor: `${getScoreColor(auditReport.score)}10`,
+            },
+        ]}>
+              <Text style={[
+            styles.scoreText,
+            { color: getScoreColor(auditReport.score) },
+        ]}>
+                {auditReport.score}%
+              </Text>
+              <Text style={[
+            styles.gradeText,
+            { color: getScoreColor(auditReport.score) },
+        ]}>
+                GRADE {auditReport.grade}
+              </Text>
+            </View>
+
+            {/* Title & Diagnostic Overview */}
+            <View style={styles.heroTitleBox}>
+              <View style={styles.heroBadgeRow}>
+                <ShieldCheckIcon size={15} color={getScoreColor(auditReport.score)}/>
+                <Text style={styles.heroStatusText}>
+                  {auditReport.score >= 90
+            ? 'Optimal Health'
+            : auditReport.score >= 70
+                ? 'Warnings Found'
+                : 'Attention Needed'}
+                </Text>
+              </View>
+              <Text style={styles.heroSubText}>
+                {auditReport.totalIssues} diagnostic checks across packages, runtime & security
+              </Text>
+            </View>
+          </View>
+
+          {/* Action Row */}
+          <View style={styles.heroActionRow}>
+            <TouchableScale onPress={refreshAuditReport} style={styles.refreshAuditBtn}>
+              <SparklesIcon size={12} color={AppColors.purple}/>
+              <Text style={styles.refreshAuditText}>Re-Scan</Text>
+            </TouchableScale>
+            <TouchableScale onPress={handleCopyReport} style={styles.copyReportBtn}>
+              <CopyIcon size={12} color={AppColors.white}/>
+              <Text style={styles.copyReportText}>Copy Report</Text>
+            </TouchableScale>
+          </View>
+
+          {/* Quick Metrics Bar */}
+          <View style={styles.metricsBar}>
+            <View style={styles.metricItem}>
+              <Text style={[styles.metricCount, { color: AppColors.errorColor }]}>
+                {auditReport.criticalCount}
+              </Text>
+              <Text style={styles.metricLabel}>Critical</Text>
+            </View>
+            <View style={styles.metricDivider}/>
+            <View style={styles.metricItem}>
+              <Text style={[styles.metricCount, { color: '#D97706' }]}>
+                {auditReport.warningCount}
+              </Text>
+              <Text style={styles.metricLabel}>Warnings</Text>
+            </View>
+            <View style={styles.metricDivider}/>
+            <View style={styles.metricItem}>
+              <Text style={[styles.metricCount, { color: AppColors.greenColor }]}>
+                {optimalCount + auditReport.infoCount}
+              </Text>
+              <Text style={styles.metricLabel}>Passed / Optimal</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* ─── Search & Severity Filter Bar ────────────────────────────────────── */}
+        {activeSubTab !== 'raw' && (<View style={styles.filterSection}>
+            <View style={styles.searchBox}>
+              <SearchIcon size={13} color={AppColors.grayTextWeak}/>
+              <TextInput style={styles.searchInput} value={search} onChangeText={setSearch} placeholder="Search packages, issues, rules..." placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+              {search.length > 0 && (<TouchableScale onPress={() => setSearch('')}>
+                  <ClearIcon size={14} color={AppColors.grayTextWeak}/>
+                </TouchableScale>)}
+            </View>
+
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.severityFilterRow}>
+              {severityFilters.map(sf => {
+                const isSelected = selectedSeverity === sf.key;
+                return (<TouchableScale key={sf.key} onPress={() => setSelectedSeverity(sf.key)} style={[
+                        styles.severityChip,
+                        isSelected && styles.severityChipActive,
+                    ]}>
+                    <Text style={[
+                        styles.severityChipText,
+                        isSelected && styles.severityChipTextActive,
+                    ]}>
+                      {sf.label} {sf.count !== undefined ? `(${sf.count})` : ''}
+                    </Text>
+                  </TouchableScale>);
+            })}
+            </ScrollView>
+          </View>)}
+
+        {/* ─── Issues Feed ─────────────────────────────────────────────────────── */}
+        {activeSubTab !== 'raw' && (<View style={styles.issuesList}>
+            {filteredIssues.length === 0 ? (<View style={styles.emptyStateCard}>
+                <ShieldCheckIcon size={32} color={AppColors.greenColor}/>
+                <Text style={styles.emptyTitle}>No Issues in this Category</Text>
+                <Text style={styles.emptySub}>
+                  {search.length > 0
+                    ? 'No checks matched your search query.'
+                    : 'All scanned package dependencies and code standards passed successfully!'}
+                </Text>
+              </View>) : (filteredIssues.map(issue => {
+                const badge = getSeverityBadgeStyle(issue.severity);
+                return (<View key={issue.id} style={styles.issueCard}>
+                    <View style={styles.issueHeader}>
+                      <View style={styles.issueHeaderLeft}>
+                        <View style={[
+                        styles.severityBadge,
+                        { backgroundColor: badge.bg, borderColor: badge.border },
+                    ]}>
+                          <Text style={[styles.severityBadgeText, { color: badge.text }]}>
+                            {badge.label}
+                          </Text>
+                        </View>
+                        <View style={styles.categoryBadge}>
+                          <Text style={styles.categoryBadgeText}>
+                            {issue.category.toUpperCase()}
+                          </Text>
+                        </View>
+                      </View>
+
+                      {issue.packageName && (<View style={styles.packageTag}>
+                          <PackageIcon size={11} color={AppColors.purple}/>
+                          <Text style={styles.packageTagText}>
+                            {issue.packageName}
+                            {issue.currentVersion ? ` @ ${issue.currentVersion}` : ''}
+                          </Text>
+                        </View>)}
+                    </View>
+
+                    <Text style={styles.issueTitle}>{issue.title}</Text>
+                    <Text style={styles.issueMessage}>{issue.message}</Text>
+
+                    {/* Actionable Fix Command Bar */}
+                    {issue.fixCommand && (<View style={styles.fixCommandBox}>
+                        <View style={styles.fixLeft}>
+                          <TerminalIcon size={12} color={AppColors.purple}/>
+                          <Text style={styles.fixCommandText} numberOfLines={1}>
+                            {issue.fixCommand}
+                          </Text>
+                        </View>
+                        <TouchableScale onPress={() => handleCopyFix(issue.fixCommand)} style={styles.fixCopyBtn}>
+                          <CopyIcon size={11} color={AppColors.purple}/>
+                          <Text style={styles.fixCopyText}>Copy Fix</Text>
+                        </TouchableScale>
+                      </View>)}
+                  </View>);
+            }))}
+          </View>)}
+
+        {/* ─── Raw JSON Sub-Tab ────────────────────────────────────────────────── */}
+        {activeSubTab === 'raw' && (<View style={styles.rawCard}>
+            <View style={styles.rawHeader}>
+              <Text style={styles.rawTitle}>RAW AUDIT JSON REPORT</Text>
+              <TouchableScale onPress={handleCopyReport} style={styles.copyReportBtn}>
+                <CopyIcon size={11} color={AppColors.white}/>
+                <Text style={styles.copyReportText}>Copy All</Text>
+              </TouchableScale>
+            </View>
+            <ScrollView horizontal style={styles.rawScroll}>
+              <Text style={styles.rawText} selectable>
+                {JSON.stringify(auditReport, null, 2)}
+              </Text>
+            </ScrollView>
+          </View>)}
+
+        <View style={{ height: 40 }}/>
+      </ScrollView>
+    </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors.grayBackground,
+    },
+    tabBarWrapper: {
+        backgroundColor: AppColors.contentBg,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.grayBorderSecondary,
+        paddingVertical: 8,
+    },
+    subTabBarContainer: {
+        paddingHorizontal: 12,
+        flexDirection: 'row',
+        gap: 8,
+        alignItems: 'center',
+    },
+    subTabButton: {
+        paddingHorizontal: 12,
+        paddingVertical: 7,
+        borderRadius: 20,
+        backgroundColor: AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    subTabButtonActive: {
+        backgroundColor: AppColors.purple,
+        borderColor: AppColors.purple,
+    },
+    subTabInnerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+    },
+    subTabText: {
+        fontSize: 12,
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.grayText,
+    },
+    subTabTextActive: {
+        color: AppColors.white,
+        fontFamily: AppFonts.interBold,
+    },
+    scrollArea: {
+        flex: 1,
+    },
+    contentContainer: {
+        padding: 12,
+    },
+    heroCard: {
+        backgroundColor: AppColors.contentBg,
+        borderRadius: 14,
+        padding: 14,
+        marginBottom: 12,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        gap: 12,
+    },
+    heroTopRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+    },
+    scoreBadgeBox: {
+        width: 60,
+        height: 60,
+        borderRadius: 12,
+        borderWidth: 1.5,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    scoreText: {
+        fontSize: 17,
+        fontFamily: AppFonts.interBold,
+    },
+    gradeText: {
+        fontSize: 8.5,
+        fontFamily: AppFonts.interBold,
+        letterSpacing: 0.5,
+        marginTop: 1,
+    },
+    heroTitleBox: {
+        flex: 1,
+        gap: 2,
+    },
+    heroBadgeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    heroStatusText: {
+        fontSize: 14,
+        fontFamily: AppFonts.interBold,
+        color: AppColors.black,
+    },
+    heroSubText: {
+        fontSize: 11,
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.grayText,
+        lineHeight: 15,
+    },
+    heroActionRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    refreshAuditBtn: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 5,
+        backgroundColor: `${AppColors.purple}12`,
+        paddingVertical: 7,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: `${AppColors.purple}30`,
+    },
+    refreshAuditText: {
+        fontSize: 11.5,
+        fontFamily: AppFonts.interBold,
+        color: AppColors.purple,
+    },
+    copyReportBtn: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 5,
+        backgroundColor: AppColors.purple,
+        paddingVertical: 7,
+        borderRadius: 8,
+    },
+    copyReportText: {
+        fontSize: 11.5,
+        fontFamily: AppFonts.interBold,
+        color: AppColors.white,
+    },
+    metricsBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 10,
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+    },
+    metricItem: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    metricCount: {
+        fontSize: 14,
+        fontFamily: AppFonts.interBold,
+    },
+    metricLabel: {
+        fontSize: 9.5,
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.grayText,
+        marginTop: 1,
+    },
+    metricDivider: {
+        width: 1,
+        height: 22,
+        backgroundColor: AppColors.grayBorderSecondary,
+    },
+    filterSection: {
+        marginBottom: 12,
+        gap: 8,
+    },
+    searchBox: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        backgroundColor: AppColors.contentBg,
+        borderRadius: 10,
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    searchInput: {
+        flex: 1,
+        fontSize: 12,
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.black,
+        paddingVertical: 0,
+    },
+    severityFilterRow: {
+        flexDirection: 'row',
+        gap: 6,
+    },
+    severityChip: {
+        paddingHorizontal: 12,
+        paddingVertical: 5,
+        borderRadius: 16,
+        backgroundColor: AppColors.contentBg,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    severityChipActive: {
+        backgroundColor: AppColors.purple,
+        borderColor: AppColors.purple,
+    },
+    severityChipText: {
+        fontSize: 11,
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.grayText,
+    },
+    severityChipTextActive: {
+        color: AppColors.white,
+        fontFamily: AppFonts.interBold,
+    },
+    issuesList: {
+        gap: 10,
+    },
+    issueCard: {
+        backgroundColor: AppColors.contentBg,
+        borderRadius: 12,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    issueHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 8,
+    },
+    issueHeaderLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    severityBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    severityBadgeText: {
+        fontSize: 9,
+        fontFamily: AppFonts.interBold,
+        letterSpacing: 0.5,
+    },
+    categoryBadge: {
+        backgroundColor: AppColors.grayBackground,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    categoryBadgeText: {
+        fontSize: 9,
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextWeak,
+    },
+    packageTag: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: `${AppColors.purple}10`,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    packageTagText: {
+        fontSize: 10,
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.purple,
+    },
+    issueTitle: {
+        fontSize: 13,
+        fontFamily: AppFonts.interBold,
+        color: AppColors.black,
+        marginBottom: 4,
+    },
+    issueMessage: {
+        fontSize: 12,
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayText,
+        lineHeight: 17,
+    },
+    fixCommandBox: {
+        marginTop: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 8,
+        paddingHorizontal: 8,
+        paddingVertical: 6,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    fixLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flex: 1,
+    },
+    fixCommandText: {
+        fontSize: 11,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        color: AppColors.black,
+        flex: 1,
+    },
+    fixCopyBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: `${AppColors.purple}15`,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 4,
+    },
+    fixCopyText: {
+        fontSize: 10,
+        fontFamily: AppFonts.interBold,
+        color: AppColors.purple,
+    },
+    emptyStateCard: {
+        backgroundColor: AppColors.contentBg,
+        borderRadius: 14,
+        padding: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    emptyTitle: {
+        fontSize: 15,
+        fontFamily: AppFonts.interBold,
+        color: AppColors.black,
+        marginTop: 10,
+    },
+    emptySub: {
+        fontSize: 12,
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayText,
+        textAlign: 'center',
+        marginTop: 4,
+        lineHeight: 18,
+    },
+    rawCard: {
+        backgroundColor: AppColors.contentBg,
+        borderRadius: 14,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    rawHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 10,
+    },
+    rawTitle: {
+        fontSize: 12,
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+    },
+    rawScroll: {
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 8,
+        padding: 10,
+    },
+    rawText: {
+        fontSize: 11,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        color: AppColors.black,
+        lineHeight: 16,
+    },
+});
+export default AuditTab;

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

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