Repo readmes updated

josydeleon · josydeleon · commit 8d709c77cf14 · 2024-03-17T15:48:31.000-04:00
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# React Query Native Devtool
+# React Query Native Devtool 🐵 Monorepo
 
 React Native Query Devtool is a monorepo containing a React Native component and a standalone app to visualize query data in a similar way to react-query-devtools for the web.
 
@@ -7,46 +7,21 @@ React Native Query Devtool is a monorepo containing a React Native component and
 ## 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.
+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
-# 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:
-
-```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 server app for debugging:
+In your React Native application, import `QueryNativeDevtool`
 
 ```javascript
 import { QueryNativeDevtool } from "@jsmdeleon/react-native-query-devtool";
@@ -57,7 +32,7 @@ export default function App() {
       <View style={styles.container}>
         <Main />
       </View>
-      <QueryNativeDevtool queryClient={queryClient} />
+      <QueryNativeDevtool queryClient={queryClient} useRemoteDebugger={false} />
     </QueryClientProvider>
   );
 }
@@ -67,27 +42,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 Electron 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 packages/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
 
@@ -102,3 +106,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
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "dev-electron": "cd ./packages/react-native-query-devtool-app && electron-forge start",
     "build-server": "cd ./packages/react-native-query-devtool-app && electron-forge make",
-    "publish-server":"cd ./packages/react-native-query-devtool-app && electron-forge publish",
+    "publish-server": "cd ./packages/react-native-query-devtool-app && electron-forge publish",
     "build-client": "cd ./packages/react-native-query-devtool && tsup",
     "publish-client": "cd ./packages/react-native-query-devtool && yarn publish --access public",
     "v3-example-ios": "cd ./example/react-query-v3 && expo start --ios",
diff --git a/packages/react-native-query-devtool-app/README.md b/packages/react-native-query-devtool-app/README.md
@@ -0,0 +1,49 @@
+# @jsmdeleon/react-native-query-devtool-app
+
+## Features
+
+Standalone app to visualize and help debug query data. You can download it 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)
+
+**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
+
+# Navigate to the desired example, for example:
+cd react-query-v3
+
+# Install dependencies
+yarn
+
+# Run example
+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
diff --git a/packages/react-native-query-devtool/README.md b/packages/react-native-query-devtool/README.md
@@ -3,7 +3,7 @@
 ## Features
 
 - Provides a component for integrating query data in React Native applications running react-query v3, and @tanstack/react-query v4 and v5.
-- (Optional) Includes a standalone app to visualize and help debug query data.
+- (Optional) Includes a standalone app to visualize and help debug query data. [Download latest App](https://github.com/jossydeleon/react-native-query-devtool-monorepo/releases)
 
 ## Installation
 
