react-native-xenon 0.2.1 → 0.4.0

package/src/ui/components/bubble/Bubble.tsx

@@ -1,91 +1,127 @@
-import { useContext, useMemo, type MutableRefObject } from 'react';
+import { useContext, useMemo, useRef, useState, type MutableRefObject } from 'react';
 import {
   Animated,
   Image,
   PanResponder,
   StyleSheet,
+  View,
   type PanResponderGestureState,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
-import icons from '../../../icons';
-import colors from '../../../colors';
+import icons from '../../../theme/icons';
+import colors from '../../../theme/colors';
+import { clamp, getVerticalSafeMargin } from '../../../core/utils';
 
 interface BubbleProps {
   bubbleSize: number;
+  idleBubbleOpacity: number;
   pan: MutableRefObject<Animated.ValueXY>;
+  screenWidth: number;
+  screenHeight: number;
 }
 
-export default function Bubble({ bubbleSize, pan }: BubbleProps) {
-  const { setDebuggerVisibility, screenWidth, screenHeight, verticalSafeMargin } =
-    useContext(MainContext)!;
-
-  const panResponder = useMemo(
-    () =>
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: () => {
-          pan.current.setOffset({
-            // @ts-ignore
-            x: pan.current.x._value,
-            // @ts-ignore
-            y: pan.current.y._value,
-          });
-          pan.current.setValue({ x: 0, y: 0 });
-        },
-        onPanResponderMove: Animated.event([null, { dx: pan.current.x, dy: pan.current.y }], {
-          useNativeDriver: false,
-        }),
-        onPanResponderRelease: (_, gesture: PanResponderGestureState) => {
-          const isTapGesture =
-            gesture.dx > -10 && gesture.dx < 10 && gesture.dy > -10 && gesture.dy < 10;
+export default function Bubble({
+  bubbleSize,
+  idleBubbleOpacity,
+  pan,
+  screenWidth,
+  screenHeight,
+}: BubbleProps) {
+  const iconSize = bubbleSize * 0.65;
 
-          if (isTapGesture) setDebuggerVisibility('panel');
+  const { setDebuggerState } = useContext(MainContext)!;
+  const [idleOpacity, setIdleOpacity] = useState(idleBubbleOpacity);
+  const opacityTimer = useRef<NodeJS.Timeout | null>(null);
 
-          pan.current.flattenOffset();
+  const panResponder = useMemo(() => {
+    const clearTimer = () => {
+      if (opacityTimer.current) clearTimeout(opacityTimer.current);
+      opacityTimer.current = null;
+    };
 
-          const finalX =
-            gesture.moveX < (screenWidth - bubbleSize) / 2 ? 0 : screenWidth - bubbleSize;
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        pan.current.setOffset({
+          // @ts-ignore
+          x: pan.current.x._value,
+          // @ts-ignore
+          y: pan.current.y._value,
+        });
 
-          const finalY = Math.min(
-            Math.max(verticalSafeMargin, gesture.moveY),
-            screenHeight - verticalSafeMargin - bubbleSize,
-          );
+        pan.current.setValue({ x: 0, y: 0 });
 
-          Animated.spring(pan.current, {
-            toValue: { x: finalX, y: finalY },
-            useNativeDriver: false,
-          }).start();
-        },
+        clearTimer();
+        setIdleOpacity(1);
+      },
+      onPanResponderMove: Animated.event([null, { dx: pan.current.x, dy: pan.current.y }], {
+        useNativeDriver: false,
       }),
-    [bubbleSize, pan, screenHeight, screenWidth, setDebuggerVisibility, verticalSafeMargin],
-  );
+      onPanResponderRelease: (_, gesture: PanResponderGestureState) => {
+        const isTapGesture =
+          gesture.dx > -10 && gesture.dx < 10 && gesture.dy > -10 && gesture.dy < 10;
+
+        if (isTapGesture)
+          setDebuggerState(draft => {
+            draft.visibility = 'panel';
+          });
+
+        pan.current.flattenOffset();
+
+        const finalX =
+          gesture.moveX < (screenWidth - bubbleSize) / 2 ? 0 : screenWidth - bubbleSize;
+
+        const verticalSafeMargin = getVerticalSafeMargin(screenHeight);
+
+        const finalY = clamp(
+          gesture.moveY,
+          verticalSafeMargin,
+          screenHeight - verticalSafeMargin - bubbleSize,
+        );
+
+        Animated.spring(pan.current, {
+          toValue: { x: finalX, y: finalY },
+          useNativeDriver: false,
+        }).start(({ finished }) => {
+          if (!finished) return;
+
+          opacityTimer.current = setTimeout(() => {
+            setIdleOpacity(0.5);
+            clearTimer();
+          }, 1000);
+        });
+      },
+    });
+  }, [bubbleSize, pan, screenHeight, screenWidth, setDebuggerState]);
 
   return (
-    <Animated.View
-      {...panResponder.panHandlers}
-      style={[
-        styles.bubble,
-        {
-          width: bubbleSize,
-          height: bubbleSize,
-          borderRadius: bubbleSize / 2,
-          transform: pan.current.getTranslateTransform(),
-        },
-      ]}
-    >
-      <Image
-        source={icons.code}
-        style={{
-          width: bubbleSize * 0.75,
-          height: bubbleSize * 0.75,
-        }}
-      />
-    </Animated.View>
+    <View style={styles.bubbleBackdrop}>
+      <Animated.View
+        {...panResponder.panHandlers}
+        style={[
+          styles.bubble,
+          {
+            width: bubbleSize,
+            height: bubbleSize,
+            borderRadius: bubbleSize / 2,
+            transform: pan.current.getTranslateTransform(),
+            opacity: idleOpacity,
+          },
+        ]}
+      >
+        <Image source={icons.bug} style={{ width: iconSize, height: iconSize }} />
+      </Animated.View>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
+  bubbleBackdrop: {
+    flex: 1,
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'box-none',
+  },
   bubble: {
     backgroundColor: colors.lightGray,
     position: 'absolute',

package/src/ui/components/details/DetailsViewer.tsx

@@ -1,19 +1,16 @@
-import { useContext } from 'react';
-import { MainContext } from '../../../contexts';
+import { detailsData } from '../../../core/data';
 import { DebuggerPanel } from '../../../types';
 import LogMessageDetails from './LogMessageDetails';
 import NetworkRequestDetails from './NetworkRequestDetails';
 
 export default function DetailsViewer() {
-  const { detailsData } = useContext(MainContext)!;
+  if (!detailsData.value) return null;
 
   switch (true) {
-    case !detailsData.current:
-      return null;
-    case DebuggerPanel.Network in detailsData.current!:
-      return <NetworkRequestDetails item={detailsData.current.network} />;
-    case DebuggerPanel.Console in detailsData.current!:
-      return <LogMessageDetails item={detailsData.current.console} />;
+    case DebuggerPanel.Network in detailsData.value:
+      return <NetworkRequestDetails item={detailsData.value.network} />;
+    case DebuggerPanel.Console in detailsData.value:
+      return <LogMessageDetails item={detailsData.value.console} />;
     default:
       return null;
   }

package/src/ui/components/details/LogMessageDetails.tsx

@@ -1,7 +1,7 @@
 import { ScrollView, StyleSheet, Text } from 'react-native';
 import type { LogMessage } from '../../../types';
-import { formatLogMessage } from '../../../utils';
-import colors from '../../../colors';
+import { formatLogMessage } from '../../../core/utils';
+import colors from '../../../theme/colors';
 
 interface LogMessageDetailsProps {
   item: LogMessage;

package/src/ui/components/details/NetworkRequestDetails.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState, type JSX, type ReactNode } from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
+import { ScrollView, Share, StyleSheet, TouchableOpacity } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
+import colors from '../../../theme/colors';
 import {
   NetworkType,
   type HttpRequest,
@@ -13,10 +14,9 @@ import {
   formatRequestMethod,
   formatRequestStatusCode,
   limitChar,
-} from '../../../utils';
+} from '../../../core/utils';
 import NetworkDetailsHeader from '../headers/NetworkRequestDetailsHeader';
 import NetworkRequestDetailsItem from '../items/NetworkRequestDetailsItem';
-import colors from '../../../colors';
 
 interface NetworkRequestDetailsProps {
   item: HttpRequest | WebSocketRequest;
@@ -78,10 +78,17 @@ export default function NetworkRequestDetails({ item }: NetworkRequestDetailsPro
         )}
 
         {!isWebSocket && (
-          <NetworkRequestDetailsItem
-            content={convertToCurl(item.method, item.url, item.requestHeaders, item.body)}
-            selectable
-          />
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() =>
+              Share.share({
+                message: convertToCurl(item.method, item.url, item.requestHeaders, item.body),
+              })
+            }
+            style={styles.buttonContent}
+          >
+            <NetworkRequestDetailsItem content="Share as cURL" />
+          </TouchableOpacity>
         )}
       </>
     );
@@ -122,7 +129,9 @@ export default function NetworkRequestDetails({ item }: NetworkRequestDetailsPro
         responseShown={responseShown}
         messagesShown={messagesShown}
       />
-      <ScrollView style={styles.container}>{content.current[selectedTab]}</ScrollView>
+      <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
+        {content.current[selectedTab]}
+      </ScrollView>
     </>
   );
 }
@@ -130,7 +139,9 @@ export default function NetworkRequestDetails({ item }: NetworkRequestDetailsPro
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 8,
+  },
+  contentContainer: {
+    padding: 8,
   },
   divider: {
     height: 1,
@@ -145,4 +156,10 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: colors.black,
   },
+  buttonContent: {
+    padding: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    alignItems: 'center',
+  },
 });

package/src/ui/components/headers/DebuggerHeader.tsx

@@ -1,23 +1,27 @@
-import { useContext } from 'react';
+import { useContext, useRef } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import { MainContext } from '../../../contexts';
+import colors from '../../../theme/colors';
+import icons from '../../../theme/icons';
 import { DebuggerPanel } from '../../../types';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
-import icons from '../../../icons';
-import colors from '../../../colors';
-
-export default function DebuggerHeader() {
-  const {
-    setDebuggerVisibility,
-    setDebuggerPosition,
-    panelSelected,
-    setPanelSelected,
-    networkInterceptor,
-    logInterceptor,
-  } = useContext(MainContext)!;
+
+interface DebuggerHeaderProps {
+  detailsShown: boolean;
+}
+
+export default function DebuggerHeader({ detailsShown }: DebuggerHeaderProps) {
+  const { debuggerState, setDebuggerState, networkInterceptor, logInterceptor } =
+    useContext(MainContext)!;
+
+  const lastSelectedPanel = useRef<DebuggerPanel>(
+    debuggerState.selectedPanel ?? DebuggerPanel.Network,
+  );
 
   const hideDebugger = () => {
-    setDebuggerVisibility('bubble');
+    setDebuggerState(draft => {
+      draft.visibility = 'bubble';
+    });
   };
 
   const toggleNetworkInterception = () => {
@@ -33,16 +37,34 @@ export default function DebuggerHeader() {
   };
 
   const toggleDebuggerPosition = () => {
-    setDebuggerPosition(prevState => (prevState === 'bottom' ? 'top' : 'bottom'));
+    setDebuggerState(draft => {
+      draft.position = draft.position === 'bottom' ? 'top' : 'bottom';
+    });
   };
 
-  const switchToNetworkPanel = () => {
-    setPanelSelected(DebuggerPanel.Network);
+  const switchTo = (debuggerPanel: DebuggerPanel) => {
+    setDebuggerState(draft => {
+      draft.selectedPanel = debuggerPanel;
+      lastSelectedPanel.current = debuggerPanel;
+    });
   };
 
-  const switchToConsolePanel = () => {
-    setPanelSelected(DebuggerPanel.Console);
-  };
+  if (detailsShown) {
+    return (
+      <View style={styles.contentContainer}>
+        <DebuggerHeaderItem
+          isLabel
+          isActive
+          content="Go Back"
+          onPress={() => {
+            setDebuggerState(draft => {
+              draft.selectedPanel = lastSelectedPanel.current;
+            });
+          }}
+        />
+      </View>
+    );
+  }
 
   return (
     <ScrollView
@@ -57,9 +79,9 @@ export default function DebuggerHeader() {
 
       <DebuggerHeaderItem
         isLabel
-        isActive={panelSelected === DebuggerPanel.Network}
+        isActive={debuggerState.selectedPanel === DebuggerPanel.Network}
         content="Network Panel"
-        onPress={switchToNetworkPanel}
+        onPress={() => switchTo(DebuggerPanel.Network)}
       />
 
       <DebuggerHeaderItem
@@ -77,9 +99,9 @@ export default function DebuggerHeader() {
 
       <DebuggerHeaderItem
         isLabel
-        isActive={panelSelected === DebuggerPanel.Console}
+        isActive={debuggerState.selectedPanel === DebuggerPanel.Console}
         content="Log Panel"
-        onPress={switchToConsolePanel}
+        onPress={() => switchTo(DebuggerPanel.Console)}
       />
 
       <DebuggerHeaderItem

package/src/ui/components/headers/NetworkPanelHeader.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, Text, View } from 'react-native';
-import colors from '../../../colors';
+import colors from '../../../theme/colors';
 
 export default function NetworkPanelHeader() {
   return (
@@ -39,7 +39,7 @@ export default function NetworkPanelHeader() {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    marginHorizontal: 8,
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: colors.gray,

package/src/ui/components/headers/NetworkRequestDetailsHeader.tsx

@@ -72,7 +72,6 @@ export default function NetworkDetailsHeader({
           onPress={() => onChangeTab(item.name)}
           isSelected={item.name === selectedTab}
           visible={item.visible}
-          name={item.name}
           label={item.label}
         />
       ))}

package/src/ui/components/items/ConsolePanelItem.tsx

@@ -1,7 +1,7 @@
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { LogMessage } from '../../../types';
-import { formatLogMessage } from '../../../utils';
-import colors from '../../../colors';
+import { formatLogMessage } from '../../../core/utils';
+import colors from '../../../theme/colors';
 
 interface ConsolePanelItemProps extends LogMessage {
   onPress: () => void;

package/src/ui/components/items/DebuggerHeaderItem.tsx

@@ -1,5 +1,5 @@
 import { Image, StyleSheet, Text, TouchableOpacity, type ImageRequireSource } from 'react-native';
-import colors from '../../../colors';
+import colors from '../../../theme/colors';
 
 interface DebuggerHeaderItemProps {
   content?: ImageRequireSource | string;
@@ -46,6 +46,8 @@ const styles = StyleSheet.create({
     backgroundColor: colors.gray,
     borderWidth: 1,
     borderColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   labelContainer: {
     backgroundColor: 'transparent',

package/src/ui/components/items/NetworkPanelItem.tsx

@@ -6,8 +6,8 @@ import {
   formatRequestDuration,
   formatRequestMethod,
   formatRequestStatusCode,
-} from '../../../utils';
-import colors from '../../../colors';
+} from '../../../core/utils';
+import colors from '../../../theme/colors';
 
 interface NetworkPanelItemProps {
   method?: HttpRequest['method'];

package/src/ui/components/items/NetworkRequestDetailsHeaderItem.tsx

@@ -1,18 +1,15 @@
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import type { NetworkTab } from '../../../types';
-import colors from '../../../colors';
+import colors from '../../../theme/colors';
 
 interface NetworkRequestDetailsHeaderItemProps {
   visible: boolean;
   isSelected: boolean;
-  name: NetworkTab;
   label: string;
   onPress: () => void;
 }
 
 export default function NetworkRequestDetailsHeaderItem({
   visible,
-  name,
   isSelected,
   label,
   onPress,
@@ -21,7 +18,6 @@ export default function NetworkRequestDetailsHeaderItem({
 
   return (
     <TouchableOpacity
-      key={name}
       activeOpacity={0.8}
       onPress={onPress}
       style={[styles.item, isSelected && styles.activeItem]}

package/src/ui/components/items/NetworkRequestDetailsItem.tsx

@@ -1,20 +1,20 @@
-import { StyleSheet, Text } from 'react-native';
-import colors from '../../../colors';
+import { StyleSheet, Text, type TextProps } from 'react-native';
+import colors from '../../../theme/colors';
 
-interface NetworkRequestDetailsItemProps {
+interface NetworkRequestDetailsItemProps extends TextProps {
   label?: string;
   content?: string;
-  selectable?: boolean;
 }
 
 export default function NetworkRequestDetailsItem({
   label,
   content,
-  selectable,
+  style,
+  ...props
 }: NetworkRequestDetailsItemProps) {
   if (label) {
     return (
-      <Text style={styles.text} selectable={selectable}>
+      <Text {...props} style={[styles.text, style]}>
         <Text style={styles.label}>
           {label}
           {': '}
@@ -25,7 +25,7 @@ export default function NetworkRequestDetailsItem({
   }
 
   return (
-    <Text style={styles.text} selectable={selectable}>
+    <Text {...props} style={[styles.text, style]}>
       {content}
     </Text>
   );

package/src/ui/components/panels/ConsolePanel.tsx

@@ -1,45 +1,42 @@
 import { useCallback, useContext } from 'react';
 import { FlatList, StyleSheet, View, type ListRenderItem } from 'react-native';
+import colors from '../../../theme/colors';
 import { MainContext } from '../../../contexts';
-import { useScrollToBottom } from '../../../hooks';
 import type { LogMessage } from '../../../types';
 import ConsolePanelItem from '../items/ConsolePanelItem';
-import colors from '../../../colors';
+import { detailsData } from '../../../core/data';
 
 const Separator = () => <View style={styles.divider} />;
 
 export default function ConsolePanel() {
   const {
     logInterceptor: { logMessages },
-    setPanelSelected,
-    detailsData,
+    setDebuggerState,
   } = useContext(MainContext)!;
 
-  const listRef = useScrollToBottom(logMessages.length);
-
   const renderItem = useCallback<ListRenderItem<LogMessage>>(
-    ({ item }) => {
-      return (
-        <ConsolePanelItem
-          {...item}
-          onPress={() => {
-            detailsData.current = { console: item };
-            setPanelSelected(null);
-          }}
-        />
-      );
-    },
-    [detailsData, setPanelSelected],
+    ({ item }) => (
+      <ConsolePanelItem
+        {...item}
+        onPress={() => {
+          detailsData.value = { console: item };
+          setDebuggerState(draft => {
+            draft.selectedPanel = null;
+          });
+        }}
+      />
+    ),
+    [setDebuggerState],
   );
 
   return (
     <FlatList
-      ref={listRef}
-      style={styles.container}
-      data={logMessages}
+      inverted
+      data={logMessages.toReversed()}
       renderItem={renderItem}
-      ItemSeparatorComponent={Separator}
       keyExtractor={(_, index) => index.toString()}
+      ItemSeparatorComponent={Separator}
+      style={styles.container}
     />
   );
 }