react-native-xenon 0.7.0 → 1.0.0

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

@@ -1,120 +1,122 @@
-import { useContext, useMemo, useRef, useState, type MutableRefObject } from 'react';
+import { forwardRef, useMemo, useRef, useState } from 'react';
 import {
   Animated,
-  Image,
   PanResponder,
   StyleSheet,
   View,
   type PanResponderGestureState,
+  type StyleProp,
+  type ViewStyle,
 } from 'react-native';
-import { MainContext } from '../../../contexts';
-import icons from '../../../theme/icons';
-import colors from '../../../theme/colors';
+import refs, { DebuggerVisibility } from '../../../core/refs';
 import { clamp, getVerticalSafeMargin } from '../../../core/utils';
+import colors from '../../../theme/colors';
+import icons from '../../../theme/icons';
+import Icon from '../common/Icon';
 
 interface BubbleProps {
   bubbleSize: number;
   idleBubbleOpacity: number;
-  pan: MutableRefObject<Animated.ValueXY>;
   screenWidth: number;
   screenHeight: number;
+  style?: StyleProp<ViewStyle>;
 }
 
-export default function Bubble({
-  bubbleSize,
-  idleBubbleOpacity,
-  pan,
-  screenWidth,
-  screenHeight,
-}: BubbleProps) {
-  const iconSize = bubbleSize * 0.65;
-
-  const { setDebuggerState } = useContext(MainContext)!;
-  const [idleOpacity, setIdleOpacity] = useState(idleBubbleOpacity);
-  const opacityTimer = useRef<NodeJS.Timeout | null>(null);
-
-  const panResponder = useMemo(() => {
-    const clearTimer = () => {
-      if (opacityTimer.current) clearTimeout(opacityTimer.current);
-      opacityTimer.current = null;
-    };
-
-    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,
-        });
-
-        pan.current.setValue({ x: 0, y: 0 });
-
-        clearTimer();
-        setIdleOpacity(1);
-      },
-      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;
-
-        if (isTapGesture)
-          setDebuggerState(draft => {
-            draft.visibility = 'panel';
+const Bubble = forwardRef<View, BubbleProps>(
+  ({ bubbleSize, idleBubbleOpacity, screenWidth, screenHeight, style }, ref) => {
+    const [idleOpacity, setIdleOpacity] = useState(idleBubbleOpacity);
+    const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(screenHeight) }));
+    const opacityTimer = useRef<NodeJS.Timeout | null>(null);
+
+    const panResponder = useMemo(() => {
+      const clearTimer = () => {
+        if (opacityTimer.current) clearTimeout(opacityTimer.current);
+        opacityTimer.current = null;
+      };
+
+      const blur = () => {
+        opacityTimer.current = setTimeout(() => {
+          setIdleOpacity(0.5);
+          clearTimer();
+        }, 1000);
+      };
+
+      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,
           });
 
-        pan.current.flattenOffset();
-
-        const finalX =
-          gesture.moveX < (screenWidth - bubbleSize) / 2 ? 0 : screenWidth - bubbleSize;
-
-        const verticalSafeMargin = getVerticalSafeMargin(screenHeight);
+          pan.current.setValue({ x: 0, y: 0 });
 
-        const finalY = clamp(
-          gesture.moveY,
-          verticalSafeMargin,
-          screenHeight - verticalSafeMargin - bubbleSize,
-        );
-
-        Animated.spring(pan.current, {
-          toValue: { x: finalX, y: finalY },
+          clearTimer();
+          setIdleOpacity(1);
+        },
+        onPanResponderMove: Animated.event([null, { dx: pan.current.x, dy: pan.current.y }], {
           useNativeDriver: false,
-        }).start(({ finished }) => {
-          if (!finished) return;
-
-          opacityTimer.current = setTimeout(() => {
-            setIdleOpacity(0.5);
-            clearTimer();
-          }, 1000);
-        });
-      },
-    });
-  }, [bubbleSize, pan, screenHeight, screenWidth, setDebuggerState]);
-
-  return (
-    <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>
-  );
-}
+        }),
+        onPanResponderRelease: (_, gesture: PanResponderGestureState) => {
+          pan.current.flattenOffset();
+
+          const isTapGesture =
+            gesture.dx > -10 && gesture.dx < 10 && gesture.dy > -10 && gesture.dy < 10;
+          if (isTapGesture) {
+            refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
+          }
+
+          if (gesture.moveX === 0 && gesture.moveY === 0) {
+            blur();
+            return;
+          }
+
+          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;
+            blur();
+          });
+        },
+      });
+    }, [bubbleSize, pan, screenHeight, screenWidth]);
+
+    return (
+      <View ref={ref} style={[styles.bubbleBackdrop, style]}>
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={[
+            styles.bubble,
+            {
+              width: bubbleSize,
+              height: bubbleSize,
+              borderRadius: bubbleSize / 2,
+              transform: pan.current.getTranslateTransform(),
+              opacity: idleOpacity,
+            },
+          ]}
+        >
+          <Icon source={icons.bug} size={bubbleSize * 0.65} />
+        </Animated.View>
+      </View>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   bubbleBackdrop: {
@@ -129,3 +131,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 });
+
+export default Bubble;

package/src/ui/components/common/Divider.tsx

@@ -0,0 +1,13 @@
+import { StyleSheet, View } from 'react-native';
+import colors from '../../../theme/colors';
+
+export default function Divider({ type }: { type: 'horizontal' | 'vertical' }) {
+  return (
+    <View
+      style={{
+        [type === 'horizontal' ? 'height' : 'width']: StyleSheet.hairlineWidth,
+        backgroundColor: colors.gray,
+      }}
+    />
+  );
+}

package/src/ui/components/common/Icon.tsx

@@ -0,0 +1,12 @@
+import { Image } from 'react-native';
+import colors from '../../../theme/colors';
+
+interface IconProps {
+  source: any;
+  size: number;
+  color?: string;
+}
+
+export default function Icon({ source, size, color = colors.black }: IconProps) {
+  return <Image source={source} style={{ width: size, height: size, tintColor: color }} />;
+}

package/src/ui/components/common/IndexedStack.tsx

@@ -0,0 +1,62 @@
+import {
+  Children,
+  createElement,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  type ForwardedRef,
+  type JSX,
+  type RefAttributes,
+} from 'react';
+import { type NativeMethods } from 'react-native';
+
+interface IndexedStackProps<T extends number> {
+  children: JSX.Element[];
+  id: string;
+  defaultIndex: T;
+}
+
+export type IndexedStackMethods<T extends number> = {
+  getCurrentIndex: () => T;
+  setCurrentIndex: (index: T) => void;
+};
+
+function IndexedStackComponent<T extends number>(
+  { children, defaultIndex, id }: IndexedStackProps<T>,
+  ref: ForwardedRef<IndexedStackMethods<T>>,
+) {
+  const currentIndex = useRef<T>(defaultIndex as T);
+  const childrenRefs = useRef<NativeMethods[]>([]);
+
+  useImperativeHandle(ref, () => ({
+    getCurrentIndex: () => currentIndex.current,
+    setCurrentIndex: (index: number) => {
+      currentIndex.current = index as T;
+      childrenRefs.current.forEach((childRef, i) => {
+        if (childRef) {
+          childRef.setNativeProps({
+            style: { display: i === index ? 'flex' : 'none' },
+          });
+        }
+      });
+    },
+  }));
+
+  return Children.map(children, (child, i) => {
+    return createElement(child.type, {
+      ...child.props,
+      key: `${id}-${i}`,
+      style: [child.props.style, { display: i === defaultIndex ? 'flex' : 'none' }],
+      ref: (childRef: NativeMethods | null) => {
+        if (!childRef) return;
+        childrenRefs.current[i] = childRef;
+      },
+    });
+  });
+}
+
+const IndexedStack = forwardRef(IndexedStackComponent) as <T extends number>(
+  props: IndexedStackProps<T> & RefAttributes<IndexedStackMethods<T>>,
+) => JSX.Element;
+
+export default IndexedStack;

package/src/ui/components/common/Touchable.tsx

@@ -0,0 +1,21 @@
+import { TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native';
+
+interface TouchableProps {
+  onPress: () => void;
+  children: React.ReactNode;
+  activeOpacity?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function Touchable({
+  onPress,
+  children,
+  activeOpacity = 0.8,
+  style,
+}: TouchableProps) {
+  return (
+    <TouchableOpacity onPress={onPress} activeOpacity={activeOpacity} style={style}>
+      {children}
+    </TouchableOpacity>
+  );
+}

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

@@ -1,27 +1,42 @@
-import { ScrollView, StyleSheet, Text } from 'react-native';
+import { ScrollView, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { formatLogMessage, getConsoleTypeColor } from '../../../core/utils';
 import type { LogMessage } from '../../../types';
-import { formatLogMessage } from '../../../core/utils';
 import colors from '../../../theme/colors';
+import { forwardRef, useContext } from 'react';
+import { MainContext } from '../../../contexts';
 
-interface LogMessageDetailsProps {
-  item: LogMessage;
-}
+const LogMessageDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle> }>(
+  ({ style }, ref) => {
+    const {
+      debuggerState: { detailsData },
+    } = useContext(MainContext)!;
 
-export default function LogMessageDetails({ item }: LogMessageDetailsProps) {
-  return (
-    <ScrollView style={styles.container}>
-      <Text>{formatLogMessage(item.type, item.values)}</Text>
-    </ScrollView>
-  );
-}
+    const item = detailsData?.data as LogMessage | undefined;
+
+    return (
+      <ScrollView
+        ref={ref}
+        style={[
+          styles.container,
+          { backgroundColor: getConsoleTypeColor(item?.type ?? '') },
+          style,
+        ]}
+      >
+        <Text style={styles.text}>{formatLogMessage(item?.values ?? [])}</Text>
+      </ScrollView>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 8,
+    padding: 8,
   },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: colors.gray,
+  text: {
+    color: colors.black,
+    fontSize: 14,
   },
 });
+
+export default LogMessageDetails;