Merge pull request #8 from jossydeleon/feature

v2.0.0 RC

Author: jossydeleon

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react"
+    ],
+    "rules": {
+        "@typescript-eslint/no-explicit-any": "off", // Allow any type
+        "indent": "off",
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

README.md

@@ -1,52 +1,29 @@
-# 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.
 
-![Screenshot](https://github.com/jossydeleon/react-native-query-devtool-monorepo/assets/25192002/981f444f-4a27-4d41-8a95-bab861d7edab)
+<p align="center">
+  <img src="https://github.com/jossydeleon/react-native-query-devtool-monorepo/assets/25192002/7c5011a9-262a-477e-99e8-af10289bc149" alt="rnqdt" style="display: block; margin: auto;">
+</p>
 
 ## 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 +34,7 @@ export default function App() {
       <View style={styles.container}>
         <Main />
       </View>
-      <QueryNativeDevtool queryClient={queryClient} />
+      <QueryNativeDevtool queryClient={queryClient} useRemoteDevtool={false} />
     </QueryClientProvider>
   );
 }
@@ -67,27 +44,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         |
+| `useRemoteDevtool`   | boolean     | Enable remote debugging via standalone app | true          |
+
+## 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} useRemoteDevtool={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 +108,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

example/react-query-v3/package.json

@@ -14,7 +14,8 @@
     "expo": "~50.0.6",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
-    "react-native": "0.73.4"
+    "react-native": "0.73.4",
+    "react-native-gesture-handler": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

example/react-query-v3/src/App.js

@@ -18,7 +18,11 @@ export default function App() {
         </View>
       </QueryClientProvider>
 
-      <QueryNativeDevtool queryClient={queryClient} version="v3" />
+      <QueryNativeDevtool
+        queryClient={queryClient}
+        version="v3"
+        useRemoteDevtool={false}
+      />
     </SafeAreaView>
   );
 }

example/react-query-v4/package.json

@@ -14,7 +14,8 @@
     "expo": "~50.0.6",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
-    "react-native": "0.73.4"
+    "react-native": "0.73.4",
+    "react-native-gesture-handler": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

example/react-query-v5/package.json

@@ -14,7 +14,8 @@
     "expo": "~50.0.6",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
-    "react-native": "0.73.4"
+    "react-native": "0.73.4",
+    "react-native-gesture-handler": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

package.json

@@ -5,16 +5,18 @@
     "name": "Josymar",
     "email": "[email protected]"
   },
-  "version": "1.0.0",
+  "version": "2.0.0",
   "private": true,
   "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",
-    "v3-example-android": "cd ./example/react-query-v3 && expo start --android"
+    "v3-example-android": "cd ./example/react-query-v3 && expo start --android",
+    "run-linters": "prettier --write && eslint --fix",
+    "prepare": "husky"
   },
   "workspaces": [
     "packages/*"
@@ -26,13 +28,26 @@
     "devtool"
   ],
   "type": "module",
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "prettier ./packages/react-native-query-devtool/src --write",
+      "eslint ./packages/react-native-query-devtool/src --fix"
+    ]
+  },
   "devDependencies": {
     "@types/node": "^20.11.8",
     "@types/react": "^18.2.48",
     "@types/react-native": "^0.72.8",
     "@types/react-query": "^1.2.9",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "babel-core": "^4.7.16",
     "babel-runtime": "^6.26.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.34.1",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.1.1",
     "react-native": "^0.72.9",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.1",

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

@@ -0,0 +1,52 @@
+# @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)
+
+![Screenshot 2024-03-17 at 3 31 31 PM](https://github.com/jossydeleon/react-native-query-devtool-monorepo/assets/25192002/52789d5f-df95-4dff-bc09-5435bb92e814)
+
+
+**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

packages/react-native-query-devtool-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jsmdeleon/react-native-query-devtool-app",
   "productName": "react-native-query-devtool-app",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "The standalone app allows you to visualize and debug query data from your React Native application using the @jsmdeleon/react-native-query-devtool package.",
   "main": ".webpack/main",
   "scripts": {