react-native-xenon 0.7.0 → 1.0.0

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

@@ -0,0 +1,100 @@
+import { forwardRef, useContext, type PropsWithChildren } from 'react';
+import { ScrollView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { MainContext } from '../../../contexts';
+import refs, { DebuggerVisibility, HeaderState, PanelState } from '../../../core/refs';
+import colors from '../../../theme/colors';
+import icons from '../../../theme/icons';
+import type { DetailTab } from '../../../types';
+import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
+
+const Back = ({ selectedPanel }: { selectedPanel: PanelState }) => {
+  const { setDebuggerState } = useContext(MainContext)!;
+
+  return (
+    <DebuggerHeaderItem
+      content={icons.arrowLeft}
+      onPress={() => {
+        refs.header.current?.setCurrentIndex(HeaderState.Debugger);
+        refs.panel.current?.setCurrentIndex(selectedPanel);
+        setDebuggerState(draft => {
+          draft.detailsData = null;
+        });
+      }}
+    />
+  );
+};
+
+const TabItem = ({ tab, label }: { tab: DetailTab; label: string }) => {
+  const {
+    debuggerState: { detailsData },
+    setDebuggerState,
+  } = useContext(MainContext)!;
+
+  return (
+    <DebuggerHeaderItem
+      isLabel
+      isActive={detailsData?.selectedTab === tab}
+      content={label}
+      onPress={() => {
+        setDebuggerState(draft => {
+          draft.detailsData!.selectedTab = tab;
+        });
+      }}
+    />
+  );
+};
+
+const MainButtons = () => {
+  const { setDebuggerState } = useContext(MainContext)!;
+
+  const onHide = () => {
+    refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Bubble);
+  };
+
+  const onMove = () => {
+    setDebuggerState(draft => {
+      draft.position = draft.position === 'bottom' ? 'top' : 'bottom';
+    });
+  };
+
+  return (
+    <>
+      <DebuggerHeaderItem onPress={onHide} content={icons.hide} />
+      <DebuggerHeaderItem onPress={onMove} content={icons.move} />
+    </>
+  );
+};
+
+const Wrapper = forwardRef<ScrollView, PropsWithChildren<{ style?: StyleProp<ViewStyle> }>>(
+  ({ children, style }, ref) => {
+    return (
+      <ScrollView
+        ref={ref}
+        horizontal
+        style={[styles.container, style]}
+        contentContainerStyle={styles.contentContainer}
+        showsHorizontalScrollIndicator={false}
+      >
+        {children}
+      </ScrollView>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 0,
+    borderTopColor: colors.gray,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.gray,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  contentContainer: {
+    padding: 8,
+    columnGap: 8,
+  },
+});
+
+const HeaderComponents = { Back, TabItem, MainButtons, Wrapper };
+
+export default HeaderComponents;

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

@@ -0,0 +1,85 @@
+import { forwardRef, useContext } from 'react';
+import { Share, type ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+import { MainContext } from '../../../contexts';
+import refs, { DebuggerVisibility, type PanelState } from '../../../core/refs';
+import { convertToCurl, getNetworkUtils } from '../../../core/utils';
+import colors from '../../../theme/colors';
+import icons from '../../../theme/icons';
+import { NetworkType, type HttpRequest, type WebSocketRequest } from '../../../types';
+import Divider from '../common/Divider';
+import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
+import HeaderComponents from './HeaderComponents';
+
+interface NetworkHeaderProps {
+  selectedPanel: PanelState;
+  style?: StyleProp<ViewStyle>;
+}
+
+let isSharing = false;
+
+const NetworkHeader = forwardRef<ScrollView, NetworkHeaderProps>(
+  ({ selectedPanel, style }, ref) => {
+    const {
+      debuggerState: { detailsData },
+      setDebuggerState,
+    } = useContext(MainContext)!;
+
+    const data = detailsData?.data as HttpRequest | WebSocketRequest | undefined;
+
+    const { isHttp, overviewShown, headersShown, requestShown, responseShown, messagesShown } =
+      getNetworkUtils(data);
+
+    return (
+      <HeaderComponents.Wrapper ref={ref} style={style}>
+        <HeaderComponents.Back selectedPanel={selectedPanel} />
+        <HeaderComponents.MainButtons />
+
+        <Divider type="vertical" />
+
+        {overviewShown && <HeaderComponents.TabItem tab="overview" label="Overview" />}
+        {headersShown && <HeaderComponents.TabItem tab="headers" label="Headers" />}
+        {requestShown && <HeaderComponents.TabItem tab="request" label="Request" />}
+        {responseShown && <HeaderComponents.TabItem tab="response" label="Response" />}
+        {messagesShown && <HeaderComponents.TabItem tab="messages" label="Messages" />}
+
+        {isHttp && (
+          <>
+            <Divider type="vertical" />
+
+            <DebuggerHeaderItem
+              content={icons.beautify}
+              isActive={detailsData?.beautified}
+              activeColor={colors.green}
+              onPress={() => {
+                setDebuggerState(draft => {
+                  draft.detailsData!.beautified = !draft.detailsData?.beautified;
+                });
+              }}
+            />
+            <DebuggerHeaderItem
+              content={icons.share}
+              onPress={async () => {
+                if (isSharing || !data || data.type === NetworkType.WS) return;
+
+                try {
+                  isSharing = true;
+                  refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Bubble);
+
+                  await Share.share({
+                    message: convertToCurl(data.method, data.url, data.requestHeaders, data.body),
+                  });
+                } catch (error) {
+                  // Handle error
+                } finally {
+                  isSharing = false;
+                }
+              }}
+            />
+          </>
+        )}
+      </HeaderComponents.Wrapper>
+    );
+  },
+);
+
+export default NetworkHeader;

package/src/ui/components/index.ts

@@ -1,5 +1,4 @@
 export { default as Bubble } from './bubble/Bubble';
-export { default as DetailsViewer } from './details/DetailsViewer';
 export { default as DebuggerHeader } from './headers/DebuggerHeader';
 export { default as ConsolePanel } from './panels/ConsolePanel';
 export { default as NetworkPanel } from './panels/NetworkPanel';

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

@@ -1,7 +1,8 @@
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import type { LogMessage } from '../../../types';
-import { formatLogMessage } from '../../../core/utils';
+import { StyleSheet, Text } from 'react-native';
+import { formatLogMessage, getConsoleTypeColor } from '../../../core/utils';
 import colors from '../../../theme/colors';
+import type { LogMessage } from '../../../types';
+import Touchable from '../common/Touchable';
 
 interface ConsolePanelItemProps extends LogMessage {
   onPress: () => void;
@@ -9,11 +10,14 @@ interface ConsolePanelItemProps extends LogMessage {
 
 export default function ConsolePanelItem({ type, values, onPress }: ConsolePanelItemProps) {
   return (
-    <TouchableOpacity onPress={onPress} style={styles.container}>
+    <Touchable
+      onPress={onPress}
+      style={[styles.container, { backgroundColor: getConsoleTypeColor(type) }]}
+    >
       <Text numberOfLines={1} style={styles.text}>
-        {formatLogMessage(type, values)}
+        {formatLogMessage(values)}
       </Text>
-    </TouchableOpacity>
+    </Touchable>
   );
 }
 
@@ -21,6 +25,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     padding: 8,
+    borderRadius: 8,
   },
   text: {
     color: colors.black,

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

@@ -1,5 +1,7 @@
-import { Image, StyleSheet, Text, TouchableOpacity, type ImageRequireSource } from 'react-native';
+import { StyleSheet, Text, type ImageRequireSource } from 'react-native';
 import colors from '../../../theme/colors';
+import Icon from '../common/Icon';
+import Touchable from '../common/Touchable';
 
 interface DebuggerHeaderItemProps {
   content?: ImageRequireSource | string;
@@ -17,9 +19,8 @@ export default function DebuggerHeaderItem({
   onPress,
 }: DebuggerHeaderItemProps) {
   return (
-    <TouchableOpacity
+    <Touchable
       onPress={onPress}
-      activeOpacity={0.8}
       style={[
         styles.container,
         isLabel
@@ -34,9 +35,9 @@ export default function DebuggerHeaderItem({
       {typeof content === 'string' ? (
         <Text style={styles.title}>{content}</Text>
       ) : (
-        <Image source={content} style={styles.icon} />
+        <Icon source={content} size={18} />
       )}
-    </TouchableOpacity>
+    </Touchable>
   );
 }
 
@@ -65,9 +66,4 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: colors.black,
   },
-  icon: {
-    width: 18,
-    height: 18,
-    tintColor: colors.black,
-  },
 });

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

@@ -1,29 +1,58 @@
 import { useMemo } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
-import type { HttpRequest, NetworkRequest } from '../../../types';
 import {
   formatRequestDuration,
   formatRequestMethod,
   formatRequestStatusCode,
 } from '../../../core/utils';
 import colors from '../../../theme/colors';
+import type { HttpRequest, NetworkRequest } from '../../../types';
+import Touchable from '../common/Touchable';
 
 interface NetworkPanelItemProps {
   method?: HttpRequest['method'];
   name: NetworkRequest['url'];
-  duration?: NetworkRequest['duration'];
+  startTime?: NetworkRequest['startTime'];
+  endTime?: NetworkRequest['endTime'];
   status?: NetworkRequest['status'];
   onPress: () => void;
 }
 
+const getMethodColor = (method: string) => {
+  switch (method) {
+    case 'GET':
+      return colors.blue;
+    case 'POST':
+      return colors.green;
+    case 'PUT':
+      return colors.yellow;
+    case 'PATCH':
+      return colors.cyan;
+    case 'DELETE':
+      return colors.red;
+    case 'OPTIONS':
+    case 'HEAD':
+      return colors.purple;
+    default:
+      return colors.black;
+  }
+};
+
 export default function NetworkPanelItem({
   method,
   name,
-  duration,
+  startTime,
+  endTime,
   status,
   onPress,
 }: NetworkPanelItemProps) {
+  const duration = formatRequestDuration(startTime, endTime);
+  const requestMethod = formatRequestMethod(method);
+  const requestStatusCode = formatRequestStatusCode(status);
+  const isRequestFailed = Number.isInteger(status) && status! >= 400 && status! < 600;
+  const textStyle = [styles.text, isRequestFailed && styles.failedText];
+
   const requestPath = useMemo(() => {
     if (!name) return '[failed]';
 
@@ -39,31 +68,38 @@ export default function NetworkPanelItem({
   }, [name]);
 
   return (
-    <TouchableOpacity onPress={onPress} style={styles.container}>
+    <Touchable onPress={onPress} style={styles.container}>
       <View style={styles.column}>
-        <Text numberOfLines={1} style={styles.text}>
-          {formatRequestMethod(method)}
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.text,
+            styles.methodText,
+            { backgroundColor: getMethodColor(requestMethod) },
+          ]}
+        >
+          {requestMethod}
         </Text>
       </View>
 
       <View style={[styles.column, styles.pathColumn]}>
-        <Text numberOfLines={1} style={styles.text}>
+        <Text numberOfLines={1} style={textStyle}>
           {requestPath}
         </Text>
       </View>
 
       <View style={[styles.column, styles.durationColumn]}>
-        <Text numberOfLines={1} style={styles.text}>
-          {formatRequestDuration(duration)}
+        <Text numberOfLines={1} style={textStyle}>
+          {duration}
         </Text>
       </View>
 
       <View style={styles.column}>
-        <Text numberOfLines={1} style={styles.text}>
-          {formatRequestStatusCode(status)}
+        <Text numberOfLines={1} style={textStyle}>
+          {requestStatusCode}
         </Text>
       </View>
-    </TouchableOpacity>
+    </Touchable>
   );
 }
 
@@ -71,6 +107,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    columnGap: 8,
   },
   pathColumn: {
     flex: 5,
@@ -81,11 +120,21 @@ const styles = StyleSheet.create({
   column: {
     flex: 1.5,
     flexShrink: 1,
-    padding: 8,
-    paddingRight: 0,
+  },
+  failedText: {
+    color: colors.red,
   },
   text: {
     color: colors.black,
     fontSize: 14,
   },
+  methodText: {
+    borderRadius: 4,
+    color: colors.lightGray,
+    paddingVertical: 4,
+    paddingHorizontal: 2,
+    textAlign: 'center',
+    fontSize: 12,
+    fontWeight: '600',
+  },
 });

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

@@ -1,32 +1,32 @@
-import { StyleSheet, Text, type TextProps } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import colors from '../../../theme/colors';
 
-interface NetworkRequestDetailsItemProps extends TextProps {
-  label?: string;
-  content?: string;
+interface NetworkRequestDetailsItemProps {
+  label: string;
+  content: string | [string, string][];
 }
 
 export default function NetworkRequestDetailsItem({
   label,
   content,
-  style,
-  ...props
 }: NetworkRequestDetailsItemProps) {
-  if (label) {
-    return (
-      <Text {...props} style={[styles.text, style]}>
-        <Text style={styles.label}>
-          {label}
-          {': '}
-        </Text>
-        {content}
-      </Text>
-    );
-  }
-
   return (
-    <Text {...props} style={[styles.text, style]}>
-      {content}
+    <Text style={styles.text}>
+      <Text style={styles.label}>
+        {label}
+        {'\n'}
+      </Text>
+      {typeof content === 'string'
+        ? content
+        : content.map(([key, value]) => (
+            <Text key={key} style={[styles.label, styles.subLabel]}>
+              {key}
+              {': '}
+              <Text style={styles.text}>{value}</Text>
+              {'\n'}
+            </Text>
+          ))}
+      {Array.isArray(content) || content?.endsWith('\n') ? '' : '\n'}
     </Text>
   );
 }
@@ -34,11 +34,16 @@ export default function NetworkRequestDetailsItem({
 const styles = StyleSheet.create({
   text: {
     fontSize: 14,
+    fontWeight: 'normal',
     color: colors.black,
   },
   label: {
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: 'bold',
     color: colors.black,
   },
+  subLabel: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
 });

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

@@ -1,13 +1,20 @@
-import { useCallback, useContext } from 'react';
-import { FlatList, StyleSheet, View, type ListRenderItem } from 'react-native';
-import colors from '../../../theme/colors';
+import { forwardRef, useCallback, useContext } from 'react';
+import {
+  FlatList,
+  StyleSheet,
+  View,
+  type ListRenderItem,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 import { MainContext } from '../../../contexts';
 import { DebuggerPanel, type LogMessage } from '../../../types';
 import ConsolePanelItem from '../items/ConsolePanelItem';
+import refs, { HeaderState, PanelState } from '../../../core/refs';
 
 const Separator = () => <View style={styles.divider} />;
 
-export default function ConsolePanel() {
+const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
     consoleInterceptor: { logMessages },
     setDebuggerState,
@@ -18,8 +25,9 @@ export default function ConsolePanel() {
       <ConsolePanelItem
         {...item}
         onPress={() => {
+          refs.header.current?.setCurrentIndex(HeaderState.Console);
+          refs.panel.current?.setCurrentIndex(PanelState.ConsoleDetail);
           setDebuggerState(draft => {
-            draft.selectedPanel = null;
             draft.detailsData = {
               type: DebuggerPanel.Console,
               data: item,
@@ -35,23 +43,28 @@ export default function ConsolePanel() {
 
   return (
     <FlatList
+      ref={ref}
       inverted
       data={[...logMessages].reverse()}
       renderItem={renderItem}
       keyExtractor={(_, index) => index.toString()}
       ItemSeparatorComponent={Separator}
-      style={styles.container}
+      style={[styles.container, style]}
+      contentContainerStyle={styles.contentContainer}
     />
   );
-}
+});
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 8,
+  },
+  contentContainer: {
+    padding: 8,
   },
   divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: colors.gray,
+    height: 4,
   },
 });
+
+export default ConsolePanel;

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

@@ -1,7 +1,13 @@
-import { useCallback, useContext, useMemo } from 'react';
-import { FlatList, StyleSheet, View, type ListRenderItem } from 'react-native';
-import colors from '../../../theme/colors';
+import { forwardRef, useCallback, useContext, useMemo } from 'react';
+import {
+  FlatList,
+  StyleSheet,
+  type ListRenderItem,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 import { MainContext } from '../../../contexts';
+import refs, { HeaderState, PanelState } from '../../../core/refs';
 import {
   DebuggerPanel,
   NetworkType,
@@ -9,16 +15,16 @@ import {
   type ID,
   type WebSocketRequest,
 } from '../../../types';
+import Divider from '../common/Divider';
 import NetworkPanelItem from '../items/NetworkPanelItem';
 
-const Separator = () => <View style={styles.divider} />;
+const Separator = () => <Divider type="horizontal" />;
 
-export default function NetworkPanel() {
+const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
     networkInterceptor: { networkRequests },
     setDebuggerState,
   } = useContext(MainContext)!;
-
   const data = useMemo(() => Array.from(networkRequests).reverse(), [networkRequests]);
 
   const renderItem = useCallback<ListRenderItem<[NonNullable<ID>, HttpRequest | WebSocketRequest]>>(
@@ -26,11 +32,13 @@ export default function NetworkPanel() {
       <NetworkPanelItem
         method={item.type === NetworkType.WS ? undefined : item.method}
         name={item.url}
-        duration={item.duration}
+        startTime={item.startTime}
+        endTime={item.endTime}
         status={item.status}
         onPress={() => {
+          refs.header.current?.setCurrentIndex(HeaderState.Network);
+          refs.panel.current?.setCurrentIndex(PanelState.NetworkDetail);
           setDebuggerState(draft => {
-            draft.selectedPanel = null;
             draft.detailsData = {
               type: DebuggerPanel.Network,
               data: item,
@@ -48,21 +56,20 @@ export default function NetworkPanel() {
     <FlatList
       inverted
       data={data}
+      ref={ref}
       renderItem={renderItem}
       keyExtractor={([key]) => key}
       ItemSeparatorComponent={Separator}
-      style={styles.container}
+      style={[styles.container, style]}
     />
   );
-}
+});
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingHorizontal: 8,
   },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: colors.gray,
-  },
 });
+
+export default NetworkPanel;

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

@@ -0,0 +1,17 @@
+import refs, { PanelState } from '../../../core/refs';
+import IndexedStack from '../common/IndexedStack';
+import LogMessageDetails from '../details/LogMessageDetails';
+import NetworkRequestDetails from '../details/NetworkRequestDetails';
+import ConsolePanel from './ConsolePanel';
+import NetworkPanel from './NetworkPanel';
+
+export default function Panel() {
+  return (
+    <IndexedStack defaultIndex={PanelState.Network} id="debugger-panel" ref={refs.panel}>
+      <NetworkPanel />
+      <ConsolePanel />
+      <NetworkRequestDetails />
+      <LogMessageDetails />
+    </IndexedStack>
+  );
+}

package/lib/commonjs/ui/components/details/DetailsViewer.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DetailsViewer;
-var _react = require("react");
-var _contexts = require("../../../contexts");
-var _types = require("../../../types");
-var _LogMessageDetails = _interopRequireDefault(require("./LogMessageDetails"));
-var _NetworkRequestDetails = _interopRequireDefault(require("./NetworkRequestDetails"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function DetailsViewer() {
-  const {
-    debuggerState
-  } = (0, _react.useContext)(_contexts.MainContext);
-  const detailsData = debuggerState.detailsData;
-  switch (detailsData?.type) {
-    case _types.DebuggerPanel.Network:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkRequestDetails.default, {
-        item: detailsData.data
-      });
-    case _types.DebuggerPanel.Console:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LogMessageDetails.default, {
-        item: detailsData.data
-      });
-    default:
-      return null;
-  }
-}
-//# sourceMappingURL=DetailsViewer.js.map