42 feature undock dev tools (#45)

* Detached mode support

* Icon library plugin

* build optimization

* Detached mode finalization

Author: AlemTuzlak

.prettierrc

@@ -1,8 +1,11 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"],
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ],
   "tabWidth": 2,
   "useTabs": false,
   "singleQuote": false,
   "trailingComma": "es5",
-  "semi": true
-}
+  "semi": true,
+  "printWidth": 120
+}

README.md

@@ -1,3 +1,7 @@
+<center>
+<img src="./assets/remix-dev-tools.png" style="  width:320px; height:320px;" />
+</center>
+
 # Remix Development Tools
 
 ![GitHub Repo stars](https://img.shields.io/github/stars/Code-Forge-Net/Remix-Dev-Tools?style=social)
@@ -16,6 +20,18 @@ Remix Development Tools is an open-source package designed to enhance your devel
 ### Timeline
 ![timeline](./assets/timeline.gif)
 
+## What's new?
+
+### v2.1.0
+ Detached mode support!
+
+
+Json viewer improvements:
+- Number of items in objects/arrays
+- Copy to clipboard
+- type of the value
+- Doesn't close on revalidate anymore
+- Different UI
 
 ## Features
 
@@ -57,6 +73,10 @@ The terminal tab allows you to run terminal commands from the Remix Dev Tools. T
 - You can press `Ctrl + C` to cancel the current command.
 - You can press `Ctrl + L` to clear the terminal.
 
+### Detached mode
+
+Detached mode allows you to un-dock the Remix Dev Tools from the browser and move it to a separate window. This is useful if you want to have the dev tools open on a separate monitor or if you want to have it open on a separate window on the same monitor.
+
 ## Getting Started
 
 To install and utilize Remix Development Tools, follow these steps:

assets/remix-dev-tools.png

@@ -2,11 +2,15 @@
   "name": "remix-development-tools",
   "description": "Remix development tools.",
   "author": "Alem Tuzlak",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "keywords": [
     "remix",
-    "remix-dev-tools"
+    "remix-dev-tools",
+    "remix-development-tools",
+    "remix-debugger",
+    "remix-debugger-ui",
+    "remix-debugger-ui-react"
   ],
   "private": false,
   "type": "module",
@@ -98,10 +102,10 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-select": "^1.2.2",
+    "@uiw/react-json-view": "^1.8.4",
     "clsx": "^2.0.0",
     "lucide-react": "^0.263.1",
-    "react-json-view-lite": "^0.9.7",
     "react-use-websocket": "^4.3.1",
     "tailwind-merge": "^1.14.0"
   }
-}
+}

package-lock.json

@@ -0,0 +1,25 @@
+# Plugins
+
+This folder contains all the ready to go plugins that you can copy/paste into your project.
+
+If you build a plugin please feel free to create a PR towards the `plugins` folder so we can add it to the list of plugins.
+
+## How to use
+
+Each plugin has a `README.md` file that explains how to use it.
+
+
+So all you need to do is find the one you like, copy the code and paste it into your project and follow the instructions from the `README.md` file.
+
+## Can I add my own features?
+
+All the plugins featured under this folder are meant to be copy/pasted into your project with you having all the rights to modify them as you see fit. Feel free to add/remove whatever you like. If you add something cool, please share it with us so we can add it to the list of plugins or improve the existing ones.
+
+## How to add a new plugin
+
+1. Fork the repo
+2. Create a new folder under `plugins` with the name of your plugin
+3. Add a `README.md` file with the instructions on how to use the plugin
+4. Add TODO's in the code where the user needs to modify the code to their project specifications
+5. Add an image/video/gif of the plugin in action
+6. Create a PR towards the repository!

package.json

@@ -0,0 +1,41 @@
+# Icon library plugin
+
+This plugin allows you to see all your project icons in a new tab in remix development tools, copy the code and change their classes.
+
+<video controls="controls" src="./Icon library.mp4" ></video>
+
+## How to use
+
+1. Copy the code from the plugin located in this folder.
+2. Go over the TODO's in the code and modify the code to your project specifications.
+3. Import the plugin exported from the `icon-library.tsx` into your `root.tsx` file.
+4. Add the plugin to the `plugins` array in the `RemixDevTools` component.
+
+```tsx
+  import { iconLibraryPlugin } from "~/icon-library.tsx";
+
+  <RemixDevTools
+    ...
+    plugins={[iconLibraryPlugin()]}
+  />
+```
+
+5. Run your project and open the new tab in the development tools.
+
+## How it works
+
+The plugin will use all the icons in your project that are provided to it and will display them in a grid with different sizes. 
+
+You can click on the icon to copy the code of the icon to your clipboard.
+
+You can use the input on the top right to add custom classes to the component (eg. change colors on the fly).
+
+## How to add icons
+
+This will be easy/hard depending on your project setup. The basic idea is to have an icon component that is reusable across the project by
+providing a different name and size to the component. If you do not have this you would probably need to do it in a different way. What is
+important is to have an array of icon names in the project that you can use to generate the icons.
+
+## Can I add my own features?
+
+All the plugins featured under this folder are meant to be copy/pasted into your project with you having all the rights to modify them as you see fit. Feel free to add/remove whatever you like. If you add something cool, please share it with us so we can add it to the list of plugins or improve the existing ones.