Devtools sub components

Author: josydeleon

packages/react-native-query-devtool/src/components/CloseButton/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Pressable, StyleSheet, View } from 'react-native';
+
+const CloseButton: React.FC<{ onPress: () => void }> = ({ onPress }) => {
+  return (
+    <Pressable style={styles.container} onPress={onPress}>
+      <View style={styles.close} />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 40,
+    height: 20,
+    alignContent: 'center',
+    justifyContent: 'center',
+  },
+  close: {
+    width: 20,
+    alignSelf: 'flex-end',
+    borderWidth: 2,
+    borderRadius: 3,
+    borderColor: 'white',
+  },
+});
+
+export default CloseButton;

packages/react-native-query-devtool/src/components/DataExplorer/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { View } from 'react-native';
+
+import JSONTreeSearcheable from '../JSONTreeSearcheable';
+import { styles } from './style';
+
+const DataExplorer = ({ selectedQuery }) => {
+  if (!selectedQuery) return null;
+
+  return (
+    <View style={styles.container}>
+      <JSONTreeSearcheable data={selectedQuery} />
+    </View>
+  );
+};
+
+export default DataExplorer;

packages/react-native-query-devtool/src/components/DataExplorer/style.ts

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#0b1521',
+  },
+});

packages/react-native-query-devtool/src/components/JSONTreeSearcheable/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Text, View } from 'react-native';
+
+import JSONTree from 'react-native-json-tree';
+
+import theme from './treeTheme';
+import JSONTreeSearcheableProps from './types';
+
+import { styles } from './styles';
+
+const JSONTreeSearcheable: React.FC<JSONTreeSearcheableProps> = ({
+  data,
+  searchTerm = '',
+}) => {
+  const valueRenderer = (value: string) => {
+    if (!searchTerm.trim()) return value;
+
+    const regex = new RegExp(searchTerm, 'gi');
+    const parts = value.toString().split(regex);
+
+    return parts.map((part, index) => (
+      <Text key={index}>
+        {index > 0 && <Text style={styles.yellowBackground}>{searchTerm}</Text>}
+        {part}
+      </Text>
+    ));
+  };
+
+  return (
+    <View style={styles.container}>
+      <JSONTree
+        data={data}
+        theme={{
+          ...theme,
+          valueLabel: {
+            fontWeight: 'bold',
+            fontFamily: 'Courier New',
+          },
+        }}
+        invertTheme={false}
+        // labelRenderer={labelRenderer}
+        valueRenderer={valueRenderer}
+      />
+    </View>
+  );
+};
+
+export default JSONTreeSearcheable;

packages/react-native-query-devtool/src/components/JSONTreeSearcheable/styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#0b1521',
+  },
+  yellowBackground: {
+    backgroundColor: 'yellow',
+  },
+});

packages/react-native-query-devtool/src/components/JSONTreeSearcheable/treeTheme.ts

@@ -0,0 +1,11 @@
+const theme = {
+  scheme: "monokai",
+  base00: "#0b1521", // background
+  base03: "#75715e", // # of key when open
+  base04: "#a59f85",
+  base09: "#f92672", // numbers
+  base0B: "#f92672", // values
+  base0D: "#fff", // keys
+};
+
+export default theme;

packages/react-native-query-devtool/src/components/JSONTreeSearcheable/types.ts

@@ -0,0 +1,6 @@
+interface JSONTreeSearcheableProps {
+  data: unknown | any;
+  searchTerm: string;
+}
+
+export default JSONTreeSearcheableProps;

packages/react-native-query-devtool/src/components/QueryRow/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { QueryDevtoolData } from '../../types';
+import { styles } from './style';
+import QueryRowProps from './types';
+
+const QueryRow: React.FC<QueryRowProps> = ({
+  item,
+  index,
+  isSelected,
+  handleSelectedRow,
+}) => {
+  const getStyle = (query: QueryDevtoolData) => {
+    if (query.observers === 0) {
+      return { backgroundColor: 'gray' };
+    }
+
+    if (query.isFetching) {
+      return { backgroundColor: 'blue' };
+    }
+
+    if (query.isStale) {
+      return { backgroundColor: 'orange' };
+    }
+
+    return { backgroundColor: 'green' };
+  };
+
+  return (
+    <TouchableOpacity onPress={() => handleSelectedRow(index)}>
+      <View style={styles.container}>
+        <View style={[styles.observersContainer, getStyle(item)]}>
+          <Text style={styles.observerNumber}>{item.observers}</Text>
+        </View>
+        <Text
+          style={[styles.queryKey, isSelected ? styles.queryKeySelected : {}]}
+        >
+          {JSON.stringify(item?.queryKey)}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default QueryRow;

packages/react-native-query-devtool/src/components/QueryRow/style.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 2,
+  },
+  observersContainer: {
+    width: 20,
+    height: 20,
+    padding: 3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  observerNumber: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    color: 'white',
+    fontSize: 12,
+  },
+  queryKey: {
+    color: 'white',
+    fontSize: 16,
+    fontFamily: 'Courier New',
+    marginLeft: 3,
+  },
+  queryKeySelected: {
+    fontWeight: 'bold',
+  },
+});

packages/react-native-query-devtool/src/components/QueryRow/types.ts

@@ -0,0 +1,10 @@
+import { QueryDevtoolData } from '../../types';
+
+interface QueryRowProps {
+  index: number;
+  item: QueryDevtoolData;
+  isSelected?: boolean;
+  handleSelectedRow: (index: number) => void;
+}
+
+export default QueryRowProps;