react-native-xenon 0.1.0

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

@@ -0,0 +1,26 @@
+import { ScrollView, StyleSheet, Text } from 'react-native';
+import type { LogMessage } from '../../../types';
+import { formatLogMessage } from '../../../utils';
+
+interface LogMessageDetailsProps {
+  item: LogMessage;
+}
+
+export default function LogMessageDetails({ item }: LogMessageDetailsProps) {
+  return (
+    <ScrollView style={styles.container}>
+      <Text>{formatLogMessage(item.type, item.values)}</Text>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 8,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#888888',
+  },
+});

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

@@ -0,0 +1,140 @@
+import { useRef, useState, type JSX } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { URL } from 'react-native-url-polyfill';
+import {
+  NetworkType,
+  type HttpRequest,
+  type NetworkTab,
+  type WebSocketRequest,
+} from '../../../types';
+import { convertToCurl, formatMethod, formatStatusCode, limitChar } from '../../../utils';
+import NetworkDetailsHeader from '../headers/NetworkRequestDetailsHeader';
+import NetworkRequestDetailsItem from '../items/NetworkRequestDetailsItem';
+
+interface NetworkRequestDetailsProps {
+  item: HttpRequest | WebSocketRequest;
+}
+
+export default function NetworkRequestDetails({ item }: NetworkRequestDetailsProps) {
+  const [selectedTab, setSelectedTab] = useState<NetworkTab>('headers');
+
+  const isWebSocket = item.type === NetworkType.WS;
+
+  const requestUrl = new URL(isWebSocket ? item.uri : item.url);
+
+  const headerShown = (isWebSocket ? 'uri' : 'url') in item;
+  const queryStringParametersShown = !!requestUrl.search;
+  const bodyShown = !isWebSocket && !!item.body;
+  const responseShown = !isWebSocket && !!item.response;
+  const messagesShown = isWebSocket && !!item.messages;
+
+  const content = useRef<Record<NetworkTab, JSX.Element | null>>({
+    headers: null,
+    queryStringParameters: null,
+    body: null,
+    response: null,
+    messages: null,
+  });
+
+  if (headerShown && !content.current.headers) {
+    content.current.headers = (
+      <>
+        <NetworkRequestDetailsItem label="Request Type" content={item.type} />
+
+        <NetworkRequestDetailsItem
+          label="Request URL"
+          content={isWebSocket ? item.uri : item.url}
+        />
+
+        <NetworkRequestDetailsItem
+          label="Request Method"
+          content={formatMethod(isWebSocket ? undefined : item.method)}
+        />
+
+        <NetworkRequestDetailsItem label="Status Code" content={formatStatusCode(item.status)} />
+
+        {isWebSocket && (
+          <NetworkRequestDetailsItem label="Headers" content={limitChar(item.options?.headers)} />
+        )}
+
+        {!isWebSocket && (
+          <NetworkRequestDetailsItem label="Response Headers" content={item.responseHeaders} />
+        )}
+
+        {!isWebSocket && (
+          <NetworkRequestDetailsItem label="Request Headers" content={item.requestHeadersString} />
+        )}
+
+        {!isWebSocket && (
+          <NetworkRequestDetailsItem
+            content={convertToCurl(item.method, item.url, item.requestHeaders, item.body)}
+            selectable
+          />
+        )}
+      </>
+    );
+  }
+
+  if (queryStringParametersShown && !content.current.queryStringParameters) {
+    const queryStringParameters: Record<'name' | 'value', string>[] = [];
+
+    requestUrl.searchParams.forEach((value, name) => {
+      queryStringParameters.push({ name, value });
+    });
+
+    content.current.queryStringParameters = (
+      <>
+        {queryStringParameters.map(({ name, value }, index) => (
+          <NetworkRequestDetailsItem key={index} label={name} content={value} />
+        ))}
+      </>
+    );
+  }
+
+  if (bodyShown && !content.current.body) {
+    content.current.body = <NetworkRequestDetailsItem content={limitChar(item.body)} />;
+  }
+
+  if (responseShown && !content.current.response) {
+    content.current.response = <NetworkRequestDetailsItem content={limitChar(item.response)} />;
+  }
+
+  if (messagesShown && !content.current.messages) {
+    content.current.messages = <NetworkRequestDetailsItem content={item.messages} />;
+  }
+
+  return (
+    <>
+      <NetworkDetailsHeader
+        selectedTab={selectedTab}
+        onChangeTab={setSelectedTab}
+        headersShown={headerShown}
+        queryStringParametersShown={queryStringParametersShown}
+        bodyShown={bodyShown}
+        responseShown={responseShown}
+        messagesShown={messagesShown}
+      />
+      <ScrollView style={styles.container}>{content.current[selectedTab]}</ScrollView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 8,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#888888',
+  },
+  text: {
+    fontSize: 14,
+    color: '#000000',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#000000',
+  },
+});

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

@@ -0,0 +1,112 @@
+import { useContext } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { MainContext } from '../../../contexts';
+import { DebuggerPanel } from '../../../types';
+import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
+
+export default function DebuggerHeader() {
+  const {
+    setDebuggerVisibility,
+    setDebuggerPosition,
+    panelSelected,
+    setPanelSelected,
+    networkInterceptor,
+    logInterceptor,
+  } = useContext(MainContext)!;
+
+  const hideDebugger = () => {
+    setDebuggerVisibility('bubble');
+  };
+
+  const toggleNetworkInterception = () => {
+    networkInterceptor.isInterceptorEnabled
+      ? networkInterceptor.disableInterception()
+      : networkInterceptor.enableInterception();
+  };
+
+  const toggleLogInterception = () => {
+    logInterceptor.isInterceptorEnabled
+      ? logInterceptor.disableInterception()
+      : logInterceptor.enableInterception();
+  };
+
+  const toggleDebuggerPosition = () => {
+    setDebuggerPosition(prevState => (prevState === 'bottom' ? 'top' : 'bottom'));
+  };
+
+  const switchToNetworkPanel = () => {
+    setPanelSelected(DebuggerPanel.Network);
+  };
+
+  const switchToConsolePanel = () => {
+    setPanelSelected(DebuggerPanel.Console);
+  };
+
+  return (
+    <ScrollView
+      horizontal
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsHorizontalScrollIndicator={false}
+    >
+      <DebuggerHeaderItem onPress={hideDebugger} content={require('../../../assets/hide.png')} />
+
+      <DebuggerHeaderItem
+        onPress={toggleDebuggerPosition}
+        content={require('../../../assets/move.png')}
+      />
+
+      <DebuggerHeaderItem
+        isLabel
+        isActive={panelSelected === DebuggerPanel.Network}
+        content="Network Panel"
+        onPress={switchToNetworkPanel}
+      />
+
+      <DebuggerHeaderItem
+        onPress={toggleNetworkInterception}
+        isActive={networkInterceptor.isInterceptorEnabled}
+        content={require('../../../assets/record.png')}
+      />
+
+      <DebuggerHeaderItem
+        onPress={networkInterceptor.clearAllNetworkRequests}
+        content={require('../../../assets/delete.png')}
+      />
+
+      <View style={styles.divider} />
+
+      <DebuggerHeaderItem
+        isLabel
+        isActive={panelSelected === DebuggerPanel.Console}
+        content="Log Panel"
+        onPress={switchToConsolePanel}
+      />
+
+      <DebuggerHeaderItem
+        onPress={toggleLogInterception}
+        isActive={logInterceptor.isInterceptorEnabled}
+        content={require('../../../assets/record.png')}
+      />
+
+      <DebuggerHeaderItem
+        onPress={logInterceptor.clearAllLogMessages}
+        content={require('../../../assets/delete.png')}
+      />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 0,
+  },
+  contentContainer: {
+    padding: 8,
+    columnGap: 8,
+  },
+  divider: {
+    width: 1,
+    backgroundColor: '#888888',
+  },
+});

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

@@ -0,0 +1,58 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function NetworkPanelHeader() {
+  return (
+    <View style={styles.container}>
+      <View style={[styles.headerColumn, styles.headerMainColumn]}>
+        <Text numberOfLines={1} style={styles.itemText}>
+          Name
+        </Text>
+      </View>
+
+      <View style={styles.divider} />
+
+      <View style={styles.headerColumn}>
+        <Text numberOfLines={1} style={styles.itemText}>
+          Method
+        </Text>
+      </View>
+
+      <View style={styles.divider} />
+
+      <View style={styles.headerColumn}>
+        <Text numberOfLines={1} style={styles.itemText}>
+          Status
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#888888',
+    borderRadius: 4,
+  },
+  headerMainColumn: {
+    flex: 7,
+    flexShrink: 1,
+  },
+  headerColumn: {
+    flex: 1.5,
+    flexShrink: 1,
+    paddingVertical: 4,
+    paddingLeft: 8,
+  },
+  divider: {
+    height: 16,
+    width: 1,
+    backgroundColor: '#888888',
+  },
+  itemText: {
+    fontSize: 14,
+    color: '#000000',
+  },
+});

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

@@ -0,0 +1,91 @@
+import { useMemo } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import type { NetworkTab } from '../../../types';
+import NetworkRequestDetailsHeaderItem from '../items/NetworkRequestDetailsHeaderItem';
+
+interface NetworkDetailsHeaderProps {
+  selectedTab: NetworkTab;
+  onChangeTab: (tab: NetworkTab) => void;
+  headersShown?: boolean;
+  queryStringParametersShown?: boolean;
+  bodyShown?: boolean;
+  responseShown?: boolean;
+  messagesShown?: boolean;
+}
+
+interface HeaderItem {
+  visible: boolean;
+  name: NetworkTab;
+  label: string;
+}
+
+export default function NetworkDetailsHeader({
+  selectedTab,
+  onChangeTab,
+  headersShown = true,
+  queryStringParametersShown = true,
+  bodyShown = true,
+  responseShown = true,
+  messagesShown = true,
+}: NetworkDetailsHeaderProps) {
+  const data = useMemo<HeaderItem[]>(
+    () => [
+      {
+        visible: headersShown,
+        name: 'headers',
+        label: 'Headers',
+      },
+      {
+        visible: queryStringParametersShown,
+        name: 'queryStringParameters',
+        label: 'Query String Parameters',
+      },
+      {
+        visible: bodyShown,
+        name: 'body',
+        label: 'Body',
+      },
+      {
+        visible: responseShown,
+        name: 'response',
+        label: 'Response',
+      },
+      {
+        visible: messagesShown,
+        name: 'messages',
+        label: 'Messages',
+      },
+    ],
+    [bodyShown, headersShown, messagesShown, queryStringParametersShown, responseShown],
+  );
+
+  return (
+    <ScrollView
+      horizontal
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsHorizontalScrollIndicator={false}
+    >
+      {data.map(item => (
+        <NetworkRequestDetailsHeaderItem
+          key={item.name}
+          onPress={() => onChangeTab(item.name)}
+          isSelected={item.name === selectedTab}
+          visible={item.visible}
+          name={item.name}
+          label={item.label}
+        />
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 0,
+  },
+  contentContainer: {
+    paddingHorizontal: 8,
+    columnGap: 8,
+  },
+});

package/src/ui/components/index.ts

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

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

@@ -0,0 +1,28 @@
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import type { LogMessage } from '../../../types';
+import { formatLogMessage } from '../../../utils';
+
+interface ConsolePanelItemProps extends LogMessage {
+  onPress: () => void;
+}
+
+export default function ConsolePanelItem({ type, values, onPress }: ConsolePanelItemProps) {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.container}>
+      <Text numberOfLines={1} style={styles.text}>
+        {formatLogMessage(type, values)}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 8,
+  },
+  text: {
+    color: '#000000',
+    fontSize: 14,
+  },
+});

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

@@ -0,0 +1,65 @@
+import { Image, StyleSheet, Text, TouchableOpacity, type ImageRequireSource } from 'react-native';
+
+interface DebuggerHeaderItemProps {
+  content?: ImageRequireSource | string;
+  isLabel?: boolean;
+  isActive?: boolean;
+  onPress: () => void;
+}
+
+export default function DebuggerHeaderItem(props: DebuggerHeaderItemProps) {
+  return (
+    <TouchableOpacity
+      onPress={props.onPress}
+      activeOpacity={0.8}
+      style={[
+        styles.container,
+        props.isLabel
+          ? props.isActive
+            ? styles.activeLabelContainer
+            : styles.labelContainer
+          : props.isActive
+            ? styles.activeContainer
+            : undefined,
+      ]}
+    >
+      {typeof props.content === 'string' ? (
+        <Text style={styles.title}>{props.content}</Text>
+      ) : (
+        <Image source={props.content} style={styles.icon} />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    backgroundColor: '#888888',
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  labelContainer: {
+    backgroundColor: 'transparent',
+  },
+  activeLabelContainer: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  activeContainer: {
+    backgroundColor: '#ef4444',
+  },
+  title: {
+    fontSize: 14,
+    lineHeight: 17,
+    fontWeight: '500',
+    color: '#000000',
+  },
+  icon: {
+    width: 17,
+    height: 17,
+  },
+});

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

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { URL } from 'react-native-url-polyfill';
+import type { HttpRequest, WebSocketRequest } from '../../../types';
+import { formatMethod, formatStatusCode } from '../../../utils';
+
+interface NetworkPanelItemProps {
+  name: HttpRequest['url'] | WebSocketRequest['uri'];
+  method?: HttpRequest['method'];
+  status?: HttpRequest['status'] | WebSocketRequest['status'];
+  onPress: () => void;
+}
+
+export default function NetworkPanelItem({ name, status, method, onPress }: NetworkPanelItemProps) {
+  const requestName = useMemo(() => {
+    if (!name) return '[failed]';
+
+    try {
+      const url = new URL(name);
+      const suffixUrl = url.pathname + url.search;
+
+      if (suffixUrl === '/') return url.host;
+      return suffixUrl;
+    } catch (error) {
+      return name;
+    }
+  }, [name]);
+
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.container}>
+      <View style={[styles.column, styles.mainColumn]}>
+        <Text numberOfLines={1} style={styles.text}>
+          {requestName}
+        </Text>
+      </View>
+
+      <View style={styles.column}>
+        <Text numberOfLines={1} style={styles.text}>
+          {formatMethod(method)}
+        </Text>
+      </View>
+
+      <View style={styles.column}>
+        <Text numberOfLines={1} style={styles.text}>
+          {formatStatusCode(status)}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  mainColumn: {
+    flex: 7,
+    flexShrink: 1,
+  },
+  column: {
+    flex: 1.5,
+    flexShrink: 1,
+    padding: 8,
+    paddingRight: 0,
+  },
+  text: {
+    color: '#000000',
+    fontSize: 14,
+  },
+});

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

@@ -0,0 +1,52 @@
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import type { NetworkTab } from '../../../types';
+
+interface NetworkRequestDetailsHeaderItemProps {
+  visible: boolean;
+  isSelected: boolean;
+  name: NetworkTab;
+  label: string;
+  onPress: () => void;
+}
+
+export default function NetworkRequestDetailsHeaderItem({
+  visible,
+  name,
+  isSelected,
+  label,
+  onPress,
+}: NetworkRequestDetailsHeaderItemProps) {
+  if (!visible) return null;
+
+  return (
+    <TouchableOpacity
+      key={name}
+      activeOpacity={0.8}
+      onPress={onPress}
+      style={[styles.item, isSelected && styles.activeItem]}
+    >
+      <Text style={styles.itemText}>{label}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  item: {
+    flex: 1,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  activeItem: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  itemText: {
+    fontSize: 14,
+    color: '#000000',
+  },
+});

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

@@ -0,0 +1,43 @@
+import { StyleSheet, Text } from 'react-native';
+
+interface NetworkRequestDetailsItemProps {
+  label?: string;
+  content?: string;
+  selectable?: boolean;
+}
+
+export default function NetworkRequestDetailsItem({
+  label,
+  content,
+  selectable,
+}: NetworkRequestDetailsItemProps) {
+  if (label) {
+    return (
+      <Text style={styles.text} selectable={selectable}>
+        <Text style={styles.label}>
+          {label}
+          {': '}
+        </Text>
+        {content}
+      </Text>
+    );
+  }
+
+  return (
+    <Text style={styles.text} selectable={selectable}>
+      {content}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+    color: '#000000',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#000000',
+  },
+});