@buoy-gg/highlight-updates 2.1.9 → 2.1.11

package/lib/module/highlight-updates/components/IdentifierBadge.js

@@ -1 +1,259 @@
-"use strict";import React from"react";import{View,Text,StyleSheet}from"react-native";import{Box,Hash,Layers,Eye,Search,FileCode,buoyColors}from"@buoy-gg/shared-ui";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const IDENTIFIER_CONFIG={viewType:{label:"ViewType",shortLabel:"View",color:buoyColors.primary,icon:Box},testID:{label:"testID",shortLabel:"test",color:buoyColors.success,icon:Hash},nativeID:{label:"nativeID",shortLabel:"native",color:"#f59e0b",icon:Hash},component:{label:"Component",shortLabel:"Comp",color:"#a855f7",icon:FileCode},accessibilityLabel:{label:"a11y",shortLabel:"a11y",color:"#ec4899",icon:Eye},nativeTag:{label:"tag",shortLabel:"tag",color:buoyColors.textMuted,icon:Layers},any:{label:"Any",shortLabel:"Any",color:buoyColors.warning,icon:Search}};export function IdentifierBadge({type:e,value:o,compact:t=!1,badgeOnly:l=!1,valueOnly:a=!1,shortLabel:r=!1,showIcon:n=!1}){const s=IDENTIFIER_CONFIG[e],i=s.icon,c=r?s.shortLabel:s.label;return a?_jsx(Text,{style:[styles.valueOnly,t&&styles.valueOnlyCompact,{color:s.color}],numberOfLines:1,children:o}):_jsxs(View,l?{style:[styles.badgeOnly,t&&styles.badgeOnlyCompact,{backgroundColor:s.color+"20",borderColor:s.color+"40"}],children:[n&&_jsx(i,{size:t?10:12,color:s.color}),_jsx(Text,{style:[styles.badgeOnlyText,t&&styles.badgeOnlyTextCompact,{color:s.color}],children:c})]}:{style:[styles.container,t&&styles.containerCompact],children:[_jsxs(View,{style:[styles.badge,t&&styles.badgeCompact,{backgroundColor:s.color+"20"}],children:[n&&_jsx(i,{size:t?8:10,color:s.color}),_jsx(Text,{style:[styles.badgeText,t&&styles.badgeTextCompact,{color:s.color}],children:c})]}),_jsx(Text,{style:[styles.value,t&&styles.valueCompact],numberOfLines:1,children:o})]})}export function CategoryBadge({type:e,count:o,isSelected:t=!1,showIcon:l=!0}){const a=IDENTIFIER_CONFIG[e],r=a.icon;return _jsxs(View,{style:[styles.categoryBadge,{backgroundColor:a.color+"15",borderColor:t?a.color:a.color+"40",borderWidth:t?2:1}],children:[l&&_jsx(r,{size:12,color:a.color}),_jsx(Text,{style:[styles.categoryBadgeText,{color:a.color}],children:a.label}),void 0!==o&&_jsx(View,{style:[styles.categoryBadgeCount,{backgroundColor:a.color+"25"}],children:_jsx(Text,{style:[styles.categoryBadgeCountText,{color:a.color}],children:o})})]})}const styles=StyleSheet.create({container:{flexDirection:"row",alignItems:"center",gap:6},containerCompact:{gap:4},badge:{flexDirection:"row",alignItems:"center",paddingVertical:3,paddingHorizontal:6,borderRadius:4,gap:4},badgeCompact:{paddingVertical:2,paddingHorizontal:5,gap:3},badgeText:{fontSize:10,fontWeight:"700"},badgeTextCompact:{fontSize:9},value:{fontSize:12,color:buoyColors.text,fontFamily:"monospace",flex:1},valueCompact:{fontSize:11},badgeOnly:{flexDirection:"row",alignItems:"center",paddingVertical:4,paddingHorizontal:8,borderRadius:6,borderWidth:1,gap:5},badgeOnlyCompact:{paddingVertical:2,paddingHorizontal:6,borderRadius:4,gap:4},badgeOnlyText:{fontSize:11,fontWeight:"600"},badgeOnlyTextCompact:{fontSize:9,fontWeight:"700"},valueOnly:{fontSize:12,fontFamily:"monospace"},valueOnlyCompact:{fontSize:11},categoryBadge:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingLeft:10,paddingRight:6,borderRadius:8,gap:6},categoryBadgeText:{fontSize:11,fontWeight:"600"},categoryBadgeCount:{paddingHorizontal:6,paddingVertical:2,borderRadius:10,minWidth:20,alignItems:"center"},categoryBadgeCountText:{fontSize:10,fontWeight:"600"}});export default IdentifierBadge;
+"use strict";
+
+/**
+ * IdentifierBadge
+ *
+ * Shared badge component for displaying component identifiers.
+ * Used throughout the highlight-updates package for consistent styling.
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { Box, Hash, Layers, Eye, Search, FileCode, buoyColors } from "@buoy-gg/shared-ui";
+
+// All possible identifier types
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Badge configuration for each identifier type
+export const IDENTIFIER_CONFIG = {
+  viewType: {
+    label: "ViewType",
+    shortLabel: "View",
+    color: buoyColors.primary,
+    icon: Box
+  },
+  testID: {
+    label: "testID",
+    shortLabel: "test",
+    color: buoyColors.success,
+    icon: Hash
+  },
+  nativeID: {
+    label: "nativeID",
+    shortLabel: "native",
+    color: "#f59e0b",
+    // amber
+    icon: Hash
+  },
+  component: {
+    label: "Component",
+    shortLabel: "Comp",
+    color: "#a855f7",
+    // purple
+    icon: FileCode
+  },
+  accessibilityLabel: {
+    label: "a11y",
+    shortLabel: "a11y",
+    color: "#ec4899",
+    // pink
+    icon: Eye
+  },
+  nativeTag: {
+    label: "tag",
+    shortLabel: "tag",
+    color: buoyColors.textMuted,
+    icon: Layers
+  },
+  any: {
+    label: "Any",
+    shortLabel: "Any",
+    color: buoyColors.warning,
+    icon: Search
+  }
+};
+export function IdentifierBadge({
+  type,
+  value,
+  compact = false,
+  badgeOnly = false,
+  valueOnly = false,
+  shortLabel = false,
+  showIcon = false
+}) {
+  const config = IDENTIFIER_CONFIG[type];
+  const IconComponent = config.icon;
+  const label = shortLabel ? config.shortLabel : config.label;
+  if (valueOnly) {
+    return /*#__PURE__*/_jsx(Text, {
+      style: [styles.valueOnly, compact && styles.valueOnlyCompact, {
+        color: config.color
+      }],
+      numberOfLines: 1,
+      children: value
+    });
+  }
+  if (badgeOnly) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.badgeOnly, compact && styles.badgeOnlyCompact, {
+        backgroundColor: config.color + "20",
+        borderColor: config.color + "40"
+      }],
+      children: [showIcon && /*#__PURE__*/_jsx(IconComponent, {
+        size: compact ? 10 : 12,
+        color: config.color
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.badgeOnlyText, compact && styles.badgeOnlyTextCompact, {
+          color: config.color
+        }],
+        children: label
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, compact && styles.containerCompact],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.badge, compact && styles.badgeCompact, {
+        backgroundColor: config.color + "20"
+      }],
+      children: [showIcon && /*#__PURE__*/_jsx(IconComponent, {
+        size: compact ? 8 : 10,
+        color: config.color
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.badgeText, compact && styles.badgeTextCompact, {
+          color: config.color
+        }],
+        children: label
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.value, compact && styles.valueCompact],
+      numberOfLines: 1,
+      children: value
+    })]
+  });
+}
+
+// Standalone badge (no value) for category selection
+
+export function CategoryBadge({
+  type,
+  count,
+  isSelected = false,
+  showIcon = true
+}) {
+  const config = IDENTIFIER_CONFIG[type];
+  const IconComponent = config.icon;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.categoryBadge, {
+      backgroundColor: config.color + "15",
+      borderColor: isSelected ? config.color : config.color + "40",
+      borderWidth: isSelected ? 2 : 1
+    }],
+    children: [showIcon && /*#__PURE__*/_jsx(IconComponent, {
+      size: 12,
+      color: config.color
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.categoryBadgeText, {
+        color: config.color
+      }],
+      children: config.label
+    }), count !== undefined && /*#__PURE__*/_jsx(View, {
+      style: [styles.categoryBadgeCount, {
+        backgroundColor: config.color + "25"
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.categoryBadgeCountText, {
+          color: config.color
+        }],
+        children: count
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  // Full badge with value
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  containerCompact: {
+    gap: 4
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 3,
+    paddingHorizontal: 6,
+    borderRadius: 4,
+    gap: 4
+  },
+  badgeCompact: {
+    paddingVertical: 2,
+    paddingHorizontal: 5,
+    gap: 3
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  badgeTextCompact: {
+    fontSize: 9
+  },
+  value: {
+    fontSize: 12,
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  valueCompact: {
+    fontSize: 11
+  },
+  // Badge only (no value)
+  badgeOnly: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 6,
+    borderWidth: 1,
+    gap: 5
+  },
+  badgeOnlyCompact: {
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+    borderRadius: 4,
+    gap: 4
+  },
+  badgeOnlyText: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  badgeOnlyTextCompact: {
+    fontSize: 9,
+    fontWeight: "700"
+  },
+  // Value only
+  valueOnly: {
+    fontSize: 12,
+    fontFamily: "monospace"
+  },
+  valueOnlyCompact: {
+    fontSize: 11
+  },
+  // Category badge (for filter selection)
+  categoryBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingLeft: 10,
+    paddingRight: 6,
+    borderRadius: 8,
+    gap: 6
+  },
+  categoryBadgeText: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  categoryBadgeCount: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 10,
+    minWidth: 20,
+    alignItems: "center"
+  },
+  categoryBadgeCountText: {
+    fontSize: 10,
+    fontWeight: "600"
+  }
+});
+export default IdentifierBadge;

package/lib/module/highlight-updates/components/IsolatedRenderList.js

@@ -1 +1,174 @@
-"use strict";import React,{useState,useEffect,useRef,useCallback,memo,useMemo}from"react";import{View,Text,FlatList,StyleSheet}from"react-native";import{RenderTracker}from"../utils/RenderTracker";import{RenderListItem}from"./RenderListItem";import{Activity,Lock,buoyColors}from"@buoy-gg/shared-ui";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const FREE_TIER_COMPONENT_LIMIT=25;function IsolatedRenderListInner({searchText:e,filters:t,onSelectRender:r,onStatsChange:n,onRendersChange:o,isTracking:s,isPro:l=!1}){const[i,a]=useState(()=>RenderTracker.getFilteredRenders(e)),c=useRef(null);useEffect(()=>RenderTracker.subscribe(()=>{const t=RenderTracker.getFilteredRenders(e);a(t),n(RenderTracker.getStats()),o?.(t)}),[e,n,o]),useEffect(()=>{const t=RenderTracker.getFilteredRenders(e);a(t),o?.(t)},[e,t,o]);const d=useMemo(()=>l?i:i.slice(0,25),[i,l]),m=useMemo(()=>l?0:Math.max(0,i.length-25),[i.length,l]),u=useCallback(e=>e.id,[]),x=useCallback(({item:e,index:t})=>_jsx(RenderListItem,{render:e,onPress:()=>r(e,t,d)}),[r,d]),y=useCallback(()=>m<=0?null:_jsxs(View,{style:styles.lockedBanner,children:[_jsx(Lock,{size:14,color:buoyColors.warning}),_jsxs(Text,{style:styles.lockedBannerText,children:[m," more ",1===m?"component":"components"," locked"]}),_jsx(Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]}),[m]);return 0===i.length?_jsxs(View,{style:styles.emptyState,children:[_jsx(Activity,{size:32,color:buoyColors.textMuted}),_jsx(Text,{style:styles.emptyTitle,children:"No renders tracked"}),_jsx(Text,{style:styles.emptyText,children:s?"Component renders will appear here":"Enable tracking to start capturing"})]}):_jsx(FlatList,{ref:c,data:d,renderItem:x,keyExtractor:u,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1,ListFooterComponent:y})}export const IsolatedRenderList=memo(IsolatedRenderListInner);const styles=StyleSheet.create({listContent:{paddingTop:8},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:buoyColors.text,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:buoyColors.textMuted,fontSize:12,textAlign:"center"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:16,marginTop:8,gap:8},lockedBannerText:{color:buoyColors.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:buoyColors.textMuted,fontSize:12}});export default IsolatedRenderList;
+"use strict";
+
+/**
+ * IsolatedRenderList
+ *
+ * Performance-optimized component that isolates the render tracking subscription
+ * to prevent parent re-renders. Only this component re-renders when new renders
+ * are tracked, keeping the modal UI stable.
+ *
+ * Following the optimization guide: move subscriptions to child components to
+ * prevent parent re-renders.
+ */
+
+import React, { useState, useEffect, useRef, useCallback, memo, useMemo } from "react";
+import { View, Text, FlatList, StyleSheet } from "react-native";
+import { RenderTracker } from "../utils/RenderTracker";
+import { RenderListItem } from "./RenderListItem";
+import { Activity, Lock, buoyColors } from "@buoy-gg/shared-ui";
+
+// Free tier limit for tracked components
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FREE_TIER_COMPONENT_LIMIT = 25;
+/**
+ * Isolated list component that owns the render subscription.
+ * Parent component does NOT re-render when renders change.
+ */
+function IsolatedRenderListInner({
+  searchText,
+  filters,
+  onSelectRender,
+  onStatsChange,
+  onRendersChange,
+  isTracking,
+  isPro = false
+}) {
+  // Initialize with current data to avoid flash of empty state
+  const [renders, setRenders] = useState(() => RenderTracker.getFilteredRenders(searchText));
+  const flatListRef = useRef(null);
+
+  // Subscribe to RenderTracker updates - ONLY this component re-renders
+  useEffect(() => {
+    const unsubscribe = RenderTracker.subscribe(() => {
+      const newRenders = RenderTracker.getFilteredRenders(searchText);
+      setRenders(newRenders);
+      // Notify parent of stats via callback (parent uses ref, no re-render)
+      onStatsChange(RenderTracker.getStats());
+      // Notify parent of renders list for navigation
+      onRendersChange?.(newRenders);
+    });
+    return unsubscribe;
+  }, [searchText, onStatsChange, onRendersChange]);
+
+  // Update filtered renders when search or filters change
+  useEffect(() => {
+    const newRenders = RenderTracker.getFilteredRenders(searchText);
+    setRenders(newRenders);
+    onRendersChange?.(newRenders);
+  }, [searchText, filters, onRendersChange]);
+
+  // Limit visible components for free tier
+  const visibleRenders = useMemo(() => {
+    if (isPro) return renders;
+    return renders.slice(0, FREE_TIER_COMPONENT_LIMIT);
+  }, [renders, isPro]);
+
+  // Calculate locked component count
+  const lockedComponentCount = useMemo(() => {
+    if (isPro) return 0;
+    return Math.max(0, renders.length - FREE_TIER_COMPONENT_LIMIT);
+  }, [renders.length, isPro]);
+
+  // Stable keyExtractor - moved outside to avoid recreation
+  const keyExtractor = useCallback(item => item.id, []);
+
+  // Stable renderItem - uses stable onSelectRender callback
+  const renderItem = useCallback(({
+    item,
+    index
+  }) => /*#__PURE__*/_jsx(RenderListItem, {
+    render: item,
+    onPress: () => onSelectRender(item, index, visibleRenders)
+  }), [onSelectRender, visibleRenders]);
+
+  // Locked banner footer
+  const renderFooter = useCallback(() => {
+    if (lockedComponentCount <= 0) return null;
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.lockedBanner,
+      children: [/*#__PURE__*/_jsx(Lock, {
+        size: 14,
+        color: buoyColors.warning
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.lockedBannerText,
+        children: [lockedComponentCount, " more ", lockedComponentCount === 1 ? 'component' : 'components', " locked"]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.lockedBannerSubtext,
+        children: "Upgrade to Pro"
+      })]
+    });
+  }, [lockedComponentCount]);
+
+  // Show empty state when no renders
+  if (renders.length === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.emptyState,
+      children: [/*#__PURE__*/_jsx(Activity, {
+        size: 32,
+        color: buoyColors.textMuted
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyTitle,
+        children: "No renders tracked"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        children: isTracking ? "Component renders will appear here" : "Enable tracking to start capturing"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(FlatList, {
+    ref: flatListRef,
+    data: visibleRenders,
+    renderItem: renderItem,
+    keyExtractor: keyExtractor,
+    contentContainerStyle: styles.listContent,
+    showsVerticalScrollIndicator: true,
+    initialNumToRender: 10,
+    maxToRenderPerBatch: 10,
+    windowSize: 10,
+    scrollEnabled: false,
+    ListFooterComponent: renderFooter
+  });
+}
+
+// Memoize to prevent re-renders from parent state changes
+export const IsolatedRenderList = /*#__PURE__*/memo(IsolatedRenderListInner);
+const styles = StyleSheet.create({
+  listContent: {
+    paddingTop: 8
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyTitle: {
+    color: buoyColors.text,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: buoyColors.textMuted,
+    fontSize: 12,
+    textAlign: "center"
+  },
+  lockedBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    marginTop: 8,
+    gap: 8
+  },
+  lockedBannerText: {
+    color: buoyColors.warning,
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  lockedBannerSubtext: {
+    color: buoyColors.textMuted,
+    fontSize: 12
+  }
+});
+export default IsolatedRenderList;