Merge pull request #5 from jossydeleon/actionsheet-devtool

Feature: Actionsheet Devtool

Author: josydeleon

packages/react-native-query-devtool/README.md

@@ -3,46 +3,21 @@
 ## Features
 
 - Provides a component for integrating query data in React Native applications running react-query v3, and @tanstack/react-query v4 and v5.
-- Includes a standalone app to visualize and help debug query data.
-
-## Standalone App
-
-The standalone app allows you to visualize and debug query data from your React Native application using the `@jsmdeleon/react-native-query-devtool` package.
+- (Optional) Includes a standalone app to visualize and help debug query data.
 
 ## Installation
 
-You can download the standalone app from the following link. Currently, it's available only for **macOS M1** and **Windows x64**:
-
-[Download latest App](https://github.com/jossydeleon/react-native-query-devtool-monorepo/releases)
-
-**Linux users:** You need to build the app from source as it's currently only available for **macOS M1** and **Windows x64**. Ensure to set up your environment accordingly before building the app.
-
-```bash
-# Go to app folder
-cd react-native-query-devtool-app
-
-# Install dependencies
-yarn
-
-# Build
-yarn build-server
-```
-
-After running the build command, you'll find the freshly built app in a new folder named **'out'**.
-
-## React Native Component
-
-To use the devtool component in your React Native project, install the package:
+To use the devtool component in your React Native project, install the package using `npm` or `yarn`, You will also need to install `react-native-gesture-handlers` if you haven't already.
 
 ```bash
-npm install @jsmdeleon/react-native-query-devtool
+npm install react-native-gesture-handler @jsmdeleon/react-native-query-devtool
 # or
-yarn add @jsmdeleon/react-native-query-devtool
+yarn add react-native-gesture-handler @jsmdeleon/react-native-query-devtool
 ```
 
 ## Usage
 
-In your React Native application, import `QueryNativeDevtool` to send query data to the Electron app for debugging:
+In your React Native application, import `QueryNativeDevtool`
 
 ```javascript
 import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool";
@@ -53,7 +28,7 @@ export default function App() {
       <View style={styles.container}>
         <Main />
       </View>
-      <QueryNativeDevtool queryClient={queryClient} />
+      <QueryNativeDevtool queryClient={queryClient} useRemoteDebugger={false} />
     </QueryClientProvider>
   );
 }
@@ -63,27 +38,56 @@ export default function App() {
 
 If your app runs `react-query v3` pass `version="v3"` prop to `QueryNativeDevtool`
 
-```javascript
-import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool";
+## Available Props
+
+| Prop Name            | Type        | Description                                | Default Value |
+| -------------------- | ----------- | ------------------------------------------ | ------------- |
+| `queryClient`\*      | QueryClient | First name of the user                     | undefined     |
+| `version`            | string      | Last name of the user                      | "v5"          |
+| `hideFloatingButton` | boolean     | Hides Floating button                      | false         |
+| `useRemoteDebugger`  | boolean     | Enable remote debugging via standalone app | false         |
+
+## Standalone app (Optional)
+
+If you want more room to debug your query data, you can download the standalone app from the following link. Currently, it's available only for **macOS M1** and **Windows x64**. Check [Standalone Repo](https://github.com/jossydeleon/react-native-query-devtool-monorepo/tree/main/packages/react-native-query-devtool-app)
 
+```javascript
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <View style={styles.container}>
-        <Main />
-      </View>
-      <QueryNativeDevtool queryClient={queryClient} version="v3" />
+      <QueryNativeDevtool queryClient={queryClient} useRemoteDebugger={true} />
     </QueryClientProvider>
   );
 }
 ```
 
-This will enable your React Native application to send query data to the server app for debugging purposes.
+[Download latest App](https://github.com/jossydeleon/react-native-query-devtool-monorepo/releases)
+
+**Note:** The binaries provided are not signed. If you have concerns about security or trust, you can choose to build the app from the source code for your machine.
+
+**Linux users:** You need to build the app from source as it's currently only available for **macOS M1** and **Windows x64**. Ensure to set up your environment accordingly before building the app.
+
+```bash
+# Go to app folder
+cd react-native-query-devtool-app
+
+# Install dependencies
+yarn
+
+# Build
+yarn build-server
+```
+
+After running the build command, you'll find the freshly built app in a new folder named **'out'**.
+
+**Important:** The standalone app uses port `9017` by default. Ensure that this port is available and not blocked by any firewall settings or other applications on your system.
 
 ## Examples
 
 In the example folder, you can find example projects demonstrating the usage of `@jsmdeleon/react-native-query-devtool` with different versions of React Query (v3, v4, and v5). To test the examples, navigate to the example folder, select the desired example, and run yarn ios or yarn android.
 
+[Examples Repo](https://github.com/jossydeleon/react-native-query-devtool-monorepo/tree/main/example)
+
 ```bash
 cd example
 
@@ -98,3 +102,7 @@ yarn ios
 # or
 yarn android
 ```
+
+## Contributions
+
+Contributions to improve this project are welcome! If you have any ideas for new features, enhancements, bug fixes, or optimizations, feel free to submit a pull request. You can also report any bugs or issues you encounter by opening a new issue

packages/react-native-query-devtool/assets/copy.png

@@ -23,6 +23,10 @@
     "build": "tsup"
   },
   "type": "module",
+  "dependencies": {
+    "react-native-actions-sheet": "^0.9.3",
+    "react-native-json-tree":"^1.3.0"
+  },
   "devDependencies": {
     "@types/node": "^20.11.8",
     "@types/react": "^18.2.48",
@@ -37,6 +41,7 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-gesture-handler": "*"
   }
 }

packages/react-native-query-devtool/assets/rqlogo.png

@@ -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/package.json

@@ -0,0 +1,23 @@
+import React from "react";
+import { Image, Pressable, StyleSheet } from "react-native";
+
+const CopyButton: React.FC<{ onPress?: () => void }> = ({ onPress }) => {
+  return (
+    <Pressable onPress={onPress}>
+      <Image
+        source={require("../../../assets/copy.png")}
+        style={styles.container}
+      />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 14,
+    height: 14,
+    marginRight: 5,
+  },
+});
+
+export default CopyButton;

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

@@ -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/CopyButton/index.tsx

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

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

@@ -0,0 +1,94 @@
+import React from "react";
+
+import { ScrollView, Text, View, FlatList } from "react-native";
+
+import { ScrollView as ActionsheetScrollview } from "react-native-actions-sheet";
+
+import { QueryDevtoolProps } from "../../types";
+import CloseButton from "../CloseButton";
+import DataExplorer from "../DataExplorer";
+import QueryRow from "../QueryRow";
+import Searchbar from "../Searchbar";
+import useDevtoolData from "./useDevtoolData";
+
+import { styles } from "./styles";
+
+const Devtool: React.FC<QueryDevtoolProps> = (props) => {
+  const {
+    filteredQueries,
+    selectedQuery,
+    filter,
+    flalistRef,
+    setFilter,
+    handleSelectedRow,
+  } = useDevtoolData(props);
+
+  const renderHeader = () => (
+    <View style={styles.searchbarContainer}>
+      <Searchbar filter={filter} setFilter={setFilter} />
+    </View>
+  );
+
+  const renderDataExplorerHeader = () => {
+    if (!selectedQuery) return null;
+
+    return (
+      <>
+        <View style={styles.headerContainer}>
+          <Text style={styles.headerText}>Data Explorer</Text>
+          <CloseButton onPress={() => handleSelectedRow()} />
+        </View>
+      </>
+    );
+  };
+
+  const renderDataExplorer = () => {
+    if (!selectedQuery) return null;
+
+    return (
+      <View style={styles.dataExplorerContainer}>
+        <DataExplorer selectedQuery={selectedQuery?.data} />
+      </View>
+    );
+  };
+
+  return (
+    <ActionsheetScrollview
+      nestedScrollEnabled
+      stickyHeaderIndices={[0, 2]}
+      style={styles.actionScrollviewContainer}
+    >
+      {renderHeader()}
+      <ScrollView
+        horizontal
+        scrollEnabled={false}
+        style={[
+          selectedQuery ? styles.collapsedFlatlist : styles.expandedFlatlist,
+        ]}
+      >
+        <FlatList
+          ref={flalistRef}
+          data={filteredQueries}
+          style={[styles.queriesFlatlist]}
+          renderItem={({ item, index }) => (
+            <QueryRow
+              index={index}
+              item={item}
+              isSelected={item.queryKey === selectedQuery?.queryKey}
+              handleSelectedRow={handleSelectedRow}
+            />
+          )}
+          ItemSeparatorComponent={() => <View style={styles.separator} />}
+          ListEmptyComponent={
+            <Text style={styles.flatlistEmptyMessage}>No queries found</Text>
+          }
+        />
+      </ScrollView>
+
+      {renderDataExplorerHeader()}
+      {renderDataExplorer()}
+    </ActionsheetScrollview>
+  );
+};
+
+export default Devtool;

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

@@ -0,0 +1,51 @@
+import { Dimensions, StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  actionScrollviewContainer: {
+    minHeight: 250,
+    maxHeight: 500,
+  },
+  searchbarContainer: {
+    backgroundColor: "#0b1521",
+    padding: 2,
+    paddingBottom: 1,
+  },
+  headerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "#132337",
+    padding: 10,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+  },
+  headerText: {
+    color: "white",
+  },
+  queriesContainer: {
+    padding: 10,
+  },
+  queriesFlatlist: {
+    width: Dimensions.get("screen").width,
+    paddingHorizontal: 2,
+  },
+  flatlistEmptyMessage: {
+    color: "white",
+    textAlign: "center",
+  },
+  expandedFlatlist: {
+    height: 400,
+    marginBottom: 20,
+  },
+  collapsedFlatlist: {
+    height: 250,
+  },
+  separator: {
+    borderBottomWidth: 0.3,
+    borderColor: "silver",
+    marginVertical: 5,
+  },
+  dataExplorerContainer: {
+    marginBottom: 20,
+  },
+});