react-native-inapp-inspector 2.2.2 → 2.2.4

package/src/styles/AppColors.ts

@@ -0,0 +1,408 @@
+const LightColors = {
+  // ─── Core (Thai Airways Royal Palette) ───
+  primaryLight: '#FFFFFF',
+  purple: '#5C2D91',             // Thai Royal Purple
+  purpleShade50: '#F8F4FC',      // Orchid Silk Tint
+  offerPurple: '#9B2677',        // Thai Orchid Magenta
+  grayBorderSecondary: '#E2DFEB',
+  grayBackground: '#F8F7FB',     // Pearl White Surface
+  grayText: '#625D73',
+  grayTextWeak: '#8F8A9E',
+  greenColor: '#10B981',
+  graySurface: '#E2DFEB',
+  skyBlue: '#2563EB',
+  primaryBlack: '#211B30',       // Royal Midnight Dark
+  grayTextStrong: '#211B30',
+  dividerColor: '#EBE7F2',
+  warningIconGold: '#C5A059',    // Thai Orchid Gold
+  shadowColorString: '#211B30',
+  errorColor: '#E11D48',
+  lightOrange: '#E5C158',        // Thai Warm Gold Light
+  darkOrange: '#B89758',         // Thai Silk Gold
+  successGreen: '#10B981',
+  purpleShade700: '#481E78',     // Thai Deep Violet
+  greenStatus: '#D1FAE5',
+  greenBaggageText: '#059669',
+  paleYellow: '#F7E9C4',         // Thai Pale Gold
+
+  // ─── Brand / UI ───
+  white: '#FFFFFF',
+  black: '#000000',
+  brandPurple: '#4B1B7D',        // Iconic Thai Airways Purple
+  liveGreen: '#10B981',
+  firebaseOrange: '#D97706',
+  greenA400: '#00E676',
+
+  // ─── Code / Slate ───
+  slate900: '#171226',
+  slate700: '#332C4A',
+  slate600: '#4D446B',
+  slate500: '#6E648D',
+  slate400: '#948BAF',
+  slate200: '#E4DFEE',
+  slate100: '#F3F0F8',
+  slate50: '#F9F7FC',
+  gray700: '#373147',
+  gray300: '#D5D0E0',
+  highlightYellow: '#FDE047',
+  yellowHighlight: '#FFE44D',
+
+  // ─── Status / Syntax ───
+  teal600: '#0D9488',
+  cyan600: '#0891B2',
+  sky600: '#0284C7',
+  blue500: '#3B82F6',
+  blue600: '#2563EB',
+  blue700: '#1D4ED8',
+  blue800: '#1E40AF',
+  indigo600: '#4F46E5',
+  violet600: '#7C3AED',
+  violet500: '#8B5CF6',
+  purpleText: '#5C2D91',
+  pink600: '#9B2677',
+  rose600: '#E11D48',
+  orange600: '#EA580C',
+  amber500: '#C5A059',
+  amber600: '#B89758',
+  amber700: '#A17D3B',
+  amber800: '#785A1D',
+  green500: '#22C55E',
+  green600: '#16A34A',
+  green700: '#15803D',
+  green800: '#166534',
+  emerald500: '#10B981',
+  emerald600: '#059669',
+  grey600: '#616161',
+  redErrorText: '#991B1B',
+  materialGreen: '#2E7D32',
+  googleBlue: '#4285F4',
+  googleGreen: '#34A853',
+  googleOrange: '#F57C00',
+  googleRed: '#E53935',
+  googlePurple: '#5C2D91',
+  googleTeal: '#00897B',
+
+  // ─── NPM / Package / Tailwind Spectrum Helpers ───
+  npmRed: '#CB3837',
+  npmRedTint: '#CB383714',
+  npmRedBorder: '#CB383733',
+  npmDark: '#20232A',
+  reactCyan: '#61DAFB',
+  pink500: '#EC4899',
+  pink400: '#F472B6',
+  rose500: '#F43F5E',
+  sky500: '#0EA5E9',
+  sky400: '#38BDF8',
+  indigo500: '#6366F1',
+  purple500: '#8B5CF6',
+  purple400: '#A78BFA',
+  fuchsia500: '#D946EF',
+  emerald400: '#34D399',
+  amber400: '#FBBF24',
+  orange500: '#F97316',
+  red500: '#EF4444',
+  teal400: '#2DD4BF',
+  teal500: '#14B8A6',
+  lime500: '#84CC16',
+  yellow400: '#FACC15',
+  yellow500: '#EAB308',
+  slate800: '#1E293B',
+  slate850: '#0F172A',
+
+  // ─── Bundle / Extended Spectrum ───
+  reanimatedNavy: '#001A72',
+  expoViolet: '#5A29E4',
+  hermesPurple: '#5B44E0',
+  cyan500: '#06B6D4',
+  indigo400: '#818CF8',
+  indigo600Alt: '#4F46E5',
+  purple800: '#6B21A8',
+  purple900: '#581C87',
+  purple50: '#FAF5FF',
+  purple100: '#F3E8FF',
+  purple200: '#E9D5FF',
+  rose700: '#BE123C',
+  red600: '#DC2626',
+  red50: '#FFFBFB',
+  red100: '#FEE2E2',
+  amber100: '#FEF3C7',
+  amber200: '#FDE68A',
+  amber800Warm: '#B45309',
+  yellow200: '#FEF08A',
+  yellow800: '#854D0E',
+  green100: '#DCFCE7',
+  emerald100: '#D1FAE5',
+  emerald700: '#047857',
+  pink100: '#FCE7F3',
+  sky100: '#E0F2FE',
+  teal100: '#CCFBF1',
+  teal700: '#0F766E',
+  purple700: '#6D28D9',
+  indigo50: '#EEF2FF',
+  gray100: '#F3F4F6',
+  gray200: '#E5E7EB',
+  gray500: '#6B7280',
+  gray600: '#4B5563',
+
+  // ─── Tint Backgrounds / Borders (Theme-Aware) ───
+  errorCardBg: '#FFF1F3',
+  warnCardBg: '#FDFBF4',
+  blueTintBg: '#EFF6FF',
+  purpleTintBg: '#F6F0FA',
+  purpleTint2: '#EFE7F7',
+  roseBg: '#FDF2F8',
+  roseBorder: '#FBCFE8',
+  errorBorder: '#FECDD3',
+  amberBg: '#FDF8EE',
+  amberBorder: '#E8D6AC',
+  emeraldBg: '#ECFDF5',
+  emeraldBorder: '#A7F3D0',
+  blueBg: '#EFF6FF',
+  blueBorder: '#BFDBFE',
+  greenBg: '#F0FDF4',
+  greenBorder: '#BBF7D0',
+  purpleBg: '#F6F0FA',
+  purpleBorder: '#E4D5F2',
+  greyBg: '#F5F4F8',
+  greyBorder: '#E3DFEC',
+  paperBg: '#FBF9FC',
+  contentBg: '#F8F7FB',
+
+  // ─── Toast / Glass / Chip Tokens ───
+  toastBg: '#0F172AEE',
+  toastBorder: '#33415588',
+  mintGreenBg: '#ECFDF5',
+  mintGreenBorder: '#A7F3D0',
+  mintGreenText: '#059669',
+  amberWarmBg: '#FFFBEB',
+  amberWarmBorder: '#FDE68A',
+  amberWarmText: '#92400E',
+  violetSoftBg: '#EDE9FE',
+  violetSoftBorder: '#DDD6FE',
+  violetSoftText: '#7C3AED',
+  skySoftBg: '#E0F2FE',
+  skySoftBorder: '#BAE6FD',
+  skySoftText: '#0284C7',
+
+  // ─── Domain Colors (Thai Airways Themed) ───
+  domainColors: [
+    '#5C2D91',
+    '#9B2677',
+    '#C5A059',
+    '#4B1B7D',
+    '#0D9488',
+    '#2563EB',
+    '#B89758',
+    '#059669',
+    '#3B1359',
+    '#D1208A',
+  ],
+};
+
+const DarkColors = {
+  primaryLight: '#1C1628',        // Thai Dark Card
+  purple: '#B68FE8',              // Luminous Thai Orchid
+  purpleShade50: '#2A1C3E',
+  offerPurple: '#F472B6',
+  grayBorderSecondary: '#362C4E',
+  grayBackground: '#130F1F',      // Thai Airways Midnight Sky
+  grayText: '#A197B8',
+  grayTextWeak: '#756C8C',
+  greenColor: '#34D399',
+  graySurface: '#362C4E',
+  skyBlue: '#60A5FA',
+  primaryBlack: '#F7F5FC',
+  grayTextStrong: '#F7F5FC',
+  dividerColor: '#2B2240',
+  warningIconGold: '#E5C158',     // Thai Luminous Gold
+  shadowColorString: '#000000',
+  errorColor: '#F87171',
+  lightOrange: '#FDE68A',
+  darkOrange: '#D4AF37',
+  successGreen: '#34D399',
+  purpleShade700: '#8E4DBE',
+  greenStatus: '#064E3B',
+  greenBaggageText: '#34D399',
+  paleYellow: '#78350F',
+
+  white: '#FFFFFF',
+  black: '#000000',
+  brandPurple: '#7B3DB8',
+  liveGreen: '#34D399',
+  firebaseOrange: '#F59E0B',
+  greenA400: '#00E676',
+
+  slate900: '#0B0813',
+  slate700: '#261F38',
+  slate600: '#3D3357',
+  slate500: '#5C4F7F',
+  slate400: '#8E82B0',
+  slate200: '#C7BEDE',
+  slate100: '#E4DFEE',
+  slate50: '#F3F0F8',
+  gray700: '#312847',
+  gray300: '#C7BEDE',
+  highlightYellow: '#FDE047',
+  yellowHighlight: '#FFE44D',
+
+  teal600: '#0D9488',
+  cyan600: '#0891B2',
+  sky600: '#0284C7',
+  blue500: '#3B82F6',
+  blue600: '#2563EB',
+  blue700: '#1D4ED8',
+  blue800: '#1E40AF',
+  indigo600: '#6366F1',
+  violet600: '#8B5CF6',
+  violet500: '#A78BFA',
+  purpleText: '#C084FC',
+  pink600: '#F472B6',
+  rose600: '#FB7185',
+  orange600: '#FB923C',
+  amber500: '#E5C158',
+  amber600: '#D4AF37',
+  amber700: '#C5A059',
+  amber800: '#B89758',
+  green500: '#22C55E',
+
+  // ─── Toast / Glass / Chip Tokens (Dark) ───
+  toastBg: '#1E293BEE',
+  toastBorder: '#47556988',
+  mintGreenBg: '#064E3B66',
+  mintGreenBorder: '#05966988',
+  mintGreenText: '#34D399',
+  amberWarmBg: '#451A0366',
+  amberWarmBorder: '#D9770688',
+  amberWarmText: '#FCD34D',
+  violetSoftBg: '#3B076466',
+  violetSoftBorder: '#7C3AED88',
+  violetSoftText: '#C084FC',
+  skySoftBg: '#082F4966',
+  skySoftBorder: '#0284C788',
+  skySoftText: '#38BDF8',
+  green600: '#16A34A',
+  green700: '#15803D',
+  green800: '#166534',
+  emerald500: '#10B981',
+  emerald600: '#059669',
+  grey600: '#756C8C',
+  redErrorText: '#FCA5A5',
+  materialGreen: '#2E7D32',
+  googleBlue: '#60A5FA',
+  googleGreen: '#34D399',
+  googleOrange: '#FBBF24',
+  googleRed: '#F87171',
+  googlePurple: '#C084FC',
+  googleTeal: '#2DD4BF',
+
+  // ─── NPM / Package / Tailwind Spectrum Helpers ───
+  npmRed: '#CB3837',
+  npmRedTint: '#CB383714',
+  npmRedBorder: '#CB383733',
+  npmDark: '#20232A',
+  reactCyan: '#61DAFB',
+  pink500: '#EC4899',
+  pink400: '#F472B6',
+  rose500: '#F43F5E',
+  sky500: '#0EA5E9',
+  sky400: '#38BDF8',
+  indigo500: '#6366F1',
+  purple500: '#8B5CF6',
+  purple400: '#A78BFA',
+  fuchsia500: '#D946EF',
+  emerald400: '#34D399',
+  amber400: '#FBBF24',
+  orange500: '#F97316',
+  red500: '#EF4444',
+  teal400: '#2DD4BF',
+  teal500: '#14B8A6',
+  lime500: '#84CC16',
+  yellow400: '#FACC15',
+  yellow500: '#EAB308',
+  slate800: '#1E293B',
+  slate850: '#0F172A',
+
+  // ─── Bundle / Extended Spectrum ───
+  reanimatedNavy: '#6B8CFF',
+  expoViolet: '#A78BFA',
+  hermesPurple: '#9B8AFF',
+  cyan500: '#22D3EE',
+  indigo400: '#A5B4FC',
+  indigo600Alt: '#818CF8',
+  purple800: '#C084FC',
+  purple900: '#A855F7',
+  purple50: '#2D1B40',
+  purple100: '#3B2252',
+  purple200: '#4C2D6B',
+  rose700: '#FB7185',
+  red600: '#F87171',
+  red50: '#34151B',
+  red100: '#451A1A',
+  amber100: '#422D0D',
+  amber200: '#5C3D0F',
+  amber800Warm: '#FBBF24',
+  yellow200: '#5C3D0F',
+  yellow800: '#FBBF24',
+  green100: '#122D1B',
+  emerald100: '#122D25',
+  emerald700: '#34D399',
+  pink100: '#341626',
+  sky100: '#0C2744',
+  teal100: '#134E4A',
+  teal700: '#2DD4BF',
+  purple700: '#8B5CF6',
+  indigo50: '#1E1B3A',
+  gray100: '#2A2438',
+  gray200: '#362C4E',
+  gray500: '#A197B8',
+  gray600: '#8F8A9E',
+
+  errorCardBg: '#34151B',
+  warnCardBg: '#342B16',
+  blueTintBg: '#15243B',
+  purpleTintBg: '#281B3B',
+  purpleTint2: '#32224A',
+  roseBg: '#341626',
+  roseBorder: '#782352',
+  errorBorder: '#782330',
+  amberBg: '#342914',
+  amberBorder: '#785E22',
+  emeraldBg: '#122D25',
+  emeraldBorder: '#236952',
+  blueBg: '#13243D',
+  blueBorder: '#234978',
+  greenBg: '#122D1B',
+  greenBorder: '#236939',
+  purpleBg: '#2D1B40',
+  purpleBorder: '#62358F',
+  greyBg: '#1C1628',
+  greyBorder: '#362C4E',
+  paperBg: '#181224',
+  contentBg: '#130F1F',
+
+  domainColors: [
+    '#B68FE8',
+    '#F472B6',
+    '#E5C158',
+    '#8E4DBE',
+    '#2DD4BF',
+    '#60A5FA',
+    '#D4AF37',
+    '#34D399',
+    '#A78BFA',
+    '#FB7185',
+  ],
+};
+
+export const getThemeColors = (isDark: boolean) => {
+  return isDark ? DarkColors : LightColors;
+};
+
+export const AppColors = {} as typeof LightColors;
+Object.assign(AppColors, LightColors);
+
+export const updateAppColorsTheme = (isDark: boolean) => {
+  Object.assign(AppColors, getThemeColors(isDark));
+};
+
+export default AppColors;

package/src/styles/AppFonts.ts

@@ -0,0 +1,8 @@
+export const AppFonts = {
+  interRegular: 'Inter-Regular',
+  interMedium: 'Inter-Medium',
+  interBold: 'Inter-Bold',
+  Sfprotext: 'Inter-Regular',
+};
+
+export default AppFonts;

package/src/styles/common.ts

@@ -0,0 +1,209 @@
+import {StyleSheet} from 'react-native';
+import {AppFonts} from './AppFonts';
+import {AppColors} from './AppColors';
+
+// Shared styles for the Inspector UI (repeated patterns + page-level layout).
+// Built dynamically so dark-mode colors stay in sync with toggleGlobalTheme()
+// (see rebuildCommonStyles wired into styles/index.ts).
+
+const commonStyles: Record<string, any> = {};
+
+const buildCommonStyles = (colors: any) => {
+  const newStyles = StyleSheet.create({
+    // ─── Layout ──────────────────────────────────────────────────────────────
+    pageContainer: {
+      flex: 1,
+      backgroundColor: colors.grayBackground,
+    },
+    listHeader: {
+      paddingHorizontal: 16,
+      paddingTop: 12,
+      paddingBottom: 8,
+    },
+    rowCenter: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+    },
+    rowCenterWrap: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      flexWrap: 'wrap',
+    },
+    rowSpaceBetween: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+    },
+
+    // ─── Cards / rows ────────────────────────────────────────────────────────
+    card: {
+      backgroundColor: colors.primaryLight,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: colors.grayBorderSecondary,
+    },
+    listCard: {
+      marginHorizontal: 16,
+      marginVertical: 6,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: colors.grayBorderSecondary,
+      backgroundColor: colors.primaryLight,
+      padding: 14,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 12,
+      shadowColor: colors.black,
+      shadowOffset: {width: 0, height: 2},
+      shadowOpacity: 0.04,
+      shadowRadius: 4,
+      elevation: 2,
+    },
+    consoleRow: {
+      marginHorizontal: 12,
+      marginVertical: 3,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: colors.grayBorderSecondary,
+      padding: 10,
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'flex-start',
+    },
+
+    // ─── Search bar ──────────────────────────────────────────────────────────
+    searchBar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.grayBackground,
+      borderRadius: 8,
+      marginHorizontal: 16,
+      marginTop: 16,
+      marginBottom: 12,
+      paddingHorizontal: 10,
+      borderWidth: 1,
+      borderColor: colors.dividerColor,
+      height: 36,
+    },
+
+    // ─── Tabs / pills ────────────────────────────────────────────────────────
+    tabBarStrip: {
+      backgroundColor: colors.primaryLight,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.dividerColor,
+      paddingVertical: 6,
+    },
+    subTabPill: {
+      paddingVertical: 6,
+      paddingHorizontal: 14,
+      borderRadius: 8,
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: 6,
+      backgroundColor: `${colors.black}08`,
+      borderWidth: 1,
+      borderColor: 'transparent',
+    },
+    subTabPillActive: {
+      backgroundColor: colors.purple,
+      borderColor: colors.purple,
+    },
+    subTabPillText: {
+      fontFamily: AppFonts.interMedium,
+      fontSize: 12,
+      color: colors.grayTextStrong,
+    },
+    subTabPillTextActive: {
+      fontFamily: AppFonts.interBold,
+      fontSize: 12,
+      color: colors.white,
+    },
+    innerTab: {
+      paddingVertical: 8,
+      paddingHorizontal: 4,
+      borderBottomWidth: 2,
+      borderBottomColor: 'transparent',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    countBadge: {
+      minWidth: 20,
+      height: 18,
+      borderRadius: 9,
+      paddingHorizontal: 5,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.grayBackground,
+    },
+
+    // ─── Header / address bar ────────────────────────────────────────────────
+    addressBar: {
+      paddingHorizontal: 12,
+      paddingTop: 6,
+      paddingBottom: 6,
+      backgroundColor: colors.primaryLight,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.dividerColor,
+    },
+    addressBarInner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: colors.grayBackground,
+      borderRadius: 8,
+      borderWidth: 1.5,
+      borderColor: colors.grayBorderSecondary,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+      gap: 8,
+    },
+    inspectBanner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      backgroundColor: colors.purpleShade50,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.dividerColor,
+    },
+
+    // ─── Badges / buttons ────────────────────────────────────────────────────
+    badgeActive: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      backgroundColor: colors.greenStatus,
+      paddingHorizontal: 8,
+      paddingVertical: 3,
+      borderRadius: 12,
+    },
+    iconButton: {
+      width: 26,
+      height: 26,
+      borderRadius: 13,
+      backgroundColor: colors.grayBackground,
+      borderWidth: 1,
+      borderColor: colors.grayBorderSecondary,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+
+  // Clear old keys and copy new ones (keeps the exported object identity).
+  Object.keys(commonStyles).forEach(key => delete commonStyles[key]);
+  Object.assign(commonStyles, newStyles);
+};
+
+// Initial build
+buildCommonStyles(AppColors);
+
+export const rebuildCommonStyles = (colors: any) => {
+  buildCommonStyles(colors);
+};
+
+export default commonStyles;